/* The Lab's construction shows (js/construct.js; ~/.claude/skills/design/references/construction-kit.md, Tier 1).
   Every app gets every move: out of a hand, built, exploded and tagged, inspected, reconfigured, back in the hand.
   data-heat (1–7) sets how hard each show plays, and it rises down the page: the card, its ground and its chip get
   louder with it, until heat 7 spins its own background and stacks its shadows.
   The base rules are the no-script version: every stop listed, every part in the legend, no picture.
   .cs-on (set by construct.js) pins the show and scrubs it by scroll; .cs-still is the reduced-motion picture.
   No blur and no backdrop-filter anywhere in here; the only animation is a transform. */

#lab .cs{margin:clamp(28px,5cqi,56px) 0 0;color:#0b0b0c}
#lab .cs-card{position:relative;overflow:hidden;padding:clamp(14px,2.2cqi,24px);background:#fff;border:2px solid #0b0b0c;
  border-radius:4px;box-shadow:8px 8px 0 var(--shadow)}
#lab .cs-card>:not(.cs-bg){position:relative;z-index:1}
#lab .cs-card>.cs-copy{z-index:2}
#lab .cs-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* the slate: which figure, and how hot it runs */
#lab .cs-k{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;margin:0 0 clamp(10px,1.6cqi,16px);
  font:700 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#3d3d38}
#lab .cs-heat{padding:2px 8px;background:var(--acc);color:#0b0b0c;border:1.5px solid #0b0b0c;border-radius:999px;letter-spacing:.04em}

/* the stops */
#lab .cs-copy{display:grid;gap:14px}
#lab .cs-stop{margin:0}
#lab .cs-stop b{display:block;font:900 clamp(24px,4.2cqi,46px)/.98 "Archivo",system-ui,sans-serif;font-stretch:112%;letter-spacing:-.025em;text-wrap:balance}
#lab .cs-stop span{display:block;margin-top:6px;max-width:46ch;color:#3d3d38;font-size:clamp(15px,1.8cqi,19px);line-height:1.35;text-wrap:pretty}
#lab .cs-art,#lab .cs-now{display:none}

/* the parts: a numbered list of plate cards, which is also the key to the phone's numbered dots */
#lab .cs-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px;margin:18px 0 0;padding:0;
  list-style:none;counter-reset:cs}
#lab .cs-legend li{counter-increment:cs;position:relative;padding:10px 12px 10px 42px;background:#fff;color:#0b0b0c;border:1.5px solid #0b0b0c;
  border-radius:4px;box-shadow:3px 3px 0 var(--acc);font:12px/1.4 var(--mono)}
#lab .cs-legend li::before{content:counter(cs);position:absolute;left:10px;top:10px;display:grid;place-items:center;width:22px;height:22px;
  border:1.5px solid #0b0b0c;border-radius:50%;background:var(--acc);font:800 12px/1 "Archivo",system-ui,sans-serif}
#lab .cs-legend b{display:block;margin-bottom:2px;font:800 14px/1.15 "Archivo",system-ui,sans-serif}

