/* ═══════════════════════════════════════════════════════════════════════════
   MOTUSLIVE — the interstellar build. Davara Distinct V3 · Nocturne, deepened
   to the VOID: the page is space itself, the stage is the event horizon, and
   everything on screen orbits the same gravity.
   THE CONTRAST LAW IS ABSOLUTE: body #F5F7FB, secondary #DEE5EF (near-bone,
   never grey), labels #A6DDE6 — verified 7:1+ on every surface. Electric hues
   are artwork only, never text. Long-radius squircles everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --void: #04060A; --deep: #070A10; --ground: #0B0F16; --panel: #10151E; --panel2: #161C27;
  --ink: #F5F7FB; --ink2: #DEE5EF; --label: #A6DDE6; --accent-t: #7BE3EA;
  --signal-t: #CBBCFF; --gold-t: #F0D48C;
  --cyan: #22D3EE; --azure: #60A5FA; --violet: #A78BFF; --ember: #E879C9; --gold: #E8C46B;
  --dj: var(--violet); --dj2: var(--cyan);
  --r: 30px; --r-sm: 22px; --r-xs: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pulse: 0;                         /* JS writes the beat here — CSS breathes with it */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void); color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(34,211,238,.32); }
h1, h2, h3, h4, .sora { font-family: 'Sora', 'Inter', sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ── THE COSMOS — starfield + gravity swarm, behind everything ── */
#swarm { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* a slow nebula wash so the void is never flat black — artwork, never under text panels */
body::before {
  content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 30% at 78% 12%, color-mix(in srgb, var(--dj) 9%, transparent), transparent 70%),
    radial-gradient(36% 26% at 12% 78%, color-mix(in srgb, var(--dj2) 7%, transparent), transparent 70%);
  filter: blur(60px) saturate(1.3);
  animation: nebula 26s var(--ease) infinite alternate;
  transition: background 1.2s var(--ease);
}
@keyframes nebula { from { transform: translate3d(-1.5%, -1%, 0) } to { transform: translate3d(1.5%, 1.2%, 0) } }

.shell { position: relative; z-index: 1; max-width: 1260px; margin: 0 auto; padding: 0 18px 110px; }

/* ── top bar ── */
.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 2px 12px; }
.brand { font-family: 'Sora'; font-weight: 800; font-size: 20px; letter-spacing: .04em; }
.brand b { color: var(--accent-t); }
.brand .sig { display: inline-block; margin-right: 9px; color: var(--gold-t); }
.live-dot {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  color: var(--label); padding: 9px 16px; border-radius: var(--r-xs);
  background: var(--panel); border: 1px solid rgba(150,200,220,.16);
}
.live-dot i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 14px var(--ember); animation: livepulse 2.8s var(--ease) infinite;
}
.live-dot.off i { background: #7C93A4; box-shadow: none; animation: none; }
@keyframes livepulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.4); opacity: .7 } }
.topbar .spacer { margin-left: auto; }

/* ── squircle buttons — long rounded corners, glow never highlight ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-sm); border: 1px solid rgba(150,200,220,.2);
  background: var(--panel); color: var(--ink); cursor: pointer;
  font-family: 'Sora'; font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  text-decoration: none;
}
.btn:hover, .btn:focus-visible { box-shadow: 0 0 30px rgba(34,211,238,.24); border-color: rgba(34,211,238,.5); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.prime { background: linear-gradient(140deg, rgba(34,211,238,.16), rgba(167,139,255,.15)), var(--panel); border-color: rgba(34,211,238,.42); }
.btn.big { padding: 16px 30px; font-size: 16px; border-radius: 24px; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mini {
  padding: 8px 15px; border-radius: 14px; font-size: 12.5px; font-weight: 600;
  background: var(--panel2); color: var(--ink); border: 1px solid rgba(150,200,220,.18); cursor: pointer;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.mini:hover, .mini:focus-visible { border-color: rgba(34,211,238,.45); box-shadow: 0 0 18px rgba(34,211,238,.16); }

/* ── THE EVENT HORIZON ──────────────────────────────────────────────────────
   ⛔ NO ROTATING RING. A spinning conic border around a frame is banned on
   every project, forever — it is a template effect that fights the content it
   surrounds. What replaces it is light behaving like light: a still bloom that
   BREATHES on the beat (opacity + blur only, no transform), so the horizon
   glows from within rather than being chased around by a highlight. */
.horizon { position: relative; margin: 14px auto 0; }
.horizon::before {
  content: ''; position: absolute; inset: -14px; border-radius: 48px; z-index: 0;
  background:
    radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--dj2) 55%, transparent), transparent 72%),
    radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--dj) 60%, transparent), transparent 74%);
  filter: blur(calc(26px + var(--pulse) * 22px)) saturate(1.45);
  opacity: calc(.34 + var(--pulse) * .5);
  transition: opacity .18s linear;
}
.stage {
  position: relative; z-index: 1; border-radius: 36px; overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--dj) 45%, transparent);
  box-shadow: 0 0 calc(60px + var(--pulse) * 50px) color-mix(in srgb, var(--dj) 20%, transparent),
              0 30px 80px rgba(0, 2, 6, .75);
  aspect-ratio: 16 / 9; max-height: 72vh;
  transition: border-color .9s var(--ease);
}
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#viz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
/* The copy sits LOW, so the world above it is never eclipsed by the words
   describing it. The visual is the argument; the text is the caption. */
.stage .curtain {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; text-align: center;
  padding: 26px 26px 62px; background: transparent; z-index: 3;
  transition: opacity .7s var(--ease);
}
.stage .curtain.gone { opacity: 0; pointer-events: none; }
/* THE CONTRAST LAW OVER MOVING ART: text never floats on the visuals — it sits
   on its own soft glass, so the world stays fully visible around it and every
   word still clears 7:1. The panel is the boundary; the void is the stage. */
