:root{
  /* MIDNIGHT — lights off, signals on. The default skin; the others below
     override this whole set under html[data-theme] */
  --bg:#04050A; --panel:#0A0D15; --panel2:#070910; --border:#181E2C;
  --border-hi:#293347; --ink:#D9E1F2; --muted:#707E98;
  --acc:#36E2A8; --dca:#A6DB4F; --hold:#F2B04A; --dist:#FF5A5A; --blue:#6FA8FF;
  /* derived shades — every skin overrides the whole set */
  --grad1:#0A1020; --grad2:#060B16;           /* body wash */
  --slab-hi:#131A2A; --slab-lo:#0C1220;       /* conveyor / 3D slabs */
  --space-hi:#0A1122; --space-lo:#03060D;     /* globe · 3D · screensaver */
  --globe-a:#0C1526; --globe-b:#070D1A; --globe-c:#030711; /* sphere shading */
  --code:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mono:var(--code);        /* UI face — a skin may point this at --sans */
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 500px at 75% -12%, var(--grad1) 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, var(--grad2) 0%, transparent 55%),
    var(--bg);
  color:var(--ink);font-family:var(--mono);
  -webkit-font-smoothing:antialiased}

.app{display:flex;flex-direction:column;gap:12px;height:100%;
  max-width:1720px;margin:0 auto;padding:16px 18px 12px}

/* ---------- chrome ---------- */
header{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.brand{font:600 13px var(--mono);letter-spacing:.22em;color:var(--ink);
  display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand .mark{color:var(--hold);font-size:15px;text-shadow:0 0 14px color-mix(in srgb,var(--hold) 55%,transparent)}
.brand .sub{color:var(--muted);font-weight:400;letter-spacing:.18em;font-size:11px}
.hdr-right{display:flex;align-items:center;gap:12px}
#asof{font:11px var(--mono);color:var(--muted);letter-spacing:.08em}
/* live visitor chip: a breathing dot + tab count in the #asof voice. .stale
   (three beats failed) greys the dot and keeps the last number; it hangs
   off the id so it outranks every skin's dot restyle further down */
.presence{display:inline-flex;align-items:center;gap:6px;font:11px var(--mono);
  color:var(--muted);letter-spacing:.08em;white-space:nowrap}
.presence b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.presence .pdot{width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 8px color-mix(in srgb,var(--acc) 80%,transparent);
  animation:pulse2 2s ease-in-out infinite}
#presence.stale .pdot{background:var(--muted);box-shadow:none;animation:none}
footer{font:10px var(--mono);color:var(--muted);padding:0 4px;letter-spacing:.05em}
.foot-brand{color:var(--muted);text-decoration:none;letter-spacing:.12em}
.foot-brand:hover{color:var(--ink)}

.iconbtn{background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:6px 8px;cursor:pointer;line-height:0;
  transition:color .15s,border-color .15s}
.iconbtn:hover{color:var(--ink);border-color:var(--border-hi)}
/* the motion switch. Its three states are auto / reduce / full, and the
   glyph carries both halves of that: the speed lines behind the dot fade
   out whenever motion is actually reduced, whatever put it there, and a
   pip in the corner marks an explicit override so "auto" — the default,
   and the state that quietly follows the machine — is the unmarked one. */
.motionbtn{position:relative}
/* the trail snaps rather than fades: a control whose whole job is to stop
   animation has no business animating itself, and a transition here also
   left the glyph mid-fade for most of a second on the way back to full */
html[data-motion="reduce"] .motionbtn .mo-trail{opacity:.25}
.motionbtn[data-mode="reduce"]::after,.motionbtn[data-mode="full"]::after{
  content:"";position:absolute;top:3px;right:3px;width:3px;height:3px;
  border-radius:50%;background:currentColor}
.iconbtn[aria-pressed="true"]{color:var(--acc);border-color:var(--acc);
  box-shadow:0 0 10px color-mix(in srgb,var(--acc) 25%,transparent)}
input:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}

.banner{background:color-mix(in srgb,var(--hold) 20%,var(--bg));
  border:1px solid color-mix(in srgb,var(--hold) 34%,var(--bg));color:var(--hold);
  font:600 12px var(--mono);padding:9px 14px;border-radius:8px}

/* ---------- layout ---------- */
main{flex:1;display:grid;grid-template-columns:340px minmax(0,1fr) 350px;
  gap:12px;min-height:0}
.col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.col::-webkit-scrollbar{width:5px}
.col::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.col::-webkit-scrollbar-track{background:transparent}
.card.grow{flex:1;min-height:0;display:flex;flex-direction:column}

.card{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:0 12px 32px rgba(0,0,0,.35);
  transition:border-color .2s}
.card:hover{border-color:var(--border-hi)}
.cardtitle{font:600 10px var(--mono);letter-spacing:.18em;color:var(--muted);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;gap:2px;margin-left:4px}
.segbtn{background:transparent;border:1px solid var(--border);color:var(--muted);
  font:600 9px var(--mono);letter-spacing:.06em;padding:3px 7px;border-radius:6px;
  cursor:pointer;transition:color .15s,border-color .15s}
.segbtn:hover{color:var(--ink)}
.segbtn.on{color:var(--ink);border-color:var(--border-hi);
  background:color-mix(in srgb,var(--muted) 8%,transparent)}
.cardtitle::before{content:"";width:14px;height:2px;border-radius:1px;flex:none;
  background:linear-gradient(90deg,var(--hold),transparent)}
.lab{font:700 8px var(--mono);letter-spacing:.14em;color:var(--blue);
  border:1px solid var(--blue);border-radius:4px;padding:1px 5px;opacity:.75}
.cardtitle .tlink{margin-left:auto}
.tlink{font:10px var(--mono);color:var(--muted);text-decoration:none;
  letter-spacing:.08em;font-weight:400;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:60%}
a.tlink:hover{color:var(--ink)}
.cardtitle .iconbtn{margin-left:6px;padding:4px 6px}

/* ---------- hero ---------- */
.hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-start;row-gap:10px}
#riskBig{font:700 62px/1 var(--mono);letter-spacing:-.03em;
  text-shadow:0 0 32px color-mix(in srgb,var(--ink) 14%,transparent)}
#price{font:500 14px var(--mono);color:var(--muted);margin-top:8px;
  display:flex;align-items:center;gap:7px}
.hero-btns{display:flex;align-items:center;gap:8px;margin-left:auto}
.pill{display:inline-block;border:1px solid var(--zone,var(--muted));
  color:var(--zone,var(--muted));border-radius:999px;padding:6px 13px;
  font:600 11px var(--mono);letter-spacing:.12em;white-space:nowrap;
  background:color-mix(in srgb,var(--zone,transparent) 13%,transparent)}
.livedot{width:6px;height:6px;border-radius:50%;background:var(--acc);
  display:inline-block;animation:pulse2 2s ease-in-out infinite}
.railwrap{margin-top:26px}
.rail{position:relative;height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--acc),var(--dca) 35%,var(--hold) 60%,var(--dist) 85%);
  box-shadow:0 0 18px color-mix(in srgb,var(--acc) 12%,transparent)}
.rail-sm{height:8px}
.marker{position:absolute;top:-10px;left:0;width:0;height:0;
  transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--ink);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ink) 60%,transparent));
  transition:left 1s cubic-bezier(.22,1,.36,1)}
.tick{position:absolute;top:0;width:2px;height:10px;background:var(--bg);
  transform:translateX(-50%)}
.zonestrip{display:flex;margin-top:6px}
.zonestrip span{font:9px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  overflow:hidden;white-space:nowrap;opacity:.8}
#orderLine{font:700 24px var(--mono);margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border)}
#orderSub{font:11px var(--mono);color:var(--muted);margin-top:5px;line-height:1.5}
.skel #riskBig,.skel #price,.skel #orderLine{color:var(--border);
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@keyframes pulse2{50%{opacity:.35}}

/* ---------- 15-min call ---------- */
.call-ask{display:flex;align-items:center;gap:8px}
.call-lab{font:10px var(--mono);color:var(--muted);letter-spacing:.05em;
  white-space:nowrap}
.call-ask input{width:104px;padding:6px 8px;font-size:13px}
.call-verdict{display:flex;align-items:baseline;gap:10px;margin-top:13px}
.call-verdict b{font:700 30px/1 var(--mono);letter-spacing:-.02em}
#callProb{font:700 20px var(--mono);font-variant-numeric:tabular-nums}
.call-word{font:600 9px var(--mono);color:var(--muted);letter-spacing:.14em;
  text-transform:uppercase}
.callbar{height:8px;border-radius:4px;overflow:hidden;position:relative;
  background:color-mix(in srgb,var(--dist) 24%,var(--bg));margin-top:11px}
.callbar i{display:block;height:100%;width:50%;border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 74%,var(--bg)),var(--acc));transition:width .4s ease}
.callbar::after{content:"";position:absolute;left:50%;top:0;width:2px;
  height:100%;background:var(--bg)}
.call-sub{font:10px var(--mono);color:var(--muted);margin-top:8px;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.call-actions{display:flex;align-items:center;gap:6px;margin-top:11px}
.call-actions .segbtn:disabled{opacity:.4;cursor:default}
.call-actions .segbtn:disabled:hover{color:var(--muted)}
.call-score{font:10px var(--mono);color:var(--muted);margin-left:auto;
  font-variant-numeric:tabular-nums;white-space:nowrap}
#callLog{list-style:none;margin-top:8px;font:10px var(--mono)}
#callLog li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;
  padding:3.5px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent);
  font-variant-numeric:tabular-nums;color:var(--muted)}
#callLog li:last-child{border-bottom:0}

/* ---------- fear & greed ---------- */
.fng-row{display:flex;gap:20px;align-items:center}
#fngVal{font:700 38px/1 var(--mono);letter-spacing:-.02em}
#fngLabel{font:600 10px var(--mono);color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;margin-top:6px;white-space:nowrap}
.fng-meter{flex:1}
.fng-ends{display:flex;justify-content:space-between;font:9px var(--mono);
  color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* ---------- halving ---------- */
#hvCount{font:700 27px/1.1 var(--mono);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.hv-sub{font:11px var(--mono);color:var(--muted);margin:7px 0 12px}
.hv-track{height:5px}
.hv-track i{background:linear-gradient(90deg,var(--hold),var(--dist));width:0}
.hv-row{display:flex;justify-content:space-between;font:10px var(--mono);
  color:var(--muted);margin-top:9px;letter-spacing:.05em}
.hv-row b{color:var(--ink);font-weight:600}

/* ---------- ticker ---------- */
.ticker{background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);border-radius:9px;
  overflow:hidden;position:relative;height:32px;flex:none}
.tickertrack{display:inline-flex;align-items:center;height:32px;
  white-space:nowrap;will-change:transform;
  animation:marquee var(--dur,60s) linear infinite}
.ticker:hover .tickertrack,.ticker:focus .tickertrack,
.ticker:focus-within .tickertrack{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.titem{font:11px var(--mono);color:var(--ink);text-decoration:none;
  padding:0 16px;display:inline-flex;align-items:baseline;gap:8px}
.titem:hover{text-decoration:underline}
.titem .src{color:var(--hold);font-size:9px;letter-spacing:.08em}
.titem .age{color:var(--muted);font-size:9px}

/* ---------- chart ---------- */
.cwrap{position:relative;flex:1;min-height:200px}
#cv{width:100%;height:100%;display:block;touch-action:pan-y;position:absolute;inset:0}
.tip{position:absolute;background:var(--panel);border:1px solid var(--border-hi);
  border-radius:6px;padding:6px 9px;font:11px var(--mono);color:var(--ink);
  pointer-events:none;white-space:nowrap;z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* ---------- globe ---------- */
.gwrap{position:relative;height:min(300px,30vh)}
#globe{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#globe:active{cursor:grabbing}

.gcaption{font:10px var(--mono);color:var(--muted);letter-spacing:.06em;
  margin-top:10px;text-align:center}
.ss-caption{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font:10px var(--mono);color:var(--muted);letter-spacing:.22em;opacity:.75;
  white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis}

/* ---------- block conveyor ---------- */
#conv{width:100%;height:148px;display:block}
#convCard{flex:none}

/* ---------- book depth: coins until price ---------- */
.dwrap{position:relative;height:148px}
#depth{width:100%;height:100%;display:block;cursor:crosshair}
.dmiles{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;margin-top:10px;
  min-height:48px}
.dmrow{display:flex;justify-content:space-between;gap:8px;
  font:10px var(--mono);color:var(--muted);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;min-height:14px}
.dmrow b{color:var(--ink);font-weight:600;white-space:nowrap}
.dmrow .qb{color:var(--acc);white-space:nowrap}
.dmrow .qa{color:var(--dist);white-space:nowrap}
#depthCard .gcaption{margin-top:9px}
#depthCard .seg{margin-left:2px}

/* ---------- components / breakdown ---------- */
.explain{font:11px var(--sans);color:var(--muted);margin-bottom:14px;line-height:1.55}
.formula{font:10px var(--mono);color:var(--muted);letter-spacing:.01em;font-weight:400}
.comp{margin-bottom:13px}
.comp:last-of-type{margin-bottom:0}
.comp-head{display:flex;justify-content:space-between;align-items:flex-end;
  font:10px var(--mono);color:var(--muted);letter-spacing:.08em;margin-bottom:6px;gap:8px}
.comp-head b{font:600 13px var(--mono);color:var(--ink)}
.comp-head .raw{color:var(--ink);font-weight:600}
.track{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:3px;transition:width .6s ease}
.risksum{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--border);margin-top:14px;padding-top:12px;
  font:11px var(--mono);color:var(--muted)}
.risksum b{font:700 19px var(--mono)}

/* ---------- tape ---------- */
.tape-head{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:10px;flex:none}
#tapePrice{font:700 26px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.wsdot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--muted);margin-right:2px;flex:none}
.wsdot.live{background:var(--acc);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 80%,transparent);
  animation:pulse2 2s ease-in-out infinite}
#wsStatus{font:9px var(--mono);color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase}
.fabwrap{position:relative;height:288px;flex:none;border-radius:6px;
  overflow:hidden;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.fabwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.press{display:flex;align-items:center;gap:10px;margin-top:10px;flex:none}
.pb{font:600 10px var(--mono);color:var(--acc);white-space:nowrap}
.ps{font:600 10px var(--mono);color:var(--dist);white-space:nowrap}
.pressbar{flex:1;height:8px;border-radius:4px;position:relative;
  overflow:hidden;background:color-mix(in srgb,var(--dist) 24%,var(--bg))}
.pressbar i{display:block;height:100%;width:50%;border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 74%,var(--bg)),var(--acc));transition:width .6s ease}
.pressbar::after{content:"";position:absolute;left:50%;top:0;width:2px;
  height:100%;background:var(--bg)}
html[data-motion="reduce"] .pressbar i{transition:none}
.exchips{display:flex;gap:4px;margin-top:9px;flex-wrap:wrap;flex:none}
.exchip{display:inline-flex;align-items:center;gap:4px;background:transparent;
  border:1px solid var(--border);border-radius:6px;color:var(--muted);
  font:600 9px var(--mono);letter-spacing:.04em;padding:3px 6px;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:color .15s,border-color .15s,opacity .15s}
.exchip:hover{color:var(--ink);border-color:var(--border-hi)}
.exchip .dot{width:5px;height:5px;border-radius:50%;background:var(--hold);
  flex:none;transition:background .3s;box-sizing:border-box}
.exchip.conn .dot{background:transparent;border:1px solid var(--hold)}
.exchip.live .dot{background:var(--acc);box-shadow:0 0 6px color-mix(in srgb,var(--acc) 70%,transparent)}
.exchip .sh{color:var(--ink);font-weight:700;white-space:pre}
.exchip.off{opacity:.35}
.exchip.off .dot{background:var(--muted);box-shadow:none}
.fabstats{font:9px var(--mono);color:var(--muted);letter-spacing:.08em;
  margin:8px 0 10px;flex:none}
@media (max-width:1180px){.fabwrap{height:240px}}
#tape{list-style:none;font:11px var(--mono);overflow:hidden;flex:1;min-height:0;
  mask-image:linear-gradient(180deg,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent)}
#tape li{display:grid;grid-template-columns:1fr 1.2fr 1fr auto auto;gap:8px;
  padding:3.5px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent);
  font-variant-numeric:tabular-nums}
#tape li:last-child{border-bottom:0}
#tape .t{color:var(--muted)}
#tape .sz{text-align:right;color:var(--muted)}
#tape .ex{color:var(--muted);font-size:9px;align-self:center;
  letter-spacing:.08em}
#tape .side{text-align:right;font-weight:600;width:40px}
#tape li.new{animation:flash .5s ease-out}
@keyframes flash{from{background:color-mix(in srgb,var(--muted) 14%,transparent)}to{background:transparent}}

/* ---------- settings dialog ---------- */
dialog{margin:auto;background:linear-gradient(180deg,var(--panel),var(--panel2));
  color:var(--ink);border:1px solid var(--border-hi);border-radius:var(--radius);
  padding:22px 24px;width:min(560px,92vw);max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(4,8,16,.7);backdrop-filter:blur(3px)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px}
.dlg-head .cardtitle{margin-bottom:0}
.dlg-head .iconbtn{font:600 12px var(--mono);line-height:1}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:12px}
@media (max-width:460px){.grid{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:5px;font:10px var(--mono);
  color:var(--muted);letter-spacing:.05em}
input{background:var(--bg);border:1px solid var(--border);border-radius:8px;
  color:var(--ink);font:600 13px var(--mono);padding:8px 10px;width:100%;
  appearance:none;-webkit-appearance:none}
input:hover{border-color:var(--border-hi)}
.sz-title{margin-top:20px}
#sz{width:100%;height:190px;display:block}
.szlegend{display:flex;gap:16px;margin-top:10px;font:10px var(--mono);
  color:var(--muted);flex-wrap:wrap}
.szlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:6px;vertical-align:-1px}
.note{font:11px var(--sans);color:var(--muted);margin-top:12px;line-height:1.5}

/* ---------- share this setup (share.js) ---------- */
#setupDlg{width:min(520px,92vw)}
.setup-opts{display:grid;gap:8px;margin-top:12px}
.setup-chk{flex-direction:row;align-items:center;gap:8px;cursor:pointer;
  font-size:11px;letter-spacing:.03em}
.setup-chk:hover{color:var(--ink)}
.setup-chk input{appearance:auto;-webkit-appearance:auto;width:auto;margin:0;
  padding:0;border:0;accent-color:var(--acc)}
.setup-warn{margin-top:0;color:var(--hold)}
.setup-row{display:flex;align-items:center;gap:6px;margin-top:10px}
.setup-row input{flex:1;min-width:0;font-weight:400;font-size:11px;
  text-overflow:ellipsis}
