*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#103e7c;background:radial-gradient(ellipse at 45% 0,#126cbc,#032957 70%);min-height:100dvh}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #a4d8ff;background:#f0f9ff;color:#185397;border-radius:12px;padding:12px 16px;touch-action:manipulation}button:hover{filter:brightness(1.07)}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #ffca66;outline-offset:2px}header{height:85px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #26caff;color:white;gap:20px;box-shadow:0 3px 30px #00baff33}.brand{font-size:27px;font-weight:750;white-space:nowrap}.brand span{font-size:40px;color:#69eaff;vertical-align:middle;margin-right:10px}nav{display:flex;align-items:center;gap:32px;height:100%}nav b{display:flex;align-items:center;height:100%;border-bottom:4px solid #72faff;text-shadow:0 0 20px #36baff}nav span{font-size:12px;letter-spacing:2px;color:#99cbfb}.glass{background:#ffffff10;color:white;border-color:#2673a7}main{display:grid;grid-template-columns:36% 1fr;gap:26px;padding:28px;max-width:1700px;margin:auto;height:calc(100dvh - 85px);min-height:670px}.stage{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(0deg,#044c99bb,#8fcfff33),url(reference.png) left center/auto 115% no-repeat;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px #b7e8ff77}.lesson-tag{position:relative;margin:27px;font-size:12px;letter-spacing:3px;font-weight:bold;color:#124d88}.lesson-tag span{display:block;font-size:17px;letter-spacing:1px;margin-top:10px}.character{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:260px}.orbit{position:absolute;width:85%;height:70px;border:3px solid #8fffff;border-radius:50%;bottom:32px;box-shadow:0 0 30px #33dfff,inset 0 0 30px #33dfff}.portrait,.mini-avatar{background:url(reference.png) 45.1% 33.7% / 1450% auto no-repeat;border-radius:50%}.portrait{height:160px;width:160px;margin:auto;border:4px solid #dcfaff;box-shadow:0 0 45px #67d8ff}.mini-avatar{height:54px;width:54px;flex-shrink:0}#placeholder{text-align:center;z-index:1;padding:15px;color:#073c75}#placeholder h1{font-size:31px;margin:22px 0 8px}#placeholder p{font-size:17px}#placeholder small{display:inline-block;background:#eaf9ffbb;border:1px solid white;padding:8px 14px;border-radius:20px;color:#46799f}video{position:absolute;width:100%;height:100%;object-fit:contain;z-index:2}.stage-footer{background:#003571aa;color:#e5f9ff;backdrop-filter:blur(15px);padding:20px;display:flex;align-items:center;gap:10px;font-size:14px}.dot{width:8px;height:8px;background:#5cf8d4;border-radius:100%;box-shadow:0 0 14px #5cf8d4}.bars{display:flex;align-items:center;gap:4px;margin-left:auto;height:25px}.bars i{background:#72eaff;width:4px;height:10px;border-radius:3px}.speaking .bars i{animation:wave .7s infinite alternate}.bars i:nth-child(2n){animation-delay:.3s;height:23px}.bars i:nth-child(3){animation-delay:.15s;height:17px}@keyframes wave{to{transform:scaleY(.3)}}.panel{min-width:0;background:linear-gradient(125deg,#f6fcffff,#c6e6ffed);border:2px solid #a2e3ff;box-shadow:0 0 24px #1bb8ff88,inset 0 0 20px white;border-radius:28px;padding:22px;display:flex;flex-direction:column;overflow:hidden}.panel-heading{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #acd3f0}.panel-heading h2{font-size:27px;color:#0955d7;margin:0}.panel-heading p{margin:4px 0 0;font-size:12px;letter-spacing:1px;color:#6090b4}#status{margin-left:auto;background:#edfbff;border:1px solid white;border-radius:30px;font-size:12px;padding:10px 14px;white-space:nowrap}.rounds{display:flex;gap:10px;margin:17px 0}.rounds button{flex:1;text-align:left;font-size:13px;padding:12px;background:#ffffff70;border-color:#c5e1f5}.rounds button.active{background:#0968ed;color:white;box-shadow:0 4px 15px #126eee33;border-color:#0968ed}.conversation{flex:1;overflow:auto;min-height:160px;padding:8px 3px;scroll-behavior:smooth}.welcome{padding:25px 15px}.eyebrow{color:#3879b4;font-size:12px;letter-spacing:2px}.welcome h3{font-size:30px;margin:15px 0;color:#12437e}.welcome p{line-height:1.8;color:#557fa5}.message{display:flex;gap:12px;margin-bottom:20px;animation:appear .25s}.message .badge{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1177ed;color:white;font-weight:700}.bubble{background:linear-gradient(145deg,#effaff,#c7e5ff);border:1px solid white;border-radius:3px 20px 20px 20px;padding:16px 20px;box-shadow:0 3px 8px #246dab16;max-width:90%}.bubble small{display:block;color:#497ba6;font-size:10px;letter-spacing:1px;margin-bottom:7px}.bubble p{font-size:22px;line-height:1.5;margin:0}.student{flex-direction:row-reverse}.student .bubble{background:#096aed;color:white;border:0;border-radius:20px 3px 20px 20px}.student small{color:#bee4ff}.student .badge{background:#48a3cf}.hint{font-size:13px;color:#3c739f;padding:10px 3px;min-height:38px}.composer{display:flex;align-items:center;gap:13px;background:#f3fbff;border:1px solid #94cfff;border-radius:20px;padding:9px;box-shadow:0 4px 15px #0b6caf16}.composer button{border:0;background:#0876fc;color:white;width:56px;height:56px;border-radius:50%;font-size:26px;flex-shrink:0}#mic.listening{background:#ec5965;animation:wave 1s infinite alternate}.composer textarea{resize:none;flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:17px;color:#164774;line-height:1.5}.composer textarea::placeholder{font-size:14px;color:#79a1bf}.controls{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.controls button{font-size:12px;padding:10px 12px}.primary{background:linear-gradient(135deg,#138cfa,#0655e3);color:white;border-color:#1877f0}.footnote{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1px;color:#6590b0;margin-top:15px}dialog{max-width:550px;width:92%;border:1px solid #afe3ff;border-radius:22px;padding:25px;color:#194b77;box-shadow:0 20px 80px #001d5c66}dialog::backdrop{background:#001c4c88;backdrop-filter:blur(5px)}.dialog-title{display:flex;align-items:center;justify-content:space-between}.dialog-title h2{margin:0}dialog p{font-size:13px;line-height:1.7;color:#65829b}dialog label{display:block;font-size:14px;margin:18px 0}dialog input{display:block;width:100%;padding:9px;border:1px solid #bdd6eb;border-radius:8px;margin-top:8px}dialog button{margin-right:6px}@keyframes appear{from{opacity:0;transform:translateY(6px)}}@media(max-width:1100px){header{padding:0 20px}.brand{font-size:22px}nav span{display:none}main{gap:18px;padding:20px;grid-template-columns:32% 1fr}.panel{padding:17px}.panel-heading h2{font-size:23px}.bubble p{font-size:20px}.lesson-tag{margin:20px;font-size:10px}.lesson-tag span{font-size:14px}#placeholder h1{font-size:24px}.portrait{width:130px;height:130px}.footnote span:last-child{display:none}}@media(max-width:700px){header{height:70px;padding:0 12px}.brand{font-size:18px}.brand span{font-size:25px}nav{display:none}.glass{font-size:12px;padding:9px}main{height:auto;min-height:0;display:flex;flex-direction:column;padding:12px;gap:12px}.stage{height:230px}.lesson-tag{position:absolute;z-index:3;top:0;left:0;max-width:140px}.character{min-height:170px}#placeholder{margin-left:120px}#placeholder h1{font-size:17px;margin:8px 0}#placeholder p,#placeholder small,.orbit{display:none}.portrait{width:90px;height:90px}.stage-footer{padding:10px 15px}.panel{min-height:650px}.conversation{max-height:400px}.panel-heading h2{font-size:21px}#status{font-size:10px;padding:8px}.rounds button{font-size:11px}.bubble p{font-size:19px}}