.curtain .said {
  padding: 22px 28px 26px; border-radius: 28px; max-width: 620px;
  background: rgba(5, 8, 14, .58); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(150, 200, 220, .14);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.curtain h2 { font-size: clamp(1.8rem, 5.2vw, 2.9rem); font-weight: 800; letter-spacing: .03em; }
.curtain p { color: var(--ink2); font-size: 16px; max-width: 540px; line-height: 1.5; }

/* HUD chips over the stage */
.hud { position: absolute; left: 16px; bottom: 16px; right: 16px; z-index: 4; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; pointer-events: none; }
.hud .chip {
  pointer-events: auto;
  font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink); background: rgba(4,6,10,.84); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--dj) 50%, transparent);
  padding: 10px 15px; border-radius: var(--r-xs);
}
.hud .chip b { color: var(--gold-t); font-weight: 700; }
.hud .chip.power { color: var(--gold-t); animation: powerpulse 2.8s var(--ease) infinite; }
@keyframes powerpulse { 0%,100% { box-shadow: 0 0 0 rgba(232,196,107,0) } 50% { box-shadow: 0 0 24px rgba(232,196,107,.38) } }
.hud .spacer { margin-left: auto; }
/* WHICH DOOR IS OPEN — the label must never be able to lie about the path the
   audio is actually taking. Green = proxied and ad-free; amber = straight from
   YouTube because the open instances were down. */
.srcnow { font-weight: 700; letter-spacing: .1em; }
.srcnow.relay { color: #7BF3C0; border-color: rgba(84,230,168,.5) !important; }
.srcnow.direct { color: var(--gold-t); border-color: rgba(232,196,107,.5) !important; }

/* transport */
.transport { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
.transport .note { color: var(--ink2); font-size: 15px; }
.transport .note b { color: var(--accent-t); font-weight: 600; }

/* ── the keyboard legend + live power readout ── */
.keys { font-family: 'IBM Plex Mono'; font-size: 12.5px; color: var(--label); letter-spacing: .04em; margin-left: auto; }
.keys kbd {
  font-family: 'IBM Plex Mono'; font-size: 11.5px; color: var(--ink);
  background: var(--panel2); border: 1px solid rgba(150,200,220,.2);
  border-radius: 8px; padding: 3px 7px; margin: 0 2px;
}
.power-now {
  margin-top: 16px; padding: 15px 20px; border-radius: var(--r-sm);
  background: var(--panel2); border: 1px solid rgba(150,200,220,.14);
  color: var(--ink2); font-size: 15.5px; line-height: 1.55;
}
.power-now b { color: var(--gold-t); }

/* ═══ THEATER — the stage takes the whole screen. On a desktop this is the
   difference between watching a page and being in the room. ═══ */
body.theater { overflow: hidden; }
body.theater .horizon {
  position: fixed; inset: 0; z-index: 60; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--void); padding: 0;
}
body.theater .horizon::before { inset: 0; border-radius: 0; opacity: calc(.22 + var(--pulse) * .38); }
body.theater .stage { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; border: 0; }
body.theater .hud { left: 26px; right: 26px; bottom: 26px; top: auto; }
body.theater .topbar, body.theater .transport, body.theater .sec, body.theater .workgrid, body.theater .foot { display: none; }
body.theater .curtain { padding-bottom: 96px; }

/* ── section frames ── */
.sec { margin-top: 74px; }
.sec-label {
  font-family: 'IBM Plex Mono'; font-size: 13.5px; font-weight: 600; letter-spacing: .24em;
  color: var(--label); text-transform: uppercase; margin-bottom: 14px;
}
.sec-title { font-size: clamp(2.1rem, 6.2vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 12px; }
.sec-sub { color: var(--ink2); font-size: 17px; max-width: 740px; }

/* ── THE ORBIT DECK — DJ cards as bodies in orbit, one wide snap row ── */
.deck { display: flex; gap: 16px; overflow-x: auto; padding: 24px 4px 28px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.dj-card {
  flex: 0 0 282px; scroll-snap-align: start; cursor: pointer;
  background: var(--panel); border-radius: var(--r); padding: 22px 22px 20px;
  border: 1px solid rgba(150,200,220,.13);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  position: relative; overflow: hidden;
}
.dj-card::before {
  /* each body carries its own corona */
  content: ''; position: absolute; inset: -45% -20% auto; height: 100px; filter: blur(50px);
  background: var(--c, var(--violet)); opacity: .15; transition: opacity .5s var(--ease);
}
.dj-card::after {
  /* the orbit line — a thin ellipse that only reveals when the body is charged */
  content: ''; position: absolute; inset: 8px; border-radius: 24px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--c, var(--violet)) 35%, transparent);
  opacity: 0; transition: opacity .5s var(--ease);
}
.dj-card:hover, .dj-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c, var(--violet)) 60%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--c, var(--violet)) 25%, transparent); }
.dj-card:hover::before { opacity: .3; }
.dj-card.on { border-color: color-mix(in srgb, var(--c, var(--violet)) 80%, transparent); box-shadow: 0 0 52px color-mix(in srgb, var(--c, var(--violet)) 33%, transparent); }
.dj-card.on::after { opacity: 1; }
.dj-tag {
  position: absolute; top: 16px; right: 16px;
  font-family: 'IBM Plex Mono'; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--gold-t);
}
.dj-name { font-family: 'Sora'; font-weight: 800; font-size: 1.6rem; line-height: 1.12; }
.dj-say { font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--label); letter-spacing: .1em; margin: 3px 0 11px; }
.dj-power {
  display: inline-block; font-family: 'IBM Plex Mono'; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--gold-t);
  padding: 7px 12px; border-radius: 13px; background: rgba(232,196,107,.09);
  border: 1px solid rgba(232,196,107,.28); margin-bottom: 11px;
}
.dj-ability { color: var(--ink2); font-size: 14.8px; line-height: 1.58; }
.dj-more { margin-top: 13px; }
.dj-more summary { cursor: pointer; font-family: 'IBM Plex Mono'; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--accent-t); list-style: none; }
.dj-more summary::-webkit-details-marker { display: none; }
.dj-more[open] summary { color: var(--gold-t); }
.dj-more p { color: var(--ink2); font-size: 14px; margin-top: 8px; line-height: 1.58; }
.dj-more p b { color: var(--ink); }

