:root{--bar-bg:#0e1210c7;--fg:#f5f2e8;--fg-dim:#f5f2e89e;--accent:#f6dc6b;--track:#ffffff38;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#f3f0e8;--letterbox:#000;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--page);height:100%;color:var(--fg);margin:0;overflow:hidden}#shell{background:var(--page);display:flex;position:fixed;inset:0}#app{background:var(--letterbox);-webkit-user-select:none;user-select:none;flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}#app.idle{cursor:none}#stage{transform-origin:50%;width:1920px;height:1080px;position:absolute;top:50%;left:50%}#screen{width:1920px;height:1080px;display:block}#subtitle{background:var(--sub-bg,#0a0c0bb8);max-width:1300px;font-size:calc(38px * var(--sub-scale,1));text-align:center;color:var(--sub-color,#fff);text-wrap:balance;pointer-events:none;border-radius:14px;padding:14px 28px;line-height:1.3;position:absolute;bottom:70px;left:50%;transform:translate(-50%)}#subtitle[hidden]{display:none}#app.controls-visible #subtitle{bottom:calc(118px * var(--inv,1))}.controls{background:linear-gradient(#0000,#00000073 40%,#000c);padding:28px 22px 14px;transition:opacity .25s,transform .25s;position:absolute;bottom:0;left:0;right:0}#app:not(.controls-visible) .controls{opacity:0;pointer-events:none;transform:translateY(12px)}#app.embed .controls,#app.embed .flash{display:none}#app.embed.controls-visible #subtitle{bottom:70px}#app.embed.idle{cursor:default}.seek{cursor:pointer;align-items:center;height:22px;display:flex;position:relative}.seek .track{background:var(--track);border-radius:3px;width:100%;height:5px;transition:height .12s;position:relative}.seek:hover .track{height:8px}.seek .fill{border-radius:inherit;background:var(--accent);position:absolute;top:0;bottom:0;left:0}.seek .thumb{background:var(--accent);border-radius:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;position:absolute;top:50%;box-shadow:0 0 0 4px #f6dc6b40}.seek .chapter{background:#000000b3;width:3px;margin-left:-1.5px;position:absolute;top:-2px;bottom:-2px}.seek .tooltip{white-space:nowrap;pointer-events:none;background:#0a0c0beb;border-radius:6px;padding:5px 10px;font-size:13px;position:absolute;bottom:26px;transform:translate(-50%)}.seek .tooltip[hidden]{display:none}.bar{align-items:center;gap:4px;margin-top:8px;display:flex}.bar .spacer{flex:1}.bar button{min-width:42px;height:42px;color:var(--fg);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;padding:0 8px;font-size:14px;font-weight:600;display:inline-flex}.bar button:hover{background:#ffffff1f}.bar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.bar button.off{color:var(--fg-dim)}.bar button svg{fill:currentColor;width:24px;height:24px}.bar button.big svg{width:30px;height:30px}.time{font-variant-numeric:tabular-nums;color:var(--fg);margin-left:10px;font-size:15px}.scene-title{color:var(--fg-dim);white-space:nowrap;text-overflow:ellipsis;max-width:40vw;margin-left:14px;font-size:15px;overflow:hidden}.overlay{text-align:center;background:radial-gradient(#00000026,#0009);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay h1{letter-spacing:-.01em;text-shadow:0 2px 12px #00000080;margin:0;font-size:clamp(20px,2.6vw,38px);font-weight:700}.overlay p{color:var(--fg-dim);margin:0}.start-btn{aspect-ratio:1;color:#fff;cursor:pointer;background:linear-gradient(135deg,#3f8a66,#2f6b4f);border:0;border-radius:50%;place-items:center;width:clamp(64px,9vw,92px);padding:0;transition:transform .18s,box-shadow .18s;display:grid;position:relative;box-shadow:0 10px 30px #143c2a73,inset 0 1px #ffffff40}.start-btn:before{content:"";border:2px solid #ffffff8c;border-radius:50%;animation:2.2s ease-out infinite ring;position:absolute;inset:-8px}.start-btn:hover{transform:scale(1.06);box-shadow:0 14px 38px #143c2a8c,inset 0 1px #ffffff4d}.start-btn:active{transform:scale(.97)}.start-btn svg{fill:currentColor;width:44%;height:44%}@keyframes ring{0%{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.25)}}.error-box{text-align:left;background:#1d1414;border:1px solid #6b2b2b;border-radius:14px;max-width:min(900px,90vw);max-height:70vh;padding:24px 28px;overflow:auto}.error-box h2{color:#ff9b8f;margin:0 0 12px;font-size:20px}.error-box li{color:#ffd8d2;margin:4px 0;font-family:ui-monospace,Consolas,monospace;font-size:13px}.flash{opacity:0;pointer-events:none;background:#0000008c;border-radius:50%;justify-content:center;align-items:center;width:90px;height:90px;margin:-45px 0 0 -45px;font-size:18px;font-weight:700;display:flex;position:absolute;top:50%;left:50%}.flash.show{animation:.6s ease-out flash}.flash svg{fill:#fff;width:42px;height:42px}@keyframes flash{0%{opacity:.95;transform:scale(.85)}to{opacity:0;transform:scale(1.25)}}.debug{white-space:pre;pointer-events:none;background:#000000b3;border-radius:8px;padding:8px 12px;font:12px/1.5 ui-monospace,Consolas,monospace;position:absolute;top:10px;left:10px}.yt-box{background:#111;position:absolute;box-shadow:0 0 0 2px #111}.yt-holder,.yt-holder iframe{border:0;width:100%;height:100%;display:block}.yt-close{color:#fff;cursor:pointer;background:#141615e0;border:0;border-radius:26px;width:330px;height:52px;font:600 20px Segoe UI,system-ui,sans-serif;position:absolute;box-shadow:0 6px 20px #00000059}.yt-close span{color:var(--accent);margin-right:6px}.yt-close:hover{background:#282c2af2}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.quiz-panel{opacity:0;flex-direction:column;gap:14px;width:1180px;font-family:Segoe UI,system-ui,sans-serif;transition:opacity .3s,transform .3s;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%,30px)}.quiz-panel.show{opacity:1;transform:translate(-50%)}.quiz-options{justify-content:center;gap:14px;display:flex}.quiz-opt{color:#fff;text-align:left;cursor:pointer;background:#161e1ae6;border:3px solid #ffffffd9;border-radius:18px;flex:1;align-items:center;gap:14px;min-height:84px;padding:12px 20px;font-size:28px;transition:transform .12s,background .2s,border-color .2s,opacity .2s;display:flex;box-shadow:0 8px 22px #00000059}.quiz-opt b{background:var(--accent);color:#1d1d1b;border-radius:50%;flex:none;justify-content:center;align-items:center;width:48px;height:48px;font-size:26px;display:inline-flex}.quiz-opt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-3px)}.quiz-opt.waiting:not(.ok):not(.bad){opacity:.6}.quiz-opt.ok{background:#2e7d3cf2;border-color:#a8e29a}.quiz-opt.ok b{background:#a8e29a}.quiz-opt.bad{opacity:.75;background:#8c2822eb;border-color:#f08a7e}.quiz-opt.bad b{background:#f08a7e}.quiz-opt:disabled{cursor:default}.quiz-feedback{color:#fff;background:#0e1210eb;border-radius:16px;align-self:center;max-width:1100px;padding:16px 26px;font-size:28px;line-height:1.35;animation:.25s ease-out fade-in}.quiz-feedback[hidden]{display:none}.quiz-feedback b{margin-right:12px}.quiz-feedback.ok b{color:#a8e29a}.quiz-feedback.bad b{color:#f08a7e}#app.in-quiz #subtitle{bottom:330px}.controls.locked .seek,.controls.locked .bar button:not([data-a=full]):not([data-a=mute]):not([data-a=cc]):not([data-a=chat]){opacity:.35;pointer-events:none}.controls{pointer-events:none}.controls .seek,.controls .bar{pointer-events:auto}#app.in-quiz .controls{opacity:0;pointer-events:none}#app.in-quiz .controls .seek,#app.in-quiz .controls .bar{pointer-events:none}.yt-box{transition:opacity .4s}.yt-box.loading{opacity:0}.bar .chat-btn{gap:6px;padding:0 12px}.bar .chat-btn span{font-size:14px}.bar .chat-btn.active{color:var(--accent);background:#f6dc6b38}.chat{--c-bg:#fbfaf7;--c-card:#fff;--c-fg:#1f2328;--c-dim:#6e747b;--c-line:#e8e5dd;--c-accent:#2f6b4f;--c-accent-2:#3f8a66;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:var(--c-bg);width:clamp(300px,26vw,400px);min-height:0;color:var(--c-fg);border-left:1px solid var(--c-line);flex-direction:column;flex:none;font-family:Segoe UI,system-ui,-apple-system,sans-serif;transition:width .3s,height .3s,border-color .3s;display:flex;overflow:hidden}.chat.collapsed{border-color:#0000;width:0}.chat-log{scrollbar-width:thin;scrollbar-color:#d6d2c8 transparent;flex-direction:column;flex:1;gap:14px;min-height:0;padding:22px 18px 12px;display:flex;overflow-y:auto}.avatar{--s:30px;width:var(--s);height:var(--s);background:#f1e7d8 var(--av-idle,url(/assets/teacher/idle.png)) no-repeat;background-size:calc(var(--s) * var(--av-zoom,3.68)) auto;background-position:calc(var(--s) * var(--av-x,-1.34)) calc(var(--s) * var(--av-y,-.06));transform:rotate(var(--tilt,0deg));border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff,0 1px 4px #0000001f}.avatar[data-pose=blink]{background-image:var(--av-blink,url(/assets/teacher/blink.png))}.avatar[data-pose=look]{background-image:var(--av-look,url(/assets/teacher/look.png))}.avatar[data-pose=talk]{background-image:var(--av-talk,url(/assets/teacher/talk.png))}.avatar.lg{--s:64px}.chat-empty{text-align:center;color:var(--c-dim);flex-direction:column;align-items:center;gap:6px;margin:auto 0;font-size:14px;display:flex}.chat-empty b{color:var(--c-fg);margin-top:8px;font-size:16px}.chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;display:flex}.chip{border:1px solid var(--c-line);background:var(--c-card);color:var(--c-fg);font:inherit;cursor:pointer;border-radius:999px;padding:8px 13px;font-size:13px;transition:border-color .15s,background .15s,transform .15s}.chip:hover{border-color:var(--c-accent);background:#f2f8f4;transform:translateY(-1px)}.row{align-items:flex-end;gap:8px;animation:.25s ease-out msg-in;display:flex}.row.me{justify-content:flex-end}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:18px;max-width:82%;padding:10px 14px;font-size:15px;line-height:1.45}.row.me .bubble{background:linear-gradient(135deg, var(--c-accent-2), var(--c-accent));color:#fff;border-bottom-right-radius:6px;box-shadow:0 2px 8px #2f6b4f40}.row.bot .bubble{background:var(--c-card);border-bottom-left-radius:6px;box-shadow:0 1px 2px #0000000d,0 4px 14px #0000000d}.row.off .bubble{color:var(--c-dim);font-style:italic}.row.error .bubble{color:#8a2a1f;box-shadow:none;background:#fdf0ee;border:1px solid #f3cfc9}.row.typing .bubble{gap:5px;padding:14px 16px;display:inline-flex}.row.typing .bubble i{background:#b9bdc2;border-radius:50%;width:7px;height:7px;animation:1.1s ease-in-out infinite dot}.row.typing .bubble i:nth-child(2){animation-delay:.15s}.row.typing .bubble i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,60%,to{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}@keyframes msg-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.composer{border:1px solid var(--c-line);background:var(--c-card);border-radius:26px;align-items:flex-end;gap:8px;margin:8px 14px 14px;padding:6px 6px 6px 16px;transition:border-color .15s,box-shadow .15s;display:flex;box-shadow:0 2px 10px #0000000f}.composer:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px #2f6b4f26}.composer textarea{resize:none;min-height:24px;max-height:120px;color:var(--c-fg);font:inherit;background:0 0;border:0;outline:0;flex:1;margin:7px 0;padding:0;font-size:15px;line-height:1.45}.composer textarea::placeholder{color:#9aa0a6}.send{background:var(--c-accent);color:#fff;cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;transition:background .15s,transform .15s,opacity .15s;display:grid}.send svg{fill:currentColor;width:18px;height:18px;margin-left:2px}.send:hover:not(:disabled){background:var(--c-accent-2);transform:scale(1.05)}.send:disabled{opacity:.35;cursor:default}@media (orientation:portrait) and (max-width:900px){#shell{flex-direction:column}#app{aspect-ratio:16/9;flex:none;width:100%}.chat{border-left:0;border-top:1px solid var(--c-line);flex:1;width:auto}.chat.collapsed{border-color:#0000;flex:0;width:auto;height:0}}#app{container:video/size}.time{white-space:nowrap}@container video (width<=760px){.controls{padding:16px 8px 4px}.seek{height:16px}.bar{gap:0;margin-top:2px}.bar button{border-radius:8px;min-width:34px;height:34px;padding:0 4px;font-size:12px}.bar button svg{width:20px;height:20px}.bar button.big svg{width:24px;height:24px}.time{margin-left:4px;font-size:12px}.scene-title,.bar .chat-btn span,.bar [data-a=prevScene],.bar [data-a=nextScene],.bar [data-a=cc]{display:none}#app.controls-visible #subtitle{bottom:calc(66px * var(--inv,1))}}@container video (width<=420px){.bar [data-a=rate],.bar [data-a=chat]{display:none}}.quiz-panel{--qs:clamp(1, calc(.42 * var(--inv,1)), 2.6);transform-origin:50% 100%;max-width:calc(1840px / var(--qs));width:1180px}.quiz-panel.show{transform:translate(-50%, 0) scale(var(--qs))}.quiz-panel:not(.show){transform:translate(-50%, 30px) scale(var(--qs))}.quiz-options{flex-wrap:wrap}.quiz-opt{min-width:30%}.scene-title{display:none}.controls.answering .seek,.controls.answering .bar button:is([data-a=back],[data-a=fwd],[data-a=prevScene],[data-a=nextScene],[data-a=rate]){opacity:.35;pointer-events:none}#app.subs-nobg #subtitle{text-shadow:0 0 4px #000,0 0 4px #000,0 2px 3px #000,0 0 8px #000c}#app.subs-top #subtitle,#app.subs-top.controls-visible #subtitle,#app.subs-top.in-quiz #subtitle{top:40px;bottom:auto}.bar button.active{background:#ffffff29}.bar button[data-a=settings].active svg{transition:transform .25s;transform:rotate(30deg)}.settings{z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:340px;max-width:calc(100% - 24px);max-height:calc(100% - 110px);color:var(--fg);background:#161a18f0;border-radius:16px;padding:14px 16px 16px;font-size:14px;animation:.15s ease-out fade-in;position:absolute;bottom:96px;right:16px;overflow-y:auto;box-shadow:0 12px 40px #00000073}.settings[hidden]{display:none}.settings-title{margin-bottom:8px;font-size:15px;font-weight:700}.settings-row{border-top:1px solid #ffffff12;flex-direction:column;gap:6px;padding:8px 0;display:flex}.settings-row>span{color:var(--fg-dim);font-size:13px}.switch-row{cursor:pointer;border-top:0;flex-direction:row;justify-content:space-between;align-items:center}.switch-row>span{color:var(--fg);font-size:14px}.switch{appearance:none;cursor:pointer;background:#ffffff40;border-radius:11px;width:40px;height:22px;transition:background .2s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.switch:checked{background:var(--accent)}.switch:checked:after{transform:translate(18px)}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg button{color:var(--fg);font:inherit;cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:999px;padding:6px 11px;font-size:13px}.seg button:hover{border-color:#fff6}.seg button.on{background:var(--accent);border-color:var(--accent);color:#1d1d1b;font-weight:600}.settings.subs-off .settings-row:not(.switch-row),.settings.subs-off .settings-preview{opacity:.4;pointer-events:none}.settings-preview{text-align:center;background:linear-gradient(135deg,#3c6b51,#8a6a45);border-radius:10px;margin-top:10px;padding:18px 10px}.settings-preview span{border-radius:7px;padding:5px 12px;line-height:1.3;display:inline-block}@container video (width<=760px){.settings{width:300px;max-height:calc(100% - 72px);padding:10px 12px;bottom:62px;right:8px}}#app.in-video #subtitle,#app.in-video.controls-visible #subtitle{top:18px;bottom:auto}#subtitle{z-index:6}