/* Voltgrove — the substation. A wiring elevation: trunk at the left, leaves down the right. */
:root{
  --bg:#0B0A14; --panel:#12102A; --sunk:#0E0C1E; --edge:#241F45; --edge2:#332B5E;
  --ink:#EDEAF6; --dim:#918AB2; --faint:#5F5885;
  --volt:#7A5AFF; --hot:#CBBCFF; --dead:#241F45;
  --node-w:18%; --node-h:11%;
  --bed-h:404px;
  --wrap:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:400 15px/1.55 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}

/* ---------- shell ---------- */
.substation{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.nameplate{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,#14112C,#0D0B1B);
  position:sticky;top:0;z-index:30;
}
.sigilwrap{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.sigil{width:30px;height:30px;border-radius:9px;display:block;flex:none;box-shadow:0 0 0 1px var(--edge2),0 0 18px -6px var(--volt)}
.wordmark{font:700 16px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.16em;white-space:nowrap}
.plateright{margin-left:auto;display:flex;align-items:center;gap:8px}
.socket{
  font:600 12px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--edge2);border-radius:999px;color:var(--dim);white-space:nowrap;
}
.socket[data-on]{color:var(--hot);border-color:var(--volt);box-shadow:0 0 16px -6px var(--volt)}

.switchyard{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:14px}

/* ---------- headline ---------- */
.callout{font:700 clamp(23px,6.6vw,30px)/1.08 "Chakra Petch",system-ui,sans-serif;margin:2px 0 6px;letter-spacing:-.005em}
.subcall{margin:0 0 14px;color:var(--dim);font-size:14.5px;max-width:46ch}

/* ---------- the status bus ---------- */
.bus{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--edge);border:1px solid var(--edge);border-radius:12px;overflow:hidden;margin-bottom:12px;
}
.busk{background:var(--sunk);padding:9px 8px 10px;text-align:center;min-width:0}
.busk b{
  display:block;font:600 16px/1.1 "Chakra Petch",system-ui,sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.busk span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.busk[data-run] b{color:var(--hot)}

/* ---------- the feed ---------- */
.feedbed{
  position:relative;height:var(--bed-h);
  border:1px solid var(--edge);border-radius:14px;
  background:
    radial-gradient(120% 90% at 4% 50%, rgba(122,90,255,.13), transparent 62%),
    linear-gradient(180deg,#100E22,#0A0916);
  overflow:hidden;
}
.conduits{position:absolute;inset:0;width:100%;height:100%;display:block}
.conduit{fill:none;stroke:var(--dead);stroke-width:2;vector-effect:non-scaling-stroke}
.conduit.on{stroke:var(--volt);stroke-width:2.5;filter:drop-shadow(0 0 5px rgba(122,90,255,.75))}
.surge{fill:none;stroke:var(--hot);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:3 17;stroke-linecap:round;opacity:.95;animation:flow 1.15s linear infinite}
@keyframes flow{to{stroke-dashoffset:-40}}

.tapnode{
  position:absolute;transform:translate(-50%,-50%);
  width:var(--node-w);height:var(--node-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:1px solid var(--edge2);border-radius:9px;
  background:#15122C;color:var(--faint);
  padding:0 2px;line-height:1;
}
.tapnode[data-free]{border-style:dashed;border-color:#3A3168;color:var(--dim)}
.tapnode[data-dark]{background:#1A1330;border-color:#4A3350;color:#8A6E86}
.tapnode[data-dark] .tapmult{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.8}
.tapnode[data-lit]{
  background:linear-gradient(180deg,#3A2A86,#241A5C);border-color:var(--volt);color:#fff;
  box-shadow:0 0 22px -6px var(--volt), inset 0 1px 0 rgba(255,255,255,.14);
}
.tapnode[data-pick]{outline:2px solid var(--hot);outline-offset:2px}
.tapnode[data-mine]::after{
  content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--hot);
}
.tapmult{font:700 clamp(14px,4.4vw,19px)/1 "Chakra Petch",system-ui,sans-serif}
.tapid{font-size:9.5px;letter-spacing:.07em;opacity:.78;white-space:nowrap}
.tapcut{font:600 9.5px/1 "Chakra Petch",system-ui,sans-serif;color:var(--hot);white-space:nowrap}
@keyframes ignite{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.14)}100%{transform:translate(-50%,-50%) scale(1)}}
.tapnode[data-just]{animation:ignite .5s ease-out}

.bedmark{
  position:absolute;left:10px;bottom:8px;
  font:600 9.5px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.bedhush{
  position:absolute;left:10px;bottom:30px;max-width:56%;
  color:var(--dim);font-size:12.5px;line-height:1.42;pointer-events:none;
  background:rgba(9,8,20,.9);border:1px solid var(--edge);border-radius:9px;padding:8px 10px;
}

/* ---------- the lever ---------- */
.charge{margin-top:12px}
.lever{
  position:relative;width:100%;height:56px;border-radius:12px;overflow:hidden;
  border:1px solid var(--edge2);background:#16132F;display:block;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.lever[data-ready]{border-color:var(--volt);background:#1D1741;box-shadow:0 0 26px -10px var(--volt)}
.leverfill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#5B3FD6,#9C82FF)}
.levertext{
  position:relative;display:flex;align-items:center;justify-content:center;height:100%;
  font:700 13.5px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;
}
.lever:not([data-ready]) .levertext{color:var(--faint)}
.chargenote{margin-top:7px;font-size:12.5px;color:var(--dim);min-height:18px}
.chargenote b{color:var(--hot);font-weight:600}
.notice{margin-top:9px;font-size:13px;color:var(--hot);border-left:2px solid var(--volt);padding-left:9px}
.notice[data-bad]{color:#FF8299;border-color:#E23D63}

/* ---------- plates ---------- */
.plate{border:1px solid var(--edge);border-radius:13px;background:var(--panel);overflow:hidden;margin-top:14px}
.platetop{
  display:flex;align-items:baseline;gap:8px;padding:10px 13px;border-bottom:1px solid var(--edge);
  font:600 11px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
}
.platetop em{margin-left:auto;font-style:normal;color:var(--faint);letter-spacing:.06em;font-size:10.5px}
.platebody{padding:12px 13px}

.wirerule{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--edge);font-size:13.5px;color:var(--dim)}
.wirerule:last-child{border-bottom:0}
.wirerule i{
  flex:none;width:19px;height:19px;border-radius:6px;background:#241C52;color:var(--hot);
  font:700 10.5px/19px "Chakra Petch",system-ui,sans-serif;font-style:normal;text-align:center;
}
.wirerule b{color:var(--ink);font-weight:600}
.worked{margin-top:10px;padding:10px;border-radius:9px;background:var(--sunk);border:1px solid var(--edge);font-size:13px;color:var(--dim)}
.worked b{color:var(--hot);font-weight:600}

.tracerow{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--edge);font-size:12.5px}
.tracerow:last-child{border-bottom:0}
.tracewho{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--dim)}
.tracetap{font:700 11.5px/1 "Chakra Petch",system-ui,sans-serif;color:var(--hot);flex:none}
.traceflag{margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);flex:none}
.traceflag[data-on]{color:var(--hot)}
.hushline{color:var(--faint);font-size:12.5px}

.entry{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--edge);font-size:13px;text-decoration:none}
.entry:last-child{border-bottom:0}
.entryid{font:700 12px/1 "Chakra Petch",system-ui,sans-serif;color:var(--dim)}
.entrylit{color:var(--dim);font-size:12.5px}
.entrylit b{color:var(--ink);font-weight:600}
.entrypay{font:600 12.5px/1 "Chakra Petch",system-ui,sans-serif;color:var(--hot)}

.meterbank{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge)}
.meter{background:var(--panel);padding:10px 12px}
.meter b{display:block;font:600 17px/1.1 "Chakra Petch",system-ui,sans-serif}
.meter span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:2px}

