/* Generated by brand/figures/build.mjs from the anatomy kit (brand/figures/kit, MIT). Do not edit. */

.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

.iso,.iso[data-theme="light"]{
  --anatomy-page:#eef2f0;--anatomy-card:#ffffff;--anatomy-text:#4e6662;--anatomy-strong:#061719;--anatomy-muted:#61706d;
  --anatomy-paper:#ffffff;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#d6dfdc;--anatomy-shade-1:#e1e8e5;--anatomy-shade-2:#eaf0ed;--anatomy-shade-3:#f3f6f5;
  --anatomy-lit-top:#ffefd0;--anatomy-lit-shade:#f3dcae;
  --anatomy-hi:#10292c;--anatomy-mid:#7f9490;--anatomy-lo:#b1c0bd;--anatomy-faint:#d3dcda;--anatomy-lit:#9a5b00;
  --anatomy-halo:#6f8a85;--anatomy-halo-opacity:.3;--anatomy-dot:#24393b;
  --anatomy-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
}
:root[data-theme="dark"] .iso{
  --anatomy-page:#121417;--anatomy-card:#1c1f24;--anatomy-text:#9ba1a7;--anatomy-strong:#f0f1f2;--anatomy-muted:#84898d;
  --anatomy-paper:#1c1f24;--anatomy-face:#24272b;--anatomy-top:#25282c;
  --anatomy-shade-0:#15181c;--anatomy-shade-1:#1a1e22;--anatomy-shade-2:#1e2126;--anatomy-shade-3:#21252a;
  --anatomy-lit-top:#4a3714;--anatomy-lit-shade:#30240d;
  --anatomy-hi:#d6d9dd;--anatomy-mid:#71767b;--anatomy-lo:#45484c;--anatomy-faint:#323539;--anatomy-lit:#ffb547;
  --anatomy-halo:#060709;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e9ec;
}
:root[data-theme="dark"] .iso[data-theme="light"]{
  --anatomy-page:#f0f1f2;--anatomy-card:#ffffff;--anatomy-text:#5c6166;--anatomy-strong:#121417;--anatomy-muted:#696d71;
  --anatomy-paper:#ffffff;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dadde0;--anatomy-shade-1:#e4e6e9;--anatomy-shade-2:#edeef1;--anatomy-shade-3:#f4f5f6;
  --anatomy-lit-top:#ffefd0;--anatomy-lit-shade:#f3dcae;
  --anatomy-hi:#21252a;--anatomy-mid:#8a8f95;--anatomy-lo:#b9bdc1;--anatomy-faint:#d7dadd;--anatomy-lit:#9a5b00;
  --anatomy-halo:#7e848b;--anatomy-halo-opacity:.3;--anatomy-dot:#323539;
}

.iso[data-away] [data-flow]{animation-play-state:paused}

.iso-figure{margin:0;color:var(--anatomy-text)}
.iso-plate{box-shadow:inset 0 0 0 1px var(--line,var(--anatomy-faint))}
.iso-plate-corner[data-corner]{font-family:var(--font-body,system-ui,sans-serif);font-size:var(--step--1,14px);font-weight:500;letter-spacing:normal;text-transform:none}
.iso-plate-corner[data-corner="readout"]{font-family:var(--anatomy-mono);font-size:11px;font-weight:400}
.iso-stage{position:relative;outline-offset:6px}
.iso-stage>img{display:block;width:100%;height:auto;object-fit:contain}
/* Every still is drawn in white mode's palette; in dark mode it waits hidden until the figure goes live, and shows if that fails */
:root[data-theme="dark"] .iso-figure:not(.is-live):not(.is-still) .iso-stage>img{visibility:hidden}
.iso-stage>svg,.iso-stage>img{max-height:max(320px,100svh - 280px)}
/* A figure with WebGL water lays a canvas over its drawing, and over that a second svg with the parts that stand above
   the water; both cover the drawing's box */
