/* The home wall's machines (wall-parts/parts.mjs): the Anatomy kit's tones on the tile's own ground. The paper is the
   tile's surface, so a part's fill hides what is behind it without showing as a patch; the greys are the kit's four
   steps, tinted toward the page's own neutrals (tokens.css), the tops lightest and the right faces darkest. The only
   colours are the logo's blues (an awake cube, a lamp that is on, something in flight), a drive lamp's green and a
   change on its way in amber; the night is kept for the machines' screens. Light by default, dark with the page. */
.wf {
  --anatomy-paper: var(--surface);
  --anatomy-face: #ffffff;
  --anatomy-top: #ffffff;
  --anatomy-shade-0: #d8dde4;
  --anatomy-shade-1: #e2e6ec;
  --anatomy-shade-2: #ebeef3;
  --anatomy-shade-3: #f3f5f8;
  --anatomy-lit-top: #ffffff;
  --anatomy-lit-shade: #eef1f5;
  --anatomy-hi: #22272e;
  --anatomy-mid: #868e9a;
  --anatomy-lo: #b2b9c3;
  --anatomy-faint: #d3d8df;
  --anatomy-lit: #000000;
  --anatomy-halo: #7d8796;
  --anatomy-halo-opacity: 0.3;
  --anatomy-dot: #3a3f47;
  --anatomy-weight: 0.6px;
  /* the logo's cube (brand/logo): ice top, glacier-light left, glacier right */
  --wf-cb-top: #e3ecff;
  --wf-cb-left: #6e9bff;
  --wf-cb-right: #2f6bff;
  --wf-cb-edge: #1f4fd0;
  --wf-cb-crease: #bfd1ff;
  --wf-frost: #f4f8ff;
  --wf-rime: #ffffff;
  --wf-rime-edge: #9db9ff;
  --wf-cb-edge-asleep: #9db0d6;
  --wf-glare: rgb(255 255 255 / 0.07);
  /* lamps: off, and on in the logo's blue, a drive lamp's green, the amber of a change on its way */
  --wf-lamp-off: #c9d0da;
  --wf-blue: #2f6bff;
  --wf-green: #30a46c;
  --wf-amber: #d99a23;
  /* the night, on a screen: its glass, its words, its prompt */
  --wf-screen: #0b1331;
  --wf-screen-edge: #1c2b62;
  --wf-screen-text: #c9d8ff;
  --wf-screen-ice: #9db9ff;
  --wf-screen-dim: #6d7fb0;
  /* a cable's black sheath (figure.md) and rubber */
  --wf-cable: #25282e;
  --wf-cable-shine: #575c66;
  --wf-cable-shade: #16181c;
  --wf-cable-edge: #121316;
  /* paper and card: a label, a photo, a ticket */
  --wf-paper: #ffffff;
  /* the dark inside of an opening: a jack, a bay, a slot */
  --wf-hole: #c6cdd7;
  --wf-print: #586172;
  --wf-wood: #e9e1d2;
  --wf-wood-grain: #cdbfa6;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  container: wf / size;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .wf {
    --anatomy-face: #181d25;
    --anatomy-top: #1d232c;
    --anatomy-shade-0: #0c0f13;
    --anatomy-shade-1: #0f1217;
    --anatomy-shade-2: #13171d;
    --anatomy-shade-3: #171b22;
    --anatomy-lit-top: #262d38;
    --anatomy-lit-shade: #1d232c;
    --anatomy-hi: #d5dbe5;
    --anatomy-mid: #6c7584;
    --anatomy-lo: #3d4552;
    --anatomy-faint: #282e38;
    --anatomy-lit: #ffffff;
    --anatomy-halo: #000000;
    --anatomy-halo-opacity: 0.85;
    --anatomy-dot: #d5dbe5;
    --wf-cb-edge: #9db9ff;
    --wf-cb-crease: #c9d8ff;
    --wf-frost: #aebfe0;
    --wf-rime: #ffffff;
    --wf-rime-edge: transparent;
    --wf-cb-edge-asleep: #8ea3c8;
    --wf-lamp-off: #2a313b;
    --wf-blue: #6e9bff;
    --wf-green: #6be0a0;
    --wf-amber: #e8b75a;
    --wf-screen: #070d24;
    --wf-screen-edge: #1c2b62;
    --wf-cable: #08090b;
    --wf-cable-shine: #2c3038;
    --wf-cable-shade: #030304;
    --wf-cable-edge: #3b4049;
    --wf-paper: #d9dfe8;
    --wf-hole: #07090c;
    --wf-print: #4a5363;
    --wf-wood: #5b5246;
    --wf-wood-grain: #463e34;
  }
}
:root[data-theme='dark'] .wf {
  --anatomy-face: #181d25;
  --anatomy-top: #1d232c;
  --anatomy-shade-0: #0c0f13;
  --anatomy-shade-1: #0f1217;
  --anatomy-shade-2: #13171d;
  --anatomy-shade-3: #171b22;
  --anatomy-lit-top: #262d38;
  --anatomy-lit-shade: #1d232c;
  --anatomy-hi: #d5dbe5;
  --anatomy-mid: #6c7584;
  --anatomy-lo: #3d4552;
  --anatomy-faint: #282e38;
  --anatomy-lit: #ffffff;
  --anatomy-halo: #000000;
  --anatomy-halo-opacity: 0.85;
  --anatomy-dot: #d5dbe5;
  --wf-cb-edge: #9db9ff;
  --wf-cb-crease: #c9d8ff;
  --wf-frost: #aebfe0;
  --wf-rime: #ffffff;
  --wf-rime-edge: transparent;
  --wf-cb-edge-asleep: #8ea3c8;
  --wf-lamp-off: #2a313b;
  --wf-blue: #6e9bff;
  --wf-green: #6be0a0;
  --wf-amber: #e8b75a;
  --wf-screen: #070d24;
  --wf-screen-edge: #1c2b62;
  --wf-cable: #08090b;
  --wf-cable-shine: #2c3038;
  --wf-cable-shade: #030304;
  --wf-cable-edge: #3b4049;
  --wf-paper: #d9dfe8;
  --wf-hole: #07090c;
  --wf-print: #4a5363;
  --wf-wood: #5b5246;
  --wf-wood-grain: #463e34;
}

/* the drawing fills its room, centred, at its own proportions (the build's word rules count on it) */
.wf > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wf .iso-svg :is(path, circle) {
  vector-effect: non-scaling-stroke;
}

/* ---- the kit's paint (ISO_CSS), for the wall's own tones ---- */
.wf .iso-svg .iso-fill { fill: var(--anatomy-paper); stroke: none; }
.wf .iso-svg .iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
.wf .iso-svg :is(.iso-shade, .iso-top) { stroke: none; }
.wf .iso-svg .iso-shade[data-shade='0'] { fill: var(--anatomy-shade-0); }
.wf .iso-svg .iso-shade[data-shade='1'] { fill: var(--anatomy-shade-1); }
.wf .iso-svg .iso-shade[data-shade='2'] { fill: var(--anatomy-shade-2); }
.wf .iso-svg .iso-shade[data-shade='3'] { fill: var(--anatomy-shade-3); }
.wf .iso-svg .iso-top { fill: var(--anatomy-top); }
.wf .iso-svg .iso-solid[data-lit] > .iso-top { fill: var(--anatomy-lit-top); }
.wf .iso-svg .iso-solid[data-lit] > .iso-shade { fill: var(--anatomy-lit-shade); }
.wf .iso-svg .iso-solid[data-seamless] > :is(.iso-shade, .iso-top) { stroke-width: 0.4; stroke-linejoin: round; }
.wf .iso-svg .iso-solid[data-seamless] > .iso-shade[data-shade='0'] { stroke: var(--anatomy-shade-0); }
.wf .iso-svg .iso-solid[data-seamless] > .iso-shade[data-shade='1'] { stroke: var(--anatomy-shade-1); }
.wf .iso-svg .iso-solid[data-seamless] > .iso-shade[data-shade='2'] { stroke: var(--anatomy-shade-2); }
.wf .iso-svg .iso-solid[data-seamless] > .iso-shade[data-shade='3'] { stroke: var(--anatomy-shade-3); }
.wf .iso-svg .iso-solid[data-seamless] > .iso-top { stroke: var(--anatomy-top); }
.wf .iso-svg .iso-solid[data-lit] > .iso-edge { stroke: var(--anatomy-lit); }
.wf .iso-svg .iso-halo { fill: var(--anatomy-halo); stroke: none; filter: blur(9px); opacity: var(--anatomy-halo-opacity); transform: translateY(3px); }
.wf .iso-svg .iso-halo.wf-halo-small { filter: blur(4px); opacity: calc(var(--anatomy-halo-opacity) * 0.8); transform: translateY(1.5px); }
.wf .iso-svg .iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); stroke-linecap: round; stroke-linejoin: round; }
.wf .iso-svg .iso-line[data-tone='hi'] { stroke: var(--anatomy-hi); }
.wf .iso-svg .iso-line[data-tone='mid'] { stroke: var(--anatomy-mid); }
.wf .iso-svg .iso-line[data-tone='lo'] { stroke: var(--anatomy-lo); }
.wf .iso-svg .iso-line[data-tone='faint'] { stroke: var(--anatomy-faint); }
.wf .iso-svg .iso-line[data-tone='lit'] { stroke: var(--anatomy-lit); }
.wf .iso-svg .iso-line[data-dashed] { stroke-dasharray: 3 3; }
.wf .iso-svg .iso-dots circle { fill: var(--anatomy-dot); stroke: none; opacity: 0.32; }
.wf .iso-svg .iso-dots[data-tone='hi'] circle { opacity: 0.85; }
.wf .iso-svg .iso-dots[data-tone='mid'] circle { opacity: 0.45; }
.wf .iso-svg .iso-dots[data-tone='lo'] circle { opacity: 0.22; }
.wf .iso-svg .iso-dots[data-tone='faint'] circle { opacity: 0.12; }
.wf .iso-svg .tb-body { fill: var(--anatomy-shade-2); stroke: none; }
.wf .iso-svg .tb-shine { fill: var(--anatomy-top); stroke: none; }
.wf .iso-svg .tb-shade { fill: var(--anatomy-shade-0); stroke: none; }

/* words on the machines: the mono type, in the drawing's darkest tone (the build leaves out what would come under
   12 px) */
.wf .iso-svg .wf-word {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  fill: var(--anatomy-hi);
  font-variant-numeric: tabular-nums;
}
.wf .iso-svg .wf-tone-mid { fill: var(--anatomy-mid); }
/* paper: a tag, a card, a ticket, and the print on it */
.wf .iso-svg .wf-tag { fill: var(--wf-paper); stroke: none; }
.wf .iso-svg .wf-hole { fill: var(--wf-hole); stroke: none; }
.wf .iso-svg .wf-print { fill: var(--wf-print); }

