:root{color-scheme:light dark;--accent: #9575d6;--accent-dark: #6a52a8;--accent-soft: #9575d61f;--accent-press: #7c5fc0;--bg: #ffffff;--bg-alt: #f7f7f8;--surface: #ffffff;--text: #3c3c3c;--text-soft: #777;--muted: #b3b3b3;--border: #e5e5e5;--danger-bg: #fff5f5;--scrim-a: rgba(247, 247, 248, .78);--scrim-b: rgba(247, 247, 248, .9);--blue: #1cb0f6;--blue-dark: #1899d6;--yellow: #ffc800;--red: #ff4b4b;--purple: #c984dfa0;--orange: #ff9600;--radius: 16px;--radius-sm: 12px;--shadow: 0 2px 8px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--nav-h: 68px;--topbar-h: 56px}@media (prefers-color-scheme: dark){:root:not([data-dark=light]){--accent: #a78fe0;--accent-dark: #c6b3ef;--accent-soft: #a78fe024;--accent-press: #9174d6;--bg: #16161b;--bg-alt: #1c1c22;--surface: #23232c;--text: #e7e5ec;--text-soft: #a6a3af;--muted: #6d6b78;--border: #2f2f39;--danger-bg: #2a1719;--scrim-a: rgba(15, 15, 19, .7);--scrim-b: rgba(15, 15, 19, .9);--shadow: 0 2px 8px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .7)}}:root[data-dark=dark]{--accent: #a78fe0;--accent-dark: #c6b3ef;--accent-soft: #a78fe024;--accent-press: #9174d6;--bg: #16161b;--bg-alt: #1c1c22;--surface: #23232c;--text: #e7e5ec;--text-soft: #a6a3af;--muted: #6d6b78;--border: #2f2f39;--danger-bg: #2a1719;--scrim-a: rgba(15, 15, 19, .7);--scrim-b: rgba(15, 15, 19, .9);--shadow: 0 2px 8px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .7)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-alt);color:var(--text);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.shell{max-width:600px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;display:flex;flex-direction:column;box-shadow:0 0 40px #0000000f}.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--bg);border-bottom:2px solid var(--border);flex-shrink:0}.brand{font-size:20px;font-weight:800;letter-spacing:-.5px}.brand b{color:var(--accent)}.bottom-nav{height:var(--nav-h);display:flex;background:var(--bg);border-top:2px solid var(--border);flex-shrink:0;z-index:20}.nav-item{flex:1;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-soft);font-size:11px;font-weight:700;padding:6px 0;transition:color .15s,transform .1s}.nav-item:hover{color:var(--text)}.nav-item.active{color:var(--accent)}.nav-item.active .nav-emoji{transform:translateY(-2px) scale(1.12)}.nav-emoji{font-size:22px;line-height:1;transition:transform .15s}.nav-label{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-item-settings{color:var(--muted)}.content{flex:1;overflow:hidden;position:relative}.view-host{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px;animation:fade-in .25s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.chat-host{max-width:600px;margin:0 auto}.chat-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--bg);border-bottom:1px solid var(--border)}.chat-title{font-size:18px;font-weight:800}.chat-sub{font-size:12px;color:var(--text-soft)}.chat-stats{font-size:11px;color:var(--text-soft);font-variant-numeric:tabular-nums}.messages{padding:16px 14px;display:flex;flex-direction:column;gap:16px}.message{display:flex;max-width:86%}.message-align-tutor{align-self:flex-start;align-items:flex-end}.message-align-user{align-self:flex-end;flex-direction:row-reverse}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:var(--accent-soft);box-shadow:var(--shadow)}.bubble-content{min-width:0;display:flex;flex-direction:column;gap:6px}.bubble-thinking{display:flex;gap:4px;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;width:max-content}.bubble-thinking .dot{width:7px;height:7px;border-radius:50%;background:var(--muted, #9aa);animation:thinking-bounce 1.2s infinite ease-in-out}.bubble-thinking .dot:nth-child(2){animation-delay:.15s}.bubble-thinking .dot:nth-child(3){animation-delay:.3s}@keyframes thinking-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.bubble-line{padding:10px 14px;border-radius:18px;font-size:15.5px;line-height:1.45;box-shadow:var(--shadow);word-wrap:break-word;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--border)}.message-align-user .bubble-line{background:var(--accent);color:#fff;border-color:var(--accent-press)}.bubble-inner .fr{color:var(--blue);font-weight:700}.message-align-user .bubble-inner .fr{color:#e7f9ea}.controls-tutor,.controls-user{display:flex}.speech-btn{border:none;background:transparent;font-size:16px;padding:4px 2px;border-radius:8px;opacity:.6;transition:opacity .15s,transform .1s,background .15s}.speech-btn:hover{opacity:1;background:#0000000f}.speech-btn.playing{animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.input-area{position:sticky;bottom:0;padding:12px 14px;background:var(--bg);border-top:1px solid var(--border)}.input-wrap{display:flex;align-items:flex-end;gap:10px;background:var(--bg-alt);border:2px solid var(--border);border-radius:22px;padding:8px 8px 8px 16px;transition:border-color .15s}.input-wrap:focus-within{border-color:var(--accent)}.chat-input{flex:1;border:none;background:transparent;resize:none;outline:none;font-size:15.5px;line-height:1.4;max-height:120px;min-height:22px;font-family:inherit;color:var(--text)}.chat-input::placeholder{color:var(--muted)}.send-btn{flex-shrink:0;border:none;background:var(--accent);color:#fff;width:34px;height:34px;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s,opacity .15s}.send-btn:hover:not(:disabled){background:var(--accent-press)}.send-btn:active{transform:scale(.94)}.send-btn:disabled{opacity:.4;cursor:not-allowed}.suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.chip{border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:18px;padding:8px 14px;font-size:13.5px;font-weight:700;transition:all .15s}.chip:hover{border-color:var(--accent);background:var(--accent-soft)}.progress{height:14px;border-radius:999px;overflow:hidden;background:#e5e5e5;box-shadow:inset 0 1px 2px #00000014}.progress-track{background:#e5e5e5}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:999px;transition:width .4s ease;box-shadow:0 0 8px #9575d680}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:800;color:#fff;letter-spacing:.3px;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.25)}.img-preview{max-width:240px;width:100%;border-radius:var(--radius);display:block;object-fit:cover;box-shadow:var(--shadow-lg)}.img-placeholder{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px;border-radius:var(--radius);background:var(--bg-alt);border:2px dashed var(--border);color:var(--text-soft);font-size:14px;font-weight:600}.cards-host{max-width:600px;margin:0 auto;padding:0 16px}.cards-header{display:flex;align-items:center;justify-content:space-between;padding:14px 4px 16px}.cards-title{font-size:18px;font-weight:800}.cards-sub{font-size:12px;color:var(--text-soft)}.deck{display:flex;flex-direction:column;gap:16px}.flashcard{perspective:1200px;cursor:pointer;height:240px}.card-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}.flashcard.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;background:var(--surface);border:1px solid var(--border);overflow:hidden}.card-front{gap:12px}.card-front .card-img{max-height:150px;object-fit:cover;border-radius:var(--radius-sm)}.card-front .card-caption{font-size:12px;color:var(--text-soft);margin-top:8px}.card-back{transform:rotateY(180deg);background:linear-gradient(160deg,#fafff4,#f0fff0);gap:8px}.card-term{font-size:26px;font-weight:800}.card-meaning{font-size:16px;color:var(--accent-dark);font-weight:700}.card-example{font-size:14px;color:var(--text-soft);font-style:italic;margin-top:6px;line-height:1.4}.card-hint{font-size:11.5px;color:var(--muted);margin-top:10px}.empty-hint{text-align:center;padding:48px 20px;color:var(--text-soft);font-size:15px;line-height:1.6}.empty-hint b{color:var(--accent-dark)}.gen-status{text-align:center;padding:12px;color:var(--text-soft);font-size:14px}.gen-progress{max-width:220px;margin:12px auto 0}.listen-host{max-width:600px;margin:0 auto;padding:0 16px}.listen-header{display:flex;align-items:center;justify-content:space-between;padding:14px 4px 16px}.listen-title{font-size:18px;font-weight:800}.listen-sub{font-size:12px;color:var(--text-soft)}.phrase-grid{display:flex;flex-direction:column;gap:12px;padding:4px 0}.listen-chip{border:2px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--surface);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}.listen-chip.playing{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.listen-chip.active{border-color:var(--accent)}.listen-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 16px}.listen-play{width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform .1s,background .15s}.listen-play:hover{background:var(--accent-press)}.listen-play:active{transform:scale(.94)}.speed-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}.speed-label{font-size:13px;font-weight:700;color:var(--text-soft);min-width:44px;text-align:center}.setting-range{flex:1;max-width:220px;accent-color:var(--accent);height:26px}.listen-input{max-width:520px;margin:0 auto}.listen-textarea{width:100%;border:2px solid var(--border);border-radius:var(--radius);padding:14px;font-family:inherit;font-size:15px;line-height:1.5;resize:vertical;min-height:110px;outline:none;transition:border-color .15s;color:var(--text)}.listen-textarea:focus{border-color:var(--accent)}.render-line{margin:6px 0}.render-word{display:inline-block;padding:2px 4px;border-radius:6px;transition:background .12s}.render-word:hover{background:var(--accent-soft)}.render-word.playing{background:var(--accent);color:#fff}.render-space{display:inline-block;width:.4em}.listen-empty{text-align:center;padding:48px 20px;color:var(--text-soft);font-size:15px;line-height:1.6}.settings-host{max-width:600px;margin:0 auto;padding:0 16px}.settings-header{display:flex;align-items:center;gap:10px;padding:6px 4px 16px}.settings-title{font-size:18px;font-weight:800}.settings-sub{font-size:12px;color:var(--text-soft)}.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}.section-title{font-size:15px;font-weight:800;margin-bottom:12px}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.theme-swatch{border:none;width:100%;aspect-ratio:1;border-radius:16px;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .12s}.theme-swatch:hover{transform:scale(1.06)}.theme-swatch.selected{outline:3px solid var(--text);outline-offset:2px}.seg{display:flex;gap:4px;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:4px}.seg-btn{flex:1;border:none;background:transparent;color:var(--text-soft);font:inherit;font-weight:700;font-size:13px;padding:8px 6px;border-radius:9px;transition:background .15s,color .15s}.seg-btn[aria-pressed=true]{background:var(--accent);color:#fff}.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tts-note{font-size:12px;color:var(--text-soft);background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin-bottom:14px;line-height:1.5}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.setting-row:last-child{margin-bottom:0}.setting-row>label{font-size:14px;font-weight:700;flex-shrink:0}.setting-select,.setting-range{width:100%;max-width:180px;border:2px solid var(--border);border-radius:12px;padding:9px 12px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}.setting-select:focus,.setting-range:focus{border-color:var(--accent)}.setting-val{flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-dark);min-width:32px;text-align:right}.about p{font-size:14px;line-height:1.6;margin-bottom:8px}.about .muted{color:var(--muted);font-size:12.5px}.onboarding{min-height:100vh}.onboarding .topbar{justify-content:center}.onboarding .tagline{font-weight:700;font-size:13px;color:var(--accent-dark)}.onboarding .hero{text-align:center;padding:32px 24px 20px}.onboarding .hero h1{font-size:26px;margin-bottom:12px}.onboarding .hero-sub{color:var(--text-soft);font-size:14.5px;line-height:1.6;max-width:380px;margin:0 auto}.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;padding:8px 24px;margin-bottom:24px}.trio-card{border-radius:var(--radius);padding:20px 12px;text-align:center;background:var(--bg-alt);border:1px solid var(--border);box-shadow:var(--shadow)}.trio-icon{font-size:34px;margin-bottom:8px}.trio-title{font-size:15px;font-weight:800;margin-bottom:6px}.trio-desc{font-size:12px;color:var(--text-soft);line-height:1.45}.onboarding .card{background:var(--bg-alt);border-radius:var(--radius);padding:18px 22px;margin:0 24px 24px;border:1px solid var(--border)}.onboarding .card h2{margin:0 0 12px;font-size:18px}.onboarding .steps{margin:0;padding-left:20px}.onboarding .steps li{margin-bottom:8px;font-size:14px;line-height:1.45}.onboarding .actions{display:flex;justify-content:center;gap:14px;padding:0 24px 40px}.btn{border:none;border-radius:14px;padding:13px 26px;font-size:15px;font-weight:800;transition:transform .1s,filter .15s}.btn:hover{filter:brightness(.96)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}.btn-ghost{background:transparent;color:var(--accent-dark);border:2px solid var(--border)}.muted{color:var(--muted)}.hidden{display:none!important}.row{display:flex;align-items:center;gap:10px}.spacer{flex:1}.center{display:flex;align-items:center;justify-content:center}.learn-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.learn-bg-layer{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease;will-change:opacity}.learn-bg-layer.is-visible{opacity:1}.learn-bg-layer.no-fade{transition:none}.learn-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,var(--scrim-a),var(--scrim-b))}#app{position:relative;z-index:1}body.has-learn-bg .shell,body.has-learn-bg .content,body.has-learn-bg .view-host{background:transparent}.learn{max-width:600px;margin:0 auto;padding:0 16px}.learn-stats{display:flex;gap:12px;justify-content:center;padding:16px 0 8px}.learn-stat{display:flex;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:6px 16px;box-shadow:var(--shadow)}.stat-emoji{font-size:18px}.stat-num{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}.stat-label{font-size:12px;color:var(--text-soft);font-weight:700}.unit{margin:18px 0 8px}.unit-title-row{display:flex;align-items:baseline;justify-content:space-between}.unit-title{font-size:20px;font-weight:800;margin:0}.unit-progress{font-size:13px;color:var(--text-soft);font-weight:700}.unit-desc{margin:2px 0 14px;font-size:13.5px;color:var(--text-soft)}.unit-place{position:relative;height:110px;border-radius:var(--radius);background-size:cover;background-position:center;overflow:hidden;margin-bottom:10px;box-shadow:var(--shadow)}.unit-place-name{position:absolute;left:10px;bottom:8px;color:#fff;font-size:13px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6)}.unit-progress-chip{position:absolute;right:10px;top:10px;background:#ffffffeb;color:var(--accent-dark);font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px}.unit-story{margin:0 0 14px;font-size:13.5px;color:var(--text-soft);line-height:1.5}.unit-intro{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}.intro-toggle{width:100%;border:none;background:transparent;padding:12px 14px;font-size:14px;font-weight:800;text-align:left;color:var(--accent-dark)}.intro-toggle:hover{background:var(--accent-soft)}.intro-body{padding:0 14px 14px}.intro-story{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--text)}.vocab-chips{display:flex;flex-wrap:wrap;gap:8px}.vocab-chip{border:2px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 12px;display:inline-flex;align-items:baseline;gap:8px;transition:all .12s}.vocab-chip:hover{border-color:var(--accent);background:var(--accent-soft)}.vocab-fr{font-weight:800;font-size:14px;color:var(--blue)}.vocab-de{font-size:12px;color:var(--text-soft)}.node-review{background:var(--orange, #ff9600);animation:node-pulse 1.6s ease-in-out infinite}.node-review:hover{filter:brightness(.95)}.node-review .node-face{font-size:26px}.setting-toggle{width:44px;height:24px;accent-color:var(--accent);cursor:pointer}.grammar-section{margin:22px 0 6px;padding-top:16px;border-top:2px solid var(--border)}.grammar-chips{display:flex;flex-wrap:wrap;gap:8px}.grammar-chip{border:2px solid var(--purple);background:var(--surface);border-radius:999px;padding:8px 14px;display:inline-flex;align-items:baseline;gap:8px;transition:all .12s}.grammar-chip:hover{background:var(--purple);border-color:var(--purple)}.grammar-chip:hover .grammar-fr,.grammar-chip:hover .grammar-de{color:#fff}.grammar-fr{font-weight:800;font-size:14px;color:var(--purple)}.grammar-de{font-size:12px;color:var(--text-soft)}.path{display:flex;flex-direction:column;align-items:center;gap:4px}.node{width:84px;height:84px;border-radius:50%;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;box-shadow:var(--shadow-lg);transition:transform .12s}.node:active{transform:scale(.95)}.node-face{font-size:28px;line-height:1}.node-title{font-size:10px;font-weight:800;max-width:76px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}.node-kind{font-size:8px;font-weight:700;color:#fff;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.25)}.node-done .node-kind,.node-locked .node-kind{color:var(--text-soft);text-shadow:none;opacity:.8}.node-available{background:var(--accent)}.node-available:hover{background:var(--accent-press)}.node-done{background:var(--accent-soft);border:2px solid var(--accent);cursor:pointer}.node-done .node-title{color:var(--accent-dark);text-shadow:none}.node-done .node-face{font-size:26px}.node-locked{background:var(--bg-alt);border:2px solid var(--border);box-shadow:var(--shadow);cursor:not-allowed}.node-locked .node-face{font-size:26px;filter:grayscale(1);opacity:.7}.node-locked .node-title{color:var(--muted);text-shadow:none}.node-current{background:var(--accent);animation:node-pulse 1.6s ease-in-out infinite}@keyframes node-pulse{0%,to{box-shadow:0 0 #9575d680}50%{box-shadow:0 0 0 12px #9575d600}}.path-link{width:6px;height:26px;border-radius:999px;background:var(--border);margin:2px 0}.path-link-done{background:var(--accent)}.learn-cta{padding:22px 0 10px;text-align:center}.learn-cta-btn{min-width:240px}.learn-done{text-align:center;color:var(--text-soft);padding:30px 10px;font-size:15px;line-height:1.6}.learn-done p{margin:8px 0 0}.lesson-host{max-width:600px;margin:0 auto;padding:0 16px 40px;display:flex;flex-direction:column;min-height:100%}.lesson-header{display:flex;align-items:center;gap:14px;padding:14px 0;position:sticky;top:0;background:var(--bg);z-index:5}.lesson-back{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--surface);font-size:16px;color:var(--text-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,color .15s}.lesson-back:hover{border-color:var(--accent);color:var(--accent)}.lesson-progress{flex:1;height:14px;border-radius:999px;background:var(--bg-alt);border:2px solid var(--border);overflow:hidden}.lesson-progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}.lesson-counter{font-size:13px;font-weight:800;color:var(--text-soft);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}.exercise{padding-top:6px}.ex-prompt{margin-bottom:18px}.ex-prompt-label{font-size:12.5px;font-weight:800;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.ex-prompt-text{font-size:20px;font-weight:800;line-height:1.35}.ex-hint{margin:-6px 0 16px}.hint-toggle{border:none;background:transparent;color:var(--blue);font-size:13.5px;font-weight:800;padding:4px 0}.hint-text{margin-top:6px;font-size:13.5px;color:var(--text-soft);background:var(--bg-alt);border-radius:10px;padding:10px 12px;line-height:1.5}.text-input{width:100%;border:2px solid var(--border);border-radius:var(--radius);padding:16px 18px;font-size:17px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.btn-check,.btn-next{width:100%;margin-top:20px}.btn-listen{margin-bottom:14px}.speak-gloss{margin-top:6px;font-size:14px;font-weight:600;color:var(--text-soft)}.speak-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 4px;text-align:center}.btn-mic{width:100%;font-size:17px}.speak-stage.is-listening .btn-mic{animation:speak-pulse 1.2s ease-in-out infinite}.speak-status{font-size:13.5px;color:var(--text-soft);min-height:1.2em}.speak-heard{font-size:15.5px;font-weight:700;color:var(--text);background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:12px 16px;width:100%;transition:border-color .15s,background .15s}.speak-heard.speak-heard-wrong{background:var(--danger-bg);border-color:var(--red)}.speak-unsupported{font-size:14px;color:var(--text-soft);line-height:1.5}.speak-retry-row{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.speak-retry-hint{font-size:13.5px;color:var(--text-soft)}.speak-retry-row .btn-ghost{width:100%}@keyframes speak-pulse{0%,to{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 10px transparent}}.opts{display:flex;flex-direction:column;gap:12px}.opt{border:2px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:16px 18px;font-size:16px;font-weight:800;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all .15s}.opt:hover{border-color:var(--accent);background:var(--accent-soft)}.opt.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}.opt:disabled{opacity:.55;cursor:default}.opt-correct,.opt-correct:disabled{opacity:1;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}.opt-wrong,.opt-wrong:disabled{opacity:1;border-color:var(--red);background:var(--danger-bg);color:var(--red)}.opt-mark{flex:none;font-size:18px;font-weight:900}.opt-correct .opt-mark{color:var(--accent)}.opt-wrong .opt-mark{color:var(--red)}.dlog-q-foot:empty{display:none}.dlog-q-foot .fb-hint{margin-top:14px}.wb-slot-area{min-height:74px;border:2px dashed var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-bottom:18px}.wb-slot-empty{color:var(--muted);font-size:13.5px;font-weight:700}.wb-chip{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-dark);border-radius:10px;padding:8px 14px;font-size:15px;font-weight:800;transition:transform .1s}.wb-chip:active{transform:scale(.95)}.wb-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.wb-tile{border:2px solid var(--border);background:var(--surface);border-radius:10px;padding:10px 16px;font-size:15.5px;font-weight:800;box-shadow:var(--shadow);transition:all .12s}.wb-tile:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.feedback{margin-top:18px;border-radius:var(--radius);padding:16px;animation:fade-in .25s ease}.fb-ok{background:var(--accent-soft);border:2px solid var(--accent)}.fb-no{background:var(--danger-bg);border:2px solid var(--red)}.fb-verdict{font-size:17px;font-weight:800;margin-bottom:6px}.fb-ok .fb-verdict{color:var(--accent-dark)}.fb-no .fb-verdict{color:var(--red)}.fb-canonical{font-size:15.5px;font-weight:700;color:var(--text)}.fb-translation{font-size:13.5px;color:var(--text-soft)}.fb-hint{margin-top:6px;font-size:13.5px;color:var(--text-soft);line-height:1.5}.lesson-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 16px;gap:10px}.done-emoji{font-size:64px;animation:bounce-in .5s cubic-bezier(.34,1.56,.64,1)}@keyframes bounce-in{0%{transform:scale(0)}to{transform:scale(1)}}.done-title{font-size:26px;font-weight:800;margin:6px 0 0}.done-sub{color:var(--text-soft);font-size:14.5px;margin:0}.done-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0 18px}.done-stat{background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px}.done-back{min-width:240px}.view-error{padding:24px;color:var(--red);font-weight:700;text-align:center}.translate-area{display:flex;flex-direction:column;gap:14px}.letters-box{display:flex;flex-direction:column;gap:12px}.built{min-height:56px;border:2px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg-alt)}.built-text{font-size:20px;font-weight:800;letter-spacing:1px}.built-empty{color:var(--muted);font-size:13px;font-weight:700}.built-backspace{margin-left:auto;border:none;background:transparent;font-size:18px;color:var(--text-soft);padding:2px 8px;border-radius:8px}.built-backspace:hover{background:#0000000f}.ltiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.ltile{min-width:44px;height:48px;border:2px solid var(--border);border-radius:10px;background:var(--surface);font-size:20px;font-weight:800;padding:0 6px;box-shadow:var(--shadow);transition:all .12s}.ltile:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.btn-mode{align-self:flex-start;font-size:13px;padding:8px 14px}.ex-image{margin:4px 0 18px;display:flex;justify-content:center}.ex-image-img{max-width:100%;max-height:260px;border-radius:var(--radius);box-shadow:var(--shadow-lg);object-fit:contain}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.match-col{display:flex;flex-direction:column;gap:10px}.match-item{border:2px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);padding:14px 10px;font-size:15px;font-weight:800;text-align:center;box-shadow:var(--shadow);transition:all .12s;min-height:52px;display:flex;align-items:center;justify-content:center}.match-item:hover:not(:disabled){border-color:var(--accent)}.match-item.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}.match-item.matched{background:var(--accent);border-color:var(--accent);color:#fff}.match-item.wrong{background:var(--danger-bg);border-color:var(--red);color:var(--red)}.imgmatch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.imgmatch-imgs,.imgmatch-words{display:flex;flex-direction:column;gap:10px}.imgmatch-imgwrap{border:2px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:all .12s;background:var(--bg-alt)}.imgmatch-imgwrap:hover{border-color:var(--accent)}.imgmatch-img{width:100%;height:74px;object-fit:cover;display:block}.imgmatch-imgwrap.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.imgmatch-imgwrap.matched{border-color:var(--accent);opacity:.85}.imgmatch-imgwrap.wrong{border-color:var(--red)}.imgmatch-word{border:2px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);padding:14px 10px;font-size:15px;font-weight:800;text-align:center;box-shadow:var(--shadow);min-height:74px;transition:all .12s}.imgmatch-word:hover:not(:disabled){border-color:var(--accent)}.imgmatch-word.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}.imgmatch-word.matched{background:var(--accent);border-color:var(--accent);color:#fff}.imgmatch-word.wrong{background:var(--danger-bg);border-color:var(--red);color:var(--red)}.dialogue{display:flex;flex-direction:column}.dlog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.dlog-step{font-size:12.5px;font-weight:800;color:var(--text-soft);font-variant-numeric:tabular-nums}.dlog-scene{position:relative;height:110px;border-radius:var(--radius);background-size:cover;background-position:center;overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow)}.dlog-scene-name{position:absolute;left:10px;bottom:8px;color:#fff;font-size:13px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6)}.dlog-setting{font-size:13px;font-style:italic;color:var(--text-soft);background:var(--bg-alt);border-left:3px solid var(--accent);border-radius:6px;padding:8px 10px 8px 12px;margin:0 0 12px;line-height:1.45}.dlog-setting:before{content:"📍 ";font-style:normal}.dlog-transcript{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto;background:var(--bg-alt);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px}.dlog-transcript-line{display:flex;align-items:baseline;gap:6px;font-size:14.5px}.dlog-t-avatar{flex-shrink:0}.dlog-t-name{font-weight:800;color:var(--text-soft);flex-shrink:0}.dlog-t-text{color:var(--text)}.dlog-t-note{font-size:13px;color:var(--muted);font-style:italic}.dlog-t-narrate{text-align:center;opacity:.9}.dlog-narrate{display:flex;align-items:center;justify-content:center;min-height:120px;padding:24px 18px;text-align:center}.dlog-narrate-text{font-style:italic;color:var(--text-soft);font-size:15px;line-height:1.5;max-width:34ch}.dlog-narrate-text:before{content:"— "}.dlog-narrate-text:after{content:" —"}.dlog-cast{display:flex;justify-content:center;gap:12px;align-items:flex-start;margin:4px 0 14px;min-height:96px}.dlog-cast-slot{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;opacity:.28;transform:scale(.92);transition:opacity .35s ease,transform .35s ease}.dlog-cast-slot.empty{display:none}.dlog-cast-slot.active{opacity:1;transform:scale(1)}.dlog-cast-img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--border);box-shadow:var(--shadow);background:var(--bg-alt);transition:border-color .35s ease}.dlog-cast-slot.active .dlog-cast-img{border-color:var(--accent)}.dlog-cast-emoji{width:76px;height:76px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:var(--shadow)}.dlog-cast-name{font-size:12px;font-weight:800;color:var(--text-soft);text-align:center}.dlog-cast-slot.active .dlog-cast-name{color:var(--accent-dark)}.dlog-stage{display:flex;flex-direction:column;gap:14px}.dlog-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:var(--shadow)}.dlog-avatar-img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--accent);box-shadow:var(--shadow);background:var(--bg-alt)}.dlog-avatar-img.sm{width:20px;height:20px;border-width:1px;vertical-align:middle;margin-right:2px}.dlog-bubble{position:relative;background:var(--bg-alt);border:1px solid var(--border);border-radius:16px 16px 16px 4px;padding:12px 14px;min-width:0;flex:1}.dlog-speaker{font-size:12px;font-weight:800;color:var(--accent-dark);margin-bottom:4px}.dlog-text{font-size:17px;font-weight:700;line-height:1.4}.dlog-text-tappable{cursor:pointer;border-bottom:1px dashed var(--border)}.dlog-text-tappable:hover{border-bottom-color:var(--accent)}.dlog-tap-hint{font-size:12px;color:var(--muted);margin:0 0 10px}.dlog-t-de{cursor:pointer}.dlog-de{margin-top:5px;font-size:14.5px;color:var(--text-soft);border-top:1px dashed var(--border);padding-top:5px}.dlog-replay{position:absolute;top:8px;right:8px}.dlog-t-wrap{display:flex;flex-direction:column;min-width:0}.dlog-t-de{font-size:13px;color:var(--muted)}.dlog-question{background:var(--bg-alt);border-radius:var(--radius);padding:14px}.dlog-question .ex-prompt-text{font-size:17px}.dlog-wide-layer{display:none}@media (min-width: 1200px){body.has-dialogue-scene .shell,body.has-dialogue-scene .content,body.has-dialogue-scene .view-host{background:transparent}body.has-dialogue-scene .dlog-cast{display:none}.dlog-wide-layer{display:flex;align-items:flex-end;justify-content:space-between;position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;padding:0 max(8px,calc(50% - 656px));background-size:cover;background-position:center;pointer-events:none;overflow:hidden}.dlog-wide-layer:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#f7f7f84d,#f7f7f885 55%,#f7f7f8b8)}.dlog-lane{position:relative;width:336px;height:100%;flex-shrink:0}.dlog-figure{position:absolute;bottom:4vh;width:300px;display:flex;flex-direction:column;align-items:center;opacity:.5;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;will-change:transform,opacity}.dlog-lane-left .dlog-figure{left:0}.dlog-lane-right .dlog-figure{right:0}.dlog-figure[data-depth="0"]{transform:translate(0) scale(1);z-index:2}.dlog-lane-left .dlog-figure[data-depth="1"]{transform:translate(-56px) scale(.8);z-index:1;opacity:.34}.dlog-lane-right .dlog-figure[data-depth="1"]{transform:translate(56px) scale(.8);z-index:1;opacity:.34}.dlog-figure.active{opacity:1}.dlog-figure.active[data-depth="0"]{transform:translate(0) scale(1.03)}.dlog-lane-left .dlog-figure.enter,.dlog-lane-left .dlog-figure.leave{transform:translate(-190%) scale(.7);opacity:0}.dlog-lane-right .dlog-figure.enter,.dlog-lane-right .dlog-figure.leave{transform:translate(190%) scale(.7);opacity:0}.dlog-wide-img{max-width:100%;max-height:60vh;object-fit:contain}.dlog-wide-emoji{font-size:120px;line-height:1}.dlog-figure:before{content:"";position:absolute;left:14%;right:14%;bottom:-2px;height:26px;background:radial-gradient(ellipse at center,rgba(20,20,20,.38),transparent 72%);filter:blur(9px);z-index:-1}.dlog-wide-name{margin-top:8px;padding:4px 14px;border-radius:999px;background:var(--bg);box-shadow:var(--shadow);font-size:13px;font-weight:800;color:var(--text);white-space:nowrap}.dlog-figure[data-depth="1"] .dlog-wide-name{display:none}.dlog-figure.active .dlog-wide-name{background:var(--accent);color:#fff}}