.iso-stage>.fig-gl,.iso-stage>svg.fig-front{position:absolute;inset:0;width:100%;height:100%;max-height:none}
.iso-stage>.fig-gl{display:block;pointer-events:none}
.iso-legend{font-size:var(--step--1,13px)}
.iso-caption{max-width:62ch;text-wrap:pretty}
/* A narrow plate wraps the hint and the readout, each in its own half, so they never meet */
.iso-plate{container-type:inline-size}
@container (max-width:680px){.iso-plate-corner:is([data-corner="hint"],[data-corner="readout"]){max-width:calc(50% - 12px);white-space:normal;line-height:1.35}}
/* The controls and the hint that names them only work once the module runs */
.iso-figure:not(.is-live) :is(.fig-controls,[data-corner="hint"]){visibility:hidden}
.fig-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.fig-controls[hidden]{display:none}
/* The grip (grip.js): a dashed ring on the one control a reader can work. It brightens over the drawing, closes under the
   pointer, and pings when the reader presses somewhere else on the machine */
.fig-grip{pointer-events:none}
.fig-grip__ring,.fig-grip__ping{fill:none;stroke:var(--anatomy-mid);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.fig-grip__ring{stroke-dasharray:2 6;transition:stroke .2s,stroke-width .2s}
.fig-grip__ping{opacity:0;transform-box:fill-box;transform-origin:center}
.fig-grip__hit{fill:transparent;pointer-events:all;cursor:grab;touch-action:none}
.iso-stage:hover .fig-grip__ring,.iso-stage:focus-visible .fig-grip__ring,.fig-grip.is-called .fig-grip__ring{stroke:var(--anatomy-hi)}
.fig-grip.is-hot .fig-grip__ring,.fig-grip.is-held .fig-grip__ring{stroke:var(--anatomy-hi);stroke-width:1.6;stroke-dasharray:none}
.fig-grip.is-held .fig-grip__hit{cursor:grabbing}
.fig-grip.is-called .fig-grip__ping{animation:fig-ping 900ms cubic-bezier(.2,.6,.3,1) 2}
.fig-grip.is-off{display:none}
/* the dashes run only while the reader is on the drawing: running all the time, they had the browser paint the whole
   drawing again in every frame */
@media (prefers-reduced-motion:no-preference){.iso-stage:hover .fig-grip__ring,.iso-stage:focus-visible .fig-grip__ring{animation:iso-flow 2600ms linear infinite}}
.iso-plate:hover .iso-plate-corner[data-corner="hint"]{color:var(--anatomy-strong)}
@keyframes fig-ping{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}
@media (prefers-reduced-motion:reduce){.fig-grip.is-called .fig-grip__ping{animation:none}}
/* The scroll teardown (explode.js): torn down, the hint and the readout give way to twins that name the assembly under
   the pointer, which gets an outline */
.iso-figure:not([data-apart]) [data-explode-hint],.iso-figure[data-apart] [data-corner="hint"]:not([data-explode-hint]),.iso-figure:not([data-naming]) [data-explode-name],.iso-figure[data-naming] [data-readout]{display:none}
.explode-outline{flood-color:var(--anatomy-strong)}
/* On a phone the controls sit right under the plate, so the hint gives way and a long readout wraps */
@media (max-width:560px){.iso-plate{padding-bottom:56px}.iso-plate-corner[data-corner="hint"]{display:none}.iso-plate-corner[data-corner="readout"]{left:0;max-width:none;white-space:normal;text-align:right}}

.iso [data-casing],.iso[data-theme="light"] [data-casing],:root[data-theme="dark"] .iso[data-theme="light"] [data-casing]{
  --anatomy-paper:#1b3d42;--anatomy-face:#1b3d42;--anatomy-top:#2c5156;
  --anatomy-shade-0:#12313a;--anatomy-shade-1:#163639;--anatomy-shade-2:#1a3c40;--anatomy-shade-3:#1e4247;
  --anatomy-hi:#061719;--anatomy-mid:#7d9a9d;--anatomy-lo:#4f6f73;--anatomy-faint:#33555a;--anatomy-dot:#d0dad7;
}
:root[data-theme="dark"] .iso [data-casing]{
  --anatomy-paper:#15292b;--anatomy-face:#15292b;--anatomy-top:#1d3538;
  --anatomy-shade-0:#0c1819;--anatomy-shade-1:#102022;--anatomy-shade-2:#132527;--anatomy-shade-3:#172b2e;
  --anatomy-hi:#7f9a9c;--anatomy-mid:#5b7578;--anatomy-lo:#3d5558;--anatomy-faint:#2a3f42;--anatomy-dot:#d6e0df;
}