/* Machine Learning Autoscaler — prototype 3: "paper and instrument".
   A light lab-paper page with a faint dot matrix; every live thing (simulator, charts, code) is a dark
   instrument window set into it. One brand hue, signal rose, used for the forecaster. Reactive is steel blue.
   Series colours validated with the dataviz script (CVD separation, lightness band, contrast).
   Flat colour, no glows, no resting shadows. Hanken Grotesk. */
:root {
  /* paper */
  --bg: #f2f3f1;
  --bg-2: #e8eae7;
  --surface: #e2e5e1;
  --surface-2: #d6dad5;
  --paper: #fbfbfa;
  --line-l: #cdd2cc;

  --ink: #101214;
  --ink-soft: #3b4148;
  --muted: #5b636a;

  --accent: #c93a5e;
  --accent-deep: #a82d4c;
  --on-accent: #ffffff;
  --tint: #f8dde4;
  --tint-ink: #6b1a30;

  /* instruments */
  --night: #0e1620;
  --night-2: #142031;
  --night-3: #1a2a40;
  --night-line: #23324a;
  --night-ink: #edf1f6;
  --night-muted: #93a3b8;

  /* chart series (validated): reactive = blue, predictive = rose; demand = ink */
  --s-react: #3987e5;
  --s-pred: #d55181;
  --pred-text: #ff8fb0;

  --m: 40px;
  --gap: 20px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --font: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.45 var(--font); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-color: var(--bg);
  /* dot matrix, drawn as SVG so there is no gradient and no line work */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23101214' fill-opacity='.16'/%3E%3C/svg%3E");
  background-size: 26px 26px;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a, [role="button"] { touch-action: manipulation; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sim :focus-visible, .bars :focus-visible, .stage-frag :focus-visible { outline-color: var(--pred-text); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { padding-inline: var(--m); }
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

.display, .page-head h1, .clause, .faq-title, .next .n-title, .big-fig, .type-input, .phase-panel h2, .t-mark, .frag .big, .brand span, .stat b, .block-title { font-family: var(--font); font-weight: 500; letter-spacing: -0.045em; }

/* press feedback on everything pressable: 160ms, strong ease-out, subtle scale */
.btn, .btn-ghost, .nav-cta, .seg button, .sim-link, .examples button, .stage-names button, .phase-list button, .copy, .tiles summary, .t-cta, .next a, .chip {
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.btn:active, .btn-ghost:active, .nav-cta:active, .seg button:active, .sim-link:active, .examples button:active, .stage-names button:active, .copy:active, .t-cta:active, .next a:active, .chip:active, .tiles summary:active { transform: scale(0.97); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: var(--bg-2); }
.nav-in { display: flex; align-items: center; gap: 8px 28px; padding: 14px var(--m); font-size: 15px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand span { font-size: 18px; line-height: 1; letter-spacing: -0.035em; }
.logo { width: 22px; height: 22px; color: var(--accent); flex: none; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { position: relative; text-decoration: none; color: var(--ink-soft); white-space: nowrap; padding: 6px 0; transition: color 160ms ease; }
.nav nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--accent); }
.nav-cta { padding: 9px 16px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 500; font-size: 15px; border-radius: 3px; }
@media (hover: hover) and (pointer: fine) { .nav nav a:hover { color: var(--ink); } .nav-cta:hover { background: var(--accent-deep); } }

/* ---------- page head ---------- */
.page-head { padding: 44px var(--m) 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.page-head h1 { grid-column: 1 / 9; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.98; text-wrap: balance; }
.page-head p { grid-column: 9 / 13; font-size: 17px; line-height: 1.45; color: var(--ink-soft); max-width: 38ch; padding-bottom: 6px; }

/* ---------- hero: copy on paper, the instrument bleeds off the right edge ---------- */
.hero { padding: 56px 0 56px var(--m); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; overflow-x: clip; }
.hero-copy { grid-column: 1 / 6; }
.display { font-size: clamp(44px, 5.2vw, 84px); line-height: 0.96; text-wrap: balance; }
.hero-sub { margin-top: 24px; max-width: 40ch; font-size: 19px; line-height: 1.45; color: var(--ink-soft); }
.hero-actions { margin-top: 28px; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 14px 22px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 500; font-size: 17px; border-radius: 3px; }
.btn-ghost { display: inline-block; padding: 14px 4px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent-deep); } .btn-ghost:hover { color: var(--accent); } }
.frame { grid-column: 6 / 13; min-width: 0; }
.js .frame { animation: shutter 900ms var(--ease-drawer) 100ms both; }
.js .frame .sim { animation: settle 900ms var(--ease-drawer) 100ms both; transform-origin: 50% 0; }
@keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero .sim { border-radius: 8px 0 0 8px; }

/* ---------- proof strip ---------- */
.proof { background: var(--bg-2); padding: 36px var(--m); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--gap); }
.stat b { display: block; font-size: clamp(48px, 5.4vw, 80px); line-height: 0.95; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; max-width: 28ch; font-size: 16px; line-height: 1.35; color: var(--ink-soft); }

/* ---------- instrument windows: simulator, playground, model chart ---------- */
.sim { --gap-fill: rgba(57, 135, 229, 0.3); position: relative; width: 100%; background: var(--night); color: var(--night-ink); border-radius: 8px; padding: 16px 18px 6px; font-size: 15px; line-height: 1.4; }
.sim[data-mode="predictive"] { --gap-fill: rgba(213, 81, 129, 0.34); }
.sim-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--night-line); border-radius: 4px; }
.seg button { padding: 7px 12px; font-size: 15px; color: var(--night-muted); }
.seg button[aria-checked="true"] { background: var(--night-ink); color: var(--night); font-weight: 500; }
.seg-sm button { padding: 5px 10px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .seg button[aria-checked="false"]:hover { color: var(--night-ink); background: var(--night-3); } }
.sim-link { color: var(--pred-text); font-weight: 500; font-size: 15px; padding: 6px 2px; }
@media (hover: hover) and (pointer: fine) { .sim-link:hover { color: #ffb3c9; } }
.chart-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--night-muted); }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key i { display: inline-block; width: 14px; height: 3px; }
.k-demand { background: var(--night-ink); } .k-reactive { background: var(--s-react); } .k-predictive { background: var(--s-pred); } .k-static { background: transparent; border-top: 2px dotted var(--night-muted); height: 0 !important; }
.chart-mode { margin-left: auto; }
.sim svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.sim svg text { font: 400 13px var(--font); fill: var(--night-muted); }
.sim svg .demand { fill: none; stroke: var(--night-ink); stroke-width: 1.5; stroke-linejoin: round; }
.sim svg .cap-r { fill: none; stroke: var(--s-react); stroke-width: 2; }
.sim svg .cap-p { fill: none; stroke: var(--s-pred); stroke-width: 2; }
.sim svg .cap-s { fill: none; stroke: var(--night-muted); stroke-width: 1.5; stroke-dasharray: 2 4; }
.sim svg .gap { fill: var(--gap-fill); }
.sim svg .axis { stroke: var(--night-line); stroke-width: 1; }
.sim svg .now { stroke: var(--night-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sim svg .cursor { stroke: var(--night-muted); stroke-width: 1; pointer-events: none; }
.sim svg .dot { stroke: var(--night); stroke-width: 2; pointer-events: none; }
.metrics { margin: 4px 0 0; display: grid; }
.metrics > div { display: grid; grid-template-columns: 1fr 96px 96px; align-items: baseline; padding: 7px 0; }
.metrics.three > div { grid-template-columns: 1fr 110px 110px 110px; }
.metrics dt { color: var(--night-muted); font-size: 15px; }
.metrics dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 15px; }
.metrics .acc { color: var(--pred-text); }
.m-head dd { color: var(--night-muted); font-weight: 400; font-size: 13px; }

/* chart hover readout (dataviz: every chart ships a crosshair and tooltip) */
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 168px; padding: 10px 12px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 6px; font-size: 13px; line-height: 1.4; color: var(--night-ink); opacity: 0; transform: translateY(2px); transition: opacity 120ms ease, transform 120ms var(--ease-out); }
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; font-weight: 500; margin-bottom: 4px; }
.tip span { display: flex; justify-content: space-between; gap: 14px; color: var(--night-muted); font-variant-numeric: tabular-nums; }
.tip span em { font-style: normal; color: var(--night-ink); }
.tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }

/* ---------- intro ---------- */
.intro { padding-top: 72px; padding-bottom: 56px; }
.lead { font: 400 clamp(20px, 1.5vw + 0.9rem, 30px)/1.2 var(--font); letter-spacing: -0.02em; max-width: 56ch; }
.cols { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.cols p { font-size: 16px; line-height: 1.45; color: var(--ink-soft); max-width: 62ch; }
.cols b { color: var(--ink); font-weight: 500; }

/* ---------- next rows ---------- */
.next { padding-bottom: 72px; }
.next-list { display: grid; gap: 2px; }
.next a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 24px; background: var(--surface); text-decoration: none; }
.next-list a:first-child { border-radius: 8px 8px 0 0; } .next-list a:last-child { border-radius: 0 0 8px 8px; }
.next .n-title { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; transition: color 160ms ease; }
.next .n-val { font-size: 15px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .next a:hover { background: var(--surface-2); } .next a:hover .n-title { color: var(--accent); } }

/* ---------- pictures ---------- */
.queue { grid-column: 8 / 13; margin: 0; }
.queue img, .band img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); }
.queue figcaption, .band figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); max-width: 52ch; }
.band { margin: 0; }
.band-pic { height: clamp(240px, 42vh, 460px); overflow: hidden; background: var(--ink); }
.band-pic img { height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.1); will-change: transform; }
.band figcaption { padding: 0 var(--m); margin-top: 14px; max-width: none; }

/* ---------- type a load ---------- */
.type-it { padding: 36px 0 72px; }
.type-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.type-left { grid-column: 1 / 7; }
.type-input { display: block; width: 100%; background: none; border: 0; outline: 0; padding: 0; margin: 0; font-size: clamp(40px, 8vw, 130px); line-height: 1.05; letter-spacing: -0.05em; caret-color: var(--accent); color: var(--ink); }
.type-input:focus-visible { outline: 0; }
.type-input::selection { background: var(--accent); color: var(--on-accent); }
.answer { max-width: 560px; display: grid; gap: 2px; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.a-row { background: var(--paper); display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; font-size: 15px; transition: background-color 160ms ease; }
.a-row b { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.a-row:first-child b { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .a-row:hover { background: var(--surface); } }
.examples { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.examples button { font-size: 17px; color: var(--muted); padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .examples button:hover { color: var(--accent); } }

/* ---------- bars (instrument section) ---------- */
.bars { background: var(--night); color: var(--night-ink); display: flex; flex-direction: column; padding-top: 44px; }
.big-fig { font-size: clamp(80px, 9vw, 130px); line-height: 0.92; color: var(--pred-text); font-variant-numeric: tabular-nums; }
.big-claim { margin-top: 10px; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; max-width: 22ch; }
.bars-wrap { margin-top: 28px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: calc(36vh + 120px); }
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: left; color: inherit; min-width: 0; }
.bar-val { font-size: clamp(20px, 2vw, 30px); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; padding: 0 0 8px 8px; }
.bar:first-child .bar-val, .bar:first-child .bar-name { padding-left: var(--m); }
.bar-fill { height: var(--h); min-height: 4px; background: var(--night-3); transform-origin: bottom; transition: background-color 160ms ease; }
.bar.r .bar-fill { background: var(--s-react); opacity: 0.8; }
.bar.p .bar-fill { background: var(--s-pred); opacity: 0.8; }
.bar.hi .bar-fill { background: var(--pred-text); opacity: 1; }
.bar-name { padding: 10px 8px 12px; font-size: 13px; line-height: 1.3; color: var(--night-muted); }
.bar.pair-start { margin-left: 12px; }
@media (hover: hover) and (pointer: fine) { .bar:hover .bar-fill { opacity: 1; } }
.js .bar-fill { animation: grow 700ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); animation-play-state: paused; }
.bars.in .bar-fill { animation-play-state: running; }
@keyframes grow { from { transform: scaleY(0.04); } to { transform: scaleY(1); } }
.bars-note { padding-top: 4px; padding-bottom: 28px; font-size: 15px; line-height: 1.45; max-width: 70ch; color: var(--night-muted); }

/* ---------- data tables and rows ---------- */
.block { padding-top: 80px; padding-bottom: 8px; }
.block-title { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.02; max-width: 34ch; }
.block-sub { margin-top: 10px; max-width: 58ch; color: var(--ink-soft); }
.data { width: 100%; margin-top: 22px; border-collapse: separate; border-spacing: 0 2px; font-variant-numeric: tabular-nums; }
.data th { text-align: right; font-weight: 400; font-size: 13px; color: var(--muted); padding: 0 18px 6px; }
.data th:first-child { text-align: left; }
.data td { background: var(--surface); padding: 15px 18px; text-align: right; font-size: 16px; transition: background-color 160ms ease; }
.data td:first-child { text-align: left; font-weight: 500; border-radius: 8px 0 0 8px; }
.data td:last-child { border-radius: 0 8px 8px 0; }
.data td.hl { background: var(--tint); color: var(--tint-ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .data tbody tr:hover td { background: var(--surface-2); } .data tbody tr:hover td.hl { background: var(--tint); } }
.imp { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 2px; }
.imp li { display: grid; grid-template-columns: minmax(180px, 280px) 1fr 64px; align-items: center; gap: 16px; background: var(--surface); padding: 12px 18px; }
.imp li:first-child { border-radius: 8px 8px 0 0; } .imp li:last-child { border-radius: 0 0 8px 8px; }
.imp .track { height: 12px; background: var(--bg); }
.imp .fill { display: block; height: 100%; background: var(--accent); width: calc(var(--w) * 1%); transform-origin: left; }
.imp .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.js .imp .fill { animation: growx 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); animation-play-state: paused; }
.imp.in .fill { animation-play-state: running; }
.model-chart { margin-top: 22px; }
.model-chart .sim { padding-bottom: 12px; }
.cap-note { margin-top: 14px; font-size: 15px; color: var(--ink-soft); max-width: 62ch; }

/* ---------- playground ---------- */
.play { padding-bottom: 72px; }
.play-panel { padding: 18px 20px 10px; }
.play-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.play-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 7px 12px; font-size: 15px; border: 1px solid var(--night-line); border-radius: 4px; color: var(--night-ink); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--night-3); } }
#pl-chart { display: block; width: 100%; height: auto; margin-top: 12px; touch-action: none; cursor: crosshair; user-select: none; }
.play-hint { margin-top: 4px; font-size: 13px; color: var(--night-muted); }
.knobs { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.knob { display: grid; gap: 6px; font-size: 13px; color: var(--night-muted); }
.knob .kv { display: flex; justify-content: space-between; color: var(--night-ink); font-size: 15px; }
.knob .kv b { font-weight: 500; font-variant-numeric: tabular-nums; }
.knob input[type="range"] { width: 100%; accent-color: var(--pred-text); margin: 0; height: 28px; }
.knob input[type="number"] { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 4px; padding: 8px 12px; width: 100%; font-size: 15px; color: var(--night-ink); }
.play-note { margin-top: 14px; padding: 12px 14px; background: var(--night-3); border-radius: 4px; font-size: 15px; line-height: 1.4; color: var(--night-ink); }
.play-note[hidden] { display: none; }
.play .metrics { margin-top: 12px; }

/* ---------- stages (slider) ---------- */
.stages-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(52svh, 1fr) auto; min-height: 66svh; }
.stage-clause { background: var(--surface); padding: 36px var(--m); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.clause-note { font-size: 17px; line-height: 1.45; max-width: 42ch; color: var(--ink-soft); transition: opacity 180ms ease, filter 180ms ease; }
.clause-note.swap, .clause.swap, .frag.swap { opacity: 0; filter: blur(2px); }
.clause { font-size: clamp(36px, 4.6vw, 72px); line-height: 0.98; max-width: 20ch; transition: opacity 180ms ease, filter 180ms ease; }
.stage-frag { background: var(--night); display: grid; place-items: center; padding: 32px var(--m); }
.frag { width: min(460px, 100%); background: var(--night-2); color: var(--night-ink); border-radius: 8px; padding: 18px; font-size: 15px; line-height: 1.45; transition: opacity 180ms ease, filter 180ms ease; }
.frag h3 { font: 500 13px/1.3 var(--font); color: var(--night-muted); margin-bottom: 10px; }
.frag pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 13.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--night-ink); }
.frag .big { display: block; margin-top: 14px; font-size: 44px; line-height: 1; color: var(--pred-text); font-variant-numeric: tabular-nums; }
.frag .big small { font: 500 15px var(--font); color: var(--night-muted); letter-spacing: -0.01em; margin-left: 6px; }
.frag .hint { margin-top: 10px; color: var(--night-muted); font-size: 13px; }
.frag table { width: 100%; border-collapse: collapse; margin-top: 4px; font-variant-numeric: tabular-nums; }
.frag td { padding: 5px 0; } .frag td:last-child { text-align: right; color: var(--night-ink); }
.frag .mark { color: var(--pred-text); }
.stages-ctl { grid-column: 1 / -1; background: var(--bg-2); padding: 24px var(--m) 20px; }
.range { position: relative; height: 32px; }
.range-track, .range-fill { position: absolute; left: 0; right: 0; top: 12px; height: 8px; pointer-events: none; }
.range-track { background: var(--surface-2); }
.range-fill { background: var(--accent); clip-path: inset(0 calc(100% - 16px - (100% - 32px) * var(--p, 0)) 0 0); transition: clip-path 200ms var(--ease-out); }
.range input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range input::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.range input::-moz-range-track { height: 32px; background: transparent; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; background: var(--ink); border: 0; border-radius: 4px; transition: transform 160ms var(--ease-out); }
.range input::-moz-range-thumb { width: 32px; height: 32px; background: var(--ink); border: 0; border-radius: 4px; }
.range input:active::-webkit-slider-thumb { transform: scale(0.94); }
.stage-names { display: flex; justify-content: space-between; margin-top: 12px; font-size: 17px; }
.stage-names button { color: var(--muted); padding: 4px 0; }
.stage-names button[aria-current="true"] { color: var(--ink); font-weight: 500; }

/* ---------- guide ---------- */
.guide { padding-top: 8px; padding-bottom: 72px; }
.guide-set { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; }
.guide-set label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.guide-set input, .guide-set select { min-width: 220px; background: var(--paper); border: 1px solid var(--line-l); border-radius: 4px; padding: 8px 12px; font-size: 15px; color: var(--ink); }
.guide-set input:focus-visible, .guide-set select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.guide-set .seg { border-color: var(--line-l); }
.guide-set .seg button { color: var(--muted); }
.guide-set .seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .guide-set .seg button[aria-checked="false"]:hover { background: var(--surface); color: var(--ink); } }
.guide-body { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: start; }
.guide-body > * { min-width: 0; }
.phase-list { list-style: none; margin: 0; padding: 0; position: sticky; top: 88px; }
.phase-list button { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; min-height: 40px; padding: 8px 0; text-align: left; font-size: 17px; color: var(--muted); }
.phase-list .nm { display: inline-flex; align-items: baseline; gap: 10px; }
.phase-list .nm::before { content: ""; width: 8px; height: 8px; background: transparent; transform: translateY(-1px); transition: background-color 160ms ease; }
.phase-list .tl { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.phase-list button[aria-current="true"] { color: var(--ink); font-weight: 500; }
.phase-list button[aria-current="true"] .nm::before { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .phase-list button:hover { color: var(--ink); } }
.phase-panel { background: var(--surface); border-radius: 8px; padding: 32px; min-height: 380px; }
.phase-panel h2 { font-size: 30px; line-height: 1.05; }
.phase-panel .intro-p { margin-top: 10px; color: var(--ink-soft); max-width: 56ch; }
.step { margin-top: 24px; }
.step-note { font-size: 17px; max-width: 62ch; }
.code { margin-top: 10px; background: var(--night); color: var(--night-ink); border-radius: 6px; }
.code pre { margin: 0; padding: 6px 16px 16px; overflow-x: auto; font: 13.5px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; }
.copy { display: block; margin: 8px 8px 0 auto; padding: 6px 12px; font-size: 13px; background: var(--night-3); color: var(--night-ink); border-radius: 4px; }
.copy.done { background: var(--s-pred); color: #fff; }
@media (hover: hover) and (pointer: fine) { .copy:hover { background: var(--night-line); } .copy.done:hover { background: var(--s-pred); } }
.js .step { animation: stepin 280ms var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes stepin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- faq ---------- */
.faq { padding-top: 56px; padding-bottom: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.faq-title { grid-column: 1 / 5; align-self: start; font-size: clamp(36px, 4.6vw, 72px); line-height: 0.98; }
.tiles { grid-column: 5 / 13; display: grid; gap: 8px; }
.tiles details { background: var(--surface); border-radius: 8px; transition: background-color 200ms ease, color 200ms ease; }
.tiles summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 14px 24px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; border-radius: 8px; }
.tiles summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.tiles summary .plus::before, .tiles summary .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform 200ms var(--ease-out); }
.tiles summary .plus::after { transform: rotate(90deg); }
.tiles details[open] { background: var(--ink); color: #fff; }
.tiles details[open] :focus-visible { outline-color: var(--pred-text); }
.tiles details[open] .plus::after { transform: rotate(0deg); }
.tiles details p { padding: 0 24px 22px; max-width: 52ch; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.tiles details[open] p { color: #d7dde3; }
@media (hover: hover) and (pointer: fine) { .tiles details:not([open]) summary:hover { background: var(--surface-2); } }

/* ---------- footer ---------- */
.foot { padding: 8px; }
.foot-row { display: grid; gap: 8px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tile { background: var(--surface); border-radius: 8px; padding: 22px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; }
.t-mark::after { content: "Machine Learning Autoscaler"; max-width: 9ch; text-wrap: balance; }
.t-mark { grid-column: span 4; background: var(--night); color: var(--night-ink); justify-content: flex-end; font-size: clamp(32px, 3.4vw, 52px); line-height: 0.95; }
.t-nav { grid-column: span 2; justify-content: flex-start; gap: 6px; font-size: 17px; } .t-nav a { text-decoration: none; color: var(--ink-soft); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .t-nav a:hover { color: var(--accent); } }
.t-state { grid-column: span 3; } .t-state p { font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; } .t-state small { font-size: 13px; color: var(--ink-soft); }
.t-cta { grid-column: span 3; background: var(--accent); color: var(--on-accent); font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.t-cta svg { align-self: flex-end; transition: transform 200ms var(--ease-out); }
.t-cta:focus-visible { outline-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .t-cta:hover { background: var(--accent-deep); } .t-cta:hover svg { transform: translate(4px, -4px); } }
.credits { padding: 4px var(--m) 24px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 120ch; }
.credits a { color: var(--ink); }

/* ---------- entrances: transform + opacity only, strong ease-out, short stagger ---------- */
.js .rise { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .rise.in { opacity: 1; transform: none; }
@keyframes growx { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }

/* ---------- narrow desktop and tablet ---------- */
@media (max-width: 1100px) {
  .hero { padding-right: var(--m); }
  .hero-copy { grid-column: 1 / -1; } .frame { grid-column: 1 / -1; margin-top: 36px; }
  .hero .sim { border-radius: 8px; }
  .display { font-size: clamp(44px, 7vw, 72px); }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  :root { --m: 16px; }
  html { scroll-padding-top: 110px; }
  .nav-in { flex-wrap: wrap; padding: 12px var(--m) 8px; gap: 6px 12px; }
  .nav-cta { display: none; }
  .nav nav { order: 2; width: 100%; margin-left: 0; gap: 16px; font-size: 14px; overflow-x: auto; scrollbar-width: none; padding-left: 12px; }
  .nav nav a[aria-current="page"]::before { left: -10px; }
  .brand span { font-size: 17px; }
  .page-head { display: block; padding: 28px var(--m) 18px; }
  .page-head h1 { font-size: min(10.5vw, 56px); } .page-head p { margin-top: 12px; max-width: none; }
  .hero { display: block; padding: 28px var(--m) 32px; }
  .display { font-size: min(12vw, 60px); }
  .hero-sub { font-size: 17px; margin-top: 18px; }
  .hero-actions { margin-top: 20px; }
  .frame { margin-top: 28px; }
  .sim { padding: 14px 12px 4px; }
  .sim-bar { gap: 8px; } .seg button { padding: 7px 8px; font-size: 13px; }
  .chart-mode { margin-left: 0; }
  .metrics > div { grid-template-columns: 1fr 76px 76px; }
  .metrics.three > div { grid-template-columns: 1fr 64px 64px 64px; }
  .proof { padding: 28px var(--m); }
  .stats { gap: 16px; }
  .stat b { font-size: min(9vw, 56px); }
  .stat span { font-size: 14px; }
  .intro { padding-top: 48px; padding-bottom: 36px; }
  .lead { font-size: 20px; }
  .cols { margin-top: 28px; grid-template-columns: 1fr; gap: 22px; }
  .next { padding-bottom: 48px; }
  .next a { padding: 18px 16px; flex-wrap: wrap; gap: 4px 16px; }
  .band-pic { height: 40svh; }
  .type-it { padding: 28px 0 48px; }
  .type-grid { display: block; margin-top: 22px; } .queue { margin-top: 28px; }
  .type-input { font-size: min(11vw, 72px) !important; }
  .examples { gap: 8px; } .examples button { background: var(--surface); padding: 12px 14px; min-height: 44px; font-size: 15px; border-radius: 4px; }
  .bars { padding-top: 32px; }
  .big-fig { font-size: min(26vw, 110px); } .big-claim { font-size: 22px; }
  .bars-wrap { grid-template-columns: 1fr; height: auto; gap: 6px; margin-top: 24px; padding-inline: var(--m); }
  .bar { flex-direction: row; justify-content: flex-start; text-align: left; align-items: center; height: auto; gap: 10px; }
  .bar:first-child .bar-val, .bar:first-child .bar-name { padding-left: 0; }
  .bar.pair-start { margin-left: 0; margin-top: 10px; }
  .bar-name { order: 1; flex: 0 0 132px; padding: 0; line-height: 1.25; }
  .bar-fill { order: 2; height: 28px; width: calc((100% - 216px) * var(--r)); min-width: 4px; min-height: 28px; flex: none; transform-origin: left; }
  .bar-val { order: 3; padding: 0; font-size: 17px; }
  .js .bar-fill { animation-name: growx; }
  .block { padding-top: 44px; }
  .data th, .data td { padding-inline: 10px; } .data td { font-size: 15px; padding-block: 12px; }
  .imp li { grid-template-columns: 1fr 52px; gap: 6px 12px; padding: 12px 14px; } .imp .track { grid-column: 1 / -1; grid-row: 2; }
  .knobs { grid-template-columns: 1fr; gap: 14px; }
  .play-panel { width: auto; padding: 14px 12px 8px; margin-inline: calc(var(--m) * -1); border-radius: 0; }
  .stages-grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .stage-frag { order: 1; min-height: 40svh; padding: 22px var(--m); }
  .stages-ctl { order: 2; padding: 20px var(--m); } .stage-clause { order: 3; padding: 26px var(--m) 32px; gap: 18px; }
  .clause { font-size: min(9.5vw, 52px); max-width: none; }
  .stage-names { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; } .stage-names button { text-align: left; font-size: 15px; min-height: 40px; }
  .range-track, .range-fill { top: 16px; } .range { height: 40px; }
  .range input::-webkit-slider-thumb { width: 40px; height: 40px; } .range input::-moz-range-thumb { width: 40px; height: 40px; }
  .range-fill { clip-path: inset(0 calc(100% - 20px - (100% - 40px) * var(--p, 0)) 0 0); }
  .guide { padding-bottom: 48px; }
  .guide-set input, .guide-set select { min-width: 0; width: 100%; } .guide-set label { width: 100%; }
  .guide-body { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 20px; }
  .phase-list { position: static; } .phase-list button { min-height: 44px; }
  .phase-panel { padding: 20px 16px; margin-inline: calc(var(--m) * -1); border-radius: 0; }
  .faq { display: block; padding: 36px var(--m) 48px; }
  .faq-title { font-size: min(10vw, 52px); margin-bottom: 20px; }
  .tiles { gap: 6px; } .tiles summary { font-size: 18px; min-height: 60px; padding: 12px 20px; } .tiles details p { padding: 0 20px 18px; font-size: 16px; }
  .foot { padding: 6px; } .foot-row { gap: 6px; grid-template-columns: 1fr 1fr; }
  .tile { min-height: 150px; padding: 18px; }
  .t-mark { grid-column: 1 / -1; min-height: 130px; font-size: min(11vw, 52px); }
  .t-nav, .t-state { grid-column: span 1; } .t-state { order: 4; grid-column: 1 / -1; min-height: 120px; }
  .t-cta { grid-column: span 1; }
  .tip { display: none; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; gap: 22px; }
  .stat b { font-size: min(17vw, 72px); }
  .stat span { font-size: 16px; }
}

/* reduced motion: drop the travel, keep the content visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .frame, .js .frame .sim, .js .bar-fill, .js .imp .fill { animation: none; }
  .js .step { animation: none; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .clause, .frag, .clause-note { transition: opacity 120ms ease; filter: none; }
  .range-fill, .tip { transition: none; }
}