/* ── the show, pinned and scrubbed ── */
#lab .cs-on:not(.cs-still) .cs-track{height:calc(50svh + var(--n,7) * 34svh)}
#lab .cs-on:not(.cs-still) .cs-stage{position:sticky;top:var(--cs-top,0px);height:calc(100svh - var(--cs-top,0px));padding:clamp(10px,2svh,20px) 0}
#lab .cs-on:not(.cs-still) .cs-card{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
#lab .cs-on:not(.cs-still) .cs-stop{grid-area:1/1;opacity:0}
#lab .cs-on .cs-art{display:block;position:relative;min-height:0;container-type:size;overflow:hidden}
#lab .cs-on[data-heat="6"] .cs-art,#lab .cs-on[data-heat="7"] .cs-art{overflow:visible}
#lab .cs-box{position:absolute;inset:0;margin:auto;width:min(100cqw,100cqh * 1.5625);height:min(100cqh,100cqw * .64)}
#lab .cs-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;--c:#fff}
@media (min-width:620px){
  #lab .cs-on:not(.cs-still) .cs-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* the giant word, behind the parts (heat 4 and up) */
#lab .cs-word{position:absolute;left:50%;top:50%;margin:0;opacity:0;pointer-events:none;white-space:nowrap;
  font:900 clamp(60px,16cqw,220px)/.85 "Archivo",system-ui,sans-serif;font-stretch:125%;letter-spacing:-.04em;
  color:var(--acc);-webkit-text-stroke:3px #0b0b0c;paint-order:stroke fill}

/* the tags: a card per tagged part in the side columns, a hairline to the part */
#lab .cs-tags{position:absolute;inset:0;pointer-events:none}
#lab .cs-tag{position:absolute;left:1.2%;width:24%;transform:translateY(-50%);padding:7px 9px;background:#fff;color:#0b0b0c;
  border:1.5px solid #0b0b0c;border-radius:4px;box-shadow:4px 4px 0 var(--acc);font:12px/1.35 var(--mono)}
#lab .cs-tag.r{left:auto;right:1.2%}
#lab .cs-tag b{display:block;margin-bottom:2px;font:800 14px/1.1 "Archivo",system-ui,sans-serif}
#lab .cs-tag.mini{width:auto;max-width:24%;padding:4px 8px}
#lab .cs-tag.mini b{margin:0}
#lab .cs-tag.dot{left:0;width:22px;height:22px;padding:0;display:grid;place-items:center;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--acc);box-shadow:2px 2px 0 #0b0b0c}
#lab .cs-tag.dot i{font:800 12px/1 "Archivo",system-ui,sans-serif;font-style:normal}
#lab .cs-lead line{stroke:#0b0b0c;stroke-width:1.5;vector-effect:non-scaling-stroke}
#lab .cs-lead circle{fill:var(--acc);stroke:#0b0b0c;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* the line art: ink outlines, the part's colour on top, shaded sides */
#lab .cs-svg :is(.t,.l,.r,.o,.ln,.in,.ax,.ecg,.pole,.tm,.tmh,.lp,.lph,.kr,.rays line){stroke:#0b0b0c;stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
#lab .cs-svg .t{fill:var(--c)}
#lab .cs-svg .l{fill:color-mix(in srgb,var(--c) 82%,#000)}
#lab .cs-svg .r{fill:color-mix(in srgb,var(--c) 68%,#000)}
#lab .cs-svg :is(.o,.ln,.ax,.ecg,.tmh,.lph,.kr){fill:none}
#lab .cs-svg .o{stroke-dasharray:2 7}
#lab .cs-svg .ax{stroke-dasharray:6 8;stroke-width:1.5}
#lab .cs-svg .k{fill:#0b0b0c}
#lab .cs-svg .in{fill:#fff}
#lab .cs-svg .hot{fill:#ff6b68;stroke:#0b0b0c;stroke-width:2;vector-effect:non-scaling-stroke}
#lab .cs-svg .rays line{stroke-width:3}
#lab .cs-svg .ecg{stroke-width:3}
#lab .cs-svg .sh{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:.85}
#lab .cs-svg .kr{stroke-width:9}
#lab .cs-svg .pole{stroke-width:4}
#lab .cs-svg .tm{fill:#fff}
#lab .cs-svg .tmh{stroke:#ff6b68;stroke-width:9}
#lab .cs-svg .lp{fill:rgba(255,255,255,.4);stroke-width:4}
#lab .cs-svg .lph{stroke-width:12}
#lab .cs-svg .cs-scr{fill:#0b0b0c}
#lab .cs-svg text{fill:#0b0b0c;stroke:none;text-anchor:middle;font-family:"Archivo",system-ui,sans-serif}
#lab .cs-svg .tx{font-size:14px;font-weight:700}
#lab .cs-svg .dt{font-size:18px;font-weight:900;letter-spacing:.06em}
#lab .cs-svg .dt2{font:700 14px var(--mono)}
#lab .cs-svg .dt3{font-size:44px;font-weight:900}
#lab .cs-svg .bt{font-size:16px;font-weight:800}
#lab .cs-svg .pt{font:400 16px var(--mono);text-anchor:start}
#lab .cs-svg .pt2{font-size:22px;font-weight:900}
#lab .cs-svg .dg{font-size:64px;font-weight:900}
#lab .cs-svg .f1{--c:#d2f783}
#lab .cs-svg .f2{--c:#ffaeb4}
#lab .cs-svg .f3{--c:#a3e7f4}
#lab .cs-svg .f4{--c:#c9bdf6}
#lab .cs-svg .f5{--c:#f6f08a}
#lab .cs-svg .f6{--c:#ff6b68}
#lab .cs-fx>*{fill:var(--c);stroke:#0b0b0c;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0}

/* ── heat: the ground gets louder down the page ── */
#lab .cs[data-heat="1"] .cs-bg,#lab .cs[data-heat="2"] .cs-bg{background-image:linear-gradient(#0b0b0c0f 1px,transparent 1px),
  linear-gradient(90deg,#0b0b0c0f 1px,transparent 1px);background-size:32px 32px}
#lab .cs[data-heat="2"] .cs-bg{background-image:radial-gradient(circle at 0 0,#0b0b0c2e 1.6px,transparent 2.2px),
  linear-gradient(#0b0b0c0f 1px,transparent 1px),linear-gradient(90deg,#0b0b0c0f 1px,transparent 1px)}
#lab .cs[data-heat="3"] .cs-bg,#lab .cs[data-heat="4"] .cs-bg{background:linear-gradient(#0b0b0c12 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,#0b0b0c12 1px,transparent 1px) 0 0/32px 32px,color-mix(in srgb,var(--acc) 22%,#fff)}
#lab .cs[data-heat="4"] .cs-bg{background:linear-gradient(#0b0b0c12 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,#0b0b0c12 1px,transparent 1px) 0 0/32px 32px,color-mix(in srgb,var(--acc) 34%,#fff)}
#lab .cs[data-heat="5"] .cs-bg{background:radial-gradient(circle,color-mix(in srgb,var(--acc) 70%,#fff) 3px,transparent 3.6px) 0 0/14px 14px,
  color-mix(in srgb,var(--acc) 18%,#fff)}
#lab .cs[data-heat="6"] .cs-bg{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--acc) 55%,#fff) 0 18px,#fff 18px 36px)}
#lab .cs[data-heat="7"] .cs-bg{background:#fff}
#lab .cs[data-heat="7"] .cs-bg::before{content:"";position:absolute;inset:-60%;opacity:.55;will-change:transform;
  background:repeating-conic-gradient(from 0deg,#d2f783 0 15deg,#ffaeb4 0 30deg,#a3e7f4 0 45deg,#c9bdf6 0 60deg,#f6f08a 0 75deg,#ff6b68 0 90deg);
  animation:cs-spin 24s linear infinite}
@keyframes cs-spin{to{transform:rotate(1turn)}}
#lab .cs[data-heat="5"] .cs-heat{transform:rotate(-2deg)}
#lab .cs[data-heat="6"] .cs-heat{transform:rotate(3deg);box-shadow:2px 2px 0 #0b0b0c}
#lab .cs[data-heat="7"] .cs-heat{transform:rotate(-4deg) scale(1.08);box-shadow:3px 3px 0 #0b0b0c}
/* from heat 6 the words sit on white stickers, so they read over the stripes and the spin */
#lab .cs:is([data-heat="5"],[data-heat="6"],[data-heat="7"]) :is(.cs-k,.cs-copy){justify-self:start;padding:8px 12px;background:#fff;border:2px solid #0b0b0c;
  border-radius:4px;box-shadow:5px 5px 0 var(--acc)}
#lab .cs[data-heat="7"] .cs-card{box-shadow:8px 8px 0 #d2f783,16px 16px 0 #ffaeb4,24px 24px 0 #a3e7f4}

/* ── the reduced-motion picture: the object taken apart, tagged, with the stops beside it ── */
#lab .cs-still .cs-art{display:block;position:relative;margin-top:16px;aspect-ratio:1000/640;container-type:size;overflow:hidden}
#lab .cs-still .cs-word{display:none}
#lab .cs-still .cs-copy{gap:12px}
#lab .cs-still .cs-bg::before{animation:none}
@media (prefers-reduced-motion:reduce){#lab .cs-bg::before{animation:none}}

/* ── phones: a squarer frame, numbered dots instead of tag cards, the key under the picture ── */
@media (max-width:619px){
  #lab .cs-box{width:min(100cqw,100cqh * 1.03125);height:min(100cqh,100cqw * .9697)}
  #lab .cs-stop b{font-size:clamp(22px,7.4vw,30px)}
  #lab .cs-stop span{font-size:15px}
  #lab .cs-on .cs-now{display:block;min-height:2.8em;margin:8px 0 0;font:12px/1.4 var(--mono);color:#3d3d38}
  #lab .cs-lead{display:none}
  #lab .cs-svg :is(.t,.l,.r,.o,.ln,.in,.ax,.ecg){stroke-width:1.5}
  #lab .cs-still .cs-art{aspect-ratio:660/640}
  #lab .cs[data-heat="7"] .cs-card{box-shadow:5px 5px 0 #d2f783,10px 10px 0 #ffaeb4,15px 15px 0 #a3e7f4}
}