/* The Slop Chasm — site styles.
   Paper, ink and three semantic colours (paid / value / leak) shared by charts and machines. Light only: the
   machines are drawn on paper. Fluid type with clamp(); motion only through transform and opacity. */

:root{
  --paper:#f6f2e9; --paper-2:#efe9dc; --panel:#fbf9f3; --card:#fffdf8;
  --ink:#26221c; --ink-2:#4a4339; --muted:#7a7163; --faint:#a59c8c; --rule:#ddd5c6; --rule-2:#e8e1d3;
  --paid:#3d5199; --paid-soft:#dfe4f3; --value:#2f8a55; --value-soft:#dcefe2; --leak:#d9552f; --leak-soft:#f8e0d6;
  --free:#b9b0a0; --free-soft:#e9e3d6; --gold:#9a7424; --hi:#fff1bf;
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --measure:40rem; --wide:68rem; --gutter:clamp(16px, 4vw, 40px);
  --step--1:clamp(.82rem, .79rem + .12vw, .88rem);
  --step-0:clamp(1.02rem, .98rem + .2vw, 1.12rem);
  --step-1:clamp(1.22rem, 1.12rem + .45vw, 1.45rem);
  --step-2:clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --step-3:clamp(1.95rem, 1.55rem + 1.8vw, 3.05rem);
  --step-4:clamp(2.5rem, 1.8rem + 3.4vw, 4.9rem);
  --ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.62 var(--sans);
  font-feature-settings:"kern","liga","ss01";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:color-mix(in oklab, currentColor 40%, transparent)}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--hi)}
:focus-visible{outline:2px solid var(--paid);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:8px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.scrolled{border-bottom-color:var(--rule)}
.bar-in{max-width:var(--wide);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:18px}
.mark{font:600 14px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;display:flex;align-items:center;gap:9px;white-space:nowrap}
.mark i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block;position:relative;overflow:hidden;flex:none}
.mark i::after{content:"";position:absolute;left:-2px;right:-2px;top:9px;bottom:-2px;background:var(--ink)}
.toc{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc a{font:500 12.5px/1 var(--sans);text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:999px;white-space:nowrap}
.toc a b{font:500 11px/1 var(--mono);color:var(--faint);margin-right:5px}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);background:var(--paper-2)}
.toc a.on b{color:var(--leak)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);width:100%}
@media (max-width:760px){.toc a span{display:none}.toc a{padding:8px 8px}.toc a b{margin:0}}

