/* How we do it: an area's three lines and its figure (/erp/<slug>).
   The figure is an isometric hairline drawing (iso-glow, after Tolga Cohce's
   iso-figure, MIT) whose live parts glow white in the dark theme and turn
   flat near-black, with no glow, in the light one. Colours are this file's
   tokens on .iso only. */
.koeia-erp-area__p { max-width: 560px; margin: 0 auto 8px; text-align: left; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--nix-text); }

.iso { margin: 28px auto 0; max-width: 560px; }
.iso__stage { display: block; width: 100%; height: auto; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.iso__stage:focus-visible { outline: 1px dashed var(--nix-text-soft); outline-offset: 6px; }
.iso__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 12px; font-weight: 300; color: var(--nix-text-soft); }
.iso__read { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .04em; text-align: right; }

html[data-theme="dark"] .iso {
  --ig-top: #1c1c1d; --ig-front: #141415; --ig-side: #0f0f10; --ig-recess: #0b0b0c;
  --ig-line: rgba(255,255,255,.62); --ig-detail: rgba(255,255,255,.2); --ig-ink: rgba(255,255,255,.55);
  --ig-accent: #ffffff; --ig-accent-dim: rgba(255,255,255,.4); --ig-on-accent: #101010;
}
.iso, html[data-theme="light"] .iso {
  --ig-top: #fbfbfb; --ig-front: #ededee; --ig-side: #e2e2e4; --ig-recess: #d6d6d8;
  --ig-line: rgba(0,0,0,.66); --ig-detail: rgba(0,0,0,.2); --ig-ink: rgba(0,0,0,.55);
  --ig-accent: #141414; --ig-accent-dim: rgba(0,0,0,.35); --ig-on-accent: #fbfbfb;
}
.iso svg * { vector-effect: non-scaling-stroke; }
.iso .face { stroke: var(--ig-line); stroke-width: 1; stroke-linejoin: round; }
.iso .face.top { fill: var(--ig-top); }
.iso .face.front { fill: var(--ig-front); }
.iso .face.side { fill: var(--ig-side); }
.iso .face.recess { fill: var(--ig-recess); }
.iso .detail { fill: none; stroke: var(--ig-detail); stroke-width: 1; }
.iso .label { fill: var(--ig-ink); font: 400 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.iso .wire { fill: none; stroke: var(--ig-detail); stroke-width: 1.4; transition: stroke 300ms ease; }
.iso .wire.hot { stroke: var(--ig-accent); }
.iso .pulse { fill: none; stroke: var(--ig-accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 60 1000; stroke-dashoffset: 60; opacity: 0; }
.iso .pulse.go { animation: iso-pulse 900ms cubic-bezier(.4,0,.2,1) both; }
@keyframes iso-pulse { 0% { stroke-dashoffset: 60; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
.iso .led { fill: var(--ig-recess); stroke: var(--ig-line); stroke-width: 1; transition: fill 300ms ease; }
.iso .led.hot { fill: var(--ig-accent); }
/* A live part: its top (and its faces) take the accent. */
.iso .hot .face.top, .iso .lit, .iso .face.lit { fill: var(--ig-accent); }
.iso .hot .face.front, .iso .hot .face.side { fill: color-mix(in srgb, var(--ig-accent) 42%, var(--ig-front)); }
.iso .hot .label, .iso .label.on-accent { fill: var(--ig-on-accent); }
.iso .halo { fill: var(--ig-accent); opacity: 0; transition: opacity 400ms ease; }
.iso .halo.hot { opacity: .28; }
.iso .mv { transition: transform 650ms cubic-bezier(.2,.7,.2,1); }
.iso .fade { transition: opacity 400ms ease; }
/* The light theme has no glow: lit things are flat accent. */
html:not([data-theme="dark"]) .iso [filter] { filter: none; }
html:not([data-theme="dark"]) .iso .halo { display: none; }
@media (prefers-reduced-motion: reduce) { .iso .mv, .iso .pulse.go { transition: none; animation: none; } }