body{margin:0;font-family:system-ui,sans-serif;background:#0f172a;color:#e5e7eb}main{max-width:700px;margin:0 auto;padding:2rem}h1{text-align:center;margin-bottom:2rem}.reader{line-height:1.8;font-size:1.2rem;cursor:text}.char{display:inline-block;margin-right:.12rem;opacity:.8;font-weight:400;transition:opacity .3s ease,text-shadow .3s ease,font-weight .3s ease}.char.read{opacity:1;font-weight:600}.char.active{opacity:1;font-weight:700;text-shadow:0 0 12px rgba(96,165,250,.9)}.controls{margin-top:2rem;display:flex;gap:1.5rem;justify-content:center;align-items:center}button{background:#2563eb;color:#fff;border:none;padding:.6rem 1.2rem;font-size:1rem;border-radius:6px;cursor:pointer}button:hover{background:#1d4ed8}input[type=range]{width:160px}@media (prefers-reduced-motion: reduce){.char{transition:none;text-shadow:none}}