/* deck.squarehammerlabs.com: tokens and layout follow deck-site-plan-2026-10-23.md, section 3 */
:root {
  --paper: #F4F3EF;
  --ink: #111111;
  --orange: #E8500F;
  --gray: #6B6B6B;
  --line: #D8D4CC;
  --box: #EDEAE4;
  --pass: #2F6B3A;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fall: cubic-bezier(0.55, 0, 1, 1);
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 18px; line-height: 1.35; background: var(--paper); overflow-x: hidden; }
b, strong { font-weight: 700; }
a { color: inherit; }
img { display: block; }

/* ---------- labels, captions, sources ---------- */
.lbl { font: 700 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mono { font-family: var(--mono); }
.cap { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.3; max-width: 40ch; }
.src { font: 400 11px/1.4 var(--mono); color: var(--gray); letter-spacing: .02em; }
.o { color: var(--orange); }

/* ---------- fixed chrome ---------- */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gut); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
  background: linear-gradient(var(--paper), var(--paper)) top / 100% 40px no-repeat; }
.chrome .now { color: var(--gray); }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--orange); transform-origin: 0 0; transform: scaleX(var(--pp, 0)); z-index: 51; }

/* ---------- sections ---------- */
section { position: relative; }
.pin { height: calc(var(--len, 2) * 100vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 56px var(--gut) 28px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.flat { padding: 12vh var(--gut); display: flex; flex-direction: column; justify-content: center; gap: 28px; }

/* registration crosshairs at stage corners */
.reg { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--line); }
.reg::before { left: 8px; top: 0; width: 1px; height: 18px; }
.reg::after { top: 8px; left: 0; height: 1px; width: 18px; }
.reg.tl { left: 10px; top: 46px; } .reg.tr { right: 10px; top: 46px; }
.reg.bl { left: 10px; bottom: 10px; } .reg.br { right: 10px; bottom: 10px; }

/* ---------- reveal helpers (only hidden when JS runs) ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .in .rv, .js .rv.in { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 120ms); }

/* ---------- 0. title ---------- */
#title .stage { justify-content: flex-end; padding-bottom: 12vh; }
.wordmark { font: 800 clamp(56px, min(14vw, 19vh), 220px)/.86 var(--serif); letter-spacing: -.02em; transform: scaleX(.84); transform-origin: 0 50%; }
.rule { flex-shrink: 0; height: 10px; background: var(--orange); width: min(720px, 80%); transform-origin: 0 0; }
.js .rule { transform: scaleX(0); transition: transform 1.1s var(--ease) .3s; }
.js .loaded .rule { transform: none; }
.tagline { font: 700 clamp(24px, 3.2vw, 44px)/1.1 var(--sans); }
.oneliner { font-size: clamp(18px, 1.7vw, 22px); max-width: 44ch; color: var(--gray); }
.scroll-hint { position: absolute; bottom: 20px; left: var(--gut); font: 500 11px var(--mono); letter-spacing: .2em; color: var(--gray); }

/* ---------- chapter cards: short, hard cuts, no fades ---------- */
.card { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding: 9vh var(--gut); gap: 16px; border-top: 2px solid var(--ink); }
.card .num { font: 500 13px var(--mono); letter-spacing: .14em; }
.card h2 { font: 800 clamp(40px, 7vw, 112px)/.95 var(--serif); letter-spacing: -.015em; transform: scaleX(.86); transform-origin: 0 50%; max-width: 13ch; }
.card h2 .o { display: block; }
.card .sub { font: 700 clamp(20px, 2.4vw, 32px)/1.1 var(--sans); color: var(--gray); }
.js .card .num, .js .card h2, .js .card .sub { visibility: hidden; }
.js .card.in .num, .js .card.in h2, .js .card.in .sub { visibility: visible; }

/* ---------- 1. wall of brains ---------- */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vh, 34px) 28px; }
.brain { border-top: 2px solid var(--ink); padding-top: 12px; }
.brain b { display: block; font: 700 clamp(20px, 2.4vw, 34px)/1.05 var(--sans); text-transform: uppercase; letter-spacing: .01em; }
.brain .grow { margin-top: 12px; font: 400 12px var(--mono); color: var(--gray); display: grid; gap: 5px; }
.brain .grow span { display: block; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--line); width: calc(40% + var(--p, 0) * 60%); }
.lab-arrow { display: flex; align-items: center; gap: 14px; font: 700 13px var(--sans); letter-spacing: .2em; }
.lab-arrow i { flex: 1; height: 2px; background: var(--ink); position: relative; }
.lab-arrow i::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 12px solid var(--ink); border-right: 0; }
.js #consensus .brain, .js #consensus .lab-arrow, .js #consensus .cap { opacity: 0; transform: translateY(-18px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
#consensus.s1 .brain:nth-child(1), #consensus.s2 .brain:nth-child(2), #consensus.s3 .brain:nth-child(3), #consensus.s4 .brain:nth-child(4),
#consensus.s5 .brain:nth-child(5), #consensus.s6 .brain:nth-child(6), #consensus.s7 .brain:nth-child(7), #consensus.s7 .brain:nth-child(8),
#consensus.s8 .lab-arrow, #consensus.s9 .cap { opacity: 1 !important; transform: none !important; }