.setup-lab{flex:none;width:52px;font:600 9px var(--mono);letter-spacing:.14em;
  color:var(--muted)}
.setup-carry{display:flex;align-items:flex-start;gap:6px;margin-top:12px}
.setup-carry .setup-lab{padding-top:4px}
.setup-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:5px;flex:1}
.setup-list li{font:600 9px var(--mono);letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:3px 7px}
.setup-list li.priv{color:var(--hold);
  border-color:color-mix(in srgb,var(--hold) 55%,transparent)}
.setup-status{flex:none;font:10px var(--mono);color:var(--muted);
  padding-top:4px;white-space:nowrap}
.setup-paste{margin-top:12px}
.setup-err{color:var(--dist)}
.setup-go{color:var(--acc);border-color:var(--acc)}
.setup-danger{color:var(--dist);
  border-color:color-mix(in srgb,var(--dist) 55%,transparent)}
.setup-foot{display:flex;align-items:center;gap:10px;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--border)}
.setup-foot .note{margin-top:0}
#setupList{margin-top:8px}

/* ---------- send sats ---------- */
.satsbtn{background:transparent;border:1px solid color-mix(in srgb,var(--hold) 50%,transparent);
  color:var(--hold);border-radius:999px;padding:6px 13px;cursor:pointer;
  font:600 10px var(--mono);letter-spacing:.14em;white-space:nowrap;
  animation:satsglow 4s ease-in-out infinite;
  transition:color .15s,border-color .15s,box-shadow .15s}
.satsbtn:hover{color:color-mix(in srgb,var(--hold) 70%,#fff);border-color:var(--hold);
  box-shadow:0 0 16px color-mix(in srgb,var(--hold) 45%,transparent);animation:none}
@keyframes satsglow{
  0%,100%{box-shadow:0 0 0 color-mix(in srgb,var(--hold) 0%,transparent)}
  50%{box-shadow:0 0 12px color-mix(in srgb,var(--hold) 35%,transparent)}}
html[data-motion="reduce"] .satsbtn{animation:none}
.satslink{background:none;border:none;cursor:pointer;padding:0;
  font:10px var(--mono);color:var(--hold);letter-spacing:.05em;opacity:.8}
.satslink:hover{opacity:1;text-decoration:underline}
#donate{width:min(420px,92vw)}
#donate .cardtitle .mark{color:var(--hold);
  text-shadow:0 0 14px color-mix(in srgb,var(--hold) 55%,transparent)}
.don-pitch{font:12px var(--sans);color:var(--muted);line-height:1.6;
  margin-top:10px}
.don-tabs{display:flex;gap:8px;margin-top:14px}
.don-tab{flex:1;background:transparent;border:1px solid var(--border);
  color:var(--muted);border-radius:8px;padding:8px 0;cursor:pointer;
  font:600 10px var(--mono);letter-spacing:.12em;
  transition:color .15s,border-color .15s,background .15s}
.don-tab:hover{color:var(--ink);border-color:var(--border-hi)}
.don-tab.active{color:var(--hold);border-color:color-mix(in srgb,var(--hold) 55%,transparent);
  background:color-mix(in srgb,var(--hold) 7%,transparent)}
.don-link{color:var(--hold);text-decoration:none}
.don-link:hover{text-decoration:underline}
.don-qr{display:flex;flex-direction:column;align-items:center;gap:9px;
  margin-top:16px}
.don-qr a{display:block;line-height:0;border-radius:14px;
  transition:box-shadow .15s}
.don-qr a:hover{box-shadow:0 0 24px color-mix(in srgb,var(--hold) 35%,transparent)}
.don-qr img{background:#fff;border-radius:14px;padding:10px;
  width:228px;max-width:70vw;height:auto}
.don-scan{font:9px var(--mono);color:var(--muted);letter-spacing:.1em}
.don-addr{display:block;width:100%;margin-top:14px;cursor:pointer;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;text-align:center;
  transition:border-color .15s}
.don-addr:hover{border-color:var(--border-hi)}
.don-addr code{font:600 11px var(--mono);color:var(--ink);
  word-break:break-all;letter-spacing:.02em}
.don-copylab{display:block;margin-top:6px;font:9px var(--mono);
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.don-addr.copied{border-color:var(--acc)}
.don-addr.copied .don-copylab{color:var(--acc)}
.don-foot{font:10px var(--mono);color:var(--muted);margin-top:12px;
  text-align:center;letter-spacing:.03em}

/* ---------- 3D block cutaway ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none;
  align-items:stretch}
#blkCard{display:flex;flex-direction:column;min-width:0}
.blkwrap{position:relative;flex:1;min-height:min(300px,30vh);overflow:hidden;
  border-radius:10px;background:
  radial-gradient(75% 85% at 50% 42%, var(--space-hi) 0%, var(--space-lo) 100%)}
.blkwrap.full{position:fixed;inset:0;z-index:55;border-radius:0;
  min-height:0;background:
  radial-gradient(1200px 800px at 50% 42%, var(--space-hi) 0%, var(--space-lo) 72%)}
/* HUD, callouts and close live only in the expanded view — inline stays clean */
.blkwrap:not(.full) .blk-hud,
.blkwrap:not(.full) .blk-close,
.blkwrap:not(.full) .blk-hint{display:none}
#blkCv{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:none}
#blkCv:active{cursor:grabbing}
.blk-hud{position:absolute;font-family:var(--mono);pointer-events:none}
.blk-tl{top:26px;left:32px;display:flex;flex-direction:column;gap:7px}
.blk-title{font:600 10px var(--mono);letter-spacing:.22em;color:var(--blue)}
#blkHeight{font:700 30px/1 var(--mono);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.blk-meta{font:11px var(--mono);color:var(--muted);letter-spacing:.04em}
.blk-hash{font:9px var(--mono);color:var(--acc);letter-spacing:.02em;
  word-break:break-all;max-width:min(560px,80vw)}
.blk-close{position:absolute;top:22px;right:26px;z-index:5;
  font:600 12px var(--mono);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.blk-bl{bottom:36px;left:32px;display:flex;flex-direction:column;gap:6px;
  max-width:min(460px,72vw)}
.blk-bl b{font:700 12px var(--mono);letter-spacing:.1em;color:var(--hold)}
.blk-bl span{font:11px var(--mono);color:var(--muted);line-height:1.6}
.blk-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font:9px var(--mono);color:var(--muted);letter-spacing:.22em;opacity:.6;
  white-space:nowrap}
@media (max-width:640px){
  .blk-tl{top:16px;left:16px}
  #blkHeight{font-size:22px}
  .blk-bl{left:16px;bottom:44px}
}

/* ---------- orbital siege ---------- */
/* battle.js rides the cutaway's stage classes: .blkwrap for the ground and
   the .full takeover, .blk-hud / .blk-close / .blk-hint for the chrome that
   only exists expanded. Its own rules pin the card height and lay out the
   siege HUD (price + front line top-left, the walls top-right, the
   liquidation feed bottom-left). */
#battleCard{display:flex;flex-direction:column;min-width:0}
.btlwrap{height:clamp(240px,34vh,340px);flex:none;min-height:0}
.btlwrap.full{height:auto}
#btlCv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.btlwrap.full #btlCv{cursor:grab}
.btlwrap.full #btlCv:active{cursor:grabbing}
.btl-tl{top:26px;left:32px;display:flex;flex-direction:column;gap:7px}
#btlPrice{font:700 30px/1 var(--mono);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.btl-press{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.btl-press b{font:700 12px var(--mono);letter-spacing:.1em;color:var(--ink)}
.btl-pressbar{width:220px;height:5px;border-radius:3px;overflow:hidden;
  background:color-mix(in srgb,var(--dist) 28%,transparent)}
.btl-pressbar i{display:block;height:100%;width:50%;
  background:color-mix(in srgb,var(--acc) 85%,transparent);transition:width .6s ease}
.btl-press span{font:10px var(--mono);color:var(--muted);letter-spacing:.06em}
/* THE PRESSURE GRID: 32 x 6 cells, one per print, drawn by battle.js.
   192 CSS px wide so a 12 px cell lands on 6 device px at DPR 1 — no
   resampling, no blur between the cells. */
.btl-pgrid{display:block;width:192px;height:36px;margin-top:3px;border-radius:3px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--panel) 70%,transparent)}
.btl-glab{font:9px var(--mono);color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase}
.btl-glab b{color:var(--ink);font-weight:600}
.btl-glab i{font-style:normal}
.btl-glab i.b{color:var(--acc)}
.btl-glab i.s{color:var(--dist)}
.btl-tr{top:26px;right:72px;display:flex;flex-direction:column;gap:12px;
  text-align:right;align-items:flex-end}
.btl-wall{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.btl-lab{font:600 9px var(--mono);letter-spacing:.2em;color:var(--muted)}
.btl-wall b{font:700 18px/1 var(--mono);font-variant-numeric:tabular-nums}
.btl-wall.buy b{color:var(--acc)}
.btl-wall.sell b{color:var(--dist)}
.btl-wall span:last-child{font:10px var(--mono);color:var(--muted)}
/* every HUD block has to survive a star with a nuke going off behind it.
   The text takes a --bg shadow; the two dense readouts — the feed and the
   pressure grid — take the .ss-panel treatment as well (a --bg mix plus a
   backdrop blur), faded out on the inboard edge so it reads as a wash and
   not as a second panel bolted onto the scene. */
.btl-tl,.btl-tr,.btl-bl{text-shadow:0 1px 3px var(--bg),0 0 9px var(--bg)}
.btl-tl .btl-press,.btl-bl{padding:9px 12px 10px;border-radius:12px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btl-tl .btl-press{margin-left:-12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 78%,transparent) 0%,
    color-mix(in srgb,var(--bg) 66%,transparent) 58%,
    color-mix(in srgb,var(--bg) 30%,transparent) 88%,transparent 100%)}
.btl-bl{bottom:36px;left:32px;display:flex;flex-direction:column;gap:6px;
  width:352px;max-width:72vw;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 78%,transparent) 0%,
    color-mix(in srgb,var(--bg) 66%,transparent) 58%,
    color-mix(in srgb,var(--bg) 30%,transparent) 88%,transparent 100%)}
.btl-bl>b{font:700 12px var(--mono);letter-spacing:.1em;color:var(--hold)}

/* ---- THE CASUALTY FEED ----
   Eight pooled rows on a five-rung decade ladder. Magnitude reads on
   SHAPE and SIZE and FILL as well as colour, so the ladder still says
   which kill was bigger on a skin with no chroma at all. --kf-dim is what
   buys the secondary columns their contrast: plain --muted on a star is
   unreadable, so they get muted pulled most of the way to --ink. */
.btl-kf{--kf-glow:drop-shadow(0 0 6px currentColor);
  --kf-dim:color-mix(in srgb,var(--muted) 72%,var(--ink))}
/* the five symbols live in one inert <svg> the feed prepends: taken out of
   flow rather than display:none, which some engines refuse to <use> from */