/* ---------- layout ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.col{max-width:var(--measure)}
section.chapter{padding:clamp(72px, 10vw, 136px) 0 clamp(24px, 4vw, 48px);position:relative}
section.chapter + section.chapter{border-top:1px solid var(--rule)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px, 7vw, 96px) 0 clamp(32px, 5vw, 64px)}
.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 22px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--leak);display:inline-block;margin-right:7px;vertical-align:1px}
h1{font:400 var(--step-4)/1.02 var(--serif);letter-spacing:-.022em;margin:0 0 22px;max-width:14ch;font-variation-settings:"opsz" 72}
h1 em{font-style:italic;color:var(--leak)}
.lede{font:400 var(--step-1)/1.45 var(--serif);color:var(--ink-2);max-width:34rem;margin:0 0 28px}
.byline{font:500 13px/1.5 var(--sans);color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.byline b{color:var(--ink);font-weight:600}

/* ---------- chapter heads ---------- */
.ch-head{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:clamp(24px, 3vw, 40px)}
.ch-num{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.ch-num::before{content:"";width:28px;height:1.5px;background:var(--leak)}
h2{font:400 var(--step-3)/1.06 var(--serif);letter-spacing:-.018em;margin:0 0 14px;max-width:20ch;font-variation-settings:"opsz" 60}
.dek{font:400 var(--step-1)/1.42 var(--serif);font-style:italic;color:var(--ink-2);margin:0;max-width:36rem}
h3{font:600 var(--step-0)/1.3 var(--sans);letter-spacing:-.005em;margin:2.2em 0 .5em}

/* ---------- prose ---------- */
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.05em}
.prose strong{font-weight:600}
.prose ol,.prose ul{padding-left:1.25em;margin:0 0 1.1em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--muted);font-family:var(--mono);font-size:.85em}
.prose blockquote{margin:1.6em 0;padding:0;font:400 var(--step-2)/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.prose blockquote::before{content:"";display:block;width:36px;height:1.5px;background:var(--ink);margin-bottom:14px}
.prose .eq{font:500 .86em/1.65 var(--mono);background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;margin:1.2em 0;white-space:normal;overflow-wrap:anywhere}
.prose .eq .v{color:var(--paid)} .prose .eq .l{color:var(--leak)} .prose .eq .g{color:var(--value)}
sup.fn{font:600 .68em/1 var(--mono);margin-left:1px}
sup.fn a{text-decoration:none;color:var(--paid);padding:0 2px}
.tag-est,.tag-rep,.tag-asm{font:600 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border-radius:5px;vertical-align:2px;white-space:nowrap}
.tag-rep{background:var(--paid-soft);color:var(--paid)}
.tag-est{background:var(--free-soft);color:var(--ink-2)}
.tag-asm{background:var(--leak-soft);color:#9b3a1d}

/* two-column chapter body: prose + sticky aside of key numbers on wide screens */
.body{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);gap:clamp(28px, 5vw, 72px);align-items:start}
.aside{position:sticky;top:88px;display:grid;gap:22px;padding-top:6px}
@media (max-width:980px){.body{grid-template-columns:minmax(0,1fr)}.aside{position:static;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:0;margin:4px 0 8px}}

/* key numbers: a numeral with its meaning, not a dashboard tile */
.stat{border-top:1.5px solid var(--ink);padding-top:10px}
.stat .n{font:400 clamp(2.1rem, 1.6rem + 2vw, 3.2rem)/1 var(--serif);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums;display:block;margin-bottom:6px}
.stat .n.leak{color:var(--leak)} .stat .n.paid{color:var(--paid)} .stat .n.value{color:var(--value)}
.stat .k{font:500 13px/1.4 var(--sans);color:var(--ink-2);display:block;max-width:24ch}
.stat .s{font:500 10.5px/1.4 var(--mono);color:var(--faint);letter-spacing:.03em;display:block;margin-top:6px;text-transform:uppercase}

/* ---------- figures (charts and machines) ---------- */
.figure{margin:clamp(36px, 5vw, 64px) 0;max-width:var(--wide)}
.fig-cap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px;max-width:var(--wide)}
.fig-cap .t{font:600 15px/1.35 var(--sans);letter-spacing:-.005em;margin:0;max-width:44rem}
.fig-cap .t b{font:500 11.5px/1 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:10px;font-weight:500}
.fig-cap .sub{font:400 13.5px/1.45 var(--sans);color:var(--muted);margin:4px 0 0;max-width:44rem}
.fig-note{font:400 12.5px/1.5 var(--sans);color:var(--muted);margin:12px 0 0;max-width:44rem}
.fig-note b{font-weight:600;color:var(--ink-2)}
.frame{background:var(--panel);border:1px solid var(--rule);border-radius:16px;overflow:hidden;position:relative}

