/* Generated by .plans/floor-concepts/tools/build.py hero — do not edit; edit src/data/hero.json or the scene modules. */
/* Light tokens only (the site has no dark mode), never on :root: the site's --ink, --teal and --bg differ.
   They sit on the drawings and on the hidden defs (patterns paint where they are defined). */
.hf-figure .hf-svg, .hf-defs {
  --surface: #FFFFFF; --ink-2: #3A4553; --ink-3: #5B6675; --teal: #007BFF; --teal-ink: #0055A3; --ok-ink: #1B6F40; --warn-swatch: #A87D00; --idle-ink: #5B6675; --fl-floor: #E7ECF2; --fl-grid: rgba(0, 85, 163, 0.10); --fl-slab-l: #D3DAE3; --fl-slab-r: #BEC8D3; --fl-wall-l: #F1F4F8; --fl-wall-r: #E8EDF2; --fl-wall-t: #FFFFFF; --fl-hatch: #9AA5B3; --fl-win: #DCE6F2; --fl-door: #E1E7EE; --fl-wsm: rgba(91, 102, 117, 0.22); --iso-t: #FFFFFF; --iso-l: #E1E7EE; --iso-r: #C8D1DC; --iso-e: #66727F; --st-t: #EEF2F6; --st-l: #CED6DF; --st-r: #B6C0CC; --d-t: #77828F; --d-l: #5C6774; --d-r: #4A5461; --k-t: #E4D6BC; --k-l: #CFBE9E; --k-r: #B9A784; --k-in: #8C7A5C; --p-t: #A3AEBB; --p-l: #8995A3; --p-r: #74808E; --glass: rgba(150, 180, 220, 0.16); --glass-e: #8098B6; --bt: #D7E2EE; --bt-e: #8A9BB0; --liq: #A9BCD1; --cap: #3A4553; --lbl: #FFFFFF; --bt-hl: rgba(255, 255, 255, 0.85); --fig-coat: #FFFFFF; --fig-tech: #A7B8CC; --fig-lead: #2B3D60; --fig-tr: #4A5566; --fig-sh: #262C35; --skin: #D9C3AD; --skin-2: #B89B82; --skin-3: #8A705C; --net: #F1F5FA; --fig-e: #59636F; --shade: #1B2533; --scr-bz: #262C35; --scr-bg: #111A2B; --scr-tile: #1B2740; --scr-ln: #2B3956; --scr-ink: #E8ECF2; --scr-ink-2: #9BA6B8; --scr-ok: #5CCB8F; --scr-warn: #F0C36E; --scr-idle: #AEB6C2; --led-off: #E3E8EE; --tape: rgba(91, 102, 117, 0.55); --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --hair-1: #3E342C; --hair-1-e: #231D18; --hair-2: #8A7462; --hair-2-e: #5A4A3E; --js-shirt: #A99F8C; --leather: #8B6A4E; --js-pane: #B3C0CE; --js-gran-t: #7A7570; --js-gran-l: #66615C; --js-gran-r: #57524E; --js-curtain: rgba(120, 130, 142, 0.20); --js-curtain-e: #8C97A3; --js-mesh: rgba(102, 114, 127, 0.08); --js-wire: rgba(91, 102, 117, 0.34); --ss-t: #EEF1F4; --ss-l: #CDD4DC; --ss-r: #B0BAC5; --gs-t: #C3CBD4; --gs-l: #A7B1BD; --gs-r: #8E99A6; --hair-3: #1F1B19; --hair-4: #A8875C; --logo-pale: #DCE6F2;
}
/* Drawing: the reviewed linear page's drawing CSS, the kit and the two scene sheets, only the rules these
   scenes use. Scoped to the hero figure, and to the hf- roots of <use> clones (descendant selectors do
   not cross into a clone, so its root id carries the scope). */
