@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap";.scene-split{z-index:5;width:100%;height:calc(100% - 50px);display:flex;position:absolute;top:0;left:0}.scene-canvas{flex-wrap:wrap;flex:3;place-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:relative;overflow:hidden}.scene-canvas canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.scene-panel{font-family:var(--font-hand);color:var(--text);flex-direction:column;flex:2;justify-content:center;padding:32px 28px;display:flex;overflow-y:auto}.scene-panel h2{margin-bottom:12px;font-size:28px}.scene-panel p{margin-bottom:16px;font-size:20px;line-height:1.6}.scene-panel .scene-btn{font-family:var(--font-hand);border:2.5px solid var(--text);color:var(--text);cursor:pointer;background:0 0;border-radius:50px;align-self:flex-start;padding:10px 28px;font-size:20px;transition:all .2s}.scene-panel .scene-btn:hover{background:var(--text);color:var(--bg);transform:scale(1.05)}@media (width<=768px){.scene-split{flex-direction:column}.scene-canvas{flex:1;min-height:40%}.scene-panel{flex:1;padding:16px 20px}}.choice-card{border:2.5px solid var(--text);cursor:pointer;font-family:var(--font-hand);color:var(--text);text-align:center;background:0 0;border-radius:12px;padding:12px 20px;font-size:18px;transition:all .2s}.choice-card:hover{background:var(--accent-light);transform:translateY(-2px)}.choice-card.selected{border-color:var(--accent);background:var(--accent-light)}.choice-card.correct{background:#5ba55b26;border-color:#5ba55b;animation:.4s flash-correct}.choice-card.wrong{background:#d9534f26;border-color:#d9534f;animation:.4s shake}@keyframes flash-correct{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.score-badge{font-family:var(--font-mono);background:var(--accent-light);color:var(--accent);border-radius:20px;padding:4px 12px;font-size:14px;font-weight:700;display:inline-block}.slider-row{font-family:var(--font-hand);align-items:center;gap:12px;margin-bottom:12px;font-size:16px;display:flex}.slider-row label{min-width:100px;color:var(--text)}.slider-row input[type=range]{appearance:none;background:var(--text-muted);border-radius:3px;outline:none;flex:1;height:6px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:18px;height:18px}.slider-row .slider-value{font-family:var(--font-mono);text-align:right;min-width:40px;color:var(--text-muted);font-size:13px}.heatmap-cell{font-family:var(--font-mono);cursor:pointer;border-radius:3px;justify-content:center;align-items:center;font-size:11px;transition:all .15s;display:flex}.heatmap-cell:hover{outline:2px solid var(--accent);z-index:1}.drag-item{border:2.5px solid var(--text);cursor:grab;font-family:var(--font-hand);background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;border-radius:8px;padding:10px 18px;font-size:16px;transition:all .2s}.drag-item:active{cursor:grabbing;opacity:.7}.drag-item.placed{opacity:.4;pointer-events:none}.drop-slot{border:2.5px dashed var(--text-muted);min-height:48px;font-family:var(--font-hand);color:var(--text-muted);border-radius:8px;justify-content:center;align-items:center;font-size:14px;transition:all .2s;display:flex}.drop-slot.drag-over{border-color:var(--accent);background:var(--accent-light)}.drop-slot.filled{border-style:solid;border-color:var(--accent);color:var(--text)}.drop-slot.correct{background:#5ba55b1a;border-color:#5ba55b;animation:.4s flash-correct}.drop-slot.wrong{animation:.4s shake}.compare-card{border:2.5px solid var(--text-muted);cursor:pointer;font-family:var(--font-hand);border-radius:12px;flex:1;padding:16px;transition:all .2s}.compare-card:hover{border-color:var(--accent);transform:translateY(-2px)}.compare-card .compare-label{font-size:12px;font-family:var(--font-mono);text-transform:uppercase;margin-bottom:8px;font-weight:700}.compare-card .compare-text{font-size:16px;line-height:1.5}.compare-card.picked-correct{background:#5ba55b1a;border-color:#5ba55b}.compare-card.picked-wrong{background:#d9534f1a;border-color:#d9534f}.step-indicator{align-items:center;gap:4px;margin-bottom:20px;display:flex}.step-dot{border:2px solid var(--text-muted);width:28px;height:28px;font-family:var(--font-mono);color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;font-size:11px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.step-dot.active{border-color:var(--accent);background:var(--accent);color:#fff;transform:scale(1.1)}.step-dot.complete{color:#fff;background:#5ba55b;border-color:#5ba55b}.step-line{background:var(--text-muted);flex:1;max-width:30px;height:2px;transition:background .3s}.step-line.complete{background:#5ba55b}.status-ok{color:#5ba55b;font-weight:700}.status-warn{color:#e8913a;font-weight:700}.status-error{color:#d9534f;font-weight:700}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.3s forwards fade-in}@keyframes glow-pulse{0%,to{box-shadow:0 0 #4a90d900}50%{box-shadow:0 0 12px 4px #4a90d94d}}.glow-pulse{animation:1.5s infinite glow-pulse}.scene-panel{animation:.4s forwards fade-in}.drag-item.dragging{z-index:10;transform:scale(1.05)rotate(2deg);box-shadow:0 4px 16px #00000026}.scene-btn:active{transform:scale(.96)}.choice-card.selected{box-shadow:0 0 0 3px #4a90d933}.compare-card.picked-correct,.compare-card.picked-wrong{animation:.3s fade-in}*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f0e8;--text:#2d2d2d;--text-muted:#888;--accent:#4a90d9;--accent-light:#4a90d926;--font-hand:"LXGW WenKai", cursive;--font-mono:"JetBrains Mono", monospace;--narrator-max-width:680px;--narrator-padding:24px 32px}[data-act="1"]{--accent:#4a90d9}[data-act="2"]{--accent:#5ba55b}[data-act="3"]{--accent:#e8913a}html,body{background:var(--bg);width:100%;height:100%;font-family:var(--font-hand);color:var(--text);overflow:hidden}#app{width:100%;height:100%;position:relative}#stage{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}#stage canvas{width:100%!important;height:100%!important}#landing-container{z-index:2;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}#landing-container.hidden{display:none}#narrator-container{z-index:5;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}#sound-toggle{z-index:20;cursor:pointer;color:var(--text-muted);-webkit-user-select:none;user-select:none;opacity:.6;width:22px;height:22px;transition:opacity .2s;position:absolute;top:12px;left:16px}#sound-toggle:hover{opacity:1}#lang-toggle{z-index:20;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;font-size:13px;position:absolute;top:12px;right:16px}.lang-opt{cursor:pointer;color:var(--text-muted);border-radius:4px;padding:4px 8px;transition:all .2s}.lang-opt.active{color:var(--text);font-weight:700}.lang-opt:hover{color:var(--accent)}.lang-sep{color:var(--text-muted);margin:0 2px}.narrator{z-index:10;opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:opacity .3s;display:flex}.narrator-text,.narrator-choices{max-width:var(--narrator-max-width,680px);width:90%}.narrator.visible{opacity:1;pointer-events:auto}.narrator-text{font-family:var(--font-hand);color:var(--text);text-align:center;padding:var(--narrator-padding);cursor:pointer;font-size:24px;line-height:1.5;position:relative}.narrator-text .narrator-text-sizer{visibility:hidden;pointer-events:none}.narrator-text .narrator-text-visible{width:100%;height:100%;padding:inherit;box-sizing:border-box;position:absolute;top:0;left:0}.narrator-choices{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:16px;display:flex}.narrator-btn{font-family:var(--font-hand);border:2.5px solid var(--text);color:var(--text);cursor:pointer;background:0 0;border-radius:50px;padding:12px 36px;font-size:22px;transition:all .2s}.narrator-btn:hover{background:var(--text);color:var(--bg);transform:scale(1.05)}