:root {
  --color-paper: var(--wp--preset--color--paper);
  --color-paper-2: var(--wp--preset--color--paper-2);
  --color-paper-3: var(--wp--preset--color--paper-3);
  --color-graphite: var(--wp--preset--color--graphite);
  --color-graphite-2: var(--wp--preset--color--graphite-2);
  --color-ink: var(--wp--preset--color--ink);
  --color-ink-2: var(--wp--preset--color--ink-2);
  --color-ink-3: var(--wp--preset--color--ink-3);
  --color-ink-inverse: var(--wp--preset--color--ink-inverse);
  --color-ink-inverse-2: var(--wp--preset--color--ink-inverse-2);
  --color-rule: var(--wp--preset--color--rule);
  --color-rule-2: var(--wp--preset--color--rule-2);
  --color-rule-dark: var(--wp--preset--color--graphite-2);
  --color-accent: var(--wp--preset--color--accent);
  --color-accent-hover: var(--wp--preset--color--accent-hover);
  --color-accent-ink: var(--wp--preset--color--accent-ink);
  --color-accent-soft: var(--wp--preset--color--accent-soft);
  --color-accent-bright: var(--wp--preset--color--accent-bright);
  --color-pending: var(--wp--preset--color--pending);
  --color-error: var(--wp--preset--color--error);
  --color-error-ink: var(--wp--preset--color--error);

  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --font-mono: var(--wp--preset--font-family--mono);

  --text-xs: var(--wp--preset--font-size--xs);
  --text-sm: var(--wp--preset--font-size--sm);
  --text-base: var(--wp--preset--font-size--base);
  --text-md: var(--wp--preset--font-size--md);
  --text-lg: var(--wp--preset--font-size--lg);
  --text-xl: var(--wp--preset--font-size--xl);
  --text-2xl: var(--wp--preset--font-size--xxl);
  --text-3xl: var(--wp--preset--font-size--xxxl);
  --text-display-s: var(--wp--preset--font-size--display-s);
  --text-display: var(--wp--preset--font-size--display);

  --space-3xs: var(--wp--preset--spacing--xxxs);
  --space-2xs: var(--wp--preset--spacing--xxs);
  --space-xs: var(--wp--preset--spacing--xs);
  --space-sm: var(--wp--preset--spacing--sm);
  --space-md: var(--wp--preset--spacing--md);
  --space-lg: var(--wp--preset--spacing--lg);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--xxl);

  --rule-hair: var(--wp--custom--rule-hair);
  --radius-sm: var(--wp--custom--radius-sm);
  --radius-md: var(--wp--custom--radius-md);
  --ease-out: var(--wp--custom--ease-out);
  --ease-in: var(--wp--custom--ease-in);
  --ease-in-out: var(--wp--custom--ease-in-out);
  --dur-fast: var(--wp--custom--dur-fast);
  --dur-base: var(--wp--custom--dur-base);
  --dur-slow: var(--wp--custom--dur-slow);
  --measure: var(--wp--custom--measure);

  --page-gutter: 1rem;
}

@media (min-width: 40rem) { :root { --page-gutter: 2rem; } }
@media (min-width: 64rem) { :root { --page-gutter: 3.5rem; } }


.schematic { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); padding: var(--space-md); margin: 0; }
.schematic figcaption { margin-top: var(--space-sm); }
.schematic svg { width: 100%; }
.s-line { stroke: var(--color-rule-2); stroke-width: 1; }
.s-box { fill: none; stroke: var(--color-ink-3); stroke-width: 1; }
.s-fill { fill: var(--color-paper-3); stroke: var(--color-rule-2); stroke-width: 1; }
.s-accent { fill: var(--color-accent); }
.s-accent-2 { fill: var(--color-accent-bright); }
.s-soft { fill: var(--color-accent-soft); stroke: none; }
.s-accent-line { stroke: var(--color-accent); stroke-width: 1.5; fill: none; }
.s-dash { stroke: var(--color-ink-3); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.s-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--color-ink-3); text-transform: uppercase; }
.s-label--accent { fill: var(--color-accent); }
.s-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; fill: var(--color-accent); }
.s-on-accent { fill: var(--color-accent-ink); }

.mini { display: block; width: 76px; height: 52px; flex: none; }
.mini svg { width: 100%; height: 100%; display: block; }