/* ---- the cube ---- */
.wf .iso-svg .wf-cb-fill { fill: var(--wf-cb-left); stroke: none; }
.wf .iso-svg .wf-cb-face {
  --wf-cb-mix: color-mix(in srgb, var(--wf-cb-left) var(--t), var(--wf-cb-right));
  fill: var(--wf-cb-mix);
  stroke: var(--wf-cb-mix);
  stroke-width: 0.4;
  stroke-linejoin: round;
}
.wf .iso-svg .wf-cb-top { fill: var(--wf-cb-top); stroke: var(--wf-cb-top); stroke-width: 0.4; stroke-linejoin: round; }
.wf .iso-svg .wf-cb-crease { fill: none; stroke: var(--wf-cb-crease); stroke-width: 0.5; stroke-linejoin: round; stroke-linecap: round; }
.wf .iso-svg .wf-cb-edge { fill: none; stroke: var(--wf-cb-edge); stroke-width: 0.7; stroke-linejoin: round; stroke-linecap: round; }
.wf .iso-svg .wf-cb-frost { opacity: 0; }
.wf .iso-svg .wf-cb-frost :is(path) { stroke: none; }
.wf .iso-svg .wf-cb-frost-side { fill: var(--wf-frost); fill-opacity: 0.84; }
.wf .iso-svg .wf-cb-frost-top { fill: var(--wf-frost); fill-opacity: 0.92; }
.wf .iso-svg .wf-cb-rime circle { fill: var(--wf-rime); stroke: var(--wf-rime-edge); stroke-width: 0.15; }
/* asleep: frosted over, its edge in frost */
.wf .iso-svg .wf-cb-asleep .wf-cb-frost { opacity: 1; }
.wf .iso-svg .wf-cb-asleep .wf-cb-edge { stroke: var(--wf-cb-edge-asleep); }

/* ---- lamps ---- */
.wf .iso-svg .wf-lamp :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-lamp-off); }
.wf .iso-svg .wf-lamp-blue.wf-on :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-blue); }
.wf .iso-svg .wf-lamp-green.wf-on :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-green); }
.wf .iso-svg .wf-lamp-amber.wf-on :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-amber); }

/* ---- cables: black sheaths ---- */
.wf .iso-svg .wf-cable .tb-body { fill: var(--wf-cable); }
.wf .iso-svg .wf-cable .tb-shine { fill: var(--wf-cable-shine); }
.wf .iso-svg .wf-cable .tb-shade { fill: var(--wf-cable-shade); }
.wf .iso-svg .wf-cable .iso-line { stroke: var(--wf-cable-edge); }

/* ---- screens: the night, behind glass ---- */
.wf .iso-svg .wf-screen { fill: var(--wf-screen); stroke: none; }
.wf .iso-svg .wf-glare { fill: var(--wf-glare); stroke: none; }
.wf .iso-svg .wf-lcd {
  font-family: var(--font-mono);
  font-weight: 400;
  fill: var(--wf-screen-text);
  font-variant-numeric: tabular-nums;
}
.wf .iso-svg .wf-lcd-ice { fill: var(--wf-screen-ice); }
.wf .iso-svg .wf-lcd-dim { fill: var(--wf-screen-dim); }
.wf .iso-svg .wf-caret { fill: var(--wf-screen-ice); }
/* a screen's line where its words would be too small to read: a rule in its colour (parts.mjs, screen) */
.wf .iso-svg .wf-lcd-rule { fill: none; stroke: var(--wf-screen-text); stroke-width: 2px; stroke-linecap: round; opacity: 0.75; }
.wf .iso-svg .wf-lcd-rule.wf-lcd-ice { stroke: var(--wf-screen-ice); }
.wf .iso-svg .wf-lcd-rule.wf-lcd-dim { stroke: var(--wf-screen-dim); }

/* motion waits while its panel is away (home.css) and stops under reduced motion: each drawing's rest is a pose that
   explains it */
@media (prefers-reduced-motion: reduce) {
  .wf *,
  .wf *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* The Cube panel's machines (build.mjs): their parts' colours and their motion. Each loop is calm and shows the
   tile's point; under reduced motion each stands in its rest pose (wall.css). */

/* ---- versions: the selector goes to v4 (a deploy), waits, and comes back to v3 (the rollback); the lamp of the version
   under it is lit. At rest it is under v3. ---- */
.wf-versions { --vs-loop: 5.2s; }
@media (prefers-reduced-motion: no-preference) {
  .wf-versions .vs-carriage { animation: vs-go var(--vs-loop) var(--ease, ease) infinite; }
  .wf-versions .vs-lamp-2 :is(.iso-top, .iso-shade, .iso-fill) { animation: vs-v3 var(--vs-loop) ease infinite; }
  .wf-versions .vs-lamp-3 :is(.iso-top, .iso-shade, .iso-fill) { animation: vs-v4 var(--vs-loop) ease infinite; }
}
@keyframes vs-go {
  0%, 10%, 80%, 100% { transform: none; }
  28%, 62% { transform: translate(var(--vs-x), var(--vs-y)); }
}
@keyframes vs-v3 {
  0%, 14%, 78%, 100% { fill: var(--wf-blue); }
  20%, 72% { fill: var(--wf-lamp-off); }
}
@keyframes vs-v4 {
  0%, 20%, 72%, 100% { fill: var(--wf-lamp-off); }
  27%, 64% { fill: var(--wf-blue); }
}

/* ---- domains: the padlock's keyway; every few seconds its shackle lifts, its lamp amber while it is open (the
   certificate on its way), and snaps shut, the lamp blue again: issued, renewed ---- */
.wf-domains .dm-keyway { fill: var(--anatomy-hi); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .wf-domains .dm-shackle { animation: dm-snap 3.4s var(--ease, ease) infinite; }
  .wf-domains .dm-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: dm-lamp 3.4s ease infinite; }
}
@keyframes dm-snap {
  0%, 24%, 74%, 100% { transform: none; }
  36%, 60% { transform: translateY(var(--dm-lift)); }
}
@keyframes dm-lamp {
  0%, 30%, 76%, 100% { fill: var(--wf-blue); }
  36%, 70% { fill: var(--wf-amber); }
}

/* ---- network: the jacks' dark. A request goes from web to api, api asks db, and the answers come back: the service
   that talks is lit pale a moment, its cord lights in the logo's blue and its port's lamp flickers. At rest every lamp is
   on ---- */
.wf-network .nw-jack { fill: var(--wf-hole); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .wf-network .nw-cord-0 .tb-body { animation: nw-web 3.4s ease infinite; }
  .wf-network .nw-cord-1 .tb-body { animation: nw-api 3.4s ease infinite; }
  .wf-network .nw-cord-2 .tb-body { animation: nw-db 3.4s ease infinite; }
  .wf-network .nw-cube-0 .wf-cb-frost { animation: nw-web-cube 3.4s ease infinite; }
  .wf-network .nw-cube-1 .wf-cb-frost { animation: nw-api-cube 3.4s ease infinite; }
  .wf-network .nw-cube-2 .wf-cb-frost { animation: nw-db-cube 3.4s ease infinite; }
  .wf-network .nw-lamp-0 :is(.iso-top, .iso-shade, .iso-fill) { animation: nw-web-lamp 3.4s steps(1, end) infinite; }
  .wf-network .nw-lamp-3 :is(.iso-top, .iso-shade, .iso-fill) { animation: nw-api-lamp 3.4s steps(1, end) infinite; }
  .wf-network .nw-lamp-6 :is(.iso-top, .iso-shade, .iso-fill) { animation: nw-db-lamp 3.4s steps(1, end) infinite; }
}
/* web asks (4 to 20%) and hears back (80 to 96%); api hears and asks on (22 to 40%), hears back and answers (60 to 78%);
   db answers (42 to 58%) */
@keyframes nw-web { 0%, 2%, 22%, 78%, 98%, 100% { fill: var(--wf-cable); } 6%, 18%, 82%, 94% { fill: var(--wf-blue); } }
@keyframes nw-api { 0%, 20%, 42%, 58%, 80%, 100% { fill: var(--wf-cable); } 24%, 38%, 62%, 76% { fill: var(--wf-blue); } }
@keyframes nw-db { 0%, 40%, 60%, 100% { fill: var(--wf-cable); } 44%, 56% { fill: var(--wf-blue); } }
/* (the service that talks lit pale a moment, as its cord lights) */
@keyframes nw-web-cube { 0%, 3%, 20%, 79%, 96%, 100% { opacity: 0; } 8%, 84% { opacity: 0.6; } }
@keyframes nw-api-cube { 0%, 21%, 40%, 59%, 78%, 100% { opacity: 0; } 26%, 64% { opacity: 0.6; } }
@keyframes nw-db-cube { 0%, 41%, 58%, 100% { opacity: 0; } 46% { opacity: 0.6; } }
@keyframes nw-web-lamp { 0%, 8%, 14%, 86%, 92% { fill: var(--wf-green); } 4%, 11%, 18%, 82%, 89% { fill: var(--wf-lamp-off); } 21%, 96% { fill: var(--wf-green); } }
@keyframes nw-api-lamp { 0%, 26%, 32%, 64%, 70% { fill: var(--wf-green); } 22%, 29%, 36%, 60%, 67%, 74% { fill: var(--wf-lamp-off); } 39%, 77% { fill: var(--wf-green); } }
@keyframes nw-db-lamp { 0%, 46%, 52% { fill: var(--wf-green); } 42%, 49%, 55% { fill: var(--wf-lamp-off); } 58% { fill: var(--wf-green); } }

/* ---- compose: the card's paper and its plates, the rubber belt; the card slides through the reader and the three
   services wake one after another, then rest. At rest the card is in, the three awake. ---- */
.wf-compose .cp-card :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-paper); }
.wf-compose .cp-plate { fill: var(--anatomy-face); stroke: none; }
.wf-compose .cp-belt :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-cable); }
.wf-compose .cp-belt .iso-line { stroke: var(--wf-cable-edge); }
.wf-compose .cp-cleats { fill: none; stroke: var(--wf-cable-shine); stroke-width: 0.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .wf-compose .cp-card { animation: cp-read 5.4s var(--ease, ease) infinite; }
  .wf-compose .cp-cube .wf-cb-frost { animation: cp-wake 5.4s ease infinite; }
  .wf-compose .cp-cube-1 .wf-cb-frost { animation-delay: 0.35s; }
  .wf-compose .cp-cube-2 .wf-cb-frost { animation-delay: 0.7s; }
}
@keyframes cp-read {
  0%, 4%, 66%, 100% { transform: none; }
  28%, 40% { transform: translate(var(--cp-x), var(--cp-y)); }
}
@keyframes cp-wake {
  0%, 36%, 90%, 100% { opacity: 1; }
  44%, 84% { opacity: 0; }
}

/* ---- keyed: the drawers come out one after another, top to bottom; a drawer out is its key's instance awake (its
   cube clear, its lamp blue), pushed home it sleeps. At rest user-c's (the lowest) is out. ---- */
.wf-keyed { --kd-loop: 9.6s; }
.wf-keyed .kd-out { transform: translate(var(--kd-x), var(--kd-y)); }
.wf-keyed .kd-card :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-paper); }
@media (prefers-reduced-motion: no-preference) {
  .wf-keyed .kd-d0 { --kd-delay: -0.96s; }
  .wf-keyed .kd-d2 { --kd-delay: 2.2s; }
  .wf-keyed .kd-d1 { --kd-delay: 5.4s; }
  .wf-keyed .kd-drawer { animation: kd-slide var(--kd-loop) var(--ease, ease) var(--kd-delay) infinite; }
  .wf-keyed .kd-drawer .wf-cb-frost { animation: kd-frost var(--kd-loop) ease var(--kd-delay) infinite; }
  .wf-keyed .kd-drawer .kd-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: kd-lamp var(--kd-loop) ease var(--kd-delay) infinite; }
}
@keyframes kd-slide {
  0%, 30%, 100% { transform: none; }
  6%, 24% { transform: translate(var(--kd-x), var(--kd-y)); }
}
@keyframes kd-frost {
  0%, 5%, 31%, 100% { opacity: 1; }
  8%, 26% { opacity: 0; }
}
@keyframes kd-lamp {
  0%, 5%, 27%, 100% { fill: var(--wf-lamp-off); }
  6%, 26% { fill: var(--wf-blue); }
}

/* ---- variables: the references are typed out on the screen (variables.mjs, typed); once they are written, the lamp
   lights: a version is made, each reference filled in. At rest both are written and the lamp lit ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-variables .vr-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: vr-made 6s steps(1, end) infinite; }
}
@keyframes vr-made {
  0%, 84%, 88% { fill: var(--wf-lamp-off); }
  82%, 86%, 90% { fill: var(--wf-blue); }
  94%, 100% { fill: var(--wf-lamp-off); }
}

/* ---- drives: the drive's paper label and the scale's plate. An instance (the cube) comes down into the seat and goes
   up out of it again, the seat's lamp blue and the drive's lamp flickering green with its reads and writes while it is
   there; the drive stays on the scale and the readout holds. At rest the seat is empty, the drive kept. ---- */
.wf-drives { --dv-loop: 6s; }
.wf-drives .dv-label { fill: var(--wf-paper); stroke: none; }
.wf-drives .dv-plate { fill: var(--anatomy-shade-2); stroke: none; }
.wf-drives .dv-neck :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-hole); }
.wf-drives .dv-cube { opacity: 0; transform: translate(var(--dv-x), var(--dv-y)); }
@media (prefers-reduced-motion: no-preference) {
  .wf-drives .dv-cube { animation: dv-come var(--dv-loop) var(--ease, ease) infinite; }
  .wf-drives .dv-seatlamp :is(.iso-top, .iso-shade, .iso-fill) { animation: dv-seat var(--dv-loop) ease infinite; }
  .wf-drives .dv-io :is(.iso-top, .iso-shade, .iso-fill) { animation: dv-io var(--dv-loop) steps(1, end) infinite; }
}
@keyframes dv-come {
  0%, 4% { opacity: 0; transform: translate(var(--dv-x), var(--dv-y)); }
  18%, 70% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translate(var(--dv-x), var(--dv-y)); }
}
@keyframes dv-seat {
  0%, 16%, 72%, 100% { fill: var(--wf-lamp-off); }
  19%, 69% { fill: var(--wf-blue); }
}
@keyframes dv-io {
  0%, 100% { fill: var(--wf-green); }
  22%, 28%, 36%, 46%, 54%, 64% { fill: var(--wf-lamp-off); }
  24%, 31%, 40%, 49%, 58%, 66% { fill: var(--wf-green); }
}


.wf-versions{--vs-x:96.84px;--vs-y:17.28px}
.wf-domains>.wf-long{--dm-lift:-11.90px}
.wf-domains>.wf-compact{--dm-lift:-7.85px}
.wf-keyed{--kd-x:-27.44px;--kd-y:14.68px}

.wf-compose{--cp-x:4.72px;--cp-y:0.84px}
.wf-variables .vr-type{fill:var(--wf-screen);stroke:none;transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0.001)}@media (prefers-reduced-motion:no-preference){.wf-variables .vr-type-0{animation:vr-type-0 6s linear infinite}@keyframes vr-type-0{0%,6.00%{transform:none;animation-timing-function:steps(29,end)}40.00%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}.wf-variables .vr-type-1{animation:vr-type-1 6s linear infinite}@keyframes vr-type-1{0%,46.00%{transform:none;animation-timing-function:steps(32,end)}80.00%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}}@media (prefers-reduced-motion:no-preference){.wf-variables .vr-type-caret{animation:vr-type-caret 6s steps(1,end) infinite}@keyframes vr-type-caret{0%,80.00%{opacity:0}80.10%,94.00%{opacity:1}94.10%,100%{opacity:0}}}
.wf-variables .vr-type{fill:var(--wf-screen);stroke:none;transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0.001)}@media (prefers-reduced-motion:no-preference){.wf-variables .vr-type-0{animation:vr-type-0 6s linear infinite}@keyframes vr-type-0{0%,8.00%{transform:none;animation-timing-function:steps(18,end)}70.00%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}}@media (prefers-reduced-motion:no-preference){.wf-variables .vr-type-caret{animation:vr-type-caret 6s steps(1,end) infinite}@keyframes vr-type-caret{0%,70.00%{opacity:0}70.10%,94.00%{opacity:1}94.10%,100%{opacity:0}}}
.wf-drives{--dv-x:0.00px;--dv-y:-18.32px}
@container wf (max-width:376.8px) or (max-height:179.0px){.wf-versions>.wf-main .wfw628{display:none}}
@container wf (min-width:376.8px) and (min-height:179.0px){.wf-versions>.wf-main .wfs628{display:none}}
@container wf (max-aspect-ratio:2399/1000){.wf-domains>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-domains>.wf-compact{display:none}}
@container wf (max-width:221.4px) or (max-height:93.4px){.wf-domains>.wf-long .wfw369{display:none}}
@container wf (min-width:221.4px) and (min-height:93.4px){.wf-domains>.wf-long .wfs369{display:none}}
@container wf (max-width:315.6px) or (max-height:133.1px){.wf-domains>.wf-long .wfw526{display:none}}
@container wf (min-width:315.6px) and (min-height:133.1px){.wf-domains>.wf-long .wfs526{display:none}}
@container wf (max-width:197.1px) or (max-height:132.1px){.wf-domains>.wf-compact .wfw657{display:none}}
@container wf (min-width:197.1px) and (min-height:132.1px){.wf-domains>.wf-compact .wfs657{display:none}}
@container wf (max-width:205.8px) or (max-height:131.0px){.wf-keyed>.wf-main .wfw686{display:none}}
@container wf (min-width:205.8px) and (min-height:131.0px){.wf-keyed>.wf-main .wfs686{display:none}}
@container wf (max-width:218.1px) or (max-height:142.5px){.wf-network>.wf-main .wfw727{display:none}}
@container wf (min-width:218.1px) and (min-height:142.5px){.wf-network>.wf-main .wfs727{display:none}}
@container wf (max-width:336.6px) or (max-height:136.9px){.wf-compose>.wf-main .wfw561{display:none}}
@container wf (min-width:336.6px) and (min-height:136.9px){.wf-compose>.wf-main .wfs561{display:none}}
@container wf (max-width:389.4px) or (max-height:158.4px){.wf-compose>.wf-main .wfw649{display:none}}
@container wf (min-width:389.4px) and (min-height:158.4px){.wf-compose>.wf-main .wfs649{display:none}}
@container wf (max-aspect-ratio:2399/1000){.wf-variables>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-variables>.wf-compact{display:none}}
@container wf (max-width:304.8px) or (max-height:136.7px){.wf-variables>.wf-long .wfw508{display:none}}
@container wf (min-width:304.8px) and (min-height:136.7px){.wf-variables>.wf-long .wfs508{display:none}}
@container wf (max-width:174.6px) or (max-height:91.4px){.wf-variables>.wf-compact .wfw582{display:none}}
@container wf (min-width:174.6px) and (min-height:91.4px){.wf-variables>.wf-compact .wfs582{display:none}}
@container wf (max-width:366.6px) or (max-height:160.7px){.wf-drives>.wf-main .wfw611{display:none}}
@container wf (min-width:366.6px) and (min-height:160.7px){.wf-drives>.wf-main .wfs611{display:none}}
@container wf (max-width:385.8px) or (max-height:169.1px){.wf-drives>.wf-main .wfw643{display:none}}
@container wf (min-width:385.8px) and (min-height:169.1px){.wf-drives>.wf-main .wfs643{display:none}}
@container wf (max-width:407.4px) or (max-height:178.6px){.wf-drives>.wf-main .wfw679{display:none}}
@container wf (min-width:407.4px) and (min-height:178.6px){.wf-drives>.wf-main .wfs679{display:none}}
/* The Sandbox panel's machines (build.mjs): their parts' colours and their motion. Each loop is calm and shows the
   tile's point; under reduced motion each stands in its rest pose (wall.css). */

/* ---- snapshot: the picture, the cube in the night (the logo's faces), on the card's paper; the lens's glass. Every few
   seconds the camera's flash fires: the sandbox is lit by it a moment, the ready lamp goes off and back, and the picture
   comes up on the card, as an instant picture does, and stays; before the next, the card is blank again. The sandbox
   goes on running throughout. At rest the flash is dark and the picture taken ---- */
.wf-snapshot { --sn-loop: 4.2s; }
.wf-snapshot .iso-svg .sn-card :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-paper); }
.wf-snapshot .iso-svg .sn-pic { fill: var(--wf-screen); stroke: none; }
.wf-snapshot .iso-svg .sn-pic-top { fill: var(--wf-cb-top); }
.wf-snapshot .iso-svg .sn-pic-left { fill: var(--wf-cb-left); }
.wf-snapshot .iso-svg .sn-pic-right { fill: var(--wf-cb-right); }
.wf-snapshot .iso-svg .sn-glass :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-screen); }
.wf-snapshot .iso-svg .sn-glow { fill: var(--wf-rime); stroke: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wf-snapshot .sn-glow { animation: sn-flash var(--sn-loop) ease-out infinite; }
  .wf-snapshot .sn-cube .wf-cb-frost { animation: sn-lit var(--sn-loop) ease-out infinite; }
  .wf-snapshot .sn-ready :is(.iso-top, .iso-shade, .iso-fill) { animation: sn-ready var(--sn-loop) ease infinite; }
  .wf-snapshot .sn-photo { animation: sn-develop var(--sn-loop) ease infinite; }
}
@keyframes sn-flash {
  0%, 16%, 30%, 100% { opacity: 0; }
  19% { opacity: 1; }
}
@keyframes sn-lit {
  0%, 16%, 34%, 100% { opacity: 0; }
  19% { opacity: 0.75; }
}
@keyframes sn-develop {
  0%, 22% { opacity: 0; }
  62%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
/* ---- links: the ticket's paper and the link printed on it (ink on paper in either theme: the port in the logo's deep
   blue, the rest the print's grey), the seal in the same blue; the printer's window onto its roll. The ticket's run is
   the build's (links.mjs); its feed lamp blinks while it prints ---- */
.wf-links .iso-svg .lk-paper :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-paper); }
.wf-links .iso-svg .lk-window { fill: var(--wf-paper); stroke: none; }
.wf-links .iso-svg .lk-url { fill: var(--wf-print); }
.wf-links .iso-svg .lk-url .lk-dim { fill: color-mix(in srgb, var(--wf-print) 70%, var(--wf-paper)); }
.wf-links .iso-svg .lk-url .lk-port { fill: var(--wf-cb-right); font-weight: 700; }
.wf-links .iso-svg .lk-seal { fill: none; stroke: var(--wf-cb-right); stroke-width: 0.9px; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .wf-links .lk-feed :is(.iso-top, .iso-shade, .iso-fill) { animation: lk-feed 6s steps(1, end) infinite; }
}
@keyframes lk-feed {
  0%, 6%, 16%, 26%, 36%, 46% { fill: var(--wf-blue); }
  3%, 11%, 21%, 31%, 41%, 51% { fill: var(--wf-lamp-off); }
  56%, 100% { fill: var(--wf-blue); }
}

/* ---- templates: the pool's lamps flicker with their work, each in its own time; the template stays frosted. Every few
   seconds a copy is taken: it comes down onto its pad in front, already running, its lamp lit; then it goes on its way
   and the next comes ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-templates .tp-run :is(.iso-top, .iso-shade, .iso-fill) { animation: tp-run 2.3s steps(1, end) infinite; }
  .wf-templates .tp-run-1 :is(.iso-top, .iso-shade, .iso-fill) { animation-duration: 1.9s; animation-delay: -0.8s; }
  .wf-templates .tp-run-2 :is(.iso-top, .iso-shade, .iso-fill) { animation-duration: 2.7s; animation-delay: -1.4s; }
  .wf-templates .tp-copy { animation: tp-take 3.6s var(--ease, ease) infinite; }
  .wf-templates .tp-taken :is(.iso-top, .iso-shade, .iso-fill) { animation: tp-lit 3.6s ease infinite; }
}
@keyframes tp-run {
  0%, 30%, 50%, 100% { fill: var(--wf-blue); }
  34%, 46% { fill: var(--wf-lamp-off); }
}
@keyframes tp-take {
  0% { transform: translate(var(--tp-x), var(--tp-y)); opacity: 0; }
  10% { transform: translate(var(--tp-x), var(--tp-y)); opacity: 0; }
  30% { transform: none; opacity: 1; }
  80% { transform: none; opacity: 1; }
  92%, 100% { transform: none; opacity: 0; }
}
@keyframes tp-lit {
  0%, 28%, 92%, 100% { fill: var(--wf-lamp-off); }
  32%, 88% { fill: var(--wf-blue); }
}

/* ---- agents: the sheet and the roll's paper; the session typed in the print's ink, the prompts lighter; the lamp
   blinks as it types ---- */
.wf-agents .iso-svg .ag-paper :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-paper); }
.wf-agents .iso-svg .ag-line { fill: var(--wf-print); }
.wf-agents .iso-svg .ag-line .ag-prompt { fill: color-mix(in srgb, var(--wf-print) 62%, var(--wf-paper)); }
.wf-agents .iso-svg .ag-out { fill: var(--wf-cb-right); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .wf-agents .ag-typing :is(.iso-top, .iso-shade, .iso-fill) { animation: ag-typing 1.3s steps(1, end) infinite; }
}
@keyframes ag-typing {
  0%, 40%, 60%, 100% { fill: var(--wf-blue); }
  45%, 55% { fill: var(--wf-lamp-off); }
}

/* ---- secrets: each request runs along the pipe, a band of light round it, into the injector; its lamp lights as the
   request passes, and the request goes on out the other side to the host. At rest the bands are dark at the ends of
   their runs and the lamp lit ---- */
.wf-secrets .iso-svg .sc-band :is(.iso-top, .iso-fill, .iso-shade) { fill: var(--wf-blue); }
.wf-secrets .sc-band { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wf-secrets .sc-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: sc-pass 2.6s ease infinite; }
  .wf-secrets .sc-band-in { animation: sc-in 2.6s linear infinite; }
  .wf-secrets .sc-band-out { animation: sc-out 2.6s linear infinite; }
}
@keyframes sc-pass {
  0%, 34%, 66%, 100% { fill: var(--wf-lamp-off); }
  40%, 58% { fill: var(--wf-blue); }
}
@keyframes sc-in {
  0% { transform: none; opacity: 0; }
  6% { opacity: 1; }
  34% { opacity: 1; }
  38%, 100% { transform: translate(var(--sc-in-x), var(--sc-in-y)); opacity: 0; }
}
@keyframes sc-out {
  0%, 56% { transform: none; opacity: 0; }
  62% { opacity: 1; }
  92% { opacity: 1; }
  98%, 100% { transform: translate(var(--sc-out-x), var(--sc-out-y)); opacity: 0; }
}

/* ---- ssh: the caret blinks at the sandbox's prompt ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-ssh .wf-caret { animation: ss-blink 1.1s step-end infinite; }
}
@keyframes ss-blink {
  50% { opacity: 0; }
}

@keyframes sn-ready {
  0%, 20%, 56%, 100% { fill: var(--wf-blue); }
  24%, 52% { fill: var(--wf-lamp-off); }
}


@media (prefers-reduced-motion:no-preference){.wf-links .lk-out{animation:lk-out 6s cubic-bezier(.3,.6,.3,1) infinite}}@keyframes lk-out{0%{transform:translateX(-295.3px);opacity:1}58%,84%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
.wf-ssh .ss-type{fill:var(--wf-screen);stroke:none;transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0.001)}@media (prefers-reduced-motion:no-preference){.wf-ssh .ss-type-0{animation:ss-type-0 5.2s linear infinite}@keyframes ss-type-0{0%,8.00%{transform:none;animation-timing-function:steps(21,end)}42.00%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}.wf-ssh .ss-type-1{animation:ss-type-1 5.2s linear infinite}@keyframes ss-type-1{0%,50.00%{transform:none;animation-timing-function:steps(1,end)}50.10%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}}@media (prefers-reduced-motion:no-preference){.wf-ssh .ss-type-caret{animation:ss-type-caret 5.2s steps(1,end) infinite}@keyframes ss-type-caret{0%,50.00%{opacity:0}50.10%,94.00%{opacity:1}94.10%,100%{opacity:0}}}
.wf-templates{--tp-x:0.00px;--tp-y:-26.34px}
.wf-agents .ag-type{fill:var(--wf-paper);stroke:none;transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0.001)}@media (prefers-reduced-motion:no-preference){.wf-agents .ag-type-0{animation:ag-type-0 6.4s linear infinite}@keyframes ag-type-0{0%,6.00%{transform:none;animation-timing-function:steps(23,end)}36.00%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}.wf-agents .ag-type-1{animation:ag-type-1 6.4s linear infinite}@keyframes ag-type-1{0%,44.00%{transform:none;animation-timing-function:steps(1,end)}44.10%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}.wf-agents .ag-type-2{animation:ag-type-2 6.4s linear infinite}@keyframes ag-type-2{0%,52.00%{transform:none;animation-timing-function:steps(23,end)}84.00%,94.00%{transform:scaleX(0.001);animation-timing-function:steps(1,end)}94.10%,100%{transform:none}}}
.wf-secrets>.wf-long{--sc-in-x:134.63px;--sc-in-y:24.02px;--sc-out-x:146.26px;--sc-out-y:26.09px}
.wf-secrets>.wf-compact{--sc-in-x:93.78px;--sc-in-y:16.73px;--sc-out-x:93.78px;--sc-out-y:16.73px}
@container wf (max-width:367.8px) or (max-height:149.0px){.wf-snapshot>.wf-main .wfw613{display:none}}
@container wf (min-width:367.8px) and (min-height:149.0px){.wf-snapshot>.wf-main .wfs613{display:none}}
@container wf (max-width:430.2px) or (max-height:174.2px){.wf-snapshot>.wf-main .wfw717{display:none}}
@container wf (min-width:430.2px) and (min-height:174.2px){.wf-snapshot>.wf-main .wfs717{display:none}}
@container wf (max-width:414.0px) or (max-height:115.9px){.wf-links>.wf-main .wfw690{display:none}}
@container wf (min-width:414.0px) and (min-height:115.9px){.wf-links>.wf-main .wfs690{display:none}}
@container wf (max-width:213.3px) or (max-height:137.9px){.wf-ssh>.wf-main .wfw711{display:none}}
@container wf (min-width:213.3px) and (min-height:137.9px){.wf-ssh>.wf-main .wfs711{display:none}}
@container wf (max-width:168.0px) or (max-height:125.4px){.wf-templates>.wf-main .wfw560{display:none}}
@container wf (min-width:168.0px) and (min-height:125.4px){.wf-templates>.wf-main .wfs560{display:none}}
@container wf (max-width:214.8px) or (max-height:93.1px){.wf-agents>.wf-main .wfw358{display:none}}
@container wf (min-width:214.8px) and (min-height:93.1px){.wf-agents>.wf-main .wfs358{display:none}}
@container wf (max-aspect-ratio:2399/1000){.wf-secrets>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-secrets>.wf-compact{display:none}}
@container wf (max-width:360.6px) or (max-height:116.6px){.wf-secrets>.wf-long .wfw601{display:none}}
@container wf (min-width:360.6px) and (min-height:116.6px){.wf-secrets>.wf-long .wfs601{display:none}}
@container wf (max-width:233.7px) or (max-height:93.5px){.wf-secrets>.wf-compact .wfw779{display:none}}
@container wf (min-width:233.7px) and (min-height:93.5px){.wf-secrets>.wf-compact .wfs779{display:none}}
/* The Storage panel's machines (build.mjs): their parts' colours and their motion. Each loop is calm and shows the
   tile's point; under reduced motion each stands in its rest pose (wall.css). */

/* ---- drives: the drive's paper label and the scale's plate. An instance (the cube) comes down into the seat and goes
   up out of it again, the seat's lamp blue and the drive's lamp flickering green with its reads and writes while it is
   there; the drive stays on the scale and the readout holds. At rest the seat is empty, the drive kept. ---- */
.wf-drives { --dv-loop: 6s; }
.wf-drives .dv-label { fill: var(--wf-paper); stroke: none; }
.wf-drives .dv-plate { fill: var(--anatomy-shade-2); stroke: none; }
.wf-drives .dv-neck :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-hole); }
.wf-drives .dv-cube { opacity: 0; transform: translate(var(--dv-x), var(--dv-y)); }
@media (prefers-reduced-motion: no-preference) {
  .wf-drives .dv-cube { animation: dv-come var(--dv-loop) var(--ease, ease) infinite; }
  .wf-drives .dv-seatlamp :is(.iso-top, .iso-shade, .iso-fill) { animation: dv-seat var(--dv-loop) ease infinite; }
  .wf-drives .dv-io :is(.iso-top, .iso-shade, .iso-fill) { animation: dv-io var(--dv-loop) steps(1, end) infinite; }
}
@keyframes dv-come {
  0%, 4% { opacity: 0; transform: translate(var(--dv-x), var(--dv-y)); }
  18%, 70% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translate(var(--dv-x), var(--dv-y)); }
}
@keyframes dv-seat {
  0%, 16%, 72%, 100% { fill: var(--wf-lamp-off); }
  19%, 69% { fill: var(--wf-blue); }
}
@keyframes dv-io {
  0%, 100% { fill: var(--wf-green); }
  22%, 28%, 36%, 46%, 54%, 64% { fill: var(--wf-lamp-off); }
  24%, 31%, 40%, 49%, 58%, 66% { fill: var(--wf-green); }
}

/* ---- wood (the crates, the pallet, a tape's spool): its faces the kit's four shades taken toward the wood's colour,
   its top the wood itself ---- */
.wf .iso-svg .wf-wood :is(.iso-top, .iso-fill) { fill: var(--wf-wood); }
.wf .iso-svg .wf-wood .iso-shade[data-shade='0'] { fill: color-mix(in srgb, var(--wf-wood) 52%, var(--anatomy-shade-0)); }
.wf .iso-svg .wf-wood .iso-shade[data-shade='1'] { fill: color-mix(in srgb, var(--wf-wood) 62%, var(--anatomy-shade-1)); }
.wf .iso-svg .wf-wood .iso-shade[data-shade='2'] { fill: color-mix(in srgb, var(--wf-wood) 74%, var(--anatomy-shade-2)); }
.wf .iso-svg .wf-wood .iso-shade[data-shade='3'] { fill: color-mix(in srgb, var(--wf-wood) 86%, var(--anatomy-shade-3)); }
.wf .iso-svg .wf-wood-dark :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: color-mix(in srgb, var(--wf-wood) 64%, var(--wf-wood-grain)); }
.wf .iso-svg .wf-rubber :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-cable); }

/* ---- databases: the engines' names stencilled on the crates, in the drawing's darkest tone, a little worn. The jack's
   handle is pumped and the load rises on its forks, waits and is let down (databases.mjs writes the strokes) ---- */
.wf-databases .iso-svg .db-stencil { fill: var(--anatomy-hi); font-weight: 700; opacity: 0.8; }

/* ---- shared: the three sandboxes' lamps flicker green with their reads and writes, each in its own time; the platter
   turns and the arms seek (shared.mjs writes the turns) ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-shared .sh-io :is(.iso-top, .iso-shade, .iso-fill) { animation: sh-io 2.1s steps(1, end) infinite; }
  .wf-shared .sh-io-2 :is(.iso-top, .iso-shade, .iso-fill) { animation-duration: 1.7s; animation-delay: -0.6s; }
}
@keyframes sh-io {
  0%, 34%, 52%, 100% { fill: var(--wf-green); }
  38%, 48% { fill: var(--wf-lamp-off); }
}

/* ---- objects: the bins' cards and the photos' paper, each photo's picture in the drawing's greys (its sky, its hill,
   its sun), the lock's keyhole. The public bin's photos come up out of it one after another and go back: read, with no
   key; the private bin stays shut ---- */
.wf-objects .iso-svg :is(.ob-card, .ob-photo) :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-paper); }
.wf-objects .iso-svg .ob-pic { fill: var(--anatomy-shade-2); stroke: var(--anatomy-lo); stroke-width: 0.5px; }
.wf-objects .iso-svg .ob-hill { fill: var(--anatomy-lo); stroke: none; }
.wf-objects .iso-svg .ob-sun { fill: var(--anatomy-face); stroke: var(--anatomy-lo); stroke-width: 0.5px; }
.wf-objects .iso-svg .ob-keyhole { fill: var(--anatomy-hi); stroke: none; }

/* ---- backups: the tapes' paper labels and the panel's plate. The picker runs along its rail from the oldest tape to
   the newest, its lamp blue, waits there while the newest is written (its lamp blinking amber) and comes back; the six
   kept stay green. At rest the picker is over the oldest and the newest's lamp lit ---- */
.wf-backups .iso-svg .bk-label { fill: var(--wf-paper); stroke: none; }
.wf-backups .iso-svg .bk-plate { fill: var(--anatomy-shade-2); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .wf-backups .bk-now :is(.iso-top, .iso-shade, .iso-fill) { animation: bk-write 5s steps(1, end) infinite; }
  .wf-backups .bk-pick { animation: bk-run 5s var(--ease, ease) infinite; }
}
@keyframes bk-run {
  0%, 6%, 94%, 100% { transform: none; }
  34%, 70% { transform: translate(var(--bk-x), var(--bk-y)); }
}
@keyframes bk-write {
  0%, 36%, 44%, 52%, 60%, 68%, 100% { fill: var(--wf-amber); }
  40%, 48%, 56%, 64% { fill: var(--wf-lamp-off); }
}

/* ---- s3keys: the keys' blades, flat steel with their groove, and the cutter's wheel; nothing moves but the cutter's
   lamp, which is on ---- */
.wf-s3keys .iso-svg .sk-key { fill: var(--anatomy-shade-2); stroke: var(--anatomy-hi); stroke-width: 0.6px; stroke-linejoin: round; }
.wf-s3keys .iso-svg .sk-groove { fill: none; stroke: var(--anatomy-mid); stroke-width: 0.6px; stroke-linecap: round; }
.wf-s3keys .iso-svg .sk-wheel :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--anatomy-lo); }

/* ---- objects: the photos read in turn ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-objects .ob-read-0 { animation: ob-read 4.2s var(--ease, ease) infinite; }
  .wf-objects .ob-read-1 { animation: ob-read 4.2s var(--ease, ease) -2.8s infinite; }
  .wf-objects .ob-read-2 { animation: ob-read 4.2s var(--ease, ease) -1.4s infinite; }
}
@keyframes ob-read {
  0%, 4%, 34%, 100% { transform: none; }
  14%, 24% { transform: translate(var(--ob-x), var(--ob-y)); }
}

/* Drive's own machines for its page's grid (build.mjs): their parts' colours and their motion. Each loop is calm and
   shows the tile's point; under reduced motion each stands in its rest pose (wall.css). A drive's lamp is green. */

/* ---- a drive (parts-drive.mjs): its paper label; its lamp flickering with its reads and writes ---- */
.wf .iso-svg .fd-label { fill: var(--wf-paper); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .wf .fd-io :is(.iso-top, .iso-shade, .iso-fill) { animation: fd-io 1.3s steps(1, end) infinite; }
}
@keyframes fd-io {
  0%, 18%, 30%, 52%, 70%, 86% { fill: var(--wf-green); }
  12%, 24%, 46%, 62%, 80%, 94% { fill: var(--wf-lamp-off); }
}

/* ---- blocks: the drive's lamp at its reads' and writes' pace and the cord to the instance carrying them, fast ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-blocks .bk-cord .tb-body { animation: bk-cord 0.9s ease infinite; }
}
@keyframes bk-cord {
  0%, 100% { fill: var(--wf-cable); }
  40%, 60% { fill: var(--wf-blue); }
}

/* ---- copied: a beat: the batches move on a crate's place along the belt, the first coming onto it and the last going
   into the store; the sender's lamp flashes as each leaves. At rest three are on their way ---- */
.wf-copied .iso-svg .cp-belt :is(.iso-top, .iso-shade, .iso-fill) { fill: var(--wf-cable); }
.wf-copied .iso-svg .cp-belt .iso-line { stroke: var(--wf-cable-edge); }
.wf-copied .iso-svg .cp-cleats { fill: none; stroke: var(--wf-cable-shine); stroke-width: 0.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .wf-copied .cd-batch { animation: cd-beat 1.5s linear infinite; }
  .wf-copied .cd-batch-0 { animation-name: cd-beat, cd-in; }
  .wf-copied .cd-batch-2 { animation-name: cd-beat, cd-out; }
  .wf-copied .cd-send :is(.iso-top, .iso-shade, .iso-fill) { animation: cd-send 1.5s steps(1, end) infinite; }
}
@keyframes cd-beat {
  from { transform: none; }
  to { transform: translate(var(--cd-x), var(--cd-y)); }
}
@keyframes cd-in {
  0% { opacity: 0; }
  30%, 100% { opacity: 1; }
}
@keyframes cd-out {
  0%, 50% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes cd-send {
  0%, 16%, 100% { fill: var(--wf-lamp-off); }
  2% { fill: var(--wf-blue); }
}

/* ---- move: the drive lifts out of A's cradle, travels across and settles into B's; B's lamp lights and the drive's
   flickers with the blocks it reads; then back to A, and over again. At rest it is in B's, read ---- */
.wf-move { --mv-loop: 8s; }
@media (prefers-reduced-motion: no-preference) {
  .wf-move .mv-drive { animation: mv-go var(--mv-loop) var(--ease, ease) infinite; }
  .wf-move .mv-b :is(.iso-top, .iso-shade, .iso-fill) { animation: mv-b var(--mv-loop) steps(1, end) infinite; }
  .wf-move .mv-a :is(.iso-top, .iso-shade, .iso-fill) { animation: mv-a var(--mv-loop) steps(1, end) infinite; }
}
@keyframes mv-go {
  0%, 8% { transform: translate(var(--mv-sx), var(--mv-sy)); }
  13% { transform: translate(calc(var(--mv-sx) + var(--mv-lx)), calc(var(--mv-sy) + var(--mv-ly))); }
  27% { transform: translate(var(--mv-lx), var(--mv-ly)); }
  32%, 100% { transform: none; }
}
@keyframes mv-b {
  0%, 32% { fill: var(--wf-lamp-off); }
  33%, 100% { fill: var(--wf-blue); }
}
@keyframes mv-a {
  0%, 9% { fill: var(--wf-blue); }
  10%, 100% { fill: var(--wf-lamp-off); }
}

/* ---- snapshots: the fork comes down onto the dock, its lamp lighting, stays, and goes again. At rest both are there ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-snapshots .sn-fork { animation: sn-fork 6.4s var(--ease, ease) infinite; }
  .wf-snapshots .sn-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: sn-lamp 6.4s steps(1, end) infinite; }
}
@keyframes sn-fork {
  0%, 12%, 84%, 100% { transform: none; opacity: 1; }
  92% { transform: translate(var(--sn-x), var(--sn-y)); opacity: 0; }
  93%, 99% { transform: translate(var(--sn-x), var(--sn-y)); opacity: 0; }
}
@keyframes sn-lamp {
  0%, 16%, 84%, 100% { fill: var(--wf-green); }
  4% { fill: var(--wf-lamp-off); }
}

.wf-drives{--dv-x:0.00px;--dv-y:-18.32px}
.wf-snapshots{--sn-x:0.00px;--sn-y:-27.11px}
.wf-backups{--bk-x:297.99px;--bk-y:53.16px}
.wf-shared .iso-svg .sh-glint{fill:var(--wf-rime);opacity:0.22;stroke:none}@media (prefers-reduced-motion:no-preference){.wf-shared .sh-glint{animation:sh-turn 1.8s linear infinite}.wf-shared .sh-seek-0{animation:sh-seek-0 3.1s ease-in-out -0.3s infinite}.wf-shared .sh-seek-1{animation:sh-seek-1 2.6s ease-in-out -1.2s infinite}.wf-shared .sh-seek-2{animation:sh-seek-2 3.4s ease-in-out -2s infinite}}@keyframes sh-turn{0.00%{transform:matrix(1,0,0,1,0,0)}8.33%{transform:matrix(0.866,0.1545,-1.618,0.866,129.2055,-12.0565)}16.67%{transform:matrix(0.5,0.2676,-2.8025,0.5,260.6086,-2.5344)}25.00%{transform:matrix(0,0.309,-3.2361,0,358.9999,26.0149)}33.33%{transform:matrix(-0.5,0.2676,-2.8025,-0.5,398.0156,65.9416)}41.67%{transform:matrix(-0.866,0.1545,-1.618,-0.866,367.2014,106.5473)}50.00%{transform:matrix(-1,0,0,-1,274.814,136.9519)}58.33%{transform:matrix(-0.866,-0.1545,1.618,-0.866,145.6085,149.0084)}66.67%{transform:matrix(-0.5,-0.2676,2.8025,-0.5,14.2054,139.4863)}75.00%{transform:matrix(0,-0.309,3.2361,0,-84.1859,110.9371)}83.33%{transform:matrix(0.5,-0.2676,2.8025,0.5,-123.2016,71.0104)}91.67%{transform:matrix(0.866,-0.1545,1.618,0.866,-92.3874,30.4046)}100.00%{transform:matrix(1,0,0,1,0,0)}}@keyframes sh-seek-0{0.00%{transform:matrix(1,0,0,1,0,0)}12.00%{transform:matrix(0.9925,0.0377,-0.3944,0.9925,21.9565,-1.507)}38.00%{transform:matrix(0.9925,0.0377,-0.3944,0.9925,21.9565,-1.507)}50.00%{transform:matrix(0.9962,-0.0269,0.282,0.9962,-15.2378,1.5776)}76.00%{transform:matrix(0.9962,-0.0269,0.282,0.9962,-15.2378,1.5776)}88.00%{transform:matrix(1,0,0,1,0,0)}100.00%{transform:matrix(1,0,0,1,0,0)}}@keyframes sh-seek-1{0.00%{transform:matrix(1,0,0,1,0,0)}12.00%{transform:matrix(0.9925,0.0377,-0.3944,0.9925,21.8442,-5.9017)}38.00%{transform:matrix(0.9925,0.0377,-0.3944,0.9925,21.8442,-5.9017)}50.00%{transform:matrix(0.9962,-0.0269,0.282,0.9962,-14.0959,4.6978)}76.00%{transform:matrix(0.9962,-0.0269,0.282,0.9962,-14.0959,4.6978)}88.00%{transform:matrix(1,0,0,1,0,0)}100.00%{transform:matrix(1,0,0,1,0,0)}}@keyframes sh-seek-2{0.00%{transform:matrix(1,0,0,1,0,0)}12.00%{transform:matrix(0.9925,0.0377,-0.3944,0.9925,34.8213,-7.5098)}38.00%{transform:matrix(0.9925,0.0377,-0.3944,0.9925,34.8213,-7.5098)}50.00%{transform:matrix(0.9962,-0.0269,0.282,0.9962,-22.9286,6.1401)}76.00%{transform:matrix(0.9962,-0.0269,0.282,0.9962,-22.9286,6.1401)}88.00%{transform:matrix(1,0,0,1,0,0)}100.00%{transform:matrix(1,0,0,1,0,0)}}
@media (prefers-reduced-motion:no-preference){.wf-databases>.wf-long .db-handle{animation:db-long-pump 6s ease-in-out infinite}.wf-databases>.wf-long .db-grip{animation:db-long-grip 6s ease-in-out infinite}.wf-databases>.wf-long .db-forks{animation:db-long-forks 6s ease-in-out infinite}.wf-databases>.wf-long .db-load{animation:db-long-load 6s ease-in-out infinite}}@keyframes db-long-pump{0.00%{transform:matrix(1,0,0,1,0,0)}10.00%{transform:matrix(1,0,0,1,0,0)}17.00%{transform:matrix(0.9953,0.3855,-0.3114,0.8841,41.9423,-188.9958)}24.00%{transform:matrix(1,0,0,1,0,0)}31.00%{transform:matrix(0.9953,0.3855,-0.3114,0.8841,41.9423,-188.9958)}38.00%{transform:matrix(1,0,0,1,0,0)}45.00%{transform:matrix(0.9953,0.3855,-0.3114,0.8841,41.9423,-188.9958)}52.00%{transform:matrix(1,0,0,1,0,0)}100.00%{transform:matrix(1,0,0,1,0,0)}}@keyframes db-long-grip{0.00%{transform:translate(0.00px,0.00px)}10.00%{transform:translate(0.00px,0.00px)}17.00%{transform:translate(18.51px,18.07px)}24.00%{transform:translate(0.00px,0.00px)}31.00%{transform:translate(18.51px,18.07px)}38.00%{transform:translate(0.00px,0.00px)}45.00%{transform:translate(18.51px,18.07px)}52.00%{transform:translate(0.00px,0.00px)}100.00%{transform:translate(0.00px,0.00px)}}@keyframes db-long-forks{0%,10%{transform:none}17%,24%{transform:translate(0.00px,-1.78px)}31%,38%{transform:translate(0.00px,-3.56px)}45%,80%{transform:translate(0.00px,-5.34px)}94%,100%{transform:none}}@keyframes db-long-load{0%,10%{transform:none}17%,24%{transform:translate(0.00px,-1.07px)}31%,38%{transform:translate(0.00px,-2.14px)}45%,80%{transform:translate(0.00px,-3.20px)}94%,100%{transform:none}}
@media (prefers-reduced-motion:no-preference){.wf-databases>.wf-compact .db-handle{animation:db-compact-pump 6s ease-in-out infinite}.wf-databases>.wf-compact .db-grip{animation:db-compact-grip 6s ease-in-out infinite}.wf-databases>.wf-compact .db-forks{animation:db-compact-forks 6s ease-in-out infinite}.wf-databases>.wf-compact .db-load{animation:db-compact-load 6s ease-in-out infinite}}@keyframes db-compact-pump{0.00%{transform:matrix(1,0,0,1,0,0)}10.00%{transform:matrix(1,0,0,1,0,0)}17.00%{transform:matrix(0.9953,0.3855,-0.3114,0.8841,35.2871,-80.271)}24.00%{transform:matrix(1,0,0,1,0,0)}31.00%{transform:matrix(0.9953,0.3855,-0.3114,0.8841,35.2871,-80.271)}38.00%{transform:matrix(1,0,0,1,0,0)}45.00%{transform:matrix(0.9953,0.3855,-0.3114,0.8841,35.2871,-80.271)}52.00%{transform:matrix(1,0,0,1,0,0)}100.00%{transform:matrix(1,0,0,1,0,0)}}@keyframes db-compact-grip{0.00%{transform:translate(0.00px,0.00px)}10.00%{transform:translate(0.00px,0.00px)}17.00%{transform:translate(15.44px,15.08px)}24.00%{transform:translate(0.00px,0.00px)}31.00%{transform:translate(15.44px,15.08px)}38.00%{transform:translate(0.00px,0.00px)}45.00%{transform:translate(15.44px,15.08px)}52.00%{transform:translate(0.00px,0.00px)}100.00%{transform:translate(0.00px,0.00px)}}@keyframes db-compact-forks{0%,10%{transform:none}17%,24%{transform:translate(0.00px,-1.48px)}31%,38%{transform:translate(0.00px,-2.97px)}45%,80%{transform:translate(0.00px,-4.45px)}94%,100%{transform:none}}@keyframes db-compact-load{0%,10%{transform:none}17%,24%{transform:translate(0.00px,-0.89px)}31%,38%{transform:translate(0.00px,-1.78px)}45%,80%{transform:translate(0.00px,-2.67px)}94%,100%{transform:none}}
.wf-move{--mv-sx:-293.87px;--mv-sy:-52.43px;--mv-lx:0.00px;--mv-ly:-44.69px}
@container wf (max-width:366.6px) or (max-height:160.7px){.wf-drives>.wf-main .wfw611{display:none}}
@container wf (min-width:366.6px) and (min-height:160.7px){.wf-drives>.wf-main .wfs611{display:none}}
@container wf (max-width:385.8px) or (max-height:169.1px){.wf-drives>.wf-main .wfw643{display:none}}
@container wf (min-width:385.8px) and (min-height:169.1px){.wf-drives>.wf-main .wfs643{display:none}}
@container wf (max-width:407.4px) or (max-height:178.6px){.wf-drives>.wf-main .wfw679{display:none}}
@container wf (min-width:407.4px) and (min-height:178.6px){.wf-drives>.wf-main .wfs679{display:none}}
@container wf (max-width:230.4px) or (max-height:102.9px){.wf-snapshots>.wf-main .wfw768{display:none}}
@container wf (min-width:230.4px) and (min-height:102.9px){.wf-snapshots>.wf-main .wfs768{display:none}}
@container wf (max-width:218.4px) or (max-height:112.8px){.wf-backups>.wf-main .wfw364{display:none}}
@container wf (min-width:218.4px) and (min-height:112.8px){.wf-backups>.wf-main .wfs364{display:none}}
@container wf (max-aspect-ratio:2399/1000){.wf-databases>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-databases>.wf-compact{display:none}}
@container wf (max-width:350.4px) or (max-height:113.9px){.wf-databases>.wf-long .wfw584{display:none}}
@container wf (min-width:350.4px) and (min-height:113.9px){.wf-databases>.wf-long .wfs584{display:none}}
@container wf (max-width:210.0px) or (max-height:116.2px){.wf-databases>.wf-compact .wfw700{display:none}}
@container wf (min-width:210.0px) and (min-height:116.2px){.wf-databases>.wf-compact .wfs700{display:none}}
@container wf (max-width:359.4px) or (max-height:139.0px){.wf-move>.wf-main .wfw599{display:none}}
@container wf (min-width:359.4px) and (min-height:139.0px){.wf-move>.wf-main .wfs599{display:none}}
/* The Tools panel's machines (build.mjs): their parts' colours and their motion. Each loop is calm and shows the
   tile's point; under reduced motion each stands in its rest pose (wall.css). */

/* ---- cli: the covers that type the session in, a line after another (the build writes their keyframes); at rest they
   are not drawn and the whole session is on the screen, the caret at the prompt ---- */
.wf-cli .cl-cov { display: none; }
.wf-cli .cl-hide { fill: var(--wf-screen); stroke: none; }
@keyframes cl-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- sdks: the labels' paper. One call goes to each language in turn, the same nouns and verbs in each: its label
   lit a pale blue and its lamp blinking as it answers. At rest every lamp is on ---- */
.wf-sdks .sk-label { fill: var(--wf-paper); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .wf-sdks .sk-label { animation: sk-call 3.5s ease infinite; }
  .wf-sdks .sk-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: sk-answer 3.5s steps(1, end) infinite; }
  .wf-sdks :is(.sk-label-1, .sk-lamp-1 :is(.iso-top, .iso-shade, .iso-fill)) { animation-delay: 0.7s; }
  .wf-sdks :is(.sk-label-2, .sk-lamp-2 :is(.iso-top, .iso-shade, .iso-fill)) { animation-delay: 1.4s; }
  .wf-sdks :is(.sk-label-3, .sk-lamp-3 :is(.iso-top, .iso-shade, .iso-fill)) { animation-delay: 2.1s; }
  .wf-sdks :is(.sk-label-4, .sk-lamp-4 :is(.iso-top, .iso-shade, .iso-fill)) { animation-delay: 2.8s; }
}
@keyframes sk-call {
  0%, 26%, 100% { fill: var(--wf-paper); }
  6%, 16% { fill: color-mix(in srgb, var(--wf-blue) 34%, var(--wf-paper)); }
}
@keyframes sk-answer {
  0%, 12%, 20%, 100% { fill: var(--wf-blue); }
  8%, 16% { fill: var(--wf-lamp-off); }
}

