/* Neural Maze — retro terminal lab. Green phosphor, with cyan / amber / magenta accents. */
:root {
  --bg: #040704;
  --surface: #0a110a;
  --surface-2: #0f190f;
  --ink: #c2ffd0;
  --ink-soft: #58b46e;
  --line: #1c321c;
  --accent: #00ff41;
  --accent-ink: #021a08;
  --cyan: #22d3ee;
  --warn: #ffcc00;
  --pink: #ff4fa3;
  --error: #ff4d6d;

  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: var(--font-mono);
  --font-text: var(--font-mono);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% -10%, #0c1c0c 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1700px; margin-inline: auto; padding-inline: var(--space-3); }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-3); }
.skip:focus { left: 0; z-index: 60; }

/* CRT overlay */
.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.12) 50%);
  background-size: 100% 3px;
  pointer-events: none;
  z-index: 40;
}
.crt::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 41;
}

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: rgba(10, 17, 10, 0.92); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(4px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 0.55rem; flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: 0.14em; color: var(--accent); text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand span { color: var(--warn); }
.site-nav { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.site-nav a { color: var(--ink-soft); padding: 0.2rem 0; border-bottom: 2px solid transparent; font-size: 0.88rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.site-nav .mute { padding: 0.2rem 0.6rem; font-size: 0.78rem; color: var(--ink-soft); cursor: pointer; }
.site-nav .mute:hover { color: var(--accent); border-color: var(--accent); }

.site-footer { margin-top: auto; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.78rem; padding-block: var(--space-3); }
.site-footer p { margin: 0; }

/* Buttons and fields */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  padding: 0.55rem 0.95rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em;
  cursor: pointer; text-decoration: none; min-height: 40px;
}
.button:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 14px rgba(0, 255, 65, 0.25); }
.button.primary:hover { filter: brightness(1.12); color: var(--accent-ink); }
.button.warn { border-color: var(--warn); color: var(--warn); }
.button:disabled { opacity: 0.4; cursor: not-allowed; }
.button.small { min-height: 32px; padding: 0.3rem 0.6rem; font-size: 0.75rem; }

.label { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.2rem; }
.label .g { text-transform: none; }
.label .val { color: var(--accent); font-variant-numeric: tabular-nums; }
.hint { font-size: 0.72rem; color: #3f8a52; margin: 0.15rem 0 0; line-height: 1.35; }
.field { width: 100%; background: #050a05; border: 1px solid var(--line); padding: 0.45rem 0.55rem; font-size: 0.85rem; min-height: 36px; }
.field:focus { border-color: var(--accent); }
select.field option { background: #050a05; }
.range { width: 100%; accent-color: var(--accent); min-height: 26px; }

/* Panels */
.panel { border: 1px solid var(--line); background: var(--surface); }
.panel-header { border-bottom: 1px solid var(--line); padding: 0.45rem 0.7rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-soft); text-transform: uppercase; background: #0c150c; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.panel-header::before { content: "┌─ "; color: #2a5a35; font-weight: 400; margin-right: -0.4rem; }
.panel-body { padding: 0.7rem; }
.stack { display: grid; gap: 0.75rem; }

/* Lab layout */
.lab {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 350px;
  grid-template-areas: "ctrl stage data";
  gap: var(--space-3);
  padding: var(--space-3);
  max-width: 1700px;
  width: 100%;
  margin-inline: auto;
  align-items: start;
}
.col-ctrl { grid-area: ctrl; }
.col-stage { grid-area: stage; display: grid; gap: 0.7rem; min-width: 0; }
.col-data { grid-area: data; display: grid; gap: var(--space-3); min-width: 0; }

@media (max-width: 1150px) {
  .lab { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "stage data" "ctrl data"; }
}
@media (max-width: 780px) {
  .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "ctrl" "data"; padding: 0.6rem; }
  .wrap { padding-inline: 0.6rem; }
}

/* Stat chips */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0.4rem; }
.chip { border: 1px solid var(--line); background: var(--surface); padding: 0.3rem 0.5rem; }
.chip .k { display: block; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; }
.chip .v { font-size: 1.05rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.chip.cy .v { color: var(--cyan); }
.chip.am .v { color: var(--warn); }

/* Missions */
.missions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mission { flex: 1 1 150px; border: 1px dashed #2a4a2f; padding: 0.35rem 0.55rem; font-size: 0.74rem; color: #3f8a52; display: flex; gap: 0.5rem; align-items: center; }
.mission .box { width: 14px; height: 14px; border: 1px solid currentColor; display: inline-grid; place-items: center; font-size: 11px; line-height: 1; flex: none; }
.mission.done { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(0, 255, 65, 0.07); }
.mission.done .box::after { content: "✓"; }
.mission small { display: block; color: inherit; opacity: 0.75; }

/* Maze stage */
.stage-wrap { display: grid; place-items: center; }
.stage {
  position: relative;
  width: min(100%, max(300px, calc(100dvh - 330px)));
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: #030503;
  box-shadow: 0 0 40px rgba(0, 255, 65, 0.07), inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.stage canvas { width: 100%; height: 100%; display: block; touch-action: manipulation; }
.stage.flash { animation: flash 0.5s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 60px rgba(255, 204, 0, 0.6); } 100% { box-shadow: 0 0 40px rgba(0, 255, 65, 0.07); } }
.badge-overlay { position: absolute; top: 8px; left: 8px; font-size: 0.7rem; background: rgba(3, 5, 3, 0.8); border: 1px solid var(--line); padding: 0.15rem 0.45rem; color: var(--ink-soft); pointer-events: none; }

.report {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0.8rem;
  background: rgba(2, 6, 2, 0.82); backdrop-filter: blur(2px); z-index: 5;
}
.report[hidden] { display: none; }
.report-card { border: 1px solid var(--accent); background: var(--surface); padding: 1rem 1.1rem; max-width: 380px; width: 100%; box-shadow: 0 0 30px rgba(0, 255, 65, 0.25); text-align: center; animation: pop 0.35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.report-card h2 { margin: 0 0 0.2rem; font-size: 0.95rem; letter-spacing: 0.14em; color: var(--warn); }
.grade { font-size: 4rem; line-height: 1; font-weight: 900; color: var(--accent); text-shadow: 0 0 20px rgba(0, 255, 65, 0.6); margin: 0.2rem 0; }
.report-card p { margin: 0.2rem 0; font-size: 0.8rem; }
.report-card .row { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-top: 0.7rem; }

/* Layer toggles + legend */
.layers { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.toggle { position: relative; }
.toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.toggle span { display: block; border: 1px solid var(--line); padding: 0.3rem 0.65rem; font-size: 0.75rem; color: var(--ink-soft); min-height: 32px; display: flex; align-items: center; }
.toggle input:checked + span { border-color: var(--accent); color: var(--accent); background: rgba(0, 255, 65, 0.08); }
.toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.72rem; color: var(--ink-soft); align-items: center; }
.legend i { display: inline-block; width: 18px; height: 4px; margin-right: 0.35rem; vertical-align: middle; }
.legend .heatbar { width: 70px; height: 8px; background: linear-gradient(90deg, hsl(262 75% 11%), hsl(220 75% 18%), hsl(160 75% 24%), hsl(100 75% 30%), hsl(57 75% 37%)); border: 1px solid var(--line); display: inline-block; vertical-align: middle; margin-inline: 0.3rem; }

/* Transport */
.transport { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.transport .speed { flex: 1 1 180px; min-width: 150px; }
.transport .speed .label { margin: 0; }
.kbd { font-size: 0.68rem; color: #3f8a52; }

/* Inspector */
.inspector { font-size: 0.78rem; }
.inspector .qrow { display: grid; grid-template-columns: 4.6rem 1fr 3.8rem; gap: 0.4rem; align-items: center; margin: 0.15rem 0; }
.inspector .bar { height: 7px; background: #0b140b; border: 1px solid var(--line); position: relative; }
.inspector .bar b { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink-soft); }
.inspector .qrow.best .bar b { background: var(--accent); }
.inspector .qrow.wall { opacity: 0.45; }
.inspector .num { text-align: right; font-variant-numeric: tabular-nums; }
.inspector p { margin: 0 0 0.3rem; color: var(--ink-soft); }

/* Presets */
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.preset { border: 1px solid var(--line); background: var(--surface-2); padding: 0.35rem 0.5rem; text-align: left; cursor: pointer; font-size: 0.74rem; line-height: 1.25; }
.preset:hover { border-color: var(--accent); }
.preset b { display: block; color: var(--pc, var(--accent)); }
.preset span { color: var(--ink-soft); font-size: 0.66rem; }

/* Terminal */
.terminal { font-size: 0.74rem; line-height: 1.35; height: 190px; overflow: auto; white-space: pre-wrap; padding: 0.5rem 0.7rem; }
.term-line { margin: 0.1rem 0; }
.term-time { color: #2f7a43; user-select: none; }
.term-msg { color: var(--ink); }
.term-ok { color: #4dff88; }
.term-warn { color: var(--warn); }
.term-err { color: var(--error); }
.term-info { color: var(--cyan); }

.chart-box { display: block; width: 100%; height: 118px; }
.chart-stack { display: grid; gap: 0.5rem; }

.blink { animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Page text blocks (tutorial) */
.page { max-width: 860px; margin: 0 auto; padding: var(--space-3); width: 100%; }
.page h1 { font-size: 1.35rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0.5rem 0 0.75rem; color: var(--accent); text-shadow: 0 0 10px rgba(0, 255, 65, 0.4); }
.step { border: 1px solid var(--line); background: var(--surface); padding: var(--space-3); margin-bottom: var(--space-3); }
.step h2 { margin: 0 0 0.4rem; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--warn); text-transform: uppercase; }
.step p, .step li { font-size: 0.86rem; margin: 0.4rem 0; }
.step ul { padding-left: 1.2rem; }
.key { color: var(--warn); }
.cy { color: var(--cyan); }
.gr { color: #4dff88; }
.rd { color: var(--error); }
.swatch { display: inline-block; width: 1rem; height: 0.7rem; margin-right: 0.4rem; vertical-align: middle; border: 1px solid var(--line); }
.two { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.demo-stage { width: min(100%, 360px); aspect-ratio: 1; border: 1px solid var(--line); background: #030503; margin: 0.5rem auto; }
.demo-stage canvas { width: 100%; height: 100%; display: block; }