/* The Loop: Thing 3's paper-and-ink lab-plate language (tokens from studio-site/css/styles.css).
   Strategy colours are validated against the paper (tests/palette.html); every coloured mark carries a text label. */
:root {
  --paper:    #F5F1E6;
  --card:     #FBF9F3;
  --stone:    #D9D0C3;
  --ink:      #141412;
  --charcoal: #2A2A28;
  --muted:    #5E5A52;
  --hair:     rgba(20, 20, 18, 0.16);
  --hair-2:   rgba(20, 20, 18, 0.08);
  --unknown:  #EAE3D4;
  --spectrum: linear-gradient(90deg, #4F46E5 0%, #1C8FE0 18%, #1FB59A 36%, #E8C93E 56%, #EE8A34 74%, #E2433F 100%);
  --s-random: #eb6834;   /* strategy A */
  --s-ai:     #2a78d6;   /* strategy B */
  --s-loop:   #1baf7a;   /* strategy C */
  --you:      #141412;
  --good: #23A88E; --mid: #E9A63A; --bad: #E8543A;              /* brand rays 3, 2, 1 */
  --good-ink: #157a66; --mid-ink: #9a6512; --bad-ink: #b63a24;  /* the same hues, darkened to read as text on paper */
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* paper grain, as on the homepage */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .08; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }

/* ---------- Frame ---------- */
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--hair-2);
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.mark { font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-transform: none; }
.mark .three { position: relative; top: -0.085em; margin-left: 0.015em; }
.progress { display: flex; gap: 14px; color: rgba(20,20,18,.3); font-size: 11px; }
.progress li.is-done { color: var(--muted); }
.progress li.is-now { color: var(--ink); }

main { padding: clamp(36px, 7vh, 80px) var(--gutter) 80px; }
.step { max-width: 760px; margin: 0 auto; animation: rise .8s var(--ease) both; }
.step.wide { max-width: 1240px; }
.step[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.label { display: flex; align-items: center; gap: 14px; color: var(--muted); margin-bottom: 22px; font-size: 11px; }
.label span { color: var(--ink); }
.label::after { content: ""; flex: 0 1 90px; height: 1px; background: currentColor; opacity: .5; }
.display { font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.03; letter-spacing: -0.03em; max-width: 14em; }
.h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; max-width: 20em; }
.h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--charcoal); margin-top: 18px; max-width: 34em; }
.lede.narrow { max-width: 42em; }
.small { font-size: 13.5px; color: var(--muted); margin-top: 22px; }
.rule { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px; max-width: 520px; }
.rule-spectrum { width: 33%; height: 4px; background: var(--spectrum); filter: saturate(.9); }
.rule-line { flex: 1; height: 1px; background: var(--ink); opacity: .45; }

.btn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 32px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 999px;
  padding: 12px 22px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .2s var(--ease), background .2s, opacity .2s;
}
.btn::after { content: "→"; letter-spacing: 0; }
.btn:hover:not(:disabled) { transform: translateX(2px); }
.btn:disabled { opacity: .3; cursor: default; }
.btn[hidden], [hidden].run-end { display: none; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost::after { content: none; }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: inherit; font-size: inherit; }
.row { display: flex; align-items: baseline; gap: 22px; }

