:root {
  --bg: #05070b;
  --surface: #0b0e14;
  --card: #0d1118;
  --card-edge: rgba(255, 255, 255, 0.06);
  --ink: #e8ecf3;
  --ink-2: #9aa5b5;
  --ink-3: #5c6675;
  --green: #4ade80;
  --purple: #a78bfa;
  --blue: #38bdf8;
  --orange: #fbbf24;
  --red: #f87171;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 0 20px 80px;
}

.hero { max-width: 880px; margin: 0 auto; padding: 64px 0 40px; text-align: center; }
.hero h1 { font-size: 40px; letter-spacing: -0.02em; }
.hero p { color: var(--ink-2); margin-top: 10px; }

.algo, .stand {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
}

.algo h2, .stand h2 { font-size: 22px; letter-spacing: -0.01em; }
.blurb, .stand-sub { color: var(--ink-2); margin-top: 6px; }

.badges { display: flex; gap: 8px; margin: 14px 0 18px; }
.badge {
  font: 600 12px/1 var(--mono);
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.badge.time { color: var(--blue); }
.badge.space { color: var(--green); }

.stage { display: block; width: 100%; height: 220px; }

.caption {
  font: 600 14px/1 var(--mono);
  color: var(--orange);
  text-align: center;
  min-height: 20px;
  margin: 12px 0;
}

.code {
  background: var(--surface);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 14px 0;
  overflow-x: auto;
  font: 13px/1.55 var(--mono);
}
.code-line { padding: 0 16px; white-space: pre; }
.code-line.on { background: rgba(74, 222, 128, 0.12); box-shadow: inset 3px 0 0 var(--green); }
.ln { display: inline-block; width: 2.2em; color: var(--ink-3); user-select: none; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.controls button, .controls select, #race-restart {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 7px 12px;
  font: 500 13px var(--mono);
  cursor: pointer;
}
.controls button:hover, #race-restart:hover { border-color: var(--blue); color: var(--blue); }
.controls label { color: var(--ink-2); font-size: 13px; display: flex; gap: 6px; align-items: center; }

#race { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.race-cell { background: var(--surface); border: 1px solid var(--card-edge); border-radius: 10px; padding: 10px; }
.race-cell h3 { font: 600 12px var(--mono); color: var(--ink-2); margin-bottom: 6px; }
.race-cell canvas { display: block; width: 100%; height: 110px; }
.race-cell.done h3 { color: var(--green); }

#race-table { width: 100%; border-collapse: collapse; font: 13px var(--mono); margin-bottom: 16px; }
#race-table th, #race-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--card-edge); }
#race-table th { color: var(--ink-3); font-weight: 600; }

footer { max-width: 880px; margin: 40px auto 0; text-align: center; color: var(--ink-3); }
footer p { margin: 0; }
footer p + p { margin-top: 6px; }
footer a { color: var(--blue); }

@media (max-width: 700px) {
  #race { grid-template-columns: repeat(2, 1fr); }
  .algo, .stand { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}