.btl-kf>svg:first-child{position:absolute;width:0;height:0;overflow:hidden}
.btl-kf-head{display:flex;flex-direction:column;gap:2px;margin-bottom:3px}
.btl-kf-head b.streak.long{color:var(--dist)}
.btl-kf-head b.streak.short{color:var(--acc)}
.btl-kf-head b.quiet{color:var(--muted)}
.btl-kf-sub{font:10px var(--mono);color:var(--kf-dim);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.btl-liqs{list-style:none;display:flex;flex-direction:column;gap:0}
.btl-kf-list li{display:grid;
  grid-template-columns:3px 22px auto auto 1fr auto;column-gap:8px;
  align-items:center;height:17px;
  font:11px var(--mono);letter-spacing:.03em;font-variant-numeric:tabular-nums;
  white-space:nowrap;opacity:calc(var(--kf-rank,1) * var(--kf-age,1))}
/* the rank ladder: the newest row is the loudest, the eighth is a rumour */
.btl-kf-list li:nth-child(1){--kf-rank:1}
.btl-kf-list li:nth-child(2){--kf-rank:.92}
.btl-kf-list li:nth-child(3){--kf-rank:.82}
.btl-kf-list li:nth-child(4){--kf-rank:.7}
.btl-kf-list li:nth-child(5){--kf-rank:.58}
.btl-kf-list li:nth-child(6){--kf-rank:.46}
.btl-kf-list li:nth-child(7){--kf-rank:.34}
.btl-kf-list li:nth-child(8){--kf-rank:.24}
.btl-kf-list li.old{--kf-age:.4}
.btl-kf-list.stale li{--kf-age:.5}
.btl-kf-list li.long{color:var(--dist)}
.btl-kf-list li.short{color:var(--acc)}
.kf-rail{width:3px;height:13px;background:currentColor;border-radius:1px;
  filter:var(--kf-glow)}
.btl-kf-list li.hot .kf-rail{box-shadow:0 0 10px currentColor}
.kf-ic{width:22px;height:22px;justify-self:center;color:currentColor;
  filter:var(--kf-glow)}
.kf-ic svg{display:block;margin:auto}
.kf-who{color:var(--kf-dim);letter-spacing:.06em}
.kf-who b{color:currentColor;font-weight:600}
.kf-x{color:var(--ink);font-weight:700;margin-left:4px}
.kf-n{color:var(--ink);font-weight:700}
.kf-px{color:var(--kf-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;
  text-align:right}
.kf-age{font-size:9px;color:var(--kf-dim);text-align:right}
.btl-kf-list li.kf-in{animation:btlkfin .18s cubic-bezier(.2,.8,.3,1)}
@keyframes btlkfin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.kf-ic.punch{animation:btlkfpunch .22s cubic-bezier(.2,.8,.3,1)}
@keyframes btlkfpunch{from{transform:scale(1.35)}to{transform:scale(1)}}
.btl-kf-head b.swap{animation:btlkfswap .3s ease-out}
@keyframes btlkfswap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.btl-kf-legend{display:flex;gap:10px;margin-top:7px;opacity:.55}
.btl-kf-legend div{text-align:center;color:var(--kf-dim)}
.btl-kf-legend span{display:block;font:9px var(--mono);letter-spacing:.12em;
  margin-top:1px}
/* the top two rungs may never light in a quiet week: the legend says so
   rather than implying a menu of common outcomes */
.btl-kf-legend .rare{opacity:.6}
.btl-kf-legend .rare span{border-bottom:1px dotted currentColor}
.btl-liqs .btl-empty{display:block;height:auto;opacity:.7;
  font:11px var(--mono);color:var(--muted);letter-spacing:.03em;
  white-space:normal}
html[data-motion="reduce"] .btl-kf-list li,
html[data-motion="reduce"] .kf-ic,
html[data-motion="reduce"] .btl-kf-head b{animation:none}
/* THE CARD EXCEPTION. Everything else in .blk-hud is expanded-only, but
   the card is where most people ever see this panel, so it keeps one dim
   row and the streak line — enough that a cascade announces itself
   without turning the card into a list. */
.btlwrap:not(.full) .btl-bl{display:flex;bottom:8px;left:8px;
  width:250px;max-width:calc(100% - 16px);padding:6px 8px;border-radius:10px;
  gap:3px;opacity:.92}
.btlwrap:not(.full) .btl-kf-head{margin-bottom:2px}
.btlwrap:not(.full) .btl-bl>b{font-size:10px}
.btlwrap:not(.full) .btl-kf-legend{display:none}
.btlwrap:not(.full) .btl-kf-list li{grid-template-columns:2px 18px auto 1fr;
  height:14px;font-size:10px}
.btlwrap:not(.full) .btl-kf-list li:nth-child(n+2){display:none}
/* ...except the resting line, which IS the card's one row when the stream
   has nothing to say yet */
.btlwrap:not(.full) .btl-liqs .btl-empty{display:block;font-size:10px}
.btlwrap:not(.full) .kf-px,
.btlwrap:not(.full) .kf-age,
.btlwrap:not(.full) .kf-who .who{display:none}
.btlwrap:not(.full) .kf-rail{width:2px}
.btlwrap:not(.full) .kf-ic{width:18px;height:18px}
/* nuke chrome: battle.js appends both nodes to the wrap, so the violet
   reads the same in the card and full screen. The violet is the one hue
   that does not follow the skin — it is the alarm. */
.btl-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  border-radius:inherit;z-index:4}
.btl-flash.on{animation:btlfl .75s ease-out}
@keyframes btlfl{0%{opacity:.95}100%{opacity:0}}
/* real pool names run long — ULTIMUSPOOL, SECPOOL — and the banner is
   centred and nowrap, so on a narrow card it would run off both edges.
   Capped and clipped instead. It no longer has to dodge anything: the
   block seals inside the assay bay, and battle.js parks the banner just
   under the bay's baseline when the stage is expanded. */
.btl-banner{position:absolute;top:34%;left:50%;transform:translateX(-50%);
  font:700 13px var(--mono);letter-spacing:.22em;white-space:nowrap;opacity:0;
  pointer-events:none;text-shadow:0 0 22px currentColor;z-index:5;
  max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
  transition:top .35s ease}
.btlwrap.full .btl-banner{top:172px;font-size:15px}
.btl-banner.on{animation:btlban 2.8s ease-out}
@keyframes btlban{0%{opacity:0;transform:translate(-50%,8px)}
  8%{opacity:1;transform:translate(-50%,0)}70%{opacity:1}100%{opacity:0}}
html[data-theme="noir"] .btl-banner,
html[data-theme="arcade"] .btl-banner,
html[data-theme="drafting"] .btl-banner{text-shadow:none}
/* the flat skins paint no bloom anywhere: the icon and rail glows go, the
   way battle.js skips the corona and core draws rather than paying for
   two invisible sprites. The ladder still reads — that is what putting
   magnitude on shape and size as well as colour was for. */
html[data-theme="noir"] .btl-kf,
html[data-theme="arcade"] .btl-kf,
html[data-theme="drafting"] .btl-kf{--kf-glow:none}
html[data-theme="noir"] .btl-kf-list li.hot .kf-rail,
html[data-theme="arcade"] .btl-kf-list li.hot .kf-rail,
html[data-theme="drafting"] .btl-kf-list li.hot .kf-rail{box-shadow:none}
/* gilded: one metal and one light. The feed's ladder goes gold on white
   instead of green on red, and the panel wash loses its border. */
html[data-theme="gilded"] .btl-kf{--kf-dim:color-mix(in srgb,var(--muted) 55%,var(--ink))}
html[data-theme="gilded"] .btl-kf-list li.long,
html[data-theme="gilded"] .btl-kf-head b.streak.long{color:var(--gold)}
html[data-theme="gilded"] .btl-kf-list li.short,
html[data-theme="gilded"] .btl-kf-head b.streak.short{color:var(--ink)}
html[data-theme="gilded"] .btl-pgrid{border-color:transparent;background:#0A0A0A}
/* ---------- the assay bay ----------
   The block event's window at top centre: past (the chain of chips) | present
   (the well) | pending (the socket), all standing on one baseline. battle.js
   builds and positions every node, so these rules only carry the look; the
   geometry is bayLayout()'s. The wash under the arm, readout and socket is
   the card's own background at 74% — enough to lift type off the battlefield
   without turning the panel into a box. The WELL carries no ground of its
   own: a wash there would dim the block and the lane behind it equally, and
   the whole point of the window is that the lane shows through it. */
.btl-assay{position:absolute;inset:0;pointer-events:none;z-index:6;
  font-family:var(--mono)}
.btl-assay>*{position:absolute}
.btl-assay .as-arm,.btl-assay .as-read,.btl-assay .as-sock{
  --wash:color-mix(in srgb,var(--bg) 74%,transparent)}
.btl-assay .as-arm{background:linear-gradient(90deg,transparent 0%,var(--wash) 22%,
  var(--wash) 78%,transparent 100%)}
.btl-assay .as-read{background:linear-gradient(90deg,transparent,var(--wash) 30%,var(--wash))}
.btl-assay .as-sock{background:linear-gradient(270deg,transparent,var(--wash) 30%,var(--wash))}
.btl-assay .as-lab,.btl-assay .as-win,.btl-assay .as-r,.btl-assay .as-t,
.btl-assay .as-h,.btl-assay .as-sock b,.btl-assay .as-lab2{
  text-shadow:0 1px 3px var(--bg),0 0 9px var(--bg)}
/* the arm's two labels stand on ITS baseline, not above it: the card's own
   title already owns the top-left corner at every width the bay scales
   through, and a chain label up there collided with it. Down here they read
   as one labelled axis — what the row is, and how much time it spans. */
.btl-assay .as-lab{position:absolute;left:0;bottom:-14px;
  font:600 9px var(--mono);letter-spacing:.2em;color:var(--blue)}
.btl-assay .as-win,.btl-assay .as-lab2{font:8px var(--mono);letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase}
.btl-assay .as-win{position:absolute;right:0;bottom:-14px}
.btl-assay .as-chips{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
  mask-image:linear-gradient(90deg,transparent,#000 28px)}
.btl-assay .as-chip{position:absolute;bottom:0;
  border:1px solid var(--chip-fr,var(--border));border-radius:1px;box-sizing:border-box;
  outline:1px solid color-mix(in srgb,var(--bg) 70%,transparent);
  transition:opacity .5s ease,left .55s cubic-bezier(.2,.8,.3,1)}
.btl-assay .as-chip.clamped{outline-width:2px}
.btl-assay .as-chip canvas{display:block;width:100%;height:100%}
.btl-assay .as-more{position:absolute;left:0;bottom:0;font:8px var(--mono);color:var(--muted)}
.btl-assay .as-well{overflow:hidden}
.btl-assay .as-well canvas{display:block;width:100%;height:100%;transition:opacity .45s ease}
.btl-assay .as-read{display:flex;flex-direction:column;justify-content:flex-end;
  gap:2px;padding:0 8px 6px 6px;box-sizing:border-box}
.btl-assay .as-h{font:700 15px var(--mono);color:var(--gold);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.btl-assay .as-r{font:8px var(--mono);color:var(--kf-dim,var(--muted));letter-spacing:.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btl-assay .as-t{font:700 11px var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:3px}
.btl-assay .as-pips{display:flex;gap:2px;height:4px;margin:1px 0 2px}
.btl-assay .as-pips i{width:3px;height:3px;background:var(--gold);opacity:0;transition:opacity .12s}
.btl-assay .as-pips i.on{opacity:1}
/* the slab engraves the height in gold through the open cutaway, so the
   column stands down and keeps only what the engraving does not carry */
.btl-assay .as-read.quiet .as-h{opacity:0;transition:opacity .3s ease}
.btl-assay .as-read.hot{box-shadow:inset 0 0 0 1px var(--gold),
  0 0 14px color-mix(in srgb,var(--gold) 55%,transparent)}
.btl-assay .as-sock{display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:3px;padding:0 0 8px;box-sizing:border-box;
  border:1px dashed var(--hold);border-radius:2px}
.btl-assay .as-sock.late{border-width:2px;border-style:solid;border-color:var(--dist)}
.btl-assay .as-fill{position:absolute;left:0;right:0;bottom:0;
  background:color-mix(in srgb,var(--blue) 30%,transparent);pointer-events:none}
.btl-assay .as-due{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hold);opacity:.75}
.btl-assay .as-sock b{font:700 11px var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums;position:relative}
.btl-assay .as-sock .as-lab2{position:relative}
.btl-assay .as-reel{position:absolute;left:0;bottom:0;overflow:hidden;
  background:color-mix(in srgb,var(--bg) 82%,transparent);display:none}
.btl-assay .as-reel.on{display:block}
/* the strip carries "NONCE 2,146,912" — fifteen glyphs of tabular mono, and
   at 62% of a 150 px well the tail was being clipped mid-number */
.btl-assay .as-strip div{font:500 11px var(--mono);color:var(--muted);text-align:center;
  letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.btl-assay .as-strip div.true{color:var(--gold);font-weight:700}
/* the compact band: no 3D, no reel, one line of identity and the clock.
   The modifier is .band and not .card on purpose — .card is the dashboard's
   own panel class, and putting it on a node that is position:absolute;
   inset:0 paints an opaque panel over the entire battlefield. */
.btl-assay.band .as-well,.btl-assay.band .as-reel,.btl-assay.band .as-lab,
.btl-assay.band .as-win,.btl-assay.band .as-pips,.btl-assay.band .as-more{display:none}
.btl-assay.band .as-chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px);
  mask-image:linear-gradient(90deg,transparent,#000 16px)}
.btl-assay.band .as-read{padding:0 4px;gap:0}
.btl-assay.band .as-h{font-size:13px}
.btl-assay.band .as-r{font-size:9px}
.btl-assay.band .as-r:nth-of-type(n+2){display:none}
.btl-assay.band .as-t{display:none}
.btl-assay.band .as-sock{padding-bottom:2px}
.btl-assay.band .as-sock .as-lab2{display:none}
.btl-assay.band .as-sock b{font-size:9px}
/* the flat skins paint no bloom anywhere — the readout's gold rim goes hard
   the way the feed's icon glow does */
html[data-theme="noir"] .btl-assay .as-read.hot,
html[data-theme="arcade"] .btl-assay .as-read.hot,
html[data-theme="drafting"] .btl-assay .as-read.hot{box-shadow:inset 0 0 0 1px var(--gold)}
html[data-theme="noir"] .btl-assay .as-lab,html[data-theme="noir"] .btl-assay .as-h,
html[data-theme="arcade"] .btl-assay .as-lab,html[data-theme="arcade"] .btl-assay .as-h,
html[data-theme="drafting"] .btl-assay .as-lab,html[data-theme="drafting"] .btl-assay .as-h{
  text-shadow:0 1px 2px var(--bg)}
html[data-motion="reduce"] .btl-assay .as-chip,
html[data-motion="reduce"] .btl-assay .as-well canvas,
html[data-motion="reduce"] .btl-assay .as-pips i{transition:none}
#battleCard .gcaption{margin-top:10px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* on the screensaver stage the wrap fills the main region like the cutaway */
#ss .ss-main .btlwrap{height:auto;flex:1}
@media (max-width:640px){
  .btl-tl{top:16px;left:16px}
  #btlPrice{font-size:22px}
  .btl-tr{right:16px;top:auto;bottom:44px;gap:6px}
  .btl-bl{left:16px;bottom:44px;width:auto;max-width:60vw}
  .btl-pressbar{width:160px}
  .btl-pgrid{width:160px;height:30px}
  .btl-kf-legend{display:none}
  .btl-kf-list li:nth-child(n+5){display:none}
  .kf-px{display:none}
}

/* ---------- screensaver ---------- */
.ss{position:fixed;inset:0;z-index:50;background:
  radial-gradient(1200px 800px at 50% 40%, var(--space-hi) 0%, var(--space-lo) 70%);
  cursor:none}
#ssCv{position:absolute;inset:0;width:100%;height:100%}
/* the five slots carry the positions; the ghost fragments inside them keep
   their own class names so every skin's hooks still land */
.ss-slot{position:absolute;z-index:2;display:flex;flex-direction:column;
  pointer-events:none}
.ss-stat{display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono)}
.ss-stat b{font:700 30px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.ss-lab{font:600 10px var(--mono);color:var(--muted);letter-spacing:.2em}
.ss-tl{top:34px;left:40px}
.ss-tr{top:34px;right:40px;text-align:right;align-items:flex-end}
.ss-bl{bottom:34px;left:40px}
.ss-br{bottom:34px;right:40px;text-align:right;align-items:flex-end}
.ss-tr .ss-stat,.ss-br .ss-stat{align-items:flex-end}
.ss-side{right:40px;bottom:118px}
.ss-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:14px;
  font:10px var(--mono);color:var(--muted);letter-spacing:.25em;opacity:.6}
#ssSpark{width:180px;height:36px;margin-top:8px;opacity:.9}
.ss-rail{position:relative;width:180px;height:5px;border-radius:3px;
  margin:10px 0 0 auto;opacity:.85;
  background:linear-gradient(90deg,var(--acc),var(--dca) 35%,var(--hold) 60%,var(--dist) 85%)}
.ss-tl .ss-rail,.ss-bl .ss-rail{margin-left:0}
.ss-rail i{position:absolute;top:-3px;width:2.5px;height:11px;background:var(--ink);
  border-radius:1px;transform:translateX(-50%);
  box-shadow:0 0 6px color-mix(in srgb,var(--ink) 80%,transparent)}
.ss-panel{width:300px;
  display:flex;flex-direction:column;gap:8px;padding:12px 14px;
  background:color-mix(in srgb,var(--bg) 28%,transparent);border:1px solid color-mix(in srgb,var(--border) 55%,transparent);
  border-radius:10px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#ssFab{width:100%;height:130px;display:block}
.ss-pressbar{height:5px;border-radius:3px;overflow:hidden;position:relative;
  background:color-mix(in srgb,var(--dist) 28%,transparent)}
.ss-pressbar i{display:block;height:100%;width:50%;
  background:color-mix(in srgb,var(--acc) 85%,transparent);transition:width .6s ease}
.ss-lab.dim{opacity:.75;letter-spacing:.1em}
@media (max-width:900px){.ss-side,.ss-panel{display:none}}

/* ---------- responsive ---------- */
@media (max-width:640px){
  /* "BITCOIN RADAR" + five controls no longer fit one phone row (the old
     8-char wordmark already overflowed at 390px): let the button cluster
     drop to its own right-aligned row instead of scrolling the page. */
  header{flex-wrap:wrap;row-gap:8px}
  .brand{letter-spacing:.14em}
  .brand .sub{display:none}
  #asof{display:none}
  .presence .pword{display:none}
  #globeCard .tlink{display:none}   /* provenance lives in the caption */
  .satsbtn{padding:5px 9px;letter-spacing:.08em}
  .hdr-right{gap:8px;margin-left:auto}
}
@media (max-width:1180px){
  html,body{height:auto}
  .app{height:auto}
  main{display:flex;flex-direction:column}
  .col{overflow:visible}
  .cwrap{min-height:300px;height:300px;flex:none}
  .card.grow{flex:none}
  #tape{max-height:330px}
  .gwrap{height:min(78vw,340px)}
  .row2{grid-template-columns:1fr}
  .blkwrap{min-height:min(78vw,340px)}
  .ss-stat b{font-size:20px}
  .ss-tl{top:18px;left:18px}.ss-tr{top:18px;right:18px}
  .ss-bl{bottom:18px;left:18px}.ss-br{bottom:18px;right:18px}
}
@media (min-width:1181px){
  .cwrap{min-height:0}
  /* the labs make the center column scroll, and a flex:1 card in an
     overflowing column shrinks to its title — pin a real plot height */
  #chartCard{min-height:clamp(320px,42vh,520px)}
}

/* ---------- reduced motion ---------- */
html[data-motion="reduce"] .marker,
html[data-motion="reduce"] .track i,
html[data-motion="reduce"] .callbar i{transition:none}
html[data-motion="reduce"] .tickertrack{animation:none}
html[data-motion="reduce"] .ticker{overflow-x:auto;scrollbar-width:thin}
html[data-motion="reduce"] #tape li.new{animation:none}
html[data-motion="reduce"] .livedot,
html[data-motion="reduce"] .wsdot.live,
html[data-motion="reduce"] .presence .pdot{animation:none}
html[data-motion="reduce"] .skel #riskBig,
html[data-motion="reduce"] .skel #price,
html[data-motion="reduce"] .skel #orderLine{animation:none}


/* ================= LABS (one self-contained card per file) ============= */

/* labs share the fabric's column: keep the grow card from collapsing under
   them (its fixed-height mosaic would spill over the cards below) */
#tapeCard{min-height:560px}

/* ---------- lab: strike ladder ---------- */
#ladderCard .lhead{display:grid;grid-template-columns:76px 1fr 42px;gap:10px;
  padding:0 2px;font:600 8px var(--mono);color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
#ladderCard .lhead span:first-child,
#ladderCard .lhead span:last-child{text-align:right}
#ladderCard .lrows{position:relative}
#ladderCard .lrow{display:grid;grid-template-columns:76px 1fr 42px;gap:10px;
  align-items:center;height:22px;padding:0 2px;border-radius:5px;
  transition:background .3s}
#ladderCard .lstrike{font:600 10px var(--mono);color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#ladderCard .lrow.atm{background:linear-gradient(90deg,color-mix(in srgb,var(--muted) 13%,transparent),
  color-mix(in srgb,var(--muted) 2%,transparent) 78%);box-shadow:inset 0 0 14px color-mix(in srgb,var(--ink) 5%,transparent)}
#ladderCard .lrow.atm .lstrike{color:var(--ink)}
#ladderCard .lrow.atm .lstrike::before{content:"▸ ";color:var(--hold)}
/* the departure board: bars are segmented LED strips — 20 discrete cells
   light left to right; the red field shows through the unlit gaps */
#ladderCard .lbar{position:relative;height:7px;border-radius:2px;
  overflow:hidden;background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--dist) 17%,var(--bg)) 0,
    color-mix(in srgb,var(--dist) 17%,var(--bg)) calc(5% - 2px),
    var(--bg) calc(5% - 2px),var(--bg) 5%)}
#ladderCard .lbar i{display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--acc) 88%,var(--bg)) 0,var(--acc) calc(5% - 2px),
    var(--bg) calc(5% - 2px),var(--bg) 5%);
  box-shadow:0 0 8px color-mix(in srgb,var(--acc) 35%,transparent);transition:width .45s ease}
#ladderCard .lbar::after{content:"";position:absolute;left:50%;top:0;width:2px;
  height:100%;background:color-mix(in srgb,var(--ink) 50%,transparent)}
#ladderCard .lpct{font:600 10px var(--mono);color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums;overflow:hidden}
#ladderCard .lpct b{display:inline-block;font-weight:600}
#ladderCard .lpct b.roll{animation:ladRoll .35s cubic-bezier(.2,.9,.3,1)}
@keyframes ladRoll{from{transform:translateY(-115%);opacity:.2}
  to{transform:translateY(0);opacity:1}}
/* the ATM under-glow is one rail that GLIDES between rows */
#ladderCard .lrail{position:absolute;left:0;right:0;height:22px;
  border-radius:5px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--hold) 12%,transparent),
    color-mix(in srgb,var(--hold) 2%,transparent) 78%);
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--hold) 8%,transparent);
  transition:top .6s cubic-bezier(.22,1,.36,1)}
#ladderCard .lrow.atm{background:none;box-shadow:none}
/* the spot cursor is a scanning laser with a faint bloom */
#ladderCard .lspot{position:absolute;left:0;right:0;height:0;
  border-top:1px solid color-mix(in srgb,var(--ink) 55%,transparent);pointer-events:none;
  box-shadow:0 0 9px color-mix(in srgb,var(--ink) 50%,transparent);
  transition:top .6s cubic-bezier(.22,1,.36,1)}
#ladderCard .lspot b{position:absolute;left:88px;top:0;transform:translateY(-50%);
  font:600 8px var(--mono);letter-spacing:.08em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px}
#ladderCard .lwarm{font:10px var(--mono);color:var(--muted);
  letter-spacing:.12em;text-align:center;padding:30px 0;
  animation:pulse 1.4s ease-in-out infinite}
#ladderCard .lfoot{font:9px var(--mono);color:var(--muted);
  letter-spacing:.06em;margin-top:10px;font-variant-numeric:tabular-nums}
html[data-motion="reduce"] #ladderCard .lrow,
html[data-motion="reduce"] #ladderCard .lbar i,
html[data-motion="reduce"] #ladderCard .lspot,
html[data-motion="reduce"] #ladderCard .lrail{transition:none}
html[data-motion="reduce"] #ladderCard .lwarm{animation:none}
html[data-motion="reduce"] #ladderCard .lpct b.roll{animation:none}

/* ---------- lab: moscow time — a real Solari split-flap board ----------
   Each digit is a physical flap unit: two static half-plates with a hinge
   line, plus two animated flaps — the OLD top folds down (.ff), then the
   NEW bottom unfolds (.fb) — in CSS 3D under one perspective. */
#moscowCard{flex:none}
#moscowCard .mt-clock{display:flex;justify-content:center;align-items:center;
  gap:5px;font:700 44px/1 var(--mono);margin:4px 0 14px;
  font-variant-numeric:tabular-nums;perspective:420px}
#moscowCard .mt-f{position:relative;display:inline-block;width:.78em;
  height:1.14em;transform-style:preserve-3d}
#moscowCard .mt-f b{position:absolute;left:0;width:100%;height:50%;
  overflow:hidden;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 86%,var(--ink)) 0%,
    color-mix(in srgb,var(--panel) 95%,var(--ink)) 100%);
  border:1px solid color-mix(in srgb,var(--border-hi) 90%,transparent);box-sizing:border-box;
  backface-visibility:hidden}
#moscowCard .mt-f b i{font-style:normal;display:block;width:100%;
  height:1.14em;line-height:1.14em;text-align:center}
#moscowCard .mt-f .fu,#moscowCard .mt-f .ff{top:0;
  border-radius:.1em .1em 0 0;border-bottom:none}
#moscowCard .mt-f .fl,#moscowCard .mt-f .fb{bottom:0;
  border-radius:0 0 .1em .1em;border-top:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 55%,var(--panel2)) 0%,
    var(--panel2) 100%)}