/* ---- mcp: the foam in the open drawer (an opening's colour) and the pockets cut in it, the name cards' paper, the
   rubber of the mat and the casters' tyres. The drawer out goes in and comes out again: a tool taken and put back ---- */
@media (prefers-reduced-motion: no-preference) {
  .wf-mcp .mc-out { animation: mc-use 4.4s var(--ease, ease) infinite; }
}
@keyframes mc-use {
  0%, 12%, 86%, 100% { transform: none; }
  36%, 58% { transform: translate(var(--mc-x), var(--mc-y)); }
}
.wf-mcp .iso-svg .mc-foam-block :is(.iso-top, .iso-fill) { fill: var(--wf-hole); }
.wf-mcp .iso-svg .mc-foam-block .iso-shade[data-shade] { fill: color-mix(in srgb, var(--wf-hole) 82%, var(--wf-print)); }
.wf-mcp .iso-svg .mc-foam { fill: var(--wf-hole); stroke: none; }
.wf-mcp .iso-svg .mc-pocket { fill: none; stroke: var(--wf-print); stroke-width: 0.6px; stroke-linejoin: round; opacity: 0.5; }
.wf-mcp .iso-svg .mc-card :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-paper); }
.wf-mcp .iso-svg :is(.mc-mat, .mc-tyre) :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-cable); }
.wf-mcp .iso-svg :is(.mc-mat, .mc-tyre) .iso-line { stroke: var(--wf-cable-edge); }
.wf-mcp .iso-svg .mc-ribs { fill: none; stroke: var(--wf-cable-shine); stroke-width: 0.7px; stroke-linecap: round; }
.wf-mcp .iso-svg .mc-mat-hole { fill: var(--wf-cable); stroke: none; }

/* ---- api: the flaps (a shade off the night) split across their middle, their letters in the screen's frost; the rows'
   lamps light one after another, a request on each route. At rest the first is lit ---- */
.wf-api .iso-svg .ap-cell { fill: var(--wf-screen-edge); stroke: none; }
.wf-api .iso-svg .ap-split { fill: none; stroke: var(--wf-screen); stroke-width: 0.9px; }
.wf-api .iso-svg .ap-flap { font-weight: 600; }
.wf-api .iso-svg .ap-dash { stroke-width: 1.6px; }
@media (prefers-reduced-motion: no-preference) {
  .wf-api .ap-lamp :is(.iso-top, .iso-shade, .iso-fill) { animation: ap-lamp 3.6s ease infinite; }
  .wf-api .ap-row-0 { animation: ap-flip 3.6s steps(1, end) infinite; }
  .wf-api :is(.ap-lamp-1 :is(.iso-top, .iso-shade, .iso-fill), .ap-row-1) { animation-delay: 1.2s; }
  .wf-api :is(.ap-lamp-2 :is(.iso-top, .iso-shade, .iso-fill), .ap-row-2) { animation-delay: 2.4s; }
  .wf-api :is(.ap-row-1, .ap-row-2) { animation-name: ap-flip; animation-duration: 3.6s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
}
@keyframes ap-lamp {
  0%, 30% { fill: var(--wf-blue); }
  34%, 100% { fill: var(--wf-lamp-off); }
}
/* (a row's flaps flip as its request comes: lit a moment, twice) */
@keyframes ap-flip {
  0%, 3%, 7%, 100% { fill: var(--wf-screen-edge); }
  1%, 5% { fill: var(--wf-screen-ice); }
}

/* ---- otel: the tape's paper and its grid; on it the p99 in the logo's deep blue and the p50 in the print's grey (ink
   on paper, in either theme); the legend's strokes and the pens' caps in the drawing's blue and darkest tone. The
   receiver's lamp flickers as the tape comes in. The tape's run and the pens' following are the build's (otel.mjs) ---- */
.wf-otel .iso-svg .ot-tape :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-paper); }
.wf-otel .iso-svg .ot-grid { fill: none; stroke: color-mix(in srgb, var(--wf-print) 24%, var(--wf-paper)); stroke-width: 0.6px; }
.wf-otel .iso-svg .ot-rule { stroke-dasharray: 1.5 2; }
.wf-otel .iso-svg :is(.ot-trace, .ot-key) { fill: none; stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; }
.wf-otel .iso-svg .ot-trace.ot-p99 { stroke: var(--wf-cb-right); }
.wf-otel .iso-svg .ot-trace.ot-p50 { stroke: var(--wf-print); }
.wf-otel .iso-svg .ot-key.ot-p99 { stroke: var(--wf-blue); }
.wf-otel .iso-svg .ot-key.ot-p50 { stroke: var(--anatomy-hi); }
.wf-otel .iso-svg .ot-cap.ot-p99 :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--wf-blue); }
.wf-otel .iso-svg .ot-cap.ot-p50 :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--anatomy-hi); }
.wf-otel .iso-svg .ot-plate { fill: var(--anatomy-shade-2); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .wf-otel .ot-rx :is(.iso-top, .iso-shade, .iso-fill) { animation: ot-rx 1.7s steps(1, end) infinite; }
}
@keyframes ot-rx {
  0%, 40%, 60%, 100% { fill: var(--wf-green); }
  44%, 56% { fill: var(--wf-lamp-off); }
}

/* ---- limits: the dial's face and needle, the scale's stretch past the limit and the limit's tick in amber, the
   switch's copper blade and black grip. The month's loop (the needle's climb and the switch's swing are the build's,
   limits.mjs): the instance is awake (its cube clear, its lamp blue) until the needle is at the limit; then the amber
   lamp lights and it is asleep. At rest: at the limit ---- */
