:root {
  --ink: #080a0f;
  --panel: #10131a;
  --panel-2: #171b24;
  --line: #2a303e;
  --paper: #f4f1e8;
  --muted: #a6adba;
  --cyan: #55e6ff;
  --blue: #4c8dff;
  --pink: #ff497d;
  --green: #55dc82;
  --amber: #ffc348;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); color-scheme: dark; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 1rem/1.55 var(--body); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--paper); color: var(--ink); padding: .7rem 1rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 72px; padding: 0 clamp(1rem, 3vw, 3rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(8,10,15,.86); backdrop-filter: blur(16px); }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; font: 900 1.25rem/1 var(--display); letter-spacing: -.04em; width: fit-content; }
.wordmark > span:last-child > span { color: var(--pink); }
.wordmark-cube { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--cyan); color: var(--cyan); background: #111926; box-shadow: inset -5px -5px 0 rgba(76,141,255,.18), 5px 5px 0 rgba(255,73,125,.18); transform: rotate(-3deg); }
.nav-links { display: flex; gap: 2rem; color: #c0c5ce; font-size: .875rem; }
.nav-links a:hover { color: white; }
.nav-cta { justify-self: end; font: 700 .8rem/1 var(--mono); color: var(--cyan); letter-spacing: .04em; }

.hero { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); border-bottom: 1px solid var(--line); padding-top: 72px; }
.hero-copy { padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 7vw, 8rem) 4rem clamp(1.5rem, 5vw, 6rem); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 74% 25%, rgba(76,141,255,.16), transparent 33%), linear-gradient(135deg, #0b0e14 0 64%, #11151d 64%); }
.kicker, .eyebrow, .mono-label { margin: 0 0 1.6rem; font: 700 .75rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--cyan); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); animation: blink 1.6s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .25; } }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 2rem; font: 900 clamp(4rem, 8vw, 8.8rem)/.82 var(--display); letter-spacing: -.075em; text-transform: uppercase; max-width: 9ch; }
h1 em { color: var(--pink); font-style: normal; text-shadow: 4px 4px 0 rgba(85,230,255,.18); }
.hero-lede { max-width: 650px; color: #c0c5ce; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 3rem; }
.button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.2rem; border: 1px solid var(--line); font: 800 .8rem/1 var(--mono); text-transform: uppercase; }
.button.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button.primary:hover { background: var(--cyan); border-color: var(--cyan); }
.button.ghost:hover { border-color: var(--pink); color: var(--pink); }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; max-width: 650px; border-top: 1px solid var(--line); }
.hero-facts div { padding: 1.2rem 1rem 0 0; }
.hero-facts dt { font: 900 clamp(1.7rem, 3vw, 3rem)/1 var(--display); }
.hero-facts dd { margin: .35rem 0 0; font: 600 .7rem/1.3 var(--mono); text-transform: uppercase; color: var(--muted); }
.hero-media { position: relative; display: grid; place-items: center; padding: 5rem clamp(2rem, 4vw, 5rem) 3rem; overflow: hidden; background: #07090d url("assets/hero-keyart.jpg") center/cover; isolation: isolate; }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,10,15,.35), rgba(8,10,15,.82)), linear-gradient(0deg, #080a0f 0, transparent 30%); backdrop-filter: blur(5px); }
.hero-media video { width: min(430px, 80%); max-height: 76vh; aspect-ratio: 2/3; object-fit: cover; border: 1px solid rgba(255,255,255,.32); box-shadow: 24px 24px 0 rgba(85,230,255,.08), -14px -14px 0 rgba(255,73,125,.08), 0 30px 90px #000; background: #0b0e13; }
.media-rail { position: absolute; top: 9.5rem; right: -8.5rem; display: flex; gap: 2rem; padding: .55rem 2rem; transform: rotate(90deg); background: var(--amber); color: #111; font: 800 .65rem/1 var(--mono); letter-spacing: .1em; }
.capture-caption { position: absolute; left: 2rem; right: 2rem; bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; color: #bbc1cb; font: 600 .65rem/1 var(--mono); text-transform: uppercase; }

.signal-strip { min-height: 66px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.signal-strip p { margin: 0; padding: 1.4rem clamp(1rem, 3vw, 2.5rem); border-right: 1px solid #c8c4ba; font: 600 .72rem/1.35 var(--mono); text-transform: uppercase; }
.signal-strip p:last-child { border: 0; }
.signal-strip strong { color: #df245a; margin-right: .6rem; }

.section { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 6rem); border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(230px, .7fr) 1.4fr 1fr; gap: 3rem; align-items: start; margin-bottom: 5rem; }
.section-heading .eyebrow { margin-top: .5rem; }
.section-heading h2, .arena-copy h2 { margin-bottom: 0; font: 900 clamp(3rem, 6vw, 6.2rem)/.9 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.section-heading > p:last-child, .arena-copy > p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.section-heading.compact { grid-template-columns: .6fr 1fr 1fr; }

.mechanics { background: #0d1016; }
.sequence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; max-width: 1150px; margin: 0 auto 6rem; align-items: start; }
.sequence-card { margin: 0; background: #07090d; border: 1px solid var(--line); }
.sequence-card.offset { margin-top: 4rem; }
.sequence-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.08); }
.sequence-card figcaption { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: 1rem; border-top: 1px solid var(--line); }
.sequence-card figcaption span { grid-row: 1/3; color: var(--cyan); font: 700 .7rem var(--mono); }
.sequence-card figcaption strong { font: 900 1.25rem var(--display); text-transform: uppercase; }
.sequence-card figcaption small { color: var(--muted); }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.rule-grid article { min-height: 240px; padding: 1.7rem; border-right: 1px solid var(--line); }
.rule-grid article:last-child { border: 0; }
.rule-grid h3 { margin: 2rem 0 .6rem; font: 800 1.4rem var(--display); text-transform: uppercase; }
.rule-grid p { color: var(--muted); font-size: .92rem; }
.rule-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid currentColor; font: 800 1rem var(--mono); }
.amber { color: var(--amber); }.blue { color: var(--cyan); }.green { color: var(--green); }.pink { color: var(--pink); }

.play-section { background: radial-gradient(circle at 25% 40%, rgba(76,141,255,.11), transparent 35%), #080a0f; }
.play-layout { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(240px, .36fr); gap: 1.5rem; max-width: 1050px; margin: 0 auto; }
.sim-shell { border: 1px solid #3b4559; background: #0e121a; box-shadow: 18px 18px 0 #101825; }
.sim-toolbar { min-height: 58px; padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #343d4d; font: 700 .68rem/1 var(--mono); letter-spacing: .08em; }
.sim-toolbar > div { display: flex; gap: 1rem; color: var(--muted); }.sim-toolbar b { color: white; margin-left: .25rem; }
.sim-stage { display: flex; justify-content: center; align-items: flex-start; gap: 1rem; padding: 1.4rem; background: linear-gradient(150deg, #111722, #090c12); }
.well-frame { position: relative; width: min(360px, 66vw); aspect-ratio: 1/2; border: 8px solid #3b4458; border-top-color: #66718a; box-shadow: inset 0 0 30px #020306, 0 0 45px rgba(85,230,255,.08); background: #080b11; }
#simCanvas { width: 100%; height: 100%; }
.chain-toast { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%) scale(.85); padding: .7rem 1rem; opacity: 0; white-space: nowrap; pointer-events: none; background: #07090e; border: 1px solid var(--cyan); box-shadow: 6px 6px 0 rgba(85,230,255,.16); font: 900 1rem var(--display); transition: .18s ease; }
.next-panel { width: 88px; padding: .8rem; border: 1px solid #343d4d; color: var(--muted); font: 700 .65rem var(--mono); text-align: center; }
#previewCanvas { width: 56px; height: 84px; margin: .7rem auto; }
.pace { padding-top: .8rem; border-top: 1px solid #343d4d; }.pace strong { display: block; color: white; font: 900 1.4rem var(--display); }.pace span,.pace small { display:block;font-size:.55rem; }
.sim-controls { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #343d4d; }
.sim-controls button { min-height: 48px; border: 0; border-right: 1px solid #343d4d; background: transparent; color: #cbd0d8; font: 700 .68rem var(--mono); cursor: pointer; }
.sim-controls button:hover { background: #1c2330; color: white; }.sim-controls button.hot { background: var(--pink); color: white; }.sim-controls button:last-child { border: 0; }
.play-notes { padding: 1.5rem; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.play-notes hr { border: 0; border-top: 1px solid var(--line); margin: 1.8rem 0; }
.key-row { display: flex; align-items: center; gap: .4rem; min-height: 40px; }.key-row span { margin-left: auto; font-size: .85rem; }
kbd { min-width: 31px; padding: .35rem .45rem; text-align: center; background: #090b10; color: white; border: 1px solid #404858; border-bottom-width: 3px; font: 700 .7rem var(--mono); }

.cube-section { background: var(--paper); color: var(--ink); }
.cube-section .section-heading > p:last-child { color: #626671; }.cube-section .eyebrow { color: #d51f56; }
.pack-feature { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.5rem; }
.pack-image { margin: 0; border: 1px solid #c9c4b8; background: white; }.pack-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }.pack-image figcaption { display:flex; justify-content:space-between; gap:2rem; padding:.9rem 1rem; color:#5a5d66; font-size:.78rem; }
.cube-lab { padding: 1.3rem; background: #0c0f15; color: var(--paper); border: 1px solid #252b36; box-shadow: 12px 12px 0 #d7d2c5; }
.lab-head { display: flex; justify-content: space-between; padding-bottom: 1rem; margin-bottom: .7rem; border-bottom: 1px solid #303744; font: 800 .75rem var(--mono); color: var(--cyan); }.lab-head small { color: var(--muted); font-size: .6rem; }
.cube-lab label { min-height: 48px; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 1rem; border-bottom: 1px solid #242a34; color: #aeb5c1; font: 600 .7rem var(--mono); text-transform: uppercase; }
.cube-lab select { width: 100%; border: 0; background: #171c25; color: white; padding: .55rem; font-size: .72rem; }
.recipe { margin-top: 1rem; padding: .8rem; background: rgba(85,230,255,.08); border-left: 2px solid var(--cyan); color: #d8faff; font-size: .78rem; }
.lab-note { margin: 1rem 0 0; color: #8f97a5; font-size: .75rem; }.lab-note kbd { padding: .15rem .35rem; }
.asset-facts { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 3rem; border-top: 1px solid #c9c4b8; border-bottom: 1px solid #c9c4b8; }
.asset-facts div { padding: 2rem 1.2rem; border-right: 1px solid #c9c4b8; }.asset-facts div:last-child { border:0; }.asset-facts strong { display:block; font: 900 3rem/1 var(--display); }.asset-facts span { display:block; margin-top:.5rem; color:#686b72; font-size:.75rem; text-transform:uppercase; }

.arena-section { background: #0b0d12; }
.arena-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.arena-copy h2 { margin: 0 0 2rem; }.arena-copy > p { max-width: 620px; }
.persona-list { margin-top: 2rem; border-top: 1px solid var(--line); }
.persona { width: 100%; display: flex; gap: 1rem; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #949ba8; text-align: left; cursor: pointer; font: 800 1.05rem var(--display); text-transform: uppercase; }.persona span { width: 2rem; color: #5d6573; font: 600 .65rem var(--mono); }.persona:hover,.persona.active { color: var(--cyan); }.persona.active span { color: var(--pink); }
.persona-readout { min-height: 105px; padding: 1rem; margin-top: 1rem; background: #141924; border-left: 3px solid var(--pink); }.persona-readout small { color:var(--pink);font:700 .68rem var(--mono); }.persona-readout p { margin:.45rem 0 0; color:#c0c6cf; font-size:.88rem; }
.arena-visual { margin:0; border:1px solid var(--line); background:#07090d; }.arena-visual img { width:100%; aspect-ratio: 1.28/1; object-fit:cover; }.arena-visual figcaption { display:flex;justify-content:space-between;padding:.8rem 1rem;color:#9aa2af;font:600 .65rem var(--mono);text-transform:uppercase;border-top:1px solid var(--line); }
.ai-metrics { display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;border:1px solid var(--line); }.ai-metrics article { padding:1.4rem;border-right:1px solid var(--line); }.ai-metrics article:last-child{border:0}.ai-metrics strong{font:900 2rem var(--display);color:var(--amber);text-transform:uppercase}.ai-metrics p{margin:.5rem 0 0;color:var(--muted);font-size:.78rem}

.build-section { background: #10131a; }
.status-board { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
.status-card { min-height: 370px; padding:1.4rem; border:1px solid var(--line); background:#0b0e14; }.status-card > div { display:flex;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);font:700 .67rem var(--mono); }.status-card b{font-size:.62rem;padding:.25rem .45rem;border:1px solid currentColor}.status-card.ready b{color:var(--green)}.status-card.proven b{color:var(--cyan)}.status-card.pending b{color:var(--amber)}
.status-card ul { margin:1.5rem 0 0;padding:0;list-style:none; }.status-card li { position:relative;padding:.65rem 0 .65rem 1.4rem;border-bottom:1px solid #20252e;color:#b3bac5;font-size:.88rem; }.status-card li::before{content:"+";position:absolute;left:0;color:var(--green);font-family:var(--mono)}.status-card.pending li::before{content:"○";color:var(--amber)}
.honesty-note { margin:1rem 0 0;padding:1.2rem;border:1px solid #4a4030;background:rgba(255,195,72,.05);color:#bdc3cc;font-size:.88rem; }.honesty-note strong{color:var(--amber)}

footer { min-height: 150px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:2rem clamp(1.25rem,5vw,6rem);background:#06070a;color:#858c98;font:600 .7rem var(--mono);text-transform:uppercase; } footer > a:last-child{justify-self:end;color:var(--cyan)}

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }.nav-links { display:none; }
  .hero { grid-template-columns:1fr; }.hero-copy{min-height:760px}.hero-media{min-height:750px}
  .section-heading,.section-heading.compact { grid-template-columns:1fr;gap:1rem }.section-heading{margin-bottom:3rem}.section-heading .eyebrow{margin:0}
  .rule-grid { grid-template-columns:repeat(2,1fr) }.rule-grid article:nth-child(2){border-right:0}.rule-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .play-layout,.pack-feature,.arena-layout { grid-template-columns:1fr }.play-notes{max-width:none}.arena-copy{max-width:680px}
  .status-board { grid-template-columns:1fr }.status-card{min-height:0}
}

@media (max-width: 680px) {
  .topbar{height:62px}.nav-cta{font-size:.66rem}.hero{padding-top:62px}.hero-copy{min-height:680px;padding:5rem 1.2rem 3rem}.hero-media{min-height:660px;padding:4rem 1rem 3rem}.hero-media video{width:min(390px,86%)}
  h1{font-size:clamp(3.7rem,18vw,6rem)}.hero-facts{grid-template-columns:1fr}.hero-facts div{display:flex;align-items:baseline;gap:1rem}.hero-facts dd{margin:0}
  .signal-strip{grid-template-columns:1fr}.signal-strip p{border-right:0;border-bottom:1px solid #c8c4ba}.signal-strip p:last-child{border:0}
  .section{padding:5rem 1rem}.sequence-grid{grid-template-columns:1fr;padding:0 2rem}.sequence-card.offset{margin-top:0}.rule-grid{grid-template-columns:1fr}.rule-grid article{border-right:0!important;border-bottom:1px solid var(--line)!important}.rule-grid article:last-child{border-bottom:0!important}
  .play-layout{display:block}.sim-shell{box-shadow:none}.sim-toolbar{align-items:flex-start;gap:.7rem}.sim-toolbar>div{display:grid;gap:.3rem;text-align:right}.sim-stage{padding:.7rem;gap:.5rem}.well-frame{width:min(330px,72vw);border-width:5px}.next-panel{width:69px;padding:.55rem}.sim-controls{grid-template-columns:repeat(3,1fr)}.sim-controls button{border-bottom:1px solid #343d4d}.play-notes{margin-top:1rem}
  .pack-image figcaption,.arena-visual figcaption{display:block}.pack-image figcaption strong{display:block}.cube-lab{box-shadow:none}.asset-facts,.ai-metrics{grid-template-columns:repeat(2,1fr)}.asset-facts div:nth-child(2),.ai-metrics article:nth-child(2){border-right:0}.asset-facts div:nth-child(-n+2),.ai-metrics article:nth-child(-n+2){border-bottom:1px solid currentColor}
  footer{grid-template-columns:1fr;text-align:left}footer>p{margin:0}footer>a:last-child{justify-self:start}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.live-dot{animation:none}*{transition-duration:.01ms!important} }