:root{--bg:#0b0c0f;--panel:#11131a;--panel2:#0f1117;--text:#e9ecf1;--muted:#c4cad6;--border:#ffffff14;--accent:#4ab8c8;--good:#2ee59d;--shadow:0 16px 48px #00000059;--radius:18px;--mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";--split-left:50%;--splitter-width:16px;--body-glow1:#4ab8c81a;--body-glow2:#2ee59d14;--card-bg:linear-gradient(180deg, #ffffff0d, #ffffff05);--cardheader-bg:#0003;--display-bg:#0000004d;--surface-border:#ffffff1a;--textarea-bg:#00000038;--progress-track:#ffffff12;--btn-bg:#ffffff0f;--btn-border-clr:#ffffff1f;--btn-hover-bg:#ffffff1c;--hover-chip:#ffffff12;--key-bg:#ffffff1a;--key-border-clr:#ffffff29;--crosshair-clr:#fff3;--stats-overlay-bg:#0b0c0fe0;--modal-bg:linear-gradient(180deg, #0f1117fa, #0b0c0ffc);--modal-scrim:#000000a6;--cleanup-bg:#ffffff05;--input-bg:#00000047;--input-border-clr:#ffffff1f;--pill-bg:#ffffff0d;--splitter-line:#ffffff14;--splitter-handle-bg:#ffffff1f;--splitter-handle-border-clr:#ffffff14}.theme-light{--bg:#f2f4f8;--panel:#fff;--panel2:#f7f8fc;--text:#1a1d24;--muted:#5e6678;--border:#00000017;--shadow:0 16px 48px #0000001a;--body-glow1:#4ab8c814;--body-glow2:#2ee59d0d;--card-bg:linear-gradient(180deg, #fffffff7, #fcfeffed);--cardheader-bg:#0000000a;--display-bg:#0000000d;--surface-border:#0000001a;--textarea-bg:#0000000a;--progress-track:#00000017;--btn-bg:#0000000d;--btn-border-clr:#0000001f;--btn-hover-bg:#00000017;--hover-chip:#0000000f;--key-bg:#00000014;--key-border-clr:#00000026;--crosshair-clr:#0000001a;--stats-overlay-bg:#f8fafded;--modal-bg:linear-gradient(180deg, #f8fafdfc, #f2f4f8fc);--modal-scrim:#00000073;--cleanup-bg:#00000008;--input-bg:#0000000d;--input-border-clr:#0000001f;--pill-bg:#0000000d;--splitter-line:#00000017;--splitter-handle-bg:#0000001f;--splitter-handle-border-clr:#00000012}*{box-sizing:border-box}html,body{height:100%}body{font-family:var(--sans);background:radial-gradient(1200px 800px at 20% 0%, var(--body-glow1), transparent 50%), radial-gradient(1000px 700px at 95% 10%, var(--body-glow2), transparent 55%), var(--bg);color:var(--text);margin:0;font-size:14px;line-height:1.5;display:flex}body.layout-focus-mode .panel-text,body.layout-focus-mode .splitter{display:none}body.layout-focus-mode .workspace{flex-direction:column}body.layout-focus-mode .panel-reader{flex:auto}.app{flex-direction:column;flex:1;gap:18px;min-height:0;margin:0 auto;padding:24px 32px;display:flex}.appHeader{justify-content:space-between;align-items:center;gap:12px;padding:6px 0;display:flex;position:relative}.headerActions{align-items:center;gap:8px;display:flex;position:relative}.brand{align-items:center;gap:10px;min-width:0;display:flex}.logo{background:radial-gradient(12px 12px at 30% 30%,#4ab8c8f2,#4ab8c800),radial-gradient(14px 14px at 70% 65%,#2ee59de6,#2ee59d00),linear-gradient(#ffffff2e,#ffffff0a);border:1px solid #ffffff24;border-radius:12px;width:36px;height:36px}.brandCopy h1{margin:0;font-size:16px;font-weight:650}.brandCopy p{color:var(--muted);margin:0;font-size:14px}.workspace{flex:1;gap:0;min-height:0;display:flex}.panel{min-height:0;display:flex}.panel-text{flex:0 0 var(--split-left);min-width:280px;padding-right:12px}.panel-reader{flex:auto;min-width:0;padding-left:12px;display:none}body.reader-loaded .panel-reader{display:flex}.splitter{flex:0 0 var(--splitter-width);cursor:col-resize;justify-content:center;align-items:center;display:none;position:relative}body.reader-loaded .splitter{display:flex}.heroPanel{flex:auto;justify-content:center;align-items:center;min-height:0;padding-left:12px;display:flex}body.reader-loaded .heroPanel{display:none}.heroContent{flex-direction:column;gap:20px;max-width:460px;padding:32px 0;display:flex}.heroGlyph{background:radial-gradient(16px 16px at 28% 28%,#4ab8c8f2,#4ab8c800),radial-gradient(18px 18px at 72% 68%,#2ee59de6,#2ee59d00),linear-gradient(#ffffff24,#ffffff0a);border:1px solid #ffffff1f;border-radius:16px;flex-shrink:0;width:52px;height:52px}.heroTitle{letter-spacing:-.5px;background:linear-gradient(135deg, var(--text) 40%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(28px,3.2vw,44px);font-weight:750;line-height:1.12}.heroSub{color:var(--muted);margin:0;font-size:15px;line-height:1.65}.heroFeatures{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.heroFeatures li{color:var(--text);padding-left:20px;font-size:14px;line-height:1.5;position:relative}.heroFeatures li:before{content:"";background:var(--accent);opacity:.85;border-radius:50%;width:6px;height:6px;position:absolute;top:8px;left:0}.heroCta{color:var(--muted);background:#4ab8c80f;border:1px solid #4ab8c826;border-radius:12px;margin:0;padding:14px 16px;font-size:14px;line-height:1.6}.splitter:before{content:"";background:var(--splitter-line);width:1px;position:absolute;top:16px;bottom:16px}.splitterHandle{background:var(--splitter-handle-bg);border:1px solid var(--splitter-handle-border-clr);border-radius:999px;width:6px;height:54px}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card-bg);box-shadow:var(--shadow);flex-direction:column;flex:1;display:flex;overflow:hidden}.cardHeader{border-bottom:1px solid var(--border);background:var(--cardheader-bg);align-items:center;gap:12px;padding:12px 16px;display:flex}.cardHeader .meta{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.panel-text .cardHeader{display:none}.panel-text.has-text .cardHeader{display:flex}.readerMeta{opacity:.4;align-items:center;gap:8px;transition:opacity .3s;display:flex}.panel-reader.reader-has-text .readerMeta{opacity:1}.readerHeaderActions{flex-wrap:wrap;align-items:center;gap:4px;margin-left:auto;display:flex}.readerHeaderActions .btnFlat{color:var(--muted);letter-spacing:.2px;border-radius:8px;padding:7px 12px;font-size:15px}.readerHeaderActions .btnFlat .settingsIcon{font-size:20px;line-height:1}.readerHeaderActions .btnFlat:hover{color:var(--text);background:var(--hover-chip)}.cardBody{flex-direction:column;flex:1;gap:16px;padding:14px 16px 16px;display:flex}textarea{resize:vertical;background:var(--textarea-bg);border:1px solid var(--surface-border);width:100%;min-height:360px;color:var(--text);border-radius:14px;outline:none;padding:14px;font-size:14px;line-height:1.6}textarea:focus{border-color:#4ab8c873;box-shadow:0 0 0 4px #4ab8c81a}.controls{flex-direction:column;gap:14px;display:flex}.actionBar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}[data-action-row]{flex-wrap:wrap;justify-content:flex-start;gap:12px;width:100%}[data-action-row] #pasteBtn,[data-action-row] #clearBtn{margin-left:auto}.btn{appearance:none;cursor:pointer;color:var(--text);background:var(--btn-bg);border:none;border:1px solid var(--btn-border-clr);letter-spacing:.15px;border-radius:14px;padding:10px 16px;font-size:14px;font-weight:600;line-height:1.4;transition:transform 80ms,background .18s,border-color .18s}.btn:hover{background:var(--btn-hover-bg)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btnPlay{z-index:1;min-width:80px;position:absolute;bottom:15%;left:50%;transform:translate(-50%)}.btnPlay:active{transform:translate(-50%)translateY(2px)}.btnPrimary{color:#0b0c0f;background:linear-gradient(#4ab8c8f2,#4ab8c8bf);border-color:#4ab8c899}.btnPrimary:hover{background:linear-gradient(#4ab8c8,#4ab8c8d9)}.btnPrimary.is-playing{color:#0b0c0f;background:linear-gradient(#2ee59df2,#2ee59dbf);border-color:#2ee59da6}[data-action-row].clear-only{justify-content:flex-end;width:100%}.btnGhost{background:0 0;border-color:#ffffff29}.theme-light .btnGhost{border-color:#00000029}.btn.is-active{color:var(--accent);background:#4ab8c824;border-color:#4ab8c866}.btnStep{border-radius:10px;min-width:38px;padding:7px 14px;font-size:18px;font-weight:400;line-height:1}.btnFlat{appearance:none;cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:8px;align-items:center;gap:6px;padding:6px 8px;font-size:16px;font-weight:500;line-height:1;transition:color .15s,background .15s;display:inline-flex}.btnFlat:hover{color:var(--text);background:var(--hover-chip)}.btnFlat:active{transform:translateY(1px)}.btnFlat.is-active{color:var(--accent)}.btnIcon{border-radius:12px;justify-content:center;align-items:center;width:38px;height:38px;padding:0;font-size:18px;font-weight:400;display:inline-flex}.readerIconGroup{align-items:center;gap:4px;display:flex}.readerIconGroup .btnFlat{color:var(--muted);padding:6px 8px;font-size:20px}.readerIconGroup .btnFlat:hover{color:var(--text);background:var(--hover-chip)}.readerIconGroup .btnFlat.is-active{color:var(--accent)}.pill{color:var(--muted);background:var(--pill-bg);white-space:nowrap;border-radius:999px;padding:5px 10px;font-size:14px;font-weight:500}#statusPill[data-status=playing]{color:var(--good)}#statusPill[data-status=done]{color:var(--accent)}.tiny{color:var(--muted);font-size:14px;line-height:1.5}.readerStage{flex-direction:column;flex:1;gap:14px;display:flex}.display{background:var(--display-bg);border:1px solid var(--surface-border);border-radius:18px;flex:none;justify-content:center;align-items:center;height:clamp(220px,35vh,320px);display:flex;position:relative;overflow:hidden}.crosshair{pointer-events:none;position:absolute;inset:0}.crosshair:before,.crosshair:after{content:"";pointer-events:none;margin:auto;position:absolute;inset:0}.crosshair:before{background:linear-gradient(180deg, transparent, var(--crosshair-clr), transparent);width:1px;height:100%}.crosshair:after{background:linear-gradient(90deg, transparent, var(--crosshair-clr), transparent);width:100%;height:1px}.word{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:var(--word-size,clamp(42px, 4.6vw, 76px));letter-spacing:.6px;text-shadow:0 18px 40px #00000059;-webkit-user-select:none;user-select:none;min-width:40px;line-height:1.08;position:relative}.theme-light .word{text-shadow:0 4px 16px #0000001f}.reader-word{will-change:transform;align-items:baseline;gap:0;display:flex}.reader-word span{display:inline-block}.focus-char{color:var(--accent)}.focus-char.focus-muted{color:var(--text)}.placeholder{color:var(--muted);font-size:16px;font-family:var(--sans);font-style:italic}.progressWrap{flex-direction:column;gap:6px;display:flex}.progress{background:var(--progress-track);border:1px solid var(--surface-border);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:999px;height:20px;position:relative}.bar{border-radius:inherit;background:linear-gradient(90deg,#2d9bafcc,#4ab8c8f2);width:0%;height:100%;transition:width .12s linear}.scrubHandle{background:var(--accent,#4ab8c8);pointer-events:none;opacity:0;z-index:2;border-radius:50%;width:14px;height:14px;transition:opacity .15s,transform 50ms;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #00000059,0 1px 4px #0006}.progress:hover .scrubHandle,.progress.scrubbing .scrubHandle{opacity:1}.progress.scrubbing .scrubHandle{transition:opacity .15s;transform:translate(-50%,-50%)scale(1.2)}.progress.scrubbing .bar{transition:none}.etaOverlay{text-align:center;letter-spacing:.3px;color:#fffc;text-shadow:0 1px 3px #0009;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:11px;font-weight:600;line-height:20px;display:block;position:absolute;inset:0}.theme-light .etaOverlay{color:#1a1d24b3;text-shadow:0 1px 2px #ffffff80}.readerControls{flex-direction:column;gap:0;display:flex}.controlsRow{justify-content:space-between;align-items:center;gap:12px;display:flex}.primaryControls{align-items:center;gap:10px;display:flex}.wpmStepper{align-items:center;gap:6px;display:flex}.wpmDisplay{text-align:center;min-width:44px;color:var(--text);font-size:16px;font-weight:700}.wpmUnit{color:var(--muted);font-size:14px}.cleanupSection{border:1px solid var(--border);background:var(--cleanup-bg);border-radius:14px;flex-direction:column;gap:12px;padding:14px 16px;display:flex}.settingsModal{z-index:2000;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.settingsModal.open{display:flex}.settingsOverlay{background:var(--modal-scrim);position:absolute;inset:0}.settingsPanel{background:var(--modal-bg);border:1px solid var(--border);border-radius:20px;width:min(720px,95%);max-height:90vh;padding:20px;position:relative;overflow:auto;box-shadow:0 40px 120px #0000008c}.modalHeader{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.modalHeader h3{color:var(--text);margin:0;font-size:18px;font-weight:700}.modalBody{flex-direction:column;gap:18px;display:flex}.cleanupSection h3{color:var(--accent);letter-spacing:.2px;margin:0;font-size:14px;font-weight:700}.row{align-items:center;gap:10px;display:flex}.row.wrap{flex-wrap:wrap}.row.space{flex-wrap:wrap;justify-content:space-between}.grid.twoCol{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.field{flex-direction:column;gap:8px;display:flex}.field label{color:var(--accent);font-size:14px;font-weight:600}.field select,.field input[type=number]{background:var(--input-bg);border:1px solid var(--input-border-clr);color:var(--text);border-radius:12px;outline:none;padding:10px 12px;font-size:14px}.field select:focus,.field input[type=number]:focus{border-color:#4ab8c88c;box-shadow:0 0 0 3px #4ab8c81f}.rangeRow{gap:10px;display:flex}.toggle{color:var(--text);cursor:pointer;align-items:flex-start;gap:0;font-size:14px;line-height:1.5;display:flex}.toggle input{cursor:pointer;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;margin-top:2px;margin-right:10px}input[type=range]{width:100%;accent-color:var(--accent)}.statsOverlay{background:var(--stats-overlay-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;z-index:10;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:none;position:absolute;inset:0}.statsOverlay.visible{display:flex}.statsOverlay .statsTitle{color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-size:14px;font-weight:600}.statsGrid{gap:40px;display:flex}.statItem{flex-direction:column;align-items:center;gap:6px;display:flex}.statNum{color:var(--text);font-size:42px;font-weight:700;line-height:1}.statNum.accent{color:var(--accent)}.statLabel{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:14px;font-weight:600}.statsActions{gap:10px;display:flex}.fontSizeRow{align-items:center;gap:10px;display:flex}.fontSizeRow input[type=range]{cursor:pointer;flex:1}.fontSizeLarge{font-size:20px;line-height:1}.cleanPreview{border:1px solid var(--border);background:var(--display-bg);border-radius:14px;padding:12px 14px}.cleanPreview summary{cursor:pointer;color:var(--text);-webkit-user-select:none;user-select:none;font-size:14px;font-weight:600}.cleanPreview pre{white-space:pre-wrap;font-family:var(--mono);color:var(--text);margin:12px 0 0;font-size:14px;line-height:1.6}.hint{color:var(--muted);font-size:14px;line-height:1.6}.popout-app{width:100%;max-width:640px;margin:0 auto;padding:32px 22px}.popout-controls{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.popout-meta{color:var(--muted);gap:12px;margin-top:10px;font-size:14px;display:flex}.sideMenu{z-index:3000;pointer-events:none;position:fixed;inset:0}.sideMenu.open{pointer-events:auto}.sideMenuOverlay{background:var(--modal-scrim);opacity:0;transition:opacity .25s;position:absolute;inset:0}.sideMenu.open .sideMenuOverlay{opacity:1}.sideMenuPanel{background:var(--modal-bg);border-left:1px solid var(--border);flex-direction:column;width:min(320px,90vw);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-20px 0 60px #0006}.sideMenu.open .sideMenuPanel{transform:translate(0)}.sideMenuHeader{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 20px 16px;display:flex}.sideMenuTitle{color:var(--text);font-size:16px;font-weight:700}.sideMenuBody{flex-direction:column;flex:1;gap:30px;padding:22px 20px;display:flex;overflow-y:auto}.sideSection{flex-direction:column;gap:14px;display:flex}.sideSectionTitle{letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-size:10px;font-weight:800}.themeOptions{gap:8px;display:flex}.themeBtn{background:var(--btn-bg);border:1px solid var(--btn-border-clr);color:var(--muted);cursor:pointer;letter-spacing:.2px;font-size:12px;font-weight:600;font-family:var(--sans);border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:7px;padding:14px 8px 12px;transition:background .15s,border-color .15s,color .15s;display:flex}.themeBtn:hover{background:var(--btn-hover-bg);color:var(--text)}.themeBtn.is-active{color:var(--accent);background:#4ab8c81f;border-color:#4ab8c873}.themeBtnIcon{font-size:22px;line-height:1}.shortcutsList{flex-direction:column;gap:12px;display:flex}.shortcutItem{color:var(--muted);align-items:center;gap:12px;font-size:14px;display:flex}.shortcutItem .key{background:var(--key-bg);border:1px solid var(--key-border-clr);font-family:var(--mono);color:var(--text);white-space:nowrap;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;min-width:44px;padding:4px 9px;font-size:12px;font-style:normal;font-weight:600;display:inline-flex}@media (max-width:1080px){.workspace{flex-direction:column}.panel-text,.panel-reader{flex:auto;padding:0}.heroPanel{justify-content:flex-start;padding:0}.splitter{display:none!important}}@media (max-width:720px){textarea{min-height:240px}.grid.twoCol{grid-template-columns:1fr}.btnPlay{min-width:70px}.controlsRow{flex-wrap:wrap;gap:10px}}@media (prefers-reduced-motion:reduce){.btn,.btnFlat,.reader-word,.sideMenuPanel,.sideMenuOverlay{transition:none}}