/* ── WAVE POWERS — one symmetric row of five ── */
.powers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-top: 24px; }
.power {
  background: var(--panel); border: 1px solid rgba(150,200,220,.13); border-radius: var(--r-sm);
  padding: 20px 17px; text-align: center; cursor: pointer;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.power:hover, .power:focus-visible { transform: translateY(-2px); border-color: rgba(232,196,107,.5); box-shadow: 0 0 32px rgba(232,196,107,.17); }
.power.on { border-color: rgba(232,196,107,.75); box-shadow: 0 0 42px rgba(232,196,107,.28); }
.power h4 { font-size: 1.18rem; font-weight: 800; margin-bottom: 6px; }
.power .sys { font-family: 'IBM Plex Mono'; font-size: 11.5px; letter-spacing: .08em; color: var(--label); margin-bottom: 9px; }
.power p { color: var(--ink2); font-size: 13.5px; line-height: 1.52; }

/* ── THE WORK — broadcast feed ── */
.workgrid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; margin-top: 28px; }
.card { background: var(--panel); border: 1px solid rgba(150,200,220,.13); border-radius: var(--r); padding: 26px; }
.card h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.card .hint { color: var(--ink2); font-size: 15px; margin-bottom: 16px; }
.goalbox {
  border-radius: var(--r-sm); padding: 18px 20px;
  background: linear-gradient(140deg, rgba(34,211,238,.08), rgba(167,139,255,.07)), var(--panel2);
  border: 1px solid rgba(34,211,238,.25); margin-bottom: 14px;
}
.goalbox .k { font-family: 'IBM Plex Mono'; font-size: 12px; letter-spacing: .18em; color: var(--label); margin-bottom: 6px; }
.goalbox .v { font-size: 17.5px; font-weight: 600; line-height: 1.52; }
.witem {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; border-radius: var(--r-xs); background: var(--panel2);
  border-left: 3px solid var(--dj); margin-bottom: 10px;
}
.witem .kind { font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--label); padding-top: 3px; white-space: nowrap; }
.witem .t { font-size: 15.5px; line-height: 1.52; }
.agent-row { display: flex; gap: 10px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid rgba(150,200,220,.1); }
.agent-row:last-child { border-bottom: 0; }
.agent-row .nm { font-family: 'Sora'; font-weight: 700; font-size: 15.5px; color: var(--signal-t); white-space: nowrap; }
.agent-row .fo { color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.quiet { color: var(--ink2); font-size: 15.5px; padding: 14px 0; }

/* ── SOURCECROWD — the community voice ── */
.sc-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.sc-tab {
  flex: 1; padding: 11px 0; text-align: center; cursor: pointer;
  font-family: 'Sora'; font-weight: 700; font-size: 13.5px; letter-spacing: .06em;
  color: var(--ink); background: var(--panel2); border: 1px solid rgba(150,200,220,.16);
  border-radius: var(--r-xs); transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.sc-tab.on { border-color: rgba(34,211,238,.5); box-shadow: 0 0 22px rgba(34,211,238,.16); color: var(--accent-t); }
.chat-in { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.chat-in input, .chat-in textarea {
  flex: 1; min-width: 130px; background: var(--panel2); color: var(--ink);
  border: 1px solid rgba(150,200,220,.2); border-radius: var(--r-xs);
  padding: 13px 17px; font-family: 'Inter'; font-size: 15.5px;
}
.chat-in input:focus, .chat-in textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.chat-in input[name=web] { display: none; }
.sc-msg { display: flex; gap: 12px; padding: 14px 2px; border-bottom: 1px solid rgba(150,200,220,.1); align-items: flex-start; }
.sc-vote {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px;
  padding: 7px 8px; border-radius: 14px; cursor: pointer; user-select: none;
  background: var(--panel2); border: 1px solid rgba(150,200,220,.16);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.sc-vote:hover, .sc-vote:focus-visible { border-color: rgba(232,196,107,.5); box-shadow: 0 0 18px rgba(232,196,107,.18); }
.sc-vote.mine { border-color: rgba(232,196,107,.65); box-shadow: 0 0 20px rgba(232,196,107,.22); }
.sc-vote .n { font-family: 'Sora'; font-weight: 800; font-size: 15px; color: var(--gold-t); }
.sc-vote .a { font-size: 11px; color: var(--label); letter-spacing: .06em; }
.sc-body { flex: 1; }
.sc-who { font-family: 'Sora'; font-weight: 700; font-size: 14.5px; color: var(--accent-t); margin-right: 8px; }
.sc-when { font-family: 'IBM Plex Mono'; font-size: 11.5px; color: var(--label); }
.sc-tx { font-size: 15.5px; line-height: 1.55; margin-top: 3px; word-wrap: break-word; }
.sc-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-family: 'IBM Plex Mono'; font-size: 12.5px; font-weight: 600; color: var(--accent-t);
  padding: 7px 13px; border-radius: 13px; background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.3); text-decoration: none; word-break: break-all;
  transition: box-shadow .25s var(--ease);
}
.sc-link:hover { box-shadow: 0 0 18px rgba(34,211,238,.2); }
.sc-res { margin-bottom: 16px; }
.sc-res .k { font-family: 'IBM Plex Mono'; font-size: 11.5px; letter-spacing: .18em; color: var(--label); margin-bottom: 8px; }
.sc-res .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── THE POOL — real numbers, or none ── */
.pool-card { margin-top: 22px; margin-bottom: 16px; }
.pool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pool-stat {
  padding: 18px 16px; border-radius: var(--r-sm); background: var(--panel2);
  border: 1px solid rgba(150,200,220,.13); text-align: center;
}
.pool-stat .k { display: block; font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .16em; color: var(--label); }
.pool-stat b { display: block; font-family: 'Sora'; font-weight: 800; font-size: 2.1rem; color: var(--gold-t); margin: 6px 0 4px; }
.pool-stat i { font-style: normal; font-size: 13px; color: var(--ink2); line-height: 1.45; display: block; }
.pool-note { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.pool-note b { color: var(--accent-t); }
@media (max-width: 900px) { .pool-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── the wallet row: an ADDRESS, never a key ── */
.gpu-wallets { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(150,200,220,.12); }
.gpu-wallets .k { font-family: 'IBM Plex Mono'; font-size: 11.5px; letter-spacing: .16em; color: var(--label); margin-bottom: 10px; }
.gpu-w-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gpu-w-row .om-in { flex: 1 1 240px; }
.gpu-msg { font-size: 14px; margin-top: 9px; min-height: 18px; }
.gpu-msg.ok { color: #7BF3C0; }
.gpu-msg.bad { color: var(--gold-t); }
.gpu-warn { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.gpu-warn b { color: var(--gold-t); }

/* ── LEND YOUR GPU — consent has to LOOK like consent ── */
.gpu-card { margin-top: 22px; }
.gpu-read { font-size: 16.5px; line-height: 1.6; color: var(--ink2); margin-bottom: 16px; }
.gpu-read b { color: var(--ink); }
.gpu-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gpu-row .btn.off { opacity: .55; cursor: not-allowed; }
.gpu-state { font-size: 15px; color: var(--ink2); flex: 1 1 260px; }
.gpu-state.on { color: var(--gold-t); font-weight: 600; }
.gpu-fine { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink2);
  padding: 15px 18px; border-radius: var(--r-sm); background: var(--panel2);
  border: 1px solid rgba(150,200,220,.13); }
.gpu-fine b { color: var(--accent-t); }

/* ── footer ── */
.foot { margin-top: 84px; text-align: center; color: var(--ink2); font-size: 15px; }
.foot a { color: var(--accent-t); text-decoration: none; font-weight: 600; }
.foot .mantra { font-family: 'Sora'; font-weight: 700; font-size: 17.5px; color: var(--ink); margin-top: 10px; }

/* ── RIGHTNOW — tasks only, huge ── */
body.rightnow .horizon, body.rightnow .deck-sec, body.rightnow .powers-sec, body.rightnow .transport { display: none; }
body.rightnow .workgrid { grid-template-columns: 1fr; max-width: 880px; margin: 28px auto 0; }
body.rightnow .witem .t { font-size: 18px; }

/* ═══ THE BIG SCREEN — a desktop is not a large phone. Above 1500px the room
   opens up: more of the pantheon visible at once, a bigger stage, larger type,
   and deeper hover relief. Nothing is merely stretched. ═══ */
@media (min-width: 1500px) {
  .shell { max-width: 1560px; padding: 0 34px 130px; }
  body { font-size: 19px; }
  .stage { max-height: 78vh; }
  .dj-card { flex-basis: 316px; padding: 26px 26px 24px; }
  .dj-name { font-size: 1.75rem; }
  .dj-ability { font-size: 15.4px; }
  .powers { gap: 16px; }
  .power { padding: 24px 20px; }
  .power h4 { font-size: 1.3rem; }
  .workgrid { gap: 24px; }
  .card { padding: 32px; }
  .card h3 { font-size: 1.7rem; }
  .sec { margin-top: 92px; }
  /* hover gains real depth at this size — the cards lift off the void */
  .dj-card:hover { transform: translateY(-7px) scale(1.012); }
  .power:hover { transform: translateY(-4px); }
}
@media (min-width: 1900px) {
  .shell { max-width: 1760px; }
  .dj-card { flex-basis: 344px; }
}
/* pointer-precise devices get the richer hover; touch never pays for it */
@media (hover: hover) and (pointer: fine) {
  .btn, .mini, .dj-card, .power, .sc-tab { will-change: transform, box-shadow; }
  .witem { transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .witem:hover { border-left-color: var(--gold); box-shadow: 0 0 24px rgba(232,196,107,.12); }
  .sc-msg { transition: background .25s var(--ease); border-radius: 14px; }
  .sc-msg:hover { background: rgba(150,200,220,.045); }
}

/* ── responsive ── */
@media (max-width: 900px) {
  .powers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .powers::-webkit-scrollbar { display: none; }
  .power { flex: 0 0 186px; scroll-snap-align: start; }
  .workgrid { grid-template-columns: 1fr; }
  .stage { max-height: none; }
}
/* ═══ MOBILE — not a shrunken desktop. The stage goes full-bleed edge to edge
   (the visuals ARE the experience on a phone), every control clears 46px of
   thumb, the deck peeks the next card so the swipe is discoverable, and the
   type stays big enough to read one-handed. Verified at 375px and 390px. ═══ */
@media (max-width: 700px) {
  body { font-size: 17px; line-height: 1.62; }
  .shell { padding: 0 14px 84px; }
  .topbar { padding: 14px 0 10px; gap: 9px; }
  .brand { font-size: 18px; }
  .topbar .btn { padding: 11px 15px; font-size: 13px; }

  /* the stage breaks the gutter — full width, taller frame, deeper corners */
  .horizon { margin-left: -14px; margin-right: -14px; }
  .horizon::before { inset: -8px; border-radius: 34px; filter: blur(calc(18px + var(--pulse) * 16px)); }
  /* Taller stage on a phone — the world IS the experience here, and a 16:9
     letterbox wastes the screen the visuals should be filling. */
  .stage { border-radius: 26px; aspect-ratio: 1 / 1.12; max-height: 62vh; }
  /* The curtain becomes COMPACT: the title and the door. The paragraph is
     explanation the deck below already gives, and on a phone it was pushing
     the panel straight out through the top of its own stage. */
  .curtain { padding: 16px 14px 20px; justify-content: flex-end; }
  .curtain .said { padding: 16px 18px 18px; gap: 10px; border-radius: 24px; width: 100%; }
  .curtain h2 { font-size: clamp(1.7rem, 8.4vw, 2.3rem); }
  .curtain p { display: none; }
  .btn.big { padding: 15px 22px; font-size: 15px; min-height: 50px; width: 100%; }

  /* HUD sits ABOVE the curtain panel on a phone so the two never collide */
  .hud { left: 10px; right: 10px; top: 10px; bottom: auto; gap: 7px; align-items: flex-start; }
  .hud .chip { font-size: 11px; padding: 7px 10px; border-radius: 12px; }

  .transport { gap: 8px; margin-top: 14px; }
  .transport .btn { flex: 1 1 auto; min-height: 48px; }
  .transport .note { font-size: 14px; order: 3; flex-basis: 100%; }
  .keys { display: none; }          /* a keyboard legend on a phone is noise */

  .sec { margin-top: 54px; }
  .sec-label { font-size: 12px; letter-spacing: .2em; }
  .sec-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .sec-sub { font-size: 16px; }

  /* deck: peek the next card so swiping is obvious */
  .deck { gap: 12px; padding: 18px 0 22px; scroll-padding-left: 0; }
  .dj-card { flex-basis: 79vw; max-width: 320px; padding: 20px; border-radius: 26px; }
  .dj-name { font-size: 1.5rem; }
  .dj-more summary { padding: 6px 0; }

  .powers { gap: 10px; }
  .power { flex-basis: 76vw; max-width: 300px; border-radius: 22px; padding: 18px; }

  .card { padding: 20px 18px; border-radius: 26px; }
  .card h3 { font-size: 1.35rem; }
  .goalbox { padding: 16px; }
  .goalbox .v { font-size: 16.5px; }
  .witem { padding: 13px 14px; }

  /* SourceCrowd: the composer stacks, send is full width and thumb-sized */
  .sc-tab { min-height: 46px; font-size: 13px; }
  .chat-in { gap: 9px; }
  .chat-in input, .chat-in textarea { min-width: 100%; flex-basis: 100%; min-height: 48px; font-size: 16px; }
  .chat-in .btn { width: 100%; min-height: 50px; }
  .sc-vote { min-width: 48px; padding: 9px 8px; }
  .sc-msg { gap: 10px; }
  .foot { margin-top: 60px; }
}
@media (max-width: 380px) {
  .dj-card, .power { flex-basis: 84vw; }
  .hud .chip { font-size: 11px; padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #swarm, #viz { display: none; }
  body::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTUSCOMPUTE TELEMETRY — history, per-DJ record, payout ledger, Golem gauge

   Design law applied here: squircles only (r-xs/r-sm, never a plain box), no
   grey body text (hierarchy comes from size/weight/width — every value is --ink
   or a verified tint), glow rather than hard highlight, and every table becomes
   a stack at 760px rather than a horizontally-scrolling stub.
   ═══════════════════════════════════════════════════════════════════════════ */

.pool-sub, .pool-two { margin-top: 16px; }
.pool-two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.ps-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid rgba(123, 227, 234, .13); border-radius: var(--r-sm);
  padding: 16px 18px 18px;
}
.ps-card .k {
  font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .16em;
  color: var(--label); display: block; margin-bottom: 12px;
}

/* ── the history bars ── */
.hist { width: 100%; height: 92px; display: block; overflow: visible; }
.hist .hb { fill: var(--cyan); opacity: .55; transition: opacity .25s var(--ease); }
.hist .hb:hover { opacity: 1; }
.hist .hb.peak { fill: var(--gold); opacity: .95; filter: drop-shadow(0 0 3px rgba(232,196,107,.55)); }
.hist-ax {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: 'IBM Plex Mono'; font-size: 11px; color: var(--label);
}
.pool-empty, .djtab .empty, .kv .empty {
  font-size: 14px; color: var(--ink2); font-style: normal; padding: 10px 0;
}

/* ── per-DJ / payout tables ── */
.djtab { width: 100%; border-collapse: collapse; font-size: 14px; }
.djtab th {
  text-align: left; font-family: 'IBM Plex Mono'; font-size: 10.5px;
  letter-spacing: .14em; color: var(--label); font-weight: 500;
  padding: 0 8px 8px 0; border-bottom: 1px solid rgba(123,227,234,.12);
}
.djtab td { padding: 9px 8px 9px 0; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.05); }
.djtab .num { text-align: right; font-family: 'IBM Plex Mono'; font-size: 13px; }
.djtab th.num { text-align: right; }
.djtab td.dj { font-weight: 600; white-space: nowrap; }
.djtab .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--cyan)); margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 8px var(--c, var(--cyan));            /* glow, never highlight */
}
.djtab td.bar { position: relative; min-width: 96px; }
.djtab td.bar span {
  display: inline-block; height: 7px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--c, var(--cyan)), transparent);
  box-shadow: 0 0 10px -2px var(--c, var(--cyan));
}
.djtab td.bar b { font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--ink2); margin-left: 8px; }