#moscowCard .mt-f .fl i,#moscowCard .mt-f .fb i{margin-top:-0.57em}
/* the hinge — a dark slit across the middle of every unit */
#moscowCard .mt-f::after{content:"";position:absolute;left:-1px;right:-1px;
  top:calc(50% - 1px);height:2px;background:var(--bg);z-index:4}
/* animated flaps exist only mid-flip */
#moscowCard .mt-f .ff,#moscowCard .mt-f .fb{visibility:hidden;z-index:3}
#moscowCard .mt-f.go .ff{visibility:visible;transform-origin:center bottom;
  animation:mtFold .22s ease-in forwards}
#moscowCard .mt-f.go .fb{visibility:visible;transform-origin:center top;
  transform:rotateX(88deg);
  animation:mtUnfold .26s .22s cubic-bezier(.2,.8,.3,1.1) forwards}
@keyframes mtFold{from{transform:rotateX(0);filter:brightness(1)}
  to{transform:rotateX(-88deg);filter:brightness(.55)}}
@keyframes mtUnfold{from{transform:rotateX(88deg);filter:brightness(1.35)}
  to{transform:rotateX(0);filter:brightness(1)}}
/* direction edge-light: the flipping plates catch green or red */
#moscowCard .mt-up .go b{color:color-mix(in srgb,var(--acc) 60%,#fff)}
#moscowCard .mt-dn .go b{color:color-mix(in srgb,var(--dist) 52%,#fff)}
#moscowCard .mt-c{color:var(--hold);font-size:.7em;
  text-shadow:0 0 10px color-mix(in srgb,var(--hold) 60%,transparent);
  animation:mtblink 1s steps(1) infinite}
#moscowCard .mt-sub{font:11px var(--mono);color:var(--muted);text-align:center;
  letter-spacing:.04em;font-variant-numeric:tabular-nums}
#moscowCard .mt-cap{font:10px var(--mono);color:var(--muted);opacity:.75;
  letter-spacing:.06em;margin-top:10px;text-align:center;line-height:1.5}
#moscowCard .mt-cap b{color:var(--acc);font-weight:600}
@keyframes mtblink{50%{opacity:.4}}
html[data-motion="reduce"] #moscowCard .mt-f.go .ff,
html[data-motion="reduce"] #moscowCard .mt-f.go .fb{animation:none;
    visibility:hidden}
html[data-motion="reduce"] #moscowCard .mt-c{animation:none}

/* ---------- lab: cycle rulers ---------- */
#rulersCard .rlwrap{position:relative;height:200px}
#rulersCard #rlCv{width:100%;height:100%;display:block;cursor:crosshair;
  -webkit-user-select:none;user-select:none}
/* only the cropped card is draggable — untouched, it behaves exactly as
   it always has, and a finger over it still scrolls and pinches the page */
#rulersCard #rlCv.pan{touch-action:pan-y pinch-zoom;cursor:grab}
#rulersCard #rlCv.pan.panning{cursor:grabbing}
#rulersCard .seg{margin-left:2px}
#rulersCard .rl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;
  margin-top:12px}
#rulersCard .rl-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
#rulersCard .rl-lab{font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.14em;white-space:nowrap}
#rulersCard .rl-cell b{font:700 20px/1 var(--mono);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
#rulersCard .rl-sub{font:10px var(--mono);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#rulersCard .rl-band{font:10px var(--mono);color:var(--muted);
  letter-spacing:.03em;font-variant-numeric:tabular-nums;
  border-top:1px solid var(--border);margin-top:12px;padding-top:10px}
#rulersCard .gcaption{margin-top:8px}

/* ---------- lab: block gong — the temple bell ---------- */
#convCard #gongBtn.ring{color:var(--hold);border-color:var(--hold);
  animation:gongRing 1.4s ease-out}
@keyframes gongRing{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--hold) 45%,transparent)}
  to{box-shadow:0 0 0 12px color-mix(in srgb,var(--hold) 0%,transparent)}}
/* the bell swings from its hinge with decaying amplitude */
#convCard #gongBtn svg{transform-origin:50% 15%}
#convCard #gongBtn.swing svg{animation:gongSwing 1.9s ease-out}
@keyframes gongSwing{
  0%{transform:rotate(0)} 10%{transform:rotate(16deg)}
  26%{transform:rotate(-12deg)} 42%{transform:rotate(8deg)}
  58%{transform:rotate(-5deg)} 74%{transform:rotate(3deg)}
  88%{transform:rotate(-1.5deg)} 100%{transform:rotate(0)}}
/* whale tick: a micro-ripple confined to the button */
#convCard #gongBtn.blip{animation:gongBlip .5s ease-out}
@keyframes gongBlip{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 40%,transparent)}
  to{box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 0%,transparent)}}
/* page-wide golden shockwave, centered on the bell; idle = invisible */
.gongwave{position:fixed;left:0;top:0;width:12px;height:12px;z-index:70;
  margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;opacity:0}
.gongwave.go{animation:gongWave 1.5s cubic-bezier(.1,.6,.3,1) forwards}
@keyframes gongWave{
  0%{opacity:1;transform:scale(1);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--hold) 60%,transparent),0 0 40px 14px color-mix(in srgb,var(--hold) 28%,transparent)}
  100%{opacity:0;transform:scale(90);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--hold) 0%,transparent),0 0 6px 2px color-mix(in srgb,var(--hold) 0%,transparent)}}
html[data-motion="reduce"] #convCard #gongBtn.ring,
html[data-motion="reduce"] #convCard #gongBtn.swing svg,
html[data-motion="reduce"] #convCard #gongBtn.blip{animation:none}
html[data-motion="reduce"] #convCard #gongBtn.ring{box-shadow:0 0 0 3px color-mix(in srgb,var(--hold) 40%,transparent)}
html[data-motion="reduce"] .gongwave.go{animation:none;opacity:0}

/* ---------- lab: fee weather ---------- */
#feeCard{flex:none}
#feeCv{width:100%;height:150px;display:block}
#feeCard .ftiers{display:flex;flex-direction:column;gap:5px;margin-top:12px}
#feeCard .ftrow{display:grid;grid-template-columns:70px 1fr 84px;gap:10px;
  align-items:center;font:10px var(--mono);color:var(--muted);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
#feeCard .ftrow b{font-weight:600;text-align:right;white-space:nowrap}
#feeCard .ftrow .track i{transition:width .6s ease,background .6s ease}
#feeCard .fclear{font:10px var(--mono);color:var(--muted);margin-top:11px;
  padding-top:9px;border-top:1px solid var(--border);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
#feeCard .fclear b{color:var(--blue);font-weight:600}
#feeCard .gcaption{margin-top:9px}
html[data-motion="reduce"] #feeCard .ftrow .track i{transition:none}

/* ---------- lab: difficulty epoch — the instrument dial ---------- */
#epochCard .ep-dial{position:relative;height:168px;margin:2px 0 4px}
#epochCard #epDialCv{width:100%;height:100%;display:block}
#epochCard .ep-center{position:absolute;left:0;right:0;top:50%;
  transform:translateY(-38%);text-align:center;pointer-events:none}
#epochCard #epChange{font:700 27px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--muted)}
#epochCard .ep-estlab{display:block;font:600 8px var(--mono);
  color:var(--muted);letter-spacing:.16em;text-transform:uppercase;
  margin-top:5px}
#epochCard .ep-sub{font:11px var(--mono);color:var(--muted);margin:2px 0 10px;
  text-align:center}
#epochCard .ep-row{display:flex;justify-content:space-between;
  font:10px var(--mono);color:var(--muted);margin-top:9px;letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
#epochCard .ep-row b{color:var(--ink);font-weight:600}
#epochCard .ep-bud{border-top:1px solid var(--border);margin-top:13px;
  padding-top:11px}
#epochCard .ep-budhead{display:flex;justify-content:space-between;
  align-items:baseline;font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.14em}
#epochCard .ep-budhead b{font:700 11px var(--mono);color:var(--hold)}
/* the budget gauge: machined channel, steel-blue subsidy under amber fees */
#epochCard .ep-stack{position:relative;height:7px;border-radius:3px;
  overflow:hidden;margin-top:8px;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent 9%,
      color-mix(in srgb,var(--bg) 80%,transparent) 9%,color-mix(in srgb,var(--bg) 80%,transparent) 10%),
    linear-gradient(180deg,color-mix(in srgb,var(--blue) 40%,transparent),color-mix(in srgb,var(--blue) 16%,transparent));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#epochCard .ep-stack i{display:block;height:100%;width:0;min-width:2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hold) 80%,#fff),var(--hold));
  border-radius:3px 0 0 3px;box-shadow:0 0 8px color-mix(in srgb,var(--hold) 50%,transparent);
  transition:width .6s ease}
#epochCard .ep-budsub{font:10px var(--mono);color:var(--muted);margin-top:7px;
  letter-spacing:.02em;line-height:1.5;font-variant-numeric:tabular-nums}
html[data-motion="reduce"] #epochCard .ep-stack i{transition:none}

/* ---------- lab: lightning pulse — electricity ---------- */
#lnCard .ln-hero{position:relative}
#lnCard #lnBolt{position:absolute;inset:-6px -4px;width:calc(100% + 8px);
  height:calc(100% + 12px);pointer-events:none;z-index:0}
#lnCard .ln-cap{position:relative;z-index:1}
#lnCard .ln-cap b.zap{animation:lnZap .4s steps(3)}
@keyframes lnZap{0%{color:var(--ink);text-shadow:0 0 26px color-mix(in srgb,var(--blue) 90%,transparent)}
  100%{color:var(--hold);text-shadow:0 0 30px color-mix(in srgb,var(--hold) 32%,transparent)}}
/* current drifts through the reachability split while the tab is visible */
#lnCard .ln-split i{position:relative}
#lnCard .ln-split i::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 6px,rgba(255,255,255,.22) 6px,
    rgba(255,255,255,.22) 8px);
  animation:lnDrift 1.6s linear infinite}
@keyframes lnDrift{from{background-position:0 0}to{background-position:14px 0}}
html[data-motion="reduce"] #lnCard .ln-cap b.zap{animation:none}
html[data-motion="reduce"] #lnCard .ln-split i::after{animation:none;background:none}
#lnCard .ln-cap{display:flex;align-items:baseline;gap:8px}
#lnCard .ln-cap b{font:700 34px/1 var(--mono);letter-spacing:-.02em;
  color:var(--hold);text-shadow:0 0 30px color-mix(in srgb,var(--hold) 32%,transparent);
  font-variant-numeric:tabular-nums}
#lnCard .ln-unit{font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase}
#lnCard .ln-delta{margin-left:auto;font:600 10px var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#lnCard .ln-sub{font:10px var(--mono);color:var(--muted);margin-top:6px;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
#lnCard #lnSpark{width:100%;height:36px;display:block;margin-top:9px}
#lnCard .ln-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--border)}
#lnCard .ln-grid span{font:9px var(--mono);color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase}
#lnCard .ln-grid b{display:block;font:600 14px var(--mono);color:var(--ink);
  margin-top:3px;font-variant-numeric:tabular-nums}
#lnCard .ln-grid i{display:block;font:9px var(--mono);font-style:normal;
  color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
#lnCard .ln-split{display:flex;height:5px;border-radius:3px;overflow:hidden;
  margin-top:12px;background:var(--bg)}
#lnCard .ln-split i{height:100%;width:0;transition:width .6s ease}
#lnCard .ln-split i:nth-child(1){background:var(--acc)}
#lnCard .ln-split i:nth-child(2){background:var(--blue)}
#lnCard .ln-split i:nth-child(3){background:var(--hold)}
#lnCard .ln-split i:nth-child(4){background:var(--muted);opacity:.55}
#lnCard .ln-splitcap{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;
  font:9px var(--mono);color:var(--muted);letter-spacing:.04em}
#lnCard .ln-splitcap b{color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums}
#lnCard .ln-splitcap span::before{content:"";display:inline-block;width:7px;
  height:7px;border-radius:2px;margin-right:5px;vertical-align:-1px}
#lnCard .s-cl::before{background:var(--acc)}
#lnCard .s-bo::before{background:var(--blue)}
#lnCard .s-tor::before{background:var(--hold)}
#lnCard .s-pr::before{background:var(--muted);opacity:.55}
#lnCard .ln-topslab{font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.18em;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--border)}
#lnCard #lnTops{list-style:none;margin-top:6px;font:10px var(--mono)}
#lnCard #lnTops li{display:grid;grid-template-columns:auto 1fr auto auto;
  gap:9px;align-items:baseline;padding:3.5px 0;color:var(--muted);
  border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent);font-variant-numeric:tabular-nums}
#lnCard #lnTops li:last-child{border-bottom:0}
#lnCard #lnTops .rk{color:var(--hold);font-weight:700}
#lnCard #lnTops .al{color:var(--ink);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
#lnCard #lnTops .cp{color:var(--hold);white-space:nowrap}
#lnCard #lnTops .ln-wait{display:block}
#lnCard .gcaption{text-align:left;margin-top:10px}
html[data-motion="reduce"] #lnCard .ln-split i{transition:none}

/* ---------- lab: on-chain watch — whale sonar + block graffiti ---------- */
/* the sonar scope: contacts are txs, the beam re-illuminates them */
#whaleCard .wscope{height:118px;border-radius:8px;overflow:hidden;
  margin-bottom:10px;background:
  radial-gradient(90% 120% at 50% 50%, var(--space-hi) 0%, var(--space-lo) 100%);
  border:1px solid color-mix(in srgb,var(--acc) 18%,transparent)}
#whaleCard #whaleScope{width:100%;height:100%;display:block}
#whaleCard .wlist,#graffCard .glist{list-style:none;font:10px var(--mono)}
#whaleCard .wempty,#graffCard .gempty{padding:8px 0;color:var(--muted);
  font:10px var(--mono);letter-spacing:.08em}
#whaleCard .wrow{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;
  align-items:baseline;padding:4.5px 2px;border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent);
  font-variant-numeric:tabular-nums;color:var(--muted)}
#whaleCard .wrow.fresh{animation:wSurface .7s cubic-bezier(.2,.8,.3,1)}
@keyframes wSurface{from{transform:translateY(9px);opacity:0}
  to{transform:translateY(0);opacity:1}}
#whaleCard .wrow:last-child{border-bottom:0}
#whaleCard .wamt{font:600 12px var(--mono);color:var(--blue);white-space:nowrap}
#whaleCard .wage{text-align:right;font-size:9px;white-space:nowrap}
#whaleCard .wrow.mega{background:linear-gradient(90deg,color-mix(in srgb,var(--hold) 9%,transparent),transparent 70%)}
#whaleCard .wrow.mega .wamt{color:var(--hold);
  text-shadow:0 0 12px color-mix(in srgb,var(--hold) 65%,transparent)}
#whaleCard .gcaption,#graffCard .gcaption{text-align:left;margin-top:10px}
/* the wall: a barely-there brick hint behind spray-stencil miner tags */
#graffCard .glist{padding:4px 2px;border-radius:8px;background:
  repeating-linear-gradient(0deg,transparent 0,transparent 17px,
    color-mix(in srgb,var(--border) 28%,transparent) 17px,color-mix(in srgb,var(--border) 28%,transparent) 18px),
  repeating-linear-gradient(90deg,transparent 0,transparent 46px,
    color-mix(in srgb,var(--border) 18%,transparent) 46px,color-mix(in srgb,var(--border) 18%,transparent) 47px)}
#graffCard .gtag{display:flex;gap:10px;align-items:baseline;padding:9px 4px 5px;
  transform:rotate(var(--tilt,0deg))}
#graffCard .gh{font:600 10px var(--mono);color:var(--hold);text-decoration:none;
  letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
#graffCard .gh:hover{color:var(--ink)}
#graffCard .gtag b{font:600 12px var(--mono);color:var(--ink);
  word-break:break-word;letter-spacing:.02em}
/* duotone spray edge, hued per miner (hash → one of five) */
#graffCard .g-h0 b{text-shadow:0 0 1px var(--hold),0 0 14px color-mix(in srgb,var(--hold) 50%,transparent)}
#graffCard .g-h1 b{text-shadow:0 0 1px var(--acc),0 0 14px color-mix(in srgb,var(--acc) 50%,transparent)}
#graffCard .g-h2 b{text-shadow:0 0 1px var(--blue),0 0 14px color-mix(in srgb,var(--blue) 55%,transparent)}
#graffCard .g-h3 b{text-shadow:0 0 1px var(--dca),0 0 14px color-mix(in srgb,var(--dca) 50%,transparent)}
#graffCard .g-h4 b{text-shadow:0 0 1px var(--dist),0 0 14px color-mix(in srgb,var(--dist) 45%,transparent)}
/* the typewriter caret while a fresh tag sprays on */
#graffCard .gtag b.typing::after{content:"▌";color:var(--ink);
  animation:mtblink .7s steps(1) infinite}
#graffCard .gage{margin-left:auto;font-size:9px;color:var(--muted);
  white-space:nowrap}
/* OP_RETURNs: little taped label strips under the tag */
#graffCard .gop{display:flex;gap:8px;align-items:baseline;margin:3px 0 3px 14px;
  padding:3px 8px;background:color-mix(in srgb,var(--panel) 75%,transparent);
  border:1px solid color-mix(in srgb,var(--border-hi) 55%,transparent);border-radius:3px;
  transform:rotate(-.4deg);width:fit-content;max-width:calc(100% - 16px)}
#graffCard .gol{font:700 8px var(--mono);letter-spacing:.1em;color:var(--blue);
  opacity:.7;flex:none}
#graffCard .got{color:var(--muted);word-break:break-word;line-height:1.45}
html[data-motion="reduce"] #whaleCard .wrow.fresh{animation:none}
html[data-motion="reduce"] #graffCard .gtag b.typing::after{content:"";animation:none}

/* ---------- lab: leverage temp ---------- */
#levCard .lev-hero{display:flex;align-items:baseline;gap:8px}
#levCard .lev-hero b{font:700 30px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
#levCard .lev-hero .unit{font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.14em}
#levCard .lev-word{font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-left:auto;
  text-align:right;max-width:46%;line-height:1.5}
/* the glass capillary: an inset glass tube whose liquid FILLS from the
   center toward the reading, wobbling as it arrives; bubbles drift toward
   the hot end when funding runs hot, frost creeps in when deeply negative */
#levCard .lev-thermo{position:relative;height:14px;border-radius:7px;
  margin-top:22px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 84%,#000) 0%,
    var(--panel) 55%,color-mix(in srgb,var(--panel) 84%,var(--blue)) 100%);
  border:1px solid var(--border-hi);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.65),inset 0 -1px 2px color-mix(in srgb,var(--ink) 5%,transparent)}
#levCard .lev-thermo::before{content:"";position:absolute;left:2%;right:2%;
  top:2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 14%,transparent) 30%,
    color-mix(in srgb,var(--ink) 14%,transparent) 70%,transparent)}
