:root{--ink:#0b0e13;--panel:#141a23;--line:#35414e;--ivory:#ece2cf;--dim:#b2b6bd;--gold:#d7b985;--crimson:#a5485c;--mint:#98c5b7;--display:"Bahnschrift","Arial Narrow","Segoe UI",sans-serif;--body:"Segoe UI",system-ui,sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body.game-interface{font-family:var(--body);background-color:var(--ink);background-image:radial-gradient(ellipse at 85% 6%,#44233355,transparent 32%),radial-gradient(circle at 25% 25%,#e9dec144 1px,transparent 1.6px),radial-gradient(circle at 65% 15%,#e9dec126 1px,transparent 1.5px);background-size:auto,113px 137px,179px 211px;color:var(--ivory)}
.icon{display:inline-block;flex:0 0 auto;width:21px;height:21px;vertical-align:middle}
.micro{font:11px/1.6 var(--display);letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #98c5b73a;flex:0 0 auto}
.top-hud{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px;padding:12px 26px;background:#0e131cf5;border-bottom:1px solid #49515d;backdrop-filter:blur(14px)}
.hud-location{display:flex;align-items:center;gap:12px;font:11px/1.5 var(--display);letter-spacing:.1em}.hud-divider{color:#a5485c}.muted{color:#959fae}
.sound-controls{display:flex;align-items:center;gap:18px}
.sound-controls button{display:flex;align-items:center;gap:8px;padding:7px 11px;background:#1c2430;border-color:#4f5a69;font:11px var(--display);letter-spacing:.07em;white-space:nowrap}
.sound-controls button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}
.volume-control{display:flex;gap:8px;align-items:center;margin:0;font:10px var(--display);color:var(--dim)}
.volume-control input{width:75px;height:18px;accent-color:var(--gold)}.volume-control output{min-width:30px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{grid-template-columns:265px minmax(0,1fr)}
aside.mission-sidebar{top:70px;height:calc(100vh - 70px);padding:28px 20px;background:linear-gradient(180deg,#171c25f5,#10151df5);border-right:1px solid #3b4350}
.studio-mark{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ivory);font:30px/1 var(--display);letter-spacing:.1em}
.studio-mark>.icon{width:43px;height:43px;color:var(--gold)}.studio-mark .micro{display:block;font-size:9px;letter-spacing:.2em;margin-top:8px}
.operator{padding:18px 0 20px;margin-top:20px;border-top:1px solid #35404c;border-bottom:1px solid #35404c;font:10px/1.7 var(--display);letter-spacing:.1em;color:var(--gold)}
.operator>.status-dot{margin-right:7px}.operator-sub{display:block;font:12px/1.6 var(--body);color:var(--dim);letter-spacing:0;margin-top:6px}
.mission-sidebar nav{margin-top:20px}.mission-sidebar nav a{display:flex;gap:12px;align-items:center;border:1px solid transparent;border-radius:3px;margin:6px 0;padding:11px 9px;font:13px/1.4 var(--display);letter-spacing:.025em;color:#b6bfcb;transition:background .15s,border-color .15s}
.mission-sidebar nav a:hover,.mission-sidebar nav a[aria-current]{background:#40232e82;border-color:#6c3d4b;color:#f0d7bd}
.mission-sidebar nav .icon{width:19px;height:19px;color:#b58b98}
.sidebar-progress{margin-top:28px;padding:17px 12px;background:#0d121a;border:1px solid #35424f;border-left:3px solid var(--gold)}
.sidebar-progress strong{display:block;font:22px/1.6 var(--display);color:var(--ivory)}
progress{display:block;width:100%;height:5px;border:0;background:#2e3744;accent-color:var(--mint)}progress::-webkit-progress-bar{background:#2e3744}progress::-webkit-progress-value{background:var(--mint)}
.sidebar-footer{display:flex;gap:12px;margin-top:24px;color:#abb2bc;font-size:12px;line-height:1.7}.sidebar-footer .icon{color:#8f7f8d}
main{max-width:1450px;padding:30px clamp(22px,3.3vw,60px);min-width:0}
h1,h2,h3{font-family:var(--display);font-weight:600}
h1{font-size:clamp(34px,4.5vw,66px);line-height:1.05;letter-spacing:-.04em;max-width:820px}h1 em{font-style:normal;color:var(--gold)}
h2{font-size:28px;line-height:1.25;letter-spacing:-.015em;color:var(--ivory)}h3{font-size:20px;line-height:1.4;color:var(--ivory)}
.tag{font:10px/1.7 var(--display);letter-spacing:.16em;color:#bda0ab}
.hero{isolation:isolate;position:relative;overflow:hidden;min-height:445px;padding:30px 34px;margin-top:0;background:linear-gradient(105deg,#1f1c26f5 0%,#181e29eb 55%,#201925bb);border:1px solid #775361;border-top:3px solid var(--crimson);border-radius:3px}
.hero:before,.panel:before{content:"";position:absolute;left:15px;top:14px;width:12px;height:12px;border-left:1px solid var(--gold);border-top:1px solid var(--gold);opacity:.8;pointer-events:none}
.hero-copy{position:relative;z-index:1;max-width:780px}
.hero-copy>p:not(.mission-eyebrow):not(.tag){max-width:64ch}.hero .lead{font-size:18px;color:#d5cfca;max-width:59ch}
.hero-copy>p:not(.lead):not(.tag):not(.mission-eyebrow):not(.small){font-size:15px;color:#bfc2ca;max-width:64ch}
.hero .small{font-size:11px;line-height:1.7;max-width:65ch;color:#b0afb8;margin-top:20px}
.mission-eyebrow{font:10px/1.5 var(--display);letter-spacing:.12em;color:var(--mint);display:flex;gap:10px;align-items:center;margin-top:24px}.mission-eyebrow .icon{width:16px;height:16px}
.orbital-display{position:absolute;right:-60px;top:35px;width:440px;z-index:0;opacity:.35;pointer-events:none}.orbital-display svg{width:100%;display:block}
.orbital-caption{position:absolute;bottom:47px;right:80px;font:9px var(--display);letter-spacing:.2em;color:#c9a4a4}
.actions{gap:16px}.actions a:not(.button){font:12px var(--display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:3px;padding:12px 16px;background:linear-gradient(135deg,#93394c,#622735);border:1px solid #bc7584;box-shadow:inset 0 1px 0 #d59aa329;font:12px/1.4 var(--display);letter-spacing:.05em;text-transform:uppercase;min-height:44px}
button:hover,.button:hover{background:linear-gradient(135deg,#ae485d,#813044);border-color:#e1a0ad}button .icon,.button .icon{width:17px;height:17px}
.telemetry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 32px}
.stat-card{position:relative;display:flex;flex-direction:column;padding:18px 16px;background:#141b25ee;border:1px solid #3b4656;border-radius:3px;min-width:0;border-bottom:2px solid #6e4b5a}
.stat-card>.icon{color:#a98493;position:absolute;right:13px;top:13px;width:17px;height:17px}.stat-card>.micro{font-size:9px;padding-right:20px;line-height:1.7}
.stat-card strong{display:block;font:32px/1.5 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}.stat-card small{font:12px var(--display);color:#b4bbc4}.stat-detail{font-size:10px;line-height:1.7;color:#a6afb9}
.panel{position:relative;border-radius:3px;background:linear-gradient(140deg,#17202b,#131a24);border-color:#3d4859;padding:28px}.panel p,.panel li{font-size:16px}
#lesson{margin:45px 0}.section-heading{display:flex;align-items:center;gap:15px;margin-bottom:25px;padding-bottom:22px;border-bottom:1px solid #414856}
.section-heading h2{margin:6px 0 0;font-size:30px}.section-heading .badge{margin-left:auto}
.section-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;border:1px solid #a06b79;background:#44242f}.section-icon .icon{color:var(--gold);width:25px;height:25px}
#lesson>h2{margin-top:32px}#lesson p,#lesson li{font-size:16px;line-height:1.85;color:#d2d0cc}
.lesson-step{margin:13px 0;border:1px solid #3d4655;background:#151d28;border-radius:3px;overflow:hidden}
.lesson-step summary{list-style:none;display:flex;align-items:center;gap:16px;padding:18px 20px;font:19px/1.35 var(--display);color:var(--ivory)}.lesson-step summary::-webkit-details-marker{display:none}
.step-number{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;font:13px var(--display);color:var(--gold);border:1px solid #67505d;background:#28222d}
.step-arrow{margin-left:auto;width:17px;height:17px;color:#b790a0;transition:transform .15s}.lesson-step[open]{border-color:#94616f}.lesson-step[open] .step-arrow{transform:rotate(90deg)}
.step-body{border-top:1px solid #333e4d;padding:10px 24px 22px}
blockquote{background:#0f1722;border:1px solid #3f4858;border-left:3px solid var(--gold);border-radius:2px;padding:15px 20px;color:#e4d4ba}
.icon-heading{display:flex;gap:12px;align-items:center}.icon-heading .icon{width:26px;height:26px;color:var(--gold)}
.prompt-comparison{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;margin:18px 0 28px}.prompt-before,.prompt-after{padding:16px;background:#121821;border:1px solid #51414f;border-left:3px solid #b56b79}
.prompt-after{border-color:#3e5b56;border-left-color:var(--mint);background:#14211f55}.prompt-before .micro{color:#d29aa7}.prompt-after .micro{color:var(--mint)}.prompt-comparison p{margin-bottom:0}.prompt-after .micro .icon{width:13px;height:13px}
label{font:13px/1.6 var(--display);letter-spacing:.03em;color:#d5c7bc}textarea{font:16px/1.7 var(--body);border-radius:3px;background:#0d141e;border-color:#536173;min-height:105px}textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px #d7b98518}
#notebook .actions button:last-child{background:#202938;border-color:#667185}#notebook-status,#copy-status{font:12px/1.7 var(--body);color:#aac0b6}
#starter-prompt{font:13px/1.8 "Cascadia Code",Consolas,monospace;border-color:#56616f;border-radius:3px;color:#d6c9b9;max-width:100%}
.grid{gap:14px}.module{position:relative;border-radius:3px;padding:21px;border-color:#4e5260;background:#19212c}.module h3{margin-top:20px}.module p{font-size:14px;color:#b8bec6;line-height:1.8}
.module:after{content:"";position:absolute;right:16px;bottom:15px;width:20px;border-bottom:2px solid #7b5263}.module-locked{background:#131a24;border-color:#343f4e}.module-locked h3{color:#b8b9be}.module-locked p{color:#a4abb5}
.badge{border-radius:2px;font:9px/1.5 var(--display);letter-spacing:.09em;padding:5px 8px}.badge .icon{width:12px;height:12px;margin-right:4px}.locked-badge{border-color:#485364;background:#1a222f;color:#a7b0bd}.available-badge{border-color:#66877b;color:#a7d5bf;background:#172b25}
footer{font-size:13px;color:#a6abb5}
@media(min-width:1600px){.hero-copy{max-width:850px}.orbital-display{opacity:.6;right:-20px}.hero-copy>p:not(.small){max-width:65ch}}
@media(max-width:1150px){.telemetry{grid-template-columns:repeat(2,minmax(0,1fr))}.orbital-display{right:-140px;opacity:.2}.section-heading{flex-wrap:wrap}.section-heading .badge{margin-left:63px}}
@media(max-width:900px){html{scroll-padding-top:130px}.top-hud{padding:10px 16px;gap:8px;flex-wrap:wrap}.hud-location{font-size:9px}.hud-location .muted{display:none}.sound-controls{gap:12px}.shell{display:block}aside.mission-sidebar{position:relative;top:0;height:auto;padding:20px}.studio-mark{font-size:24px}.studio-mark>.icon{width:34px;height:34px}.operator{display:none}.mission-sidebar nav{display:flex;gap:6px;margin-top:20px}.mission-sidebar nav a{font-size:11px;padding:9px;margin:0;border-color:#343f4d}.mission-sidebar nav .icon{width:16px;height:16px}.sidebar-progress{margin-top:16px;padding:12px}.sidebar-progress strong{font-size:18px}.sidebar-footer{display:none}main{padding:24px 18px}.hero{padding:25px 23px;min-height:0}.hero:before{left:10px;top:10px}.hero .tag{font-size:9px}.hero-copy{max-width:none}.hero h1{font-size:clamp(34px,7.5vw,55px)}.hero .lead{font-size:17px}.orbital-display{width:310px;right:-110px;top:90px}.hero .actions{align-items:flex-start;flex-direction:column;gap:18px}.panel{padding:24px 20px}.telemetry{gap:9px}.stat-card{padding:15px 12px}.stat-card strong{font-size:28px}.stat-detail{font-size:10px}.section-heading h2{font-size:26px}.step-body{padding:6px 17px 18px}.lesson-step summary{padding:14px;font-size:17px;gap:10px}.prompt-comparison{grid-template-columns:1fr}.section-heading .badge{margin-left:0}.volume-control input{width:65px}.top-hud .sound-controls button{min-height:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.top-hud,.mission-sidebar,.orbital-display,.telemetry,.actions{display:none!important}.hero,.panel,.module,.lesson-step{background:white;color:#111;box-shadow:none}.lesson-step{break-inside:avoid}details:not([open])>div{display:block}body.game-interface{background:white;color:#111}.shell{display:block}main{padding:0}p,h1,h2,h3,em,.micro{color:#111!important}}

.sound-on-icon{display:none}#sound-toggle[aria-pressed=true] .sound-off-icon{display:none}#sound-toggle[aria-pressed=true] .sound-on-icon{display:inline-block}