/* ---------- Scale ---------- */
.counter {
  font-size: clamp(28px, 8.4vw, 96px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; margin: 18px 0 4px;
  font-variant-numeric: tabular-nums;
}
.budget { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 14px 18px; border: 1px solid var(--hair); background: var(--card); max-width: 30em; }
.plate-icon {
  width: 42px; height: 28px; flex: none; border: 1px solid var(--ink); border-radius: 4px;
  background: radial-gradient(circle at center, var(--ink) 1.2px, transparent 1.6px) 0 0 / 5.25px 5.6px;
  opacity: .8;
}

/* ---------- Title: who it's for ---------- */
.mission { margin-top: 40px; padding: 16px 20px; border-left: 3px solid var(--ink); background: var(--card); max-width: 34em; font-size: 15.5px; }
.mission-k { color: var(--muted); font-size: 10.5px; margin-bottom: 6px; }
.mission b { font-weight: 600; }

/* ---------- Intro: the real world first ---------- */
.panel[hidden] { display: none; }
.panel { animation: rise .6s var(--ease) both; }
.art { position: relative; margin: 4px 0 26px; background: var(--card); border: 1px solid var(--hair); padding: 14px; max-width: 640px; }
.art svg, .art canvas { display: block; width: 100%; height: auto; }
.art canvas { aspect-ratio: 5 / 3; }
.art-3d { background: radial-gradient(ellipse at 50% 42%, #FFFDF8 0%, var(--card) 70%); }
.art-live { min-height: 2.9em; margin: 10px 2px 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.credit { font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-top: 14px; }
.swap-tag { position: absolute; transform: translate(26px, -230%); margin: 14px; font-size: 12px; font-weight: 500; padding: 2px 6px; background: var(--ink); color: var(--paper); pointer-events: none; white-space: nowrap; }
.swap-tag:empty { display: none; }
.meter-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.meter-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; }
.meter-track { flex: 1; height: 10px; border-radius: 5px; background: rgba(20,20,18,.08); overflow: hidden; }
.meter-track i { display: block; height: 100%; width: 50%; border-radius: 5px; background: #9a948a; transition: width .9s var(--ease), background-color .5s; }
.nbr { opacity: 0; margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 10px; font-size: 14px; }
.nbr p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0; }
.nbr p > span:last-child { flex: 1 1 15em; }
.nbr .ring { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); }
.nbr .ring.dash { border-style: dashed; }
.nbr .seq { font-family: var(--mono); font-size: 12px; display: flex; gap: 2px; }
.nbr .seq b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #E4DDCE; font-weight: 500; }
.nbr .seq b.diff { background: #E8543A; color: #fff; }
.nbr .nbr-note { display: block; font-size: 11.5px; color: var(--muted); }
.key { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 15.5px; padding: 12px 16px; border: 1px solid var(--hair); background: var(--card); max-width: 34em; }
.key b { font-weight: 600; }
.key-dot { width: 12px; height: 12px; border-radius: 50%; background: #3a3630; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px rgba(20,20,18,.2); flex: none; }
.panel-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.panel-nav .btn { margin-top: 0; }
.btn-back::before { content: "←"; letter-spacing: 0; }
.dots { color: var(--muted); font-size: 11px; margin-left: 6px; }

/* ---------- Commit and choose ---------- */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.choice {
  display: grid; align-content: start; gap: 8px; text-align: left; cursor: pointer;
  padding: 18px 18px 20px; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--c);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.choice:hover { transform: translateY(-2px); }
.choice[aria-checked="true"] { border-color: var(--ink); border-top-color: var(--c); box-shadow: 0 0 0 1px var(--ink); }
.choice-k { color: var(--muted); }
.choice-t { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.choice-d { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.confidence { margin-top: 28px; max-width: 360px; }
.q { font-weight: 500; }
.scale5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.scale5 button {
  padding: 9px 0; background: var(--card); border: 1px solid var(--hair); cursor: pointer; font-family: var(--mono); font-size: 13px;
}
.scale5 button[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scale-ends { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 10.5px; }
.options { display: grid; gap: 10px; margin-top: 24px; }
.option {
  text-align: left; padding: 15px 18px; background: var(--card); border: 1px solid var(--hair); cursor: pointer; font-size: 16.5px;
  transition: border-color .2s, box-shadow .2s;
}
.option[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.explain {
  display: block; width: 100%; margin-top: 24px; padding: 14px 16px; background: var(--card); border: 1px solid var(--hair);
  font: 17px/1.5 var(--sans); color: var(--ink); resize: vertical;
}
.explain:focus { outline: none; border-color: var(--ink); }

/* ---------- Run ---------- */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.lane {
  display: grid; align-content: start; gap: 12px; padding: 16px; background: var(--card);
  border: 1px solid var(--hair); border-top: 3px solid var(--c); transition: opacity .4s;
}
.lane.is-locked { opacity: .45; }
.lane.is-active { box-shadow: 0 0 0 1px var(--ink); }
.lane-h { display: flex; align-items: baseline; gap: 10px; }
.lane-k { color: var(--muted); }
.lane-h h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.lane-d { font-size: 14px; color: var(--muted); line-height: 1.4; margin-top: -4px; min-height: 2.8em; }
/* the live scoreboard, pinned to the bottom of the screen while the lanes run */
.scoreboard {
  position: sticky; bottom: 0; z-index: 20; margin-top: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 12px 18px;
  background: rgba(251,249,243,.96); border: 1px solid var(--ink); box-shadow: 0 -6px 24px rgba(20,20,18,.08);
  font-size: 14.5px;
}
.sb-k { color: var(--muted); font-size: 10.5px; }
.sb { display: inline-flex; align-items: center; gap: 8px; }
.sb b { font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.sb-bar { width: 70px; height: 5px; background: var(--hair-2); position: relative; }
.sb-bar i { position: absolute; inset: 0 auto 0 0; background: var(--c); transition: width .25s; }
.sb.is-live b { color: var(--c); filter: brightness(.8); }
.map { width: 100%; aspect-ratio: 5 / 3; display: block; border: 1px solid var(--hair-2); background: var(--unknown); }
.map-toggle { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); cursor: pointer; margin-top: -4px; }
.map-toggle input { accent-color: var(--ink); margin: 0; }
.lane-mid { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.plate { width: 132px; }
.plate svg { display: block; width: 100%; height: auto; }
.plate .p-label { font-family: var(--mono); font-size: 7px; letter-spacing: .1em; fill: var(--muted); }
.lane-stats { display: grid; gap: 6px; }
.lane-stats dt { font-size: 10px; color: var(--muted); }
.lane-stats dd { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.btn-lane { margin-top: 0; justify-self: start; }
.lane-note { font-size: 14px; color: var(--charcoal); line-height: 1.45; min-height: 3em; }

.chart-fig { margin-top: 18px; padding: 12px 18px 6px; background: var(--card); border: 1px solid var(--hair); }
/* Laptop and up: the chart is pinned to the bottom of the screen, so lanes and chart are all in view together */
@media (min-width: 921px) {
  .s-run .chart-fig { position: sticky; bottom: 0; z-index: 20; border-color: var(--ink); box-shadow: 0 -8px 28px rgba(20,20,18,.08); background: rgba(251,249,243,.97); }
  .s-run .scoreboard { display: none; }
  .s-run .chart-fig { padding: 8px 16px 4px; margin-top: 12px; }
  .lane { gap: 7px; padding: 12px 14px; }
  .lane .plate { width: 104px; }
  .lane-note { min-height: 2.9em; font-size: 13.5px; }
}
.chart-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; align-items: baseline; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--charcoal); }
.legend i { display: inline-block; width: 14px; height: 2px; background: var(--c); margin-right: -6px; vertical-align: middle; }
.chart { position: relative; margin-top: 8px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: rgba(20,20,18,.08); stroke-width: 1; }
.chart .axis { stroke: rgba(20,20,18,.3); stroke-width: 1; }
.chart .tick { font-family: var(--mono); font-size: 10px; fill: var(--muted); letter-spacing: .06em; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .end-label { font-size: 12.5px; fill: var(--ink); font-weight: 500; }
.chart .start-line { stroke: var(--muted); stroke-dasharray: 3 4; stroke-width: 1; }
.chart .hover-line { stroke: var(--ink); stroke-width: 1; opacity: .35; }
.tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); padding: 8px 10px; font-size: 12.5px; line-height: 1.5;
  white-space: nowrap; transform: translate(-50%, -110%); border-radius: 3px;
}
.tooltip b { font-weight: 500; }
.tooltip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.run-end { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.run-end .btn { margin-top: 18px; }

/* ---------- Close ---------- */
.recap { margin-top: 28px; display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--hair); background: var(--card); max-width: 36em; }
.recap .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.recap-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; }
.recap-row .bar { grid-column: 1 / -1; height: 6px; background: var(--hair-2); position: relative; }
.recap-row .bar i { position: absolute; inset: 0 auto 0 0; background: var(--c); }
.recap-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cta { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hair); }
.cta-k { color: var(--muted); font-size: 10.5px; }
.cta-t { font-size: 19px; margin-top: 8px; max-width: 30em; }

/* ---------- What this would tell you (mock report) ---------- */
.d-head .lede { max-width: 40em; }
.d-banner {
  margin-top: 26px; padding: 14px 18px; font-size: 14.5px; line-height: 1.5;
  border: 1px solid var(--ink); background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(20,20,18,.035) 9px 10px), var(--card);
}
.d-banner b { font-weight: 600; }
.d-card { margin-top: 18px; padding: 22px 24px; background: var(--card); border: 1px solid var(--hair); }
.d-k { color: var(--muted); font-size: 10.5px; }
.d-q { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.d-read { margin-top: 16px; font-size: 15.5px; color: var(--charcoal); max-width: 46em; }
.d-read b { font-weight: 600; color: var(--ink); }
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: start; margin-top: 14px; }
.ba-arrow { font-size: 34px; color: var(--muted); margin-top: 8px; }
.big { font-size: clamp(48px, 6vw, 76px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.cap { margin-top: 8px; font-size: 14.5px; color: var(--charcoal); max-width: 22em; }
.cap b { font-weight: 600; }
.you { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.you-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--you); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--you); }
.bars, .steps { display: grid; gap: 10px; margin-top: 16px; }
.bar-row, .step-row { display: grid; grid-template-columns: minmax(180px, 2.2fr) 3fr 210px; gap: 14px; align-items: center; font-size: 14.5px; }
.bar-l em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.bar-t { position: relative; height: 12px; background: var(--hair-2); }
.bar-t i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(20,20,18,.55); border-radius: 0 3px 3px 0; transition: width 1.4s var(--ease); }
.d-card.is-in .bar-t i { width: var(--w); }
.bar-row.tone-good .bar-t i { background: var(--good); }
.bar-row.tone-bad .bar-t i { background: var(--bad); }
.step-row.is-hot .bar-t i { background: var(--mid); }
/* colour-coded numbers (brand rays, darkened for legible text): good = teal, mixed = amber, problem = coral */
.count { font-variant-numeric: tabular-nums; }
.tone-good.count { color: var(--good-ink); }
.tone-mid.count { color: var(--mid-ink); }
.tone-bad.count { color: var(--bad-ink); }
.bar-row.is-you .bar-l { font-weight: 600; }
.bar-v { font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bar-v .you { margin-top: 0; }
.you-mark { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--you); transform: translateX(-1px); }
.you-mark::after { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--you); }
.you-s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; margin-top: 16px; max-width: 620px; }
.g-h { font-size: 10.5px; color: var(--muted); align-self: end; }
.g-side { align-self: center; padding-right: 8px; }
.g-cell { padding: 14px 16px; border: 1px solid var(--hair); background: var(--paper); }
.g-cell.is-hot { border-color: var(--ink); background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(20,20,18,.06) 7px 8px), var(--paper); }
.g-cell.is-you { box-shadow: 0 0 0 2px var(--ink); }
.g-v { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.g-l { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.d-fix { border-color: var(--ink); }
.fix { margin-top: 10px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; max-width: 36em; }
.quote { margin: 12px 0 0; padding-left: 16px; border-left: 3px solid var(--ink); font-size: 19px; }
.d-foot { margin-top: 30px; font-size: 13.5px; color: var(--muted); display: grid; gap: 10px; }
.d-sign { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 720px) {
  .ba { grid-template-columns: 1fr; } .ba-arrow { display: none; }
  .bar-row, .step-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- How this works ---------- */
.how { max-width: 640px; width: calc(100% - 32px); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 28px 30px 24px; }
.how::backdrop { background: rgba(20,20,18,.35); }
.how ul { list-style: disc; padding-left: 20px; margin-top: 8px; font-size: 15px; display: grid; gap: 6px; }
.how-k { margin-top: 22px; color: var(--muted); font-size: 10.5px; }
.how-close { float: right; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 10.5px; }
.how .label { margin-bottom: 14px; }

@media (max-width: 920px) {
  .lanes, .choices { grid-template-columns: 1fr; }
  .progress { display: none; }
}
.fast .step { animation: none; }   /* ?fast, testing only */
@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
  .btn, .choice { transition: none; }
}

/* Panel 4: step arrows on the picture */
.beat-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.beat-nav .mono { font-size: 11px; letter-spacing: .1em; color: var(--muted); min-width: 3.5em; text-align: center; }
.beat-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.beat-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.beat-btn:disabled { opacity: .25; cursor: default; }
.beat-btn[data-beat-next]:not(:disabled) { background: var(--ink); color: var(--paper); }

/* v3.2: how to read the maps (beside the comparison), and larger, higher-contrast captions for laptops and screen-sharing */
.map-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--hair); font-size: 14.5px; color: var(--ink); }
.map-key li { display: flex; align-items: center; gap: 8px; }
.mk { flex: none; display: inline-block; }
.mk-haze { width: 26px; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(42,120,214,.55), rgba(27,175,122,.55)); filter: blur(1.5px); }
.mk-dot { width: 10px; height: 10px; border-radius: 50%; background: #8f877a; box-shadow: 0 0 0 1.5px var(--paper); }
.mk-dots { display: inline-flex; gap: 3px; }
.mk-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mk-dots i:nth-child(1) { background: #D8CFBF; } .mk-dots i:nth-child(2) { background: #8f877a; } .mk-dots i:nth-child(3) { background: #1B1915; }
.mk-land { width: 26px; height: 14px; background: linear-gradient(90deg, #EAE3D4, #8a8277 60%, #34302A); }
.lane-d { font-size: 15px; color: var(--charcoal); }
.lane-note { font-size: 15px; color: var(--ink); }
.art-live { font-size: 16px; }
.ba-two { grid-template-columns: 1fr 1fr; }
.ba-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
@media (min-width: 921px) {
  .s-run .lane-note { font-size: 14.5px; }
  .s-run .lane-d { min-height: 0; }
}
@media (max-width: 720px) { .ba-two { grid-template-columns: 1fr; } }
@media (min-width: 921px) { .s-run .map-key { font-size: 14px; gap: 6px 20px; padding: 8px 14px; } .s-run .lane { gap: 6px; } }

/* v3.3: lanes carry less, the map leads; one lane in focus at a time; an automatic final reveal */
.lane .plate, .s-run .lane .plate { width: 58px; }
.lane-mid { gap: 12px; }
.lane-prog { display: grid; gap: 2px; }
.lane-prog .mono { font-size: 11px; letter-spacing: .06em; color: var(--charcoal); }
.lane-best { font-size: 14px; color: var(--charcoal); }
.lane-best .mono { font-size: 10.5px; color: var(--muted); }
.lane-best b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); margin-left: 4px; }
.lane.is-locked { opacity: .6; }
.lane.is-done { opacity: .78; transition: opacity .4s; }
.lane.is-active { opacity: 1; }
.is-revealed .lane, .is-revealed .lane.is-done { opacity: 1; box-shadow: none; }
.reveal-note { margin-top: 18px; padding: 12px 16px; background: var(--card); border: 1px solid var(--ink); font-size: 16px; color: var(--ink); }
.reveal-note[hidden] { display: none; }
.sb.is-live b { color: inherit; filter: none; }
@media (min-width: 921px) {
  .s-run.is-revealed .chart-fig { position: static; box-shadow: none; }
}

/* v3.3: small laptops. Keep the picture, its explanation and Next on one screen. The picture scales with the window
   height (it never crops), gaps tighten, body text stays the same size. Phones scroll normally. */
@media (min-width: 721px) {
  main { padding-top: clamp(18px, 3.5vh, 80px); }
  .s-intro .label { margin-bottom: 12px; }
  .s-intro .art { margin: 0 0 14px; padding: 10px; width: min(100%, 640px, max(330px, calc((100vh - 478px) * 1.667 + 20px))); }
  .s-intro .art-live { margin-top: 8px; min-height: 2.8em; }
  .s-intro .h2 { font-size: clamp(24px, 2.5vw, 34px); }
  .s-intro .lede { margin-top: 8px; }
  .s-intro .counter { font-size: clamp(28px, 4.6vw, 60px); margin: 6px 0 2px; }
  .s-intro .key { margin-top: 12px; padding: 8px 12px; }
  .s-intro .small, .s-intro .credit { margin-top: 8px; }
  .s-intro .panel-nav { margin-top: 18px; }
  .s-intro .beat-nav { margin-top: 6px; }
}
@media (min-width: 721px) and (max-height: 820px) { .top { padding-top: 12px; padding-bottom: 12px; } }
@media (min-width: 721px) {
  /* the counter panel carries more text, so its picture takes a little less height */
  .s-intro [data-panel="1"] .art { width: min(100%, 640px, max(340px, calc((100vh - 548px) * 1.667 + 20px))); }
  .s-intro .nbr { margin-top: 6px; padding-top: 6px; }
  .s-intro .nbr p { margin: 4px 0; }
}
.nbr p .nbr-note { display: inline; }
.lede .counter { display: block; color: var(--ink); }
@media (min-width: 721px) { .s-intro .lede .counter { font-size: clamp(28px, 3.6vw, 48px); margin: 4px 0 6px; } }
@media (min-width: 721px) {
  /* "Make a call": the choices, confidence and Run button on one screen */
  .s-commit .label { margin-bottom: 12px; }
  .s-commit .h2 { font-size: clamp(24px, 2.5vw, 34px); }
  .s-commit .choices { margin-top: 18px; }
  .s-commit .choice { padding: 14px 16px 16px; }
  .s-commit .confidence { margin-top: 18px; }
  .s-commit [data-go="run"] { margin-top: 18px; }
}
@media (min-width: 721px) {
  /* follow-up question and close: same tightening */
  .s-transfer .label, .s-close .label { margin-bottom: 12px; }
  .s-transfer .lede { margin-top: 0; }
  .s-transfer .h2 { font-size: clamp(24px, 2.5vw, 34px); margin-top: 8px; }
  .s-transfer .options { margin-top: 14px; gap: 8px; }
  .s-transfer .option { padding: 11px 16px; }
  .s-transfer .confidence { margin-top: 16px; }
  .s-transfer [data-needs="transfer"] { margin-top: 16px; }
  .s-close .display { font-size: clamp(32px, 4vw, 54px); }
  .s-close .lede { margin-top: 10px; }
  .s-close .recap { margin-top: 16px; gap: 8px; padding: 14px 18px; }
  .s-close .small { margin-top: 12px; }
  .s-close .cta { margin-top: 22px; padding-top: 16px; }
}
@media (min-width: 721px) { .s-intro .h2 { font-size: clamp(24px, 2.3vw, 32px); } .s-intro .art { margin-bottom: 10px; } .s-intro .panel-nav { margin-top: 12px; } }
/* short laptop screens: the pinned chart would cover the lanes' buttons, so it sits below them instead */
@media (min-width: 921px) and (max-height: 759px) { .s-run .chart-fig { position: static; box-shadow: none; } }

/* ---------- Educational steps: one shared frame (.edu) ----------
   Phones: heading → explanation → visual → navigation, scrolling normally.
   Laptops: heading across the top; explanation left, visual right; navigation in a fixed bar underneath.
   The visual's size follows the window's height as a target (never cropped). If the window is very short
   or the text is enlarged, the page grows and scrolls instead of shrinking things further. */
.edu-head { margin: 0 0 14px; }
.edu-text .lede:first-child { margin-top: 0; }
.edu-visual { margin: 18px 0 0; }
.edu-visual .credit { margin-top: 6px; }
.panel-nav .nav-skip { margin-left: auto; font-size: 13.5px; color: var(--muted); }
.panel.edu { animation: edu-in .22s ease-out both; }
@keyframes edu-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel, .panel.edu { animation: none; } }
.fast .panel { animation: none; }

@media (min-width: 900px) {
  .s-intro { max-width: 1180px; }
  .s-intro .panels { min-height: max(0px, calc(100vh - 190px)); }
  .edu {
    display: grid; grid-template-columns: minmax(250px, 0.52fr) minmax(0, 1fr);
    grid-template-areas: "head head" "text visual"; column-gap: 44px; align-items: start;
  }
  .s-intro .edu-head { grid-area: head; max-width: none; font-size: clamp(26px, 2.5vw, 36px); }
  .edu-text { grid-area: text; padding-top: 4px; }
  .edu-text .lede { max-width: 24em; }
  .s-intro .edu-visual {
    grid-area: visual; margin: 0; justify-self: start; max-width: none;
    /* target: heading, text, visual and navigation in one view; floor keeps the enzyme inspectable */
    width: min(100%, max(420px, calc((100vh - 338px) * 1.667 + 20px)));
  }
}

/* ---------- Educational steps v2: one contained, centred stage ----------
   The whole step (label, text, visual, navigation) sits on one soft card. On laptops the card's width follows the
   visual (--v), so there's no stray space; the visual's size targets the window height. Phones stack inside the card. */
.s-intro {
  --v: min(720px, max(420px, calc((100vh - 332px) * 1.667)));
  background: #FBF9F4; border-radius: 20px; padding: 22px 18px 18px;
  box-shadow: 0 0 0 1px rgba(20,20,18,.05), 0 20px 50px -22px rgba(20,20,18,.28);
}
.s-intro .label { margin-bottom: 16px; }
.edu-visual.art { border: 0; padding: 0; background: none; box-shadow: none; }
.edu-visual canvas { border-radius: 16px; background: radial-gradient(ellipse at 50% 42%, #FFFFFF 0%, #F6F2EA 55%, #EFE9DD 100%); }
.edu-visual .art-live { display: flex; gap: 10px; align-items: baseline; margin: 12px 2px 0; font-size: 16px; }
.edu-visual .art-live::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--ray-violet, #5B57E8), var(--ray-teal, #23A88E)); transform: translateY(-1px); }
.edu-visual .credit { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 4px 2px 0 20px; }
.s-intro .edu-head { margin: 0 0 14px; line-height: 1.08; }
.dots { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: rgba(20,20,18,.16); transition: width .25s ease, background-color .25s ease; }
.dots i.is-done { background: var(--muted); }
.dots i.is-now { width: 22px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dots i { transition: none; } }

@media (min-width: 900px) {
  .s-intro { max-width: none; width: min(100%, calc(var(--v) + 556px)); padding: 30px 44px 24px; border-radius: 24px; }
  .s-intro .panels { min-height: calc(var(--v) * 0.6 + 100px); }
  .edu { grid-template-columns: 420px var(--v); grid-template-areas: "text visual"; column-gap: 48px; }
  .s-intro .edu-head { font-size: clamp(30px, 2.9vw, 44px); }
  .edu-text { padding-top: 0; }
  .s-intro .edu-visual { width: var(--v); }
  .s-intro .panel-nav { margin-top: 18px; }
}
/* navigation bar: Back and Skip on the left; progress dots and Next anchored on the right */
.s-intro .panel-nav { flex-wrap: nowrap; }
.s-intro .panel-nav .btn-back { order: 1; }
.s-intro .panel-nav .btn-back[hidden] { display: none; }
.s-intro .panel-nav .nav-skip { order: 2; margin-left: 0; }
.s-intro .panel-nav .dots { order: 3; margin-left: auto; margin-right: 6px; }
.s-intro .panel-nav [data-panel-next] { order: 4; }
@media (max-width: 520px) { .s-intro .panel-nav { flex-wrap: wrap; } .s-intro .panel-nav .nav-skip { order: 5; flex-basis: 100%; } }
/* shared-frame details: meter over the bottom of the enzyme picture; step arrows beside the map caption */
.stage-wrap { position: relative; }
.edu-visual .swap-tag { margin: 0; }
.edu-visual .meter-row { position: absolute; left: 14px; right: 14px; bottom: 12px; margin: 0; padding: 7px 12px; border-radius: 10px; background: rgba(251,249,244,.88); }
.cap-row { display: flex; align-items: flex-start; gap: 14px; }
.cap-row .art-live { flex: 1; }
.cap-row .beat-nav { flex: none; margin-top: 8px; }
.s-intro .cap-row .beat-nav { margin-top: 8px; }
.edu-text .nbr { margin-top: 16px; }
/* phones: progress dots on their own line; Back shrinks to an arrow so Back and Next always share a row */
@media (max-width: 520px) {
  .s-intro .panel-nav .dots { order: 0; flex-basis: 100%; margin: 0 0 2px; justify-content: center; }
  .s-intro .panel-nav .btn-back .btn-back-t { display: none; }
  .s-intro .panel-nav .btn-back { padding-left: 16px; padding-right: 16px; }
  .s-intro .panel-nav [data-panel-next] { margin-left: auto; }
}
@media (min-width: 900px) { .s-intro .edu .edu-visual { width: var(--v); max-width: none; } }
@media (min-width: 721px) and (max-width: 899px) { .s-intro .edu .edu-visual { width: 100%; max-width: 640px; } }

/* ---------- Run screen: the chart as a panel beside the lanes (laptops) ----------
   Lanes and chart sit side by side, so the lines rising live are always in view, even on short screens.
   Phones: chart below the lanes, with the small pinned scoreboard. */
.chart-vals { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--charcoal); }
.chart-vals li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; }
.chart-vals i { display: block; height: 3px; border-radius: 2px; background: var(--c); }
.chart-vals b { font-weight: 600; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.map-wrap { position: relative; }
.toast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  padding: 8px 14px; border-radius: 999px; background: rgba(20,20,18,.86); color: var(--paper);
  font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
.toast::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1baf7a; margin-right: 8px; vertical-align: 1px; }
.toast.is-on { animation: toast 2.1s ease both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -55%); } }
@media (prefers-reduced-motion: reduce) { .toast.is-on { animation: toast-still 1.6s step-end both; } @keyframes toast-still { 0% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } } }
@media (min-width: 921px) {
  .run-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; margin-top: 18px; }
  .run-grid .lanes { margin-top: 0; }
  .s-run .chart-fig, .s-run.is-revealed .chart-fig { position: sticky; top: 12px; bottom: auto; margin-top: 0; padding: 12px 14px 14px; box-shadow: none; border-color: var(--hair); }
  .s-run .chart-cap .mono { font-size: 10.5px; }
}