#levCard .lev-thermo::after{content:"";position:absolute;left:50%;top:0;
  width:2px;height:100%;background:color-mix(in srgb,var(--ink) 35%,transparent)}
#levCard .lev-liq{position:absolute;top:3px;bottom:3px;left:50%;width:0;
  border-radius:4px;
  transition:width .9s cubic-bezier(.32,1.4,.4,1),left .9s cubic-bezier(.32,1.4,.4,1),
    background .6s,box-shadow .6s}
#levCard .lev-bub{position:absolute;top:50%;width:3px;height:3px;
  border-radius:50%;background:color-mix(in srgb,var(--ink) 50%,transparent);opacity:0;
  transform:translateY(-50%)}
#levCard .lev-thermo.hot .lev-bub{animation:levBub 3.2s linear infinite}
#levCard .lev-bub.b1{left:52%}
#levCard .lev-bub.b2{left:58%;animation-delay:-1.1s!important}
#levCard .lev-bub.b3{left:64%;animation-delay:-2.2s!important}
@keyframes levBub{0%{opacity:0;transform:translate(0,-50%) scale(.6)}
  15%{opacity:.7}85%{opacity:.5}
  100%{opacity:0;transform:translate(120px,-50%) scale(1)}}
#levCard .lev-frost{position:absolute;left:5px;top:50%;
  transform:translateY(-52%);font-size:8px;color:color-mix(in srgb,var(--blue) 85%,transparent);
  text-shadow:0 0 8px color-mix(in srgb,var(--blue) 80%,transparent);opacity:0;transition:opacity .8s}
#levCard .lev-thermo.cold .lev-frost{opacity:1}
#levCard .lev-vtick{position:absolute;top:-3px;width:2.5px;height:16px;
  border-radius:1px;background:var(--ink);transform:translateX(-50%);
  box-shadow:0 0 6px color-mix(in srgb,var(--ink) 75%,transparent);
  transition:left 1s cubic-bezier(.22,1,.36,1)}
#levCard .lev-vtick i{position:absolute;top:-11px;left:50%;
  transform:translateX(-50%);font:700 7px var(--mono);font-style:normal;
  letter-spacing:.08em;color:var(--muted)}
#levCard .lev-ends{display:flex;justify-content:space-between;
  font:8px var(--mono);color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;margin-top:7px}
#levCard .lev-rows{margin-top:12px;border-top:1px solid var(--border);
  padding-top:10px;display:flex;flex-direction:column;gap:7px}
#levCard .lev-row{display:grid;grid-template-columns:52px 1fr auto;gap:8px;
  font:10px var(--mono);color:var(--muted);align-items:baseline;
  font-variant-numeric:tabular-nums}
#levCard .lev-row .vn{font:600 9px var(--mono);letter-spacing:.12em;
  text-transform:uppercase}
#levCard .lev-row .v{color:var(--ink)}
#levCard .lev-row b{font:600 11px var(--mono);color:var(--ink);
  white-space:nowrap}
#levCard .lev-note{font:9px var(--mono);color:var(--muted);
  letter-spacing:.03em;margin-top:11px;line-height:1.7}
/* the carry slope: an inclined plane whose ball rolls toward whoever pays */
#levCard .lev-plane{display:flex;align-items:center;gap:10px;margin-top:12px}
#levCard .lp-bar{position:relative;flex:none;width:96px;height:2px;
  border-radius:1px;background:var(--border-hi);
  transform:rotate(var(--tilt,0deg));transition:transform .9s ease}
#levCard .lp-ball{position:absolute;top:-5px;left:50%;width:7px;height:7px;
  border-radius:50%;background:var(--hold);
  box-shadow:0 0 8px color-mix(in srgb,var(--hold) 60%,transparent);
  transition:left .9s cubic-bezier(.3,1.2,.4,1)}
#levCard .lev-plane.downright .lp-ball{left:78%}
#levCard .lev-plane:not(.downright) .lp-ball{left:12%}
#levCard .lp-lab{font:9px var(--mono);color:var(--muted);
  letter-spacing:.04em;line-height:1.5}
html[data-motion="reduce"] #levCard .lev-vtick,
html[data-motion="reduce"] #levCard .lev-liq,
html[data-motion="reduce"] #levCard .lp-bar,
html[data-motion="reduce"] #levCard .lp-ball{transition:none}
html[data-motion="reduce"] #levCard .lev-thermo.hot .lev-bub{animation:none}

/* ---------- lab: keyspace lottery — the launcher ----------
   A plunger on a launch pad at the bottom of a night sky: the pool disc
   fills the upper two thirds of the stage, the pad overlaps its bottom
   edge, and every press fires comets up into the sky. Three states from
   one DOM: the compact card (below), the screensaver main layer (the
   mockup's launcher composition — stats column left, shop rail right,
   entropy strip under the button, honesty strip at the foot) and the
   corner slot (the compact card, trimmed to the slot's height). The
   canvas takes its colors from window.THEME; the plunger and the pad are
   tokens only, so every skin keeps its own key. */
#keyspaceCard{position:relative}
#keyspaceCard .ks-stage{position:relative;height:280px;border-radius:8px;
  border:1px solid var(--border);
  background:radial-gradient(75% 85% at 50% 40%,var(--space-hi),var(--space-lo))}
#keyspaceCard #ksCv{position:absolute;inset:0;width:100%;height:100%;display:block;
  border-radius:8px}
/* the launch pad: a dashed ring, a sunken plinth, the plunger */
#keyspaceCard .ks-pad{position:absolute;left:50%;bottom:-30px;width:124px;height:124px;
  margin-left:-62px;border-radius:50%;border:1px dashed var(--border-hi);
  display:flex;align-items:center;justify-content:center}
#keyspaceCard .ks-plinth{position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--slab-hi),var(--bg) 72%);
  border:1px solid var(--border);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.9),0 0 0 4px color-mix(in srgb,var(--panel2) 90%,transparent),0 0 0 5px var(--border)}
#keyspaceCard .ks-btn{position:relative;width:88px;height:88px;border-radius:50%;border:0;
  padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font:700 11px var(--mono);letter-spacing:.2em;
  color:color-mix(in srgb,var(--acc) 18%,#000);-webkit-user-select:none;user-select:none;
  background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--acc) 58%,#fff) 0,
    color-mix(in srgb,var(--acc) 84%,#fff) 22%,var(--acc) 42%,
    color-mix(in srgb,var(--acc) 72%,#000) 78%,color-mix(in srgb,var(--acc) 54%,#000) 100%);
  box-shadow:0 7px 0 color-mix(in srgb,var(--acc) 42%,#000),0 9px 0 color-mix(in srgb,var(--acc) 26%,#000),
    0 16px 26px rgba(0,0,0,.7),0 0 26px color-mix(in srgb,var(--acc) 32%,transparent),
    inset 0 -7px 13px rgba(0,0,0,.38),inset 0 6px 10px rgba(255,255,255,.28);
  transition:transform .06s ease-out,box-shadow .06s ease-out,filter .06s}
#keyspaceCard .ks-btn span{font:500 8px var(--mono);letter-spacing:.1em;text-transform:none;
  color:color-mix(in srgb,var(--acc) 30%,#000);font-variant-numeric:tabular-nums}
#keyspaceCard .ks-btn:hover{filter:brightness(1.06)}
#keyspaceCard .ks-btn:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
#keyspaceCard .ks-btn.down{transform:translateY(6px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--acc) 42%,#000),0 3px 0 color-mix(in srgb,var(--acc) 26%,#000),
    0 6px 12px rgba(0,0,0,.7),0 0 56px color-mix(in srgb,var(--acc) 70%,transparent),
    inset 0 -4px 10px rgba(0,0,0,.45),inset 0 6px 10px rgba(255,255,255,.2)}
#keyspaceCard .ks-btn::before{content:"";position:absolute;inset:-12px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 45%,transparent) 40%,transparent 70%);
  animation:ksBreathe 3.6s ease-in-out infinite}
#keyspaceCard .ks-btn:disabled::before{animation:none;opacity:.2}
#keyspaceCard .ks-btn::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--acc);opacity:0;pointer-events:none}
#keyspaceCard .ks-btn.pulse::after{animation:ksRing .55s ease-out}
@keyframes ksRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes ksBreathe{0%,100%{opacity:.45}50%{opacity:1}}
/* a funded hit: the banner over the sky */
#keyspaceCard .ks-hit{position:absolute;left:50%;top:14%;transform:translateX(-50%);
  z-index:2;pointer-events:none;text-align:center;font:700 12px var(--mono);
  letter-spacing:.3em;color:var(--hold);border:2px solid var(--hold);padding:6px 12px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);max-width:92%;
  text-shadow:0 0 18px color-mix(in srgb,var(--hold) 80%,transparent)}
#keyspaceCard .ks-hit small{display:block;font:500 9px var(--mono);letter-spacing:.08em;
  color:var(--ink);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#keyspaceCard .ks-lab{font:600 9px var(--mono);color:var(--muted);letter-spacing:.16em}
#keyspaceCard .ks-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:40px;padding-top:11px;border-top:1px solid var(--border)}
#keyspaceCard .ks-counters span{font:9px var(--mono);color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase}
#keyspaceCard .ks-counters b{display:block;font:600 14px var(--mono);color:var(--ink);
  margin-top:3px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
#keyspaceCard .ks-counters div:nth-child(n+3) b{color:var(--hold)}
#keyspaceCard .ks-status{font:10px var(--mono);color:var(--muted);margin-top:9px;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;min-height:15px;line-height:1.5;
  overflow-wrap:anywhere}
#keyspaceCard .ks-odds{font:9px var(--mono);color:var(--muted);margin-top:4px;
  letter-spacing:.02em;line-height:1.6}
/* the entropy strip: 32 × 8 cells, one per bit of the key just drawn */
#keyspaceCard .ks-ent{margin-top:10px;padding:7px 10px 8px;border-radius:8px;
  border:1px solid var(--border);background:color-mix(in srgb,var(--bg) 70%,transparent)}
#keyspaceCard .ks-entrow{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;margin-bottom:6px}
#keyspaceCard .ks-entrow .ks-lab{text-transform:none;letter-spacing:.1em}
#keyspaceCard #ksEntSt{font:9px var(--mono);color:var(--acc);letter-spacing:.08em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
#keyspaceCard #ksBits{display:block;width:100%;height:40px}
#keyspaceCard .ks-latest{margin-top:10px;padding:8px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--border);
  overflow:hidden}
#keyspaceCard .ks-latest code{display:block;font:10px var(--code);color:var(--ink);
  margin-top:4px;word-break:break-all;line-height:1.5}
#keyspaceCard .ks-latest ul{list-style:none;margin-top:5px}
#keyspaceCard .ks-latest li{display:flex;gap:8px;align-items:baseline;font:9px var(--mono);
  color:var(--muted);line-height:1.6;min-width:0}
#keyspaceCard .ks-latest li span{flex:none;width:96px;letter-spacing:.04em}
#keyspaceCard .ks-latest li b{font-weight:500;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* the veil: no telescope, no reading — the key itself is not even in the DOM */
#keyspaceCard .ks-veil code,#keyspaceCard .ks-veil li b{filter:blur(4px);
  user-select:none;opacity:.7}
#keyspaceCard .ks-shop{display:flex;flex-direction:column;gap:5px;margin-top:11px}
#keyspaceCard .ks-shophead{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;padding:0 2px 2px}
#keyspaceCard .ks-bank{font:9px var(--mono);color:var(--muted);letter-spacing:.06em;
  white-space:nowrap}
#keyspaceCard .ks-bank b{font:700 12px var(--mono);color:var(--hold);
  font-variant-numeric:tabular-nums}
#keyspaceCard .ks-up{display:grid;grid-template-columns:78px 1fr auto;gap:8px;
  align-items:center;text-align:left;padding:6px 9px;letter-spacing:.04em;font-size:9px}
#keyspaceCard .ks-upname{font-weight:700;letter-spacing:.14em;color:var(--ink)}
#keyspaceCard .ks-upstate{font-weight:400;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#keyspaceCard .ks-price{font-weight:700;color:var(--hold);white-space:nowrap;
  font-variant-numeric:tabular-nums}
#keyspaceCard .ks-up.poor{opacity:.5;cursor:default}
#keyspaceCard .ks-up.on .ks-price{color:var(--acc)}
#keyspaceCard .ks-astro{margin-top:11px}
#keyspaceCard .ks-astro summary{font:600 9px var(--mono);color:var(--muted);
  letter-spacing:.14em;cursor:pointer;list-style:none;text-transform:uppercase}
#keyspaceCard .ks-astro summary::-webkit-details-marker{display:none}
#keyspaceCard .ks-astro summary::before{content:"▸ ";color:var(--hold)}
#keyspaceCard .ks-astro[open] summary::before{content:"▾ "}
#keyspaceCard .ks-astro ul{list-style:none;margin-top:6px;display:flex;
  flex-direction:column;gap:4px}
#keyspaceCard .ks-astro li{font:9px var(--mono);color:var(--muted);line-height:1.55;
  letter-spacing:.02em;padding-left:10px;text-indent:-10px}
#keyspaceCard .ks-honest{text-align:left;margin-top:11px;padding-top:9px;
  border-top:1px solid var(--border);line-height:1.6}
/* skins: flat ones drop the glow, arcade squares the key, gilded casts it in gold */
html[data-theme="noir"] #keyspaceCard .ks-btn,
html[data-theme="drafting"] #keyspaceCard .ks-btn,
html[data-theme="arcade"] #keyspaceCard .ks-btn{
  box-shadow:0 7px 0 color-mix(in srgb,var(--acc) 42%,#000),0 9px 0 color-mix(in srgb,var(--acc) 26%,#000)}
html[data-theme="noir"] #keyspaceCard .ks-btn::before,
html[data-theme="drafting"] #keyspaceCard .ks-btn::before,
html[data-theme="arcade"] #keyspaceCard .ks-btn::before{animation:none;opacity:.35}
html[data-theme="arcade"] #keyspaceCard .ks-btn{border-radius:0;background:var(--acc);
  box-shadow:4px 4px 0 var(--border-hi);font-family:var(--pixel);font-size:9px;letter-spacing:.06em}
html[data-theme="arcade"] #keyspaceCard .ks-btn::before,
html[data-theme="arcade"] #keyspaceCard .ks-btn::after{display:none}
html[data-theme="arcade"] #keyspaceCard .ks-btn.down{transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--border-hi)}
html[data-theme="arcade"] #keyspaceCard .ks-pad,
html[data-theme="arcade"] #keyspaceCard .ks-plinth{border-radius:0}
html[data-theme="arcade"] #keyspaceCard .ks-stage,
html[data-theme="arcade"] #keyspaceCard #ksCv,
html[data-theme="arcade"] #keyspaceCard .ks-latest,
html[data-theme="arcade"] #keyspaceCard .ks-ent{border-radius:0}
/* an owned row inverts to the ink fill in arcade: its text goes dark */
html[data-theme="arcade"] #keyspaceCard .ks-up.on .ks-upname,
html[data-theme="arcade"] #keyspaceCard .ks-up.on .ks-upstate,
html[data-theme="arcade"] #keyspaceCard .ks-up.on .ks-price{color:var(--bg)}
html[data-theme="gilded"] #keyspaceCard .ks-btn{color:#000;
  background:radial-gradient(circle at 50% 28%,var(--gold-hi) 0,var(--gold) 45%,var(--gold-lo) 100%);
  box-shadow:0 7px 0 #6E5A33,0 9px 0 #3E3320,0 16px 26px rgba(0,0,0,.7),
    inset 0 -7px 13px rgba(0,0,0,.3),inset 0 6px 10px rgba(255,255,255,.35)}
html[data-theme="gilded"] #keyspaceCard .ks-btn span{color:#000;opacity:.7}
html[data-theme="gilded"] #keyspaceCard .ks-btn::before{animation:none;opacity:.25;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 45%,transparent) 40%,transparent 70%)}
html[data-theme="gilded"] #keyspaceCard .ks-btn::after{border-color:var(--gold)}
html[data-theme="gilded"] #keyspaceCard .ks-stage{border-color:transparent}
html[data-theme="gilded"] #keyspaceCard .ks-latest,
html[data-theme="gilded"] #keyspaceCard .ks-ent{background:var(--fill);border-color:transparent}
html[data-theme="gilded"] #keyspaceCard .ks-bank b{color:var(--ink)}
/* the screensaver MAIN layer: the launcher composition, every part placed */
#ss .ss-main #keyspaceCard{position:relative;overflow:hidden}
#ss .ss-main #keyspaceCard .cardtitle{position:absolute;top:10px;left:16px;right:16px;
  margin:0;z-index:3}
#ss .ss-main #keyspaceCard .ks-stage{position:absolute;inset:0;height:auto;border:0;
  border-radius:0;background:transparent}
#ss .ss-main #keyspaceCard #ksCv{border-radius:0}
#ss .ss-main #keyspaceCard .ks-pad{bottom:112px;width:210px;height:210px;margin-left:-105px}
#ss .ss-main #keyspaceCard .ks-pad::before{content:"LAUNCH PAD";position:absolute;top:-16px;
  left:50%;transform:translateX(-50%);font:9px var(--mono);letter-spacing:.2em;color:var(--muted)}
#ss .ss-main #keyspaceCard .ks-plinth{inset:12px}
#ss .ss-main #keyspaceCard .ks-btn{width:150px;height:150px;font-size:13px;letter-spacing:.24em}
#ss .ss-main #keyspaceCard .ks-btn span{font-size:9px}
#ss .ss-main #keyspaceCard .ks-btn::before{inset:-16px}
#ss .ss-main #keyspaceCard .ks-hit{top:16%;font-size:18px;padding:8px 18px}
#ss .ss-main #keyspaceCard .ks-hit small{font-size:10px;white-space:normal}
#ss .ss-main #keyspaceCard .ks-counters{position:absolute;left:18px;top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;width:160px;
  margin:0;padding:0;border:0;z-index:2}
#ss .ss-main #keyspaceCard .ks-counters div{padding:7px 11px;border:1px solid var(--border);
  border-radius:8px;background:color-mix(in srgb,var(--panel) 55%,transparent)}
#ss .ss-main #keyspaceCard .ks-counters span{display:block;order:2;margin-top:2px}
#ss .ss-main #keyspaceCard .ks-counters b{font-size:19px;margin:0}
#ss .ss-main #keyspaceCard .ks-counters div{display:flex;flex-direction:column}
#ss .ss-main #keyspaceCard .ks-odds{position:absolute;top:46px;left:50%;transform:translateX(-50%);
  margin:0;z-index:2;text-align:center;max-width:70%;font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
