:root {
  --canvas: #12110e;
  --surface: #1b1a16;
  --ink: #f3f1ea;
  --body: #c9c5b9;
  --muted: #8f8b80;
  --line: #2d2b25;
  --green: #35c27a;
  --yellow: #f2c230;
  --red: #ef4b3f;
  --violet: #9b7bff;
  --off: #2a2823;
  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.65, 0.05, 0, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--body);
  font: 400 17px/1.55 var(--display); font-stretch: 100%;
}
a { color: var(--ink); }
button { font: inherit; cursor: pointer; }
h1, h2 { color: var(--ink); margin: 0; }
h2 { font-size: 22px; font-weight: 700; font-stretch: 85%; letter-spacing: -0.01em; }

.bar, main, .foot { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.bar { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; }
.brand { text-decoration: none; font-weight: 800; font-stretch: 75%; font-size: 20px; color: var(--ink); }
.brand span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.pass-link { font-size: 15px; color: var(--yellow); text-decoration: none; }
.pass-link:hover { text-decoration: underline; }

/* Hero: the verdict for one sprint */
.hero { padding: 40px 0 56px; border-bottom: 1px solid var(--line); }
.ask { margin: 0 0 4px; font-size: clamp(20px, 3vw, 28px); font-stretch: 90%; color: var(--ink); max-width: 30ch; line-height: 1.2; }
.answer {
  font-size: clamp(96px, 22vw, 240px); line-height: 0.86; font-weight: 900; font-stretch: 62%;
  letter-spacing: -0.02em; margin: 8px 0 24px;
}
.hero[data-v="go"] .answer { color: var(--green); }
.hero[data-v="highlights"] .answer { color: var(--yellow); }
.hero[data-v="skip"] .answer { color: var(--muted); }
.meter { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.revs { display: grid; grid-template-columns: repeat(15, 1fr); gap: 6px; width: min(460px, 100%); }
.revs i {
  aspect-ratio: 1; border-radius: 50%; background: var(--off);
  transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.revs i.on { box-shadow: 0 0 12px -2px currentColor; background: currentColor; }
.revs i:nth-child(-n+5) { color: var(--green); }
.revs i:nth-child(n+6):nth-child(-n+10) { color: var(--red); }
.revs i:nth-child(n+11) { color: var(--violet); }
.score { margin: 0; font-family: var(--mono); color: var(--muted); font-size: 18px; }
.score b { color: var(--ink); font-size: 30px; font-weight: 500; }
.line { color: var(--ink); font-size: 20px; margin: 18px 0 14px; }
.tags { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 5px 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); font-size: 15px; color: var(--body); }
.spoiler { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 44px; }
.ghost {
  background: none; color: var(--ink); border: 0; box-shadow: 0 0 0 1px var(--line);
  border-radius: 8px; padding: 10px 16px; min-height: 44px; transition: box-shadow 160ms ease-out;
}
.ghost:hover { box-shadow: 0 0 0 1px var(--muted); }
.podium { margin: 0; font-family: var(--mono); color: var(--ink); }

/* Pit wall pass */
.pass { padding: 48px 0; border-bottom: 1px solid var(--line); }
.pass-head { display: grid; gap: 6px; margin-bottom: 24px; }
.pass-head p { margin: 0; max-width: 60ch; }
.laps { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.laps .lap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; position: relative; padding-bottom: 22px; }
.laps .lap b { width: 100%; background: var(--ink); opacity: 0.25; border-radius: 3px 3px 0 0; min-height: 2px; }
.laps .lap.hot b { background: var(--yellow); opacity: 1; }
.laps .lap span { position: absolute; bottom: 0; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--muted); }
.stretch { margin: 16px 0 0; color: var(--ink); }
.pass.locked .laps, .pass.locked .stretch { filter: blur(7px); opacity: 0.5; pointer-events: none; user-select: none; }
.lock { margin-top: 20px; display: grid; gap: 14px; max-width: 560px; }
.lock p { margin: 0; }
.pass:not(.locked) .lock { display: none; }
.lock-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.buy {
  background: var(--yellow); color: #17150f; text-decoration: none; font-weight: 700;
  padding: 11px 18px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; gap: 0.3em;
}
.buy:hover { background: #ffd34d; }

/* Season list, laid out like a timing tower */
.list { padding: 48px 0; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.years { display: flex; gap: 4px; }
.years button {
  background: none; border: 0; color: var(--muted); font-family: var(--mono); font-size: 15px;
  padding: 8px 12px; border-radius: 6px; min-height: 40px;
}
.years button[aria-selected="true"] { color: var(--ink); background: var(--surface); }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 14px 10px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 4px;
}
.row:hover, .row:focus-visible { background: var(--surface); outline: none; }
.row[aria-current="true"] { background: var(--surface); }
.row .n { font-family: var(--mono); color: var(--muted); font-size: 14px; }
.row .where { color: var(--ink); font-weight: 600; font-stretch: 90%; }
.row .when { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
.row .mini { display: grid; grid-template-columns: repeat(15, 7px); gap: 3px; }
.row .mini i { width: 7px; height: 7px; border-radius: 50%; background: var(--off); }
.row .mini i.on:nth-child(-n+5) { background: var(--green); }
.row .mini i.on:nth-child(n+6):nth-child(-n+10) { background: var(--red); }
.row .mini i.on:nth-child(n+11) { background: var(--violet); }
.row .v { font-family: var(--mono); font-size: 14px; min-width: 7.5rem; text-align: right; }
.row .v[data-v="go"] { color: var(--green); }
.row .v[data-v="highlights"] { color: var(--yellow); }
.row .v[data-v="skip"], .row .v[data-v="later"] { color: var(--muted); }
.row.later { cursor: default; }
.row.later:hover { background: none; }
.status { color: var(--muted); font-size: 14px; min-height: 1.5em; }

.how { padding: 40px 0 56px; border-top: 1px solid var(--line); }
.how p { max-width: 68ch; margin: 10px 0 0; }
.foot { padding-block: 24px 40px; color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  .hero { padding-top: 24px; }
  .revs { gap: 4px; }
  .row { grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 10px; }
  .row .mini { display: none; }
  .row .v { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }