.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}}

/* the section */
.anatomy{padding-block:var(--s-16,96px) var(--s-12,72px);background:var(--canvas)}
.anatomy__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);grid-template-areas:"card title" "card side";grid-template-rows:auto 1fr;column-gap:var(--s-8,40px);align-items:start}
.anatomy__card{grid-area:card;position:relative;margin:0;padding:40px 0 36px}
.anatomy__title{grid-area:title;margin:0 0 var(--s-6,32px);font-size:clamp(28px,2.6vw,40px);line-height:1.15}
.anatomy__side{grid-area:side}
.anatomy__corner{position:absolute;font:var(--w-medium,500) 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);pointer-events:none}
.anatomy__corner[data-c="fig"]{top:0;left:0;color:var(--ink)}
.anatomy__corner[data-c="title"]{top:0;right:0}
.anatomy__corner[data-c="hint"]{bottom:0;left:0}
.anatomy__corner[data-c="read"]{bottom:0;right:0;color:var(--ink);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:.02em;font-size:12px}
.anatomy__note{position:absolute;left:0;right:0;top:100%;margin-top:14px;max-width:62ch;color:var(--ink-3);font-size:var(--text-sm,14px);line-height:1.5}
.anatomy__big{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4,16px)}
.anatomy__num{font:300 clamp(64px,7vw,112px)/.9 var(--font-display,var(--font-body));font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.02em;transition:opacity 180ms ease}
.anatomy__name{font:400 var(--text-lg,20px)/1.25 var(--font-display,var(--font-body));color:var(--ink);transition:opacity 180ms ease}
.anatomy__big.is-swap .anatomy__num,.anatomy__big.is-swap .anatomy__name{opacity:0}
.anatomy__readout{margin:0 0 var(--s-6,32px);color:var(--ink-2);min-height:4.6em}
.anatomy__stage{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.anatomy__stage.is-turning{cursor:grabbing}
.anatomy__svg{display:block;width:100%;height:auto;overflow:visible;outline:none}
.anatomy__svg:focus-visible{outline:1px solid var(--panel-2);outline-offset:4px}
.anatomy__bar{display:flex;flex-wrap:wrap;gap:var(--s-3,12px);align-items:center;margin-top:var(--s-6,32px)}
.anatomy button{appearance:none;border:0;border-radius:0;cursor:pointer;font:var(--w-medium,500) var(--text-sm,14px)/1 var(--font-body);color:var(--ink);background:var(--canvas);transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out)}
.anatomy button:active{transform:scale(.97)}
.anatomy .anatomy__apart,.anatomy .seg button{min-height:44px;padding:0 var(--s-5,20px);display:inline-flex;align-items:center}
.anatomy .anatomy__apart{background:var(--ink);color:#fff}
.anatomy .anatomy__apart[aria-pressed="true"]{background:var(--panel-2);color:var(--ink)}
.anatomy [hidden]{display:none!important}
.anatomy .seg{display:flex;flex-wrap:wrap;background:var(--panel)}
.anatomy .seg button{background:transparent}
.anatomy .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.anatomy__legend{list-style:none;margin:0;padding:0}
.anatomy__legend button{width:100%;text-align:left;min-height:42px;padding:9px 0;display:flex;gap:14px;align-items:baseline;font-weight:400;font-size:var(--text-base,16px);color:var(--ink-2);box-shadow:inset 0 -1px 0 var(--panel-2)}
.anatomy__legend button span{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:var(--text-sm,14px);min-width:1.6em}
.anatomy__legend button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){
  .anatomy .seg button:not([aria-pressed="true"]):hover{background:var(--panel-2)}
  .anatomy__legend button:hover{color:var(--ink)}
}
@media (max-width:1000px){
  .anatomy__note{position:static;margin-top:18px}
  .anatomy__grid{grid-template-columns:1fr;grid-template-areas:"title" "card" "side";grid-template-rows:auto}
  .anatomy__title{margin-bottom:var(--s-4,16px)}
  .anatomy__side{margin-top:var(--s-6,32px)}
}
@media (max-width:900px){
  .anatomy{padding-block:var(--s-12,64px)}
  .anatomy__card{margin-inline:calc(var(--gutter,16px) * -1);padding:32px var(--gutter,16px) 30px}
  .anatomy__corner[data-c="fig"],.anatomy__corner[data-c="hint"]{left:var(--gutter,16px)}
  .anatomy__corner[data-c="title"],.anatomy__corner[data-c="read"]{right:var(--gutter,16px)}
  .anatomy__stage{margin-inline:calc(var(--gutter,16px) * -1);overflow:hidden}
}
@media (max-width:640px){.anatomy__corner[data-c="title"],.anatomy__corner[data-c="hint"]{display:none}}

/* the drawing */
.anatomy__stage.iso[data-theme="light"]{
  --anatomy-paper:#ffffff;--anatomy-face:#ffffff;--anatomy-top:#fbfaf7;
  --anatomy-shade-0:#d6d0c1;--anatomy-shade-1:#e0dbcf;--anatomy-shade-2:#eae6dc;--anatomy-shade-3:#f3f1eb;
  --anatomy-lit-top:#fdfcfa;--anatomy-lit-shade:#ebe7de;
  --anatomy-hi:#2a2620;--anatomy-mid:#8b8371;--anatomy-lo:#b9b09c;--anatomy-faint:#ddd7c9;--anatomy-lit:#201d18;
  --anatomy-halo:#6e6656;--anatomy-halo-opacity:.28;--anatomy-dot:#3a362d;--anatomy-weight:.8px;
  --accent:#9a7b45;
}
.anatomy__stage .st-img{mix-blend-mode:multiply}
.anatomy__stage .engrave{fill:#ffffff;opacity:.88;font-family:var(--font-body);letter-spacing:.26em}
.anatomy__stage .dr-hole{fill:#cdc6b6}
.anatomy__stage .cut-deep{fill:#6f6858}
.anatomy__stage .cut-wall{fill:#a79f8c}
.anatomy__stage .cut-side{fill:#bdb5a2}
.anatomy__stage .appliance>.iso-fill,.anatomy__stage .appliance>.iso-shade,.anatomy__stage .appliance>.iso-top{fill:#3a3733}
.anatomy__stage .dr-floor{fill:var(--anatomy-shade-1)}
.anatomy__stage .dr-side{fill:var(--anatomy-shade-2)}
.anatomy__stage .dr-dark{fill:#8b8371;opacity:.55}
.anatomy__stage .bs-wall{fill:var(--anatomy-shade-0)}
.anatomy__stage .bs-side{fill:var(--anatomy-shade-1)}
.anatomy__stage .hob{fill:#24221f}
.anatomy__stage [data-asm="hob"] .iso-line[data-tone="mid"]{stroke:#6d675c}
.anatomy__stage .steel .iso-top{fill:#e7e7e4}
.anatomy__stage .fr-back{fill:#fbf8f0}
.anatomy__stage .fr-side{fill:#efeadf}
.anatomy__stage .fr-floor{fill:#f4f0e7}
.anatomy__stage .glass>.iso-fill,.anatomy__stage .glass>.iso-top,.anatomy__stage .glass>.iso-shade{fill:#dfe7e4;opacity:.35}
.anatomy__stage .front{cursor:pointer}
@media (hover:hover) and (pointer:fine){.anatomy__stage .front:hover>.iso-solid>.iso-edge{stroke:var(--accent)}}
.anatomy__stage[data-hl="corpus"] [data-asm="corpus"] .iso-edge,.anatomy__stage[data-hl="corpus"] [data-asm="corpus"]>.iso-line,.anatomy__stage[data-hl="fronts"] [data-asm="fronts"] .iso-edge,.anatomy__stage[data-hl="fronts"] [data-asm="fronts"]>.iso-line,.anatomy__stage[data-hl="end"] [data-asm="end"] .iso-edge,.anatomy__stage[data-hl="end"] [data-asm="end"]>.iso-line,.anatomy__stage[data-hl="top"] [data-asm="top"] .iso-edge,.anatomy__stage[data-hl="top"] [data-asm="top"]>.iso-line,.anatomy__stage[data-hl="sink"] [data-asm="sink"] .iso-edge,.anatomy__stage[data-hl="sink"] [data-asm="sink"]>.iso-line,.anatomy__stage[data-hl="ledge"] [data-asm="ledge"] .iso-edge,.anatomy__stage[data-hl="ledge"] [data-asm="ledge"]>.iso-line,.anatomy__stage[data-hl="hob"] [data-asm="hob"] .iso-edge,.anatomy__stage[data-hl="hob"] [data-asm="hob"]>.iso-line,.anatomy__stage[data-hl="fridge"] [data-asm="fridge"] .iso-edge,.anatomy__stage[data-hl="fridge"] [data-asm="fridge"]>.iso-line{stroke:var(--accent);stroke-width:1.4px}