/* the engine/explorer state already rides in the title's tlink here */
#ss .ss-main #keyspaceCard .ks-status{display:none}
#ss .ss-main #keyspaceCard .ks-ent{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  width:336px;margin:0;z-index:2;background:color-mix(in srgb,var(--panel) 85%,transparent)}
#ss .ss-main #keyspaceCard #ksBits{height:48px}
#ss .ss-main #keyspaceCard .ks-latest{position:absolute;left:18px;bottom:44px;width:336px;
  margin:0;z-index:2;background:color-mix(in srgb,var(--panel) 85%,transparent)}
#ss .ss-main #keyspaceCard .ks-shop{position:absolute;right:18px;top:50%;
  transform:translateY(-50%);width:300px;margin:0;z-index:2}
#ss .ss-main #keyspaceCard .ks-up{background:color-mix(in srgb,var(--panel) 82%,transparent)}
#ss .ss-main #keyspaceCard .ks-astro{position:absolute;right:18px;bottom:44px;width:300px;
  margin:0;z-index:2;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:color-mix(in srgb,var(--panel) 85%,transparent)}
#ss .ss-main #keyspaceCard .ks-honest{position:absolute;left:0;right:0;bottom:12px;
  margin:0;padding:0;border:0;text-align:center;z-index:2}
/* a corner slot: the compact card, trimmed to the slot */
#ss .ss-slot.lift #keyspaceCard .ks-stage{height:150px}
#ss .ss-slot.lift #keyspaceCard .ks-pad{width:84px;height:84px;margin-left:-42px;bottom:-20px}
#ss .ss-slot.lift #keyspaceCard .ks-plinth{inset:5px}
#ss .ss-slot.lift #keyspaceCard .ks-btn{width:60px;height:60px;font-size:8px;letter-spacing:.14em}
#ss .ss-slot.lift #keyspaceCard .ks-btn span{font-size:6px}
#ss .ss-slot.lift #keyspaceCard .ks-counters{margin-top:26px}
#ss .ss-slot.lift #keyspaceCard .ks-odds,#ss .ss-slot.lift #keyspaceCard .ks-ent,
#ss .ss-slot.lift #keyspaceCard .ks-latest,#ss .ss-slot.lift #keyspaceCard .ks-shop,
#ss .ss-slot.lift #keyspaceCard .ks-astro,#ss .ss-slot.lift #keyspaceCard .ks-honest{display:none}
html[data-motion="reduce"] #keyspaceCard .ks-btn{transition:none}
html[data-motion="reduce"] #keyspaceCard .ks-btn::before{animation:none;opacity:.6}
html[data-motion="reduce"] #keyspaceCard .ks-btn.pulse::after{animation:none}
html[data-motion="reduce"] #keyspaceCard .ks-btn.down{transform:none}

/* ==================== appearance themes ==================== */
/* switcher: a palette button + popover in the header */
.themewrap{position:relative;display:inline-flex}
.thememenu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:220px;padding:6px;border-radius:10px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border-hi);
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2px}
.thememenu[hidden]{display:none}
.tm-item{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;
  gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;
  padding:7px 9px;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s}
.tm-item:hover{border-color:var(--border-hi);
  background:color-mix(in srgb,var(--muted) 8%,transparent)}
.tm-item.on{border-color:var(--border-hi);
  background:color-mix(in srgb,var(--muted) 12%,transparent)}
.tm-dots{display:inline-flex;gap:3px;align-self:center}
.tm-dots i{width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18)}
.tm-name{font:700 10px var(--mono);letter-spacing:.14em;color:var(--ink);white-space:nowrap}
.tm-sub{font:9px var(--mono);color:var(--muted);letter-spacing:.03em;
  white-space:nowrap}
.tm-item.on .tm-name::after{content:" ✓";color:var(--acc)}

/* midnight is the default — its palette is the :root block at the top */

/* ---------- noir — zero chroma · one hard light ----------
   A gelatin-silver print. Every tone is a pure gray ranked by luminance:
   accumulate is the hard white light, DCA silver, HOLD sits in the register
   of labels, and distribute is deep shadow — pinned at the darkest gray that
   still clears AA on the panel — cut with venetian-blind stripes on the alarm
   end of every rail and the sell ground of the pressure bars. One overhead
   lamp (a single body wash, a lit top hairline on every card); no bloom. */
html[data-theme="noir"]{
  --bg:#000000; --panel:#0E0E0E; --panel2:#090909; --border:#202020;
  --border-hi:#3A3A3A; --ink:#F2F2F2; --muted:#9A9A9A;
  --acc:#FFFFFF; --dca:#D2D2D2; --hold:#A6A6A6; --dist:#7B7B7B; --blue:#C4C4C4;
  --grad1:#161616; --grad2:#000000;
  --slab-hi:#222222; --slab-lo:#111111;
  --space-hi:#121212; --space-lo:#000000;
  --globe-a:#1C1C1C; --globe-b:#0E0E0E; --globe-c:#040404;
}
/* hard light: every glow and halo is off; the sats button stops breathing
   (the live dots keep their pulse — that is status, not bloom) */
html[data-theme="noir"] #riskBig,
html[data-theme="noir"] #levCard .lev-frost,
html[data-theme="noir"] .brand .mark,
html[data-theme="noir"] #donate .cardtitle .mark,
html[data-theme="noir"] #moscowCard .mt-c,
html[data-theme="noir"] #whaleCard .wrow.mega .wamt,
html[data-theme="noir"] #graffCard .gtag b,
html[data-theme="noir"] #lnCard .ln-cap b,
html[data-theme="noir"] #levCard #levApr{text-shadow:none!important}
html[data-theme="noir"] .rail,
html[data-theme="noir"] .livedot,
html[data-theme="noir"] .wsdot.live,
html[data-theme="noir"] .presence .pdot,
html[data-theme="noir"] .exchip.live .dot,
html[data-theme="noir"] .iconbtn[aria-pressed="true"],
html[data-theme="noir"] .ss-rail i,
html[data-theme="noir"] #ladderCard .lbar i,
html[data-theme="noir"] #epochCard .ep-stack i,
html[data-theme="noir"] #levCard .lev-liq,
html[data-theme="noir"] #levCard .lev-vtick,
html[data-theme="noir"] #levCard .lp-ball,
html[data-theme="noir"] #ladderCard .lspot,
html[data-theme="noir"] .satsbtn:hover,
html[data-theme="noir"] .don-qr a:hover{box-shadow:none!important}
html[data-theme="noir"] .marker{filter:none}
html[data-theme="noir"] .satsbtn,
html[data-theme="noir"] #lnCard .ln-cap b.zap{animation:none}
/* the lamp is overhead: every card's top hairline catches it */
html[data-theme="noir"] .card{background:var(--panel);border-top-color:var(--border-hi)}
html[data-theme="noir"] .banner{border-left:3px solid var(--ink)}
/* quiet the LAB badge — silver would shout in a gray room */
html[data-theme="noir"] .lab{color:var(--muted);border-color:var(--border-hi);opacity:1}
/* the shadow tone has to carry at 9–11px: an outlined pill on the bare
   panel and the zone strip at full opacity */
html[data-theme="noir"] .pill{background:transparent}
html[data-theme="noir"] .zonestrip span{opacity:1}
/* the alarm carries texture, not hue: venetian-blind shadow cuts the
   distribute end of every rail and the sell ground of the pressure bars */
html[data-theme="noir"] .rail::after,
html[data-theme="noir"] .ss-rail::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(0,0,0,.55) 3px 5px);
  -webkit-mask-image:linear-gradient(90deg,transparent 58%,#000 85%);
  mask-image:linear-gradient(90deg,transparent 58%,#000 85%)}
html[data-theme="noir"] .pressbar,
html[data-theme="noir"] .callbar,
html[data-theme="noir"] .ss-pressbar{background:
  repeating-linear-gradient(-45deg,transparent 0 3px,rgba(0,0,0,.55) 3px 5px),
  color-mix(in srgb,var(--dist) 30%,var(--bg))}

/* ---------- outrun — indigo night · neon sunset ----------
   Synthwave. An indigo-violet room with plum panels; cyan is the cool "go",
   a sunset red is the hot alarm, and the ramp between them runs cyan →
   orchid → hot pink → red (cold → hot). A magenta perspective grid drives
   toward the viewer beneath the cards and vanishes into a pink sun low on
   the screen. Skin-added glow is budgeted to the brand mark and the zone
   pill (the hero number keeps its zone glow), and the hero number leans
   like an outrun title card. */
html[data-theme="outrun"]{
  --bg:#100826; --panel:#1C1042; --panel2:#160C36; --border:#31215F;
  --border-hi:#4B3691; --ink:#F3ECFF; --muted:#9490BD;
  --acc:#3DF2FF; --dca:#D49BFF; --hold:#FF5FB4; --dist:#F2462F; --blue:#6E7BFF;
  --grad1:#2B1160; --grad2:#0B1740;
  --slab-hi:#2A1A5C; --slab-lo:#1B1040;
  --space-hi:#1A0F3E; --space-lo:#0B0620;
  --globe-a:#241552; --globe-b:#170C38; --globe-c:#0B0620;
  --radius:8px;
  --grid-line:rgba(255,95,180,.22); --grid-sun:rgba(255,95,180,.32);
}
/* the horizon: a perspective grid painted under the content (z-index:-1 sits
   above the propagated body background and below every card) and a pink sun
   where the lines vanish; the drive is one cell per loop so the stripes never
   jump, and the mask fades the plane out before its far edge and corners */
html[data-theme="outrun"] body::before{content:"";position:fixed;left:-50vw;right:-50vw;
  bottom:-4vh;height:84vh;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 72px);
  -webkit-mask-image:linear-gradient(to top,#000 55%,transparent 80%);
  mask-image:linear-gradient(to top,#000 55%,transparent 80%);
  transform-origin:50% 100%;
  transform:perspective(720px) rotateX(52deg) translateY(0)}
html[data-theme="outrun"] body::after{content:"";position:fixed;left:0;right:0;bottom:0;
  height:44vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52vw 18vh at 50% 42%,var(--grid-sun) 0%,transparent 70%),
    linear-gradient(180deg,transparent 0%,var(--bg) 35%,transparent 75%)}
@keyframes outrunDrive{to{transform:perspective(720px) rotateX(52deg) translateY(72px)}}
html[data-motion="full"][data-theme="outrun"] body::before{animation:outrunDrive 6s linear infinite}
/* surfaces: sharper corners, a violet-black shadow so cards float over the grid */
html[data-theme="outrun"] .card{box-shadow:0 14px 36px rgba(6,2,24,.62)}
html[data-theme="outrun"] .ticker,
html[data-theme="outrun"] .thememenu{border-radius:8px}
/* the sunset rule: every card title opens red → pink → orchid */
html[data-theme="outrun"] .cardtitle::before{
  background:linear-gradient(90deg,var(--dist),var(--hold) 55%,var(--dca))}
/* glow budget #1 — the brand mark is a neon sign */
html[data-theme="outrun"] .brand .mark{color:var(--hold);
  text-shadow:0 0 5px var(--hold),0 0 18px color-mix(in srgb,var(--hold) 70%,transparent)}
html[data-theme="outrun"] #donate .cardtitle .mark{
  text-shadow:0 0 5px var(--hold),0 0 18px color-mix(in srgb,var(--hold) 70%,transparent)}
/* glow budget #2 — the zone pill is a neon tube: outlined on the bare panel
   (the 13% tint would drop the DISTRIBUTE text under AA) with an outer halo */
html[data-theme="outrun"] .pill{background:transparent;
  box-shadow:0 0 12px color-mix(in srgb,var(--zone,transparent) 38%,transparent)}
/* the wink: the hero number leans like an outrun title card — a true italic,
   the 700 italic face rides along in the font link */
html[data-theme="outrun"] #riskBig{font-style:italic;letter-spacing:-.02em}
/* the rail's halo drops (the pill and the number carry the hero glow); the 9px zone words
   and the LAB badge run at full opacity so the red and blue clear AA */
html[data-theme="outrun"] .rail{box-shadow:none}
html[data-theme="outrun"] .zonestrip span{opacity:1;letter-spacing:.08em}
html[data-theme="outrun"] .lab{opacity:1}
/* the footer sits over the grid: give it the plain ground */
html[data-theme="outrun"] footer{background:var(--bg)}
html[data-theme="outrun"] .satslink{opacity:1}
/* pink chrome is loud at 9px: news sources step toward the label gray */
html[data-theme="outrun"] .titem .src{color:color-mix(in srgb,var(--hold) 70%,var(--muted))}

/* ---------- arcade — insert coin · flat primaries ----------
   An 80s cabinet high-score screen. Flat saturated primaries (green is
   "go", red is the alarm, the ramp is the traffic light everyone knows),
   2px bezels, square corners, hard offset shadows instead of glow, and the
   8×8 arcade face on every display role — brand, card titles, the hero
   number, order line, pill, big numerals, menu — while dense rows and axes
   stay Plex Mono so the tape still reads. The rail is four hard-stepped
   bands that follow the user's own thresholds. */
html[data-theme="arcade"]{
  --bg:#08081A; --panel:#12122E; --panel2:#12122E; --border:#2E2E5C;
  --border-hi:#7C7CD8; --ink:#FFFFFF; --muted:#A0A0D0;
  --acc:#2BE34A; --dca:#FFE01A; --hold:#FF8A00; --dist:#FF2E3A; --blue:#3D8BFF;
  --grad1:#0C0C22; --grad2:#08081A;
  --slab-hi:#1E1E48; --slab-lo:#14142E;
  --space-hi:#101030; --space-lo:#06060F;
  --globe-a:#1A1A44; --globe-b:#10102C; --globe-c:#060614;
  --radius:4px;
  --pixel:"Press Start 2P",var(--code);
}
/* pixel grid behind the cards (never over text) */
html[data-theme="arcade"] body::before{content:"";position:fixed;inset:0;z-index:-1;
  pointer-events:none;
  background:radial-gradient(rgba(124,124,216,.14) 1px,transparent 1.5px) 0 0/8px 8px}
/* bezels: flat panels, 2px periwinkle edge, white on hover */
html[data-theme="arcade"] .card{background:var(--panel);border:2px solid var(--border-hi);box-shadow:none}
html[data-theme="arcade"] .card:hover{border-color:var(--ink)}
html[data-theme="arcade"] .ticker,
html[data-theme="arcade"] .thememenu{background:var(--panel);border:2px solid var(--border-hi);
  border-radius:var(--radius);box-shadow:none}
html[data-theme="arcade"] .col{scrollbar-color:var(--border-hi) transparent}
html[data-theme="arcade"] .fabwrap{border-radius:0;background:var(--bg)}
/* scoreboard type: the single-weight 8×8 face, sized so it lands on whole
   device pixels at 2× density; no synthetic bold, no smoothing */
html[data-theme="arcade"] .brand,
html[data-theme="arcade"] .cardtitle,
html[data-theme="arcade"] #riskBig,
html[data-theme="arcade"] #orderLine,
html[data-theme="arcade"] .pill,
html[data-theme="arcade"] .call-verdict b,
html[data-theme="arcade"] #callProb,
html[data-theme="arcade"] #fngVal,
html[data-theme="arcade"] #hvCount,
html[data-theme="arcade"] #tapePrice,
html[data-theme="arcade"] .risksum b,
html[data-theme="arcade"] .tm-name,
html[data-theme="arcade"] .satsbtn,
html[data-theme="arcade"] .banner,
html[data-theme="arcade"] #levCard #levApr,
html[data-theme="arcade"] #ss-risk{font-family:var(--pixel);font-weight:400;
  -webkit-font-smoothing:none;font-smooth:never}
html[data-theme="arcade"] .brand{font-size:12px;letter-spacing:.1em}
html[data-theme="arcade"] .brand .sub{font-family:var(--code);font-size:9px}
html[data-theme="arcade"] .cardtitle{font-size:8px;letter-spacing:.08em}
html[data-theme="arcade"] #riskBig{font-size:44px;line-height:1.1;letter-spacing:0;
  text-shadow:4px 4px 0 var(--blue)!important}
html[data-theme="arcade"] #orderLine{font-size:16px;line-height:1.3}
html[data-theme="arcade"] .call-verdict b{font-size:20px}
html[data-theme="arcade"] #callProb{font-size:12px}
html[data-theme="arcade"] #fngVal{font-size:24px}
html[data-theme="arcade"] #hvCount{font-size:16px;line-height:1.3}
html[data-theme="arcade"] #tapePrice{font-size:16px}
html[data-theme="arcade"] .risksum b{font-size:12px}
html[data-theme="arcade"] .tm-name{font-size:8px;letter-spacing:.06em}
html[data-theme="arcade"] .satsbtn{font-size:8px;letter-spacing:.06em}
html[data-theme="arcade"] .banner{font-size:12px;line-height:1.5}
html[data-theme="arcade"] #levCard #levApr{font-size:20px}
html[data-theme="arcade"] #ss-risk{font-size:40px}
/* hard 2px drops in the ground color (a colored drop under zone-colored type
   fringed the glyphs); the coin ₿ is sunshine yellow */
html[data-theme="arcade"] #tapePrice,
html[data-theme="arcade"] #orderLine,
html[data-theme="arcade"] #callProb{text-shadow:2px 2px 0 var(--bg)}
html[data-theme="arcade"] .brand .mark{color:var(--dca);text-shadow:2px 2px 0 var(--blue)}
html[data-theme="arcade"] #donate .cardtitle .mark{color:var(--dca);text-shadow:none}
html[data-theme="arcade"] .cardtitle::before{width:6px;height:6px;border-radius:0;background:var(--dca)}
/* zone pill: a pixel-edged badge — side shadows round the corners by one pixel */
html[data-theme="arcade"] .pill{background:var(--zone,var(--muted));color:#000;border:0;
  border-radius:0;font-size:8px;letter-spacing:.1em;padding:6px 10px;margin:2px 6px 6px 2px;
  box-shadow:-2px 0 0 var(--zone,var(--muted)),2px 0 0 var(--zone,var(--muted)),
    0 -2px 0 var(--zone,var(--muted)),0 2px 0 var(--zone,var(--muted)),4px 4px 0 var(--bg)}
/* the live dot is an INSERT COIN cursor: a square block that blinks in steps */
html[data-theme="arcade"] .livedot,
html[data-theme="arcade"] .presence .pdot{width:7px;height:11px;border-radius:0;
  animation:arcadeBlink 1s steps(1,end) infinite}
