/* generated by site/build.mjs from vendor/iso-kit.mjs */

:root,[data-iso=light]{--iso-bg:#FBFAF7;--iso-top:#FFFFFF;--iso-front:#F5F3EE;--iso-side:#E3E0D7;--iso-hi:#ECEAE3;--iso-recess:#D8D5CC;--iso-etch:#BDBAB1;--iso-line:#3A3833;--iso-ink:#3A3833;--iso-screen:#FBFAF7;--iso-grid:#DEDBD2;--iso-acc:#FA5D19;--iso-acc-dim:#F2A27E;--iso-acc-side:#D94A0E;--iso-glow:#FA5D19;--iso-glow-op:.55;--iso-shadow:#3A3833;--iso-shadow-op:.14;--iso-ui:#3A3833}
[data-iso=dark]{--iso-bg:#121514;--iso-top:#4B524D;--iso-front:#363C38;--iso-side:#262B28;--iso-hi:#5E665F;--iso-recess:#1B1F1D;--iso-etch:#6E7770;--iso-line:#A3ABA4;--iso-ink:#F1EEE4;--iso-screen:#0B0E0D;--iso-grid:#2A302D;--iso-acc:#FF5A1F;--iso-acc-dim:#8A3C1B;--iso-acc-side:#C2410F;--iso-glow:#FF7A45;--iso-glow-op:.85;--iso-shadow:#000;--iso-shadow-op:.7;--iso-ui:#F1EEE4}
.iso-art{background:var(--iso-bg)}
.iso-art path,.iso-art rect,.iso-art circle{stroke:var(--iso-line);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .thin{stroke-width:.8}
.iso-art .top{fill:var(--iso-top)}.iso-art .front{fill:var(--iso-front)}.iso-art .side{fill:var(--iso-side)}
.iso-art .face-hi{fill:var(--iso-hi)}.iso-art .recess{fill:var(--iso-recess);stroke:var(--iso-etch)}
.iso-art .bezel{fill:var(--iso-recess)}.iso-art .screen{fill:var(--iso-screen);stroke:var(--iso-etch)}
.iso-art .dial{fill:var(--iso-top);stroke:var(--iso-etch)}
.iso-art .grid{stroke:var(--iso-grid);stroke-width:.8;vector-effect:non-scaling-stroke}
.iso-art .etch{stroke:var(--iso-etch);stroke-width:.8;vector-effect:non-scaling-stroke}
.iso-art .etch-ink{stroke:var(--iso-ink);stroke-width:.8;vector-effect:non-scaling-stroke}
.iso-art .trace{fill:none;stroke:var(--iso-acc);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .needle{stroke:var(--iso-ink);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.iso-art .needle-hot{stroke:var(--iso-acc);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.iso-art .lever{stroke:var(--iso-ink);stroke-width:2.6;stroke-linecap:round}
.iso-art .ink{fill:var(--iso-ink)}
.iso-art .acc{fill:var(--iso-acc)}.iso-art .acc-side{fill:var(--iso-acc-side)}.iso-art .acc-dim{fill:var(--iso-acc-dim)}
.iso-art .acc-hl{fill:none;stroke:#fff;stroke-opacity:.7}.iso-art .hl{fill:#fff;fill-opacity:.75}
.iso-art .glow{fill:var(--iso-glow);opacity:var(--iso-glow-op);stroke:none;filter:url(#iso-glow)}
.iso-art .floor-shadow{fill:var(--iso-shadow);opacity:var(--iso-shadow-op);stroke:none;filter:url(#iso-shadow)}
/* system-1 (pure-moose-h6b6-p5): mono labels and cables */
.iso-art text.lbl{fill:var(--iso-ink);stroke:none;font-family:var(--mono,monospace);font-size:8px;letter-spacing:.06em}
.iso-art text.lbl-acc{fill:var(--iso-acc);stroke:none;font-family:var(--mono,monospace);font-size:8px;letter-spacing:.06em;font-weight:700}
.iso-art .cable{fill:none;stroke:var(--iso-line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .cable-acc{fill:none;stroke:var(--iso-acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .dash{stroke-dasharray:3 4}


.iso-art{--da-sys:#2F5BFF;--da-paper:#FFFFFF;--da-paper-line:#A9A69E}
[data-iso=dark] .iso-art,.iso-art[data-iso=dark]{--da-sys:#93A8FF;--da-paper:#F3F2EE;--da-paper-line:#8E8B84}
.iso-art .da-sys{fill:var(--da-sys);stroke:none}
.iso-art .da-sys-glow{fill:var(--da-sys);opacity:.6;stroke:none;filter:url(#iso-glow)}
.iso-art .da-ink-glow{fill:var(--iso-ink);opacity:.22;stroke:none;filter:url(#iso-glow)}
.iso-art .da-paper{fill:var(--da-paper);stroke:var(--iso-line)}
.iso-art .da-pl{stroke:var(--da-paper-line);stroke-width:.8;fill:none;vector-effect:non-scaling-stroke}
.iso-art .da-perf{stroke:var(--da-paper-line);stroke-width:.8;stroke-dasharray:2 2;fill:none;vector-effect:non-scaling-stroke}
.iso-art .da-ink-face{fill:var(--iso-ink)}
.iso-art .da-glyph{fill:none;stroke:var(--iso-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .da-mark{fill:none;stroke:var(--da-sys);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .da-trace{fill:none;stroke:var(--da-sys);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .da-wire{fill:none;stroke:var(--iso-line);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .da-wire-sys{fill:none;stroke:var(--da-sys);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art text.da-silk{fill:var(--iso-ink);stroke:none;font-family:var(--font-mono,monospace);font-weight:700;letter-spacing:.04em}
.iso-art text.da-silk-inv{fill:var(--iso-top);stroke:none;font-family:var(--font-mono,monospace);font-weight:700;letter-spacing:.04em}
.iso-art .da-slot{fill:var(--iso-shadow);fill-opacity:.75;stroke:var(--iso-line)}
.iso-art [data-lit].lit .blink{animation:iso-blink 1.1s ease-in-out infinite}
.iso-art [data-lit].lit .blink2{animation:iso-blink 1.1s ease-in-out -.55s infinite}
.iso-art .blink:not(.lit *),.iso-art .blink2:not(.lit *){animation:none}
@media (prefers-reduced-motion:reduce){.iso-art [data-lit].lit .blink,.iso-art [data-lit].lit .blink2{animation:none}}


.iso-art .trace-ink{fill:none;stroke:var(--iso-ink);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .check-ink{fill:none;stroke:var(--iso-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .iso-mono{font-family:var(--mono,monospace);font-size:9px;fill:var(--iso-ink);stroke:none;letter-spacing:.08em}


.iso-art .r2m-t{font-family:var(--mono,monospace);font-weight:700;font-size:15px;letter-spacing:.02em;fill:var(--iso-ink);stroke:none}
.iso-art .r2m-bg{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1.2}
.iso-art .r2m-ln{fill:none;stroke:var(--iso-ink);stroke-width:1.1;vector-effect:non-scaling-stroke}
.iso-art .r2m-dot{fill:var(--iso-ink);stroke:none}
.iso-art .r2m-acc .r2m-t{fill:var(--iso-acc)}.iso-art .r2m-acc .r2m-bg{stroke:var(--iso-acc);stroke-width:1.8}
.iso-art .r2m-acc .r2m-ln{stroke:var(--iso-acc)}.iso-art .r2m-acc .r2m-dot{fill:var(--iso-acc)}
.iso-art .r2m-eye{fill:var(--iso-ink);stroke:none}
.iso-art .r2m-face{fill:var(--iso-screen);stroke:var(--iso-line)}
.iso-art .r2m-tick{fill:none;stroke:var(--iso-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .r2m-tick-ink{fill:none;stroke:var(--iso-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .r2m-ghost path{stroke-dasharray:3 3;fill-opacity:.25}
.iso-art .r2m-arrow{fill:none;stroke:var(--iso-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@keyframes r2m-in{from{opacity:0}to{opacity:1}}
@keyframes r2m-bob{50%{transform:translateY(-3px)}}
.iso-art [data-lit].lit .r2m-s1{animation:r2m-in .3s .5s both}
.iso-art [data-lit].lit .r2m-s2{animation:r2m-in .3s 1s both}
.iso-art [data-lit].lit .r2m-s3{animation:r2m-in .3s 1.5s both}
.iso-art [data-lit].lit .r2m-work{transform-box:fill-box;animation:r2m-bob 1.6s ease-in-out infinite}
.iso-art [data-lit].lit .r2m-work:nth-child(2){animation-delay:-.5s}.iso-art [data-lit].lit .r2m-work:nth-child(3){animation-delay:-1.1s}
@media (prefers-reduced-motion:reduce){.iso-art [data-lit].lit .r2m-s1,.iso-art [data-lit].lit .r2m-s2,.iso-art [data-lit].lit .r2m-s3,.iso-art [data-lit].lit .r2m-work{animation:none}}


.iso-art .led-ink{fill:var(--iso-ink);stroke:var(--iso-line)}
.iso-art .halo-ink{fill:var(--iso-ink);opacity:.18;stroke:none;filter:url(#iso-glow)}
.iso-art .r2-eye{fill:var(--iso-ink);stroke:none}
.iso-art .r2-tag{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1}
.iso-art .r2-tag-acc{fill:var(--iso-bg);stroke:var(--iso-acc);stroke-width:1.6}
.iso-art .r2-lead{fill:none;stroke:var(--iso-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.iso-art .r2-lead-acc{fill:none;stroke:var(--iso-acc);stroke-width:1.4;vector-effect:non-scaling-stroke}
.iso-art .r2-dot{fill:var(--iso-ink);stroke:none}.iso-art .r2-dot-acc{fill:var(--iso-acc);stroke:none}
.iso-art text.r2-t{fill:var(--iso-ink);stroke:none;font-family:var(--mono,monospace);font-weight:700;letter-spacing:.03em}
.iso-art .r2-tick{fill:none;stroke:var(--iso-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-art .r2-arrow{fill:none;stroke:var(--iso-ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}


.iso-art .z12-tag{fill:var(--iso-ink);stroke:none;font-family:var(--mono,monospace);font-size:10.5px;font-weight:600;letter-spacing:.04em}
.iso-art .z12-tag-acc{fill:var(--iso-acc);stroke:none;font-family:var(--mono,monospace);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.iso-art .z12-box{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1}
.iso-art .z12-lead{fill:none;stroke:var(--iso-ink);stroke-width:.9;vector-effect:non-scaling-stroke}
.iso-art .z12-dot{fill:var(--iso-ink);stroke:none}
.iso-art .z12-head{fill:var(--iso-line);stroke:none}
.iso-art .z12-head-acc{fill:var(--iso-acc);stroke:none}
.iso-art .z12-face{fill:var(--iso-screen);stroke:var(--iso-line)}
.iso-art .z12-eye{fill:var(--iso-ink);stroke:none}
.iso-art .z12-pk{fill:var(--iso-ink);stroke:none;font-family:var(--mono,monospace);font-size:7px;font-weight:700}

/* panel kit (pure-moose-h6b6, 10-15): the CSS of the front-panel parts drawn by kit.mjs, lifted from the homepage method
   section (challenger X1, adopted by Virgil as the site's diagram language). Scope: an <svg class="mp"> inside a
   <figure class="lg-fig mp-fig">. Colour code: ink = work, sys (blue) = check/system, bad (red) = ✗, ok (green) = ✓,
   go (orange) = Virgil's key only. Playbook: rounds/online-identity/panel-playbook.md. */
/* ---------- legends on the drawing (iso-legend.js places them; here: leader length, sideways nudge, beat delay) ---------- */
.mp-fig .lg[data-k]{opacity:0;transition:opacity .3s}
.mp-fig .lg[data-k].on{opacity:1;transition-delay:var(--dl,0s)}
.mp-fig .lg[data-side=n]{transform:translate(calc(-50% + var(--dx,0px)),calc(-100% - var(--lead,10px) - 2px))}
.mp-fig .lg[data-side=n]::before{top:100%;left:calc(50% - var(--dx,0px));width:1px;height:var(--lead,10px)}
.mp-fig .lg[data-side=s]{transform:translate(calc(-50% + var(--dx,0px)),calc(var(--lead,10px) + 2px))}
.mp-fig .lg[data-side=s]::before{bottom:100%;top:auto;left:calc(50% - var(--dx,0px));width:1px;height:var(--lead,10px)}
.mp-fig .lg[data-side=w]{transform:translate(calc(-100% - var(--lead,10px) - 2px),-50%)}
.mp-fig .lg[data-side=w]::before{left:100%;right:auto;top:50%;width:var(--lead,10px);height:1px}
.mp-fig{container-type:inline-size}
.mp-fig .lg[data-side=c]{transform:translate(calc(-50% + var(--dx,0px)),-50%)}
.mp-fig .lg[data-side=cl]{transform:translate(var(--dx,0px),-50%)}
.mp-fig .lg[data-side=cr]{transform:translate(calc(-100% + var(--dx,0px)),-50%)}
.mp-fig .lg[data-side^=c]::before{display:none}
.mp-fig .lg[data-tone=bad]{--c:#FF8A7A}.mp-fig .lg[data-tone=ok]{--c:#4ADE80}
.mp-fig .lg.np{border:0;background:none;padding:0;transform:translate(0,-50%);font-weight:700;letter-spacing:.14em;color:#E9E5D8}
.mp-fig .lg.np::before,.mp-fig .lg.mp-st::before,.mp-fig .lg.mp-cpy::before{display:none}
.mp-fig .lg.mp-cpy{border:0;background:none;padding:0;transform:translate(0,-50%);color:#A9AFA6;letter-spacing:.06em}
.mp-fig .lg.mp-st{border:0;background:none;padding:0;transform:translate(-50%,-50%);letter-spacing:.02em;font-weight:700}
.mp-wide .lg.mp-st{transform:translate(0,-50%)}
/* the narrowest phones (320): tighter letters, so a legend fits between the cables and the copy's title clears its dashes */
@container (max-width:280px){.mp-fig .lg[data-k]:not(.mp-st){letter-spacing:0;padding-inline:4px}.mp-fig .lg.mp-cpy{letter-spacing:0}}
@media (prefers-reduced-motion:reduce){.mp-fig .lg{transition:none!important}}

/* ---------- the drawing ---------- */
.mp{display:block;width:100%;height:auto;overflow:visible;
 --f-face:#2A2D2B;--f-sub:#202321;--f-rec:#141615;--f-line:#8E968F;--f-etch:#59615B;--f-ink:#EDEBE6;--f-sys:#93A8FF;--f-go:#FF5A1F;--f-bad:#FF6B5E;--f-ok:#4ADE80;--f-off:#3C403D;--f-scr:#0D100F}
.mp *{stroke-linejoin:round;stroke-linecap:round}
.mp .mp-shd{fill:#000;opacity:.55}
.mp .mp-face{fill:var(--f-face);stroke:var(--f-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.mp .mp-hi{fill:none;stroke:#fff;stroke-opacity:.1;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-scr{fill:#232624;stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-slot{stroke:#101211;stroke-width:1.3;vector-effect:non-scaling-stroke}
.mp .mp-sub{fill:var(--f-sub);stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-sublo{fill:none;stroke:#000;stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-plate{fill:#161817;stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-etx{fill:var(--f-line);stroke:none;font-family:var(--font-mono);font-weight:600;letter-spacing:.08em}
.mp .mp-off{fill:var(--f-off);stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-lens{stroke:none}.mp .mp-halo{stroke:none}
.mp .mp-glint{fill:#fff;opacity:.6}
.mp .t-ink{--c:var(--f-ink)}.mp .t-sys{--c:var(--f-sys)}.mp .t-bad{--c:var(--f-bad)}.mp .t-ok{--c:var(--f-ok)}.mp .t-go{--c:var(--f-go)}
.mp .mp-lens{fill:var(--c)}
.mp .mp-gl{fill:none;stroke:#0D100F;stroke-width:2.2;vector-effect:non-scaling-stroke}
.mp .mp-ld{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.mp .mp-ld.l-sys{stroke:#93A8FF}.mp .mp-ld.l-bad{stroke:#FF8A7A}.mp .mp-ld.l-ok{stroke:#4ADE80}.mp .mp-ld.l-ink{stroke:#E9E5D8}
/* keys: the cap travels onto its base and settles; it comes back up when the beat moves on */
.mp .mp-well{fill:var(--f-rec);stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-base{fill:#101211;stroke:var(--f-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .mp-top{fill:var(--f-face);stroke:var(--f-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.mp .mp-caphi{fill:none;stroke:#fff;stroke-opacity:.13;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-vg{fill:var(--f-ink)}
.mp .mp-kg{fill:none;stroke:var(--f-ink);stroke-width:2.6}
.mp .mp-cap{transition:transform .24s cubic-bezier(.3,.7,.4,1)}
.mp .mp-k.lit .mp-cap{transform:translateY(var(--kd));animation:mppress .34s cubic-bezier(.55,0,.45,1) both}
@keyframes mppress{0%{transform:none}42%{transform:translateY(var(--kd))}62%{transform:translateY(calc(var(--kd) - 2.4px))}100%{transform:translateY(var(--kd))}}
.mp .mp-vled{opacity:0;transition:opacity .2s}
.mp .mp-vk.lit .mp-vled{opacity:1;transition-delay:.14s}
.mp .mp-vk .mp-top{transition:filter .3s}
.mp .mp-vk.lit .mp-top{filter:drop-shadow(0 0 10px rgb(255 90 31/.42));transition-delay:.14s}
/* the agents type while they work: the key goes down and up, the work light shows each stroke */
.mp .mp-ag.lit .mp-cap{animation:mptype calc(.58s + var(--a) * .17s) calc(var(--a) * -.21s) infinite}
@keyframes mptype{0%,46%,100%{transform:none}7%,24%{transform:translateY(var(--kd))}}
.mp .mp-wl{opacity:0}
.mp .mp-wl.lit{animation:mpwl calc(.58s + var(--a) * .17s) calc(var(--a) * -.21s) infinite}
@keyframes mpwl{0%,30%,100%{opacity:.18}7%,24%{opacity:1}}
.mp .mp-seg{fill:#2C302E}
.mp .mp-segl{fill:var(--f-ink);opacity:0}
.mp .mp-segl.lit{animation-duration:1.7s;animation-timing-function:step-end;animation-iteration-count:infinite}
.mp .mp-tick{stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
/* jacks, plugs, cords */
.mp .mp-jring{fill:none;stroke:var(--f-etch);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-nut{fill:#474C49;stroke:#151716;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-hole{fill:#070808}
.mp .mp-boot{fill:#1C1F1E;stroke:var(--f-line);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-plug{fill:#3B403D;stroke:var(--f-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .mp-plugin{fill:#1C1F1E}
.mp .mp-cordo{fill:none;stroke:#070808;stroke-width:6.5;vector-effect:non-scaling-stroke}
.mp .mp-cord{fill:none;stroke:#737A75;stroke-width:3;vector-effect:non-scaling-stroke}
/* a pulse: the cord lights behind a bead with a trail; the jacks it leaves and reaches flash */
.mp .mp-glow{fill:none;stroke:var(--c);stroke-width:2.6;stroke-dasharray:var(--len) calc(var(--len) * 2);stroke-dashoffset:var(--len);opacity:0;transition:opacity .45s}
.mp .mp-glow.lit{opacity:.9;stroke-dashoffset:0;animation:mpwipe var(--pd) var(--pdl) cubic-bezier(.45,0,.35,1) both}
@keyframes mpwipe{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.mp .mp-pz{fill:none;stroke:var(--c);opacity:0;stroke-dasharray:var(--L) 6000;stroke-dashoffset:var(--L)}
.mp .mp-pz1{stroke-width:7.5}.mp .mp-pz2{stroke-width:4.6;stroke-opacity:.8}.mp .mp-pz3{stroke-width:3;stroke-opacity:.38}
.mp .mp-pz.lit{animation:mprun var(--pd) var(--pdl) cubic-bezier(.45,0,.35,1) both}
@keyframes mprun{0%{opacity:1;stroke-dashoffset:var(--L)}92%{opacity:1}100%{opacity:0;stroke-dashoffset:calc(var(--L) - var(--len))}}
.mp .mp-flash{fill:none;stroke:var(--c);stroke-width:2.4;opacity:0;transform-box:fill-box;transform-origin:center}
.mp .mp-flash.lit{animation:mpflash .6s var(--fd) ease-out both}
@keyframes mpflash{0%{opacity:0;transform:scale(.7)}18%{opacity:.95}100%{opacity:0;transform:scale(1.75)}}
/* lamps and parts that a beat lights: they wait for their pulse (--dl) */
.mp [data-k]{opacity:0;transition:opacity .3s}
.mp [data-k].lit{opacity:1;transition-delay:var(--dl,0s)}
.mp .mp-chk.lit{transition-delay:calc(var(--dl,0s) + var(--i) * .17s)}
.mp .mp-bad.lit{transform-box:fill-box;transform-origin:center;animation:mppop .42s calc(var(--i) * .17s) cubic-bezier(.3,.7,.4,1.4) both}
.mp .mp-pop{transform-box:fill-box;transform-origin:center}
.mp .mp-pop.lit{animation:mppop .45s calc(var(--i) * .14s) cubic-bezier(.3,.7,.4,1.4) both}
@keyframes mppop{from{transform:scale(.4)}to{transform:none}}
/* the flag rises, then its pennant waves once */
.mp .mp-flag{transform:translateY(var(--fh));transition:transform .5s cubic-bezier(.4,0,.6,1)}
.mp .mp-flag.lit{transform:none;transition:transform .6s cubic-bezier(.3,.7,.4,1.06) var(--dl)}
.mp .mp-mast{fill:none;stroke:var(--f-ink);stroke-width:2.2;vector-effect:non-scaling-stroke}
.mp .mp-finial{fill:var(--f-ink)}
.mp .mp-penp{fill:var(--f-sys)}
.mp .mp-flag.lit .mp-pen{animation:mpwave 1.1s calc(var(--dl) + .42s) ease-out both}
@keyframes mpwave{0%{transform:none}22%{transform:skewY(-10deg) scaleX(.86)}50%{transform:skewY(6deg) scaleX(.95)}76%{transform:skewY(-2.5deg)}100%{transform:none}}
.mp .mp-slit{fill:var(--f-scr);stroke:var(--f-line);stroke-width:1;vector-effect:non-scaling-stroke}
/* screens and the store fronts on them */
.mp .mp-scrn{fill:var(--f-scr);stroke:var(--f-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .mp-pg{fill:#4A504C}
.mp .mp-pgl{fill:none;stroke:#4A504C;stroke-width:2.4}
.mp .mp-pgc{fill:#151817;stroke:#3A403C;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .mp-pgi{fill:#1E2220}
.mp .mp-nc{fill:#252927;stroke:var(--f-ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .mp-ni{fill:#3B413D}
.mp .mp-nl{fill:none;stroke:var(--f-ink);stroke-width:2.4}
.mp .mp-nl2{fill:none;stroke:var(--f-ink);stroke-width:2.4;stroke-opacity:.7;stroke-dasharray:1 5}
.mp .mp-nb{fill:var(--f-ink)}
.mp .mp-build{opacity:0}.mp .mp-build.lit{opacity:1}
.mp .mp-build .mp-nc,.mp .mp-build .mp-ni{fill:none;stroke:var(--f-ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .mp-build [pathLength]{stroke-dasharray:100;stroke-dashoffset:100}
.mp .mp-build.lit [pathLength]{animation:mpdraw .8s calc(var(--i) * .32s + .1s) ease-out forwards}
.mp .mp-build .mp-nb{opacity:0}
.mp .mp-build.lit .mp-nb{animation:mpon .1s calc(var(--i) * .32s + .9s) both}
@keyframes mpdraw{to{stroke-dashoffset:0}}
@keyframes mpon{from{opacity:0}to{opacity:1}}
.mp .mp-fail{fill:var(--f-bad)}
/* the store ships: each card unfolds from its top edge behind a scan line, one after the other */
.mp .mp-tnew{opacity:0}
.mp .mp-tnew.lit{opacity:1;transition:opacity 0s calc(var(--i) * .34s + .15s)}
.mp .mp-unf{transform:scaleY(0)}
.mp .mp-tnew.lit .mp-unf{transform:none;animation:mpunf .55s calc(var(--i) * .34s + .15s) cubic-bezier(.3,.7,.4,1.12) both}
@keyframes mpunf{from{transform:scaleY(0)}to{transform:none}}
.mp .mp-scan{fill:var(--f-ink);opacity:0}
.mp .mp-tnew.lit .mp-scan{animation:mpscan .55s calc(var(--i) * .34s + .15s) cubic-bezier(.3,.7,.4,1) both}
@keyframes mpscan{0%{opacity:1;transform:none}85%{opacity:.9}100%{opacity:0;transform:translateY(var(--sh))}}
/* ME's screen: the line types in, word by word */
.mp .mp-caret{fill:var(--f-ink)}
.mp .mp-rule{fill:none;stroke:#2A302D;stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.mp .mp-mx{fill:none;stroke:var(--f-bad);stroke-width:2.4}
.mp .mp-word{fill:var(--f-ink);opacity:.82}
.mp .mp-msg.lit .mp-word{animation:mpon .1s calc(var(--dl,0s) + .15s + var(--w) * .1s) step-end both}
@media (prefers-reduced-motion:reduce){
.mp *{animation:none!important;transition:none!important}
.mp .mp-pz,.mp .mp-flash,.mp .mp-scan{display:none}
}
@keyframes mpm0s0{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm0s1{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm0s2{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm0s3{0%{opacity:0.08}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:0.08}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:0.08}}
@keyframes mpm0s4{0%{opacity:0.08}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:0.08}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:0.08}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:0.08}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm0s5{0%{opacity:0.08}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:0.08}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:1}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm0s6{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:0.08}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:1}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:1}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm0s7{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:1}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:1}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm0s8{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:1}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:1}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm0s9{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:1}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm1s0{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm1s1{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm1s2{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm1s3{0%{opacity:1}6.25%{opacity:0.08}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:0.08}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm1s4{0%{opacity:1}6.25%{opacity:0.08}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:0.08}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:0.08}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:0.08}87.5%{opacity:1}93.75%{opacity:0.08}100%{opacity:1}}
@keyframes mpm1s5{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:0.08}43.75%{opacity:1}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm1s6{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:1}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm1s7{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:1}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm1s8{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:1}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:1}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm1s9{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm2s0{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm2s1{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm2s2{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:1}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:1}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm2s3{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:1}25%{opacity:0.08}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:0.08}68.75%{opacity:1}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm2s4{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:1}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:1}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:1}100%{opacity:1}}
@keyframes mpm2s5{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:1}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:1}93.75%{opacity:0.08}100%{opacity:1}}
@keyframes mpm2s6{0%{opacity:1}6.25%{opacity:1}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:1}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:1}81.25%{opacity:1}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:1}}
@keyframes mpm2s7{0%{opacity:0.08}6.25%{opacity:1}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:1}50%{opacity:1}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:1}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm2s8{0%{opacity:0.08}6.25%{opacity:1}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:1}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}
@keyframes mpm2s9{0%{opacity:0.08}6.25%{opacity:0.08}12.5%{opacity:0.08}18.75%{opacity:0.08}25%{opacity:0.08}31.25%{opacity:0.08}37.5%{opacity:0.08}43.75%{opacity:0.08}50%{opacity:0.08}56.25%{opacity:0.08}62.5%{opacity:0.08}68.75%{opacity:0.08}75%{opacity:0.08}81.25%{opacity:0.08}87.5%{opacity:0.08}93.75%{opacity:0.08}100%{opacity:0.08}}

.iso-fig{margin:0}.iso-fig svg{display:block;width:100%;height:auto}
.sys-art{width:100%;max-width:760px;margin-inline:auto;border-radius:10px;overflow:hidden}.gar-art{max-width:260px}
.iso-art .part{cursor:pointer}.iso-art .lamp{opacity:0;transition:opacity .35s}.iso-art .part.on .lamp{opacity:1}
.iso-art [data-on]{transition:opacity .45s}.iso-art [data-on].off{opacity:0;pointer-events:none}
.iso-art [data-lit] .lamp{opacity:0;transition:opacity .35s}.iso-art [data-lit].lit .lamp{opacity:1}
@keyframes iso-flow{to{stroke-dashoffset:-24}}@keyframes iso-blink{50%{opacity:.35}}@keyframes iso-bob{50%{transform:translateY(-3px)}}
.iso-art .flow{stroke-dasharray:6 6;animation:iso-flow 1.2s linear infinite}
.iso-art .blink{animation:iso-blink 1.4s ease-in-out infinite}
.iso-art .bob{transform-box:fill-box;animation:iso-bob 1.8s ease-in-out infinite}
.ip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 4px 0;font:500 13px/1.4 var(--mono,monospace)}
.ip-b,.ip-dot{min-width:40px;min-height:40px;border:0;background:none;cursor:pointer;color:inherit;font:inherit;font-size:18px;display:inline-grid;place-items:center;padding:0}
.ip-dots{display:inline-flex}.ip-dot::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;opacity:.6}
.ip-dot[aria-current=true]::before{background:currentColor;border-color:currentColor;opacity:1}
.ip-t{flex:1 1 220px;min-height:2.8em}.ip-k{font-weight:700}
#how .ip{display:none}
@media (prefers-reduced-motion:reduce){.iso-art .lamp,.iso-art [data-on]{transition:none}.iso-art .flow,.iso-art .blink,.iso-art .bob{transform-box:fill-box;animation:none}}