.kv { list-style: none; margin: 0; padding: 0; }
.kv li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px;
}
.kv li b { color: var(--ink); font-weight: 600; }
.kv li span { font-family: 'IBM Plex Mono'; font-size: 12.5px; color: var(--ink2); }
.kv.djpay li { display: block; }
.kv.djpay li span { display: block; margin-top: 3px; }

/* ── the accrual strip ── */
.pool-ledger {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-sm);
  background: radial-gradient(120% 140% at 0% 0%, rgba(34,211,238,.08), transparent 60%), var(--panel2);
  border: 1px solid rgba(232,196,107,.16);
}
.pool-ledger .k { font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .16em; color: var(--label); }
.acc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0 10px; }
.acc-row > div b { display: block; font-family: 'Sora'; font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.acc-row > div span { font-size: 12.5px; color: var(--ink2); }
.acc-row .go b { color: var(--gold-t); text-shadow: 0 0 14px rgba(232,196,107,.4); }
.acc-row .hold b { color: var(--accent-t); }
.acc-why { font-size: 14px; line-height: 1.6; color: var(--ink2); margin: 0; }

/* ── payouts ── */
.pay-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pay-stat {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid rgba(123,227,234,.13); border-radius: var(--r-sm); padding: 14px 16px;
}
.pay-stat .k { display: block; font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .16em; color: var(--label); }
.pay-stat b { display: block; font-family: 'Sora'; font-weight: 800; font-size: 1.8rem; color: var(--ink); margin: 6px 0 4px; }
.pay-stat b.go { color: var(--gold-t); text-shadow: 0 0 16px rgba(232,196,107,.45); }
.pay-stat i { font-style: normal; font-size: 13px; color: var(--ink2); line-height: 1.45; display: block; }
.pay-custody {
  margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r-xs);
  background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.2);
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.paytab .rail {
  font-family: 'IBM Plex Mono'; font-size: 10.5px; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.paytab .rail.dash { color: var(--accent-t); }
.paytab .rail.trust { color: var(--signal-t); }
.paytab .st { font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--ink2); }
.paytab .st-sent .st { color: var(--gold-t); }
.paytab .st-failed .st { color: var(--ember); }
.pay-fine { font-size: 13.5px; line-height: 1.6; color: var(--ink2); margin: 14px 0 0; }
.pay-fine b { color: var(--signal-t); }