html[data-theme="arcade"] .wsdot,
html[data-theme="arcade"] .exchip .dot,
html[data-theme="arcade"] .tm-dots i{border-radius:0}
html[data-theme="arcade"] .wsdot.live{box-shadow:none;animation:arcadeBlink 1s steps(1,end) infinite}
html[data-theme="arcade"] .exchip.live .dot,
html[data-theme="arcade"] .presence .pdot{box-shadow:none}
@keyframes arcadeBlink{50%{opacity:0}}
html[data-motion="reduce"][data-theme="arcade"] .livedot,
html[data-motion="reduce"][data-theme="arcade"] .wsdot.live,
html[data-motion="reduce"][data-theme="arcade"] .presence .pdot{animation:none}
/* rails: four hard-stepped bands on the user's thresholds (--z1/--z2/--z3 are
   set from the rules by renderHero), no gradient, no bloom; the Fear & Greed
   meter is a sentiment scale, so it steps on fixed quartiles instead */
html[data-theme="arcade"] .rail:not(.rail-sm),
html[data-theme="arcade"] .ss-rail{border-radius:0;box-shadow:none;
  background:linear-gradient(90deg,var(--acc) 0 var(--z1,35%),var(--dca) var(--z1,35%) var(--z2,60%),
    var(--hold) var(--z2,60%) var(--z3,80%),var(--dist) var(--z3,80%))}
html[data-theme="arcade"] .rail-sm{border-radius:0;box-shadow:none;
  background:linear-gradient(90deg,var(--acc) 0 25%,var(--dca) 25% 50%,var(--hold) 50% 75%,var(--dist) 75%)}
html[data-theme="arcade"] .marker{filter:none}
html[data-theme="arcade"] .zonestrip span{opacity:1;font-weight:700}
/* health bars: solid green fill on a red ground */
html[data-theme="arcade"] .callbar,
html[data-theme="arcade"] .pressbar,
html[data-theme="arcade"] .ss-pressbar{border-radius:0;background:color-mix(in srgb,var(--dist) 72%,var(--bg))}
html[data-theme="arcade"] .callbar i,
html[data-theme="arcade"] .pressbar i,
html[data-theme="arcade"] .ss-pressbar i{border-radius:0;background:var(--acc)}
html[data-theme="arcade"] .track,html[data-theme="arcade"] .track i{border-radius:0}
/* controls: square, filled when active — menu-highlight style */
html[data-theme="arcade"] .iconbtn,
html[data-theme="arcade"] .segbtn,
html[data-theme="arcade"] .exchip,
html[data-theme="arcade"] input,
html[data-theme="arcade"] .tm-item{border-radius:2px}
html[data-theme="arcade"] .segbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-theme="arcade"] .iconbtn[aria-pressed="true"]{box-shadow:none;background:var(--acc);color:#000}
html[data-theme="arcade"] .tm-item.on{border-color:var(--dca)}
html[data-theme="arcade"] .lab{background:var(--blue);color:#000;border-color:var(--blue);border-radius:0;opacity:1}
html[data-theme="arcade"] .banner{background:var(--hold);border:2px solid var(--hold);color:#000;
  border-radius:2px}
/* send sats is the coin slot: a solid orange key that presses down on hover */
html[data-theme="arcade"] .satsbtn{background:var(--hold);color:#000;border:2px solid var(--hold);
  border-radius:0;animation:none;box-shadow:3px 3px 0 var(--border-hi)}
html[data-theme="arcade"] .satsbtn:hover{background:var(--dca);border-color:var(--dca);color:#000;
  box-shadow:1px 1px 0 var(--border-hi);transform:translate(2px,2px)}
html[data-theme="arcade"] #moscowCard .mt-c,
html[data-theme="arcade"] #whaleCard .wrow.mega .wamt,
html[data-theme="arcade"] #graffCard .gtag b,
html[data-theme="arcade"] #lnCard .ln-cap b,
html[data-theme="arcade"] #levCard #levApr{text-shadow:none!important}
html[data-theme="arcade"] #lnCard .ln-cap b.zap{animation:none}
html[data-theme="arcade"] .ss-rail i,
html[data-theme="arcade"] #ladderCard .lbar i,
html[data-theme="arcade"] #epochCard .ep-stack i,
html[data-theme="arcade"] #levCard .lev-liq,
html[data-theme="arcade"] #levCard .lev-vtick,
html[data-theme="arcade"] #levCard .lp-ball,
html[data-theme="arcade"] #ladderCard .lspot,
html[data-theme="arcade"] .don-qr a:hover{box-shadow:none!important}

/* ---------- thermal — FLIR ironbow · risk is heat ----------
   A heat camera. Risk is temperature: the rail is the full ironbow (cold
   blue → violet → magenta → orange → yellow → white-hot) and the chart
   strip and path, the zone numbers and the F&G value ride its violet →
   magenta → orange → yellow core, so everything reads as a thermogram.
   Cold is safe and the alarm end is hot — this skin deliberately re-learns
   red as "warm, not yet hot". The hero card wears a reticle, the risk
   reads in degrees, the rail marker is a breathing hot spot. Heat blooms,
   so the canvases keep their glow. */
html[data-theme="thermal"]{
  --bg:#07040C; --panel:#110A18; --panel2:#0B0711; --border:#26192F;
  --border-hi:#3D2A4C; --ink:#F6EEDC; --muted:#A99A92;
  --acc:#8F7CFF; --dca:#F0409B; --hold:#FF8A1F; --dist:#FFDF47; --blue:#3FB6FF;
  --grad1:#1C0B30; --grad2:#12061C;
  --slab-hi:#241633; --slab-lo:#170D22;
  --space-hi:#1A0F28; --space-lo:#05030A;
  --globe-a:#20132F; --globe-b:#140A1F; --globe-c:#08040F;
  --white-hot:#FFF8E6;
}
/* viewfinder: a mild lens vignette on the corners, never over the data */
html[data-theme="thermal"] body::after{content:"";position:fixed;inset:0;
  pointer-events:none;z-index:98;
  background:radial-gradient(farthest-corner at 50% 50%,transparent 62%,rgba(3,0,8,.4) 100%)}
/* every card catches a faint heat trace on its top edge */
html[data-theme="thermal"] .card{border-top-color:color-mix(in srgb,var(--hold) 22%,var(--border))}
/* the rail is the full ironbow: cold blue at 0, white-hot at 1 */
html[data-theme="thermal"] .rail,
html[data-theme="thermal"] .ss-rail{background:linear-gradient(90deg,var(--blue),var(--acc) 12%,
  var(--dca) 35%,var(--hold) 60%,var(--dist) 85%,var(--white-hot) 100%)}
html[data-theme="thermal"] .rail{box-shadow:0 0 18px color-mix(in srgb,var(--hold) 18%,transparent)}
/* the marker is a hot spot, not a pointer */
html[data-theme="thermal"] .marker{top:-2px;width:14px;height:14px;border:0;border-radius:50%;
  z-index:1;background:var(--white-hot);filter:none;
  box-shadow:0 0 0 2px var(--bg),0 0 8px 3px var(--white-hot),
    0 0 22px 8px color-mix(in srgb,var(--dist) 55%,transparent)}
html[data-theme="thermal"] .rail-sm .marker{top:-3px}
html[data-theme="thermal"] .ss-rail i{background:var(--white-hot);
  box-shadow:0 0 6px 2px color-mix(in srgb,var(--dist) 70%,transparent)}
@keyframes thermalBreathe{
    0%,100%{box-shadow:0 0 0 2px var(--bg),0 0 8px 3px var(--white-hot),
      0 0 22px 8px color-mix(in srgb,var(--dist) 55%,transparent)}
    50%{box-shadow:0 0 0 2px var(--bg),0 0 12px 4px var(--white-hot),
      0 0 34px 14px color-mix(in srgb,var(--dist) 70%,transparent)}}
html[data-motion="full"][data-theme="thermal"] .marker{animation:thermalBreathe 3.2s ease-in-out infinite}
/* reticle: corner brackets on the hero card */
html[data-theme="thermal"] #hero{position:relative}
html[data-theme="thermal"] #hero::before,
html[data-theme="thermal"] #hero::after{content:"";position:absolute;width:18px;height:18px;
  pointer-events:none;border:2px solid var(--muted);opacity:.7}
html[data-theme="thermal"] #hero::before{top:9px;left:9px;border-right:0;border-bottom:0;
  border-radius:4px 0 0 0}
html[data-theme="thermal"] #hero::after{bottom:9px;right:9px;border-left:0;border-top:0;
  border-radius:0 0 4px 0}
/* the risk reads as a temperature (decorative: hidden from screen readers) */
html[data-theme="thermal"] #riskBig::after{content:"°";content:"°" / "";font-size:.42em;vertical-align:top;
  color:var(--muted);margin-left:.05em;text-shadow:none}
html[data-theme="thermal"] .skel #riskBig::after{color:var(--border)}
/* the zone pill is a thermogram legend swatch: solid zone fill, dark type */
html[data-theme="thermal"] .pill{background:var(--zone,var(--muted));color:var(--bg);
  border-color:transparent;font-weight:700}
/* the 9px zone words at full opacity (violet and magenta need it for AA);
   the LAB badge stays cool and quiet next to the hot signals */
html[data-theme="thermal"] .zonestrip span{opacity:1}
html[data-theme="thermal"] .lab{opacity:.85}

/* ---------- drafting — cyanotype · white pen · red pen ----------
   A drafting sheet. Prussian-blue ground, 16px graph paper on every card,
   a pale blueprint ink for the linework and a pure white pen reserved for
   "go", a highlighter-yellow DCA, ochre HOLD and the drafter's red pencil
   for the alarm — a ramp with no green in it. Card titles are dimension
   lines, the sell ground of every pressure bar is a hatched section, the
   stale notice is a revision cloud, the footer is the title block. A pen
   has no bloom. */
html[data-theme="drafting"]{
  --bg:#071C42; --panel:#0C2C5C; --panel2:#0A2754; --border:#2E5FA3;
  --border-hi:#4F86CF; --ink:#CFDCF7; --muted:#9FB4E0;
  --acc:#FFFFFF; --dca:#F2E28A; --hold:#F4B84A; --dist:#FF7684; --blue:#5FB8FF;
  --grad1:#0E3068; --grad2:#061838;
  --slab-hi:#1A4480; --slab-lo:#10336A;
  --space-hi:#0E3068; --space-lo:#061738;
  --globe-a:#1B4A8C; --globe-b:#123A75; --globe-c:#0A2A5A;
  --grid:rgba(214,230,255,.06); --grid-lo:rgba(214,230,255,.04); --radius:6px;
}
/* the desk: a coarse 96px major grid under the body wash */
html[data-theme="drafting"] body{background:
  repeating-linear-gradient(0deg,var(--grid-lo) 0 1px,transparent 1px 96px),
  repeating-linear-gradient(90deg,var(--grid-lo) 0 1px,transparent 1px 96px),
  radial-gradient(1100px 500px at 75% -12%,var(--grad1) 0%,transparent 60%),
  radial-gradient(900px 600px at -10% 110%,var(--grad2) 0%,transparent 55%),
  var(--bg)}
/* every card is a sheet of 16px graph paper: flat, hairline rule, no shadow */
html[data-theme="drafting"] .card,
html[data-theme="drafting"] dialog,
html[data-theme="drafting"] .ticker{background:
  repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 16px),
  repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 16px),
  var(--panel);box-shadow:none}
html[data-theme="drafting"] .thememenu,
html[data-theme="drafting"] .tip{background:var(--panel)}
html[data-theme="drafting"] .fabwrap{background:color-mix(in srgb,var(--bg) 70%,transparent)}
/* card titles are dimension lines: |——| with end ticks */
html[data-theme="drafting"] .cardtitle::before{width:22px;height:7px;border-radius:0;background:
  linear-gradient(var(--muted),var(--muted)) 0 50%/100% 1px no-repeat,
  linear-gradient(var(--muted),var(--muted)) 0 0/1px 100% no-repeat,
  linear-gradient(var(--muted),var(--muted)) 100% 0/1px 100% no-repeat}
/* a pen has no bloom: every glow and halo is off, the sats button stops breathing */
html[data-theme="drafting"] #riskBig,
html[data-theme="drafting"] .brand .mark,
html[data-theme="drafting"] #donate .cardtitle .mark,
html[data-theme="drafting"] #moscowCard .mt-c,
html[data-theme="drafting"] #whaleCard .wrow.mega .wamt,
html[data-theme="drafting"] #graffCard .gtag b,
html[data-theme="drafting"] #lnCard .ln-cap b,
html[data-theme="drafting"] #levCard #levApr{text-shadow:none!important}
html[data-theme="drafting"] .rail,
html[data-theme="drafting"] .livedot,
html[data-theme="drafting"] .wsdot.live,
html[data-theme="drafting"] .presence .pdot,
html[data-theme="drafting"] .exchip.live .dot,
html[data-theme="drafting"] .iconbtn[aria-pressed="true"],
html[data-theme="drafting"] .ss-rail i,
html[data-theme="drafting"] #ladderCard .lbar i,
html[data-theme="drafting"] #epochCard .ep-stack i,
html[data-theme="drafting"] #levCard .lev-liq,
html[data-theme="drafting"] #levCard .lev-vtick,
html[data-theme="drafting"] #levCard .lp-ball,
html[data-theme="drafting"] #ladderCard .lspot,
html[data-theme="drafting"] .satsbtn:hover,
html[data-theme="drafting"] .don-qr a:hover{box-shadow:none!important}
html[data-theme="drafting"] .marker{filter:none}
html[data-theme="drafting"] .satsbtn,
html[data-theme="drafting"] #lnCard .ln-cap b.zap{animation:none}
/* drafting hardware: square-cornered controls, the zone pill is an inspector's stamp */
html[data-theme="drafting"] .iconbtn,
html[data-theme="drafting"] .segbtn,
html[data-theme="drafting"] .exchip,
html[data-theme="drafting"] .satsbtn,
html[data-theme="drafting"] input{border-radius:3px}
html[data-theme="drafting"] .pill{border-radius:3px;border-width:1.5px;letter-spacing:.16em;
  background:transparent}
html[data-theme="drafting"] .lab{border-radius:2px;opacity:.9}
html[data-theme="drafting"] .zonestrip span{opacity:1}
/* the sell ground of every pressure bar is a hatched section, the way a drafter marks a cut */
html[data-theme="drafting"] .callbar,
html[data-theme="drafting"] .pressbar,
html[data-theme="drafting"] .ss-pressbar{background:
  repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dist) 55%,transparent) 0 1px,transparent 1px 4px),
  color-mix(in srgb,var(--dist) 12%,var(--panel))}
/* the stale notice is a revision cloud: dashed ochre rule around ochre type */
html[data-theme="drafting"] .banner{border:1px dashed var(--hold);border-radius:4px;
  background:color-mix(in srgb,var(--hold) 12%,var(--panel))}
