:root{--font-display:"Bricolage Grotesque", "DM Sans", system-ui, sans-serif;--font-body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--stage-bg:#10142e;--stage-surface:#1b2147;--stage-raised:#2c3466;--stage-line:#3a4180;--stage-text:#f4f1e8;--stage-muted:#a9afd1;--stage-accent:#ffd23f;--stage-accent-hover:#ffe27a;--stage-ink:#10142e;--stage-good:#4ade9b;--stage-bad:#ff6b4a;--stage-down:#ff8a6e;--option-0:#ff8a6e;--option-1:#7cc4ff;--option-2:#ffd23f;--option-3:#6ee7ae;--option-shape-tile:#10142e24;--room-1:#ffd23f;--room-2:#ff6b4a;--room-3:#4ade9b;--room-4:#5ab4ff;--room-5:#c084fc;--room-6:#ff8fc7;--room-7:#2dd4d4;--room-8:#ffa94d;--room-9:#a3e635;--room-10:#b9beff;--calm-bg:#f6f5f0;--calm-surface:#fff;--calm-line:#e3e1d8;--calm-line-strong:#cfccc0;--calm-text:#10142e;--calm-muted:#5b6080;--calm-chip:#eeece4;--calm-highlight:#fff8db;--calm-good:#2d6b4a;--calm-bad:#b23a1e;--calm-header:#10142e;--radius-xs:8px;--radius-sm:12px;--radius-md:14px;--radius-lg:20px;--radius-xl:24px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button:disabled{cursor:default}.display{font-family:var(--font-display);font-weight:800}.num{font-variant-numeric:tabular-nums}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.stage{background:var(--stage-bg);min-height:100%;color:var(--stage-text);flex-direction:column;display:flex}.stage a{color:var(--stage-accent)}.muted{color:var(--stage-muted)}.logo{font-family:var(--font-display);align-items:center;gap:12px;font-weight:800;display:inline-flex}.chip{font-family:var(--font-display);color:var(--stage-ink);white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;padding:0 12px;font-weight:800;display:inline-flex}.panel{background:var(--stage-surface);border-radius:var(--radius-xl)}.eyebrow{letter-spacing:1px;text-transform:uppercase;color:var(--stage-muted);font-size:16px;font-weight:700}.btn-primary{border-radius:var(--radius-md);background:var(--stage-accent);width:100%;max-width:336px;min-height:56px;color:var(--stage-ink);font-family:var(--font-display);border:0;justify-content:center;align-items:center;font-size:22px;font-weight:800;display:flex}.btn-primary:hover:not(:disabled){background:var(--stage-accent-hover)}.btn-primary:disabled{opacity:.45}.btn-outline{border-radius:var(--radius-sm);border:2px solid var(--stage-text);min-height:48px;color:var(--stage-text);background:0 0;align-items:center;gap:10px;padding:0 20px;font-size:17px;font-weight:700;display:inline-flex}.btn-outline:disabled{opacity:.4}.error{color:var(--stage-bad);min-height:1.4em;margin:0;font-weight:600}.track-bar{background:var(--stage-raised);border-radius:999px;height:14px;overflow:hidden}.track-bar>div{border-radius:999px;height:100%;transition:width .4s}.student-center{flex:1;justify-content:center;align-items:center;padding:32px 16px;display:flex}.student-col{text-align:center;flex-direction:column;align-items:center;gap:26px;width:100%;max-width:480px;display:flex}.student-col h1{font-family:var(--font-display);letter-spacing:-.5px;margin:0;font-size:36px;font-weight:800}.student-col p{margin:0}.footnote{color:var(--stage-muted);font-size:15px}.student-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}.student-header .who{align-items:center;gap:10px;font-size:16px;font-weight:700;display:inline-flex}.student-progress{background:var(--stage-raised);height:8px}.student-progress>div{background:var(--stage-accent);height:100%;transition:width .25s linear}.student-main{flex-direction:column;flex:1;gap:20px;width:100%;max-width:920px;margin:0 auto;padding:24px 16px 32px;display:flex}.code-boxes{border:0;justify-content:center;gap:12px;margin:0;padding:0;display:flex}.code-boxes input{text-align:center;width:72px;height:88px;font-family:var(--font-display);text-transform:uppercase;color:var(--stage-ink);background:var(--stage-text);border-radius:var(--radius-md);caret-color:#0000;border:3px solid #0000;outline:none;font-size:48px;font-weight:800}.code-boxes input.empty{background:var(--stage-surface);color:var(--stage-text)}.code-boxes input:focus{border-color:var(--stage-accent)}@media (width<=360px){.code-boxes input{width:60px;height:76px;font-size:40px}}.options{gap:14px;display:grid}.student-main .options{flex:1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.option{border-radius:var(--radius-lg);min-height:120px;color:var(--stage-ink);text-align:left;font-family:var(--font-display);border:5px solid #0000;align-items:center;gap:18px;padding:0 24px;font-size:32px;font-weight:800;transition:opacity .2s,transform .1s;display:flex}button.option:active:not(:disabled){transform:scale(.98)}.option.picked{border-color:var(--stage-text)}.option.dim{opacity:.35}.option-0{background:var(--option-0)}.option-1{background:var(--option-1)}.option-2{background:var(--option-2)}.option-3{background:var(--option-3)}.shape-tile{border-radius:var(--radius-md);background:var(--option-shape-tile);flex:none;justify-content:center;align-items:center;width:52px;height:52px;display:flex}.pill{background:var(--stage-surface);border-radius:999px;align-self:center;align-items:center;gap:10px;min-height:48px;padding:0 20px;font-size:17px;font-weight:700;display:inline-flex}.stat-card{background:var(--stage-surface);border-radius:18px;flex:200px;padding:16px}.stat-card strong{font-family:var(--font-display);font-size:34px;font-weight:800;display:block}.stat-card span{color:var(--stage-muted);font-size:15px;display:block}.board-viewport{background:var(--stage-bg);position:fixed;inset:0;overflow:hidden}.board{transform-origin:50%;background:var(--stage-bg);width:1280px;height:720px;color:var(--stage-text);flex-direction:column;gap:22px;padding:28px 40px;display:flex;position:absolute;top:50%;left:50%;overflow:hidden}.board-bar{justify-content:space-between;align-items:center;gap:16px;display:flex}.board-body{flex:1;gap:28px;min-height:0;display:flex}.board-side{background:var(--stage-surface);border-radius:var(--radius-xl);flex-direction:column;gap:9px;padding:20px 22px;display:flex}.round-pill{letter-spacing:1.5px;text-transform:uppercase;color:var(--stage-ink);background:var(--stage-accent);border-radius:999px;padding:6px 14px;font-size:16px;font-weight:800}.board .options{flex:1;grid-template-columns:repeat(2,minmax(0,1fr))}.board .option{border:0;min-height:0;font-size:38px}.code-tiles{gap:12px;display:flex}.code-tiles span{background:var(--stage-text);width:96px;height:112px;color:var(--stage-ink);font-family:var(--font-display);border-radius:16px;justify-content:center;align-items:center;font-size:76px;font-weight:800;display:flex}.name-chip{background:var(--stage-raised);border-radius:999px;padding:6px 12px;font-size:16px;font-weight:600}.lane{align-items:center;gap:12px;display:flex}.lane .chip{border-radius:var(--radius-xs);width:46px;height:32px;font-family:var(--font-body);padding:0;font-size:16px}.lane-track{background:var(--stage-raised);border-radius:999px;flex:1;height:32px;position:relative}.lane.own .lane-track{outline:3px solid var(--stage-text);outline-offset:2px}.lane-fill,.lane-runner{transition:width .8s cubic-bezier(.2,.8,.2,1),left .8s cubic-bezier(.2,.8,.2,1);position:absolute;top:0;left:0}.lane-fill{opacity:.35;border-radius:999px;height:32px}.lane-runner{border:3px solid var(--stage-ink);border-radius:999px;width:26px;height:26px;top:3px}.timer-ring{width:76px;height:76px;font-family:var(--font-display);place-items:center;font-size:32px;font-weight:800;display:grid;position:relative}.timer-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.timer-ring circle{fill:none}.podium{flex:1;justify-content:center;align-items:flex-end;gap:18px;padding-top:20px;display:flex}.podium-step{flex-direction:column;align-items:center;gap:10px;display:flex}.podium-block{background:var(--stage-raised);width:100%;font-family:var(--font-display);color:var(--stage-muted);border-radius:18px 18px 0 0;justify-content:center;padding-top:16px;font-weight:800;display:flex}.picker{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;width:min(100%,1000px);display:grid}.picker button{border-radius:var(--radius-xl);font-family:var(--font-display);color:var(--stage-ink);border:0;padding:28px 12px;font-size:40px;font-weight:800}.calm{background:var(--calm-bg);min-height:100%;color:var(--calm-text);font-size:16px}.calm-header{background:var(--calm-header);color:var(--stage-text);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:12px 32px;display:flex}.calm-main{flex-wrap:wrap;align-items:flex-start;gap:18px;max-width:1240px;margin:0 auto;padding:24px 24px 40px;display:flex}.calm h1,.calm h2{font-family:var(--font-display);margin:0;font-weight:800}.calm h2{font-size:20px}.card{background:var(--calm-surface);border:1px solid var(--calm-line);border-radius:18px;padding:20px}.calm .muted{color:var(--calm-muted)}.live-pill{letter-spacing:1px;color:var(--stage-ink);background:var(--stage-good);border-radius:999px;align-items:center;gap:8px;padding:5px 12px;font-size:13px;font-weight:800;display:inline-flex}.live-pill:before{content:"";background:var(--stage-ink);border-radius:999px;width:8px;height:8px}.btn-host{border-radius:var(--radius-sm);background:var(--stage-accent);min-height:52px;color:var(--stage-ink);border:0;padding:0 22px;font-size:17px;font-weight:800}.btn-host-ghost{border-radius:var(--radius-sm);border:1.5px solid var(--stage-text);min-height:52px;color:var(--stage-text);background:0 0;align-items:center;gap:10px;padding:0 18px;font-weight:700;display:inline-flex}.btn-host:disabled,.btn-host-ghost:disabled{opacity:.45}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.error:empty{display:none}