/* charts */
.chart{padding:clamp(16px, 2.4vw, 28px) clamp(12px, 2.4vw, 28px) 18px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--sans);fill:var(--ink-2)}
.chart .ax text{font:500 11px var(--mono);fill:var(--muted)}
.chart .ax line,.chart .ax path{stroke:var(--rule);stroke-width:1}
.chart .grid line{stroke:var(--rule-2);stroke-width:1}
.chart .lbl{font:600 12.5px var(--sans);fill:var(--ink)}
.chart .lbl.m{font:500 11.5px var(--mono);fill:var(--muted)}
.chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 12px/1.3 var(--sans);color:var(--ink-2);margin:0 0 12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart-tools{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.chip{font:500 12px/1 var(--sans);border:1px solid var(--rule);background:var(--card);color:var(--ink-2);border-radius:999px;padding:7px 11px;cursor:pointer}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tip{position:fixed;z-index:40;pointer-events:none;background:var(--ink);color:var(--paper);font:500 12px/1.4 var(--sans);padding:8px 10px;border-radius:8px;max-width:260px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;box-shadow:0 8px 24px rgba(38,34,28,.18)}
.tip.on{opacity:1;transform:none}
.tip b{font:600 12px/1.3 var(--mono);display:block;margin-bottom:2px}
table.data{width:100%;border-collapse:collapse;font:500 13px/1.4 var(--sans);margin-top:10px}
table.data th,table.data td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--rule-2);font-variant-numeric:tabular-nums}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data th{font:600 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* machines */
.machine .frame{background:#f2efe7}
.machine iframe{width:100%;height:clamp(440px, 58vw, 640px);border:0;background:#f2efe7}
.machine .poster{position:absolute;inset:0;display:grid;place-items:center;background:#f2efe7 center/contain no-repeat;cursor:pointer}
.machine .poster span{font:600 13px/1 var(--sans);background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:999px;box-shadow:0 3px 0 var(--leak)}
.machine .poster[hidden]{display:none}
.try{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.try .k{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.try button{font:600 13px/1 var(--sans);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 14px;cursor:pointer;transition:transform .15s var(--ease-out),box-shadow .15s}
.try button:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.try button.primary{background:var(--ink);color:var(--paper);box-shadow:2px 2px 0 var(--leak)}
.try a{font:500 13px/1 var(--sans);color:var(--muted);margin-left:auto}
.so{font:400 var(--step-0)/1.5 var(--serif);font-style:italic;color:var(--ink-2);margin:16px 0 0;max-width:44rem;padding-left:14px;border-left:1.5px solid var(--leak)}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:0}
.calc .in{padding:22px;border-right:1px solid var(--rule);display:grid;gap:18px;align-content:start}
.calc .out{padding:22px;display:grid;gap:18px;align-content:start}
@media (max-width:860px){.calc{grid-template-columns:minmax(0,1fr)}.calc .in{border-right:0;border-bottom:1px solid var(--rule)}}
.sl label{display:flex;justify-content:space-between;gap:12px;font:600 13px/1.3 var(--sans);margin-bottom:8px}
.sl label output{font:600 13px/1.3 var(--mono);color:var(--paid)}
.sl small{display:block;font:400 12px/1.4 var(--sans);color:var(--muted);margin-top:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right, var(--ink) var(--p,50%), var(--rule) var(--p,50%));border-radius:3px}
input[type=range]::-moz-range-track{height:3px;background:var(--rule);border-radius:3px}
input[type=range]::-moz-range-progress{height:3px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--card);border:1.5px solid var(--ink);margin-top:-7.5px;box-shadow:0 1px 0 var(--ink)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card);border:1.5px solid var(--ink)}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px}
.verdict{font:400 var(--step-1)/1.35 var(--serif);margin:0}
.verdict b{font-weight:600}
.identity{font:500 12.5px/1.7 var(--mono);color:var(--ink-2);background:var(--card);border:1px solid var(--rule-2);border-radius:10px;padding:12px 14px;overflow-x:auto}
.identity span{white-space:nowrap}
.identity .v{color:var(--paid);font-weight:600}

/* ---------- value chain ---------- */
.chain{padding:clamp(18px, 3vw, 32px) clamp(10px, 2vw, 22px)}
.chain svg{width:100%;height:auto;overflow:visible}
.chain .node rect{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.chain .node text.t{font:600 14.5px var(--sans);fill:var(--ink)}
.chain .node text.s{font:500 11px var(--mono);fill:var(--muted);letter-spacing:.02em}
.chain .pipe{stroke:var(--rule);stroke-width:10;stroke-linecap:round;fill:none}
.chain .tok{fill:var(--paid)}
.chain .usd{fill:var(--value)}
.chain .leakdrop{fill:var(--leak)}

/* ---------- sources / footer ---------- */
.notes{font:400 13.5px/1.55 var(--sans);color:var(--ink-2);columns:2 22rem;column-gap:44px;padding:0;margin:0;list-style:none;counter-reset:fn}
.notes li{break-inside:avoid;margin:0 0 12px;padding-left:28px;position:relative;counter-increment:fn}
.notes li::before{content:counter(fn);position:absolute;left:0;top:1px;font:600 11px/1.4 var(--mono);color:var(--paid)}
.notes li:target{background:var(--hi);border-radius:6px}
.notes a{word-break:break-word}
footer.site{border-top:1px solid var(--rule);margin-top:40px;padding:36px 0 64px;font:400 13px/1.6 var(--sans);color:var(--muted)}
footer.site a{color:var(--ink-2)}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .chart .draw{stroke-dashoffset:0!important}
  *{scroll-behavior:auto!important}
}
@media print{.bar,.try,.chart-tools{display:none}.rv{opacity:1;transform:none}}

/* ---------- machine slider rail and live sentence ---------- */
.mrail{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 28px;padding:18px 20px 16px;border:1px solid var(--rule);border-top:0;border-radius:0 0 16px 16px;background:var(--card)}
.machine .frame{border-radius:16px 16px 0 0}
.live{font:400 var(--step-0)/1.5 var(--serif);color:var(--ink);margin:16px 0 0;max-width:46rem}
.live b{font-weight:600;font-variant-numeric:tabular-nums}
.live .leak{color:var(--leak)} .live .value{color:var(--value)} .live .paid{color:var(--paid)}
.credit{font:400 12px/1.5 var(--sans);color:var(--muted);margin:8px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.credit a{color:var(--ink-2)}

/* ---------- versus (two big totals with their parts) ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,48px);padding:clamp(18px,3vw,30px)}
@media (max-width:640px){.versus{grid-template-columns:1fr}}
.versus .tot{font:400 clamp(2.4rem,1.8rem + 2.6vw,4rem)/1 var(--serif);letter-spacing:-.03em;margin:6px 0 14px;display:block}
.versus .k{font:600 11.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.vbar{display:flex;height:34px;border-radius:6px;overflow:hidden;gap:2px;background:var(--paper-2);transform-origin:0 50%;transition:transform 1.2s var(--ease-out) .2s}
.vbar i{display:block;height:100%}
.vbar i.hatch{background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.55) 5px 8px)}
.rv:not(.in) .vbar{transform:scaleX(0)}
.vparts{display:grid;gap:4px;margin-top:10px;font:500 13px/1.4 var(--sans);color:var(--ink-2)}
.vparts span{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--rule-2);padding:4px 0}
.vparts b{font:600 13px/1.4 var(--mono);color:var(--ink)}
.vparts i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:0}

/* ---------- cancel vs convert ---------- */
.levers{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:720px){.levers{grid-template-columns:1fr}}
.lever{padding:clamp(18px,3vw,28px)}
.lever + .lever{border-left:1px solid var(--rule)}
@media (max-width:720px){.lever + .lever{border-left:0;border-top:1px solid var(--rule)}}
.lever h4{font:400 var(--step-2)/1.1 var(--serif);margin:6px 0 14px;letter-spacing:-.01em}
.lever ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.lever li{display:flex;justify-content:space-between;gap:12px;font:500 14px/1.4 var(--sans);border-bottom:1px solid var(--rule-2);padding-bottom:8px}
.lever li b{font:600 13px/1.4 var(--mono);white-space:nowrap}
.lever .who{font:400 14.5px/1.5 var(--sans);color:var(--ink-2);margin:0}
.lever .who strong{color:var(--leak);font-weight:600}

/* ---------- funnel strip under the waterfall ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin:8px -1px 0}
.strip div{padding:14px 16px}
.strip div + div{border-left:1px solid var(--rule)}
.strip b{display:block;font:400 clamp(1.4rem,1.1rem + 1vw,2rem)/1.1 var(--serif);letter-spacing:-.02em}
.strip span{font:500 12.5px/1.4 var(--sans);color:var(--muted)}

/* ---------- calculator outputs ---------- */
.calc .stat .n{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem)}
.hurdles{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.hurdles li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-2);font:500 14px/1.4 var(--sans)}
.hurdles li span{color:var(--ink-2)}
.hurdles li{font-variant-numeric:tabular-nums}
.hurdles .ok{color:var(--value);font-weight:600}
.calc h4{font:600 11.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}

