/* Load-Bearing — Data Poems. Luke Steuber. Schematic cable art, not electrical physics.
 * Never set stroke-width on .conductor here: its SVG attribute is the encoded width. */
:root{color-scheme:dark;--bg:#0b0c0e;--ink:#dde1e4;--muted:#8a9097;--blue:#7cc4ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font:13px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(130% 100% at 50% 45%,#16181c 0%,#0e0f12 60%,#08090a 100%)}

#field{position:fixed;inset:0;outline:none;touch-action:manipulation;cursor:default;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#field[hidden]{display:none}
#field:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
#art{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The only permanent UI */
#explore-open{position:fixed;z-index:4;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));
  width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #3a3f46;background:rgba(14,15,18,.9);
  color:#e3e6e8;font:600 17px/1 system-ui,sans-serif;cursor:pointer}
#explore-open[data-corner="br"]{top:auto;bottom:max(8px,env(safe-area-inset-bottom))}
#explore-open:hover{border-color:#5d7f9c}
#explore-open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

#status{position:fixed;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;
  color:var(--muted);font-size:13px;pointer-events:none}
#status[hidden]{display:none}

/* Exact reading — only after interaction */
.readout{position:fixed;left:0;top:0;z-index:5;width:max-content;max-width:min(260px,calc(100vw - 16px));
  padding:9px 12px 10px;border:1px solid #2f4253;border-radius:6px;background:rgba(10,11,13,.95);
  color:var(--ink);pointer-events:none;box-shadow:0 6px 26px rgba(0,0,0,.6)}
.readout[hidden]{display:none}
.readout .h{font-size:11px;color:#b5bcc3}
.readout .v{margin:2px 0 3px;font:600 24px/1.1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#f2f8fd}
.readout .v small{margin-left:4px;font-size:12px;font-weight:500;color:#a9b2ba}
.readout .k,.readout .s{font-size:11px;line-height:1.35;color:#9ea6ad}
.readout .s{margin-top:2px}
.readout.hist{border-color:#6d4524}
.readout.hist .v{color:#ffd9a8}
.readout.alt .k{color:#b7cde0}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- cables ---- */
.cable path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.cable .deco{pointer-events:none}
.cable{transition:opacity .2s ease}
.has-sel .cable:not(.sel){opacity:.3}

/* copper: solid round conductor, served-wire lay, centred sheen */
.hist .conductor{stroke:#7b421c}
.hist .mid{stroke:#c47a3b}
.hist .lay{stroke:#2c1405;opacity:.32}
.hist .spec{stroke:#ffd8a4;opacity:.78}
.hist.sel .mid{stroke:#de9450}
.hist.sel .spec{stroke:#fff1dc;opacity:1}

/* blue: insulated sheath, edge rims, parallel lit cores */
.ref .conductor{stroke:#0f2f4a}
.alt .conductor{stroke:#12283b}
.ref .rim{stroke:#5fa6dd}
.alt .rim{stroke:#4a7799}
.ref .glow{stroke:#2e8fe8;opacity:.42}
.alt .glow{stroke:#3a74a6;opacity:.3}
.ref .core{stroke:#e2f4ff}
.alt .core{stroke:#a7cbe6}
.cable.sel .core{stroke:#ffffff}
.cable.sel .glow{opacity:.85}
.alt.sel .rim{stroke:#79b4e0}

/* one-time energizing: cables power on and a single pulse runs each cable once */
.pulse{stroke:#ffffff;opacity:0}
.hist .pulse{stroke:#fff0d8}
.energize .cable{animation:power-on 1s ease-out both;animation-delay:var(--d,0ms)}
.energize .pulse{stroke-dasharray:90 1100;animation:pulse 1.25s cubic-bezier(.35,.1,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes power-on{from{opacity:.14}}
@keyframes pulse{0%{stroke-dashoffset:90;opacity:0}10%{opacity:.95}88%{opacity:.95}100%{stroke-dashoffset:-1010;opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pulse{display:none}
}
@media (forced-colors:active){
  .cable .conductor{stroke:CanvasText}
  .cable .deco{display:none}
  .has-sel .cable:not(.sel){opacity:.45}
  .readout{border-color:CanvasText;background:Canvas;color:CanvasText}
  #field:focus-visible{outline-color:Highlight}
}