/* ── Golem gauge ── */
.gol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gol-grid .pool-stat.zero b { color: var(--ember); text-shadow: 0 0 16px rgba(232,121,201,.35); }
.gol-rt { margin-top: 14px; }
.gol-note { font-size: 14.5px; line-height: 1.65; color: var(--ink2); margin: 14px 0 0; }
.gol-note b { color: var(--accent-t); }
.gol-note.dim b { color: var(--ink); }

/* ── MOBILE: tables become stacks; nothing scrolls sideways ── */
@media (max-width: 900px) {
  .pool-two { grid-template-columns: 1fr; }
  .pay-head, .acc-row { grid-template-columns: repeat(2, 1fr); }
  .gol-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .djtab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .djtab, .djtab tbody, .djtab tr, .djtab td { display: block; width: 100%; }
  .djtab tr { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .djtab td { border: 0; padding: 2px 0; text-align: left !important; }
  .djtab td.num::before { content: attr(data-l); }
  .djtab td.bar span { max-width: 60%; }
  .hist { height: 74px; }
}

/* ── your own record on the ledger ── */
.mine {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm);
  background: radial-gradient(120% 140% at 100% 0%, rgba(167,139,255,.10), transparent 62%), var(--panel2);
  border: 1px solid rgba(167,139,255,.22);
}
.mine .k { font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .16em; color: var(--label); }
.mine-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 8px; }
.mine-row > div b { display: block; font-family: 'Sora'; font-weight: 800; font-size: 1.35rem; color: var(--ink); }
.mine-row > div span { font-size: 12.5px; color: var(--ink2); }
.mine-row .go b { color: var(--gold-t); text-shadow: 0 0 14px rgba(232,196,107,.4); }
.mine-row .hold b { color: var(--signal-t); }
.mine-feat { margin: 8px 0; font-size: 13px; color: var(--ink2); line-height: 1.9; }
.mine-feat code {
  font-family: 'IBM Plex Mono'; font-size: 11.5px; color: var(--accent-t);
  background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.2);
  padding: 2px 7px; border-radius: 999px;
}
.mine-fine { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.mine-fine b { color: var(--ink); }
@media (max-width: 760px) { .mine-row { grid-template-columns: repeat(2, 1fr); } }

/* ── MOBILE OVERFLOW FIX (measured at 375px, 2026-08-12) ──
   .pay-head's big Sora numerals (e.g. "0.000000" at 1.8rem/800) could not fit a
   148px half-column, so the grid pushed 335px into a 310px box and the whole
   page scrolled sideways. Long numbers are the cause, so the fix is applied to
   the numbers rather than by letting the container scroll: step the type down,
   allow a break, and use tabular figures so columns still line up. */
@media (max-width: 760px) {
  .pay-stat b, .pool-stat b { font-size: 1.32rem; line-height: 1.15; overflow-wrap: anywhere; }
  .acc-row > div b, .mine-row > div b { font-size: 1.12rem; overflow-wrap: anywhere; }
  .pay-stat, .pool-stat { padding: 12px 13px; min-width: 0; }
  .pay-head, .pool-grid, .acc-row, .mine-row, .gol-grid { min-width: 0; }
  .pay-head > *, .pool-grid > *, .acc-row > *, .mine-row > * { min-width: 0; }
  .djtab td.bar span { max-width: 55%; }
}
/* tabular figures everywhere a number is compared to another number */
.pay-stat b, .pool-stat b, .acc-row b, .mine-row b, .djtab .num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* belt and braces: a stat card may shrink, but the page never scrolls sideways */
.sec > .card { max-width: 100%; overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════════════════
   RUNG 5 — the work panel, receipts, and the payout rail choice.
   Squircles, no grey body text, glow not highlight, stacks cleanly at 375px.
   ═══════════════════════════════════════════════════════════════════════════ */
.work-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px;
}
.work-state { font-size: 14.5px; line-height: 1.55; color: var(--ink2); flex: 1 1 260px; min-width: 0; }
.work-state.on { color: var(--accent-t); }
.work-fine { font-size: 14px; line-height: 1.65; color: var(--ink2); margin: 14px 0 0; }
.work-fine b { color: var(--accent-t); }
.pool-stat b.go { color: var(--gold-t); text-shadow: 0 0 16px rgba(232,196,107,.45); }

.wlist { display: flex; flex-direction: column; gap: 6px; }
.wrow {
  display: grid; grid-template-columns: 68px 1fr 84px auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; color: var(--ink);
}
.wrow .wk {
  font-family: 'IBM Plex Mono'; font-size: 10.5px; letter-spacing: .08em;
  text-align: center; padding: 3px 0; border-radius: 999px;
  color: var(--accent-t); border: 1px solid rgba(123,227,234,.35);
}
.wrow .wt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .wd {
  font-family: 'IBM Plex Mono'; font-size: 11.5px; color: var(--signal-t);
  background: rgba(167,139,255,.10); border: 1px solid rgba(167,139,255,.22);
  padding: 2px 8px; border-radius: 999px; text-align: center;
}
.wrow .wby { font-family: 'IBM Plex Mono'; font-size: 11.5px; color: var(--ink2); }

/* ── the rail choice ── */
.rail-pick { margin-top: 16px; }
.rail-pick .k {
  font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .16em;
  color: var(--label); display: block; margin-bottom: 10px;
}
.rail-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rail-opt {
  text-align: left; padding: 12px 14px; border-radius: var(--r-sm); cursor: pointer;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid rgba(255,255,255,.10); color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .18s var(--ease);
}
.rail-opt:hover { transform: translateY(-1px); border-color: rgba(123,227,234,.35); }
.rail-opt b { display: block; font-family: 'Sora'; font-weight: 800; font-size: 1.05rem; }
.rail-opt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink2); line-height: 1.45; }
/* glow, never a hard highlight */
.rail-opt.on {
  border-color: rgba(232,196,107,.55);
  box-shadow: 0 0 0 1px rgba(232,196,107,.25), 0 0 26px -6px rgba(232,196,107,.55);
}
.rail-opt.on b { color: var(--gold-t); }
.rail-opt:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }
.rail-fine { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink2); }
.rail-fine b { color: var(--ink); }