/* ---------- hero chain ---------- */
.hero-fig{margin-top:clamp(28px,4vw,44px)}
.hero-fig .frame{background:transparent;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0}
.howto{font:400 13.5px/1.55 var(--sans);color:var(--muted);max-width:40rem;margin:18px 0 0}
.howto .tag-rep,.howto .tag-est,.howto .tag-asm{margin:0 2px}

/* bar link to the model; chain scrolls sideways on narrow screens */
.lablink{text-decoration:none;white-space:nowrap;margin-left:6px}
@media (max-width:760px){.lablink{display:none}}
.chain{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chain svg{min-width:700px}
.chain::-webkit-scrollbar{height:6px}.chain::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}

/* ---------- Argon review round 1: side-by-side machines, slider semantics, fleet bar ---------- */
@media (min-width:1100px){
  .figure.machine{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-areas:"cap cap" "frame rail" "credit credit";column-gap:0}
  .figure.machine .fig-cap{grid-area:cap}
  .figure.machine .frame{grid-area:frame;border-radius:16px 0 0 16px}
  .figure.machine .rail{grid-area:rail;display:flex;flex-direction:column;border:1px solid var(--rule);border-left:0;border-radius:0 16px 16px 0;background:var(--card)}
  .figure.machine .mrail{grid-template-columns:1fr;border:0;border-radius:0;background:none;padding:22px 22px 6px}
  .figure.machine .live{margin:auto 22px 22px;padding-top:16px;border-top:1px solid var(--rule-2);font-size:1.02rem}
  .figure.machine .credit{grid-area:credit}
  .machine iframe{height:clamp(480px, 40vw, 560px)}
}
.sl label output{font:600 12.5px/1.2 var(--mono);font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:5px;background:var(--sl-soft,var(--paper-2));color:var(--sl,var(--ink))}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--sl,var(--ink)) var(--p,50%), var(--rule) var(--p,50%))}
input[type=range]::-moz-range-progress{background:var(--sl,var(--ink))}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:1.5px 2px 0 var(--sl,var(--ink))}
@media (pointer:coarse){input[type=range]{height:30px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10.5px}}
.sl.s-value{--sl:var(--value);--sl-soft:var(--value-soft)} .sl.s-leak{--sl:var(--leak);--sl-soft:var(--leak-soft)} .sl.s-paid{--sl:var(--paid);--sl-soft:var(--paid-soft)}
.stat .n,.live b,.identity,.hurdles,.strip b{font-variant-numeric:lining-nums tabular-nums}
.fleet{display:grid;gap:8px}
.fleet .fbar{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;background:var(--paper-2)}
.fleet .fbar i{display:block;height:100%;transition:flex-grow .25s var(--ease-out)}
.fleet .fkey{display:flex;flex-wrap:wrap;gap:4px 14px;font:500 12px/1.3 var(--sans);color:var(--ink-2)}
.fleet .fkey span{display:inline-flex;align-items:center;gap:6px}.fleet .fkey i{width:9px;height:9px;border-radius:2px;display:inline-block}
.hurdles li{cursor:pointer;border-radius:6px;padding-left:6px;padding-right:6px;margin:0 -6px;transition:background .15s}
.hurdles li:hover,.hurdles li:focus-visible{background:var(--paper-2)}
.hurdles li em{font-style:normal;font:500 11px var(--mono);color:var(--faint);margin-left:8px}
@media (max-width:560px){.machine iframe{height:clamp(540px, 142vw, 600px)}}
.swipe{display:none;font:500 11.5px var(--mono);letter-spacing:.05em;color:var(--faint);text-transform:uppercase;margin:8px 0 0}
@media (max-width:900px){.swipe{display:block}}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--paper)}
.film .frame{background:var(--paper)}

