/* decompdecomp · "Marked listing". Every value comes from build/tokens.css. */
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-400_800.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------------------------------------------------------------- craft floor */
:root {
  color-scheme: light dark;
  accent-color: var(--color-action-primary);
  caret-color: var(--color-action-primary);
  scrollbar-color: var(--color-border-strong) transparent;
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
  --page: var(--space-margin-page);
  --rule: var(--border-width-hairline) solid var(--color-border-subtle);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-wrap: break-word; scroll-padding-top: var(--space-6); }
body {
  margin: 0; background: var(--color-surface-base); color: var(--color-text-primary);
  font-family: var(--typography-body-family); font-size: var(--typography-body-size);
  line-height: var(--typography-body-lh); font-stretch: 100%;
}
h1, h2, h3, p, ol, ul, figure, pre, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }
a { color: var(--color-text-link); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
code, pre { font-family: var(--typography-code-family); }
::selection { background: var(--color-selection); color: var(--color-mark-text); }
:focus-visible { outline: var(--border-width-strong) solid var(--color-focus); outline-offset: var(--space-1); border-radius: var(--radius-1); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: var(--space-5); top: calc(-1 * var(--space-13)); z-index: var(--z-overlay); background: var(--color-mark-fill); color: var(--color-mark-text); padding: var(--space-4) var(--space-6); }
.skip:focus { top: var(--space-5); }

/* ---------------------------------------------------------------- shared pieces */
.eyebrow { font-family: var(--typography-code-family); font-size: var(--typography-caption-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
h2 { font-size: var(--typography-h1-size); font-weight: var(--typography-h1-weight); line-height: var(--typography-h1-lh); letter-spacing: var(--typography-h1-tracking); font-stretch: 112%; text-wrap: balance; }
p { text-wrap: pretty; }
mark, .hl-word, .score {
  background: var(--color-mark-fill); color: var(--color-mark-text); padding: 0 0.12em;
}
.btn {
  display: inline-flex; align-items: center; min-height: var(--size-control-lg); padding: 0 var(--space-8);
  background: var(--button-primary-bg); color: var(--button-primary-fg); font-weight: 650; text-decoration: none;
  border-radius: var(--radius-control); transition: background var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--button-primary-bg-hover); }
.btn:active { background: var(--button-primary-bg-pressed); }
.btn-small { min-height: var(--size-control-sm); padding: 0 var(--space-6); }
.link-arrow { font-weight: 600; color: var(--color-text-primary); }
.link-arrow::after { content: " ↓"; }
.copy {
  flex: none; min-height: var(--size-control-sm); min-width: var(--size-target-min); padding: 0 var(--space-5);
  border: var(--border-width-hairline) solid var(--color-border-strong); border-radius: var(--radius-control);
  background: var(--color-surface-base); font-size: var(--typography-label-size); font-weight: 600;
}
.copy:hover { background: var(--color-action-secondary-hover); }
.cmd {
  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border: var(--border-width-hairline) solid var(--color-text-primary); border-radius: var(--radius-card);
  background: var(--color-surface-raised);
}
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--typography-code-size); scrollbar-width: thin; }

