/* =====================================================================
   PRECISION KIT  ·  the one theme for the Oppr landing page
   Every section variant uses ONLY these tokens, type classes and parts.
   No new colours, fonts, radii or shadows inside a section.
   ===================================================================== */

/* ---------- tokens ---------- */
/* CLS: Arial sized to Geist (width per weight, measured on the home hero), so text wraps the same before and after
   the web font swaps in. Line heights are set everywhere, so the overrides only place the baseline. */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:100 449;size-adjust:102.8%;ascent-override:97.8%;descent-override:28.7%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:450 649;size-adjust:105.2%;ascent-override:95.5%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");font-weight:650 900;size-adjust:101.8%;ascent-override:98.7%;descent-override:29%;line-gap-override:0%}
:root{
  /* paper and ink (fixed) */
  --paper:#eceff1;          /* page ground, cool steel-grey paper */
  --paper-2:#e3e7ea;        /* alternate band */
  --panel:#f7f8f9;          /* raised surface */
  --white:#ffffff;
  --ink:#16181b;            /* headings, rules that matter */
  --body:#3a3e44;           /* running text  (AA on all grounds) */
  --mut:#666b73;            /* captions, labels (AA on paper/panel) */
  --line:#c9ced4;           /* rules, card borders */
  --hair:#dde1e5;           /* grid hairlines */

  /* the two meanings (tone 1 = default, see data-tone below) */
  --human:#ee5d27;          /* operator, shift notes: fills, dots, marks */
  --human-t:#b5420f;        /* operator colour when it is TEXT (AA) */
  --human-w:#fde7dc;        /* operator wash */
  --machine:#3f6384;       /* machine data: lines, drawings */
  --machine-t:#33536f;      /* machine colour as text (AA) */
  --machine-w:#dfe7ef;      /* machine wash */
  --held:#16181b;           /* "held" is ink: it is fact, not decoration */

  /* type */
  --f-display:"Geist", "Geist Fallback", "Helvetica Neue", sans-serif;
  --f-text:"Geist", "Geist Fallback", "Helvetica Neue", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, monospace;
  --fs-d1:clamp(44px, 6.2vw, 96px);    /* hero only */
  --fs-d2:clamp(34px, calc(5vh + 1.4vw), 64px);  /* section headline, height-driven (review G1) */
  --fs-d3:clamp(26px, 2.6vw, 38px);    /* sub-headline, big statements */
  --fs-h4:clamp(19px, 1.5vw, 22px);    /* card title */
  --fs-lead:clamp(18px, 1.35vw, 21px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:12px;                      /* mono uppercase labels */
  --fs-num:clamp(48px, 5vw, 76px);      /* figures */

  /* space, grid, shape */
  --max:1360px;
  --gut:clamp(16px, 3vw, 40px);        /* page side margin */
  --gap:24px;
  --sec-y:clamp(56px, 9vh, 120px);     /* section padding, height-driven so a section fits one screen (review G1) */
  --radius:2px;                         /* precision: almost square */
  --rule:1px solid var(--line);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);      /* expo.out: the only ease */
  --dur:.8s;                            /* page reveals */
  --t-in:.36s;                          /* chips, tags, small labels */
  --t-move:.66s;                        /* cards, playheads, panels */
  --t-draw:1.2s;                        /* line draws */
  --t-hold:1.5s;                        /* hold at the end state of a loop before it restarts */
}
/* colour tunings: same meaning, different temperature */
:root[data-tone="5"]{ /* tone 5 (chosen 2026-10-19): orange a step deeper for contrast (3.37:1 on paper), machine a touch bluer */
  --human:#dc5626; --human-t:#a8400f; --human-w:#fbe4d9; --machine:#46698c; --machine-t:#33536f; --machine-w:#e0e8f0;
}
:root[data-tone="2"]{ /* ember + slate: warmer, softer */
  --human:#e8693c; --human-t:#ad4520; --human-w:#fbe6dc;
  --machine:#4d6a85; --machine-t:#3d566d; --machine-w:#e1e8ee;
}
:root[data-tone="3"]{ /* copper + blue-grey: deeper, calmer */
  --human:#d4612f; --human-t:#a44a22; --human-w:#f6e3d8;
  --machine:#5a7591; --machine-t:#435b73; --machine-w:#e2e8ef;
  --paper:#edeff0; --paper-2:#e4e7e9;
}
:root[data-tone="4"]{ /* signal + steel: the specimen as first shown */
  --human:#f2591f; --human-t:#b8400f; --human-w:#fde5da;
  --machine:#2f5d8a; --machine-t:#284f75; --machine-w:#dbe5ef;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font:400 var(--fs-body)/1.55 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html{scroll-padding-top:88px}
.k-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--radius);font:500 14px/1 var(--f-text);text-decoration:none}
.k-skip:focus{top:12px}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--f-display);font-weight:500;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0;text-wrap:pretty}