/* ---------- Argon review round 1 fixes ---------- */
.chain .legend{margin:0 0 6px 8px}
.calc .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:640px){
  .calc .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .identity span{white-space:normal;display:block;padding-left:1.5ch;text-indent:-1.5ch}
}
#ch-gates{border-radius:16px 16px 0 0}
.frame.strip{margin:0!important;border-top:0;border-radius:0 0 16px 16px}
.strip{margin:0}
@media (max-width:480px){.strip div{padding:12px 10px}.strip span{font-size:11.5px;display:block;line-height:1.3}}
@media (max-width:1099px){
  .figure.machine .rail{border:1px solid var(--rule);border-top:0;border-radius:0 0 16px 16px;background:var(--card)}
  .figure.machine .mrail{border:0;border-radius:0;background:none;padding:18px 20px 12px}
  .figure.machine .live{margin:0 20px 18px;padding-top:14px;border-top:1px solid var(--rule-2)}
}
.vbar{background:transparent}
.vbar i:first-child{border-radius:6px 0 0 6px}.vbar i:last-child{border-radius:0 6px 6px 0}
.credit{align-items:center;gap:10px 14px;margin:10px 0 0}
.credit>span:first-child{margin-right:auto}
.hurdles li{align-items:center}
.hurdles li>span:last-child{font:600 12.5px/1.2 var(--mono);padding:4px 8px;border-radius:6px;background:var(--paper-2);border:1px solid var(--rule);transition:background .15s,border-color .15s;white-space:nowrap}
.hurdles li:hover>span:last-child,.hurdles li:focus-visible>span:last-child{background:var(--card);border-color:var(--ink)}
.panel-title{font:600 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
@media (max-width:760px){.toc a{padding:10px 11px;min-width:34px;text-align:center}.toc a b{font-size:12px}}
@media (pointer:coarse){.chip{padding:10px 14px;min-height:36px}}
@media (min-width:620px){.mix-legend{display:none}}

/* film: a quiet play button over the poster; native controls appear once it plays */
.film-stage{position:relative;cursor:pointer}
.film-play{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:11px 15px;border-radius:999px;border:1.5px solid var(--ink);background:color-mix(in oklab, var(--card) 94%, transparent);color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.film-play:hover{background:var(--ink);color:var(--paper)}
.film-stage.playing .film-play{display:none}