/* ---------------------------------------------------------------- header */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding: var(--space-6) var(--page); max-width: var(--size-content-max); margin: 0 auto;
}
.mark { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--color-text-primary); text-decoration: none; font-weight: 750; font-stretch: 112%; letter-spacing: -0.01em; }
.mark svg { width: 32px; height: 25px; fill: var(--color-text-primary); }
.mark svg .hl { fill: var(--color-mark-fill); }
.mark svg .on-hl { fill: var(--color-mark-text); }
.mark em { font-style: normal; background: var(--color-mark-fill); color: var(--color-mark-text); padding: 0 0.1em; }
.top nav { display: flex; align-items: center; gap: var(--space-7); font-size: var(--typography-label-size); font-weight: 600; }
.top nav a:not(.btn) { color: var(--color-text-primary); text-decoration: none; }
.top nav a:not(.btn):hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 1 · poster */
.poster { max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-6) var(--page) var(--space-13); }
.bytes { margin: var(--space-6) calc(-1 * var(--page)) 0 0; overflow: hidden; }
.bytes-rows {
  display: grid; font-family: var(--typography-code-family); font-weight: 600;
  font-size: clamp(3rem, 2.6rem + 7.4vw, 9.2rem); line-height: 0.98; letter-spacing: -0.04em;
  white-space: nowrap; color: var(--color-text-primary);
}
.bytes-rows span + span { color: var(--color-border-strong); }
.hl-word { position: relative; background: none; color: var(--color-mark-text); }
.hl-word::before {
  content: ""; position: absolute; inset: 16% -0.1em 8% -0.06em; z-index: -1; background: var(--color-mark-fill);
  clip-path: polygon(0.6% 6%, 99% 0, 100% 91%, 1.4% 100%); rotate: -1.2deg;
  transform-origin: left center; animation: draw var(--duration-slower) var(--ease-emphasized) 240ms both;
}
.bytes-rows span:first-child { position: relative; z-index: 0; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bytes { position: relative; }

.bytes .addr { font-family: var(--typography-code-family); color: var(--color-text-primary); }
.claim-row { display: grid; gap: var(--space-8); margin-top: var(--space-8); align-items: end; }
h1 {
  font-size: var(--typography-display-size); font-weight: var(--typography-display-weight);
  line-height: var(--typography-display-lh); letter-spacing: var(--typography-display-tracking);
  font-stretch: 125%; text-wrap: balance; max-width: 12ch;
}
.lede { font-size: var(--typography-body-lg-size); line-height: var(--typography-body-lg-lh); color: var(--color-text-secondary); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-top: var(--space-8); }
@media (min-width: 905px) {
  .claim-row { grid-template-columns: minmax(min-content, 1.7fr) minmax(16rem, 1fr); margin-top: var(--space-6); }
}

/* ---------------------------------------------------------------- 2 · check */
.check {
  max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-13) var(--page);
  border-top: var(--border-width-strong) solid var(--color-text-primary);
}
.check-head { display: grid; gap: var(--space-5); }
.check-head h2 { font-size: var(--typography-h2-size); line-height: var(--typography-h2-lh); }
@media (min-width: 905px) { .check-head { max-width: none; grid-template-columns: 1fr 2fr; align-items: baseline; } }
.platforms { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
.platforms label, .os label { position: relative; }
.platforms input, .os input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.platforms span, .os span {
  display: inline-flex; align-items: center; min-height: var(--size-control-md); padding: 0 var(--space-6);
  border: var(--border-width-hairline) solid var(--color-border-strong); border-radius: var(--radius-control);
  font-weight: 600; font-size: var(--typography-label-size); transition: background var(--duration-fast) var(--ease-standard);
}
.platforms label:hover span, .os label:hover span { background: var(--color-action-secondary); }
.platforms input:checked + span, .os input:checked + span { background: var(--color-mark-fill); color: var(--color-mark-text); border-color: var(--color-text-primary); }
.platforms input:focus-visible + span, .os input:focus-visible + span { outline: var(--border-width-strong) solid var(--color-focus); outline-offset: var(--space-1); }
.os small { font-weight: 400; margin-left: var(--space-3); color: inherit; opacity: 0.8; }

.answer { display: block; margin-top: var(--space-8); font-size: var(--typography-body-lg-size); font-weight: 650; }
.answer::before { content: "→ "; }
.pipelines { margin-top: var(--space-9); display: grid; gap: var(--space-12); }
.js .pipeline:not(.on) { display: none; }
.pipeline h3 { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; font-size: var(--typography-h3-size); font-weight: var(--typography-h3-weight); }
.status { font-family: var(--typography-code-family); font-size: var(--typography-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-1) var(--space-4); border-radius: var(--radius-1); }
.status.rec { background: var(--color-status-success-surface); color: var(--color-status-success-text); }
.status.beta { border: var(--border-width-hairline) solid var(--color-border-strong); color: var(--color-text-secondary); }
.stations { counter-reset: st; display: grid; gap: 0; margin-top: var(--space-8); }
.stations li {
  position: relative; display: grid; gap: var(--space-2); padding: var(--space-6) 0 var(--space-6) var(--space-11);
  border-left: var(--border-width-strong) solid var(--color-text-primary);
}
.stations li::before {
  counter-increment: st; content: "0" counter(st); position: absolute; left: calc(-1 * var(--space-6) - var(--border-width-strong) / 2);
  top: var(--space-6); width: var(--space-10); height: var(--space-10); display: grid; place-items: center;
  background: var(--color-surface-base); border: var(--border-width-strong) solid var(--color-text-primary); border-radius: var(--radius-1);
  font-family: var(--typography-code-family); font-size: var(--typography-caption-size); font-weight: 600;
}
.stations li:last-child { border-left-color: transparent; }
.stations li:last-child::before { background: var(--color-mark-fill); color: var(--color-mark-text); }
.stations small { font-family: var(--typography-code-family); font-size: var(--typography-caption-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.stations b { font-size: var(--typography-h3-size); font-weight: 750; font-stretch: 112%; line-height: 1.15; }
.stations span { font-size: var(--typography-body-sm-size); color: var(--color-text-secondary); max-width: 34ch; }
@media (min-width: 905px) {
  .stations { grid-template-columns: repeat(5, 1fr); }
  .stations li { padding: var(--space-12) var(--space-6) 0 0; border-left: 0; border-top: var(--border-width-strong) solid var(--color-text-primary); }
  .stations li:last-child { border-top-color: transparent; }
  .stations li::before { left: 0; top: calc(-1 * var(--space-6) - var(--border-width-strong) / 2); }
}
/* the highlighter carries your file along the rail, one station after another (the hero's stroke, again) */
.stations li::after {
  content: ""; position: absolute; left: calc(-1 * var(--border-width-strong)); top: 0; bottom: 0; width: calc(var(--border-width-strong) * 3);
  background: var(--color-mark-fill); transform-origin: top; transform: scaleY(0); z-index: -1;
}
.stations li:last-child::after { display: none; }
.stations { position: relative; z-index: 0; }
.js .pipeline.on .stations li::after { animation: rail-y var(--duration-slow) var(--ease-standard) both; }
.js .pipeline.on .stations li:nth-child(2)::after { animation-delay: 120ms; }
.js .pipeline.on .stations li:nth-child(3)::after { animation-delay: 240ms; }
.js .pipeline.on .stations li:nth-child(4)::after { animation-delay: 360ms; }
@keyframes rail-y { to { transform: scaleY(1); } }
@keyframes rail-x { to { transform: scaleX(1); } }
.js .pipeline.on .stations li { animation: rise var(--duration-slow) var(--ease-decelerate) both; }
.js .pipeline.on .stations li:nth-child(2) { animation-delay: 40ms; }
.js .pipeline.on .stations li:nth-child(3) { animation-delay: 80ms; }
.js .pipeline.on .stations li:nth-child(4) { animation-delay: 120ms; }
.js .pipeline.on .stations li:nth-child(5) { animation-delay: 160ms; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--space-3)); } }
.tell { margin-top: var(--space-11); max-width: 44rem; }
.tell-label, .step-n { font-family: var(--typography-code-family); font-size: var(--typography-caption-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.tell-line { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); border: var(--border-width-strong) solid var(--color-text-primary); border-radius: var(--radius-card); }
.tell-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--typography-body-size); font-weight: 600; }
.fineprint { margin-top: var(--space-9); font-size: var(--typography-body-sm-size); color: var(--color-text-secondary); max-width: 70ch; }