:is(.hf-figure,[id^="hf-"]) .fl-floor { fill: var(--fl-floor); stroke: var(--iso-e); stroke-width: .5; }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-sl { fill: var(--fl-slab-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-sl { fill: var(--fl-slab-r); }
:is(.hf-figure,[id^="hf-"]) .fl-fgrid { fill: url(#hf-fgrid); }
:is(.hf-figure,[id^="hf-"]) .fl-tape-f { fill: var(--tape); }
:is(.hf-figure,[id^="hf-"]) .fl-tape-c { fill: none; stroke: var(--tape); stroke-width: 1.6; }
:is(.hf-figure,[id^="hf-"]) .fl-tape-o { fill: none; stroke: var(--tape); stroke-width: 1; stroke-dasharray: 4 3; }
:is(.hf-figure,[id^="hf-"]) .fl-huddle-z { fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-dasharray: 8 4; }
:is(.hf-figure,[id^="hf-"]) .fl-ftx { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; fill: var(--ink-3); opacity: .8; }
:is(.hf-figure,[id^="hf-"]) .fl-ftx-a { fill: var(--teal-ink); opacity: 1; }
:is(.hf-figure,[id^="hf-"]) .fl-ft, :is(.hf-figure,[id^="hf-"]) .fl-fl, :is(.hf-figure,[id^="hf-"]) .fl-fr, :is(.hf-figure,[id^="hf-"]) .fl-fm { fill: var(--iso-t); stroke: var(--iso-e); stroke-width: .5; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .fl-fl { fill: var(--iso-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr { fill: var(--iso-r); }
:is(.hf-figure,[id^="hf-"]) .fl-fm { fill: color-mix(in srgb, var(--iso-l) 50%, var(--iso-r)); }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-w { fill: var(--fl-wall-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-w { fill: var(--fl-wall-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-w { fill: var(--fl-wall-r); }
:is(.hf-figure,[id^="hf-"]) .fl-wcut { fill: url(#hf-hatch); stroke: var(--iso-e); stroke-width: .5; }
:is(.hf-figure,[id^="hf-"]) .fl-wsm { stroke: var(--fl-wsm); stroke-width: .75; }
:is(.hf-figure,[id^="hf-"]) .fl-win { fill: var(--fl-win); stroke: var(--iso-e); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .fl-door { fill: var(--fl-door); stroke: var(--iso-e); stroke-width: .5; }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-d { fill: var(--d-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-d { fill: var(--d-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-d { fill: var(--d-r); }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-s { fill: var(--st-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-s { fill: var(--st-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-s { fill: var(--st-r); }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-k { fill: var(--k-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-k { fill: var(--k-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-k { fill: var(--k-r); }
:is(.hf-figure,[id^="hf-"]) .fl-kin { fill: var(--k-in); stroke: var(--iso-e); stroke-width: .5; }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-p { fill: var(--p-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-p { fill: var(--p-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-p { fill: var(--p-r); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-bt { fill: var(--bt); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-bt { fill: color-mix(in srgb, var(--bt) 82%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .fl-btop-e { fill: url(#hf-btops-e); stroke: var(--iso-e); stroke-width: .5; }
:is(.hf-figure,[id^="hf-"]) .fl-btop-c { fill: url(#hf-btops-c); stroke: var(--iso-e); stroke-width: .5; }
:is(.hf-figure,[id^="hf-"]) .fl-wrap.fl-fl, :is(.hf-figure,[id^="hf-"]) .fl-wrap.fl-fr, :is(.hf-figure,[id^="hf-"]) .fl-wrap.fl-ft { fill: var(--glass); stroke: var(--glass-e); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-lr, :is(.hf-figure,[id^="hf-"]) .fl-fl.fl-lr, :is(.hf-figure,[id^="hf-"]) .fl-fr.fl-lr { fill: var(--surface); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-lr { fill: var(--iso-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-lr { fill: var(--iso-r); }
:is(.hf-figure,[id^="hf-"]) .fl-g { fill: var(--glass); stroke: var(--glass-e); stroke-width: .45; }
:is(.hf-figure,[id^="hf-"]) .fl-ge { stroke: var(--glass-e); stroke-width: .45; stroke-dasharray: 2 1.6; }
:is(.hf-figure,[id^="hf-"]) .fl-gf { stroke: var(--iso-e); stroke-width: .9; }
:is(.hf-figure,[id^="hf-"]) .fl-dl { stroke: var(--d-l); stroke-width: 1.4; stroke-linecap: round; }
:is(.hf-figure,[id^="hf-"]) .fl-sm { stroke: var(--iso-e); stroke-width: .35; opacity: .7; }
:is(.hf-figure,[id^="hf-"]) .fl-tier { stroke: var(--bt-e); stroke-width: .45; }
:is(.hf-figure,[id^="hf-"]) .fl-rl { stroke: var(--iso-e); stroke-width: .7; }
:is(.hf-figure,[id^="hf-"]) .fl-tape { stroke: var(--k-in); stroke-width: 1.2; }
:is(.hf-figure,[id^="hf-"]) .fl-hole { fill: var(--d-r); stroke: var(--iso-e); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .fl-bt0 { fill: var(--bt); stroke: var(--bt-e); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .fl-bt1 { fill: var(--liq); stroke: var(--bt-e); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .fl-bhl { stroke: var(--bt-hl); stroke-width: .7; stroke-linecap: round; }
:is(.hf-figure,[id^="hf-"]) .fl-cap { fill: var(--cap); }
:is(.hf-figure,[id^="hf-"]) .fl-lbl { fill: var(--lbl); stroke: var(--bt-e); stroke-width: .3; }
:is(.hf-figure,[id^="hf-"]) .fl-scr-bz { fill: var(--scr-bz); }
:is(.hf-figure,[id^="hf-"]) .fl-scr-bg { fill: var(--scr-bg); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-coat { --coat: var(--fig-coat); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-tech { --coat: var(--fig-tech); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-lead { --coat: var(--fig-lead); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-s2 { --sk: var(--skin-2); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-s3 { --sk: var(--skin-3); }
:is(.hf-figure,[id^="hf-"]) .fl-pole { stroke: var(--iso-e); stroke-width: .9; }
:is(.hf-figure,[id^="hf-"]) .fl-seg, :is(.hf-figure,[id^="hf-"]) .fl-seg-t { fill: var(--led-off); stroke: var(--iso-e); stroke-width: .35; }
:is(.hf-figure,[id^="hf-"]) .fl-seg-c { fill: var(--iso-e); }
:is(.hf-figure,[id^="hf-"]) .fl-lit-s, :is(.hf-figure,[id^="hf-"]) .fl-lit-t { fill: currentColor; stroke: var(--iso-e); stroke-width: .35; }
:is(.hf-figure,[id^="hf-"]) .fl-st-ok { color: var(--ok-ink); }
:is(.hf-figure,[id^="hf-"]) .fl-st-warn { color: var(--warn-swatch); }
:is(.hf-figure,[id^="hf-"]) .fl-st-idle { color: var(--idle-ink); --lit-ring: var(--surface); }
:is(.hf-figure,[id^="hf-"]) .fl-lit-r { fill: none; stroke: var(--lit-ring, none); stroke-width: .55; }
:is(.hf-figure,[id^="hf-"]) .fl-bd-k, :is(.hf-figure,[id^="hf-"]) .fl-bd-s, :is(.hf-figure,[id^="hf-"]) .fl-bd-r { font-family: var(--font-mono); fill: var(--scr-ink-2); }
:is(.hf-figure,[id^="hf-"]) .fl-bd-k { font-size: 3.6px; letter-spacing: .06em; }
:is(.hf-figure,[id^="hf-"]) .fl-bd-s { font-size: 3.2px; letter-spacing: .04em; }
:is(.hf-figure,[id^="hf-"]) .fl-bd-v { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; fill: var(--scr-ink); letter-spacing: -.02em; }
:is(.hf-figure,[id^="hf-"]) .fl-bd-r { font-size: 3.5px; fill: var(--scr-ink); }
:is(.hf-figure,[id^="hf-"]) .fl-bd-tile { fill: var(--scr-tile); }
:is(.hf-figure,[id^="hf-"]) .fl-bd-ln { stroke: var(--scr-ln); stroke-width: .35; }
:is(.hf-figure,[id^="hf-"]) .fl-bd-dot.fl-bd-ok, :is(.hf-figure,[id^="hf-"]) .fl-bd-w-ok { fill: var(--scr-ok); }
:is(.hf-figure,[id^="hf-"]) .fl-bd-dot.fl-bd-warn, :is(.hf-figure,[id^="hf-"]) .fl-bd-w-warn { fill: var(--scr-warn); }
:is(.hf-figure,[id^="hf-"]) .fl-bd-dot.fl-bd-idle, :is(.hf-figure,[id^="hf-"]) .fl-bd-w-idle { fill: var(--scr-idle); }
:is(.hf-figure,[id^="hf-"]) .fl-pg-l { fill: none; stroke: var(--fl-grid); stroke-width: .8; }
:is(.hf-figure,[id^="hf-"]) .fl-ph-bg { fill: var(--fl-wall-t); }
:is(.hf-figure,[id^="hf-"]) .fl-ph-l { stroke: var(--fl-hatch); stroke-width: .6; }
:is(.hf-figure,[id^="hf-"]) .fl-pb-e { fill: var(--bt); }
:is(.hf-figure,[id^="hf-"]) .fl-pb-c { fill: var(--liq); }
:is(.hf-figure,[id^="hf-"]) .fl-pb-r { fill: none; stroke: var(--bt-e); stroke-width: .25; }
:is(.hf-figure,[id^="hf-"]) .fl-pb-n { fill: var(--bt-e); }
:is(.hf-figure,[id^="hf-"]) .fl-pb-cap { fill: var(--cap); }
:is(.hf-figure,[id^="hf-"]) .fl-hat-1 { --hat: var(--hair-1); --hat-e: var(--hair-1-e); --hat-b: transparent; }
:is(.hf-figure,[id^="hf-"]) .fl-hat-2 { --hat: var(--hair-2); --hat-e: var(--hair-2-e); --hat-b: transparent; }
:is(.hf-figure,[id^="hf-"]) .fl-seam { fill: none; stroke: var(--iso-e); stroke-width: .35; opacity: .7; }
:is(.hf-figure,[id^="hf-"]) .fl-fig-shirt { --coat: var(--js-shirt); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-leather { --coat: var(--leather); }
:is(.hf-figure,[id^="hf-"]) .fl-js-pane { fill: var(--js-pane); stroke: var(--iso-e); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .fl-js-chuck { fill: none; stroke: var(--iso-e); stroke-width: .5; stroke-dasharray: 1.4 1; }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-js-gr { fill: var(--js-gran-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-js-gr { fill: var(--js-gran-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-js-gr { fill: var(--js-gran-r); }
:is(.hf-figure,[id^="hf-"]) .fl-js-curtain { fill: var(--js-curtain); stroke: var(--js-curtain-e); stroke-width: .45; }
:is(.hf-figure,[id^="hf-"]) .fl-js-curtain-b { fill: var(--js-curtain); stroke: none; }
:is(.hf-figure,[id^="hf-"]) .fl-js-mesh { fill: var(--js-mesh); stroke: none; }
:is(.hf-figure,[id^="hf-"]) .fl-js-wire { fill: none; stroke: var(--js-wire); stroke-width: .3; }
:is(.hf-figure,[id^="hf-"]) .fl-js-hood { fill: var(--d-l); stroke: var(--fig-e); stroke-width: .3; }
:is(.hf-figure,[id^="hf-"]) .fl-js-visor { fill: var(--scr-bg); stroke: var(--fig-e); stroke-width: .28; }
:is(.hf-figure,[id^="hf-"]) .fl-js-bt { fill: var(--scr-tile); }
:is(.hf-figure,[id^="hf-"]) .fl-js-bu { fill: var(--scr-ok); }
:is(.hf-figure,[id^="hf-"]) .fl-js-bd { fill: var(--scr-idle); }
.hf-figure .hf-svg--phone { --hf-mv-l: none; }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-ss { fill: var(--ss-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-ss { fill: var(--ss-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-ss { fill: var(--ss-r); }
:is(.hf-figure,[id^="hf-"]) .fl-ft.fl-gs { fill: var(--gs-t); }
:is(.hf-figure,[id^="hf-"]) .fl-fl.fl-gs { fill: var(--gs-l); }
:is(.hf-figure,[id^="hf-"]) .fl-fr.fl-gs { fill: var(--gs-r); }
:is(.hf-figure,[id^="hf-"]) .fl-bt-grate { fill: none; stroke: var(--iso-e); stroke-width: .3; opacity: .55; }
:is(.hf-figure,[id^="hf-"]) .fl-bt-hid { fill: none; stroke: var(--iso-e); stroke-width: .45; stroke-dasharray: 2.4 1.8; opacity: .7; }
:is(.hf-figure,[id^="hf-"]) .fl-bt-chain { stroke: var(--d-l); stroke-width: .6; stroke-dasharray: .9 .5; }
:is(.hf-figure,[id^="hf-"]) .fl-bt-lbl { font-family: var(--font-mono); font-size: 5.6px; letter-spacing: .06em; fill: var(--ink-3); }
:is(.hf-figure,[id^="hf-"]) .fl-bt-sign { fill: var(--surface); stroke: var(--iso-e); stroke-width: .3; }
:is(.hf-figure,[id^="hf-"]) .fl-bt-sign-t { font-family: var(--font-mono); font-size: 1.9px; letter-spacing: .04em; fill: var(--ink-2); }
:is(.hf-figure,[id^="hf-"]) .fl-bt-spark { fill: none; stroke: var(--scr-ink-2); stroke-width: .5; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .fl-bt-ns { fill: none; stroke: var(--scr-ink-2); stroke-width: .4; }
:is(.hf-figure,[id^="hf-"]) .rq-l, :is(.hf-figure,[id^="hf-"]) .rq-r, :is(.hf-figure,[id^="hf-"]) .rq-t { stroke: var(--fig-e); stroke-width: .28; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .rq-l.rq-ct { fill: var(--coat, var(--fig-coat)); }
:is(.hf-figure,[id^="hf-"]) .rq-r.rq-ct { fill: color-mix(in srgb, var(--coat, var(--fig-coat)) 80%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .rq-t.rq-ct { fill: color-mix(in srgb, var(--coat, var(--fig-coat)) 92%, #fff); }
:is(.hf-figure,[id^="hf-"]) .rq-l.rq-tr, :is(.hf-figure,[id^="hf-"]) .rq-t.rq-tr { fill: var(--fig-tr); }
:is(.hf-figure,[id^="hf-"]) .rq-r.rq-tr { fill: color-mix(in srgb, var(--fig-tr) 78%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .rq-l.rq-sh { fill: var(--fig-sh); }
:is(.hf-figure,[id^="hf-"]) .rq-r.rq-sh { fill: color-mix(in srgb, var(--fig-sh) 80%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .rq-t.rq-sh { fill: color-mix(in srgb, var(--fig-sh) 82%, #fff); }
:is(.hf-figure,[id^="hf-"]) .rq-l.rq-sk, :is(.hf-figure,[id^="hf-"]) .rq-t.rq-sk { fill: var(--sk, var(--skin)); }
:is(.hf-figure,[id^="hf-"]) .rq-r.rq-sk { fill: color-mix(in srgb, var(--sk, var(--skin)) 82%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .rq-nos { stroke: none; }
:is(.hf-figure,[id^="hf-"]) .rq-o { fill: none; stroke: var(--fig-e); stroke-width: .32; }
:is(.hf-figure,[id^="hf-"]) .rq-e { stroke-width: .25; }
:is(.hf-figure,[id^="hf-"]) .fl-hr-1 { --hr: var(--hair-1); }
:is(.hf-figure,[id^="hf-"]) .fl-hr-2 { --hr: var(--hair-2); }
:is(.hf-figure,[id^="hf-"]) .fl-hr-3 { --hr: var(--hair-3); }
:is(.hf-figure,[id^="hf-"]) .fl-hr-4 { --hr: var(--hair-4); }
:is(.hf-figure,[id^="hf-"]) .fl-hat-1 { --hr: var(--hair-1); --rq-mesh-o: 0; }
:is(.hf-figure,[id^="hf-"]) .fl-hat-2 { --hr: var(--hair-2); --rq-mesh-o: 0; }
:is(.hf-figure,[id^="hf-"]) .rq-net { fill: var(--hr, var(--hair-1)); stroke: none; }
:is(.hf-figure,[id^="hf-"]) .rq-net-r { fill: color-mix(in srgb, var(--hr, var(--hair-1)) 80%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .rq-mesh { fill-opacity: var(--rq-mesh-o, 1); }
:is(.hf-figure,[id^="hf-"]) .rq-net-o { stroke: var(--fig-e); stroke-width: .3; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .rq-band { fill: none; stroke: var(--net); stroke-width: .22; stroke-linecap: round; opacity: var(--rq-mesh-o, .7); }
:is(.hf-figure,[id^="hf-"]) .rq-arm-o { fill: none; stroke: var(--fig-e); stroke-linecap: round; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .rq-arm { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .rq-al { stroke: var(--coat, var(--fig-coat)); }
:is(.hf-figure,[id^="hf-"]) .rq-ar { stroke: color-mix(in srgb, var(--coat, var(--fig-coat)) 80%, var(--shade)); }
:is(.hf-figure,[id^="hf-"]) .rq-cuff { fill: none; stroke: var(--fig-e); stroke-width: .24; opacity: .6; }
:is(.hf-figure,[id^="hf-"]) .rq-lapel { fill: color-mix(in srgb, var(--coat, var(--fig-coat)) 70%, var(--fig-tr)); stroke: var(--fig-e); stroke-width: .26; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .rq-seam { fill: none; stroke: var(--fig-e); stroke-width: .24; stroke-linecap: round; opacity: .55; }
:is(.hf-figure,[id^="hf-"]) .rq-btn { fill: var(--fig-e); opacity: .55; }
:is(.hf-figure,[id^="hf-"]) .rq-r.rq-tb { fill: var(--d-r); }
:is(.hf-figure,[id^="hf-"]) .rq-t.rq-tb { fill: var(--d-l); }
:is(.hf-figure,[id^="hf-"]) .rq-glass { fill: var(--scr-tile); }
:is(.hf-figure,[id^="hf-"]) .rq-logo { fill: var(--logo-c, color-mix(in srgb, var(--teal-ink) 72%, var(--shade))); }
:is(.hf-figure,[id^="hf-"]) .fl-fig-lead { --logo-c: var(--logo-pale); }
/* Motion: the mockups' own (conveyor advance, Attention breathe). Names come from custom properties, so
   --hf-mv-b / --hf-mv-c / --hf-mv-l: none (set on .hf-figure or any ancestor) stops them, also inside <use>
   clones; --hf-ps: paused freezes them in place. Every animation rests on the complete frame. */
:is(.hf-figure,[id^="hf-"]) .fl-mv-b { animation: var(--hf-mv-b, hf-adv-b) 1.9s linear infinite; animation-play-state: var(--hf-ps, running); }
:is(.hf-figure,[id^="hf-"]) .fl-mv-c { animation: var(--hf-mv-c, hf-adv-c) 5.2s linear infinite; animation-play-state: var(--hf-ps, running); }
:is(.hf-figure,[id^="hf-"]) .fl-lit.fl-st-warn { animation: var(--hf-mv-l, hf-breathe) 2.4s ease-in-out 2; animation-play-state: var(--hf-ps, running); }
@keyframes hf-adv-b { to { transform: translate(7px, 3.5px); } }
@keyframes hf-adv-c { to { transform: translate(22px, 11px); } }
@keyframes hf-breathe { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .hf-figure { --hf-mv-b: none; --hf-mv-c: none; --hf-mv-l: none; }
}
@media (forced-colors: active) {
  :is(.hf-figure,[id^="hf-"]) .fl-lit-s, :is(.hf-figure,[id^="hf-"]) .fl-lit-t { forced-color-adjust: none; }
}
/* Callouts: a dot on the object and a leader to its card (geometry from src/data/hero.json; pathLength 100, so
   the line draws dot to card). Each .hf-svg carries --hf-lw and --hf-dw in its own units and each dot its r, so
   they read as 1.25 px, a 1.5 px halo and a 3.5 px radius at the reference frames (wide 585 px, phone 356 px).
   --hf-co-c is resolved on .hf-figure, so it is the site accent, not the drawing token. */
.hf-figure { --hf-co-c: var(--teal); }
:is(.hf-figure,[id^="hf-"]) .hf-ln { fill: none; stroke: var(--hf-co-c, var(--teal)); stroke-width: var(--hf-lw, 1); stroke-linecap: round; stroke-linejoin: round; }
:is(.hf-figure,[id^="hf-"]) .hf-dot { fill: var(--hf-co-c, var(--teal)); stroke: var(--surface); stroke-width: var(--hf-dw, 1); }
/* Cards (HTML, outside the drawings, so the site tokens apply): where Plant Toolbox is in use, the data it holds,
   the decision. --x/--y put the line's end in % of the wide crop and data-side names the card corner or edge that
   sits on it. Lines never wrap, so a card is always its 2-3 lines, or its kicker and up to 4 value rows
   (dl.hf-card-vals, Revision 3: 3 on the phone, .hf-card-w rows are wide only). A moving value (.hf-v, ticked
   once a second by home.js) has a fixed width in ch (--hf-w) and tabular figures, so ticking never moves a
   card; a status pill (.hf-card-st) sits in the kicker. Below 720 px only the data-phone="on" card
   shows, at --px/--py with data-pside, scaled from the 356 px phone frame. No motion here: the
   hero CSS owns entrance, timing and visibility. From 720 px the cards scale with the frame (container units on
   .hf-frame, which takes its width from the grid and its height from aspect-ratio); fixed px stay as the fallback. */
.hf-figure .hf-frame { container-type: inline-size; }
.hf-figure .hf-card { position: absolute; left: var(--x); top: var(--y); z-index: 1; box-sizing: border-box; width: max-content; margin: 0; padding: 5px 8px 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-control); box-shadow: var(--shadow-1); font-family: var(--font-sans); line-height: 1.3; text-align: left; pointer-events: none; }
.hf-figure .hf-card > p { margin: 0; white-space: nowrap; }
.hf-figure .hf-card-k { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--teal-ink); }
.hf-figure .hf-card-v { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hf-figure .hf-card-d { font-size: 11px; color: var(--ink-3); }
.hf-figure .hf-card-st { display: inline-block; margin-left: .35em; padding: 0 .5em; border-radius: 999px; font-size: .92em; line-height: 1.4; letter-spacing: 0; vertical-align: .05em; }
.hf-figure .hf-card-st--ok { background: var(--ok-tint); color: var(--ok-ink); }
.hf-figure .hf-card-st--warn { background: var(--warn-tint); color: var(--warn-ink); }
.hf-figure .hf-card-st--danger { background: var(--danger-tint); color: var(--danger-ink); }
.hf-figure .hf-card-vals { display: grid; grid-template-columns: auto auto; column-gap: .9em; margin: .25em 0 0; padding-top: .25em; border-top: 1px solid var(--hairline); line-height: 1.35; }
.hf-figure .hf-card-vals :is(dt, dd) { margin: 0; white-space: nowrap; }
.hf-figure .hf-card-vals dt { font-size: 11px; color: var(--ink-3); }
.hf-figure .hf-card-vals dd { font-size: 12px; font-weight: 600; color: var(--ink); }
.hf-figure .hf-card-vals dd > span { font-weight: 400; color: var(--ink-3); }
.hf-figure .hf-v { display: inline-block; width: var(--hf-w); font-variant-numeric: tabular-nums; text-align: left; }
.hf-figure .hf-card[data-side="tl"] { transform: none; }
.hf-figure .hf-card[data-side="t"] { transform: translate(-50%, 0); }
.hf-figure .hf-card[data-side="tr"] { transform: translate(-100%, 0); }
.hf-figure .hf-card[data-side="r"] { transform: translate(-100%, -50%); }
.hf-figure .hf-card[data-side="br"] { transform: translate(-100%, -100%); }
.hf-figure .hf-card[data-side="b"] { transform: translate(-50%, -100%); }
.hf-figure .hf-card[data-side="bl"] { transform: translate(0, -100%); }
.hf-figure .hf-card[data-side="l"] { transform: translate(0, -50%); }
@media (min-width: 720px) {
  .hf-figure .hf-card { padding: .85cqi 1.37cqi 1.03cqi; }
  .hf-figure .hf-card-k { font-size: clamp(9px, 1.795cqi, 10.5px); }
  .hf-figure .hf-card-v { font-size: clamp(10.5px, 2.137cqi, 12.5px); }
  .hf-figure .hf-card-d { font-size: clamp(9.5px, 1.88cqi, 11px); }
  .hf-figure .hf-card-vals dt { font-size: clamp(9.5px, 1.88cqi, 11px); }
  .hf-figure .hf-card-vals dd { font-size: clamp(10px, 2.051cqi, 12px); }
}
@media (max-width: 719px) {
  .hf-figure .hf-card { left: var(--px); top: var(--py); padding: 4px 7px 5px; padding: 1.124cqi 1.966cqi 1.404cqi; }
  .hf-figure .hf-card:not([data-phone="on"]) { visibility: hidden; }
  .hf-figure .hf-card-k { font-size: 10px; font-size: clamp(9px, 2.809cqi, 10px); }
  .hf-figure .hf-card-v { font-size: 11px; font-size: clamp(10px, 3.09cqi, 11px); }
  .hf-figure .hf-card-d { font-size: 10.5px; font-size: clamp(9.5px, 2.949cqi, 10.5px); }
  .hf-figure .hf-card-vals dt { font-size: 10px; font-size: clamp(9px, 2.809cqi, 10px); }
  .hf-figure .hf-card-vals dd { font-size: 10.5px; font-size: clamp(9.5px, 2.949cqi, 10.5px); }
  .hf-figure .hf-card-w { display: none; }
  .hf-figure .hf-card[data-phone="on"][data-pside="tl"] { transform: none; }
  .hf-figure .hf-card[data-phone="on"][data-pside="t"] { transform: translate(-50%, 0); }
  .hf-figure .hf-card[data-phone="on"][data-pside="tr"] { transform: translate(-100%, 0); }
  .hf-figure .hf-card[data-phone="on"][data-pside="r"] { transform: translate(-100%, -50%); }
  .hf-figure .hf-card[data-phone="on"][data-pside="br"] { transform: translate(-100%, -100%); }
  .hf-figure .hf-card[data-phone="on"][data-pside="b"] { transform: translate(-50%, -100%); }
  .hf-figure .hf-card[data-phone="on"][data-pside="bl"] { transform: translate(0, -100%); }
  .hf-figure .hf-card[data-phone="on"][data-pside="l"] { transform: translate(0, -50%); }
}