/* Stradaverse iso kit: plates and the drawing vocabulary. Graphite when off, brass when lit. */
:root{
  --bg:#0e1116; --panel:#0b0e12; --body:#151a21; --deck:#19202a; --side:#11151b; --recess:#0b0e12;
  --line:#3a4048; --detail:#262c34; --ink:#7e858f; --ink-hi:#d9d2c6;
  --accent:#b79355; --accent-hi:#e7c485; --accent-deep:#8c6a3c; --accent-shadow:#7a5a30; --glow-hot:#d8b273; --accent-dim:rgba(183,147,85,.09);
  --person:#f6efe3;
  --k-ease:cubic-bezier(.2,.7,.2,1);
}
/* the plate: a numbered figure with a live status line */
.plate[data-fig]{position:relative;margin:0;border:1px solid rgba(183,147,85,.32);border-radius:20px;background:radial-gradient(120% 90% at 50% 100%,rgba(122,90,48,.12),transparent 60%),var(--panel);box-shadow:0 60px 120px -60px rgba(0,0,0,.95),inset 0 1px 0 rgba(231,196,133,.06);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto;min-height:420px}
.plate[data-fig]::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 50% 45% at 50% 55%,var(--accent-dim),transparent 72%);opacity:0;transition:opacity 1.2s var(--k-ease)}
.plate[data-fig].warm::before{opacity:1}
.plate[data-fig] .plate-head,.plate[data-fig] .plate-foot{position:relative;inset:auto;display:flex;justify-content:space-between;gap:16px;padding:16px 22px 0;font:700 11px/1.4 "Helvetica Neue",Helvetica,Inter,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);position:relative;z-index:2}
.plate[data-fig] .plate-head b{color:var(--accent)}
.plate[data-fig] .plate-sim{color:#4c525b}
.plate[data-fig] .plate-foot{padding:0 22px 14px;letter-spacing:.12em;align-items:baseline}
.plate[data-fig] .plate-live{color:var(--ink-hi);text-transform:none;letter-spacing:.04em;font-weight:500;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.plate[data-fig] .iso,.plate .plate-gl{width:100%;height:100%;min-height:0;display:block;overflow:visible;position:relative;z-index:1}
.plate[data-fig] .plate-acts{display:flex;gap:8px;flex-wrap:wrap;padding:0 22px 18px;position:relative;z-index:2}
.plate[data-fig] .plate-acts:empty{display:none}
.plate-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(183,147,85,.4);border-radius:999px;color:var(--ink-hi);font:500 12.5px "Helvetica Neue",Helvetica,Inter,Arial,sans-serif;padding:7px 14px;cursor:pointer;transition:border-color .4s var(--k-ease),color .4s,background .4s}
.plate-btn:hover{border-color:var(--accent-hi);color:var(--accent-hi);background:rgba(183,147,85,.06)}
.plate-btn kbd{font:700 10px "Helvetica Neue",Helvetica,Inter,Arial,sans-serif;color:var(--ink);border:1px solid var(--detail);border-radius:4px;padding:1px 5px}

/* drawing vocabulary */
.iso *{vector-effect:non-scaling-stroke}
.iso .face{fill:var(--body);stroke:var(--line);stroke-width:1;stroke-linejoin:round;transition:fill 1s var(--k-ease),stroke 1s var(--k-ease)}
.iso .face.r{fill:var(--side)}
.iso .face.t{fill:var(--deck)}
.iso .face.recess{fill:var(--recess)}
.iso .detail{fill:none;stroke:var(--detail);stroke-width:1}
.iso .line{fill:none;stroke:var(--line);stroke-width:1}
.iso .grid line{stroke:#20252c;stroke-width:1}
.iso .ring{fill:none;stroke:#2b3037;stroke-width:1}
.iso .ring.on{stroke:var(--accent);opacity:.75}
.iso .dash{stroke-dasharray:3 4}
.iso .lead{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
/* nodes: the only things that glow */
.iso .node{fill:var(--recess);stroke:var(--line);stroke-width:1;transition:fill 1s var(--k-ease),stroke 1s var(--k-ease)}
.iso .node.on{fill:var(--glow-hot);stroke:var(--accent-hi)}
.iso .lit .face{fill:#2a2213;stroke:var(--accent)}
.iso .lit .face.t{fill:#3a2e18}
.iso .lit .face.r{fill:#221b0f}
.iso .win{fill:#14181e;stroke:#2c3138;stroke-width:.8;transition:fill .9s var(--k-ease),stroke .9s var(--k-ease)}
.iso .win.on{fill:var(--glow-hot);stroke:var(--accent-hi)}
.iso .halo{fill:var(--glow-hot);opacity:0;transition:opacity 1.2s var(--k-ease)}
.iso .halo.on{opacity:.17}
.iso .halo.hot{opacity:.3}
/* wires and the signals that travel them */
.iso .wire{fill:none;stroke:var(--line);stroke-width:1;transition:stroke 1s var(--k-ease)}
.iso .wire.hot{stroke:var(--accent)}
.iso .pulse{fill:none;stroke:var(--accent-hi);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:70 1200;stroke-dashoffset:70;opacity:0}
.iso .pulse.go{animation:iso-flow var(--dur,1800ms) linear}
@keyframes iso-flow{0%{stroke-dashoffset:70;opacity:1}90%{opacity:1}100%{stroke-dashoffset:-1000;opacity:0}}
.iso .bead{fill:var(--accent-hi)}
/* light cones and pools (attention landing somewhere) */
.iso .cone{opacity:0;transition:opacity 1.2s var(--k-ease)}
.iso .cone.on{opacity:1}
/* a person deciding: the brightest flat thing, never glowing */
.iso .person{fill:var(--person);stroke:none}
.iso .person-line{fill:none;stroke:var(--person);stroke-width:1.4;stroke-linecap:round}
/* labels drawn in the figure */
.iso .tag{font:700 calc(10px * var(--ts,1)) "Helvetica Neue",Helvetica,Inter,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink);transition:fill .8s var(--k-ease)}
.iso .tag.on{fill:var(--accent-hi)}
.iso .val{font:500 calc(11px * var(--ts,1)) "Helvetica Neue",Helvetica,Inter,Arial,sans-serif;fill:var(--ink-hi);font-variant-numeric:tabular-nums}
.iso .clickable{cursor:pointer}
.iso .clickable:hover .face{stroke:#6b6250}
.iso .breathe{animation:iso-breathe 4s ease-in-out infinite}
@keyframes iso-breathe{0%,100%{opacity:.7}50%{opacity:1}}
.iso .spin{transform-box:fill-box;transform-origin:center;animation:iso-spin 60s linear infinite}
@keyframes iso-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.iso .pulse.go{animation:none}.iso .breathe,.iso .spin{animation:none}.iso *{transition-duration:0s!important}}