/* ---------------------------------------------------------------- 3 · proof */
.proof { max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-13) var(--page); display: grid; gap: var(--space-11); border-top: var(--rule); }
.proof-head { display: grid; gap: var(--space-7); max-width: 40rem; }
.proof-head p { color: var(--color-text-secondary); }
.proof-head mark { color: var(--color-mark-text); font-weight: 650; }
.listing { display: grid; gap: var(--space-6); }
.pane { border-top: var(--border-width-strong) solid var(--color-text-primary); padding-top: var(--space-5); }
.pane-label { display: flex; justify-content: space-between; gap: var(--space-5); font-family: var(--typography-code-family); font-size: var(--typography-caption-size); letter-spacing: 0.04em; color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.pane-label span { color: var(--color-text-primary); }
.pane pre { font-size: var(--typography-code-size); line-height: var(--typography-code-lh); overflow-x: auto; }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); font-size: var(--typography-body-sm-size); color: var(--color-text-secondary); }
.verdict .score { font-family: var(--typography-code-family); font-weight: 600; font-size: var(--typography-h2-size); color: var(--color-mark-text); letter-spacing: -0.02em; }
@media (min-width: 905px) {
  .proof { grid-template-columns: 5fr 7fr; align-items: start; }
  .listing { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-9) var(--space-8); }
  .verdict { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- 4 · yours (the colour field) */
.yours { background: var(--color-mark-fill); color: var(--color-mark-text); padding: var(--space-14) var(--page); }
.yours > * { max-width: var(--size-content-max); margin-inline: auto; }
.yours h2 { font-size: var(--typography-display-size); line-height: var(--typography-display-lh); font-stretch: 125%; font-weight: 800; letter-spacing: var(--typography-display-tracking); }
.yours-list { display: grid; gap: var(--space-9); margin-top: var(--space-11); align-items: start; }
.yours-list li { display: grid; align-content: start; gap: var(--space-4); font-size: var(--typography-body-lg-size); line-height: 1.45; max-width: 52ch; padding-top: var(--space-6); border-top: var(--border-width-strong) solid var(--color-mark-text); }
.yours-list b { display: block; font-size: var(--typography-h2-size); line-height: 1.05; font-weight: 800; font-stretch: 118%; letter-spacing: -0.02em; }
.yours-note { margin-top: var(--space-11); font-size: var(--typography-body-sm-size); }
@media (min-width: 905px) {
  .yours-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-9); }
  .yours-list li:nth-child(2) { margin-top: var(--space-12); }
  .yours-list li:nth-child(3) { margin-top: calc(2 * var(--space-12)); }
}

