color:#eee; width:100%; [hidden] { display:none!important; } .script-stage { width:100%; } textarea, .reading-window { box-sizing:border-box; width:100%; height:2.8em; padding:0; margin:0; color:#f2f2ef; background:transparent; border:0; text-align:center; font:400 clamp(24px,3vw,35px)/1.4 Arial,Helvetica,sans-serif; letter-spacing:-.6px; } textarea { display:block; resize:none; overflow-y:auto; border-radius:0; scrollbar-width:thin; scrollbar-color:#444 transparent; } .reading-window { overflow:hidden; position:relative; } .reading-track { white-space:pre-wrap; overflow-wrap:anywhere; transition:transform .22s ease; } .word { color:#777; transition:color .12s linear; } .word.spoken { color:#f2f2ef; } .script-tools { display:flex; min-height:44px; align-items:center; justify-content:center; gap:16px; margin-top:8px; color:#888; font:10px ui-monospace,monospace; } .script-tools button { color:#aaa; font:11px ui-monospace,monospace; border:0; background:none; min-height:44px; padding:6px 10px; cursor:pointer; } [data-pages] { display:inline-flex; } :focus-visible { outline:1px solid #aaa; outline-offset:4px; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } @media(max-width:600px) { textarea,.reading-window { font-size:24px; } } @media(prefers-reduced-motion:reduce) { .reading-track,.word { transition:none; } }