@media (max-width: 760px) {
  .rail-opts { grid-template-columns: 1fr; }
  .wrow { grid-template-columns: 60px 1fr; row-gap: 3px; }
  .wrow .wd, .wrow .wby { grid-column: 2; justify-self: start; }
  .work-row .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE COMMONS — one section, five views.

   The problem this solves: five full-height MOTUSCOMPUTE sections stacked into
   a wall. "Busy" is not a quantity of elements, it is an absence of hierarchy —
   everything shouting at the same volume so nothing reads as important. So:
   ONE section, four pinned numbers, five tabs, one panel at a time.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the pinned strip: the whole commons in four numbers ── */
.cmn-live {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 22px 0 18px; padding: 16px 18px; border-radius: var(--r-sm);
  background: radial-gradient(120% 160% at 0% 0%, rgba(34,211,238,.09), transparent 62%),
              linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid rgba(123,227,234,.16);
}
.cmn-live .cl-item b {
  display: block; font-family: 'Sora'; font-weight: 800; font-size: 1.55rem;
  color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cmn-live .cl-item span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink2); }
.cmn-live .cl-item.go b { color: var(--gold-t); text-shadow: 0 0 18px rgba(232,196,107,.5); }

/* ── the tab bar ── */
.cmn-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 14px;
}
.cmn-tab {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 18px; border-radius: var(--r-xs);           /* squircle, never a pill */
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid rgba(255,255,255,.10);
  color: var(--ink); font-family: 'Sora'; font-weight: 700; font-size: 14px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .18s var(--ease);
}
.cmn-tab:hover { transform: translateY(-1px); border-color: rgba(123,227,234,.4); }
.cmn-tab:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }
/* GLOW, never a hard highlight */
.cmn-tab.on {
  border-color: rgba(123,227,234,.55); color: var(--accent-t);
  box-shadow: 0 0 0 1px rgba(123,227,234,.22), 0 0 30px -8px rgba(34,211,238,.75);
}