/* ---------------------------------------------------------------- 5 · start */
.start { max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-14) var(--page) var(--space-13); }
.start h2 { font-size: var(--typography-display-size); line-height: var(--typography-display-lh); font-stretch: 125%; font-weight: 800; }
.steps { display: grid; gap: var(--space-11); margin-top: var(--space-11); }
.step { display: grid; gap: var(--space-5); align-content: start; }
.os { display: flex; gap: var(--space-3); }
.js .cmd[data-os]:not(.on) { display: none; }
.step-note { font-size: var(--typography-body-sm-size); color: var(--color-text-secondary); }
.step-note code { font-size: 0.95em; }
@media (min-width: 905px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--space-11); } }

/* ---------------------------------------------------------------- footer */
.foot { max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-10) var(--page) var(--space-12); border-top: var(--rule); display: grid; gap: var(--space-6); font-size: var(--typography-body-sm-size); color: var(--color-text-secondary); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); font-weight: 600; }
.foot nav a { color: var(--color-text-primary); }
.foot-small { font-size: var(--typography-caption-size); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 600px) {
  .top nav a:not(.btn) { display: none; }
  .bytes-rows span { white-space: normal; }
  .bytes-rows span:nth-child(2), .bytes-rows i { display: none; }
  h1 { font-size: 2.75rem; font-stretch: 112%; }
  .cmd code { white-space: normal; overflow-wrap: anywhere; }
  .pane pre { font-size: var(--typography-body-sm-size); }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
  .stations li::after { transform: none; }
}
@media print { .top nav, .platforms, .copy { display: none; } }
/* grid items may shrink below their longest line of code (pre and code scroll inside instead) */
.claim-side, .check-head > *, .proof > *, .listing > *, .steps > *, .step > *, .yours-list > *, .tell > * { min-width: 0; }

/* the rail runs across on wide screens (after the base rule, so it wins) */
@media (min-width: 905px) {
  .stations li::after { left: 0; right: 0; top: calc(-1 * var(--border-width-strong) * 2); bottom: auto; width: auto;
    height: calc(var(--border-width-strong) * 3); transform-origin: left; transform: scaleX(0); }
  .js .pipeline.on .stations li::after { animation-name: rail-x; }
}

/* ---------------------------------------------------------------- privacy, 404 */
.doc { max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-11) var(--page) var(--space-13); }
.doc > * { max-width: var(--size-measure-max); }
.doc h1 { font-size: var(--typography-h1-size); max-width: none; margin: var(--space-5) 0 var(--space-10); }
.doc h2 { font-size: var(--typography-h3-size); font-stretch: 112%; margin: var(--space-10) 0 var(--space-5); }
.doc p, .doc li { color: var(--color-text-secondary); }
.doc ul { list-style: disc; padding-left: var(--space-8); display: grid; gap: var(--space-4); }
.doc .updated { margin-top: var(--space-10); font-size: var(--typography-caption-size); }
.nf { min-height: 100vh; display: grid; place-content: center start; gap: var(--space-7); padding: var(--space-12) var(--page); max-width: var(--size-content-max); margin: 0 auto; }
.nf h1 { max-width: 14ch; }
.nf .btn { justify-self: start; }