:root{--shell-night:#10172a;--shell-ink:#172033;--shell-paper:#fffdf7;--shell-gold:#f4c95d;--shell-coral:#ef6b63;--shell-mint:#55bda7;--shell-sky:#80c7e8;--shell-rail:92px;--shell-radius:6px;--shell-focus:3px}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--shell-ink);background:var(--shell-night);letter-spacing:0}button{min-width:44px;min-height:44px;border:1px solid #23304a;border-radius:var(--shell-radius);background:#fff;color:#18223a;font-weight:700;font-size:15px;padding:0 13px;cursor:pointer}button:hover{background:#fff5cb}button:focus-visible{outline:var(--shell-focus) solid var(--shell-gold);outline-offset:2px}button:disabled{opacity:.38;cursor:not-allowed}.icon-button{font-size:22px;padding:0 12px}.lesson-shell{height:100%;min-height:100vh;display:grid;grid-template-rows:52px minmax(0,1fr) var(--shell-rail)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;color:#fff;background:#0b1121;border-bottom:1px solid #2e3d60}.brand{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-status{font-size:12px;color:#fff;padding:4px 8px;border:1px solid #425277;border-radius:4px}.channel-status[data-state="error"]{color:#ffd1cb;border-color:var(--shell-coral)}.reward-status{font-size:14px;white-space:nowrap}.stage{min-height:0;overflow:auto;position:relative;background:var(--shell-paper)}.lesson-content-slot{min-height:100%;width:100%}.shell-placeholder{margin:0;padding:32px;color:#637086;font-size:16px}.rail{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:12px;padding:8px 16px;background:#eef2f2;border-top:1px solid #bec9ce;position:relative;z-index:20}.progress{font-weight:800;font-size:14px;text-align:center}.navcluster,.teacher-tools{display:flex;align-items:center;gap:8px}.navcluster{justify-self:center}.teacher-tools{justify-self:end}.notes-drawer{position:fixed;top:0;right:0;width:min(480px,92vw);height:100vh;background:var(--shell-paper);z-index:40;transform:translateX(102%);visibility:hidden;overflow:auto;padding:62px 24px 30px;box-shadow:-10px 0 30px rgba(0,0,0,.25);transition:transform .2s ease,visibility .2s}.notes-drawer.open{transform:translateX(0);visibility:visible}.notes-close{position:absolute;right:16px;top:12px}.celebration{position:fixed;inset:0;display:none;place-items:center;background:rgba(8,13,27,.93);z-index:60;color:#fff}.celebration.show{display:grid}.reward-art{width:min(760px,90vw);text-align:center}.reward-art img{display:block;width:100%;max-height:58vh;object-fit:contain;border:3px solid var(--shell-gold);border-radius:var(--shell-radius);margin:0 auto 12px}.reward-mark{display:block;width:140px;height:140px;margin:auto;background:radial-gradient(circle,var(--shell-gold) 0 32%,var(--shell-coral) 33% 48%,var(--shell-mint) 49% 62%,transparent 63%);animation:rewardPulse .7s ease-out}.celebration.full .reward-mark{width:230px;height:230px;background:radial-gradient(circle,#fff 0 10%,var(--shell-gold) 11% 30%,var(--shell-sky) 31% 47%,var(--shell-coral) 48% 62%,transparent 63%)}#rewardMessage{display:block;font-size:38px}#rewardSub{display:block;font-size:18px;color:var(--shell-gold);margin:8px 0 16px}.shell-audio-error{color:#9d2525;background:#ffe9e6;border:1px solid #d45f54;padding:8px;font-weight:700}@keyframes rewardPulse{from{transform:scale(.5) rotate(-20deg);opacity:.2}to{transform:scale(1) rotate(0);opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:940px){:root{--shell-rail:140px}.lesson-shell{grid-template-rows:52px minmax(0,1fr) var(--shell-rail)}.rail{grid-template-columns:90px 1fr;grid-template-rows:58px 58px}.teacher-tools{grid-column:1/3;justify-self:center}.navcluster{grid-column:1/3;grid-row:1;justify-self:center}.progress{position:absolute;left:16px;top:20px}.topbar{padding:0 16px}}@media(max-width:600px){:root{--shell-rail:194px}.lesson-shell{grid-template-rows:46px minmax(0,1fr) var(--shell-rail)}.topbar{padding:0 12px;gap:8px}.brand{font-size:13px}.channel-status{font-size:11px}.reward-status{font-size:12px}.rail{height:var(--shell-rail);display:flex;flex-direction:column;gap:6px;padding:6px 8px}.navcluster,.teacher-tools{width:100%;justify-content:center;gap:5px}.navcluster button,.teacher-tools button{padding:0 8px;font-size:13px}.navcluster .icon-button,.teacher-tools .icon-button{font-size:20px}.progress{position:static;height:24px;display:grid;place-items:center}.notes-drawer{width:96vw}}
:root{--shell-night:#10172a;--shell-ink:#172033;--shell-paper:#fffdf7;--shell-gold:#f4c95d;--shell-coral:#ef6b63;--shell-mint:#55bda7;--shell-sky:#80c7e8;--shell-rail:92px;--shell-radius:6px;--shell-focus:3px}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--shell-ink);background:var(--shell-night);letter-spacing:0}button{min-width:44px;min-height:44px;border:1px solid #23304a;border-radius:var(--shell-radius);background:#fff;color:#18223a;font-weight:700;font-size:15px;padding:0 13px;cursor:pointer}button:hover{background:#fff5cb}button:focus-visible{outline:var(--shell-focus) solid var(--shell-gold);outline-offset:2px}button:disabled{opacity:.38;cursor:not-allowed}.icon-button{font-size:22px;padding:0 12px}.lesson-shell{height:100%;min-height:100vh;display:grid;grid-template-rows:52px minmax(0,1fr) var(--shell-rail)}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 24px;color:#fff;background:#0b1121;border-bottom:1px solid #2e3d60}.brand{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-status{justify-self:end;font-size:12px;color:#fff;padding:4px 8px;border:1px solid #425277;border-radius:4px}.channel-status[data-state="error"]{color:#ffd1cb;border-color:var(--shell-coral)}.reward-status{display:flex;justify-content:center;gap:18px;font-size:14px;white-space:nowrap}.star-stat{display:inline-flex;align-items:center;gap:4px}.star-glyph{font-size:18px;line-height:1}.silver-stat .star-glyph{color:#cbd5e5;text-shadow:0 1px 2px #111}.gold-stat .star-glyph{color:#f6c84f;text-shadow:0 1px 2px #111}
:where(.topbar){display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.topbar .channel-status{justify-self:end}.topbar .reward-status{display:flex;justify-content:center;gap:18px}.star-stat{display:inline-flex;align-items:center;gap:4px}.star-glyph{font-size:18px;line-height:1}.silver-stat .star-glyph{color:#cbd5e5;text-shadow:0 1px 2px #111}.gold-stat .star-glyph{color:#f6c84f;text-shadow:0 1px 2px #111}@media(max-width:600px){.topbar .reward-status{gap:8px;font-size:11px}}
:where(.topbar){grid-template-columns:1fr auto 1fr}.topbar .reward-status{grid-column:2;justify-self:center;display:flex;align-items:center;gap:5px;font-size:16px}.topbar .star-glyph{color:#f6c84f;text-shadow:0 1px 2px #111}
:where(.topbar) .reward-status{gap:10px;font-size:15px}.silver-meter,.gold-meter,.conversion{display:inline-flex;align-items:center;gap:4px}.conversion{font-size:12px;color:#d6deef}.silver-glyph{color:#cbd5e5;text-shadow:0 1px 2px #111}.gold-glyph{color:#f6c84f;text-shadow:0 1px 2px #111}
:where(.topbar) .silver-glyph{color:#cbd5e5;text-shadow:0 1px 2px #111}:where(.topbar) .gold-glyph{color:#f6c84f;text-shadow:0 1px 2px #111}
:where(.topbar) .silver-glyph{color:#cbd5e5;text-shadow:0 1px 2px #111}:where(.topbar) .gold-glyph{color:#f6c84f;text-shadow:0 1px 2px #111}.topbar .silver-glyph{color:#cbd5e5}
:root{ /* THEME MAY change visual tokens below. MUST NOT alter runtime IDs or state semantics. */ }
/* THEME MAY customize colors, typography, layout, icons, animation, and responsive presentation.
   CONTRACT: preserve readable focus states, reachable controls, responsive sizing, and overlay stacking. */