/* ── panels: exactly one at a time ── */
.cmn-panel { display: none; }
.cmn-panel.on { display: block; animation: cmnIn .42s var(--ease) both; }
@keyframes cmnIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cmn-panel.on { animation: none; } }

.cmn-lead {
  font-size: 16px; line-height: 1.65; color: var(--ink2);
  margin: 0 0 16px; max-width: 62ch;
}
.cmn-lead b { color: var(--ink); }

/* ── progressive disclosure: telemetry is available, not shoved at you ── */
.cmn-more { margin-top: 14px; }
.cmn-more > summary {
  cursor: pointer; list-style: none; padding: 12px 16px; border-radius: var(--r-xs);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
  color: var(--ink); font-size: 14px; font-weight: 600;
  transition: border-color .22s var(--ease);
}
.cmn-more > summary::-webkit-details-marker { display: none; }
.cmn-more > summary::after { content: ' ▾'; color: var(--label); }
.cmn-more[open] > summary::after { content: ' ▴'; }
.cmn-more > summary:hover { border-color: rgba(123,227,234,.35); }
.cmn-more > summary:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }
.cmn-more[open] > summary { margin-bottom: 12px; }

@media (max-width: 900px) { .cmn-live { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  /* tabs stay one row and scroll rather than wrapping into a stack that
     pushes the content off screen — the row itself scrolls, never the page */
  .cmn-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cmn-tabs::-webkit-scrollbar { display: none; }
  .cmn-tab { padding: 9px 13px; font-size: 13px; flex: 0 0 auto; }
  .cmn-tab span { display: none; }        /* glyph-only when space is tight */
  .cmn-tab.on span { display: inline; }   /* except the active one, which names itself */
  .cmn-live { padding: 13px 14px; }
  .cmn-live .cl-item b { font-size: 1.22rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PITCH — a stranger has to understand this before being asked to lend a
   graphics card. Two additions, no new sections:
     · one line in the hero saying what this IS
     · the three-step loop as a diagram rather than a paragraph
   Prose describing a three-step process is a three-step process the reader has
   to assemble themselves.
   ═══════════════════════════════════════════════════════════════════════════ */
.said-line {
  font-family: 'Sora'; font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem); line-height: 1.2;
  color: var(--accent-t); margin: 6px 0 10px !important;
  text-shadow: 0 0 26px rgba(34,211,238,.4);           /* glow, not highlight */
}
.said-jump { color: var(--gold-t); text-decoration: none; border-bottom: 1px solid rgba(232,196,107,.45); }
.said-jump:hover { border-bottom-color: var(--gold-t); }
.said-jump:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }

.how {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  counter-reset: how;
}
.how li {
  position: relative; padding: 20px 20px 18px; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid rgba(123,227,234,.14);
}
/* the connective thread: energy travelling between the steps, not three
   unrelated boxes sitting next to each other */
.how li::after {
  content: ''; position: absolute; top: 50%; right: -14px; width: 14px; height: 2px;
  background: linear-gradient(90deg, rgba(34,211,238,.55), transparent);
}
.how li:last-child::after { display: none; }
.how .hn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px; margin-bottom: 12px;
  font-family: 'IBM Plex Mono'; font-size: 14px; font-weight: 600;
  color: var(--void); background: linear-gradient(145deg, var(--cyan), var(--azure));
  box-shadow: 0 0 22px -6px var(--cyan);
}
.how b { display: block; font-family: 'Sora'; font-weight: 800; font-size: 1.14rem; color: var(--ink); margin-bottom: 7px; }
.how i { font-style: normal; display: block; font-size: 14px; line-height: 1.6; color: var(--ink2); }

@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; gap: 10px; }
  /* the thread turns to point downward when the steps stack */
  .how li::after { top: auto; bottom: -10px; right: auto; left: 34px; width: 2px; height: 10px;
    background: linear-gradient(180deg, rgba(34,211,238,.55), transparent); }
}