[hidden]{display:none!important}.live-caption{border:1px solid #73bbff;border-radius:14px;background:#edfaff;padding:12px 16px;margin-bottom:8px}.live-caption small{font-size:10px;color:#1477d0;letter-spacing:1px}.live-caption p{margin:8px 0 0;font-size:20px;line-height:1.4;color:#154c81}dialog select{width:100%;padding:10px;border:1px solid #b9d8ef;border-radius:8px;margin-top:9px;background:white;color:#164775}#mic svg{vertical-align:middle}
/* Classroom v2: projection-friendly text and reference-inspired navigation. */
main{grid-template-columns:minmax(220px,30%) minmax(0,1fr) 102px;gap:18px;padding:24px;max-width:1900px}
.stage{background-image:linear-gradient(0deg,#044c99aa,#8fcfff22),url(classroom-bg.png)}
.panel{padding:22px}.bubble{padding:18px 22px;max-width:94%}.bubble p{font-size:28px;line-height:1.6;font-weight:500;color:#0b376c}.student .bubble p{color:white}.bubble small{font-size:11px}.conversation{scroll-padding:16px}.live-caption p{font-size:26px}.rounds button{font-size:14px;line-height:1.35;padding:13px 10px;font-weight:600}.panel-heading h2{font-size:28px}.composer textarea{font-size:21px}.controls button{font-size:13px}
.top-nav button{height:100%;background:transparent;border:0;border-bottom:4px solid #66eaff;border-radius:0;color:white;font-weight:700;font-size:18px;padding:0 10px}
.side-nav{display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;gap:12px;height:100%;padding:17px 9px;background:linear-gradient(180deg,#003968aa,#001e4fcc);border:1px solid #00cfff;border-radius:26px;box-shadow:inset 0 0 20px #008fe333,0 0 16px #00cfff22}
.side-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;flex:1;max-height:120px;min-height:75px;padding:10px 5px;border-radius:27px;border:1px solid #1285c5;background:linear-gradient(140deg,#0061a1,#002d6d);color:#eafaff;font-weight:650;font-size:14px;box-shadow:inset 0 0 20px #039eff44}
.side-nav button.active{background:linear-gradient(145deg,#00caf0,#0074e0 70%);border:2px solid #a6ffff;box-shadow:0 0 18px #00eaffaa,inset 0 0 12px #00edff;color:white}.side-nav .nav-icon{width:34px;height:36px;filter:drop-shadow(0 0 5px #3ae8ff)}.side-nav svg{width:100%;height:100%}
.module-panel{justify-content:center;align-items:flex-start;padding:44px}.module-panel h2{font-size:36px;color:#125acf}.module-panel p{font-size:21px;line-height:1.8;max-width:520px}.module-panel button{margin-top:20px}
@media(max-width:1200px){main{grid-template-columns:minmax(195px,27%) minmax(0,1fr) 86px;gap:13px;padding:17px}.panel{padding:17px}.bubble p{font-size:25px}.bubble{padding:16px 18px}.rounds button{font-size:12px}.side-nav{padding:12px 7px;gap:10px}.side-nav button{font-size:12px;border-radius:23px}.brand{font-size:23px}.panel-heading h2{font-size:24px}}
@media(max-width:900px) and (min-width:701px){main{grid-template-columns:minmax(160px,24%) minmax(0,1fr) 74px;padding:12px;gap:10px}.panel{padding:13px}.bubble p{font-size:24px}.panel-heading{gap:8px}.panel-heading h2{font-size:22px}#status{font-size:10px;padding:8px}.mini-avatar{height:42px;width:42px}.side-nav button{font-size:11px}.side-nav .nav-icon{width:29px;height:30px}.brand{font-size:21px}.lesson-tag{margin:16px;letter-spacing:1px}#placeholder h1{font-size:21px}}
@media(max-width:700px){main{display:flex;padding:12px;gap:12px}.side-nav{order:-1;flex-direction:row;justify-content:space-between;gap:5px;height:auto;border-radius:16px;padding:8px;width:100%}.side-nav button{min-height:63px;max-height:none;padding:7px 2px;border-radius:12px;font-size:10px;gap:4px}.side-nav .nav-icon{height:24px;width:24px}.bubble p{font-size:23px;line-height:1.55}.panel{padding:14px;min-height:680px}.rounds button{font-size:11px}.stage{height:220px}.top-nav{display:none}.module-panel{min-height:400px}.module-panel p{font-size:19px}.conversation{max-height:550px}.brand{font-size:18px}}