:root{--night: #0a1020;--deep: #131b30;--panel: #161f38;--panel-2: #1c2745;--line: #2a3a5e;--concrete: #9aa3b2;--chalk: #f2f4f8;--amber: #ffb454;--hivis: #ff6b1a;--good: #5fd08a;--bad: #ff5f56;--font-display: "Saira Condensed", "Arial Narrow", sans-serif;--font-body: "Archivo", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--night);color:var(--chalk);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.mono{font-family:var(--font-mono);font-size:.85em;letter-spacing:.02em}.screen{position:relative;min-height:100dvh;overflow:hidden}.canvas-bg{position:absolute;inset:0}.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:.5rem}.display-xl,.display-lg,.display-md{font-family:var(--font-display);font-weight:800;line-height:.95;letter-spacing:.01em;text-transform:uppercase}.display-xl{font-size:clamp(4rem,12vw,9rem)}.display-lg{font-size:clamp(2.4rem,6vw,4rem)}.display-md{font-size:clamp(1.6rem,4vw,2.6rem);text-shadow:0 2px 18px rgba(10,16,32,.9)}.accent{color:var(--hivis)}.lede{max-width:44rem;margin-top:1.2rem;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--concrete)}.lede-sm{max-width:40rem;margin-top:.6rem;color:var(--concrete)}.btn{display:inline-block;padding:.75rem 1.6rem;font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;border:1px solid transparent;transition:transform .12s ease,background .12s ease,border-color .12s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--hivis);color:#14100c;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}.btn-primary:hover{background:var(--amber)}.btn-ghost{border-color:var(--line);color:var(--concrete)}.btn-ghost:hover{border-color:var(--amber);color:var(--chalk)}.btn-wide{width:100%;text-align:center;margin-top:1.2rem}.btn-back{padding:.45rem .9rem;font-size:.9rem}.chip{display:inline-block;padding:.15rem .6rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--concrete);border:1px solid var(--line);border-radius:2px}.title-screen .canvas-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1020f0,#0a1020b8 42%,#0a102040 68%,#0a102000);pointer-events:none}.title-overlay{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:100dvh;padding:4rem clamp(1.5rem,7vw,7rem);pointer-events:none}.title-overlay>*{pointer-events:auto}.title-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.how-strip{display:flex;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;list-style:none;margin-top:3.5rem;counter-reset:how}.how-strip li{counter-increment:how;max-width:15rem;border-top:2px solid var(--line);padding-top:.7rem}.how-strip li:before{content:counter(how,decimal-leading-zero);font-family:var(--font-mono);color:var(--hivis);font-size:.75rem;letter-spacing:.15em;display:block;margin-bottom:.25rem}.how-k{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:.04em}.how-v{display:block;color:var(--concrete);font-size:.85rem;margin-top:.15rem}.credits-line{margin-top:2.2rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:#55617d;max-width:46rem}.credits-line a{color:#7c89aa;text-decoration:none}.credits-line a:hover{color:var(--amber)}.hazard-edge{position:absolute;bottom:0;left:0;right:0;height:8px;background:repeating-linear-gradient(-45deg,var(--hivis) 0 14px,var(--night) 14px 28px);opacity:.85}.role-screen{padding:2.5rem clamp(1.5rem,5vw,5rem) 4rem;overflow-y:auto;background:radial-gradient(ellipse 80% 50% at 70% -10%,rgba(255,180,84,.07),transparent),var(--night)}.screen-head{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:2.5rem}.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem}.role-card{display:flex;flex-direction:column;gap:.7rem;text-align:left;padding:1.4rem 1.5rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--line);transition:border-color .15s ease,transform .15s ease,background .15s ease}.role-card:hover{border-color:var(--hivis);background:var(--panel-2);transform:translateY(-3px)}.role-card.is-current{border-top-color:var(--amber)}.role-top{display:flex;align-items:center;gap:.6rem}.role-icon{font-size:1.5rem}.role-title{font-family:var(--font-display);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em}.role-current-tag{margin-left:auto;font-family:var(--font-mono);font-size:.65rem;color:var(--amber);border:1px solid var(--amber);padding:.1rem .45rem;border-radius:2px}.role-motto{color:var(--amber);font-style:italic;font-size:.95rem}.role-focus{color:var(--concrete);font-size:.9rem;flex:1}.role-learns{display:flex;flex-wrap:wrap;gap:.4rem}.role-cta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--hivis);margin-top:.3rem}.hud-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,3vw,2.5rem);background:linear-gradient(rgba(10,16,32,.9),transparent)}.hud-logo{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase}.hud-stats{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.hud-chip{font-family:var(--font-mono);font-size:.78rem;padding:.3rem .75rem;border:1px solid var(--line);border-radius:2px;background:#131b30bf;color:var(--concrete)}.hud-chip strong{color:var(--chalk)}.hud-role:hover{border-color:var(--amber)}.hud-rank{color:var(--amber);border-color:#ffb45466}.globe-hint{position:absolute;bottom:4.4rem;left:50%;transform:translate(-50%);z-index:2;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--concrete);opacity:.8;pointer-events:none}.rank-progress{position:absolute;bottom:1.4rem;left:50%;transform:translate(-50%);z-index:2;width:min(420px,80vw);text-align:center}.rank-progress-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}.rank-progress-fill{height:100%;background:linear-gradient(90deg,var(--hivis),var(--amber));transition:width .4s ease}.rank-progress-label{display:inline-block;margin-top:.4rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--concrete)}.beacon-label{cursor:pointer;font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.06em;white-space:nowrap;color:#f2f4f8;background:#0a1020bf;border:1px solid #2a3a5e;padding:2px 7px;border-radius:2px;transform:translateY(-6px);transition:opacity .15s}.beacon-label.is-hover{border-color:#ff6b1a;color:#ffb454}.beacon-label.is-done{border-color:#ffb45499;color:#ffb454}.site-panel{position:absolute;top:5.2rem;right:clamp(1rem,3vw,2.5rem);z-index:3;width:min(400px,calc(100vw - 2rem));background:#161f38f0;border:1px solid var(--line);border-top:3px solid var(--hivis);padding:1.5rem 1.6rem 1.6rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:panel-in .22s ease}@keyframes panel-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}.panel-close{position:absolute;top:.5rem;right:.7rem;font-size:1.5rem;color:var(--concrete);line-height:1}.panel-close:hover{color:var(--chalk)}.panel-title{font-family:var(--font-display);font-weight:800;font-size:2rem;text-transform:uppercase;line-height:1}.panel-tagline{color:var(--amber);font-style:italic;margin-top:.35rem}.panel-best{margin-top:.9rem;font-family:var(--font-mono);font-size:.75rem;color:var(--good)}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;margin-top:1.1rem}.stat dt{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--concrete)}.stat dd{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--chalk)}.world-complete{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 2rem));background:#161f38f5;border:1px solid var(--amber);padding:2rem;text-align:center}.world-complete p{color:var(--concrete)}.world-complete .title-actions{justify-content:center}.site-screen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);height:100dvh}.site-3d{position:relative;min-height:40dvh}.site-3d-caption{position:absolute;left:clamp(1rem,3vw,2.5rem);bottom:1.4rem;pointer-events:none}.site-side{overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:1.4rem clamp(1.2rem,2.5vw,2.2rem) 2.5rem}.site-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}.q-counter{color:var(--amber)}.panel-flow{animation:flow-in .25s ease}@keyframes flow-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.brief-text{margin-top:1rem;color:var(--concrete);font-size:.98rem}.role-bonus-note{margin-top:1.1rem;padding:.7rem .9rem;border:1px dashed rgba(255,180,84,.5);color:var(--concrete);font-size:.85rem}.role-bonus-note strong{color:var(--amber)}.q-tags{margin-bottom:.8rem}.chip-role.is-mine{border-color:var(--amber);color:var(--amber)}.q-text{font-family:var(--font-display);font-weight:700;font-size:1.45rem;line-height:1.15;margin-bottom:1.2rem}.q-options{display:flex;flex-direction:column;gap:.6rem}.q-option{display:flex;gap:.8rem;align-items:baseline;text-align:left;padding:.8rem 1rem;background:var(--deep);border:1px solid var(--line);font-size:.92rem;color:var(--chalk);transition:border-color .12s,background .12s}.q-option:not(:disabled):hover{border-color:var(--hivis);background:var(--panel-2)}.q-option:disabled{cursor:default}.q-option-key{color:var(--hivis);flex-shrink:0}.q-option.is-correct{border-color:var(--good);background:#5fd08a1a}.q-option.is-wrong{border-color:var(--bad);background:#ff5f5614}.q-option.is-muted{opacity:.45}.q-feedback{margin-top:1.2rem;padding:1rem 1.1rem;border-left:3px solid var(--good);background:var(--deep)}.q-feedback.is-wrong{border-left-color:var(--bad)}.q-verdict{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1rem}.q-feedback.is-correct .q-verdict{color:var(--good)}.q-feedback.is-wrong .q-verdict{color:var(--bad)}.q-explain{margin-top:.5rem;color:var(--concrete);font-size:.9rem}.debrief-score{font-size:1.1rem;margin-bottom:1.2rem}.debrief-score strong{color:var(--amber)}.lesson-card,.funfact-card{padding:1.1rem 1.2rem;margin-bottom:1rem;background:var(--deep);border:1px solid var(--line)}.lesson-card{border-left:3px solid var(--amber)}.funfact-card{border-left:3px solid var(--line)}.lesson-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}.lesson-text{color:var(--chalk);font-size:.95rem}@media(max-width:900px){.site-screen{grid-template-columns:1fr;grid-template-rows:44dvh 1fr;height:auto;min-height:100dvh}.site-side{border-left:none;border-top:1px solid var(--line)}.screen-head{flex-direction:column;gap:.8rem}.site-panel{inset:auto 0 0;width:100%;border-left:none;border-right:none}.globe-hint{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#131b30bf}.lang-btn{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;padding:.28rem .6rem;border:0;background:transparent;color:var(--concrete);cursor:pointer}.lang-btn.is-active{background:var(--amber);color:var(--night)}.lang-btn:not(.is-active):hover{color:var(--chalk)}.title-lang{position:absolute;top:1.4rem;right:1.6rem;z-index:3}.studio-line{margin-top:.9rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:#55617d;max-width:46rem}.studio-line a{color:var(--amber);text-decoration:none}.studio-line a:hover{text-decoration:underline}