/* ---------- prose pages ---------- */
.reading{max-width:62ch}
.reading h2{font:700 19px/1.2 "Chakra Petch",system-ui,sans-serif;margin:22px 0 7px}
.reading p{color:var(--dim);margin:0 0 11px}
.reading b{color:var(--ink)}
.backlink{display:inline-block;margin-bottom:6px;font:600 11px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);text-decoration:none}

/* ---------- footer ---------- */
.baseplate{border-top:1px solid var(--edge);padding:16px 14px 22px;margin-top:20px}
.baseinner{max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;gap:9px}
.caline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--dim);word-break:break-all}
.caline b{color:var(--faint);font-weight:400}
.baselinks{display:flex;flex-wrap:wrap;gap:8px}
.baselinks a{
  font:600 11px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--edge2);border-radius:999px;text-decoration:none;color:var(--dim);
}
.baselinks a[data-buy]{color:var(--bg);background:var(--hot);border-color:var(--hot)}
.basefine{font-size:11.5px;color:var(--faint)}

/* ---------- the switchboard (mobile chrome) ---------- */
.switchboard{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(12,10,26,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--edge);padding-bottom:env(safe-area-inset-bottom);
}
.sbtab{
  padding:11px 4px 12px;text-align:center;text-decoration:none;color:var(--faint);
  font:600 10.5px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.sbtab[data-here]{color:var(--hot);box-shadow:inset 0 2px 0 var(--volt)}

.leftbay,.rightbay{display:none}
.baydesk,.baymob{display:block}

/* ---------- ~720px: same column, more room ---------- */
@media (min-width:640px){
  :root{--bed-h:470px;--node-w:16%;--node-h:10.5%}
  .switchyard{padding:20px 22px}
  .callout{font-size:34px}
  .subcall{font-size:15.5px}
  .busk b{font-size:19px}
}

/* ---------- ≥1000px: the page recomposes into a switchyard ---------- */
@media (min-width:1000px){
  :root{--bed-h:560px;--node-w:15%;--node-h:10%}
  .substation{padding-bottom:0}
  .switchboard{display:none}
  .switchyard{
    display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:20px;align-items:start;
    padding:26px 24px 8px;
  }
  .leftbay,.rightbay{display:block}
  .leftbay .plate:first-child,.rightbay .plate:first-child{margin-top:0}
  .mainbay{min-width:0}
  .callout{font-size:38px;margin-top:0}
  .subcall{font-size:16px}
  .baymob{display:none}
  .lever{height:62px}
  .levertext{font-size:15px}
  .busk b{font-size:21px}
  .tapid{font-size:11px}
  .tapcut{font-size:11px}
  .wordmark{font-size:18px}
  .nameplate{padding:13px 24px}
  .reading h2{font-size:22px}
}
@media (min-width:1240px){
  :root{--bed-h:600px}
}