*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Outfit,Segoe UI,system-ui,sans-serif;transition:background .25s}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.app{flex-direction:column;min-height:100%;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;display:flex}.brand{letter-spacing:-.03em;color:var(--text);font-size:1.25rem;font-weight:700;text-decoration:none}.brand em{color:var(--accent);font-style:normal}.body{flex-direction:column;flex:1;align-items:center;width:100%;max-width:860px;margin:0 auto;padding:24px 28px 48px;display:flex}.btn{background:var(--buttonBg);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 18px;font-size:.95rem;transition:background .15s,border-color .15s}.btn:hover{background:var(--buttonHover);border-color:var(--borderHover)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn-primary:hover{filter:brightness(1.1);background:var(--accent)}.btn-sm{border-radius:8px;padding:7px 14px;font-size:.87rem}.btn-ghost{color:var(--textMuted);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--text);background:var(--buttonBg)}.icon-btn{width:38px;height:38px;color:var(--textMuted);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{color:var(--text);background:var(--buttonBg)}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}.skip-link{color:var(--textMuted);cursor:pointer;text-underline-offset:3px;font-size:.9rem;text-decoration:underline}.skip-link:hover{color:var(--text)}.modal-backdrop{z-index:60;background:#0000008c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;max-height:85vh;padding:24px;overflow-y:auto}.modal h2{margin-bottom:14px;font-size:1.15rem}.modal textarea{background:var(--surfaceAlt);width:100%;min-height:180px;color:var(--text);border:1px solid var(--border);font:inherit;resize:vertical;border-radius:10px;padding:12px;font-size:.92rem}.modal-actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.library{flex-direction:column;gap:12px;width:100%;display:flex}.library-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.library-head h1{letter-spacing:-.03em;font-size:1.6rem}.slot-meter{color:var(--textMuted);font-size:.85rem}.sort-row{gap:6px;display:flex}.sort-row .btn.active{border-color:var(--accent);color:var(--accent)}.doc-row{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:14px;align-items:center;gap:16px;padding:16px 18px;transition:border-color .15s;display:flex}.doc-row:hover{border-color:var(--borderHover)}.doc-main{flex:1;min-width:0}.doc-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.doc-meta{color:var(--textMuted);flex-wrap:wrap;gap:12px;margin-top:4px;font-size:.82rem;display:flex}.badge{letter-spacing:.08em;background:var(--accentSoft);color:var(--accent);text-transform:uppercase;border-radius:6px;flex-shrink:0;padding:3px 8px;font-size:.68rem;font-weight:700;display:inline-block}.doc-progress{background:var(--progressBg);border-radius:2px;height:4px;margin-top:8px;overflow:hidden}.doc-progress>div{background:var(--progress);height:100%}.dropzone{border:1.5px dashed var(--border);text-align:center;color:var(--textMuted);border-radius:16px;padding:42px 20px;transition:border-color .15s,background .15s}.dropzone.over{border-color:var(--accent);background:var(--accentSoft)}.reader{background:var(--bg);flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.reader-top{color:var(--textMuted);justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;font-size:.85rem;display:flex}.reader-stage{-webkit-user-select:none;user-select:none;flex:1;position:relative}.word-track{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.word-line{white-space:pre;height:1.35em;position:relative}.word-box{font-synthesis:none;letter-spacing:0;font-kerning:none;font-feature-settings:"kern" 0, "liga" 0, "calt" 0;font-weight:400;display:flex;position:absolute;top:0}.word-box .orp{color:var(--orp-color,var(--accent));text-shadow:0 0 20px var(--accentGlow);position:relative}.guide-notch{left:var(--anchor-x);opacity:.7;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.guide-notch.top{border-top:6px solid var(--orp-color,var(--accent))}.guide-notch.bottom{border-bottom:6px solid var(--orp-color,var(--accent))}.reader-bottom{flex-direction:column;gap:12px;padding:14px 20px 22px;display:flex}.progress-bar{cursor:pointer;align-items:center;height:18px;display:flex;position:relative}.progress-bar .rail{background:var(--progressBg);border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar .fill{background:var(--progress);height:100%}.bookmark-dot{background:var(--accent);border:1.5px solid var(--bg);border-radius:50%;width:7px;height:7px;position:absolute;top:50%;transform:translate(-50%,-50%)}.transport{color:var(--textMuted);justify-content:center;align-items:center;gap:10px;display:flex}.transport .wpm{color:var(--text);text-align:center;min-width:88px;font-family:Vif Mono,monospace;font-size:.95rem}.chapter-overlay{background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.chapter-overlay .kicker{color:var(--textMuted);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}.chapter-overlay .title{text-align:center;max-width:80%;font-size:1.5rem;font-weight:600}.side-panel{background:var(--surface);border-left:1px solid var(--border);z-index:20;width:min(340px,88vw);padding:18px;position:absolute;top:0;bottom:0;right:0;overflow-y:auto}.side-panel h3{letter-spacing:.1em;text-transform:uppercase;color:var(--textMuted);margin-bottom:12px;font-size:.85rem}.side-panel .entry{text-align:left;width:100%;color:var(--text);border-radius:8px;padding:10px 12px;font-size:.92rem;display:block}.side-panel .entry:hover{background:var(--buttonBg)}.side-panel .entry.current{color:var(--accent)}.onboarding{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:24px;display:flex}.onboarding h1{letter-spacing:-.04em;font-size:2.2rem;font-weight:700}.onboarding .lede{color:var(--textMuted);max-width:460px;font-size:1.1rem;line-height:1.7}.sample-stage{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:min(620px,92vw);min-height:160px;position:relative;overflow:hidden}.kicker{color:var(--textMuted);letter-spacing:.1em;text-transform:uppercase;font-size:.85rem}.tips{text-align:left;gap:14px;width:100%;max-width:540px;display:grid}.tip{background:var(--surface);border:1px solid var(--border);border-radius:12px;gap:14px;padding:14px 18px;display:flex}.tip .t-title{margin-bottom:3px;font-size:.95rem;font-weight:600}.tip .t-body{color:var(--textMuted);font-size:.87rem;line-height:1.5}.wpm-big{color:var(--accent);font-family:Vif Mono,monospace;font-size:3rem;font-weight:700}.wpm-big span{color:var(--textMuted);font-size:1.1rem;font-weight:400}.settings{flex-direction:column;gap:18px;width:100%;display:flex}.settings h1{letter-spacing:-.03em;font-size:1.6rem}.setting-group{flex-direction:column;gap:2px;display:flex}.setting-group>.card{border-radius:0}.setting-group>.card:first-of-type{border-radius:16px 16px 0 0}.setting-group>.card:last-of-type{border-radius:0 0 16px 16px}.setting-group>.card:only-of-type{border-radius:16px}.setting-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.setting-row .label{font-size:.95rem}.setting-row .hint{color:var(--textMuted);margin-top:2px;font-size:.8rem}.row-controls{align-items:center;gap:10px;display:flex}@media (max-width:520px){.setting-row{flex-wrap:wrap}.setting-row>:first-child{flex:1 0 100%}.row-controls{flex-wrap:wrap}.row-controls input[type=range]{flex:140px;min-width:0}}.seg{background:var(--surfaceAlt);border:1px solid var(--border);border-radius:10px;gap:2px;padding:3px;display:inline-flex}.seg button{color:var(--textMuted);border-radius:7px;padding:6px 12px;font-size:.85rem}.seg button.active{background:var(--buttonHover);color:var(--text)}.stat-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stat{text-align:center;background:var(--surfaceAlt);border-radius:10px;padding:12px 6px}.stat .value{font-family:Vif Mono,monospace;font-size:1.25rem;font-weight:700}.stat .label{color:var(--textMuted);margin-top:3px;font-size:.75rem}.toast{background:var(--surfaceAlt);border:1px solid var(--border);color:var(--text);z-index:80;border-radius:10px;padding:10px 18px;font-size:.9rem;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.fade-up{animation:.45s both fadeUp}.fade-up-d1{animation:.45s 80ms both fadeUp}.fade-up-d2{animation:.45s .16s both fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.fade-up,.fade-up-d1,.fade-up-d2{animation:none}body{transition:none}}.boot{background:#07070d;min-height:100vh}.reading-stage{width:100%;max-width:44rem;height:100%;margin:0 auto;position:relative}.reader-bottom .stage-col{flex-direction:column;gap:12px;width:100%;max-width:44rem;margin:0 auto;display:flex}.quick-settings{z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:14px;width:min(340px,92vw);max-height:min(70vh,560px);padding:16px;display:flex;position:absolute;top:8px;right:12px;overflow-y:auto;box-shadow:0 12px 40px #00000059}.quick-settings .qs-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.quick-settings .qs-label{color:var(--textMuted);font-size:.85rem}.quick-settings .seg button{padding:5px 9px;font-size:.8rem}.settings-close{z-index:50;background:var(--surfaceAlt);border:1px solid var(--border);width:40px;height:40px;color:var(--textMuted);border-radius:12px;justify-content:center;align-items:center;font-size:1rem;display:flex;position:fixed;top:16px;right:20px}.settings-close:hover{color:var(--text);border-color:var(--borderHover)}.select{background:var(--surfaceAlt);color:var(--text);border:1px solid var(--border);font:inherit;cursor:pointer;border-radius:10px;padding:8px 12px;font-size:.9rem}input[type=color]{appearance:none;border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:50%;width:32px;height:32px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}input[type=color]::-moz-color-swatch{border:none;border-radius:50%}.select:hover{border-color:var(--borderHover)}.select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.banner{background:var(--surfaceAlt);border:1px solid var(--border);width:min(680px,100vw - 32px);color:var(--textMuted);z-index:70;border-radius:12px;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;font-size:.87rem;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}