/* Self-hosted fonts (SIL OFL 1.1, see fonts/LICENSES.txt). */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Display face: Archivo 900 (heavy, normal width). Concept: "Enter the machine". The site boots like a computer, the hero is a live circuit board you can probe with your cursor,
   and the syllabus is told as the parts of a computer, each one running a real piece of Computer Science. Single dark world on purpose. */
:root {
  color-scheme: dark;
  --void: #05070a;
  --board: #0a0f0c;
  --panel: #0e1512;
  --line: #1d2a23;
  --ink: #eef3ef;
  --muted: #9fb0a6;
  --dim: #66786d;
  --lime: #c4f69a;
  --lime-hot: #e4ffc9;
  --violet: #a78bfa;
  --violet-deep: #241a3d;
  --red: #ff6b6b;
  --display: "Archivo", "Arial Black", Impact, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --body: "Geist", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
}
body { background: var(--void); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: var(--lime); color: #0b1406; font: 700 15px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 0 0 0 #c4f69a66; transition: box-shadow .25s, transform .25s; }
.btn:hover { box-shadow: 0 0 0 8px #c4f69a22, 0 0 40px #c4f69a66; transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #ffffff40; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 30px #c4f69a33; }
.btn svg { width: 16px; height: 16px; }

/* Boot */
.boot { position: fixed; inset: 0; z-index: 100; background: #000; display: none; padding: clamp(20px, 5vw, 60px); font: 500 clamp(13px, 1.4vw, 16px)/1.75 var(--mono); color: var(--lime); }
.booting .boot { display: block; }
.boot .skip { display: none; }
.boot b { color: #fff; font-weight: 700; }

/* Nav */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 60; padding: 14px var(--gutter); display: flex; align-items: center; gap: 18px; pointer-events: none; }
.nav > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 900 16px/1 var(--display); text-decoration: none; letter-spacing: -0.02em; padding: 10px 14px 10px 10px; border-radius: 999px; background: #05070acc; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #ffffff18; }
.logo i { width: 22px; height: 22px; border-radius: 6px; background: var(--lime); display: grid; place-items: center; font: 700 11px/1 var(--mono); color: #0b1406; font-style: normal; }
.nav .btn { margin-left: auto; padding: 12px 18px; font-size: 12px; }

/* Hero: a live circuit board */
.hero { position: relative; box-sizing: border-box; min-height: 100svh; display: grid; align-content: end; overflow: hidden; isolation: isolate; padding-block: 90px 0; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 22% 70%, #05070aee 10%, #05070a99 45%, transparent 75%), linear-gradient(transparent 70%, var(--void)); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.hero-inner { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; container-type: inline-size; padding-bottom: clamp(24px, 3vw, 40px); }
.prompt { font: 500 clamp(12px, 1.2vw, 14px)/1.4 var(--mono); color: var(--lime); display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 999px; background: #0c140acc; box-shadow: inset 0 0 0 1px #c4f69a33; }
.prompt .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.hero h1 { margin-top: 22px; font-size: clamp(32px, min(14vw, calc((100vh - 340px) / 2.52)), 540px); font-size: clamp(32px, min(15cqw, calc((100svh - 340px) / 2.52)), 540px); line-height: 0.84; letter-spacing: -0.05em; }
.hero h1 span { display: block; white-space: nowrap; width: max-content; will-change: transform; }
.intro .hero h1 span { opacity: 0; }
.fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fx .debris { position: absolute; font: 700 18px/1 var(--mono); color: var(--lime); text-shadow: 0 0 12px #c4f69a99; }
.fx .debris.v { color: var(--violet); text-shadow: 0 0 12px #a78bfa99; }
.fx .shock { position: absolute; border-radius: 50%; border: 2px solid var(--lime); box-shadow: 0 0 30px #c4f69a88, inset 0 0 30px #c4f69a55; }
#fx-cracks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; fill: none; stroke: #e9ffd6; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 6px #c4f69a); }
#fx-flash { position: absolute; inset: 0; background: var(--lime); opacity: 0; mix-blend-mode: screen; }
.hero h1 .l2 { color: transparent; -webkit-text-stroke: 2px var(--violet); text-stroke: 2px var(--violet); }
.hero h1 .l3 { color: var(--lime); text-shadow: 0 0 60px #c4f69a55; }
.hero-row { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: end; justify-content: space-between; }
.hero-sub { max-width: 42ch; font-size: clamp(17px, 1.6vw, 21px); color: #c9d6cd; }
.hero-sub b { color: #fff; font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.probe-hint { margin-top: 18px; font: 500 12px/1.4 var(--mono); color: var(--dim); }
.ticker { margin-top: clamp(28px, 4vw, 48px); border-block: 1px solid #c4f69a2e; background: #0a120b; overflow: hidden; transform: rotate(-1.4deg); margin-inline: -40px; }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker span { font: 700 clamp(14px, 1.6vw, 18px)/1 var(--display); padding: 16px 22px; white-space: nowrap; color: var(--ink); letter-spacing: 0.02em; }
.ticker span:nth-child(3n) { color: var(--lime); } .ticker span:nth-child(3n+1) { color: var(--violet); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Section heads */
.scene { padding-block: clamp(90px, 13vw, 170px); }
.label { font: 500 13px/1.4 var(--mono); color: var(--lime); }
.big { font-size: clamp(40px, 7.4vw, 112px); margin-top: 16px; }
.big em { font-style: normal; color: var(--lime); }
.big .stroke { color: transparent; -webkit-text-stroke: 1.5px var(--violet); }
.lede { margin-top: 22px; max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); }

/* The machine: one zone per part of the syllabus */
.machine { position: relative; margin-top: clamp(40px, 6vw, 80px); display: grid; gap: clamp(20px, 3vw, 28px); }
.rail { position: sticky; top: 50%; z-index: 5; height: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.rail ol { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; transform: translate(calc(var(--gutter) * 0.4), -50%); border-radius: 999px; background: #05070acc; box-shadow: inset 0 0 0 1px #ffffff14; pointer-events: auto; }
.rail li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--mono); color: var(--dim); }
.rail li.on { background: var(--lime); color: #0b1406; box-shadow: 0 0 18px #c4f69a88; }
.zone { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 32px; background: linear-gradient(160deg, #0d1511, #080c0a); box-shadow: inset 0 0 0 1px #c4f69a1c; overflow: hidden; min-height: min(620px, 80vh); }
.zone:nth-child(even) { background: linear-gradient(160deg, #120f1d, #08070c); box-shadow: inset 0 0 0 1px #a78bfa24; }
.zone .num { font: 900 clamp(90px, 13vw, 190px)/0.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px #c4f69a33; position: absolute; right: clamp(16px, 3vw, 40px); bottom: -0.12em; pointer-events: none; }
.zone:nth-child(even) .num { -webkit-text-stroke-color: #a78bfa33; }
.zone .tag { font: 500 12px/1.4 var(--mono); color: var(--lime); }
.zone:nth-child(even) .tag { color: var(--violet); }
.zone h3 { margin-top: 12px; font-size: clamp(30px, 4vw, 54px); }
.zone .copy p { margin-top: 16px; color: var(--muted); max-width: 38ch; font-size: clamp(16px, 1.4vw, 18px); }
.chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font: 500 12px/1 var(--mono); padding: 8px 12px; border-radius: 999px; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff1c; color: #d2ddd6; }
.viz { position: relative; min-width: 0; border-radius: 22px; background: #050806; box-shadow: inset 0 0 0 1px #ffffff12; padding: clamp(16px, 2.4vw, 28px); font-family: var(--mono); }
.zone:nth-child(even) .viz { background: #07060b; }
.viz-cap { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--dim); }

/* 01 bits */
.bitrow { margin-top: 18px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(4px, 0.8vw, 8px); perspective: 600px; }
.bitrow button { aspect-ratio: 3 / 4; border: 0; border-radius: 12px; background: #0e1610; color: #3f5442; font: 700 clamp(22px, 3.6vw, 48px)/1 var(--mono); cursor: pointer; box-shadow: inset 0 0 0 1px #24352a; display: grid; place-items: center; }
.bitrow button[aria-pressed="true"] { background: var(--lime); color: #0b1406; box-shadow: 0 0 30px #c4f69a55; }
.bitrow small { font: 500 clamp(9px, 0.9vw, 11px)/1 var(--mono); color: var(--dim); text-align: center; }
.weights { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(4px, 0.8vw, 8px); margin-top: 6px; }
.decode { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.decode div { border-radius: 14px; background: #0c130e; padding: 12px 14px; }
.decode span { display: block; font-size: 11px; color: var(--dim); }
.decode b { font: 700 clamp(22px, 2.8vw, 36px)/1.2 var(--mono); color: var(--lime); }
.word { margin-top: 16px; display: flex; gap: 8px; }
.word span { width: clamp(34px, 4vw, 48px); aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font: 900 clamp(18px, 2.2vw, 26px)/1 var(--display); background: #0c130e; color: #2b3b2e; box-shadow: inset 0 0 0 1px #24352a; }
.word span.got { background: var(--violet-deep); color: #fff; box-shadow: inset 0 0 0 1px var(--violet), 0 0 20px #a78bfa44; }

/* 02 packets */
.net { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.net .path { fill: none; stroke: #2a2340; stroke-width: 2; stroke-dasharray: 4 6; }
.net .node { fill: #0f0c18; stroke: #4b3d77; stroke-width: 1.5; }
.net .end { fill: #1b1530; stroke: var(--violet); stroke-width: 2; }
.net text { font: 600 13px var(--mono); fill: #d9d2f3; }
.net .pk rect { rx: 6; fill: var(--violet); }
.net .pk text { fill: #120c22; font-weight: 700; font-size: 12px; text-anchor: middle; }
.net .pk.bad rect { fill: var(--red); }
.slots { display: flex; gap: 8px; margin-top: 12px; align-items: center; font-size: 12px; color: var(--dim); }
.slots i { width: 34px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 700 13px/1 var(--mono); font-style: normal; background: #0f0c18; box-shadow: inset 0 0 0 1px #3a2f5c; color: #4b3d77; }
.slots i.in { background: var(--violet); color: #120c22; box-shadow: 0 0 16px #a78bfa66; }
.slots i.bad { background: var(--red); color: #2a0606; }
.status { margin-top: 10px; font-size: 13px; color: #d9d2f3; min-height: 1.6em; }

/* 03 CPU */
.cpu { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.regs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reg { border-radius: 12px; background: #0c130e; padding: 10px 12px; box-shadow: inset 0 0 0 1px #213027; }
.reg span { display: block; font-size: 10.5px; color: var(--dim); }
.reg b { font: 700 clamp(15px, 1.7vw, 20px)/1.3 var(--mono); color: var(--ink); }
.reg.hot { box-shadow: inset 0 0 0 2px var(--lime), 0 0 24px #c4f69a55; }
.reg.hot b { color: var(--lime); }
.mem { border-radius: 12px; background: #0c130e; padding: 8px; display: grid; gap: 4px; align-content: start; box-shadow: inset 0 0 0 1px #213027; }
.mem div { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.mem div span { color: var(--dim); width: 18px; }
.mem div.hot { background: #1f3220; color: var(--lime); }
.stage-row { display: flex; gap: 6px; margin-top: 14px; }
.stage-row span { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; font: 700 11px/1 var(--display); letter-spacing: 0.04em; background: #0c130e; color: #4a5f4f; box-shadow: inset 0 0 0 1px #213027; }
.stage-row span.on { background: var(--lime); color: #0b1406; box-shadow: 0 0 22px #c4f69a66; }

/* 04 encryption */
.cipher { margin-top: 16px; display: grid; gap: 12px; }
.cipher .line { display: flex; flex-wrap: wrap; gap: 5px; }
.cipher .line i { width: clamp(24px, 3.4vw, 40px); height: clamp(32px, 4.4vw, 52px); border-radius: 8px; display: grid; place-items: center; font: 700 clamp(14px, 2vw, 22px)/1 var(--mono); font-style: normal; background: #0f0c18; color: #e6e0ff; box-shadow: inset 0 0 0 1px #3a2f5c; }
.cipher .line i.sp { background: transparent; box-shadow: none; width: 10px; }
.cipher .line.out i { color: var(--violet); }
.cipher .line.out i.lock { background: var(--violet-deep); box-shadow: inset 0 0 0 1px var(--violet), 0 0 14px #a78bfa44; color: #fff; }
.keyrow { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #d9d2f3; }
.keyrow b { font: 700 13px/1 var(--mono); padding: 7px 12px; border-radius: 999px; background: var(--violet); color: #120c22; }
.keyrow input { flex: 1; accent-color: var(--violet); min-width: 0; }

/* 05 logic */
.logic { width: 100%; height: auto; display: block; margin-top: 8px; }
.logic .wire { fill: none; stroke: #2b3b2e; stroke-width: 4; stroke-linecap: round; transition: stroke .2s, filter .2s; }
.logic .wire.on { stroke: var(--lime); filter: drop-shadow(0 0 6px #c4f69a); }
.logic .gate { fill: #0c130e; stroke: #3d5741; stroke-width: 2.5; }
.logic text { font: 700 14px var(--mono); fill: #d2ddd6; }
.logic .in { cursor: pointer; }
.logic .in circle { fill: #0c130e; stroke: #3d5741; stroke-width: 2.5; }
.logic .in.on circle { fill: var(--lime); stroke: var(--lime); }
.logic .in.on text { fill: #0b1406; }
.logic .lamp { fill: #121a14; stroke: #3d5741; stroke-width: 2.5; transition: fill .2s; }
.logic .lamp.on { fill: var(--lime); filter: drop-shadow(0 0 14px #c4f69a); }
.truth { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; }
.truth th { font-weight: 500; color: var(--dim); padding: 6px; border-bottom: 1px solid #213027; }
.truth td { padding: 6px; border-bottom: 1px solid #141e17; }
.truth tr.on td { background: #1f3220; color: var(--lime); }

/* 06 sort */
.bars { display: flex; align-items: end; gap: clamp(4px, 0.8vw, 8px); height: clamp(180px, 22vw, 260px); margin-top: 16px; }
.bars div { flex: 1; border-radius: 8px 8px 3px 3px; background: #2a2340; position: relative; display: grid; align-content: start; justify-items: center; font: 700 12px/1 var(--mono); color: #cfc6f0; padding-top: 8px; }
.bars div.cmp { background: var(--violet); color: #120c22; box-shadow: 0 0 22px #a78bfa66; }
.bars div.done { background: var(--lime); color: #0b1406; }

/* Boss fight */
.boss { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.qcard { position: relative; border-radius: 28px; background: #f4f7f2; color: #101810; padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 0 0 1px #ffffff30, 0 60px 120px -50px #c4f69a55; overflow: hidden; }
.qhead { display: flex; justify-content: space-between; gap: 10px; font: 600 12px/1.4 var(--mono); color: #55665a; }
.hp { margin-top: 14px; height: 10px; border-radius: 999px; background: #dfe7dd; overflow: hidden; }
.hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7c5cf0, #a78bfa); transform-origin: left; }
.qcard h3 { margin-top: 18px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.qcard h3 code { font-family: var(--mono); background: #e3ecdd; padding: 0 8px; border-radius: 8px; }
.answer { margin-top: 16px; min-height: 92px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #d4ddd2; padding: 14px 16px; font: 500 16px/1.7 var(--mono); white-space: pre-line; }
.answer .caret { display: inline-block; width: 9px; height: 18px; background: #101810; vertical-align: -3px; animation: pulse 1s steps(1) infinite; }
.marks { margin-top: 16px; display: grid; gap: 8px; }
.marks div { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #e9efe6; font-size: 15px; }
.marks i { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 2px #9aab9e; display: grid; place-items: center; font-style: normal; }
.marks div.on { background: #dff7c6; }
.marks div.on i { background: #1c2b10; box-shadow: none; }
.marks div.on i::after { content: ""; width: 10px; height: 5px; border: solid var(--lime); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.stamp { position: absolute; right: 18px; top: 46%; transform: rotate(-12deg) scale(0); font: 900 clamp(22px, 3vw, 36px)/1 var(--display); color: #1c2b10; background: var(--lime); padding: 12px 18px; border-radius: 14px; box-shadow: 0 0 0 4px #1c2b10, 0 20px 40px -10px #000a; pointer-events: none; }
.burst-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.burst-layer span { position: absolute; font: 700 16px/1 var(--mono); color: #6e48ff; }
.score { margin-top: 26px; display: flex; gap: 28px; flex-wrap: wrap; }
.score div span { display: block; font: 500 12px/1.4 var(--mono); color: var(--dim); }
.score div b { font: 900 clamp(34px, 4vw, 54px)/1 var(--display); color: var(--lime); font-variant-numeric: tabular-nums; }

/* Map */
.map-wrap { margin-top: clamp(36px, 5vw, 60px); border-radius: 32px; background: #070a08; box-shadow: inset 0 0 0 1px #c4f69a1c; padding: clamp(14px, 2vw, 24px); overflow-x: auto; }
.map { display: block; width: 100%; min-width: 760px; height: auto; }
.map .trail { fill: none; stroke: #18241b; stroke-width: 10; stroke-linecap: round; }
.map .trail-lit { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px #c4f69a); }
.map .lvl circle { fill: #0c130e; stroke: #2b3b2e; stroke-width: 3; }
.map .lvl text { font: 700 13px var(--mono); fill: #5d7262; text-anchor: middle; }
.map .lvl .name { font: 500 11px var(--body); fill: #5d7262; text-anchor: middle; }
.map .lvl.lit circle { fill: var(--lime); stroke: var(--lime); }
.map .lvl.lit text { fill: #0b1406; }
.map .lvl.lit .name { fill: #c9d6cd; }
.map .lvl.now circle { fill: var(--violet-deep); stroke: var(--violet); }
.map .lvl.now text { fill: #fff; }
.map .lvl.now .name { fill: #fff; }

/* Terminal */
.term { margin-top: clamp(36px, 5vw, 60px); border-radius: 22px; background: #030504; box-shadow: inset 0 0 0 1px #c4f69a2a, 0 50px 120px -60px #c4f69a44; overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #142017; font: 500 12px/1 var(--mono); color: var(--dim); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #1f2b22; }
.term-bar .tab { margin-left: 10px; padding: 6px 10px; border-radius: 8px; }
.term-bar .tab.on { background: #142017; color: var(--lime); }
.term-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 300px; }
.term pre { margin: 0; padding: 20px; font: 500 clamp(13px, 1.4vw, 16px)/1.9 var(--mono); color: #d8e4dc; white-space: pre; overflow-x: auto; }
.term pre .tcaret { display: inline-block; width: 8px; height: 16px; background: var(--lime); vertical-align: -2px; }
.term pre .k { color: var(--violet); } .term pre .n { color: var(--lime); } .term pre .s { color: #ffd58a; }
.term .out { border-left: 1px solid #142017; padding: 20px; font: 500 clamp(13px, 1.4vw, 16px)/1.9 var(--mono); color: var(--lime); }
.term .out span { display: block; }
.term .out .dim { color: var(--dim); }

/* Start */
.start { text-align: center; padding-block: clamp(100px, 15vw, 200px); position: relative; overflow: hidden; }
.start h2 { font-size: clamp(54px, 13vw, 220px); line-height: 0.85; }
.start h2 span { display: block; }
.start h2 .s2 { color: var(--lime); text-shadow: 0 0 80px #c4f69a66; }
.start p { margin: 26px auto 0; max-width: 44ch; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); }
.start .btn { margin-top: 34px; font-size: clamp(16px, 1.6vw, 20px); padding: 22px 38px; }
.press { display: block; margin-top: 18px; font: 500 12px/1 var(--mono); color: var(--dim); animation: pulse 1.4s steps(1) infinite; }
.flash { position: fixed; inset: 0; z-index: 90; background: var(--lime); opacity: 0; pointer-events: none; }
footer { padding-block: 30px 60px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 13.5px; color: var(--dim); border-top: 1px solid #111a14; }

@media (max-width: 960px) {
  .zone, .boss { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rail { display: none; }
  .term-body { grid-template-columns: minmax(0, 1fr); }
  .term .out { border-left: 0; border-top: 1px solid #142017; }
}
@media (max-width: 560px) {
  .cpu { grid-template-columns: minmax(0, 1fr); }
  .decode { grid-template-columns: minmax(0, 1fr); }
  .nav .btn { display: none; }
  .hero h1 .l2 { -webkit-text-stroke-width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .prompt .dot, .press, .answer .caret { animation: none; }
  .btn { transition: none; }
}

.nav nav{display:flex;gap:10px;align-items:center;margin-left:auto}.nav nav .btn{white-space:nowrap}.nav nav .ghost{border-color:#303844}footer a{color:inherit}.press{color:inherit}@media(max-width:560px){.nav{padding:14px 12px;gap:8px}.nav .logo{font-size:14px;gap:7px;padding-right:10px}.nav nav{gap:6px}.nav nav .btn{display:inline-flex;font-size:10px;padding:10px}}