.wf-limits .iso-svg .lm-face :is(.iso-top, .iso-fill, .iso-shade[data-shade]) { fill: var(--anatomy-face); }
.wf-limits .iso-svg .lm-needle-body { fill: var(--anatomy-hi); stroke: none; }
.wf-limits .iso-svg .lm-band { fill: none; stroke: var(--wf-amber); stroke-width: 2.2px; stroke-linecap: butt; }
.wf-limits .iso-svg .lm-mark { fill: none; stroke: var(--wf-amber); stroke-width: 1.4px; stroke-linecap: round; }
.wf-limits .iso-svg .lm-blade-body { fill: var(--anatomy-shade-1); stroke: var(--anatomy-hi); stroke-width: 0.6px; stroke-linejoin: round; }
.wf-limits .iso-svg .lm-grip { fill: var(--wf-cable); stroke: var(--wf-cable-edge); stroke-width: 0.6px; }
@keyframes lm-amber {
  0%, 56% { fill: var(--wf-lamp-off); }
  60%, 90% { fill: var(--wf-amber); }
  94%, 100% { fill: var(--wf-lamp-off); }
}
@keyframes lm-frost {
  0%, 60% { opacity: 0; }
  66%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes lm-edge {
  0%, 60% { stroke: var(--wf-cb-edge); }
  66%, 90% { stroke: var(--wf-cb-edge-asleep); }
  96%, 100% { stroke: var(--wf-cb-edge); }
}
@keyframes lm-awake {
  0%, 58% { fill: var(--wf-blue); }
  62%, 92% { fill: var(--wf-lamp-off); }
  96%, 100% { fill: var(--wf-blue); }
}


@media (prefers-reduced-motion: no-preference){.wf-cli .cl-cov{display:inline}.wf-cli .cl-caret{animation:cl-blink 1.1s step-end infinite}.wf-cli .cl-cov-0{animation:cl-t0 12s step-end infinite}.wf-cli .cl-cur-0{animation:cl-c0 12s step-end infinite}.wf-cli .cl-cov-1{animation:cl-t1 12s step-end infinite}.wf-cli .cl-cur-1{animation:cl-c1 12s step-end infinite}.wf-cli .cl-cov-2{animation:cl-t2 12s step-end infinite}.wf-cli .cl-cov-3{animation:cl-t3 12s step-end infinite}.wf-cli .cl-cur-3{animation:cl-c3 12s step-end infinite}.wf-cli .cl-cov-4{animation:cl-t4 12s step-end infinite}.wf-cli .cl-cov-5{animation:cl-t5 12s step-end infinite}}@keyframes cl-t0{0%{transform:none}4.17%{transform:translateX(6.00px)}7.50%{transform:translateX(6.00px);animation-timing-function:steps(30,end)}24.17%{transform:translateX(96.00px)}95.83%{transform:none}100%{transform:none}}@keyframes cl-c0{0%{opacity:0}4.17%{opacity:1}26.67%{opacity:0}100%{opacity:0}}@keyframes cl-t1{0%{transform:none}26.67%{transform:translateX(12.00px)}28.33%{transform:translateX(12.00px);animation-timing-function:steps(26,end)}41.67%{transform:translateX(90.00px)}95.83%{transform:none}100%{transform:none}}@keyframes cl-c1{0%{opacity:0}26.67%{opacity:1}44.17%{opacity:0}100%{opacity:0}}@keyframes cl-t2{0%{transform:none}46.67%{transform:translateX(9.00px)}95.83%{transform:none}100%{transform:none}}@keyframes cl-t3{0%{transform:none}49.17%{transform:translateX(6.00px)}52.50%{transform:translateX(6.00px);animation-timing-function:steps(27,end)}67.50%{transform:translateX(87.00px)}95.83%{transform:none}100%{transform:none}}@keyframes cl-c3{0%{opacity:0}49.17%{opacity:1}70.00%{opacity:0}100%{opacity:0}}@keyframes cl-t4{0%{transform:none}72.50%{transform:translateX(135.00px)}95.83%{transform:none}100%{transform:none}}@keyframes cl-t5{0%{transform:none}74.17%{transform:translateX(9.00px)}95.83%{transform:none}100%{transform:none}}

.wf-mcp{--mc-x:14.39px;--mc-y:-7.70px}

@media (prefers-reduced-motion:no-preference){.wf-otel .wf-long .ot-feed{animation:wf-otel-long-feed 12s linear infinite}.wf-otel .wf-long .ot-pen-0{animation:wf-otel-long-pen0 12s linear infinite}.wf-otel .wf-long .ot-pen-1{animation:wf-otel-long-pen1 12s linear infinite}}
@keyframes wf-otel-long-feed{from{transform:translateX(-48px)}to{transform:none}}
@keyframes wf-otel-long-pen0{0%{transform:translate(0.00px,0.00px)}4.2%{transform:translate(0.00px,-0.44px)}8.3%{transform:translate(0.00px,-0.79px)}12.5%{transform:translate(0.00px,-0.53px)}16.7%{transform:translate(0.00px,0.54px)}20.8%{transform:translate(0.00px,2.14px)}25%{transform:translate(0.00px,3.70px)}29.2%{transform:translate(0.00px,4.60px)}33.3%{transform:translate(0.00px,4.49px)}37.5%{transform:translate(0.00px,1.90px)}41.7%{transform:translate(0.00px,-2.46px)}45.8%{transform:translate(0.00px,0.36px)}50%{transform:translate(0.00px,2.21px)}54.2%{transform:translate(0.00px,2.74px)}58.3%{transform:translate(0.00px,3.09px)}62.5%{transform:translate(0.00px,2.83px)}66.7%{transform:translate(0.00px,1.77px)}70.8%{transform:translate(0.00px,0.16px)}75%{transform:translate(0.00px,-1.46px)}79.2%{transform:translate(0.00px,-3.80px)}83.3%{transform:translate(0.00px,-9.44px)}87.5%{transform:translate(0.00px,-8.69px)}91.7%{transform:translate(0.00px,-2.07px)}95.8%{transform:translate(0.00px,-0.04px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes wf-otel-long-pen1{0%{transform:translate(0.00px,0.00px)}4.2%{transform:translate(0.00px,0.44px)}8.3%{transform:translate(0.00px,0.24px)}12.5%{transform:translate(0.00px,-0.24px)}16.7%{transform:translate(0.00px,-0.29px)}20.8%{transform:translate(0.00px,0.43px)}25%{transform:translate(0.00px,1.53px)}29.2%{transform:translate(0.00px,2.27px)}33.3%{transform:translate(0.00px,2.25px)}37.5%{transform:translate(0.00px,1.81px)}41.7%{transform:translate(0.00px,1.66px)}45.8%{transform:translate(0.00px,2.15px)}50%{transform:translate(0.00px,2.90px)}54.2%{transform:translate(0.00px,3.20px)}58.3%{transform:translate(0.00px,2.68px)}62.5%{transform:translate(0.00px,1.70px)}66.7%{transform:translate(0.00px,1.02px)}70.8%{transform:translate(0.00px,1.01px)}75%{transform:translate(0.00px,1.14px)}79.2%{transform:translate(0.00px,0.34px)}83.3%{transform:translate(0.00px,-1.03px)}87.5%{transform:translate(0.00px,-1.38px)}91.7%{transform:translate(0.00px,-1.16px)}95.8%{transform:translate(0.00px,-0.72px)}100%{transform:translate(0.00px,0.00px)}}
@media (prefers-reduced-motion:no-preference){.wf-otel .wf-compact .ot-feed{animation:wf-otel-compact-feed 12s linear infinite}.wf-otel .wf-compact .ot-pen-0{animation:wf-otel-compact-pen0 12s linear infinite}.wf-otel .wf-compact .ot-pen-1{animation:wf-otel-compact-pen1 12s linear infinite}}
@keyframes wf-otel-compact-feed{from{transform:translateX(-48px)}to{transform:none}}
@keyframes wf-otel-compact-pen0{0%{transform:translate(0.00px,0.00px)}4.2%{transform:translate(0.00px,-0.34px)}8.3%{transform:translate(0.00px,-0.62px)}12.5%{transform:translate(0.00px,-0.41px)}16.7%{transform:translate(0.00px,0.42px)}20.8%{transform:translate(0.00px,1.67px)}25%{transform:translate(0.00px,2.89px)}29.2%{transform:translate(0.00px,3.59px)}33.3%{transform:translate(0.00px,3.50px)}37.5%{transform:translate(0.00px,1.49px)}41.7%{transform:translate(0.00px,-1.92px)}45.8%{transform:translate(0.00px,0.28px)}50%{transform:translate(0.00px,1.73px)}54.2%{transform:translate(0.00px,2.14px)}58.3%{transform:translate(0.00px,2.42px)}62.5%{transform:translate(0.00px,2.21px)}66.7%{transform:translate(0.00px,1.38px)}70.8%{transform:translate(0.00px,0.13px)}75%{transform:translate(0.00px,-1.14px)}79.2%{transform:translate(0.00px,-2.97px)}83.3%{transform:translate(0.00px,-7.38px)}87.5%{transform:translate(0.00px,-6.79px)}91.7%{transform:translate(0.00px,-1.62px)}95.8%{transform:translate(0.00px,-0.03px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes wf-otel-compact-pen1{0%{transform:translate(0.00px,0.00px)}4.2%{transform:translate(0.00px,0.34px)}8.3%{transform:translate(0.00px,0.19px)}12.5%{transform:translate(0.00px,-0.19px)}16.7%{transform:translate(0.00px,-0.23px)}20.8%{transform:translate(0.00px,0.33px)}25%{transform:translate(0.00px,1.20px)}29.2%{transform:translate(0.00px,1.77px)}33.3%{transform:translate(0.00px,1.76px)}37.5%{transform:translate(0.00px,1.42px)}41.7%{transform:translate(0.00px,1.30px)}45.8%{transform:translate(0.00px,1.68px)}50%{transform:translate(0.00px,2.27px)}54.2%{transform:translate(0.00px,2.50px)}58.3%{transform:translate(0.00px,2.09px)}62.5%{transform:translate(0.00px,1.33px)}66.7%{transform:translate(0.00px,0.80px)}70.8%{transform:translate(0.00px,0.79px)}75%{transform:translate(0.00px,0.89px)}79.2%{transform:translate(0.00px,0.26px)}83.3%{transform:translate(0.00px,-0.81px)}87.5%{transform:translate(0.00px,-1.08px)}91.7%{transform:translate(0.00px,-0.91px)}95.8%{transform:translate(0.00px,-0.56px)}100%{transform:translate(0.00px,0.00px)}}
@media (prefers-reduced-motion:no-preference){.wf-limits .wf-long .lm-needle{animation:wf-limits-long-climb 7s ease-in-out infinite}.wf-limits .wf-long .lm-swing{animation:wf-limits-long-swing 7s ease infinite}.wf-limits .wf-long .lm-lamp :is(.iso-top,.iso-shade,.iso-fill){animation:lm-amber 7s ease infinite}.wf-limits .wf-long .lm-cube .wf-cb-frost{animation:lm-frost 7s ease infinite}.wf-limits .wf-long .lm-cube .wf-cb-edge{animation:lm-edge 7s ease infinite}.wf-limits .wf-long .lm-inst-lamp :is(.iso-top,.iso-shade,.iso-fill){animation:lm-awake 7s ease infinite}}
@keyframes wf-limits-long-climb{0%,6%{transform:rotate(-182.4deg)}56%,88%{transform:none}96%,100%{transform:rotate(-182.4deg)}}
@keyframes wf-limits-long-swing{0%,58%{transform:rotate(45deg)}64%,88%{transform:none}94%,100%{transform:rotate(45deg)}}
@media (prefers-reduced-motion:no-preference){.wf-limits .wf-compact .lm-needle{animation:wf-limits-compact-climb 7s ease-in-out infinite}.wf-limits .wf-compact .lm-swing{animation:wf-limits-compact-swing 7s ease infinite}.wf-limits .wf-compact .lm-lamp :is(.iso-top,.iso-shade,.iso-fill){animation:lm-amber 7s ease infinite}.wf-limits .wf-compact .lm-cube .wf-cb-frost{animation:lm-frost 7s ease infinite}.wf-limits .wf-compact .lm-cube .wf-cb-edge{animation:lm-edge 7s ease infinite}.wf-limits .wf-compact .lm-inst-lamp :is(.iso-top,.iso-shade,.iso-fill){animation:lm-awake 7s ease infinite}}
@keyframes wf-limits-compact-climb{0%,6%{transform:rotate(-182.4deg)}56%,88%{transform:none}96%,100%{transform:rotate(-182.4deg)}}
@keyframes wf-limits-compact-swing{0%,58%{transform:rotate(45deg)}64%,88%{transform:none}94%,100%{transform:rotate(45deg)}}
@container wf (max-aspect-ratio:2399/1000){.wf-cli>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-cli>.wf-compact{display:none}}
@container wf (max-width:384.6px) or (max-height:181.4px){.wf-cli>.wf-long .wfw641{display:none}}
@container wf (min-width:384.6px) and (min-height:181.4px){.wf-cli>.wf-long .wfs641{display:none}}
@container wf (max-width:384.0px) or (max-height:247.0px){.wf-cli>.wf-compact .wfw640{display:none}}
@container wf (min-width:384.0px) and (min-height:247.0px){.wf-cli>.wf-compact .wfs640{display:none}}
@container wf (max-width:454.8px) or (max-height:97.0px){.wf-sdks>.wf-main .wfw758{display:none}}
@container wf (min-width:454.8px) and (min-height:97.0px){.wf-sdks>.wf-main .wfs758{display:none}}
@container wf (max-width:233.7px) or (max-height:154.2px){.wf-mcp>.wf-main .wfw779{display:none}}
@container wf (min-width:233.7px) and (min-height:154.2px){.wf-mcp>.wf-main .wfs779{display:none}}
@container wf (max-width:236.1px) or (max-height:160.5px){.wf-api>.wf-main .wfw787{display:none}}
@container wf (min-width:236.1px) and (min-height:160.5px){.wf-api>.wf-main .wfs787{display:none}}
@container wf (max-aspect-ratio:2399/1000){.wf-otel>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-otel>.wf-compact{display:none}}
@container wf (max-width:316.8px) or (max-height:114.0px){.wf-otel>.wf-long .wfw528{display:none}}
@container wf (min-width:316.8px) and (min-height:114.0px){.wf-otel>.wf-long .wfs528{display:none}}
@container wf (max-width:202.8px) or (max-height:93.3px){.wf-otel>.wf-compact .wfw676{display:none}}
@container wf (min-width:202.8px) and (min-height:93.3px){.wf-otel>.wf-compact .wfs676{display:none}}
@container wf (max-aspect-ratio:2399/1000){.wf-limits>.wf-long{display:none}}
@container wf (min-aspect-ratio:2400/1000){.wf-limits>.wf-compact{display:none}}
@container wf (max-width:279.6px) or (max-height:111.8px){.wf-limits>.wf-long .wfw466{display:none}}
@container wf (min-width:279.6px) and (min-height:111.8px){.wf-limits>.wf-long .wfs466{display:none}}
@container wf (max-width:232.5px) or (max-height:105.4px){.wf-limits>.wf-compact .wfw775{display:none}}
@container wf (min-width:232.5px) and (min-height:105.4px){.wf-limits>.wf-compact .wfs775{display:none}}