*, *::before, *::after { box-sizing: border-box; }
:root { --bf-accent:#533AFD; --bf-mint:#0A8C6E; --bf-amber:#F59E0B; --bf-coral:#DC6B4F; --bf-blue:#2457C5; --bf-cyan:#0D8293; --bf-rose:#B94272; --bf-rule:#DDDDE8; --bf-ink:#1A1A2E; --bf-body:#3A3A52; --bf-canvas:#F5F5FA; --bf-surface:#FEFEFE; --bf-raised:#F0F0F8; --sans:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; }
html[data-theme="night"] { --bf-rule:#3A3A52; --bf-ink:#F7F7FC; --bf-body:#D8D8E8; --bf-canvas:#0C0C18; --bf-surface:#151526; --bf-raised:#202035; --bf-accent:#8B7CFF; --bf-mint:#52D6B0; }
html[data-theme="hc"] { --bf-rule:#FFF; --bf-ink:#FFF; --bf-body:#FFF; --bf-canvas:#000; --bf-surface:#000; --bf-raised:#000; --bf-accent:#0FF; --bf-mint:#0F6; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--bf-ink); background:var(--bf-canvas); font:16px/1.6 var(--sans); }
a { color:inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:4px solid var(--bf-accent); outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:9px 12px; color:#fff; background:#000; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:10px max(4vw,calc((100vw - 1320px)/2)); color:#fff; background:#151528; border-bottom:2px solid rgba(255,255,255,.2); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand > span { display:grid; line-height:1.15; }
.brand strong { font-size:15px; }
.brand small { margin-top:4px; color:rgba(255,255,255,.62); font-size:10px; }
.topbar nav { display:flex; align-items:center; gap:22px; }
.topbar nav > a { color:rgba(255,255,255,.78); font-size:13px; font-weight:600; text-decoration:none; }
.topbar nav > a:hover { color:#fff; }
#ctlab-theme-mount button { min-height:44px; }
main { overflow:clip; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.62fr); align-items:end; gap:60px; padding:clamp(44px,6vw,84px) max(4vw,calc((100vw - 1320px)/2)); color:#F7F7FC; background:#0B1220; border-bottom:2px solid var(--bf-accent); }
.eyebrow, .section-label { margin:0 0 16px; color:#69D7A4; font:700 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(58px,9vw,126px); line-height:.82; letter-spacing:-.085em; }
h1 span { color:#69D7A4; }
.lede { max-width:690px; margin:32px 0 0; color:rgba(255,255,255,.72); font-size:clamp(19px,2.3vw,30px); line-height:1.35; }
.release-register { margin:0; border-top:2px solid #69D7A4; }
.release-register div { display:grid; grid-template-columns:1fr auto; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.release-register dt { color:rgba(255,255,255,.56); }
.release-register dd { margin:0; font:600 11px var(--mono); }
.play-lab, .session-lab, .training-console, .evidence { max-width:1320px; margin:0 auto; padding:clamp(64px,8vw,112px) max(4vw,24px); }
.play-lab { display:grid; grid-template-columns:minmax(250px,.48fr) minmax(390px,.82fr); gap:clamp(28px,5vw,72px); align-items:start; padding-block:clamp(32px,4vw,56px); }
.game-copy { position:sticky; top:104px; }
h2 { margin:0; font-size:clamp(38px,5vw,72px); line-height:.98; letter-spacing:-.055em; }
.game-copy > p:not(.section-label), .evidence header > p:last-child { max-width:62ch; color:var(--bf-body); }
.keyboard-guide { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.keyboard-guide p { margin:0; color:var(--bf-body); font-size:13px; }
kbd { display:inline-grid; min-width:29px; min-height:29px; place-items:center; margin-right:4px; color:var(--bf-ink); background:var(--bf-surface); border:1px solid var(--bf-rule); font:600 11px var(--mono); }
.game-stage { padding:clamp(16px,3vw,34px); background:#0B1220; border-left:6px solid #69D7A4; }
.stage-register { display:block; margin:0 auto 10px; padding-bottom:8px; color:#F7F7FC; border-bottom:2px solid rgba(255,255,255,.28); }
.stage-register span { display:block; color:#9EABC0; font:600 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.stage-register strong { display:block; margin-top:4px; font:600 12px var(--mono); }
.board-layout { display:grid; grid-template-columns:max-content 180px; justify-content:center; gap:16px; }
.piece-rail { display:grid; align-content:start; gap:6px; }
.rail-scoreboard { display:grid; gap:1px; margin:0; background:rgba(255,255,255,.16); }
.rail-scoreboard div { padding:9px 10px; color:#F7F7FC; background:#151F31; }
.rail-scoreboard dt { color:#9EABC0; font:600 8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.rail-scoreboard dd { margin:2px 0 0; font:700 17px/1.1 var(--sans); overflow-wrap:anywhere; }
.piece-queue { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.next-module { display:grid; justify-items:center; gap:8px; padding:10px 6px 12px; color:#F7F7FC; background:#151F31; border-top:2px solid #69D7A4; }
.next-module > span { color:#9EABC0; font:600 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.next-preview { display:grid; grid-template-columns:repeat(4,10px); grid-template-rows:repeat(4,10px); gap:1px; }
.next-preview > span { width:10px; height:10px; background:#101A2B; }
.game-board { --cell:clamp(18px,calc((100svh - 300px)/20),27px); display:grid; grid-template-columns:repeat(10,var(--cell)); grid-template-rows:repeat(20,var(--cell)); width:max-content; margin:0 auto; background:#101A2B; border:2px solid rgba(255,255,255,.5); }
.board-cell { width:var(--cell); height:var(--cell); background:#101A2B; border:1px solid rgba(255,255,255,.055); }
.board-cell[class*="cell-"] { position:relative; border:2px solid #0B1220; box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); }
.board-cell[class*="cell-"]::after { content:""; position:absolute; right:4px; bottom:4px; width:5px; height:5px; background:rgba(11,18,32,.55); }
.cell-violet{background:#8B7CFF!important}.cell-amber{background:#F59E0B!important}.cell-mint{background:#52D6B0!important}.cell-blue{background:#4F83E3!important}.cell-coral{background:#E58970!important}.cell-cyan{background:#54C1CE!important}.cell-rose{background:#D8759B!important}
.board-cell[class*="cell-ghost-"] { background:#101A2B!important; border:2px solid rgba(255,255,255,.42); box-shadow:none; }
.board-cell[class*="cell-ghost-"]::after { display:none; }
.game-controls { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin:0; background:rgba(255,255,255,.18); }
.game-controls button { min-height:44px; padding:7px 4px; color:#F7F7FC; background:#151F31; border:0; font:700 10px var(--mono); cursor:pointer; }
.game-controls button:hover { color:#0B1220; background:#69D7A4; }
.game-controls button:disabled { color:#8D98AA; background:#101827; cursor:not-allowed; }
.game-controls button:disabled:hover { color:#8D98AA; background:#101827; }
.game-controls button[data-action="start"] { grid-column:span 2; color:#0B1220; background:#69D7A4; }
.game-controls button[data-action="start"]:hover { background:#8EE5BD; }
.game-controls button[data-action="restart"] { grid-column:auto; }
.session-summary { margin-top:18px; padding:22px; color:#F7F7FC; border:2px solid #69D7A4; }
.session-summary[hidden] { display:none; }
.session-summary h3 { margin:0; font-size:24px; }
.session-summary dl { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:18px 0; background:rgba(255,255,255,.2); }
.session-summary dl div { padding:10px; background:#151F31; }
.session-summary dt { color:#9EABC0; font:600 9px var(--mono); text-transform:uppercase; }
.session-summary dd { margin:4px 0 0; overflow-wrap:anywhere; font:700 12px var(--mono); }
.summary-actions { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.summary-actions button { min-height:48px; color:#0B1220; background:#69D7A4; border:0; font:700 11px var(--mono); cursor:pointer; }
.summary-actions button:hover { background:#8EE5BD; }
.game-settings { margin-top:18px; color:#F7F7FC; border-top:2px solid rgba(255,255,255,.28); }
.game-settings summary { min-height:48px; padding:13px 0; font:700 11px var(--mono); cursor:pointer; }
.game-settings > p { color:#AAB5C8; font-size:12px; }
.preference-toggles { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.preference-toggles label { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px; background:#151F31; font-size:12px; }
.preference-toggles input { width:20px; height:20px; accent-color:#69D7A4; }
.key-map { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.key-map button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 10px; color:#F7F7FC; background:#151F31; border:0; cursor:pointer; }
.key-map button:hover, .key-map button[data-remap-listening] { color:#0B1220; background:#69D7A4; }
.key-map button span { font:600 10px var(--mono); text-transform:capitalize; }
.key-map button kbd { color:inherit; background:transparent; border-color:currentColor; }
.session-lab, .training-console { display:grid; grid-template-columns:minmax(0,.58fr) minmax(320px,.42fr); gap:clamp(36px,7vw,100px); border-top:2px solid var(--bf-rule); }
.session-lab header > p:last-child, .training-console header > p:last-child { color:var(--bf-body); }
.session-history { margin:0; padding:0; list-style:none; border-top:2px solid var(--bf-ink); }
.session-history li { padding:14px 0; color:var(--bf-body); border-bottom:1px solid var(--bf-rule); font:500 11px/1.5 var(--mono); }
.performance-register { display:flex; justify-content:space-between; gap:20px; margin:28px 0 0; padding:14px 0; border-top:1px solid var(--bf-rule); border-bottom:1px solid var(--bf-rule); font-size:12px; }
.performance-register span { color:var(--bf-mint); font-family:var(--mono); }
.task-contract { border-top:2px solid var(--bf-ink); }
.task-contract dl { margin:0; }
.task-contract dl div { display:grid; grid-template-columns:1fr auto; gap:20px; padding:13px 0; border-bottom:1px solid var(--bf-rule); }
.task-contract dd { margin:0; font:600 11px var(--mono); }
.task-contract button { width:100%; min-height:52px; margin-top:20px; color:#fff; background:var(--bf-accent); border:0; font:700 11px var(--mono); cursor:pointer; }
.task-contract button:hover { background:var(--bf-ink); }
#task-result { color:var(--bf-body); font:500 11px/1.5 var(--mono); }
.evidence { border-top:2px solid var(--bf-rule); }
.evidence header { display:grid; grid-template-columns:minmax(0,.7fr) minmax(280px,.3fr); gap:50px; align-items:end; }
.evidence header .section-label { grid-column:1/-1; color:var(--bf-mint); }
.evidence-ledger { display:grid; grid-template-columns:repeat(3,1fr); margin-top:52px; border-top:2px solid var(--bf-ink); border-bottom:2px solid var(--bf-ink); }
.evidence-ledger article { padding:28px; }
.evidence-ledger article + article { border-left:1px solid var(--bf-rule); }
.evidence-ledger span { color:var(--bf-accent); font:600 10px var(--mono); text-transform:uppercase; }
.evidence-ledger h3 { margin:32px 0 8px; font-size:22px; }
.evidence-ledger p { color:var(--bf-body); }
.evidence-ledger strong { display:block; margin-top:32px; color:var(--bf-mint); font:700 11px var(--mono); text-transform:uppercase; }
.attribution { display:grid; grid-template-columns:220px 1fr; gap:30px; padding:26px 0; border-bottom:1px solid var(--bf-rule); }
.attribution strong { font:700 11px var(--mono); text-transform:uppercase; }
.attribution p { margin:0; color:var(--bf-body); }
footer { display:flex; justify-content:space-between; gap:20px; padding:32px max(4vw,calc((100vw - 1320px)/2)); color:rgba(255,255,255,.65); background:#151528; font:11px var(--mono); }
footer strong { color:#fff; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:860px) { .topbar nav > a{display:none}.hero,.play-lab,.session-lab,.training-console,.evidence header{grid-template-columns:1fr}.game-copy{position:static}.release-register{max-width:560px}.evidence-ledger{grid-template-columns:1fr}.evidence-ledger article+article{border-left:0;border-top:1px solid var(--bf-rule)}.attribution{grid-template-columns:1fr}.game-board{--cell:min(6.7vw,28px)} }
@media (max-width:430px) { .hero{padding-top:42px;gap:32px}.hero h1{font-size:clamp(44px,18vw,58px);letter-spacing:-.075em}.lede{font-size:18px}.release-register div{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}.release-register dd{overflow-wrap:anywhere;text-align:right}.play-lab,.session-lab,.training-console,.evidence{padding-inline:16px}.game-stage{padding:12px}.board-layout{grid-template-columns:1fr}.piece-rail{grid-row:1;grid-template-columns:1fr 1fr;gap:2px}.rail-scoreboard{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}.rail-scoreboard div{padding:7px 6px}.rail-scoreboard dd{font-size:14px}.piece-queue{grid-column:1}.next-module{grid-template-columns:auto 44px;align-items:center;justify-content:center;padding:6px}.piece-rail>.game-controls{grid-column:2;align-self:stretch}.game-board{grid-row:2;--cell:calc((100vw - 58px)/10)}.keyboard-guide{grid-template-columns:1fr}.preference-toggles,.key-map{grid-template-columns:1fr}.performance-register{display:grid}footer{display:grid} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
@media print { .topbar,.game-controls{display:none}.hero{color:#000;background:#fff}.hero span,.eyebrow{color:#000}.play-lab{grid-template-columns:1fr 1fr}.game-stage{break-inside:avoid}.game-copy{position:static} }