:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,Segoe UI,Roboto,sans-serif;line-height:1.5}body{min-height:100vh;margin:0}:root{--bg:#fff8ec;--card:#fffdf8;--ink:#3a2a1a;--muted:#97785a;--accent:#d35400;--accent-deep:#a8410b;--accent-ink:#fff;--gold:#c79a3a;--maroon:#7a1f1f;--line:#ecd9b8;--player-h:calc(76px + env(safe-area-inset-bottom,0px))}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{width:100%;max-width:760px;height:100dvh;padding:16px 16px calc(var(--player-h) + 12px);flex-direction:column;margin:0 auto;display:flex}.topbar{color:#fff;background:linear-gradient(135deg, #f93 0%, var(--accent) 60%, var(--accent-deep) 100%);border-radius:14px;align-items:center;gap:10px;margin-bottom:8px;padding:8px 12px;display:flex;box-shadow:0 6px 18px #a8410b40}.topbar .om{border:2px solid var(--gold);text-shadow:0 1px 2px #00000040;background:#fff8ec2e;border-radius:50%;flex:none;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;line-height:1;display:flex}.topbar h1{letter-spacing:.5px;margin:0;font-size:1.25rem;font-weight:700}.brand-deva{opacity:.92;font-weight:600}.subtitle{color:#fff8ece6;margin:1px 0 0;font-size:.78rem}.controls{background:var(--card);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:8px;padding:8px 10px;display:flex}.field{color:var(--muted);flex-direction:column;gap:3px;font-size:.78rem;display:flex}.field select,.field input[type=range]{border:1px solid var(--line);width:100%;min-height:38px;color:var(--ink);background:#fff;border-radius:10px;padding:7px 10px;font-size:16px}.field.rate input{padding:0}.tools{flex-wrap:nowrap;align-items:center;gap:8px;display:flex}.goto{flex:auto;align-items:center;gap:6px;min-width:0;display:inline-flex}.goto input{border:1px solid var(--line);width:84px;min-width:0;color:var(--ink);background:#fff;border-radius:999px;flex:auto;padding:6px 10px;font-size:16px}.awake-toggle,.font-size{flex:none}.goto button{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600}.goto button:disabled{opacity:.4;cursor:not-allowed}.awake-toggle{border:1px solid var(--line);width:auto;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;display:inline-flex}.awake-toggle .ico{font-size:.95rem;line-height:1}.awake-toggle.on{border-color:var(--accent);color:var(--accent-deep);background:#fff3e6;font-weight:600}.font-size{border:1px solid var(--line);background:#fff;border-radius:999px;align-items:center;gap:4px;padding:3px 6px;display:inline-flex}.font-size button{border:1px solid var(--accent);background:var(--accent);width:26px;height:26px;color:var(--accent-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;line-height:1;display:inline-flex}.font-size button:disabled{opacity:.4;cursor:not-allowed}.font-size-label{color:var(--muted);text-align:center;min-width:14px;font-size:.8rem;font-weight:600}.banner{border-radius:10px;margin:14px 0 0;padding:10px 14px;font-size:.9rem;line-height:1.4}.banner.info{color:#8a4b12;background:#fff3e6;border:1px solid #f0c9a0}.banner.error{color:#9c2a2a;background:#fdeaea;border:1px solid #f0b0b0}.reader{flex-direction:column;flex:auto;min-height:0;margin-top:10px;display:flex}.page-meta{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.8rem;display:flex}.page-count{align-items:center;gap:12px;display:inline-flex}.synth-status{color:#1a8a3c;align-items:center;gap:6px;font-weight:600;display:inline-flex}.spinner{border:2px solid #00000026;border-top-color:#1a8a3c;border-radius:50%;width:12px;height:12px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.page{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);white-space:pre-wrap;overflow-wrap:anywhere;color:#2c2012;border-radius:12px;flex:auto;min-height:0;padding:22px 18px;font-size:1.15rem;line-height:1.8;position:relative;overflow-y:auto;box-shadow:0 2px 10px #a8410b0f}.page p{margin:0}.page .word.active{color:var(--maroon);background:linear-gradient(#ffe2a8,#ffcf6b);border-radius:4px;box-shadow:0 0 0 2px #ffcf6b80}.muted{color:var(--muted)}.player{z-index:10;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#faf7f2f2;justify-content:space-between;gap:6px;display:flex;position:fixed;bottom:0;left:0;right:0}.player button{border:1px solid var(--line);min-width:0;min-height:56px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-radius:12px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:2px;padding:6px 4px;display:flex}.player button .ico{font-size:1.2rem;line-height:1}.player button .label{font-size:.7rem}.player button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);flex:1.4 1 0;font-weight:600}.player button:active:not(:disabled){transform:scale(.97)}.player button:disabled{opacity:.4;cursor:not-allowed}@media (width>=600px){.app{padding:24px 24px 32px}.topbar h1{font-size:2rem}.controls{flex-flow:wrap;align-items:flex-end;gap:16px;padding:16px}.field{flex:180px}.tools{flex:100%}.page{padding:28px;font-size:1.3rem;line-height:1.9}.player{border:1px solid var(--line);border-radius:999px;justify-content:center;gap:8px;max-width:760px;margin:20px auto 0;padding:10px;position:sticky;left:auto;right:auto}.player button{border-radius:999px;flex-direction:row;flex:none;gap:6px;min-height:48px;padding:10px 18px}.player button.primary{flex:none}.player button .label{font-size:.95rem}.player button:hover:not(:disabled){border-color:var(--accent)}}@media (prefers-reduced-motion:reduce){.player button:active:not(:disabled){transform:none}}