.dw, .dwp { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bk, .bkf { opacity: 0; }
.gx, .gxp { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.gy, .gyp, .spike { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; }
.refill { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; opacity: 0; }
.spk-l { opacity: 0; }
.bkp { opacity: 0; }
.dot, .swing { opacity: 0; }
.bkf { stroke-dasharray: 5 5; }

@keyframes dw { to { stroke-dashoffset: 0; } }
@keyframes bk { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes gx { to { transform: scaleX(1); } }
@keyframes gy { to { transform: scaleY(1); } }
@keyframes spike {
  0%   { transform: scaleY(0); }
  20%  { transform: scaleY(1); }
  46%  { transform: scaleY(1); }
  66%  { transform: scaleY(0); }
  100% { transform: scaleY(0); }
}
@keyframes spikelabel {
  0% { opacity: 0; } 22% { opacity: 1; } 46% { opacity: 1; } 64% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes refill {
  0%   { transform: scaleX(0); opacity: 0.7; }
  26%  { transform: scaleX(1); opacity: 0.7; }
  46%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes march { to { stroke-dashoffset: -20; } }
@keyframes softpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dotrun {
  0% { transform: translateX(var(--from)); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translateX(var(--to)); opacity: 0; }
}
@keyframes swingrun {
  0%, 100% { transform: translateX(var(--from)); opacity: 1; }
  50% { transform: translateX(var(--to)); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .is-in .dw  { animation: dw 700ms var(--ease-out) both var(--d, 0ms); }
  .is-in .bk  { animation: bk 450ms var(--ease-out) both var(--d, 0ms); }
  .is-in .gx  { animation: gx 620ms var(--ease-out) both var(--d, 0ms); }
  .is-in .gy  { animation: gy 560ms var(--ease-out) both var(--d, 0ms); }
  .is-in .spike { animation: spike 3.4s var(--ease-in-out) infinite var(--d, 0ms); }
  .is-in .spk-l { animation: spikelabel 3.4s var(--ease-in-out) infinite var(--d, 0ms); }
  .is-in .refill { animation: refill 3.6s var(--ease-in-out) infinite var(--d, 0ms); }
  .is-in .gxp { animation: gx 620ms var(--ease-out) both var(--d, 0ms),
                           softpulse 2.8s var(--ease-in-out) infinite calc(var(--d, 0ms) + 620ms); }
  .is-in .gyp { animation: gy 560ms var(--ease-out) both var(--d, 0ms),
                           softpulse 2.8s var(--ease-in-out) infinite calc(var(--d, 0ms) + 560ms); }
  .is-in .bkp { animation: bk 450ms var(--ease-out) both var(--d, 0ms),
                           softpulse 2.8s var(--ease-in-out) infinite calc(var(--d, 0ms) + 450ms); }
  .is-in .dwp { animation: dw 700ms var(--ease-out) both var(--d, 0ms),
                           softpulse 2.8s var(--ease-in-out) infinite calc(var(--d, 0ms) + 700ms); }
  .is-in .bkf { animation: bk 450ms var(--ease-out) both var(--d, 0ms),
                           march 1.8s linear infinite calc(var(--d, 0ms) + 450ms); }
  .is-in .flow { stroke-dasharray: 5 5; animation: march 1.8s linear infinite var(--d, 0ms); }
  .is-in .pulse { animation: softpulse 2.8s var(--ease-in-out) infinite var(--d, 0ms); }
  .is-in .dot { animation: dotrun 3s var(--ease-in-out) infinite var(--d, 0ms); }
  .is-in .swing { animation: swingrun 3.4s var(--ease-in-out) infinite var(--d, 0ms); }
}

@media (prefers-reduced-motion: reduce) {
  .dw, .dwp { stroke-dasharray: none; stroke-dashoffset: 0; }
  .bk, .bkf { opacity: 1; }
  .gx, .gxp, .gy, .gyp, .spike { transform: none; }
  .spk-l { opacity: 1; }
  .refill { display: none; }
  .bkp { opacity: 1; }
  .dot { display: none; }
  .swing { opacity: 1; transform: translateX(var(--from)); }
}

.reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .btn--primary:active { transform: none; }
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--color-accent);
  color: var(--color-accent-ink); padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }


.schematic--static .dw, .schematic--static .dwp { stroke-dasharray: none; stroke-dashoffset: 0; }
.schematic--static .bk, .schematic--static .bkf, .schematic--static .bkp { opacity: 1; }
.schematic--static .gx, .schematic--static .gxp,
.schematic--static .gy, .schematic--static .gyp,
.schematic--static .spike { transform: none; }
.schematic--static .spk-l { opacity: 1; }
.schematic--static .dot { display: none; }
.schematic--static .swing { opacity: 1; transform: translateX(var(--from)); }
.schematic--static .refill { display: none; }

.schematic--dark { background: var(--color-graphite-2); border-color: var(--color-rule-dark); }
.schematic--dark .s-box { stroke: var(--color-ink-inverse-2); }
.schematic--dark .s-fill { fill: var(--color-graphite); stroke: var(--color-rule-dark); }
.schematic--dark .s-line { stroke: var(--color-rule-dark); }
.schematic--dark .s-dash { stroke: var(--color-ink-inverse-2); }
.schematic--dark .s-label { fill: var(--color-ink-inverse-2); }
.schematic--dark .s-accent,
.schematic--dark .s-label--accent,
.schematic--dark .s-num { fill: var(--color-accent-bright); }
.schematic--dark .s-accent-line { stroke: var(--color-accent-bright); }
.schematic--dark .s-on-accent { fill: var(--color-graphite); }
.schematic--dark .s-soft { fill: var(--color-graphite); }
.schematic--dark figcaption { color: var(--color-accent-bright); }