@font-face{font-family:Comic Neue;src:url(/fonts/ComicNeue-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Comic Neue;src:url(/fonts/ComicNeue-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Nunito;src:url(/fonts/Nunito-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Nunito;src:url(/fonts/Nunito-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Lora;src:url(/fonts/Lora-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Lora;src:url(/fonts/Lora-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/Inter-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Courier Prime;src:url(/fonts/CourierPrime-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Courier Prime;src:url(/fonts/CourierPrime-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--pink-50: #fff6df;--pink-100: #ffe5ce;--pink-200: #ffd0ad;--pink-300: #ffb07b;--pink-400: #ff8b38;--pink-500: #ff5e5b;--pink-600: #df4444;--pink-700: #a83a24;--pink-800: #74301f;--pink-900: #4f2618;--purple-50: #f8f5ff;--purple-400: #a78bfa;--purple-500: #8b5cf6;--white: #ffffff;--gray-50: #fafafa;--gray-100: #f5f3f4;--gray-200: #e8e4e6;--gray-400: #b8aab2;--gray-600: #6b5e66;--gray-800: #362d32;--red-400: #f87171;--amber-400: #fbbf24;--emerald-400:#60d394;--sky-400: #60b8d3;--bg: var(--pink-50);--surface: var(--white);--surface-alt: var(--pink-100);--border: var(--pink-200);--border-light: var(--pink-100);--text: var(--pink-900);--text-secondary: var(--gray-600);--text-muted: var(--gray-400);--accent: var(--pink-500);--accent-hover: var(--pink-600);--accent-light: var(--pink-100);--accent-glow: rgba(255, 94, 91, .25);--success: var(--emerald-400);--success-light: #d1fae5;--danger: var(--red-400);--danger-light: #fee2e2;--warning: var(--amber-400);--warning-light: #fef3c7;--radius-sm: 10px;--radius: 16px;--radius-lg: 22px;--radius-full: 999px;--header-h: 72px;--controls-h: 72px;--icon-btn-inset: 13px;--display-font: "Avenir Next Condensed", "Trebuchet MS", "Gill Sans", sans-serif;--body-font: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;--font: var(--body-font);--font-mono: "SF Mono", ui-monospace, monospace;--font-size-base: 16px;--font-scale: 1;--text-2xs: .72rem;--text-xs: .82rem;--text-sm: .92rem;--text-base:1.02rem;--text-md: 1.12rem;--text-lg: 1.45rem;--ink: var(--text);--ink-soft: var(--text-secondary);--paper: var(--bg);--paper-deep: var(--border);--cream: color-mix(in srgb, var(--surface) 88%, var(--bg));--orange: var(--pink-400);--coral: var(--accent);--launch-blue: color-mix(in srgb, var(--accent) 58%, var(--bg) 42%);--launch-mint: color-mix(in srgb, var(--accent) 48%, var(--bg) 52%);--launch-violet: color-mix(in srgb, var(--accent) 58%, var(--bg) 42%);--toon-line: 3px solid var(--ink);--toon-line-thin: 2px solid var(--ink);--toon-shadow: 6px 6px 0 var(--ink);--toon-shadow-sm: 4px 4px 0 var(--ink);--toon-shadow-lg: 10px 10px 0 var(--ink), 0 22px 56px rgba(68, 43, 20, .18);--shadow-sm: 0 1px 2px rgba(79, 38, 24, .05);--shadow: 0 2px 8px rgba(79, 38, 24, .07);--shadow-lg: 0 4px 16px rgba(79, 38, 24, .1);--ease: cubic-bezier(.34, 1.56, .64, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}@media(prefers-color-scheme:dark){:root{--bg: #1f1620;--surface: #2a1f2b;--surface-alt: #332430;--border: #453040;--border-light: #3a2a37;--text: #f0e0ec;--text-secondary: #b8a0b2;--text-muted: #7a6072;--accent: #f261a4;--accent-hover: #f89bc8;--accent-light: #3d1a30;--accent-glow: rgba(242, 97, 164, .25);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow: 0 2px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .4)}}html.theme-dark{--bg: #1f1620;--surface: #2a1f2b;--surface-alt: #332430;--border: #453040;--border-light: #3a2a37;--text: #f0e0ec;--text-secondary: #b8a0b2;--text-muted: #7a6072;--accent: #f261a4;--accent-hover: #f89bc8;--accent-light: #3d1a30;--accent-glow: rgba(242, 97, 164, .25);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow: 0 2px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .4)}html.theme-light{--bg: #ffffff;--surface: #ffffff;--surface-alt: #f5f3f4;--border: #e8e4e6;--border-light: #f0edef;--text: #2d1c2a;--text-secondary: #6b5a68;--text-muted: #9a8596;--accent: #e0466e;--accent-hover: #c23a5e;--accent-light: #fce4ea;--accent-glow: rgba(224, 70, 110, .2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .14)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:calc(var(--font-size-base) * var(--font-scale));height:100%;min-width:480px;overflow:hidden;overscroll-behavior:none}body{height:100%;overflow:hidden}body{font-family:var(--font);font-weight:700;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-width:480px;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}header{position:relative;height:var(--header-h);min-height:var(--header-h);background:var(--surface);font-family:var(--body-font);border-bottom:1px solid var(--border-light);padding:0 20px;display:flex;align-items:center;gap:0;z-index:60;box-shadow:var(--shadow-sm)}.header-spacer{flex:1;min-width:4px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}#btnMaterials{font-size:var(--text-xs);display:flex;align-items:center;justify-content:flex-start;padding:4px 12px;white-space:nowrap;max-width:380px;min-width:0;overflow:hidden;text-overflow:ellipsis}#btnMaterialsCtx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}#btnMaterials svg{flex-shrink:0}.brand-logo{height:52px;width:auto;flex-shrink:0;transform:translateY(-2%);border-radius:14px;filter:drop-shadow(4px 4px 0 var(--ink)) drop-shadow(0 6px 10px rgba(68,43,20,.18))}.brand .logo-mark{font-weight:700;color:var(--text-secondary);font-size:var(--text-xs);background:var(--surface-alt);padding:2px 8px;border-radius:var(--radius-full)}.brand .subtitle{font-size:var(--text-xs);color:var(--text-muted)}.selector-group{display:flex;gap:12px;align-items:center;flex-shrink:0}.mode-pills{display:flex;gap:12px;flex-shrink:0}.settings-panel-wrap{position:relative;flex-shrink:0}.settings-btn{color:var(--text-secondary)}.settings-btn:hover{color:var(--accent)}.state-trigger-btn{min-height:48px;padding:0 10px;border-radius:var(--radius-full);justify-content:center}.state-trigger-pills{display:inline-flex;align-items:center;gap:8px}.state-trigger-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;height:48px;padding:0 var(--icon-btn-inset);border:1.5px solid var(--border);border-radius:var(--radius-full);background:var(--surface-alt);color:var(--text)}.btn-icon-pill{height:48px;min-width:0;padding-left:var(--icon-btn-inset);padding-right:var(--icon-btn-inset);border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box}.btn-icon-pill svg{width:22px;height:22px}.btn-icon-pill .pill-item{display:inline-flex;align-items:center;gap:6px}.btn-icon-pill .pill-icon svg,.btn-icon-pill .pill-glyph svg{width:22px;height:22px;display:block}.btn-icon-pill .pill-glyph{display:inline-flex;align-items:center;justify-content:center}.btn-icon-pill .pill-text{font-size:var(--text-base);font-weight:700;color:var(--text-secondary)}.btn-icon-pill .pill-text{white-space:nowrap}.btn-icon-pill.active{background:linear-gradient(135deg,var(--pink-400),var(--accent));color:#fff;border-color:transparent;box-shadow:0 2px 8px var(--accent-glow)}.btn-icon-pill.active .pill-text,.btn-icon-pill.active .pill-icon{color:#fff}.btn-icon-pill .pill-sep{width:1px;height:16px;background:var(--border);border-radius:1px;margin:0 2px;align-self:center}.pill-flag{margin-left:6px;margin-right:6px;font-size:var(--text-base);line-height:1}.pill-flag svg{width:18px;height:14px;display:inline-block;vertical-align:-2px}.btn.with-label-icon{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;height:48px;border-radius:var(--radius-full)}.btn.with-label-icon svg{width:22px;height:22px}.state-trigger-pill-icon{min-width:36px;padding:0 8px}.state-trigger-pill-icon svg{width:20px;height:20px}.state-trigger-pill-glyph{min-width:36px;padding:0 8px;font-size:var(--text-base);font-weight:700;letter-spacing:-.02em}.voice-popover{font-family:var(--body-font);display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px 16px;min-width:420px;max-width:min(640px,calc(100vw - 32px));z-index:50;flex-direction:column;gap:12px}.voice-popover.open{display:flex}.top-popover-overlay{display:none;position:fixed;inset:0;background:transparent;z-index:40}.top-popover-overlay.open{display:block}.settings-popover,#settingsPanel{font-family:var(--body-font);width:450px;min-width:380px;max-width:calc(100vw - 32px);height:590px;overflow:hidden;padding:16px 0 16px 20px}.settings-tabs{display:flex;flex-wrap:wrap;gap:0;margin-bottom:0}.settings-tab-btn{flex:0 0 auto;padding:6px 14px 8px;border:var(--toon-line-thin);border-bottom:none;border-radius:14px 14px 0 0;margin-right:6px;background:transparent;color:var(--text-secondary);font-weight:600;font-size:var(--text-sm);cursor:pointer;white-space:nowrap;transition:color .15s,background .15s,box-shadow .15s,transform .15s}.settings-tab-btn:hover{color:var(--text);background:var(--surface-alt)}.settings-tab-btn.active{background:linear-gradient(to bottom,var(--coral) 0%,color-mix(in srgb,var(--coral) 90%,transparent) 90%,transparent 100%);color:#fff;border-color:var(--ink);font-weight:950;box-shadow:3px 0 0 var(--ink)}.settings-slider-block{display:flex;flex-direction:column;gap:8px}#settingsPanel>.top-popover-head,#settingsPanel>.settings-tabs{flex-shrink:0;padding-right:20px}.settings-tab-content{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;padding-right:20px}.settings-tab-content label{font-family:var(--display-font);font-weight:950;font-size:var(--text-base);letter-spacing:-.02em}.settings-tab-content:after{content:"";flex:0 0 24px}.about-content{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0 8px;text-align:center;font-family:var(--display-font);font-weight:950}.about-logo{display:block;height:64px;filter:drop-shadow(4px 4px 0 var(--ink)) drop-shadow(0 6px 10px rgba(68,43,20,.18))}.about-version{font-size:var(--text-base);font-weight:950;color:var(--accent);letter-spacing:-.02em}.about-desc{font-size:var(--text-base);font-weight:950;color:var(--text-secondary);margin:0}.about-tagline{font-size:var(--text-base);font-weight:950;color:var(--text);margin:8px 0;max-width:340px;line-height:1.5}.about-quote{font-family:var(--display-font);font-size:var(--text-lg);font-weight:950;color:var(--accent);line-height:0;vertical-align:-.1em}.about-quote-start{vertical-align:-.25em;position:relative;left:-6px}.about-quote-end{vertical-align:-.25em;position:relative;left:3px}.about-credit{font-size:var(--text-sm);font-weight:950;color:var(--text-secondary);margin:16px 0 0}.about-copyright{font-size:var(--text-xs);font-weight:950;color:var(--text-secondary);margin:0;opacity:.7}.settings-slider-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.settings-slider-row input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:var(--border);box-shadow:2px 2px 0 var(--ink);outline:none;cursor:pointer}.settings-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:var(--toon-line-thin);box-shadow:2px 2px 0 var(--ink);cursor:pointer;margin-top:-4px}.settings-slider-value{min-width:48px;text-align:right;font-family:var(--display-font);font-size:var(--text-base);font-weight:950;color:var(--text-secondary)}.settings-separator{border:none;border-top:1px solid var(--border);margin:4px 0 14px}.top-popover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}.top-popover-head span{font-size:var(--text-sm);font-weight:700;color:var(--text)}.top-popover-close{width:28px;height:28px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s var(--ease)}.top-popover-close:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-alt)}.top-popover-close{display:none}.voice-popover label{font-size:var(--text-sm);font-weight:950;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}.voice-choice-block{display:flex;flex-direction:column;gap:8px}.voice-choice-group{display:flex;gap:6px;flex-wrap:wrap}.voice-choice-btn{white-space:nowrap}.voice-flag{margin-left:6px;margin-right:6px;font-size:var(--text-base);line-height:1}.voice-flag svg{width:18px;height:14px;display:inline-block;vertical-align:-2px}.voice-choice-btn{font-family:var(--body-font);font-size:var(--text-sm);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 calc(50% - 6px);min-height:34px;padding:7px 10px;min-width:0;width:auto;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-secondary);cursor:pointer;position:relative;overflow:hidden;transition:border-color .15s,background .15s,color .15s,transform .15s}#endBehaviorGroup{flex-direction:column}#endBehaviorGroup .voice-choice-btn{flex:1 1 auto;font-size:var(--text-xs);padding:7px 12px}.end-behavior-indicator{display:none;width:20px;height:20px;color:var(--text-secondary);opacity:.7;flex-shrink:0}.end-behavior-indicator.visible{display:inline-flex;align-items:center}.end-behavior-indicator svg{width:20px;height:20px}.voice-choice-btn svg{width:18px;height:18px;flex-shrink:0}.voice-choice-btn span{line-height:1}.voice-choice-btn.speed-full{flex:1 1 100%}.choice-glyph{display:inline-flex;align-items:center;justify-content:center;width:28px;height:20px;margin-right:6px;color:var(--text-muted)}.choice-glyph svg{width:18px;height:18px;display:block;color:currentColor}.choice-glyph{color:var(--text-secondary)}.svg-vertical{width:18px;height:18px}.voice-choice-btn:hover{border-color:var(--accent);color:var(--accent)}.voice-choice-btn:has(.voice-cache-dot.not-cached){color:var(--text-muted);border-color:var(--border);cursor:default}.voice-choice-btn:has(.voice-cache-dot.not-cached):hover{border-color:var(--border);color:var(--text-muted);background:var(--surface);transform:none;box-shadow:none}.voice-choice-btn:has(.voice-cache-dot.not-cached):active{transform:none;box-shadow:none;border-color:var(--border)}.voice-choice-btn:has(.voice-cache-dot.not-cached) .voice-flag{opacity:.45}.voice-choice-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.voice-choice-btn:has(.voice-cache-dot.preloading){color:var(--text-muted);border-color:var(--border);cursor:default;background:var(--surface);box-shadow:none}.voice-choice-btn:has(.voice-cache-dot.preloading):hover{border-color:var(--border);color:var(--text-muted);background:var(--surface);transform:none;box-shadow:none}.voice-choice-btn:has(.voice-cache-dot.preloading) .voice-flag{opacity:.45}.voice-reset-btn{flex:1 1 100%}.voice-cache-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-left:auto;line-height:1;border:1.5px solid transparent;transition:opacity .15s,color .15s,border-color .15s,background .15s}.voice-cache-dot svg{width:12px;height:12px}.voice-cache-dot.cached{color:var(--success);border-color:var(--success)}.voice-cache-dot.not-cached{color:var(--accent);border-color:var(--accent);cursor:pointer;opacity:.7}.voice-cache-dot.not-cached:hover{opacity:1;background:var(--accent-light)}.voice-cache-dot.preloading{opacity:1;color:var(--accent);border-color:var(--accent);background:var(--accent-light);animation:voice-dot-pulse .8s ease-in-out infinite}@keyframes voice-dot-pulse{0%,to{opacity:.7}50%{opacity:1}}.voice-download-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--border);border-radius:0 0 999px 999px;overflow:hidden;pointer-events:none}.voice-download-progress-fill{height:100%;width:0%;background:var(--accent);border-radius:0 0 999px 999px;transition:width .3s ease}.voice-cache-storage-bar-wrap{display:flex;align-items:center;gap:8px}.voice-cache-storage-bar{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.voice-cache-storage-bar-fill{height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .4s ease,background .3s ease}.voice-cache-storage-text{font-family:var(--display-font);font-size:var(--text-sm);font-weight:950;color:var(--text-secondary);white-space:nowrap}.voice-cache-list{display:flex;flex-direction:column;gap:4px}.voice-cache-lang-header{font-family:var(--display-font);font-size:var(--text-sm);font-weight:950;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:8px 0 4px}.voice-cache-item{display:flex;align-items:center;gap:6px;min-height:34px;padding:7px 10px;background:var(--surface);border:1.5px solid var(--border);border-radius:999px}.voice-cache-item-name{flex:1;display:flex;align-items:center;gap:4px;font-family:var(--display-font);font-size:var(--text-sm);font-weight:950;color:var(--text)}.voice-cache-item-size{font-family:var(--display-font);font-size:var(--text-xs);font-weight:950;color:var(--text-secondary)}.voice-cache-delete-btn{width:22px;height:22px;padding:0;border:1.5px solid var(--border);border-radius:50%;background:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,border-color .15s,background .15s;opacity:.7}.voice-cache-delete-btn svg{width:10px;height:10px}.voice-cache-delete-btn:hover{opacity:1;color:var(--danger);border-color:var(--danger);background:var(--danger-light)}.voice-cache-delete-btn:disabled{opacity:.4;cursor:not-allowed}.voice-cache-empty{font-family:var(--display-font);font-size:var(--text-xs);font-weight:950;color:var(--text-muted);font-style:italic}select{font-family:var(--body-font);font-size:var(--text-sm);font-weight:700;padding:6px 28px 6px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b5e66' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color .15s,box-shadow .15s}select:hover{border-color:var(--accent)}select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}#main-area{flex:1;display:grid;grid-template-rows:1fr auto 0px;overflow:hidden;position:relative;transition:grid-template-rows .42s cubic-bezier(.2,.9,.16,1)}#top-panel{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:20px 24px 42px;-webkit-overflow-scrolling:touch}#transcriptText{position:relative;isolation:isolate}.exercise-badge{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:4px}#top-panel h2{font-size:var(--text-sm);font-weight:950;margin-bottom:10px;color:var(--text)}.transcript-blurred .word .word-text{color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 0 var(--blur-radius) var(--blur-ink);transition:text-shadow .2s ease,color .2s ease}.transcript-blurred .sentence{cursor:default}.transcript-blurred .sentence.active{box-shadow:0 2px 8px var(--accent-glow)}.sentence{display:inline;--blur-ink: var(--text);--blur-playhead-ink: var(--text);--blur-radius: .7em;line-height:2.2;font-size:var(--text-md);padding:3px 6px;border-radius:16px;transition:background .2s,color .2s,transform .2s,filter .3s;cursor:pointer;will-change:auto;word-spacing:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}.sentence.active{background:var(--accent);color:#fff;--blur-ink: #fff;--blur-playhead-ink: var(--blur-ink);transform:scale(1.03);transform-origin:center;box-shadow:0 2px 8px var(--accent-glow);will-change:transform,box-shadow,color;box-decoration-break:clone;-webkit-box-decoration-break:clone}.sentence.active.repeat{background:var(--amber-400);color:var(--gray-800);--blur-ink: var(--gray-800);--blur-playhead-ink: var(--blur-ink);box-shadow:0 2px 8px #fbbf2459;animation:repeatPulse 1.2s ease-in-out infinite;will-change:transform,box-shadow,color;box-decoration-break:clone;-webkit-box-decoration-break:clone}@keyframes repeatPulse{0%,to{box-shadow:0 2px 8px #fbbf2459}50%{box-shadow:0 2px 16px #fbbf248c}}.transcript-playhead{position:absolute;left:0;top:0;width:0;height:0;border-radius:16px;background:#ffffff8c;box-shadow:0 0 0 3px #ffffff8c;opacity:0;pointer-events:none;z-index:1;will-change:left,top,width,height;transition:left .16s linear,top .16s linear,width .16s linear,height .16s linear,opacity .12s ease,background .12s linear,box-shadow .12s linear}.transcript-playhead.visible{opacity:1}.transcript-playhead.no-transition,body.dragging-seek .sentence .word,body.dragging-seek .sentence .word-text{transition:none}.sentence.active .word.spoken{color:inherit}.sentence.active .word.speaking{color:#fff;border-radius:16px}.transcript-blurred .sentence.active .word.spoken,.transcript-blurred .sentence.active.repeat .word.spoken{color:inherit}.transcript-blurred .sentence.active.repeat{color:var(--gray-800)}.transcript-blurred .sentence.active .word.speaking,.transcript-blurred .sentence.active.repeat .word.speaking{border-radius:16px;box-shadow:none}.transcript-blurred .sentence.active .word.speaking .word-text,.transcript-blurred .sentence.active.repeat .word.speaking .word-text{color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 0 var(--blur-radius) var(--blur-playhead-ink);opacity:1;will-change:text-shadow,color;transition:text-shadow .2s ease,color .2s ease}.transcript-blurred .sentence.active .word.speaking{color:#7c1d40c7;text-shadow:none}.transcript-blurred .sentence.active.repeat .word.speaking{color:#1f2937d1;text-shadow:none}.sentence.active.repeat .word.spoken{color:inherit}.sentence.active.repeat .word.speaking{color:var(--gray-800)}#controls-bar{height:var(--controls-h);min-height:var(--controls-h);background:var(--surface);font-family:var(--body-font);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);display:flex;align-items:center;padding:0 16px;gap:12px;position:relative;z-index:5;cursor:ns-resize;box-shadow:var(--shadow-sm)}#controls-bar.dragging{background:var(--surface-alt)}#controls-bar:before{content:"";position:absolute;bottom:100%;left:0;right:0;height:calc(var(--controls-h) * 1.6);background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 98%,transparent) 40%,transparent 100%);pointer-events:none;z-index:0}.progress-container{position:absolute;top:-37px;left:14px;right:14px;height:24px;padding:0 14px;z-index:1;cursor:default}.progress-wrap{position:absolute;inset:0;background:var(--border-light);border-radius:999px;cursor:pointer;overflow:hidden;box-shadow:inset 0 1px 3px #00000014}#progressSegments{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.progress-fill{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,var(--pink-400),var(--accent));transition:width .15s linear,left .15s linear;pointer-events:none;z-index:3;border-radius:4px;opacity:.85}.progress-segment{position:absolute;top:0;bottom:0;cursor:pointer;z-index:1;transition:background .15s}.progress-segment:nth-child(odd){background:transparent}.progress-segment:nth-child(2n){background:transparent}.progress-segment:hover{background:var(--accent-glow);z-index:2}.progress-segment.current{z-index:0;background:var(--accent-glow)}.progress-segment.current.repeat{background:#fbbf2466}.progress-tick{position:absolute;top:0;bottom:0;width:2px;background:var(--gray-400);opacity:.4;border-radius:1px;cursor:pointer;z-index:4;transition:opacity .15s,background .15s}.progress-tick:hover{opacity:1;background:var(--accent)}.progress-thumb{position:absolute;top:-9px;width:40px;height:40px;margin-left:-20px;background:var(--accent);border-radius:50%;box-shadow:0 2px 8px var(--accent-glow);cursor:grab;z-index:5;transition:left .15s linear,transform .15s var(--ease),box-shadow .15s var(--ease)}.progress-thumb:hover{transform:scale(1.1);box-shadow:0 2px 14px var(--accent-glow)}.progress-thumb:active{cursor:grabbing;transform:scale(1.2);box-shadow:0 4px 20px var(--accent-glow)}.progress-thumb:after{content:"";position:absolute;inset:3px;border:2.5px solid var(--white);border-radius:50%;background:transparent}body.progress-snapping .progress-fill,body.progress-snapping .progress-thumb,body.progress-snapping .progress-segment{transition:none}.no-seek,.no-seek .progress-segment,.no-seek .progress-tick,.no-seek .progress-thumb{cursor:default;pointer-events:none}.no-seek .progress-segment:hover{background:inherit}.no-seek .progress-tick:hover{opacity:.4;background:var(--gray-400)}.no-seek .progress-thumb:hover,.no-seek .progress-thumb:active{transform:none;box-shadow:0 2px 8px var(--accent-glow)}.laps-left{position:absolute;top:-50px;transform:translate(-50%);font-size:var(--text-lg);font-weight:950;font-family:var(--body-font);color:#fff;background:radial-gradient(circle at 35% 30%,#fde68a,#fbbf24 40%,#d97706);border:2px solid rgba(255,255,255,.35);border-radius:50%;width:38px;height:38px;display:none;align-items:center;justify-content:center;z-index:10;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5),0 0 10px rgba(251,191,36,.6);box-shadow:0 0 8px #fbbf2499,0 0 20px #fbbf2459,0 0 40px #f59e0b33,0 4px 12px #0000004d,inset 0 1px #ffffff40;animation:lapBreathe 2s ease-in-out infinite,lapBob 3s ease-in-out infinite}.laps-left:before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(251,191,36,.7),rgba(245,158,11,.9),rgba(251,191,36,.7),transparent,transparent,rgba(251,191,36,.3),transparent);animation:lapSpin 2.5s linear infinite;z-index:-1;filter:blur(.5px)}.laps-left:after{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.35) 0%,transparent 60%);pointer-events:none}.laps-left.gap{background:radial-gradient(circle at 35% 30%,#a7f3d0,#34d399 50%,#059669);border-color:#ffffff59;box-shadow:0 0 8px #34d39999,0 0 20px #34d39959,0 0 40px #10b98133,0 4px 12px #0000004d,inset 0 1px #ffffff40;animation:none}.laps-left.gap:before,.laps-left.gap:after{animation:none;opacity:0}@keyframes lapBreathe{0%,to{box-shadow:0 0 8px #fbbf2499,0 0 20px #fbbf2459,0 0 40px #f59e0b33,0 4px 12px #0000004d,inset 0 1px #ffffff40}50%{box-shadow:0 0 14px #fbbf24cc,0 0 32px #fbbf2480,0 0 56px #f59e0b59,0 4px 16px #00000059,inset 0 1px #ffffff4d}}@keyframes lapBob{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-3px)}}@keyframes lapSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{font-family:var(--body-font);font-size:var(--text-sm);font-weight:700;padding:6px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;transition:all .15s var(--ease);display:inline-flex;align-items:center;gap:4px;flex-shrink:0;letter-spacing:-.01em}.btn:hover{background:var(--surface-alt);border-color:var(--accent-light);transform:translateY(-1px);box-shadow:var(--shadow)}.btn:active{transform:scale(.95) translateY(0);box-shadow:none}.btn.primary{background:linear-gradient(135deg,var(--pink-400),var(--accent));color:#fff;border-color:transparent;box-shadow:0 2px 8px var(--accent-glow)}.btn.primary:hover,.btn-icon-pill.active:hover{background:linear-gradient(135deg,var(--accent),var(--pink-600));box-shadow:0 4px 12px var(--accent-glow);transform:translateY(-1px)}.btn svg{flex-shrink:0;vertical-align:middle}.btn:disabled,.btn[aria-disabled=true]{opacity:.42;cursor:default;pointer-events:none;transform:none;box-shadow:none}.btn.icon-only{padding:0;font-size:var(--text-base);border-radius:var(--radius-full);width:48px;height:48px;justify-content:center}.btn.icon-only svg{width:22px;height:22px}#btnPlay{padding:0 24px;height:48px;width:130px;font-size:var(--text-base);border-radius:var(--radius-full);justify-content:center}#btnPlay svg{width:24px;height:24px}.btn.ab-active{background:var(--warning);color:var(--gray-800);border-color:var(--warning);box-shadow:0 2px 8px #fbbf244d}.btn.ab-active:hover{background:var(--amber-400);box-shadow:0 4px 12px #fbbf2466}.time-display{font-size:var(--text-base);font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;width:126px;text-align:center}.controls-spacer{flex:1;min-width:4px}.controls-sep{width:1px;height:22px;background:var(--border);border-radius:1px;flex-shrink:0}#bottom-panel{position:relative;padding:14px 24px 18px;display:flex;flex-direction:column;gap:10px;overflow:hidden;will-change:opacity;transition:opacity .28s cubic-bezier(.4,0,.2,1)}#bottom-panel.hidden{padding-top:0;padding-bottom:0;opacity:0;pointer-events:none}.input-caption{display:flex;align-items:center;gap:12px;flex-shrink:0}.input-btn-sep{width:1px;height:24px;flex-shrink:0;background:var(--border);border-radius:1px}.input-caption h3{font-size:var(--text-sm);font-weight:950;color:var(--text-secondary);flex:1}#bottom-panel h3{font-size:var(--text-sm);font-weight:950;flex-shrink:0;color:var(--text-secondary)}.textarea-wrap{flex:1;display:flex;min-height:0}.textarea-wrap textarea{font-family:var(--font);font-size:var(--text-md);font-weight:inherit;line-height:1.7;padding:14px 16px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);resize:none;width:100%;flex:1;min-height:0;user-select:text;-webkit-user-select:text;transition:border-color .2s,box-shadow .2s}.textarea-wrap textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}.textarea-wrap textarea::placeholder{color:var(--text-muted);font-style:italic}.textarea-wrap textarea[readonly]{background:var(--surface-alt);cursor:default;user-select:none;-webkit-user-select:none}.action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}.score-display{display:none;position:fixed;inset:10%;overflow:hidden;background:var(--cream);border:var(--toon-line);border-radius:var(--radius-lg);box-shadow:var(--toon-shadow-lg);z-index:70;flex-direction:column;font-family:var(--body-font)}.score-display.visible{display:flex}.score-backdrop{display:none;position:fixed;inset:0;background:#17130f8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:65}.score-backdrop.visible{display:block}.score-top-bar{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:20px 24px 16px;border-bottom:2px solid var(--border)}.score-tabs{display:flex;gap:6px}.score-tab{padding:7px 18px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;border:var(--toon-line-thin);background:transparent;color:var(--text-secondary);cursor:pointer;transition:color .15s,background .15s,box-shadow .15s,transform .15s;font-family:var(--body-font)}.score-tab.active{background:var(--coral);color:#fff;border-color:var(--ink);font-weight:950;box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.score-tab:hover:not(.active):not(:disabled){color:var(--text);background:var(--surface-alt)}.score-tab:disabled{opacity:.35;cursor:not-allowed}.score-close{width:48px;height:48px;border:var(--toon-line-thin);border-radius:var(--radius-full);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;box-shadow:2px 2px 0 var(--ink)}.score-close svg{width:22px;height:22px}.score-close:hover{transform:translateY(-1px)}.score-close:active{transform:translateY(1px)}@keyframes scoreIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.score-summary{display:flex;gap:14px;align-items:center}.score-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:var(--text-md);color:#fff;flex-shrink:0;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.score-excellent{background:var(--success)}.score-good{background:var(--sky-400)}.score-fair{background:#f59e0b}.score-poor{background:var(--danger)}.score-label{font-weight:950;font-size:var(--text-base)}.score-detail{font-size:var(--text-sm);color:var(--text-muted);margin-top:1px}.review-meta-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}.review-content-path{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--text-sm);font-weight:700;color:var(--text-secondary);min-width:0}.review-exercise-title,.review-episode-label{font-weight:950}.diff-output{font-size:var(--text-md);line-height:1.8;flex:1;min-height:0;overflow-y:auto;padding:12px 14px;background:var(--surface);border-radius:var(--radius-sm);border:var(--toon-line-thin);margin:0}.diff-word{padding:1px 4px;border-radius:4px;font-weight:700}.diff-word.correct{color:var(--text-muted)}.diff-word.missing{background:var(--danger-light);color:#b91c1c;text-decoration:line-through}.diff-word.extra{background:var(--success-light);color:#166534}.diff-sentence-marker{display:inline-block;font-weight:950;font-size:var(--text-sm);color:var(--accent);margin-right:2px;min-width:16px}.review-no-diff{color:var(--text-muted);font-size:var(--text-sm);font-style:italic}.score-retake-btn{padding:8px 20px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;border:1.5px solid var(--ink);background:var(--coral);color:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--ink);font-family:var(--body-font);transition:all .15s;margin-bottom:3px}.score-retake-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}.score-retake-btn:active{transform:translate(2px,2px);box-shadow:none}.score-tab-content{display:none;flex:1;overflow-y:auto;flex-direction:column;gap:12px;padding:0 24px 24px}.score-tab-content.visible{display:flex}#tabCurrent{padding-top:18px}#tabHistory{position:relative}.history-controls{position:sticky;top:0;z-index:2;background:var(--surface);display:flex;align-items:flex-start;gap:16px;flex-shrink:0;margin:0 -24px;padding:18px 24px 10px;border-bottom:1px solid var(--border)}.history-stats{position:absolute;top:18px;right:24px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap;padding-top:2px;pointer-events:none}.history-stats strong{font-size:var(--text-md);color:var(--ink);font-weight:950}.history-filters{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0;overflow-x:hidden}.filter-count{font-weight:700;opacity:.7;font-size:var(--text-2xs)}.history-list{display:flex;flex-direction:column;gap:8px;flex:1}.history-item{position:relative;display:flex;align-items:center;gap:10px;padding:4px 10px;background:var(--surface);border:var(--toon-line-thin);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--ink);font-size:var(--text-sm);flex-wrap:wrap;cursor:pointer}.history-remove-btn{position:absolute;right:-4px;top:-4px;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;background:#fff;box-shadow:1px 1px 0 var(--ink);color:var(--ink);font-size:var(--text-2xs);font-weight:700;cursor:pointer;padding:0;line-height:1;opacity:0;pointer-events:none;transition:opacity .15s}.history-item:hover .history-remove-btn{opacity:1;pointer-events:auto}.history-item.new-item{animation:historyPinball .28s cubic-bezier(.25,1.1,.5,1) both}@keyframes historyPinball{0%{opacity:0;transform:scale(.6) translateY(-4px)}60%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1) translateY(0)}}.history-level-pill{font-size:var(--text-2xs);font-weight:700;background:var(--surface-alt);border:1.5px solid var(--ink);border-radius:var(--radius-full);padding:2px 8px;white-space:nowrap;color:var(--ink)}.history-date{font-size:var(--text-sm);white-space:nowrap}.history-story{font-weight:700;font-size:var(--text-md);white-space:nowrap}.history-left-group{flex:1;display:flex;align-items:center;gap:10px;min-width:0}.history-exercise{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-accuracy{font-weight:700;font-size:var(--text-base);white-space:nowrap}.history-detail{font-size:var(--text-sm);white-space:nowrap}.history-time{font-size:var(--text-xs);white-space:nowrap;text-align:left;min-width:3.2em}.history-item.history-score-90,.history-sub-row.history-score-90{background:#2e9e411a}.history-item.history-score-80-89,.history-sub-row.history-score-80-89{background:#bba11b1a}.history-item.history-score-70-79,.history-sub-row.history-score-70-79{background:#cc5b191a}.history-item.history-score-60-69,.history-sub-row.history-score-60-69{background:#a630301a}.history-item.history-score-60-,.history-sub-row.history-score-60-{background:#8e29291f}.vocab-filter-note{font-size:var(--text-2xs);color:var(--text-muted);font-style:italic;margin-left:2px}.history-group{background:var(--surface);border:var(--toon-line-thin);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--ink);overflow:hidden}.history-group-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-alt);border-bottom:1px solid var(--border);flex-wrap:wrap}.history-group-level{font-size:var(--text-2xs);font-weight:950;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-full);padding:2px 8px;white-space:nowrap}.history-group-story{font-weight:950;font-size:var(--text-md);white-space:nowrap}.history-group-title{flex:1;font-weight:700;font-size:var(--text-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-group-meta{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}.history-group-details{padding:6px 14px 8px}.history-sub-row{display:flex;align-items:center;gap:12px;padding:4px 0;font-size:var(--text-sm);border-bottom:1px dotted var(--border)}.history-sub-row:last-child{border-bottom:none}.history-sub-date{color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap;min-width:80px}.history-sub-acc{font-weight:700;min-width:40px}.history-sub-score{color:var(--text-muted);font-size:var(--text-xs)}.history-sub-time{color:var(--text-muted);font-size:var(--text-xs);margin-left:auto}.vocab-filter-bar{position:sticky;top:0;z-index:2;background:var(--surface);display:flex;align-items:flex-start;gap:16px;flex-shrink:0;margin:0 -24px;padding:18px 24px 12px;border-bottom:1px solid var(--border)}.vocab-filter-left{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0;overflow-x:hidden}.vocab-stats{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap;padding-top:2px}.vocab-stats strong{font-size:var(--text-md);color:var(--ink);font-weight:950}.vocab-filter-dim{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:2px 0;margin:-2px 0}.filter-tags-wrap{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;flex-shrink:1;min-width:0;padding:2px 0;margin:-2px 0}.filter-tags-wrap::-webkit-scrollbar{display:none}.vocab-filter-label{font-size:var(--text-2xs);font-weight:950;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-right:4px;min-width:32px;flex-shrink:0}.filter-scroll-arrow{display:none;flex-shrink:0;width:24px;height:100%;align-items:center;justify-content:center;color:var(--text-muted);font-size:1.6rem;line-height:1;pointer-events:none;margin-left:2px}.filter-scroll-arrow.on{display:flex;animation:scrollHintPulse 1.8s ease-in-out infinite}@keyframes scrollHintPulse{0%,to{opacity:.35;transform:translate(0)}50%{opacity:1;transform:translate(3px)}}.vocab-filter-tag{padding:5px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:color .12s,background .12s,box-shadow .12s,border-color .12s;font-family:var(--body-font);flex-shrink:0}.vocab-filter-tag.freq-1{background:#d6f5db;border-color:#a9dab1}.vocab-filter-tag.freq-2{background:#f5edc7;border-color:#dbcf94}.vocab-filter-tag.freq-3{background:#f7dac9;border-color:#e1b398}.vocab-filter-tag.freq-4{background:#efc8c8;border-color:#da9595}.vocab-filter-tag.freq-5{background:#e9b4b4;border-color:#d47d7d}.vocab-filter-tag.freq-1.active{outline:2px solid hsl(130,60%,42%);outline-offset:-1px;color:var(--ink)}.vocab-filter-tag.freq-2.active{outline:2px solid hsl(50,70%,42%);outline-offset:-1px;color:var(--ink)}.vocab-filter-tag.freq-3.active{outline:2px solid hsl(22,80%,45%);outline-offset:-1px;color:var(--ink)}.vocab-filter-tag.freq-4.active{outline:2px solid hsl(0,62%,38%);outline-offset:-1px;color:var(--ink)}.vocab-filter-tag.freq-5.active{outline:2px solid hsl(0,60%,32%);outline-offset:-1px;color:var(--ink)}.vocab-filter-tag:not(.freq-1):not(.freq-2):not(.freq-3):not(.freq-4):not(.freq-5).active{background:var(--surface-alt);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.vocab-filter-tag.active{box-shadow:2px 2px 0 var(--ink)}.vocab-filter-tag:hover:not(.active){filter:brightness(.94)}.vocab-list{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;flex:1}.vocab-word{position:relative;display:flex;align-items:center;justify-content:center;padding:3px 10px;border:var(--toon-line-thin);border-radius:var(--radius-full);box-shadow:3px 3px 0 var(--ink);font-size:var(--text-sm);font-weight:700;color:var(--ink);will-change:transform}.vocab-word.vocab-hidden{display:none}.vocab-word.new-pill{animation:vocabPinball .3s cubic-bezier(.25,1.1,.5,1) both}@keyframes vocabPinball{0%{opacity:0;transform:scale(.6) translateY(-6px)}60%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1) translateY(0)}}.vocab-word-text{font-weight:700}.vocab-word-count{background:#0000001f;color:var(--ink);border-radius:var(--radius-full);padding:2px 9px;font-size:var(--text-xs);font-weight:700;min-width:22px;text-align:center}.vocab-remove-btn{position:absolute;right:-4px;top:-4px;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;background:#fff;box-shadow:1px 1px 0 var(--ink);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);padding:0;transition:opacity .15s;line-height:1;font-weight:700;opacity:0;pointer-events:none}.vocab-word:hover .vocab-remove-btn{opacity:1;pointer-events:auto}.empty-tab-msg{display:flex;align-items:center;justify-content:center;padding:48px 28px;color:var(--text-muted);font-size:var(--text-base);text-align:center;line-height:1.6;background:var(--surface);border-radius:var(--radius-sm);border:1px dashed var(--border)}.confirm-backdrop{display:none;position:fixed;inset:0;background:#17130f80;z-index:65}.confirm-backdrop.visible{display:block}.confirm-dialog{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cream);border:var(--toon-line);border-radius:var(--radius-lg);box-shadow:var(--toon-shadow-lg);padding:28px 28px 20px;z-index:70;min-width:320px;max-width:440px;width:calc(100vw - 48px);flex-direction:column;gap:18px;font-family:var(--body-font)}.confirm-dialog.visible{display:flex}.confirm-message{font-family:var(--body-font);font-weight:700;font-size:var(--text-base);line-height:1.55;color:var(--ink);white-space:pre-line;margin:0}.confirm-buttons{display:flex;gap:10px;justify-content:flex-end}.confirm-btn{padding:8px 20px;border-radius:var(--radius);font-weight:700;font-size:var(--text-base);font-family:var(--body-font);cursor:pointer;transition:all .15s;border:var(--toon-line-thin);box-shadow:var(--toon-shadow-sm)}.confirm-btn-cancel{background:var(--surface);color:var(--ink);font-family:var(--body-font)}.confirm-btn-cancel:hover{background:var(--ink);color:var(--surface)}.confirm-btn-ok{background:var(--accent);color:#fff;border-color:var(--ink);font-family:var(--body-font)}.confirm-btn-ok:hover{filter:brightness(1.12)}#top-panel::-webkit-scrollbar,.diff-output::-webkit-scrollbar{width:6px}#top-panel::-webkit-scrollbar-track,.diff-output::-webkit-scrollbar-track{background:transparent;margin:14px 0}#top-panel::-webkit-scrollbar-thumb,.diff-output::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}#top-panel::-webkit-scrollbar-thumb:hover,.diff-output::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.settings-tab-content::-webkit-scrollbar{width:6px}.settings-tab-content::-webkit-scrollbar-track{background:transparent}.settings-tab-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.settings-tab-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.font-settings{position:relative;flex-shrink:0}.font-btn{font-weight:700;font-size:var(--text-sm)}.font-popover{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px 16px;min-width:200px;z-index:50;flex-direction:column;gap:12px}.font-popover.open{display:flex}#settingsTab_appearance .font-popover{display:flex;position:static;top:auto;right:auto;background:transparent;border:none;border-radius:0;box-shadow:none;padding:0;min-width:auto;gap:16px}#settingsTab_appearance .top-popover-head{display:none}.font-popover label{font-size:var(--text-sm);font-weight:950;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}.font-size-controls{display:flex;align-items:center;gap:0;border:var(--toon-line-thin);border-radius:var(--radius-sm);box-shadow:2px 2px 0 var(--ink)}.font-size-controls button{font-family:var(--body-font);font-size:var(--text-base);font-weight:700;flex:1;min-width:48px;height:34px;border:none;background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center}.font-size-controls button:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.font-size-controls button:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.font-size-controls button:hover{background:var(--surface-alt)}.font-size-controls button:active{background:var(--accent-light)}.font-size-controls .font-size-label{flex:.8;min-width:48px;height:34px;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:var(--accent);border-left:var(--toon-line-thin);border-right:var(--toon-line-thin);background:var(--surface-alt)}.font-family-options{display:flex;flex-wrap:wrap;gap:6px}.font-family-options button{font-size:var(--text-sm);padding:7px 14px;border:1.5px solid var(--border);border-radius:999px;background:var(--accent-light);color:var(--text);cursor:pointer;text-align:center;white-space:nowrap;transition:background .15s,border-color .15s}.font-family-options button:hover{background:var(--border);border-color:var(--accent)}.font-family-options button.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}.theme-hue-slider-wrap{display:flex;align-items:center;gap:10px}.theme-hue-slider-wrap input[type=range]{flex:1;min-width:0;height:10px;border-radius:5px;background:linear-gradient(to right,#d02525,#d07a25,#d0d025,#25d025,#25d0d0,#2525d0,#7a25d0,#d025d0,#d0257a,#d02525);box-shadow:2px 2px 0 var(--ink);-webkit-appearance:none;appearance:none;outline:none;cursor:pointer}.theme-hue-slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:var(--toon-line-thin);box-shadow:2px 2px 0 var(--ink);margin-top:-4px;cursor:pointer}.theme-hue-swatch{width:26px;height:26px;border-radius:50%;background:var(--accent);border:2px solid var(--border);flex-shrink:0}.theme-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}.theme-preset-dot{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s;padding:0;position:relative}.theme-preset-dot:hover{transform:scale(1.15)}.theme-preset-dot.active{border-color:var(--text);transform:scale(1.1)}.theme-preset-delete{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:var(--ink);color:var(--bg);border:none;font-size:var(--text-2xs);font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;padding:0}.theme-preset-dot:hover .theme-preset-delete,.theme-presets.editing .theme-preset-delete{opacity:.55}.theme-preset-delete:hover{opacity:.9!important}.theme-save-btn{width:26px;height:26px;border-radius:50%;border:2px dashed var(--border);background:transparent;color:var(--text-secondary);font-size:var(--text-base);font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,color .15s,background .15s;flex-shrink:0}.theme-save-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}@media(max-width:600px){:root{--header-h: 44px;--controls-h: 44px}header{padding:0 12px}.brand-logo{height:32px}.brand .subtitle{display:none}#top-panel{padding:14px 16px 36px}#bottom-panel{padding:10px 16px 14px;gap:8px}#controls-bar{padding:0 8px;gap:8px}.btn{padding:5px 9px;font-size:var(--text-xs)}.btn.icon-only{width:42px;height:42px;padding:0}.btn.icon-only svg{width:20px;height:20px}#btnPlay{height:42px;width:88px;padding:0 14px;font-size:var(--text-sm)}#btnPlay svg{width:20px;height:20px}.textarea-wrap textarea{font-size:var(--text-base);padding:12px}.sentence{font-size:var(--text-base);line-height:2}.progress-container{left:6px;right:6px;top:-37px;height:20px;padding:0 11px}.progress-thumb{width:32px;height:32px;margin-left:-16px;top:-6px}.laps-left{width:30px;height:30px;top:-38px;font-size:var(--text-md);border-width:2px}.time-display{width:80px;font-size:var(--text-2xs)}}.loading-overlay{position:fixed;inset:0;background:#0a0a0feb;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#ccc;font-size:var(--text-base);text-align:center;max-width:280px}.loading-bar-wrap{display:flex;align-items:center;gap:10px}.loading-bar{width:240px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.loading-bar-fill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .3s ease}.loading-bar-fill.indeterminate{width:30%;animation:indeterminate-bar 1.5s ease-in-out infinite}@keyframes indeterminate-bar{0%{transform:translate(-100%)}50%{transform:translate(200%)}to{transform:translate(-100%)}}.loading-pct{color:var(--accent);font-size:var(--text-sm);font-weight:700;min-width:36px;text-align:right}.loading-hint{color:#ffffff59;font-size:var(--text-sm);text-align:center;margin-top:4px}.countdown-overlay{display:none;position:fixed;inset:0;background:radial-gradient(ellipse at center,#17130fb3,#17130feb);z-index:100;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(2px)}.countdown-overlay.active{display:flex}.countdown-ring{position:absolute;width:0;height:0;border-radius:50%;border:4px solid var(--accent);opacity:0;pointer-events:none}.countdown-ring.pulse{animation:countdownRing .75s ease-out forwards}@keyframes countdownRing{0%{width:60px;height:60px;opacity:.8;border-width:6px}to{width:320px;height:320px;opacity:0;border-width:1px}}.countdown-number{position:relative;z-index:1;font-family:var(--display-font);font-size:11rem;font-weight:950;color:#fff;text-shadow:0 0 40px var(--accent-glow),0 0 80px var(--accent-glow),4px 4px 0 var(--ink),8px 8px 0 rgba(23,19,15,.5);user-select:none;pointer-events:none}.countdown-number.pop{animation:countdownBurst .55s cubic-bezier(.2,.9,.16,1) forwards}@keyframes countdownBurst{0%{transform:scale(.15) rotate(-8deg);opacity:0;filter:blur(8px)}35%{transform:scale(1.3) rotate(3deg);opacity:1;filter:blur(0)}55%{transform:scale(.9) rotate(-1deg)}to{transform:scale(1) rotate(0);opacity:1;filter:blur(0)}}.countdown-number.go{font-size:10rem;color:gold;text-shadow:0 0 50px rgba(255,215,0,.8),0 0 100px rgba(255,215,0,.5),4px 4px 0 var(--ink),8px 8px 0 rgba(23,19,15,.5)}.countdown-number.go.pop{animation:countdownGoBurst .5s cubic-bezier(.2,.9,.16,1) forwards}@keyframes countdownGoBurst{0%{transform:scale(.1);opacity:0;filter:blur(12px)}30%{transform:scale(1.5);opacity:1;filter:blur(0)}50%{transform:scale(.85)}to{transform:scale(1);opacity:1;filter:blur(0)}}.countdown-overlay.shake{animation:countdownShake .35s ease-out}@keyframes countdownShake{0%{transform:translate(0)}10%{transform:translate(-8px,5px)}20%{transform:translate(7px,-4px)}30%{transform:translate(-6px,-6px)}40%{transform:translate(5px,3px)}50%{transform:translate(-4px,-2px)}60%{transform:translate(3px,1px)}70%{transform:translate(-1px,-1px)}80%{transform:translate(1px)}to{transform:translate(0)}}.countdown-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.countdown-particle{position:absolute;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:particleFly .9s ease-out forwards}@keyframes particleFly{0%{transform:translate(0) scale(1) rotate(0);opacity:1}30%{opacity:1}to{transform:translate(var(--px),var(--py)) scale(.2) rotate(var(--rot));opacity:0}}.wizard-overlay{position:fixed;inset:0;background:#0000008c;z-index:500;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.wizard-overlay.active{display:flex}.wizard-card{background:var(--surface);border:var(--toon-line-thin);box-shadow:var(--toon-shadow-lg);border-radius:28px;width:560px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);padding:32px 28px 48px;text-align:center;animation:wizardIn .4s cubic-bezier(.2,.9,.16,1);position:relative;display:flex;flex-direction:column;overflow:hidden}@keyframes wizardIn{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.wizard-step-dots{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.wizard-dot{width:10px;height:10px;border-radius:50%;background:var(--border);border:var(--toon-line-thin);transition:background .3s,transform .3s}.wizard-dot.active{background:var(--accent);transform:scale(1.3)}.wizard-dot.done{background:var(--ink)}.wizard-panels{position:relative;display:flex;flex-direction:column}.wizard-panel{display:none;flex-direction:column;align-items:center;gap:16px;animation:wizardSlide .35s ease-out;width:100%}.wizard-panel.active{display:flex}.wizard-scroll{max-height:min(300px,45vh);overflow-y:auto;width:100%;padding:0 28px;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px}@keyframes wizardSlide{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.wizard-welcome{margin-bottom:4px}.wizard-logo{width:180px;height:auto;margin-bottom:4px}.wizard-welcome-text{font-family:var(--display-font);font-weight:950;font-size:var(--text-sm);color:var(--text-secondary);margin:0}.wizard-title{font-family:var(--display-font);font-weight:950;font-size:var(--text-lg);margin:0 0 8px;letter-spacing:-.02em}.wizard-lang-choices{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.wizard-lang-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 32px;border:var(--toon-line-thin);border-radius:var(--radius-lg);background:var(--surface-alt);box-shadow:var(--toon-shadow-sm);cursor:pointer;font-family:var(--display-font);font-weight:950;font-size:var(--text-md);color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s;min-width:140px}.wizard-lang-btn:hover,.wizard-lang-btn:focus-visible{transform:translateY(-2px);box-shadow:var(--toon-shadow-md);border-color:var(--accent)}.wizard-lang-flag{font-size:2.5rem;line-height:1}.wizard-level-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.wizard-level-btn{padding:10px 18px;border:var(--toon-line-thin);border-radius:var(--radius-full);background:var(--surface-alt);box-shadow:var(--toon-shadow-sm);cursor:pointer;font-family:var(--display-font);font-weight:950;font-size:var(--text-base);color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}.wizard-level-btn:hover,.wizard-level-btn:focus-visible{transform:translateY(-1px);box-shadow:var(--toon-shadow-md)}.wizard-level-btn.no-content{opacity:.35;cursor:not-allowed;pointer-events:none}.wizard-level-btn.wizard-level-sel{outline:2px solid var(--accent);outline-offset:-1px}.wizard-book-list{display:flex;flex-direction:column;gap:8px;width:calc(100% + 56px);margin:0 -28px}.wizard-book-btn{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:var(--toon-line-thin);border-radius:var(--radius-lg);background:var(--surface-alt);box-shadow:var(--toon-shadow-sm);cursor:pointer;font-family:var(--display-font);font-weight:950;font-size:var(--text-base);color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s;text-align:left}.wizard-book-btn:hover,.wizard-book-btn:focus-visible{transform:translate(3px);box-shadow:var(--toon-shadow-md);border-color:var(--accent)}.wizard-book-count{font-size:var(--text-xs);color:var(--text-secondary);background:var(--border);padding:2px 10px;border-radius:var(--radius-full)}.wizard-book-random{margin-top:8px;justify-content:center;border-style:dashed;color:var(--accent)}.wizard-book-random:hover{color:var(--ink);border-color:var(--accent)}.wizard-back{margin-top:8px;padding:6px 16px;border:none;background:transparent;color:var(--text-secondary);font-family:var(--display-font);font-weight:700;font-size:var(--text-sm);cursor:pointer}.wizard-back:hover{color:var(--ink)}.mp-overlay{position:fixed;inset:0;background:#0006;z-index:200;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .32s ease,backdrop-filter .32s ease,-webkit-backdrop-filter .32s ease}.mp-overlay.open{opacity:1;pointer-events:auto}.mp-panel{position:fixed;top:0;left:0;bottom:0;width:420px;max-width:94vw;background:var(--surface);border-right:1.5px solid var(--border);box-shadow:6px 0 32px #0000002e;z-index:201;display:flex;flex-direction:column;opacity:0;transform:translate(-116%) scale(.98);transition:transform .42s cubic-bezier(.2,.9,.16,1),opacity .28s ease,box-shadow .42s ease;will-change:transform,opacity}.mp-panel.open{opacity:1;transform:translate(0) scale(1)}.mp-head{height:52px;min-height:52px;display:flex;align-items:center;padding:0 8px 0 18px;border-bottom:1.5px solid var(--border-light);flex-shrink:0}.mp-title{flex:1;font-size:var(--text-base);font-weight:700;color:var(--accent);letter-spacing:-.01em}.mp-close{width:40px;height:40px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.mp-close:hover{background:var(--surface-alt);color:var(--text)}.mp-close:active{transform:scale(.9)}.mp-lang-bar{display:flex;padding:12px 14px 6px;gap:8px;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}.mp-lang-bar::-webkit-scrollbar{display:none}.mp-lang-btn{font-family:var(--body-font);font-size:var(--text-xs);font-weight:700;padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--radius-full);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;min-height:36px}.mp-lang-btn:hover{border-color:var(--accent);color:var(--accent)}.mp-lang-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.mp-level-bar{display:flex;padding:6px 14px 10px;gap:6px;overflow-x:auto;flex-shrink:0;border-bottom:1.5px solid var(--border-light);scrollbar-width:none;-webkit-overflow-scrolling:touch}.mp-level-bar::-webkit-scrollbar{display:none}.mp-level-pill{font-family:var(--body-font);font-size:var(--text-2xs);font-weight:700;padding:5px 11px;border:1.5px solid var(--border);border-radius:var(--radius-full);background:transparent;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;min-height:30px}.mp-level-pill:hover{color:var(--text-secondary);border-color:var(--border)}.mp-level-pill.has-content{color:var(--text-secondary)}.mp-level-pill.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);font-weight:700}.mp-tree{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0 32px;-webkit-overflow-scrolling:touch}.mp-tree::-webkit-scrollbar{width:3px}.mp-tree::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.mp-part-header{display:flex;align-items:center;gap:8px;padding:13px 16px;cursor:pointer;transition:background .12s;user-select:none;-webkit-user-select:none;min-height:50px}.mp-part-header:hover{background:var(--surface-alt)}.mp-part-header:active{background:var(--accent-light)}.mp-chevron-sm{width:14px;height:14px;color:var(--text-muted);flex-shrink:0;transition:transform .2s var(--ease)}.mp-part.expanded>.mp-part-header .mp-chevron-sm{transform:rotate(90deg)}.mp-part-label{font-size:var(--text-sm);font-weight:700;color:var(--text);flex:1;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-part-icon{font-size:var(--text-md);flex-shrink:0}.mp-exercises{display:none}.mp-part.expanded>.mp-exercises{display:block}.mp-exercise{position:relative;display:flex;align-items:center;gap:8px;padding:11px 16px 11px 48px;cursor:pointer;transition:background .12s;user-select:none;-webkit-user-select:none;min-height:46px}.mp-exercise:hover{background:var(--surface-alt)}.mp-exercise.active{background:var(--accent-light)}.mp-exercise.active:before{content:"";position:absolute;left:38px;top:50%;transform:translateY(-50%);width:5px;height:5px;background:var(--accent);border-radius:50%}.mp-exercise-num{font-size:var(--text-2xs);font-weight:700;color:var(--text-muted);min-width:24px;flex-shrink:0}.mp-exercise.active .mp-exercise-num{color:var(--accent)}.mp-exercise-title{font-size:var(--text-sm);color:var(--text);flex:1;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-exercise.active .mp-exercise-title{color:var(--accent);font-weight:950}.mp-empty{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:var(--text-sm);line-height:1.7}.mp-trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;height:48px;border-radius:var(--radius-full);background:var(--surface);border:1.5px solid var(--border);color:var(--text)}.mp-trigger svg{width:18px;height:18px;flex-shrink:0}#btnMaterialsCtx{white-space:nowrap}body{font-family:var(--font);background:radial-gradient(circle at 10% 6%,color-mix(in srgb,var(--orange) 20%,transparent),transparent 28rem),radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--launch-blue) 16%,transparent),transparent 24rem),linear-gradient(135deg,rgba(23,19,15,.035) 25%,transparent 25%) 0 0 / 18px 18px,var(--bg)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;background-image:linear-gradient(rgba(23,19,15,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,19,15,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 82%);z-index:0}body>*{position:relative}header{margin:16px 26px 0;min-width:480px;height:calc(var(--header-h) + 8px);min-height:calc(var(--header-h) + 8px);border:var(--toon-line);border-radius:var(--radius-full);background:color-mix(in srgb,var(--surface) 86%,var(--cream));box-shadow:var(--toon-shadow-sm);backdrop-filter:blur(14px)}.brand-logo{height:52px;filter:drop-shadow(2px 2px 0 var(--ink))}#main-area{padding:16px 26px;gap:16px;align-content:stretch}#main-area.input-hidden{grid-template-columns:1fr}#top-panel,#bottom-panel{border:var(--toon-line);border-radius:var(--radius-lg);background:radial-gradient(circle at 96% 10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 18rem),color-mix(in srgb,var(--surface) 90%,var(--cream));box-shadow:var(--toon-shadow-sm)}#top-panel{padding:24px 28px 54px}#bottom-panel{padding:10px 22px 18px}.exercise-badge,.input-caption h3,#bottom-panel h3,.top-popover-head span,.mp-title,.settings-tab-btn,.voice-popover label,.setting-label,.time-display,.mp-part-label,.mp-exercise-title{font-family:var(--display-font);font-weight:950;letter-spacing:-.02em}.exercise-badge{display:inline-flex;width:max-content;padding:7px 12px;border:var(--toon-line-thin);border-radius:var(--radius-full);color:#fff;background:var(--coral);box-shadow:3px 3px 0 var(--ink)}#top-panel h2,.input-caption h3,#bottom-panel h3{color:var(--ink);font-family:var(--display-font);font-weight:950}#top-panel h2{margin-top:12px;font-size:var(--text-lg)}.sentence{font-size:var(--text-md);border-radius:18px;transition:background .2s,color .2s,transform .2s,filter .3s,box-shadow .2s}.sentence.active{background:var(--coral);color:#fff;box-shadow:4px 4px 0 var(--ink)}.sentence.active.repeat{background:var(--amber-400);box-shadow:4px 4px 0 var(--ink);animation:none}.transcript-blurred .sentence.active,.transcript-blurred .sentence.active.repeat{box-shadow:4px 4px 0 var(--ink)}#controls-bar{height:calc(var(--controls-h) + 6px);min-height:calc(var(--controls-h) + 6px);margin:32px 0 0;border:var(--toon-line);border-radius:var(--radius-full);background:color-mix(in srgb,var(--surface) 88%,var(--cream));box-shadow:var(--toon-shadow-sm)}#controls-bar:before{display:none}.progress-wrap{border:var(--toon-line-thin);background:var(--cream);box-shadow:inset 0 2px #17130f1a}.progress-fill{background:linear-gradient(90deg,var(--orange),var(--coral));opacity:1}.progress-thumb{border:var(--toon-line-thin);background:var(--coral);box-shadow:3px 3px 0 var(--ink)}.btn,.mp-lang-btn,.mp-level-pill,.voice-choice-btn,.font-family-options button,.theme-preset-dot{border:var(--toon-line-thin);border-radius:16px;background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--display-font);font-weight:700;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s}.font-family-options button[data-font=launch],.font-family-options button[data-font=launch].active{font-weight:700}.font-family-options button[data-font=mono]{letter-spacing:-.03em}.btn:hover,.mp-lang-btn:hover,.mp-level-pill:hover,.voice-choice-btn:hover,.font-family-options button:hover{transform:translate(1px,1px);border-color:var(--ink);background:var(--surface);box-shadow:2px 2px 0 var(--ink)}.btn:active,.mp-lang-btn:active,.mp-level-pill:active,.voice-choice-btn:active,.font-family-options button:active{transform:translate(3px,3px);box-shadow:none}.voice-choice-btn:has(.voice-cache-dot.not-cached):hover{transform:none;box-shadow:3px 3px 0 var(--ink);background:var(--cream)}.voice-choice-btn:has(.voice-cache-dot.not-cached):active{transform:none;box-shadow:3px 3px 0 var(--ink);border-color:var(--border)}.btn.primary,.btn-icon-pill.active,.mp-lang-btn.active{border-color:var(--ink);background:var(--coral);color:#fff;box-shadow:4px 4px 0 var(--ink);font-weight:950;text-shadow:0 0 .5px rgba(255,255,255,.6)}.btn.ab-active{box-shadow:4px 4px 0 var(--ink)}.btn.primary:hover,.btn-icon-pill.active:hover{background:var(--orange);box-shadow:2px 2px 0 var(--ink)}.btn.ab-active:hover{box-shadow:2px 2px 0 var(--ink)}.btn.icon-only,.btn.with-label-icon,.btn-icon-pill,.mp-trigger,.state-trigger-pill,.state-trigger-btn{border-radius:var(--radius-full)}.voice-cache-delete-btn{border:var(--toon-line-thin);border-radius:50%;background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--display-font);font-weight:700;opacity:1;width:26px;height:26px}.voice-cache-delete-btn svg{width:11px;height:11px}.voice-cache-delete-btn:hover{background:var(--danger-light);color:var(--danger);border-color:var(--danger);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.voice-cache-delete-btn:active{transform:translate(3px,3px);box-shadow:none}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--display-font);font-weight:700;font-size:var(--text-sm);color:var(--ink)}.checkbox-label input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:var(--toon-line-thin);border-radius:6px;background:var(--cream);box-shadow:2px 2px 0 var(--ink);cursor:pointer;flex-shrink:0;transition:background .15s,box-shadow .15s,transform .15s}.checkbox-label input[type=checkbox]:checked{background:var(--accent);box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.checkbox-label input[type=checkbox]:checked:after{content:"";display:block;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg) translate(1px,-1px);margin:3px 0 0 6px}.voice-cache-item{border:var(--toon-line-thin);border-radius:var(--radius-full);background:var(--cream);box-shadow:2px 2px 0 var(--ink)}.voice-cache-storage-bar{border:var(--toon-line-thin);border-radius:4px;background:var(--border);box-shadow:2px 2px 0 var(--ink)}.voice-cache-storage-bar-fill{border-radius:4px;background:var(--accent)}.voice-cache-dot.not-cached{border:var(--toon-line-thin);background:var(--cream);color:var(--ink);box-shadow:2px 2px 0 var(--ink);opacity:1;width:24px;height:24px}.voice-cache-dot.not-cached:hover{background:var(--surface);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}.voice-cache-dot.preloading{border:var(--toon-line-thin);background:var(--cream);box-shadow:2px 2px 0 var(--ink);opacity:1;width:24px;height:24px}.state-trigger-pill{border:var(--toon-line-thin);background:var(--cream);box-shadow:2px 2px 0 var(--ink)}.btn-icon-pill .pill-text,.time-display{color:var(--ink-soft)}.voice-popover,.settings-popover,.font-popover,.score-display{border:var(--toon-line);border-radius:var(--radius-lg);background:var(--cream);box-shadow:var(--toon-shadow-lg)}.top-popover-head{border-color:var(--ink)}.textarea-wrap textarea{border:var(--toon-line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 2px #17130f0d,4px 4px 0 var(--ink)}.textarea-wrap textarea:focus{border-color:var(--ink);box-shadow:inset 0 2px #17130f0d,4px 4px 0 var(--ink),0 0 0 5px var(--accent-glow)}.score-display{background:radial-gradient(circle at 96% 0%,rgba(113,217,158,.26),transparent 10rem),var(--cream)}.score-circle{border:var(--toon-line-thin);box-shadow:3px 3px 0 var(--ink)}.diff-output{border:var(--toon-line-thin);border-radius:var(--radius);background:var(--surface)}.mp-overlay{background:#17130f6b;backdrop-filter:blur(3px)}.mp-panel{margin:14px 0 14px 14px;height:calc(100vh - 28px);border:var(--toon-line);border-radius:var(--radius-lg);background:radial-gradient(circle at 80% 0%,color-mix(in srgb,var(--launch-blue) 18%,transparent),transparent 16rem),var(--cream);box-shadow:var(--toon-shadow-lg)}.mp-head,.mp-level-bar{border-color:var(--ink)}.mp-title{color:var(--ink);font-size:var(--text-lg)}.mp-close{border:var(--toon-line-thin);background:var(--surface);box-shadow:2px 2px 0 var(--ink)}.mp-level-pill.active,.voice-choice-btn.active,.font-family-options button.active{border-color:var(--ink);background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--ink);font-weight:950;text-shadow:0 0 .5px rgba(255,255,255,.6)}.mp-exercise.active{background:color-mix(in srgb,var(--orange) 22%,transparent)}.mp-exercise.active:before{background:var(--coral);box-shadow:0 0 0 2px var(--ink)}@media(max-width:720px){header{margin:8px 16px 0;border-width:2px;box-shadow:3px 3px 0 var(--ink)}#main-area{padding:16px}#main-area:not(.input-hidden){gap:20px}#top-panel,#bottom-panel,#controls-bar{border-width:2px;box-shadow:3px 3px 0 var(--ink)}.progress-container{top:-35px}}@media(max-width:600px){.brand-logo{height:32px}}.btn-danger{background:var(--pink-400);color:#fff;border-color:transparent}.btn-danger:hover{background:#e53e3e;border-color:transparent}.btn-danger:active{background:#c53030}.setting-group{margin-bottom:16px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}.setting-row-standalone{flex-direction:column;align-items:flex-start;gap:8px}.setting-row-standalone .btn{align-self:flex-end}.setting-label{font-family:var(--display-font);font-weight:950;font-size:var(--text-base);color:var(--text);margin-bottom:2px;letter-spacing:-.02em}.setting-hint{font-family:var(--display-font);font-weight:950;font-size:var(--text-base);color:var(--text-secondary);line-height:1.4;letter-spacing:-.02em}