:root{--color-d0:#e53935;--color-d1:#fb8c00;--color-d2:#f9a825;--color-d3:#43a047;--color-d4:#1e88e5;--color-d5:#8e24aa;--color-d6:#00acc1;--color-d7:#f06292;--color-connector:#9e9e9e;--bg:#fff9f0;--surface:#fff;--border:#e8e2d9;--text-main:#2d2416;--text-muted:#7a6e62;--sans:"Segoe UI", system-ui, Roboto, sans-serif;font-family:var(--sans);background:var(--bg);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}*,:before,:after{box-sizing:border-box}body{min-height:100svh;margin:0}#root{width:100%;max-width:760px;margin:0 auto;padding:32px 20px 64px}.hamburger-btn{z-index:200;background:var(--surface);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:background-color .15s,box-shadow .15s;display:flex;position:fixed;top:16px;right:16px;box-shadow:0 2px 8px #0000001f}.hamburger-btn:hover{background:var(--border);box-shadow:0 4px 12px #00000029}.hamburger-icon{flex-direction:column;gap:5px;width:20px;display:flex}.hamburger-icon span{background:var(--text-main);transform-origin:50%;border-radius:2px;height:2px;transition:transform .25s,opacity .25s;display:block}.hamburger-icon.is-open span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger-icon.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger-icon.is-open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.drawer-overlay{z-index:210;background:#00000059;animation:.2s fadeIn;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer{z-index:220;background:var(--surface);flex-direction:column;width:min(320px,90vw);height:100dvh;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-4px 0 24px #0000001f}.drawer--open{transform:translate(0)}.drawer-header{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:20px 20px 16px;display:flex;position:sticky;top:0}.drawer-title{color:var(--text-main);margin:0;font-size:1.1rem;font-weight:700}.drawer-close{width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:1rem;transition:background-color .15s,color .15s;display:flex}.drawer-close:hover{background:var(--border);color:var(--text-main)}.drawer-body{flex-direction:column;gap:20px;padding:20px;display:flex}.app{flex-direction:column;align-items:center;gap:28px;display:flex}.app-title{background:linear-gradient(135deg, var(--color-d0) 0%, var(--color-d1) 100%);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(1.8rem,6vw,3rem);font-weight:800}.scope-selector{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.scope-label{color:var(--text-muted);font-size:1rem;font-weight:600}.scope-selector select{border:2px solid var(--border);background:var(--surface);color:var(--text-main);cursor:pointer;border-radius:12px;outline:none;padding:8px 16px;font-size:1.1rem;font-weight:700;transition:border-color .2s}.scope-selector select:focus{border-color:var(--color-d1)}.input-row{align-items:center;gap:8px;width:min(80%,400px);display:flex}.input-icon-btn{border:2px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;padding:8px;transition:border-color .2s,color .2s,background .2s;display:flex}.input-icon-btn:hover:not(:disabled){border-color:var(--color-d1);color:var(--color-d1);background:#1e88e514}.input-icon-btn:active:not(:disabled){transform:scale(.93)}.input-icon-btn:disabled{opacity:.3;cursor:default}.step-btns{flex-direction:column;gap:3px;display:flex}.step-btn{border-radius:8px;padding:4px 8px}.number-input{text-align:center;border:3px solid var(--border);background:var(--surface);width:100%;min-width:0;color:var(--text-main);border-radius:20px;outline:none;padding:12px 20px;font-family:inherit;font-size:clamp(2.5rem,10vw,5rem);font-weight:700;transition:border-color .2s,box-shadow .2s}.number-input:focus{border-color:var(--color-d1);box-shadow:0 0 0 4px #1e88e526}.number-input::placeholder{color:var(--border)}.colored-digits{letter-spacing:4px;align-items:baseline;gap:6px;font-size:clamp(3rem,14vw,7rem);font-weight:900;line-height:1;display:flex}.colored-words{text-align:center;max-width:640px;margin:0;font-size:clamp(1.4rem,4vw,2.2rem);line-height:1.6}.speak-button{background:var(--color-d3);color:#fff;cursor:pointer;border:none;border-radius:50px;padding:12px 32px;font-size:1.2rem;font-weight:700;transition:transform .1s,box-shadow .2s;box-shadow:0 4px 14px #00897b59}.speak-button:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 18px #00897b73}.speak-button:active:not(:disabled){transform:scale(.97)}.speak-button:disabled{opacity:.7;cursor:wait}.config-label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.config-label span{color:var(--text-main);font-weight:600}.config-label span em{color:var(--text-muted);font-size:.8rem;font-style:italic;font-weight:400}.config-label input[type=range]{width:100%;accent-color:var(--color-d1);cursor:pointer}.config-label input[type=text],.config-label input[type=password]{border:1px solid var(--border);color:var(--text-main);background:var(--bg);border-radius:8px;outline:none;padding:8px 12px;font-family:monospace;font-size:.85rem;transition:border-color .2s}:is(.config-label input[type=text],.config-label input[type=password]):focus{border-color:var(--color-d1)}.speed-value{color:var(--color-d3);font-size:.9rem;font-weight:700}.config-hint{color:var(--text-muted);text-align:center;background:#00000005;border-radius:6px;margin:0;padding:8px 12px;font-size:.8rem}@media (width<=480px){.app{gap:20px}.input-row{width:90%}}