/* the footer is the sheet's title block */
html[data-theme="drafting"] footer{border:1px solid var(--border);padding:6px 10px;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase}
html[data-theme="drafting"] footer .satslink{font-size:9px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- matrix — phosphor green on black ---------- */
html[data-theme="matrix"]{
  --bg:#010401; --panel:#041008; --panel2:#020903; --border:#0D2E17;
  --border-hi:#17542B; --ink:#BFFFD0; --muted:#3F8A57;
  --acc:#00FF6E; --dca:#7DE838; --hold:#D8E23C; --dist:#FF4444; --blue:#38E0C0;
  --grad1:#06180B; --grad2:#030F06;
  --slab-hi:#0A2413; --slab-lo:#051A0C;
  --space-hi:#07200F; --space-lo:#010702;
  --globe-a:#0A2413; --globe-b:#051808; --globe-c:#020B04;
}
/* CRT scanlines over the whole terminal + a hint of phosphor bloom */
html[data-theme="matrix"] body::after{content:"";position:fixed;inset:0;
  pointer-events:none;z-index:98;background:repeating-linear-gradient(0deg,
    rgba(0,255,110,.035) 0 1px,transparent 1px 3px)}
html[data-theme="matrix"] .brand,
html[data-theme="matrix"] .cardtitle{
  text-shadow:0 0 8px color-mix(in srgb,var(--acc) 25%,transparent)}
html[data-motion="full"][data-theme="matrix"] .livedot,
html[data-motion="full"][data-theme="matrix"] .presence .pdot{
    box-shadow:0 0 10px color-mix(in srgb,var(--acc) 80%,transparent)}

/* ---------- gilded — true black · white · gold ----------
   The cash-app read: a pure black ground, flat charcoal surfaces with no
   hairlines, white sans numerals, and solid gold accents budgeted to the
   price line and the call-to-action pill. Data rows stay monospace. The
   risk ramp is drawn from the same gold family: white is "go", then
   champagne, gold, and a deep bronze for the alarm — monotone in luminance,
   so buy reads bright and sell reads dark without a green or a red. */
html[data-theme="gilded"]{
  --bg:#000000; --panel:#141414; --panel2:#141414; --border:#242424;
  --border-hi:#343434; --ink:#FFFFFF; --muted:#8C8C8C;
  --acc:#FFFFFF; --dca:#EFDFAF; --hold:#DEC27F; --dist:#A3803F; --blue:#B9A277;
  --grad1:#000000; --grad2:#000000;
  --slab-hi:#1E1E1E; --slab-lo:#121212;
  --space-hi:#161616; --space-lo:#000000;
  --globe-a:#1C1C1C; --globe-b:#121212; --globe-c:#0A0A0A;
  --gold-hi:#F6EED8; --gold:#DEC27F; --gold-lo:#B08F52;
  --fill:#1F1F1F; --fill-hi:#2A2A2A;       /* control surfaces */
  --mono:var(--sans);                      /* the UI speaks sans… */
  --radius:20px;
}
/* …while anything tabular keeps the true monospace */
html[data-theme="gilded"] #tape,
html[data-theme="gilded"] #callLog,
html[data-theme="gilded"] .comp-head,
html[data-theme="gilded"] .formula,
html[data-theme="gilded"] .dmrow,
html[data-theme="gilded"] .exchip,
html[data-theme="gilded"] .tip,
html[data-theme="gilded"] .blk-hash,
html[data-theme="gilded"] .don-addr code,
html[data-theme="gilded"] #ladderCard .lstrike,
html[data-theme="gilded"] #ladderCard .lpct,
html[data-theme="gilded"] #ladderCard .lspot b,
html[data-theme="gilded"] #moscowCard .mt-clock,
html[data-theme="gilded"] #feeCard .ftrow,
html[data-theme="gilded"] #lnCard #lnTops,
html[data-theme="gilded"] #whaleCard .wlist,
html[data-theme="gilded"] #graffCard .glist,
html[data-theme="gilded"] #levCard .lev-row{--mono:var(--code)}

/* ground + surfaces: flat, borderless, generously rounded */
html[data-theme="gilded"] .card{background:var(--panel);border-color:transparent;
  box-shadow:none}
html[data-theme="gilded"] .card:hover{border-color:transparent;background:var(--panel)}
html[data-theme="gilded"] .ticker,
html[data-theme="gilded"] .thememenu,
html[data-theme="gilded"] dialog{background:var(--panel);border-color:transparent}
html[data-theme="gilded"] .ticker{border-radius:14px}
html[data-theme="gilded"] dialog{border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.8)}
html[data-theme="gilded"] dialog::backdrop{background:rgba(0,0,0,.72)}
html[data-theme="gilded"] .thememenu{border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.7)}
html[data-theme="gilded"] .tm-item{border-radius:10px}
html[data-theme="gilded"] .tm-item:hover,
html[data-theme="gilded"] .tm-item.on{border-color:transparent;background:var(--fill)}
html[data-theme="gilded"] .tm-item.on .tm-name::after{color:var(--gold)}
html[data-theme="gilded"] .tip{background:var(--fill);border-color:transparent;
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
html[data-theme="gilded"] .banner{border-color:transparent;border-radius:14px}
html[data-theme="gilded"] .col{scrollbar-color:var(--fill-hi) transparent}
html[data-theme="gilded"] .col::-webkit-scrollbar-thumb{background:var(--fill-hi)}
html[data-theme="gilded"] .track{background:#262626}
html[data-theme="gilded"] .fabwrap{background:#0A0A0A;border-radius:12px}
html[data-theme="gilded"] .ss-panel{background:rgba(20,20,20,.72);
  border-color:transparent;border-radius:16px}
html[data-theme="gilded"] #whaleCard .wscope{border-color:transparent;
  background:radial-gradient(90% 120% at 50% 50%,#101010 0%,#000 100%)}
html[data-theme="gilded"] #graffCard .gop{border-color:transparent;background:var(--fill)}
html[data-theme="gilded"] #ladderCard .lspot b{border-color:transparent;background:var(--fill-hi)}
html[data-theme="gilded"] #levCard .lev-thermo{border-color:transparent;
  background:var(--fill);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
html[data-theme="gilded"] .don-qr img{border-radius:18px}

/* controls: filled pills instead of outlines */
html[data-theme="gilded"] .iconbtn,
html[data-theme="gilded"] .exchip,
html[data-theme="gilded"] .don-tab,
html[data-theme="gilded"] .don-addr,
html[data-theme="gilded"] .blk-close,
html[data-theme="gilded"] input{border-color:transparent;background:var(--fill)}
html[data-theme="gilded"] .iconbtn{border-radius:999px;padding:7px 9px}
html[data-theme="gilded"] .cardtitle .iconbtn{padding:5px 7px}
html[data-theme="gilded"] .iconbtn:hover,
html[data-theme="gilded"] .exchip:hover,
html[data-theme="gilded"] .don-tab:hover,
html[data-theme="gilded"] .don-addr:hover,
html[data-theme="gilded"] input:hover{border-color:transparent;background:var(--fill-hi)}
html[data-theme="gilded"] .iconbtn[aria-pressed="true"]{color:var(--gold);
  border-color:transparent;background:var(--fill-hi);box-shadow:none}
html[data-theme="gilded"] .don-tab{border-radius:999px}
html[data-theme="gilded"] .don-tab.active{border-color:transparent;
  background:var(--fill-hi);color:var(--gold)}
html[data-theme="gilded"] .don-addr{border-radius:14px}
html[data-theme="gilded"] .don-addr.copied{border-color:transparent;
  background:color-mix(in srgb,var(--acc) 18%,var(--fill))}
html[data-theme="gilded"] .don-qr a:hover{box-shadow:none;opacity:.92}
html[data-theme="gilded"] input{border-radius:12px}
html[data-theme="gilded"] .segbtn{background:transparent;border-color:transparent;
  border-radius:999px;padding:5px 10px;font-size:10px;letter-spacing:0}
html[data-theme="gilded"] .segbtn.on{background:var(--fill-hi);color:var(--ink);
  border-color:transparent;font-weight:700}
html[data-theme="gilded"] .call-actions .segbtn{background:var(--fill)}
html[data-theme="gilded"] .call-actions .segbtn:hover{background:var(--fill-hi)}
html[data-theme="gilded"] .lab{border-color:transparent;background:var(--fill);
  color:var(--muted);opacity:.75;border-radius:999px;padding:2px 7px}
html[data-theme="gilded"] .satsbtn{background:var(--fill);border-color:transparent;
  color:var(--gold);animation:none;letter-spacing:.06em}
html[data-theme="gilded"] .satsbtn:hover{background:var(--fill-hi);
  color:var(--gold-hi);box-shadow:none}
/* gold is the call to action: the zone pill fills solid, black type */
html[data-theme="gilded"] .pill{background:var(--gold);color:#000;
  border-color:transparent;font-weight:700;letter-spacing:.04em;padding:8px 16px}

/* type: white sans numerals, quiet labels; gold only at the brand mark */
html[data-theme="gilded"] .brand{letter-spacing:.1em}
html[data-theme="gilded"] .titem .src{color:var(--muted)}
html[data-theme="gilded"] .brand .mark{color:var(--gold);text-shadow:none}
html[data-theme="gilded"] #donate .cardtitle .mark{color:var(--gold);text-shadow:none}
html[data-theme="gilded"] .cardtitle{font-size:11px;letter-spacing:.1em}
html[data-theme="gilded"] .cardtitle::before{display:none}
html[data-theme="gilded"] #riskBig{font-size:54px;letter-spacing:-.035em;
  text-shadow:none!important}
html[data-theme="gilded"] .hero-btns{flex:none}
html[data-theme="gilded"] #price{color:var(--ink);font-weight:500}
html[data-theme="gilded"] .rail{box-shadow:none}
html[data-theme="gilded"] .marker{filter:none}
html[data-theme="gilded"] .tick{background:var(--panel)}
html[data-theme="gilded"] .zonestrip span{letter-spacing:.04em;font-weight:500;opacity:1}
/* the live dot beside the white price is gold, so it does not vanish into the ink */
html[data-theme="gilded"] .livedot,
html[data-theme="gilded"] .presence .pdot{background:var(--gold)}
html[data-theme="gilded"] #hvCount,
html[data-theme="gilded"] #moscowCard .mt-clock{color:var(--ink)}
html[data-theme="gilded"] #moscowCard .mt-f b{color:var(--ink);
  background:#262626;border-color:transparent}
html[data-theme="gilded"] #moscowCard .mt-f .fl,
html[data-theme="gilded"] #moscowCard .mt-f .fb{background:#1C1C1C}
html[data-theme="gilded"] #moscowCard .mt-f::after{background:var(--panel)}
html[data-theme="gilded"] #moscowCard .mt-c{color:var(--gold);text-shadow:none}
html[data-theme="gilded"] .callbar::after,
html[data-theme="gilded"] .pressbar::after{background:var(--panel)}

/* lab cards: same flat language — no LED glows, brick textures, or
   skeuomorphic gauges; unlit gaps are the card, not the void */
html[data-theme="gilded"] #ladderCard .lbar{background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--dist) 17%,var(--panel)) 0,
    color-mix(in srgb,var(--dist) 17%,var(--panel)) calc(5% - 2px),
    var(--panel) calc(5% - 2px),var(--panel) 5%)}
html[data-theme="gilded"] #ladderCard .lbar i{box-shadow:none;background:
  repeating-linear-gradient(90deg,var(--acc) 0,var(--acc) calc(5% - 2px),
    var(--panel) calc(5% - 2px),var(--panel) 5%)}
html[data-theme="gilded"] #ladderCard .lrail{background:var(--fill);box-shadow:none}
html[data-theme="gilded"] #ladderCard .lspot{box-shadow:none;
  border-top-color:color-mix(in srgb,var(--ink) 35%,transparent)}
html[data-theme="gilded"] #graffCard .glist{background:none}
html[data-theme="gilded"] #graffCard .gtag b{text-shadow:none}
html[data-theme="gilded"] #lnCard .ln-cap b{color:var(--ink);text-shadow:none}
html[data-theme="gilded"] #lnCard .ln-cap b.zap{animation:none}
html[data-theme="gilded"] #lnCard .ln-split{background:#262626}
html[data-theme="gilded"] #levCard #levApr{text-shadow:none!important}
html[data-theme="gilded"] #levCard .lev-liq{box-shadow:none!important}
html[data-theme="gilded"] #levCard .lev-vtick,
html[data-theme="gilded"] #levCard .lp-ball{box-shadow:none}
html[data-theme="gilded"] #whaleCard .wrow.mega{background:var(--fill);border-radius:6px}
html[data-theme="gilded"] #whaleCard .wrow.mega .wamt{text-shadow:none}
html[data-theme="gilded"] #epochCard .ep-stack{background:#262626;box-shadow:none}
html[data-theme="gilded"] #epochCard .ep-stack i{background:var(--gold);box-shadow:none}
/* status dots and markers: solid, no bloom */
html[data-theme="gilded"] .wsdot.live,
html[data-theme="gilded"] .presence .pdot,
html[data-theme="gilded"] .exchip.live .dot,
html[data-theme="gilded"] .ss-rail i{box-shadow:none}
html[data-theme="gilded"] .exchip.conn .dot{border-color:var(--muted)}
/* screensaver captions clear 4.5:1 on the black ground */
html[data-theme="gilded"] .ss-lab.dim{opacity:1}
html[data-theme="gilded"] .ss-hint{opacity:.85}

/* ---------- layout editor ---------- */
/* Edit mode (the grid button in the header): every card grows a bar — grip,
   name, ↑↓◂▸, × — and its body goes pointer-inert so the globe and the 3D
   block cannot capture a drag. The chrome rides .card, .iconbtn and .segbtn,
   so every skin restyles it for free. */
.laytray{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px}
.laytray .lay-msg{font:600 10px var(--mono);letter-spacing:.18em;color:var(--muted);
  margin-right:auto}
.laytray .lay-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.laytray .lay-none{font:10px var(--mono);color:var(--muted);letter-spacing:.06em;opacity:.7}
.lay-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.lay-bar{display:none}
/* inside the card padding on purpose: THERMAL's hero draws reticle corners
   in the padding with ::before/::after */
.editing main .lay-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:4px 4px 4px 8px;border:1px dashed var(--border-hi);border-radius:8px;
  background:color-mix(in srgb,var(--muted) 10%,transparent);
  font:600 10px var(--mono);letter-spacing:.18em;color:var(--ink);flex:none;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.editing main .lay-bar:active{cursor:grabbing}
.editing main .lay-pair{grid-column:1/-1;margin-bottom:0}
.lay-grip{display:inline-flex;color:var(--muted);flex:none}
.lay-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay-btns{display:inline-flex;gap:3px;flex:none}
.lay-bar .iconbtn{padding:2px 6px;line-height:1.3;font:600 11px var(--mono)}
.lay-bar .iconbtn[aria-disabled="true"]{opacity:.3;cursor:default}
.lay-bar .iconbtn[aria-disabled="true"]:hover{color:var(--muted);border-color:var(--border)}
.editing main .card>:not(.lay-bar){pointer-events:none}
.editing main .card{user-select:none;-webkit-user-select:none}
.editing main .card.lay-drag{opacity:.35}
/* an emptied column stays a drop target (outline: no reflow on toggle) */
.editing main .col{min-height:120px;outline:1px dashed transparent;outline-offset:-1px;
  border-radius:var(--radius)}
.editing main .col:not(:has(>:not([hidden]))){outline-color:var(--border-hi)}
.lay-ghost{position:fixed;z-index:70;pointer-events:none;padding:14px 18px;
  border:1px solid var(--border-hi);border-radius:var(--radius);
  background:color-mix(in srgb,var(--panel) 85%,transparent);
  box-shadow:0 18px 48px rgba(0,0,0,.5);overflow:hidden;
  font:600 10px var(--mono);letter-spacing:.18em;color:var(--ink);will-change:transform}
/* the split row: a lone member goes full width (the other hidden, or pulled
   out); both gone and the wrapper collapses — the JS sets `hidden` too, this
   also covers the feed writers that hide a card on their own */
.row2:has(>.card[hidden]),.row2:not(:has(>.card~.card)){grid-template-columns:1fr}
.row2:not(:has(>.card:not([hidden]))){display:none}
@media (max-width:1180px){
  .lay-bar .lay-lr{display:none}          /* one stacked list: only ↑↓ */
}
html[data-motion="reduce"] .editing main .card,
html[data-motion="reduce"] .lay-bar .iconbtn,
html[data-motion="reduce"] .lay-chip,
html[data-motion="reduce"] .lay-ghost{transition:none}
/* ==================== screensaver setup ==================== */
/* screensaver.js composes the stage: #ssMain hosts a card lifted out of its
   column (the globe paints #ssCv underneath everything instead), the slots
   host a ghost fragment or a lifted card. The main region keeps clear of
   whatever the slots hold — the script stamps data-l/r/t/b on #ss. */
#ss{--ss-l:40px;--ss-r:40px;--ss-t:40px;--ss-b:40px}
#ss[data-l="lift"]{--ss-l:400px}
#ss[data-r="ghost"]{--ss-r:380px}
#ss[data-r="lift"]{--ss-r:400px}
#ss[data-t="ghost"]{--ss-t:140px}
#ss[data-b="ghost"]{--ss-b:130px}
.ss-main{position:absolute;z-index:1;display:flex;flex-direction:column;
  left:var(--ss-l);right:var(--ss-r);top:var(--ss-t);bottom:var(--ss-b)}
.ss.awake{cursor:auto}
.ss-chip{background:transparent;border:1px solid var(--border-hi);color:var(--ink);
  border-radius:999px;padding:4px 11px;cursor:pointer;
  font:600 9px var(--mono);letter-spacing:.14em;
  opacity:0;pointer-events:none;transition:opacity .25s}
.ss.awake .ss-hint,.ss-hint:hover{opacity:1}
.ss.awake .ss-chip,.ss-hint:hover .ss-chip{opacity:1;pointer-events:auto}
.ss-chip:hover{border-color:var(--ink)}
html[data-motion="reduce"] .ss-chip{transition:none}

/* a lifted MAIN card: no panel chrome, the space gradient is its ground,
   and its plot fills the region (every canvas redraws on the synthetic
   resize the script fires). #ss out-specifies the per-skin .card rules. */
#ss .ss-main > .card{flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;background:transparent;border:0;box-shadow:none;
  border-radius:0;padding:0}
#ss .ss-main > .card:hover{border-color:transparent}
#ss .ss-main .cardtitle .iconbtn{display:none}
#ss .ss-main .cwrap{flex:1;height:auto;min-height:0}
#ss .ss-main .dwrap{flex:1;height:auto;min-height:0}
#ss .ss-main .fabwrap{flex:1;height:auto;min-height:0;--fab-cell:8px}
#ss .ss-main #tape{flex:none;max-height:150px}
#ss .ss-main .blkwrap{flex:1;min-height:0}
#ss .ss-main .blkwrap.full{position:absolute;inset:0;z-index:1;
  border-radius:0;min-height:0}
#ss .ss-main .blk-close{display:none}
#ss .ss-main #conv{flex:1;height:auto;min-height:0}
#ss .ss-main #feeCv{flex:1;height:auto;min-height:0}
#ss .ss-main #rulersCard .rlwrap{flex:1;height:auto;min-height:0}
#ss .ss-main #epochCard .ep-dial{flex:1;height:auto;min-height:0}
#ss .ss-main #whaleCard .wscope{flex:1;height:auto;min-height:0}
/* DOM-only cards have nothing to stretch: scale them up whole */
#ss .ss-main > .card.ss-zoom{flex:none;zoom:var(--ss-zoom,1.5);margin:auto;
  width:min(100%,560px);max-height:100%}
#ss .ss-main > #moscowCard{--ss-zoom:2.2}
#ss .ss-main > #lnCard{--ss-zoom:1.2}

/* a lifted card in a slot: a column-width glass panel, cropped to a corner
   height; it takes the pointer so its own buttons work without leaving */
#ss .ss-slot.lift{width:340px;pointer-events:auto}
#ss .ss-side.lift{bottom:auto;top:50%;transform:translateY(-50%)}
#ss .ss-slot.lift > .card{flex:none;max-height:30vh;overflow:hidden;
  background:color-mix(in srgb,var(--bg) 28%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 55%,transparent);
  border-radius:10px;box-shadow:none;padding:12px 14px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#ss .ss-slot.lift > .card.grow{height:30vh;min-height:0;display:flex;
  flex-direction:column}
#ss .ss-slot.lift .cardtitle .iconbtn{display:none}
#ss .ss-slot.lift .cwrap{flex:1;height:auto;min-height:0}
#ss .ss-slot.lift .fabwrap{height:100px}
#ss .ss-slot.lift .exchips,#ss .ss-slot.lift .fabstats{display:none}
#ss .ss-slot.lift #tape{max-height:none}
#ss .ss-slot.lift > .blkwrap{height:30vh;min-height:0;flex:none}
#ss .ss-slot.lift .dwrap{height:120px}
#ss .ss-slot.lift #conv{height:120px}
#ss .ss-slot.lift #feeCv{height:110px}
#ss .ss-slot.lift #rulersCard .rlwrap{height:130px}
#ss .ss-slot.lift #epochCard .ep-dial{height:130px}
#ss .ss-slot.lift #whaleCard .wscope{height:90px}
@media (max-width:1180px){
  #ss{--ss-l:18px;--ss-r:18px;--ss-t:18px;--ss-b:18px}
  #ss[data-l="lift"]{--ss-l:min(380px,42vw)}
  #ss[data-r="ghost"]{--ss-r:336px}
  #ss[data-r="lift"]{--ss-r:min(380px,42vw)}
  #ss[data-t="ghost"]{--ss-t:110px}
  #ss[data-b="ghost"]{--ss-b:100px}
  #ss .ss-slot.lift{width:min(340px,40vw)}
  .ss-side{right:18px;bottom:96px}
}
@media (max-width:900px){
  #ss .ss-slot.lift{display:none}
  #ss[data-l],#ss[data-r]{--ss-l:18px;--ss-r:18px}
}

/* the header gear: appears under the screensaver button on hover/focus */
.sswrap{position:relative;display:inline-flex}
.ss-gearwrap{position:absolute;top:100%;right:0;padding-top:4px;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .15s}
.sswrap:hover .ss-gearwrap,.sswrap:focus-within .ss-gearwrap{opacity:1;
  pointer-events:auto}
.ss-gearwrap .iconbtn{padding:5px 7px;
  background:linear-gradient(180deg,var(--panel),var(--panel2))}

/* the setup dialog */
#ssSetup select{background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--ink);font:600 12px var(--mono);
  padding:8px 10px;width:100%;cursor:pointer}
#ssSetup select:hover{border-color:var(--border-hi)}
#ssSetup .ss-mainlab{grid-column:1 / -1}
.ss-actions{display:flex;gap:8px;margin-top:16px}
.ss-actions .segbtn{padding:6px 12px;font-size:10px}