/* the honest "we need more people" note — a warning tone without alarm */
.work-fine.warn {
  padding: 13px 16px; border-radius: var(--r-xs); margin-top: 14px;
  background: rgba(232,196,107,.07); border: 1px solid rgba(232,196,107,.22);
  color: var(--ink);
}
.work-fine.warn b { color: var(--gold-t); }

/* ═══════════════════════════════════════════════════════════════════════════
   NEONEURO GLASS — the material
   ═══════════════════════════════════════════════════════════════════════════
   Neumorphism + glass + futurism, with one tension resolved deliberately:

   ⚠ CLASSIC NEUMORPHISM IS BUILT ON LOW CONTRAST. That is its signature look
   and it is exactly what the no-grey-text law forbids. So the SURFACE takes the
   depth and the INK does not move: every panel gets dual-light relief and a
   frosted rim, and every character on it stays full-strength --ink. Depth is a
   property of the material, never of the message.

   Four layers make the material, and each one earns its cost:
     ① a top-left light edge + bottom-right dark edge  → extruded, not painted
     ② a 1px inner rim that catches the light          → glass, not putty
     ③ a soft outer drop                                → lifted off the void
     ④ a faint diagonal sheen                           → the futurist tell
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* the light comes from the top-left, always. A depth system with an
     inconsistent light source reads as noise rather than as form. */
  --nn-lite: rgba(190, 225, 240, .085);
  --nn-dark: rgba(0, 2, 6, .62);

  --nn-raise:
    inset 0 1px 0 var(--nn-lite),
    inset 1px 0 0 rgba(190, 225, 240, .05),
    inset 0 -1px 0 var(--nn-dark),
    0 1px 1px rgba(0, 0, 0, .45),
    0 14px 34px -18px rgba(0, 0, 0, .9);

  /* pressed / held: the light edge moves to the bottom, so "inset" is legible
     as a physical state rather than just a colour change */
  --nn-inset:
    inset 0 1px 2px rgba(0, 0, 0, .55),
    inset 0 -1px 0 var(--nn-lite);

  --nn-sheen: linear-gradient(147deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 42%);
  --nn-skin:  linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 60%);
}

/* ── the raised surface ── */
.card, .ps-card, .pool-stat, .pay-stat, .rail-opt, .cmn-tab, .how li,
.cmn-live, .pool-ledger, .mine, .bd-strip {
  position: relative;
  box-shadow: var(--nn-raise);
  background-image: var(--nn-skin);
  background-blend-mode: overlay;
}
/* ② the rim + ④ the sheen, as one pseudo-element so nothing extra paints */
.card::before, .ps-card::before, .pool-stat::before, .pay-stat::before,
.rail-opt::before, .how li::before, .cmn-live::before, .pool-ledger::before,
.mine::before, .bd-strip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--nn-sheen);
  pointer-events: none;                       /* never eats a click */
  z-index: 0;
}
/* content sits above the sheen without needing a wrapper element */
.card > *, .ps-card > *, .pool-stat > *, .pay-stat > *, .how li > *,
.cmn-live > *, .pool-ledger > *, .mine > *, .bd-strip > * { position: relative; z-index: 1; }

/* ── frosted depth, applied ONCE and never nested ──
   ⚠ Stacked backdrop-filters are what turned a phone into a hand-warmer on this
   project before. One blur layer, on the outermost glass only. */
.commons-sec .cmn-live,
.card.gpu-card, .card.pool-card, .card.work-card, .card.rcpt-card,
.card.pay-card, .card.gol-card {
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  background-color: rgba(16, 21, 30, .72);
}
/* children of a frosted surface must NOT re-blur */
.card [class*="-card"], .card .ps-card, .card .pool-stat, .card .pay-stat {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── interactive relief: raised invites, inset means held ── */
.cmn-tab, .rail-opt, .btn, .mini {
  transition: box-shadow .28s var(--ease), transform .2s var(--ease), border-color .28s var(--ease);
}
.cmn-tab:active, .rail-opt:active, .btn:active { box-shadow: var(--nn-inset); transform: translateY(1px); }
.cmn-tab.on, .rail-opt.on {
  box-shadow: var(--nn-inset), 0 0 34px -10px currentColor;   /* held AND lit */
}

/* ── the futurist tell: a single hairline that catches the eye at the top of
      each major surface. One line, one job — not a frame, not a border. */
.card::after, .cmn-live::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,227,234,.55), transparent);
  pointer-events: none;
}

/* ⚠ Motion budget: this material is static. It reads as depth because of the
   light model, not because anything moves. Nothing here animates on idle —
   the page already carries a canvas, and a second ambient animation would cost
   battery to say something the shadows already say. */
@media (prefers-reduced-motion: reduce) {
  .cmn-tab, .rail-opt, .btn, .mini { transition: none; }
}

/* ── the connector thread, corrected ──
   It was drawn on each card with `right: -14px`, which pushed every card 14px
   past its own box (scrollWidth 411 vs clientWidth 397). Invisible, because the
   page clips horizontally — but an element overflowing its own box is a real
   defect that only stays harmless until something upstream stops clipping.
   The thread belongs to the GAPS, so it is drawn by the container. */
.how li::after { display: none; }             /* retire the per-card version */
.how { position: relative; }
.how::before, .how::after {
  content: ''; position: absolute; top: 50%; height: 2px; width: 14px;
  background: linear-gradient(90deg, rgba(34,211,238,.55), transparent);
  pointer-events: none;
}
/* 3 equal columns, 14px gap → the gaps start at 1× and 2× the column width */
.how::before { left: calc((100% - 28px) / 3); }
.how::after  { left: calc((100% - 28px) / 3 * 2 + 14px); }

@media (max-width: 860px) {
  /* stacked: the thread turns downward and lives between the rows */
  .how::before, .how::after { display: none; }
  .how li::after {
    display: block; top: auto; bottom: -6px; left: 34px; right: auto;
    width: 2px; height: 6px;
    background: linear-gradient(180deg, rgba(34,211,238,.55), transparent);
  }
  .how li:last-child::after { display: none; }
}