/* ---------- layout ---------- */
.k-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.k-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.k-sec{position:relative;padding:var(--sec-y) 0}
.k-sec.alt{background:var(--paper-2)}
.k-sec.panel{background:var(--panel)}
.k-rule{border:0;border-top:var(--rule);margin:0}
/* visible 12-column hairlines (use on 1-3 sections, not everywhere) */
.k-cols{position:absolute;inset:0;pointer-events:none;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.k-cols::before{content:"";position:absolute;inset:0 var(--gut);background:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc((100% + var(--gap)) / 12));}
@media (max-width:760px){ .k-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .k-cols::before{background:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc((100% + 16px) / 4))} }

/* ---------- type ---------- */
.k-d1{font-size:var(--fs-d1);letter-spacing:-.045em;line-height:.97}
.k-d2{font-size:var(--fs-d2);letter-spacing:-.04em}
.k-d3{font-size:var(--fs-d3);letter-spacing:-.03em;line-height:1.1}
.k-h4{font-size:var(--fs-h4);letter-spacing:-.015em;line-height:1.2;font-weight:550}
.k-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--body);max-width:52ch}
.k-small{font-size:var(--fs-small);line-height:1.5}
.k-label{font:500 var(--fs-label)/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.k-label.h{color:var(--human-t)} .k-label.m{color:var(--machine-t)} .k-label.ink{color:var(--ink)}
.k-num{font:500 var(--fs-num)/.95 var(--f-display);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.k-mono{font-family:var(--f-mono)}
.k-em-h{color:var(--human)}              /* the logo-dot orange: display text >= 24px only, one phrase per PAGE */
.k-em-h.sm{color:var(--human-t)}         /* if ever used below 24px */
/* eyebrow: only where it adds a time, a place, an audience or a document reference. Sentence case, never numbered. */
.k-eye{display:block;font:500 13px/1.35 var(--f-text);color:var(--mut);letter-spacing:0;text-transform:none;margin:0 0 16px}
.k-eye.data{font:500 var(--fs-label)/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.k-eye.data .h{color:var(--human-t)} .k-eye.data .m{color:var(--machine-t)}
.k-ink{color:var(--ink)}

/* section index: "01 / Problem". Retired: kept for unpicked variants only; no picked section or page renders it. */
.k-index{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.k-index .n{font:500 var(--fs-label)/1 var(--f-mono);color:var(--ink);letter-spacing:.06em;border:1px solid var(--ink);padding:5px 7px}
.k-index .t{font:500 var(--fs-label)/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.k-index::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- parts ---------- */
.k-logo{height:26px;width:auto;color:var(--ink)}
.k-btn{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 18px;border:0;border-radius:var(--radius);font:550 15px/1 var(--f-text);text-decoration:none;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.k-btn .ar{transition:transform .35s var(--ease)}
.k-btn:hover .ar{transform:translateX(4px)}
.k-btn.ink{background:var(--ink);color:#fff}
.k-btn.ink:hover{background:#2a2d31}
.k-btn.hum{background:var(--human);color:var(--ink)}
.k-btn.hum:hover{background:color-mix(in srgb,var(--human) 88%,#fff)}
.k-btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.k-btn.line:hover{background:var(--ink);color:#fff}
.k-link{display:inline-flex;gap:10px;align-items:center;font:550 15px/1.2 var(--f-text);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}
.k-link .ar{transition:transform .35s var(--ease)} .k-link:hover .ar{transform:translateX(4px)}

.k-card{background:var(--panel);border:var(--rule);border-radius:var(--radius);padding:24px}
.k-card.white{background:var(--white)}
.k-tile{border-top:1px solid var(--ink);padding-top:16px}       /* open card: a rule on top */

/* tag chip: an instrument tag or lane label on a drawing or photo */
.k-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 9px;background:var(--white);border-radius:var(--radius);font:500 11.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.k-tag i{width:8px;height:8px;border-radius:50%;flex:none}
.k-tag.m i{background:var(--machine)} .k-tag.h i{background:var(--human)} .k-tag.i i{background:var(--ink);border-radius:0}

/* shift note card: the operator's voice. orange edge, mono time */
.k-note{background:var(--white);border-left:3px solid var(--human);padding:14px 16px;font-size:14.5px;line-height:1.45;color:var(--body);border-radius:0 var(--radius) var(--radius) 0;max-width:340px}
.k-note .k-label{color:var(--human-t);display:block;margin-bottom:6px}
/* hypothesis card: the analysis. machine wash, never claims a cause */
.k-hyp{background:var(--machine-w);padding:14px 16px;font-size:14.5px;line-height:1.45;color:var(--ink);border-radius:var(--radius);max-width:360px}
.k-hyp .k-label{color:var(--machine-t);display:block;margin-bottom:6px}

/* spec rows: label .... value (CROX "system status") */
.k-spec{display:grid;gap:0}
.k-spec div{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.k-spec dt,.k-spec .l{color:var(--body)}
.k-spec .fill{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.k-spec dd,.k-spec .v{margin:0;font:500 13px var(--f-mono);color:var(--ink)}

/* figure tile: label, "Up to", number. The line under figures is mandatory nearby. */
.k-fig .k-label{display:block;margin-bottom:14px}
.k-fig .upto{display:block;font:450 16px/1 var(--f-text);color:var(--mut);margin-bottom:6px}

/* photo: real plant photography, slightly cooled to sit on steel paper */
.k-photo{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.k-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04) brightness(1.02)}
.k-photo.mono img{filter:grayscale(1) contrast(1.06)}
/* portraits: one standard for every face on the site (11 sources, 11 backgrounds). Grey, a steel cast, square, hairline. */
.k-portrait{position:relative;margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.k-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:grayscale(1) contrast(1.06) brightness(1.04)}
.k-portrait::after{content:"";position:absolute;inset:0;background:var(--machine);mix-blend-mode:color;opacity:.22;pointer-events:none}
.k-portrait.tall{aspect-ratio:4/5}
.k-photo .k-tag{position:absolute}

/* legend: which colour means what (use once per drawing/timeline) */
.k-legend{display:flex;flex-wrap:wrap;gap:8px 18px}
.k-legend span{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.k-legend i{width:16px;height:2px;background:var(--machine)} .k-legend .h i{background:var(--human);height:8px;width:8px;border-radius:50%} .k-legend .ins i{background:var(--ink);width:8px;height:8px}

/* ---------- drawings (SVG made by kit.js) ---------- */
.k-draw{width:100%;height:auto;overflow:visible}
.k-draw .ln{fill:none;stroke:var(--machine);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.k-draw .ln.thin{stroke-width:1}
.k-draw .ln.dash{stroke-dasharray:4 5}
.k-draw .ln.ink{stroke:var(--ink)}
.k-draw .ln.hum{stroke:var(--human)}
.k-draw .ln.hair{stroke:var(--line)}
.k-draw .fillw{fill:var(--panel)}
.k-draw .fillm{fill:var(--machine-w)}
.k-draw .dot-h{fill:var(--human)}
.k-draw .dot-m{fill:var(--machine)}
.k-draw .sq-i{fill:var(--ink)}
.k-draw text{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;fill:var(--machine-t);text-transform:uppercase}
.k-draw text.ink{fill:var(--ink)} .k-draw text.h{fill:var(--human-t)} .k-draw text.mut{fill:var(--mut)}
.k-draw .bubble{fill:var(--white);stroke:var(--machine);stroke-width:1.2;vector-effect:non-scaling-stroke}
/* draw-in: kit.js sets --len on paths with .draw-in, then adds .on */
.k-draw .draw-in{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--ease)}
.k-draw.on .draw-in{stroke-dashoffset:0}
.k-draw .pop{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease);transform-box:fill-box}
.k-draw.on .pop{opacity:1;transform:none}

/* lens: circular detail over a photo */
.k-lens{position:absolute;border-radius:50%;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1.5px var(--machine),0 0 0 7px color-mix(in srgb,var(--paper) 70%,transparent)}
.k-lens svg{width:100%;height:100%}
.k-lens-line{position:absolute;height:1px;background:var(--machine);transform-origin:0 0}

/* phone: a real capture screen */
.k-phone{width:248px;aspect-ratio:9/19;border-radius:34px;background:#111315;padding:9px;box-shadow:0 30px 60px -30px rgba(22,24,27,.45),0 0 0 1px #2b2e33}
.k-phone .scr{width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--white);display:flex;flex-direction:column;font-size:12.5px;color:var(--ink)}
.k-phone .bar{display:flex;justify-content:space-between;padding:10px 16px 6px;font:600 11px var(--f-mono)}
.k-phone .hd{padding:6px 14px 10px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center}
.k-phone .k-ph{margin:10px 12px 0;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.k-phone .k-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.k-phone .txt{margin:10px 14px 0;line-height:1.4;font-size:12px;color:var(--body)}
.k-phone .wave{display:flex;align-items:center;gap:2px;height:30px;margin:10px 14px 0}
.k-phone .wave i{flex:1;background:var(--human);border-radius:1px;height:20%;transition:height .25s}
.k-phone .act{margin:auto 12px 14px;display:flex;gap:6px}
.k-phone .act span{flex:1;text-align:center;padding:9px 0;border-radius:8px;background:var(--paper);font:500 10.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.k-phone .act span.on{background:var(--ink);color:#fff}

/* held steps: improvements that only go up */
.k-held .bar{fill:var(--panel);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.k-held .bar.next{fill:none;stroke:var(--mut);stroke-dasharray:4 4}
.k-held .cap{stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke}

/* step planes: four stacked planes, one per step */
.k-planes{position:relative;perspective:1600px}
.k-planes .stack{position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);width:100%;aspect-ratio:1/1}
.k-planes .pl{position:absolute;inset:12%;border:1px solid var(--machine);background:color-mix(in srgb,var(--panel) 88%,transparent);transition:transform .9s var(--ease),background .5s,border-color .5s}
.k-planes .pl.on{background:var(--white);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.k-planes .pl b{position:absolute;left:10px;top:8px;font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--machine-t)}
.k-planes .pl.on b{color:var(--ink)}

/* reveal (kit.js) */
.js [data-reveal]{opacity:0;transform:translateY(22px)}
.js [data-reveal].k-in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* failsafe: the head script drops .js when kit.js has not loaded by window load (or 4 s), so nothing stays hidden */
@media print{[data-reveal]{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .k-draw .draw-in{stroke-dashoffset:0!important;transition:none}
  .k-draw .pop{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* =====================================================================
   STATIONS GRAMMAR (from lab/stations/st.css, verbatim) + photo grade + live layers.
   Used by hero/d, steps/d, how-it-works/steps and the live layers on photos.
   ===================================================================== */
/* Stations grammar: the shared visual vocabulary for motion on top of photos.
   Every part on /lab/stations/ uses these classes so chips, lanes, links and tags look the same everywhere.
   Colours follow the kit: orange = operator (notes, voice, photo, check), grey-blue = machine data, ink = fact / held. */

/* ---------- operator chips (what an operator adds) ---------- */
.st-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border:1.5px solid var(--human);border-radius:999px;background:var(--paper);color:var(--human-t);font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.st-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--human);flex:none}
.st-chip.check::before{width:10px;height:6px;border-radius:0;background:none;border:solid var(--human);border-width:0 0 1.75px 1.75px;transform:rotate(-45deg) translate(1px,-1px)}
.st-chip.photo::before{width:10px;height:8px;border-radius:1.5px;background:none;border:1.5px solid var(--human)}
.st-chip.fill{background:var(--human-w)}
.st-chip.ink{border-color:var(--ink);color:var(--ink)}
.st-chip.ink::before{background:var(--ink)}
.st-wave{display:inline-flex;align-items:center;gap:2px;height:14px}
.st-wave i{display:block;width:2px;border-radius:1px;background:var(--human);height:40%}
.st-wave.live i{animation:st-wave .8s ease-in-out infinite alternate;animation-delay:calc(var(--k,0)*-.11s)}
@keyframes st-wave{to{height:100%}}

/* ---------- callout (a note pinned to an object in a photo) ---------- */
.st-callout{position:absolute;max-width:260px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--human);padding:10px 12px;box-shadow:0 10px 30px rgba(22,24,27,.14)}
.st-callout .hd{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--human-t);margin-bottom:6px}
.st-callout .hd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--human)}
.st-callout p{margin:0;font:450 13.5px/1.4 var(--f-text);color:var(--ink)}
.st-callout.m{border-left-color:var(--machine)} .st-callout.m .hd{color:var(--machine-t)} .st-callout.m .hd::before{background:var(--machine)}
.st-callout.i{border-left-color:var(--ink)} .st-callout.i .hd{color:var(--ink)} .st-callout.i .hd::before{background:var(--ink)}

/* ---------- object tag with a live reading (machine) ---------- */
.st-tag{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.st-tag .d{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;border:2px solid var(--paper);background:var(--machine);box-shadow:0 0 0 1px rgba(22,24,27,.25)}
.st-tag .d::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--machine);opacity:0}
.st-tag.live .d::after{animation:st-ping 2.4s var(--ease) infinite}
@keyframes st-ping{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.st-tag .lb{position:absolute;left:14px;top:-13px;display:flex;align-items:center;gap:8px;white-space:nowrap;background:var(--paper);padding:6px 8px;font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink);box-shadow:0 1px 0 rgba(22,24,27,.12)}
.st-tag .lb em{font-style:normal;color:var(--mut)}
.st-tag .lb b{font-weight:500;color:var(--machine-t);font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}
.st-tag.h .d{background:var(--human)} .st-tag.h .d::after{border-color:var(--human)}
.st-tag.i .d{background:var(--ink)}

/* ---------- the unified timeline (axis, lanes, links) ---------- */
.st-tl{position:relative;font:500 10.5px/1 var(--f-mono);color:var(--mut)}
.st-tl svg{display:block;width:100%;overflow:visible}
.st-axis{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.st-tick{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.st-trace{fill:none;stroke:var(--machine);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.st-held{fill:none;stroke:var(--ink);stroke-width:3;vector-effect:non-scaling-stroke}
.st-next{fill:none;stroke:var(--mut);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.st-link{fill:none;stroke:var(--human);stroke-width:1.25;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.st-dip{fill:var(--machine-w);stroke:var(--machine);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.st-lane-lb{font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--machine-t)}
.st-op-lb{font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--human-t)}
.st-time{font:500 10.5px var(--f-mono);fill:var(--mut)}
.st-playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--ink)}
.st-playhead span{position:absolute;top:-2px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font:500 10.5px/1 var(--f-mono);padding:5px 6px;white-space:nowrap}

/* ---------- labels and frames ---------- */
.st-sheet{display:inline-flex;border:1px solid var(--ink);font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.st-sheet span{padding:7px 10px;border-right:1px solid var(--ink);color:var(--ink)}
.st-sheet span:first-child{background:var(--ink);color:#fff}
.st-sheet span:last-child{border-right:0}
.st-time-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--human);color:var(--human-t);font:500 10.5px/1 var(--f-mono);padding:5px 7px;letter-spacing:.04em}
.st-time-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--human)}
.st-fig{position:relative;background:var(--paper);padding:10px 10px 30px;box-shadow:0 12px 30px rgba(22,24,27,.16);border:1px solid var(--line)}
.st-fig figcaption{position:absolute;left:10px;right:10px;bottom:9px;display:flex;justify-content:space-between;font:500 10px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

/* timing tokens on CSS-driven state changes. Opacity and transforms stay with GSAP or the fragment, never both. */
.st-chip,.st-callout,.st-time-tag{transition:color var(--t-in) var(--ease),background-color var(--t-in) var(--ease),border-color var(--t-in) var(--ease)}
.st-tag .d,.st-tag .lb b{transition:background-color var(--t-in) var(--ease),color var(--t-in) var(--ease)}
.st-link{transition:stroke-dashoffset var(--t-draw) var(--ease)}
/* opt-in CSS motion for fragments without GSAP: put .st-css on the host, .on on the item */
.st-css .st-chip,.st-css .st-tag,.st-css .st-callout{opacity:0;transform:translateY(4px);transition:opacity var(--t-in) var(--ease),transform var(--t-in) var(--ease)}
.st-css .st-callout{transition-duration:var(--t-move)}
.st-css .on .st-chip,.st-css .on .st-tag,.st-css .on .st-callout,.st-css .st-chip.on,.st-css .st-tag.on,.st-css .st-callout.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.st-wave.live i,.st-tag.live .d::after{animation:none}.st-css .st-chip,.st-css .st-tag,.st-css .st-callout{opacity:1;transform:none}}

/* photo grade for ported parts (the board's .ph-g, on the site's own .k-photo values) */
.ph-g{filter:saturate(.72) contrast(1.04) brightness(1.02)}
.st-fig figcaption{font-size:10.5px}

/* ---------- live layers on photos (ported from lab/stations overlays, version A per station) ----------
   .lv wraps a .k-photo; .lv-ov inside the photo is sized by Kit.cover to the image as object-fit draws it,
   so every position is a % of the full image. Cards hang inside the photo; below 520px they drop into a tray under it. */
.lv{position:relative;container-type:inline-size;--lfs:clamp(10.5px,1.7cqw,11.5px);--lfb:clamp(12.5px,2cqw,13.5px)}
.lv-ov{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.lv-ov>svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.lv .st-tag .lb{font-size:var(--lfs);top:-1.1em;left:1.35em;padding:.55em .7em;gap:.6em;box-shadow:0 1px 0 rgba(22,24,27,.12),0 6px 18px rgba(22,24,27,.14)}
.lv .st-tag.l .lb{left:auto;right:1.35em}
.lv .st-tag .lb b{min-width:3.6ch}
.lv .st-tag .lb em{text-transform:none;letter-spacing:.02em}
.lv-bloom{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.lv-bloom i{position:absolute;border-radius:50%}
.lv-bloom .dt{left:-7px;top:-7px;width:14px;height:14px;background:var(--human);border:2px solid var(--paper);box-shadow:0 0 0 1px rgba(22,24,27,.25)}
.lv-bloom .rg{left:-24px;top:-24px;width:48px;height:48px;border:1.5px solid var(--human);opacity:0}
.lv-lead{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none;transform-origin:0 0}
.lv-lead i{display:block;height:0;border-top:1.5px solid var(--paper);transform-origin:0 50%;width:var(--len,0)}
.lv-lead.ink i{border-top-width:1px;border-top-color:var(--ink)}
.lv-card{position:absolute;z-index:4;pointer-events:none;font-size:var(--lfs)}
.lv-card.st-callout{max-width:none;padding:.9em 1em}
.lv-card.st-callout .hd{font-size:var(--lfs);margin-bottom:.7em;white-space:nowrap}
.lv-card.st-callout p{font-size:var(--lfb);min-height:4.2em}
.lv-card .ft{display:flex;justify-content:space-between;align-items:center;margin-top:.8em;font:500 var(--lfs)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.lv-wv{display:inline-flex;align-items:center;gap:2px;height:1.25em;margin-left:auto;min-width:0;overflow:hidden}
.lv-wv i{flex:none;display:block;width:2px;height:100%;border-radius:1px;background:var(--human);transform:scaleY(var(--h,.5));transform-origin:50% 50%}
.lv-wv.on i{animation:lv-wv var(--du,.8s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes lv-wv{from{transform:scaleY(.16)}to{transform:scaleY(var(--h,.8))}}
.lv-tr{fill:none;stroke:var(--machine);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lv-fl{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:12 120;stroke-dashoffset:12}
.lv-fl.w{stroke-width:34;opacity:.2}.lv-fl.m{stroke-width:18;opacity:.32}.lv-fl.c{stroke-width:7;opacity:.9}
.lv-timer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.4em .8em;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);padding:.8em .9em;box-shadow:0 10px 30px rgba(22,24,27,.18)}
.lv-timer svg{width:3.6em;height:3.6em;transform:rotate(-90deg)}
.lv-timer .tb{fill:none;stroke:var(--line);stroke-width:3}
.lv-timer .tf{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:0}
.lv-timer .tt{display:flex;flex-direction:column;gap:.35em;min-width:0}
.lv-timer .k,.lv-timer .s{font:500 var(--lfs)/1.1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.lv-timer .s{color:var(--mut)} .lv-timer .s b{font-weight:500;color:var(--machine-t);font-variant-numeric:tabular-nums}
.lv-timer .tt>b{font:500 calc(var(--lfs)*2.1)/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lv-timer .ok{grid-column:1/-1;display:flex;align-items:center;gap:.6em;border-top:var(--rule);padding-top:.6em;font:500 var(--lfs)/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.lv-timer .ok::before{content:"";width:.9em;height:.5em;border:solid var(--ink);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-2px)}
.lv.x-off *,.lv.x-off *::after{animation-play-state:paused!important}
@container (max-width:520px){
  .lv-card{position:relative;left:auto!important;right:auto!important;top:auto!important;width:auto!important;margin-top:12px;box-shadow:none}
  .lv .st-tag .d{width:11px;height:11px;left:-5.5px;top:-5.5px}
}
@media (prefers-reduced-motion:reduce){.lv-wv.on i{animation:none}}