/* ---------- 2. then the robot ships ---------- */
.ships { display: grid; gap: 18px; }
.factory { width: min(100%, calc(50vh * 800 / 420)); margin: 0 auto; }
.factorysvg { width: 100%; height: auto; display: block; }
.factorysvg .belt-stripes { animation: belt .5s linear infinite; }
@keyframes belt { to { transform: translateX(-24px); } }
.factorysvg .link { stroke: var(--ink); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.factorysvg .link.inner { stroke: var(--paper); stroke-width: 14; }
.factorysvg .joint { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.factorysvg .gripper line { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.factorysvg .pad { fill: var(--ink); }
.factorysvg.worn .pad { fill: var(--orange); }
.factorysvg .part { fill: var(--box); stroke: var(--ink); stroke-width: 2; }
.factorysvg .miss { stroke: var(--orange); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.factorysvg .miss.on { opacity: 1; }
.factorysvg .dark { fill: var(--ink); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.factorysvg .lamp { fill: #FFF6D8; stroke: var(--ink); stroke-width: 1.5; transition: fill .6s var(--ease); }
.factorysvg.night .lamp { fill: #3A3A3A; }
.factorysvg.night .dark { opacity: .45; }
.factorysvg .ok { fill: var(--pass); font: 700 14px var(--mono); letter-spacing: .1em; opacity: 0; }
.factorysvg .ok.on { opacity: 1; }
.factorysvg .sign { font: 700 12px var(--mono); letter-spacing: .12em; fill: var(--gray); }
.ticks { position: relative; height: 56px; border-top: 2px solid var(--ink); margin-top: 4px; }
.tick { position: absolute; top: -8px; transform: translateX(-50%); text-align: center; font: 500 10px/1.2 var(--mono); letter-spacing: .06em; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.tick::before { content: ""; display: block; margin: 0 auto 6px; width: 10px; height: 14px; background: repeating-linear-gradient(45deg, var(--orange) 0 2px, transparent 2px 5px); border: 1px solid var(--orange); }
.tick.t0::before { background: var(--pass); border-color: var(--pass); }
.tick em { display: block; font-style: normal; color: var(--orange); font-weight: 600; }
.tick em.ok { color: var(--pass); }
#ships.a0 .t0, #ships.a1 .t1, #ships.a2 .t2, #ships.a3 .t3 { opacity: 1; }
.bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lab cap" "floor cap" "src cap"; gap: 14px clamp(24px, 4vw, 64px); align-items: start; }
.bar.lab { grid-area: lab; } .bar.floor { grid-area: floor; } .bars .src { grid-area: src; } .bars .cap { grid-area: cap; align-self: center; }
.bar .row { display: flex; justify-content: space-between; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.bar .row .mono { font-size: 22px; letter-spacing: 0; }
.bar .track { height: 26px; background: var(--box); }
.bar .fill { height: 100%; width: var(--w); background: var(--ink); transform-origin: 0 0; }
.bar.floor .fill { background: var(--orange); }
.js #ships .fill { transform: scaleX(0); transition: transform 1s var(--ease); }
.js #ships.lab-on .bar.lab .fill, .js #ships.floor-on .bar.floor .fill { transform: none; }
.js #ships .bar, .js #ships .src, .js #ships .cap { opacity: 0; transition: opacity .4s var(--ease); }
#ships.lab-on .bar.lab, #ships.floor-on .bar.floor, #ships.floor-on .src, #ships.cap-on .cap { opacity: 1; }
.bars .cap { font-size: clamp(18px, 1.8vw, 24px); max-width: none; }

/* ---------- 2b. two problems ---------- */
.split { display: grid; grid-template-columns: 140px 1fr 1fr; border-top: 2px solid var(--ink); }
.split > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.8vw, 25px); }
.split .hd { font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding-top: 14px; }
.split .k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); padding-top: 18px; }
.split .r { font-weight: 700; }
.split .l { transition: color .8s var(--ease); }
#twoproblems.s6 .split .l { color: #B9B5AE; }
#twoproblems.s6 .split .r .o2 { color: var(--orange); }
.js #twoproblems [data-row] { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
#twoproblems.s1 [data-row="1"], #twoproblems.s2 [data-row="2"], #twoproblems.s3 [data-row="3"], #twoproblems.s4 [data-row="4"], #twoproblems.s5 [data-row="5"] { opacity: 1; transform: none; }
.js #twoproblems .cap { opacity: 0; transition: opacity .5s; }
#twoproblems.s6 .cap { opacity: 1; }

/* ---------- 3. market map (SVG, built in app.js) ---------- */
#map .stage { gap: 14px; }
.mapwrap { width: 100%; }
.mapsvg { width: 100%; height: auto; max-height: 66vh; display: block; }
.mapsvg text { font-family: var(--sans); }
.mapsvg .lbl { font: 700 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); }
.mapsvg .lbl.o { fill: var(--orange); }
.mapsvg .col rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.mapsvg .col .top { fill: var(--ink); stroke: none; }
.mapsvg .col text { font: 700 15px var(--sans); fill: var(--ink); }
.mapsvg .dep rect { fill: var(--box); stroke: #CFCAC1; stroke-width: 1.5; }
.mapsvg .dep .t { font: 700 18px var(--sans); fill: var(--ink); }
.mapsvg .dep .n { font: 400 13px var(--sans); fill: var(--gray); }
.mapsvg .dep .s { font: 500 12px var(--mono); fill: var(--orange); }
.mapsvg .tools rect { fill: none; stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 6 4; }
.mapsvg .tools .n { font: 400 13px var(--sans); fill: var(--gray); }
.mapsvg .tools .s { font: 700 12px var(--mono); fill: var(--orange); }
.mapsvg .tools .x { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.mapsvg .arrow { fill: none; stroke-width: 2; }
.mapsvg .arrow.gray { stroke: #9A958C; }
.mapsvg .arrow.ink { stroke: var(--ink); }
.mapsvg .arrow.up { stroke: var(--orange); stroke-dasharray: 6 5; }
.mapsvg .arrow.tune { stroke: var(--orange); stroke-dasharray: 3 5; }
.mapsvg .alabel { font: 600 10px var(--mono); letter-spacing: .06em; fill: var(--gray); }
.mapsvg .alabel.o { fill: var(--orange); }
.mapsvg .gap rect { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 8 6; }
.mapsvg .gap text { font: 700 22px var(--sans); letter-spacing: .18em; fill: var(--orange); text-anchor: middle; }
.mapsvg .band .bg { fill: var(--ink); }
.mapsvg .band .edge { fill: var(--orange); }
.mapsvg .band .h { font: 700 15px var(--sans); letter-spacing: .12em; fill: var(--paper); }
.mapsvg .band .h tspan { fill: var(--orange); }
.mapsvg .band .step rect { fill: none; stroke: #555; stroke-width: 1; }
.mapsvg .band .step text { font: 700 11.5px var(--sans); letter-spacing: .06em; fill: var(--paper); text-anchor: middle; text-transform: uppercase; }
@keyframes march { to { stroke-dashoffset: -22; } }
.mapsvg .flow { animation: march .7s linear infinite; animation-play-state: paused; }
#map.s4 .mapsvg .flow { animation-play-state: running; }
.js .mapsvg .col { opacity: 0; transform: translateY(-30px); transition: opacity .35s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .mapsvg .s1x, .js .mapsvg .s2x, .js .mapsvg .s3x, .js .mapsvg .s4x, .js .mapsvg .s5x { opacity: 0; transition: opacity .4s var(--ease); }
.js .mapsvg .dep { transform: translateY(30px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.js .mapsvg .band .bg, .js .mapsvg .band .edge { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.js .mapsvg .band .h, .js .mapsvg .band .step { opacity: 0; transition: opacity .3s var(--ease) .5s; }
#map.s1 .mapsvg .col, #map.s1 .mapsvg .s1x { opacity: 1; transform: none; }
#map.s2 .mapsvg .s2x { opacity: 1; transform: none; }
#map.s3 .mapsvg .s3x { opacity: 1; }
#map.s4 .mapsvg .s3x { opacity: 0; }
#map.s4 .mapsvg .s4x { opacity: 1; }
#map.s4 .mapsvg .band .bg, #map.s4 .mapsvg .band .edge { transform: none; }
#map.s4 .mapsvg .band .h, #map.s4 .mapsvg .band .step { opacity: 1; }
#map.s5 .mapsvg .s5x { opacity: 1; }
.mapfoot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.mapfoot .cap { font-size: clamp(17px, 1.6vw, 22px); max-width: none; }
.key { display: grid; gap: 6px; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--gray); }
.key i { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--orange); margin-right: 8px; vertical-align: 3px; }
.key .k-down { border-top: 2px solid var(--ink); } .key .k-gray { border-top: 2px solid #9A958C; }
.js #map .mapfoot { opacity: 0; transition: opacity .45s var(--ease); }
#map.s6 .mapfoot { opacity: 1; }

/* ---------- 4/5. the loop ---------- */
.loopwrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; align-items: center; }
.loopsvg { width: 100%; max-height: 78vh; aspect-ratio: 1; display: block; margin: 0 auto; overflow: visible; }
.loopsvg .track { fill: none; stroke: var(--line); stroke-width: 2; }
.loopsvg .node rect { stroke: var(--ink); stroke-width: 2; }
.loopsvg .node.solid rect { fill: var(--ink); }
.loopsvg .node.solid text { fill: var(--paper); }
.loopsvg .node.outline rect { fill: var(--paper); stroke-dasharray: 7 5; }
.loopsvg .node.outline text { fill: var(--ink); }
.loopsvg .node text { font: 700 23px var(--sans); letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; }
.loopsvg .node.active rect { stroke: var(--orange); stroke-width: 4; }
.loopsvg .node.dim { opacity: .25; }
.loopsvg .marker { fill: var(--orange); }
.loopsvg .shortcut { fill: none; stroke: var(--orange); stroke-width: 3; }
.loopsvg .lookup { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 6; }
.loopsvg .arclabel { font: 600 20px var(--mono); fill: var(--orange); text-anchor: middle; letter-spacing: .08em; }
.loopsvg .lookuplabel { font: 600 17px var(--mono); fill: var(--ink); text-anchor: middle; letter-spacing: .08em; }
.loopsvg .center { font: 500 20px var(--mono); fill: var(--gray); text-anchor: middle; letter-spacing: .1em; }
.legend { display: flex; gap: 18px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.legend i { display: inline-block; width: 14px; height: 10px; border: 1.5px solid var(--ink); vertical-align: -1px; margin-right: 6px; }
.legend .s i { background: var(--ink); }
.legend .d i { border-style: dashed; }
.side { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.insets { position: relative; min-height: 230px; border-top: 2px solid var(--ink); padding-top: 14px; }
.inset { display: none; }
.inset.on { display: block; animation: cut .01s; }
.inset h3 { font: 700 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.inset .say { font: 500 13px/1.45 var(--mono); margin-top: 12px; }
.inset .shot { border: 1.5px solid var(--ink); overflow: hidden; max-height: 150px; }
.inset .shot img { width: 100%; height: auto; }
.readout { font: 500 14px/1.6 var(--mono); }
.readout .k { color: var(--gray); }
.js #loop .readout, .js #loop .cap { opacity: 0; transition: opacity .5s; }
#loop.done .readout, #loop.done .cap { opacity: 1; }
@keyframes cut { from { opacity: 1; } to { opacity: 1; } }

/* inset drawings */
.chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 700 12px var(--sans); letter-spacing: .08em; }
.chips span { border: 1.5px solid var(--ink); padding: 8px 10px; }
.chips span.dashed { border-style: dashed; }
.chips .arrow { border: 0; padding: 0; }
.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gate { border: 1.5px solid var(--ink); height: 70px; position: relative; overflow: hidden; font: 600 10px var(--mono); padding: 6px; letter-spacing: .06em; }
.gate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--pass); transform: scaleX(0); transform-origin: 0 0; animation: grow .5s var(--ease) forwards; animation-delay: calc(var(--i) * .45s + .2s); }
@keyframes grow { to { transform: scaleX(1); } }
.traces svg { width: 100%; height: auto; display: block; }
.traces path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.6s linear forwards; }
.traces path:nth-child(2) { animation-delay: .1s; } .traces path:nth-child(3) { animation-delay: .2s; } .traces path:nth-child(4) { animation-delay: .3s; } .traces path:nth-child(5) { animation-delay: .4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fan span { border: 1.5px solid var(--line); padding: 10px 6px; font: 700 11px var(--sans); letter-spacing: .08em; text-align: center; color: var(--gray); animation: pick .01s forwards 1.2s; }
.fan span.pick { animation: picked .01s forwards 1.2s; }
@keyframes pick { to { opacity: .35; } }
@keyframes picked { to { border-color: var(--orange); color: var(--ink); background: #fff; } }
.fleet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fleet i { aspect-ratio: 1; border: 1.5px dashed var(--ink); animation: lit .01s forwards; animation-delay: calc(var(--i) * 160ms + 200ms); }
@keyframes lit { to { background: var(--ink); border-style: solid; } }
.lib { display: flex; flex-direction: column; gap: 4px; width: 60%; }
.lib i { height: 14px; border: 1.5px solid var(--ink); background: var(--box); }
.lib i.new { background: var(--orange); border-color: var(--orange); transform: translateY(-60px); opacity: 0; animation: lesson .6s var(--ease) forwards .3s; }
@keyframes lesson { to { transform: none; opacity: 1; } }
.lib b { font: 700 12px var(--sans); letter-spacing: .14em; margin-top: 6px; }

/* the next robot */
.laps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 2px solid var(--ink); padding-top: 14px; }
.laps h4 { font: 700 12px var(--sans); letter-spacing: .14em; margin-bottom: 8px; }
.laps p { font: 500 15px/1.6 var(--mono); }
.laps .l2 { color: var(--orange); }
.js #lap2 .l2 p, .js #lap2 .cap, .js #lap2 .src { opacity: 0; transition: opacity .4s; }
#lap2.swap .l2 p, #lap2.done .cap, #lap2.done .src { opacity: 1; }
#lap2 .cap { font-weight: 700; }
.episode { font: 500 12px var(--mono); color: var(--gray); letter-spacing: .04em; }

/* ---------- 6 + 8. footage ---------- */
.crop { position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); background: var(--box); border: 1.5px solid var(--ink); }
.crop video, .crop img { position: absolute; width: calc(1200 / var(--w) * 100%); height: auto; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); max-width: none; aspect-ratio: 1200 / 834; object-fit: cover; }
.crop.sig { width: min(100%, calc(40vh * 1090 / 312)); }
.crop.hw { width: min(100%, calc(52vh * 1088 / 382)); }
.crop.sig { --x: 56; --y: 412; --w: 1090; --h: 312; }
.crop.hw { --x: 56; --y: 104; --w: 1088; --h: 382; }
.redraw svg { width: 100%; height: auto; display: block; }
.redraw .trace { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.redraw .amber { fill: var(--orange); opacity: .14; }
.redraw .m2 { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.redraw text { font: 600 13px var(--mono); letter-spacing: .06em; }
.js #signal .m1g, .js #signal .m2g, .js #signal .cap, .js #signal .src { opacity: 0; transition: opacity .25s; }
#signal.s2 .m1g, #signal.s3 .m2g, #signal.s4 .cap, #signal.s4 .src { opacity: 1; }
.hwlabels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font: 600 12px var(--mono); letter-spacing: .06em; }
.hwlabels .f { color: var(--orange); }
.hwlabels .p { color: var(--pass); }

/* ---------- 7. evidence ---------- */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); }
.field h4 { font: 700 12px var(--sans); letter-spacing: .14em; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.field h4 .mono { font-size: clamp(36px, 5vw, 72px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.grid200 { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.grid200 i { aspect-ratio: 1; border: 1px solid var(--line); background: transparent; }
.grid200 i.f { background: var(--orange); border-color: var(--orange); }
.field.cam h4 .mono { color: var(--gray); }
.js #evidence .cap, .js #evidence .src { opacity: 0; transition: opacity .4s; }
#evidence.done .cap, #evidence.done .src { opacity: 1; }

/* ---------- 9. three layers, three failures (SVG, built in app.js) ---------- */
.layerswrap { width: 100%; }
.layerssvg { width: 100%; height: auto; max-height: 64vh; display: block; }
.layerssvg text { font-family: var(--sans); }
.layerssvg .hd { font: 700 13px var(--sans); letter-spacing: .14em; fill: var(--ink); }
.layerssvg .hd.o { fill: var(--orange); }
.layerssvg .clock { font: 600 14px var(--mono); fill: var(--ink); text-anchor: end; letter-spacing: .06em; }
.layerssvg .clock.o { fill: var(--orange); }
.layerssvg .under { font: 500 12px var(--mono); fill: var(--gray); letter-spacing: .06em; }
.layerssvg .layer rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.layerssvg .layer .sys { font: 500 11px var(--mono); letter-spacing: .08em; fill: var(--gray); }
.layerssvg .layer .what { font: 700 16px var(--sans); fill: var(--ink); }
.layerssvg .fail rect { fill: var(--orange); stroke: var(--orange); stroke-width: 1.5; }
.layerssvg .fail text { font: 700 12px var(--mono); letter-spacing: .08em; fill: #fff; text-anchor: middle; }
.layerssvg .fail .fix { font: 600 10.5px var(--mono); letter-spacing: .06em; fill: var(--pass); text-anchor: middle; opacity: 0; transition: opacity .3s; }
.layerssvg .fail .fix.no { fill: var(--gray); }
.layerssvg .fail rect, .layerssvg .fail text { transition: fill .3s var(--ease), stroke .3s var(--ease); }
#layers.s4 .layerssvg .vendor .f2 rect, #layers.s5 .layerssvg .shl .fail rect { fill: var(--pass); stroke: var(--pass); }
#layers.s4 .layerssvg .vendor .f1 rect, #layers.s4 .layerssvg .vendor .f3 rect { fill: none; stroke: var(--orange); stroke-dasharray: 5 4; }
#layers.s4 .layerssvg .vendor .f1 text, #layers.s4 .layerssvg .vendor .f3 text { fill: var(--orange); }
#layers.s4 .layerssvg .vendor .fix, #layers.s5 .layerssvg .shl .fix { opacity: 1; }
#layers.s4 .layerssvg .vendor .fix.no { fill: var(--gray); }
.layerssvg .score { font: 500 44px var(--mono); fill: var(--ink); letter-spacing: -.02em; }
.layerssvg .score.o { fill: var(--orange); }
.layerssvg .scorelbl { font: 700 12px var(--sans); letter-spacing: .14em; fill: var(--gray); }
.js .layerssvg .fail { transform: translateY(-460px); transition: transform .55s var(--fall); }
.js .layerssvg .f2 { transition-delay: .06s; } .js .layerssvg .f3 { transition-delay: .12s; }
#layers.s1 .layerssvg .fail.f1, #layers.s2 .layerssvg .fail.f2, #layers.s3 .layerssvg .fail.f3 { transform: none; }
.js .layerssvg .s4x, .js .layerssvg .s5x { opacity: 0; transition: opacity .4s var(--ease); }
#layers.s4 .layerssvg .s4x, #layers.s5 .layerssvg .s5x { opacity: 1; }
.js #layers .cap { opacity: 0; transition: opacity .5s; }
#layers.s6 .cap { opacity: 1; }

/* ---------- 10. partners, 11. team ---------- */
.partners { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.partner .logo { display: flex; align-items: center; gap: 12px; }
.partner .logo b { font: 700 clamp(22px, 2.6vw, 34px)/1 var(--sans); letter-spacing: -.01em; }
.partner .logo .word { font-size: clamp(26px, 3vw, 40px); letter-spacing: .04em; }
.partner > span { font-size: clamp(16px, 1.5vw, 20px); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; border-top: 2px solid var(--ink); padding-top: 24px; }
.member { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 6px 16px; align-content: start; }
.member .face { grid-row: 1 / 4; width: 88px; height: 88px; object-fit: cover; border: 1.5px solid var(--ink); filter: grayscale(1) contrast(1.05); }
.member .who b { display: block; font: 700 clamp(17px, 1.6vw, 22px)/1.1 var(--sans); }
.member .role { display: block; font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--gray); text-transform: uppercase; margin-top: 3px; }
.member p { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.35; }
.member .logos { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; row-gap: 10px; }
.member.also { grid-template-columns: 1fr; }
.member.also .who { margin-top: 2px; }
.hiring { font-weight: 700; color: var(--orange); font-size: clamp(16px, 1.5vw, 20px); }

/* ---------- 12. timeline ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 30px; }
.timeline::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: 0 0; }
.js .timeline::before { transform: scaleX(0); transition: transform 1.6s var(--ease); }
.js .in .timeline::before { transform: none; }
.mark { position: relative; }
.mark::before { content: ""; position: absolute; top: -28px; left: 0; width: 14px; height: 14px; background: var(--orange); }
.mark h4 { font: 600 13px var(--mono); letter-spacing: .08em; margin-bottom: 10px; }
.mark ul { list-style: none; display: grid; gap: 8px; font-size: clamp(15px, 1.4vw, 18px); }
.mark li { padding-left: 14px; position: relative; }
.mark li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1.5px; background: var(--ink); }

/* ---------- 13. raise ---------- */
.amount { font: 500 clamp(64px, 12vw, 180px)/.9 var(--mono); letter-spacing: -.04em; }
.amount small { font-size: .32em; letter-spacing: 0; }
.raise p { font-size: clamp(18px, 1.8vw, 24px); max-width: 40ch; }
.contact { font: 600 clamp(16px, 1.6vw, 20px) var(--mono); }
.endmark { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.endmark .wm { font: 800 34px/.9 var(--serif); transform: scaleX(.84); transform-origin: 0 50%; }
.endmark .rule { width: 220px; height: 6px; transform: none; }

/* ---------- reduced motion: final frames, no movement ---------- */
.rm *, .rm *::before, .rm *::after { transition: none !important; animation-duration: .01s !important; animation-delay: 0s !important; }
.rm .flow, .rm .belt-stripes { animation: none !important; }

/* ---------- mobile: no pinning, each scene plays once as it enters ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .pin { height: auto !important; }
  .stage { position: relative; height: auto; min-height: 100svh; padding: 72px 16px 40px; }
  .flat, .card { padding-left: 16px; padding-right: 16px; }
  .card { min-height: 0; }
  .reg { display: none; }
  .chrome > span:first-child { display: none; }
  .chrome { justify-content: flex-end; }
  .wall { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .ships { grid-template-columns: 1fr; gap: 24px; }
  .factorysvg { max-height: none; }
  .ticks { height: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 10px; }
  .tick { position: static; transform: none; white-space: normal; font-size: 8px; }
  .bars { grid-template-columns: 1fr; grid-template-areas: "lab" "floor" "src" "cap"; }
  .split { grid-template-columns: 1fr 1fr; }
  .split .k { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
  .split .hd.blank { display: none; }
  .mapwrap, .layerswrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mapsvg { min-width: 980px; max-height: none; }
  .layerssvg { min-width: 760px; max-height: none; }
  .mapfoot { grid-template-columns: 1fr; gap: 14px; }
  .loopwrap { grid-template-columns: 1fr; gap: 20px; }
  .loopsvg { max-height: none; }
  .crop.sig { --w: 552; }
  .hwlabels { font-size: 10px; }
  .fields { grid-template-columns: 1fr; }
  .partner { grid-template-columns: 1fr; gap: 8px; }
  .team { grid-template-columns: 1fr; gap: 22px; }
  .timeline { grid-template-columns: 1fr; padding-top: 0; padding-left: 28px; }
  .timeline::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .js .timeline::before { transform: scaleY(0); }
  .mark::before { top: 2px; left: -28px; }
}

/* ---------- 2c. the market ---------- */
.market { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.market .big { font-size: clamp(64px, 9vw, 150px); line-height: 1; letter-spacing: -.04em; margin: 10px 0 6px; }
.mk-add { font: 600 clamp(16px, 1.6vw, 22px) var(--mono); color: var(--orange); margin-bottom: 10px; }
.dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; margin-top: 12px; }
.dots i { aspect-ratio: 1; border: 1.5px dashed var(--line); }
.dots i.on { background: var(--ink); border: 1.5px solid var(--ink); }
.mk-legend { display: grid; gap: 6px; margin-top: 12px; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--gray); }
.mk-legend i { display: inline-block; width: 10px; height: 10px; border: 1.5px dashed var(--line); margin-right: 8px; vertical-align: -1px; }
.mk-legend i.on { background: var(--ink); border: 1.5px solid var(--ink); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 2px solid var(--ink); padding-top: 14px; }
.fact b { display: block; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.15; margin-bottom: 6px; }
.fact span { font-size: clamp(14px, 1.3vw, 17px); color: var(--gray); }
.js #market .mk-left, .js #market .mk-right, .js #market .fact, .js #market .cap { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
#market.s1 .mk-left, #market.s2 .mk-right, #market.s3 [data-f="1"], #market.s4 [data-f="2"], #market.s5 [data-f="3"], #market.s6 .cap { opacity: 1; transform: none; }

/* ---------- 5b. the clock ---------- */
.clock { display: grid; grid-template-columns: 120px 1fr 1fr; border-top: 2px solid var(--ink); }
.clock > div { padding: 9px 16px 9px 0; border-bottom: 1px solid var(--line); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.3; }
.clock .ch { font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding-top: 12px; }
.clock .ck { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); padding-top: 12px; }
.clock .cb { color: var(--ink); transition: color .8s var(--ease); }
.clock .ca b { display: block; font: 700 clamp(17px, 1.7vw, 23px)/1.1 var(--sans); color: var(--orange); margin-bottom: 2px; }
.clock .ca span { color: var(--gray); }
.clock .ca em { display: inline-block; font: 600 9px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; border: 1.5px dashed var(--ink); color: var(--ink); padding: 2px 5px; margin-left: 8px; vertical-align: 1px; }
.js #clock [data-row] { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
#clock.s1 [data-row="1"], #clock.s2 [data-row="2"], #clock.s3 [data-row="3"], #clock.s4 [data-row="4"], #clock.s5 [data-row="5"], #clock.s6 [data-row="6"], #clock.s7 [data-row="7"], #clock.s8 [data-row="8"] { opacity: 1; transform: none; }
#clock.s9 .clock .cb { color: #B9B5AE; }
.js #clock .cap, .js #clock .src { opacity: 0; transition: opacity .5s; }
#clock.s9 .cap, #clock.s9 .src { opacity: 1; }

/* ---------- 8b. two voices ---------- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
blockquote { border: 1.5px solid var(--ink); padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
blockquote p { font: 700 clamp(22px, 2.4vw, 34px)/1.15 var(--sans); }
blockquote cite { font: 500 11px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
blockquote.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
blockquote.dark cite { color: #B9B5AE; }

/* ---------- 11b. the business ---------- */
.biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 2px solid var(--ink); padding-top: 18px; }
.bz h4 { font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.bz p { font-size: clamp(15px, 1.4vw, 19px); }
.ladder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 700 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ladder span { border: 1.5px solid var(--ink); padding: 8px 12px; }
.ladder i { flex: 0 0 26px; height: 2px; background: var(--ink); position: relative; }
.ladder i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.moat { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 36px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.moat .mt b { display: block; font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.moat .mt span { display: block; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--gray); margin-top: 6px; }
.moat p { font-size: clamp(15px, 1.4vw, 19px); max-width: 44ch; }

/* ---------- 13. use of funds ---------- */
.funds ol { list-style: none; counter-reset: f; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-top: 10px; max-width: 900px; }
.funds li { counter-increment: f; font-size: clamp(14px, 1.3vw, 17px); color: var(--gray); padding-left: 28px; position: relative; }
.funds li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 500 11px var(--mono); color: var(--orange); }
.funds li b { color: var(--ink); }

@media (max-width: 760px) {
  .market, .facts, .quotes, .biz { grid-template-columns: 1fr; }
  .clock { grid-template-columns: 1fr 1fr; }
  .clock .ck { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
  .clock .ch.blank { display: none; }
  .moat { grid-template-columns: 1fr 1fr; }
  .moat p { grid-column: 1 / -1; }
  .funds ol { grid-template-columns: 1fr; }
}

/* ---------- Oct 27 pass: fewer caveats, flywheel, auto-play ---------- */
.fan { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fan span { padding: 7px 4px; font-size: 9.5px; letter-spacing: .05em; }
.inset .shot.full { max-height: none; }
.loopsvg .ring path { fill: #B9B5AE; }
.mapsvg .arrow.big { stroke-width: 3; }
.mapsvg .band .wf { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.laps p b { display: block; font: 700 clamp(22px, 2.4vw, 34px)/1.1 var(--sans); margin: 2px 0; }
.pct { font-size: clamp(16px, 1.5vw, 20px); }
.pct .mono { font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -.02em; margin-right: 8px; }
.js #lap2 .pct { opacity: 0; transition: opacity .4s; }
#lap2.swap .pct { opacity: 1; }
/* push to fleet: the fix hops arm to arm through gates */
.fleetsvg { width: 100%; height: auto; display: block; }
.fleetsvg line { stroke: var(--ink); stroke-width: 2; }
.fleetsvg .arm rect { fill: var(--box); stroke: var(--ink); stroke-width: 1.5; }
.fleetsvg .arm path { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.fleetsvg .arm circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.fleetsvg .gate rect { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fleetsvg .gate text { font: 700 9px var(--mono); fill: var(--ink); text-anchor: middle; letter-spacing: .1em; }
.fleetsvg .fix { fill: var(--orange); animation: fixhop 4.2s var(--ease) forwards; }
.fleetsvg .fixlbl { font: 600 9px var(--mono); fill: var(--orange); text-anchor: middle; letter-spacing: .1em; }
@keyframes fixhop { 0% { transform: translateX(45px); } 22% { transform: translateX(100px); } 38% { transform: translateX(100px); } 50% { transform: translateX(150px); } 68% { transform: translateX(205px); } 84% { transform: translateX(205px); } 100% { transform: translateX(255px); } }
.fleetsvg .gate.g1 rect { animation: gatepass .01s forwards 1.5s; }
.fleetsvg .gate.g2 rect { animation: gatepass .01s forwards 3.4s; }
@keyframes gatepass { to { fill: var(--pass); stroke: var(--pass); stroke-dasharray: 0; } }
.fleetsvg .gate.g1 text { animation: gatetxt .01s forwards 1.5s; } .fleetsvg .gate.g2 text { animation: gatetxt .01s forwards 3.4s; }
@keyframes gatetxt { to { fill: #fff; } }
.fleetsvg .arm.a1 path { stroke: var(--orange); }
.fleetsvg .arm.a2 path { animation: armgot .01s forwards 2.1s; } .fleetsvg .arm.a3 path { animation: armgot .01s forwards 4.2s; }
@keyframes armgot { to { stroke: var(--orange); } }
/* learn: a lesson joins the library and goes to every fleet */
.libsvg { width: 100%; height: auto; display: block; }
.libsvg .shelf { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.libsvg .t { font: 700 10px var(--sans); fill: var(--ink); text-anchor: middle; letter-spacing: .14em; }
.libsvg .card { fill: var(--box); stroke: var(--ink); stroke-width: 1; }
.libsvg .card.new { fill: var(--orange); stroke: var(--orange); transform: translate(-70px, -90px); animation: dock .6s var(--ease) forwards .2s; }
@keyframes dock { to { transform: none; } }
.libsvg .send { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 120; stroke-dashoffset: 120; animation: sendit .7s linear forwards; }
.libsvg .send.s0 { animation-delay: 1s; } .libsvg .send.s1 { animation-delay: 1.2s; } .libsvg .send.s2 { animation-delay: 1.4s; }
@keyframes sendit { to { stroke-dashoffset: 0; } }
.libsvg .fleet rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.libsvg .fleet text { font: 700 9px var(--mono); fill: var(--ink); text-anchor: middle; letter-spacing: .1em; }
.libsvg .fleet .got { fill: var(--orange); opacity: 0; animation: show .01s forwards; }
.libsvg .fleet.f0 .got { animation-delay: 1.7s; } .libsvg .fleet.f1 .got { animation-delay: 1.9s; } .libsvg .fleet.f2 .got { animation-delay: 2.1s; }
/* research */
.rd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; border-top: 2px solid var(--ink); padding-top: 18px; }
.rp h4 { font: 700 clamp(18px, 1.7vw, 24px)/1.15 var(--sans); margin: 8px 0 8px; }
.rp p { font-size: clamp(14px, 1.25vw, 17px); }
.rp em { display: block; margin-top: 8px; font: 500 11.5px/1.4 var(--mono); font-style: normal; color: var(--gray); letter-spacing: .02em; }
.rp .lbl { font-size: 11px; color: var(--gray); }
.rp .lbl.o { color: var(--orange); }
.rp.next { border-top: 1.5px dashed var(--ink); padding-top: 12px; }
@media (max-width: 760px) { .rd { grid-template-columns: 1fr; } .fan { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 2b. cost per task ---------- */
.costgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.costgrid .big { font-size: clamp(56px, 8vw, 140px); line-height: 1; letter-spacing: -.04em; margin: 10px 0 10px; }
.ct-now { font-size: clamp(15px, 1.4vw, 19px); color: var(--gray); }
.ct-goal { font: 700 clamp(17px, 1.7vw, 24px) var(--sans); color: var(--orange); margin-top: 8px; opacity: 0; transition: opacity .4s var(--ease); }
#cost.goal .ct-goal { opacity: 1; }
.ratio { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start; margin-top: 12px; }
.eng { text-align: center; font: 600 10px var(--mono); letter-spacing: .1em; color: var(--gray); }
.eng i { display: block; width: 44px; height: 64px; margin: 0 auto 8px; border: 2px solid var(--ink); border-radius: 22px 22px 6px 6px; position: relative; }
.eng i::before { content: ""; position: absolute; left: 12px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
.robots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.robots i { aspect-ratio: 1; border: 1.5px dashed var(--line); }
.robots i.on { background: var(--orange); border: 1.5px solid var(--orange); }
.ct-tasks { margin-top: 12px; font-size: clamp(15px, 1.4vw, 19px); }
.ct-tasks .mono { font-weight: 500; }
.ct-tasks .x { color: var(--gray); margin: 0 4px; }
.js #cost .ct-left, .js #cost .ct-right, .js #cost .cap { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
#cost.s1 .ct-left, #cost.s2 .ct-right, #cost.s5 .cap { opacity: 1; transform: none; }
#cost .cap { max-width: 52ch; }
@media (max-width: 760px) { .costgrid { grid-template-columns: 1fr; } }