/* MarbleLens · Moon Race isolated local preview.
   Dark galaxy identity from the current homepage: obsidian ground, gold
   accents, Fraunces-style display serif over an Inter-style sans. No web
   fonts are fetched; installed faces are used when present, otherwise
   the listed local fallbacks. Board composition follows the owner's
   reference: centred tabs, headline and entry row, then a ~3:1 ranking
   and sidebar grid. All motion here is CSS, governed by the shared
   html.ml-motion-off class and paused while the tab is hidden. */

/* Live homepage scoping (14 Oct 2026). This sheet now shares the page with
   the existing homepage sections, their header-less CSS stack and the
   account dialog. Its tokens and every rule whose selector the live page
   also uses (element resets, :focus-visible, .btn*, .brand) apply only on
   .ml-solar roots and inside them. `:where(.ml-solar, .ml-solar *)` adds
   no specificity, so every V16 rule keeps exactly its original weight and
   order; class names used only by the race are left as they were.
   The live body.u-night defines its own --ink/--line, so the race tokens
   must sit on the nearest ancestor (the .ml-solar root), not on :root. */
.ml-solar {
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  --bg: #070b0d;
  --ink: #f3efe4;
  --ink-2: #d9d4c6;
  --muted: #aab1a9;
  --gold: #c9a257;
  --gold-hi: #e8c57e;
  --gold-lo: #9c7a42;
  --line: rgba(232, 197, 126, .16);
  --line-2: rgba(232, 197, 126, .34);
  --panel: rgba(8, 12, 14, .78);
  --err: #f2a28f;
  --ok: #9fd8b2;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1256px;
  --gold-fill: linear-gradient(135deg, #ecd08e, #c9a257 55%, #a8853f);
  color-scheme: dark;
}

:where(.ml-solar, .ml-solar *), :where(.ml-solar, .ml-solar *)::before, :where(.ml-solar, .ml-solar *)::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 38%, #121c1f 0%, #070b0d 62%) fixed, #070b0d;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button:where(.ml-solar *), input:where(.ml-solar *), select:where(.ml-solar *) { font: inherit; color: inherit; }
select:where(.ml-solar *) option { background: #0b1113; color: var(--ink); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; }
:where(.ml-solar, .ml-solar *):focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }

.skip:where(.ml-solar, .ml-solar *) { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:where(.ml-solar, .ml-solar *):focus { top: 12px; }

/* The engine's fixed sky: the unframed galaxy behind every view. The veil
   calms the centre column so the board reads cleanly over the dust. */
#skyCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 80% at 50% 48%, rgba(7, 11, 13, .7), rgba(7, 11, 13, .2) 78%),
    linear-gradient(180deg, rgba(7, 11, 13, 0) 55%, rgba(7, 11, 13, .55));
}
.demo-strip, .site-head, .product-strip, main, .foot { position: relative; z-index: 1; }

.demo-strip {
  padding: 6px 16px; text-align: center;
  font: 500 12px/1.45 var(--mono); letter-spacing: .05em;
  color: #ead7a8; background: rgba(201, 162, 87, .10); border-bottom: 1px solid var(--line);
}
.demo-strip strong { color: var(--gold-hi); text-transform: uppercase; letter-spacing: .12em; }

/* ── buttons ─────────────────────────────────────────────── */
.btn:where(.ml-solar *) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid transparent; background: none; cursor: pointer;
  font: 600 15px/1.2 var(--sans); text-decoration: none; text-align: center;
  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn-p:where(.ml-solar *) { background: var(--gold-fill); color: #19130a; box-shadow: 0 4px 24px rgba(217, 198, 141, .12); }
.btn-p:where(.ml-solar *):hover { box-shadow: 0 4px 30px rgba(217, 198, 141, .3); }
.btn-g:where(.ml-solar *) { border-color: var(--line-2); color: var(--gold-hi); background: rgba(10, 14, 16, .45); }
.btn-g:where(.ml-solar *):hover { border-color: var(--gold-hi); background: rgba(201, 162, 87, .1); }
.btn-quiet:where(.ml-solar *) { color: var(--ink-2); border-color: rgba(243, 239, 228, .16); background: rgba(10, 14, 16, .35); }
.btn-quiet:where(.ml-solar *):hover { border-color: rgba(243, 239, 228, .4); color: var(--ink); }
.btn-sm:where(.ml-solar *) { min-height: 44px; padding: 8px 14px; font-size: 13px; }
.btn:where(.ml-solar *)[aria-disabled="true"], .btn:where(.ml-solar *):disabled { opacity: .55; cursor: not-allowed; }
.link-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px;
  border: 0; background: none; cursor: pointer; color: var(--gold-hi); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(232, 197, 126, .45); text-underline-offset: 4px;
}
.link-btn:hover { text-decoration-color: var(--gold-hi); }

/* ── header ──────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(7, 11, 13, .9), rgba(7, 11, 13, .7));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-in { max-width: var(--wrap); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 24px; min-height: 64px; }
/* padding/radius 0: the live .brand (universe-home.css) would otherwise add its own inset here */
.brand:where(.ml-solar *) { display: inline-flex; align-items: center; gap: 11px; min-height: 48px; padding: 0; border-radius: 0; text-decoration: none; font: 600 19px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); flex: none; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 15px; border: 1px solid transparent; }
.nav a:hover { color: var(--ink); background: rgba(243, 239, 228, .06); }
.nav a.nav-product { color: var(--gold-hi); border-color: var(--line-2); }
.nav a.nav-product:hover { border-color: var(--gold-hi); background: rgba(201, 162, 87, .08); }
.head-actions { display: flex; align-items: center; gap: 10px; }
.acct { display: inline-flex; align-items: center; gap: 10px; }
.acct-name { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.acct-sim { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); border: 1px dashed var(--line-2); border-radius: 4px; padding: 3px 5px; margin-left: 4px; }
.menu-btn { display: none; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; font-weight: 600; }
.drawer { border-top: 1px solid var(--line); padding: 12px 24px 20px; background: rgba(7, 11, 13, .96); }
.drawer nav { display: grid; }
.drawer nav a { min-height: 52px; display: flex; align-items: center; text-decoration: none; font-size: 18px; border-bottom: 1px solid var(--line); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }

/* Product paths stay one tap away below 1080 px, where the nav collapses. */
.product-strip { display: none; }
.product-strip a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--gold-hi); text-decoration: none; font-weight: 600; font-size: 14px;
  background: rgba(7, 11, 13, .55);
}
.strip-motion { display: none !important; }

/* Miniature universe M: gold dust on the monogram path, a packed core,
   three stars on tilted orbits. Decorative; the link never moves. */
.um-mark { position: relative; width: 34px; height: 34px; flex: none; }
.um-glyph { position: absolute; inset: 3px; width: 28px; height: 28px; overflow: visible; }
.um-m-soft { fill: none; stroke: url(#goldG); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; opacity: .26; }
.um-m-dust { fill: none; stroke: url(#goldG); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 12.5; }
.um-core { fill: #fff3d4; }
.um-orbit { position: absolute; inset: -6px; transform: rotate(-24deg) scaleY(.42); pointer-events: none; }
.um-ring { position: absolute; inset: 0; border-radius: 50%; animation: um-spin 18s linear infinite; }
.um-ring.r1 { border: 1px solid rgba(232, 197, 126, .3); }
.um-ring.r2 { inset: 5px; animation-duration: 27s; animation-direction: reverse; }
.um-ring.r3 { inset: -3px; animation-duration: 41s; }
.um-ring i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 28%, #e8c57e 52%, rgba(232, 197, 126, 0) 72%); }
.um-ring.r1 i { top: -2.5px; left: calc(50% - 2.5px); }
.um-ring.r2 i { bottom: -2.5px; left: calc(50% - 2.5px); }
.um-ring.r3 i { left: -2.5px; top: calc(50% - 2.5px); width: 4px; height: 4px; }
@keyframes um-spin { to { transform: rotate(360deg); } }

/* The Moon: a static disc with a tilted orbit, never a click target. */
.moon {
  --moon: 120px;
  position: relative; width: var(--moon); height: var(--moon); border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 63% 38%, rgba(118, 96, 56, .34) 0 9%, transparent 10%),
    radial-gradient(circle at 39% 63%, rgba(118, 96, 56, .26) 0 7%, transparent 8%),
    radial-gradient(circle at 71% 69%, rgba(118, 96, 56, .2) 0 5%, transparent 6%),
    radial-gradient(circle at 34% 30%, #fffaf0 0%, #f1e4c2 24%, #d2b87f 55%, #8f7646 80%, #4a3c22 100%);
  box-shadow: inset -12px -10px 26px rgba(28, 20, 8, .6), 0 0 36px 4px rgba(232, 197, 126, .22);
}
.moon::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 1px solid rgba(232, 197, 126, .24); transform: rotate(-18deg) scaleY(.36); }
/* Compact identity mark beside the board kicker. */
.moon--mini { --moon: 24px; box-shadow: inset -3px -3px 6px rgba(28, 20, 8, .6), 0 0 14px 2px rgba(232, 197, 126, .28); }
.moon--mini::after { inset: -6px; }
.moon--mini.is-celebrating { animation: mini-halo 4.5s ease-in-out infinite; }
@keyframes mini-halo { 50% { box-shadow: inset -3px -3px 6px rgba(28, 20, 8, .6), 0 0 26px 8px rgba(232, 197, 126, .5); } }

/* ── board: tabs, headline, entry row ─────────────────────── */
.board { max-width: var(--wrap); margin: 0 auto; padding: 22px 24px 56px; }
.board.is-race { padding-top: 6px; }

.board-tabs {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(8, 12, 14, .72);
}
.board-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--gold-hi); font: 600 15px/1 var(--sans); white-space: nowrap;
}
.board-tab:hover { background: rgba(201, 162, 87, .1); }
.board-tab[aria-selected="true"] { background: var(--gold-fill); color: #19130a; }
.tab-moon { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fffaf0, #d2b87f 60%, #8f7646); box-shadow: inset -2px -2px 3px rgba(28, 20, 8, .5); }
.board-tab[aria-selected="true"] .tab-moon { box-shadow: inset -2px -2px 3px rgba(28, 20, 8, .5), 0 0 0 1px rgba(25, 19, 10, .35); }

.board-head { margin-top: 22px; text-align: center; }
.board-kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.board-title { margin-top: 8px; font: 500 clamp(32px, 3.6vw, 54px)/1.08 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.board-title em { font-style: normal; color: var(--gold-hi); }
.board-title.is-long { font-size: clamp(28px, 3vw, 44px); }
.board-title:focus { outline: none; }
.board-title:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; }
.board-gap { margin: 10px auto 0; max-width: 66ch; color: var(--ink-2); font-size: 16px; }
.board-gap b { color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-gap strong { color: var(--ink); overflow-wrap: anywhere; }
.board.is-final .board-gap { color: #ead7a8; }

.entry { max-width: 1136px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.entry-field {
  position: relative; display: flex; align-items: center; min-height: 56px; min-width: 0;
  border: 1px solid rgba(232, 197, 126, .35); border-radius: 999px; background: rgba(7, 11, 13, .84);
}
.entry-field:focus-within { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(232, 197, 126, .18); }
.entry-field:has([aria-invalid="true"]) { border-color: var(--err); }
.entry-contact { flex: 1 1 22rem; padding-left: 52px; }
.entry-platform { flex: 0 1 12.5rem; }
.entry-category { flex: 0 1 20rem; }
.entry-icon { position: absolute; left: 12px; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--gold-hi); }
.entry-field input, .entry-field select {
  width: 100%; min-height: 54px; border: 0; background: transparent; color: var(--ink);
  font-size: 17px; border-radius: inherit;
}
.entry-field input { padding: 0 22px 0 6px; }
.entry-field input::placeholder { color: var(--muted); opacity: 1; }
.entry-field input:focus-visible, .entry-field select:focus-visible { outline: none; }
.entry-field select { -webkit-appearance: none; appearance: none; padding: 0 46px 0 22px; cursor: pointer; }
.entry-field select:has(option[value=""]:checked) { color: var(--muted); }
.entry-select::after, .sel::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--gold-hi); border-bottom: 2px solid var(--gold-hi); transform: rotate(45deg); pointer-events: none;
}
.entry-cta { flex: 0 0 auto; min-height: 56px; padding: 0 32px; font-size: 17px; }
.entry-msgs { flex: 1 1 100%; display: grid; gap: 4px; text-align: left; padding: 0 22px; }
.entry-msgs:not(:has(p:not([hidden]))) { display: none; }
.entry-hint { font-size: 14px; color: var(--muted); }
.entry-note { font-size: 14px; color: #ead7a8; border-left: 2px solid var(--gold); padding-left: 10px; }
.entry-foot { margin: 10px auto 0; max-width: 1136px; text-align: center; font-size: 14px; color: var(--muted); }

/* ── board grid: ranking + sidebar (about 3 : 1) ──────────── */
.board-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 28px; margin-top: 30px; align-items: start; }
.panel:focus { outline: none; }
.panel:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; border-radius: 12px; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.list-title { font: 600 16px/1.4 var(--sans); color: var(--ink); }
.list-count { font-weight: 400; color: var(--muted); }
.list-filter { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.sel { position: relative; display: inline-flex; }
.sel select {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 44px 0 16px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(7, 11, 13, .84); color: var(--ink); font-size: 14px;
}
.sel::after { right: 18px; }
.list-note { margin-top: 10px; font-size: 14px; color: #ead7a8; border-left: 2px solid var(--gold); padding-left: 10px; }

.board-list { list-style: none; margin: 22px 0 0; padding: 0; }
.row {
  position: relative; display: grid; grid-template-columns: 56px auto minmax(0, 1fr);
  grid-template-areas: "rank tok body"; align-items: center; column-gap: 20px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.row--top { border: 1px solid transparent; border-radius: 26px; margin-bottom: 14px; }
.row--r1 { padding-top: 26px; padding-bottom: 26px; background: linear-gradient(135deg, rgba(201, 162, 87, .26), rgba(201, 162, 87, .12)); border-color: rgba(232, 197, 126, .52); box-shadow: 0 0 44px rgba(232, 197, 126, .1); }
.row--r2 { background: rgba(201, 162, 87, .12); border-color: rgba(232, 197, 126, .26); }
.row--r3 { background: rgba(201, 162, 87, .065); border-color: rgba(232, 197, 126, .15); }
.row.is-you:not(.row--top) { background: rgba(201, 162, 87, .06); }
.board.is-final .row--holder { animation: holder-glow 5.5s ease-in-out infinite; }
@keyframes holder-glow { 50% { box-shadow: 0 0 70px rgba(232, 197, 126, .26); } }
.row-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 32px);
  padding: 5px 14px; border-radius: 999px; background: var(--gold-fill); color: #19130a;
  font: 600 13px/1.25 var(--sans); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank { grid-area: rank; font: 600 22px/1 var(--sans); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.row--top .rank { color: var(--gold-hi); }
.token-link { grid-area: tok; display: block; border-radius: 22%; text-decoration: none; }
.row-body { grid-area: body; min-width: 0; }
.row-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.b-name-link { flex: 1 1 14rem; min-width: 0; color: var(--ink); text-decoration: none; font: 600 20px/1.3 var(--sans); overflow-wrap: anywhere; border-radius: 6px; }
.row--r1 .b-name-link { font-size: 22px; }
.b-name-link:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.row .amt { margin-left: auto; font: 700 20px/1.3 var(--sans); color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row--r1 .amt { font-size: 22px; }
.b-desc { margin-top: 3px; color: var(--ink-2); font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.b-meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font-size: 14px; color: var(--muted); }
.sep { margin: 0 8px; color: var(--muted); }
.cat { color: var(--ink); font-weight: 600; }
.b-host { color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 12px; }
.row-boost {
  margin-left: 12px; min-height: 36px; padding: 4px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gold); background: rgba(201, 162, 87, .14); color: var(--gold-hi); font: 600 13px/1 var(--sans);
}
.row-boost:hover { background: rgba(201, 162, 87, .26); }
.row-empty { padding: 26px 20px; border: 1px dashed var(--line-2); border-radius: 20px; color: var(--ink-2); text-align: center; }
.list-more { display: flex; justify-content: center; margin-top: 22px; }
.board.is-race .home-only { display: none !important; }
.list-foot { margin-top: 18px; }

/* ── brand tokens: tactile monogram tiles ─────────────────── */
.token {
  --h: 200;
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 15px/1 var(--serif); color: #fbf3df; letter-spacing: .02em;
  background: radial-gradient(circle at 35% 28%, hsl(var(--h) 36% 50%), hsl(var(--h) 40% 22%) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 7px rgba(0, 0, 0, .4), 0 0 0 1px rgba(232, 197, 126, .5), 0 5px 12px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.token--row { width: 68px; height: 68px; border-radius: 22%; font-size: 24px; }
.row--r1 .token--row { width: 88px; height: 88px; font-size: 31px; }
.row--r2 .token--row, .row--r3 .token--row { width: 78px; height: 78px; font-size: 27px; }
.token--sm { width: 36px; height: 36px; font-size: 13px; border-radius: 22%; }
.token--xs { width: 30px; height: 30px; font-size: 11px; border-radius: 22%; }
.token--none { background: rgba(255, 255, 255, .04); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.token-link:hover .token { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -3px 7px rgba(0, 0, 0, .4), 0 0 0 1.5px var(--gold-hi), 0 6px 16px rgba(0, 0, 0, .5); }
.token-link:active .token { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 1px rgba(232, 197, 126, .55), 0 2px 5px rgba(0, 0, 0, .4); }
.ad { font: 600 11px/1 var(--mono); letter-spacing: .1em; color: #dcc590; border: 1px solid rgba(232, 197, 126, .42); border-radius: 4px; padding: 4px 6px; }
.tag { font-size: 12px; line-height: 1.3; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(243, 239, 228, .18); color: var(--ink-2); }
.tag--you { border-color: var(--gold); color: var(--gold-hi); }
.tag--pending { border-style: dashed; border-color: rgba(232, 197, 126, .5); color: #ead7a8; }
.tag--new { border-color: var(--ok); color: var(--ok); }

/* A short, tasteful reveal; static under reduced motion or Pause. */
.is-revealed { animation: reveal-sweep 1.2s ease-out; }
.is-revealed .token { animation: token-rise .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes reveal-sweep { from { background-color: rgba(201, 162, 87, .24); box-shadow: inset 0 0 0 1px rgba(232, 197, 126, .7); } }
@keyframes token-rise { from { transform: translateY(8px) scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }

/* ── sidebar ─────────────────────────────────────────────── */
.board-side { display: grid; gap: 16px; padding-top: 2px; }
.side-card { border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px 16px; background: rgba(8, 12, 14, .62); }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.side-head h2 { display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--sans); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); flex: none; }
.side-link { font-size: 14px; padding: 0 2px; }
.side-list { list-style: none; margin: 4px 0 0; padding: 0; }
.side-list li { display: grid; grid-template-columns: 2.2rem auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.side-rank { font: 600 13px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.side-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.side-amt { font-size: 14px; font-weight: 700; color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-list .side-empty { display: block; color: var(--muted); font-size: 14px; }
.side-note { margin-top: 8px; font-size: 13px; color: var(--muted); }
.side-month { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.side-res { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; }

/* ── past months ─────────────────────────────────────────── */
.hist-year { margin-top: 18px; }
.hist-year h3 { font: 500 13px/1.4 var(--mono); letter-spacing: .16em; color: var(--gold); }
.hist-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hist-row { display: grid; grid-template-columns: 7.5rem auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 12px 6px; border-top: 1px solid var(--line); }
.hist-row.is-win .h-res { color: var(--ink); }
.h-month { color: var(--muted); }
.h-res { color: var(--ink-2); overflow-wrap: anywhere; }

/* ── race route ──────────────────────────────────────────── */
.race { position: relative; padding-bottom: 72px; }
.race-bar { max-width: var(--wrap); margin: 0 auto; padding: 16px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.race-id { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); text-align: center; }
.race-bar-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.race-motion { display: none !important; }
.pill { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; color: #ead7a8; border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 12px; }
.race-notes, .demo-tools { max-width: calc(var(--wrap) - 48px); margin: 8px auto 0; }
.race-notes { padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(8, 12, 14, .62); }
.race-notes h2 { font: 400 26px/1.15 var(--serif); }
.race-notes ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
.demo-tools { margin-top: 24px; border: 1px dashed var(--line-2); border-radius: 16px; padding: 4px 18px 18px; background: rgba(8, 12, 14, .6); }
.demo-tools summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: #ead7a8; }
.demo-tools fieldset { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.demo-tools legend { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.demo-tools label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.demo-tools input[type="radio"] { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.tool-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ── home lower placeholders ─────────────────────────────── */
.kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.paths { max-width: var(--wrap); margin: 0 auto; padding: 24px 24px 96px; }
.paths-title { margin-top: 12px; font: 400 clamp(30px, 3.6vw, 48px)/1.06 var(--serif); letter-spacing: -.02em; }
.paths-title em { color: var(--gold-hi); }
.path-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.path { border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: rgba(8, 12, 14, .66); scroll-margin-top: 100px; }
.path h3 { margin-top: 12px; font: 400 26px/1.15 var(--serif); }
.path > p:not(.kicker) { margin-top: 10px; color: var(--ink-2); }
.path .demo-note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 14px; color: var(--muted); }
.path:focus { outline: none; }
.path:focus-visible { outline: 2px solid var(--gold-hi); }

.foot { max-width: var(--wrap); margin: 0 auto; padding: 28px 24px 56px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; scroll-margin-top: 100px; }
.foot:focus { outline: none; }

/* ── toast / live region ─────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 40; transform: translate(-50%, 12px);
  width: max-content; max-width: min(560px, calc(100vw - 24px));
  padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line-2);
  background: rgba(11, 17, 19, .96); color: var(--ink); font-size: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { padding: 0; border: 0; }

/* v10: a brief, quiet ring at the portal (620 ms, never over the board for
   longer); the solar scene carries the rest of the entry. */
.portal-ring {
  position: fixed; z-index: 30; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(232, 197, 126, .7);
  box-shadow: 0 0 26px rgba(232, 197, 126, .3), inset 0 0 20px rgba(232, 197, 126, .2);
  transform: translate(-50%, -50%);
}

/* ── dialogs ─────────────────────────────────────────────── */
.dlg {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 28px; border: 1px solid var(--line-2); border-radius: 20px;
  background: #0b1113; color: var(--ink); box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.dlg::backdrop { background: rgba(3, 5, 6, .74); }
.dlg h2 { margin-top: 10px; font: 400 clamp(26px, 4vw, 32px)/1.12 var(--serif); overflow-wrap: anywhere; }
.dlg > p, .dlg form, #joinFormWrap > p, #joinAlready > p { margin-top: 12px; }
.sim-badge { display: inline-block; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #ead7a8; border: 1px dashed var(--line-2); border-radius: 6px; padding: 5px 8px; }
.sim-banner { border: 1px dashed rgba(232, 197, 126, .65); background: rgba(201, 162, 87, .09); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.sim-banner strong { display: block; color: var(--gold-hi); letter-spacing: .02em; }
.note { font-size: 14px; color: #ead7a8; border-left: 2px solid var(--gold); padding-left: 10px; }
.field { margin-top: 16px; display: grid; gap: 6px; }
.field label { font-weight: 600; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .money input {
  width: 100%; min-height: 48px; padding: 10px 14px; font-size: 16px;
  background: #070b0d; border: 1px solid rgba(232, 197, 126, .35); border-radius: 12px; color: var(--ink);
}
.field input[aria-invalid="true"], .money:has(input[aria-invalid="true"]) { border-color: var(--err); }
.field-err, .form-err { color: var(--err); font-size: 14px; }
.form-err { margin-top: 12px; }
.dlg-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dlg-acts--stack { flex-direction: column; }
.dlg-acts--stack .btn { width: 100%; }

.join-summary { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(201, 162, 87, .06); }
.join-summary p { min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.join-kind { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

.boost-sum { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 6px; justify-items: start; font-size: 14px; color: var(--ink-2); }
.boost-sum strong { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.projection { margin-top: 12px; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.amounts, .scenario { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.amounts legend, .scenario legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.scenario { margin-top: 18px; padding: 14px 16px 16px; border: 1px dashed var(--line-2); border-radius: 14px; }
.scenario legend { font-weight: 500; font-size: 14px; color: #ead7a8; padding: 0 6px; }
.scenario .dlg-acts { margin-top: 4px; }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preset { position: relative; display: block; }
.preset input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.preset span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; border: 1px solid rgba(232, 197, 126, .35); border-radius: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preset input:checked + span { background: rgba(201, 162, 87, .22); border-color: var(--gold-hi); color: #fff6dc; }
.preset input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.custom-row { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: 8px; margin-top: 8px; align-items: stretch; }
.money { display: flex; align-items: center; background: #070b0d; border: 1px solid rgba(232, 197, 126, .35); border-radius: 12px; padding-left: 12px; min-width: 0; }
.money > span { color: var(--muted); font-weight: 600; }
.money input { border: 0; background: transparent; padding-left: 6px; min-width: 0; }
.money input:focus-visible { outline: none; }
.money:focus-within { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.pay-state { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, .035); border-radius: 0 10px 10px 0; }
.pay-state strong { display: block; }
[data-status="failed"] .pay-state { border-left-color: var(--err); }
[data-status="confirmed"] .pay-state { border-left-color: var(--ok); }
.pay-sum { margin: 12px 0 0; display: grid; gap: 8px; }
.pay-sum div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.pay-sum dt { color: var(--ink-2); font-size: 14px; min-width: 0; }
.pay-sum dd { margin: 0 0 0 auto; font-weight: 700; font-size: 18px; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── motion: shared preference and hidden tabs ───────────── */
html.doc-hidden *, html.doc-hidden *::before, html.doc-hidden *::after { animation-play-state: paused !important; }
html.ml-motion-off .toast { transition: none; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1079px) {
  .nav, .head-acct { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .head-actions { margin-left: auto; }
  .product-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: rgba(7, 11, 13, .5); }
}
@media (min-width: 1080px) { .drawer { display: none !important; } }
@media (max-width: 900px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .board-side { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
  .path-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .entry-contact { flex-basis: 100%; }
  .entry-platform, .entry-category { flex: 1 1 12rem; }
  .entry-cta { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .head-in { padding: 8px 14px; gap: 10px; min-height: 60px; }
  .head-motion { display: none !important; }
  .strip-motion, .race-motion { display: inline-flex !important; }
  .product-strip a { padding: 0 12px; }
  .ds-long { display: none; }
  .brand:where(.ml-solar *) { font-size: 18px; gap: 9px; }
  .board { padding: 16px 16px 44px; }
  .board-tab { padding: 0 16px; font-size: 14px; }
  .board-head { margin-top: 16px; }
  .board-kicker { letter-spacing: .1em; gap: 10px; }
  .board-gap { font-size: 15px; }
  .entry { gap: 10px; margin-top: 18px; }
  .entry-field, .entry-cta { min-height: 52px; }
  .entry-field input, .entry-field select { min-height: 50px; font-size: 16px; }
  .entry-msgs { padding: 0 8px; }
  .board-grid { margin-top: 24px; }
  .board-list { margin-top: 20px; }
  .row { grid-template-columns: 34px auto minmax(0, 1fr); column-gap: 12px; padding: 16px 14px; align-items: start; }
  .row--top { border-radius: 18px; margin-bottom: 12px; }
  .row--r1 { padding-top: 22px; padding-bottom: 18px; }
  .rank { font-size: 17px; padding-top: 14px; }
  .token--row { width: 46px; height: 46px; font-size: 17px; }
  .row--r1 .token--row { width: 56px; height: 56px; font-size: 20px; }
  .row--r2 .token--row, .row--r3 .token--row { width: 50px; height: 50px; font-size: 18px; }
  .b-name-link, .row--r1 .b-name-link { flex-basis: 100%; font-size: 17px; }
  .row .amt, .row--r1 .amt { margin-left: 0; font-size: 17px; }
  .b-desc { font-size: 14px; -webkit-line-clamp: 2; }
  .b-meta { font-size: 13px; }
  .tags { margin-left: 0; flex-basis: 100%; }
  .row-boost { margin-left: 0; margin-top: 2px; }
  .row-badge { font-size: 12px; padding: 4px 12px; }
  .hist-row { grid-template-columns: auto minmax(0, 1fr); }
  .hist-row .h-month { grid-column: 1 / -1; }
  .race-bar { padding: 12px 16px 0; }
  .race-id { order: 3; flex-basis: 100%; text-align: left; letter-spacing: .1em; }
  .race-notes, .demo-tools { max-width: none; margin-left: 16px; margin-right: 16px; }
  .race-notes { padding: 18px; }
  .paths { padding: 24px 16px 72px; }
  .path { padding: 22px; }
  .dlg { padding: 22px 18px; }
}
/* Narrowest phones: rank above the token in one slim column, so the
   name, description and amount get the full remaining width. */
@media (max-width: 420px) {
  .row { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "rank body" "tok body"; row-gap: 8px; column-gap: 12px; padding: 16px 12px; }
  .row--r1 { padding-top: 22px; }
  .rank { padding-top: 4px; }
  .token-link { justify-self: center; }
  .token--row, .row--r1 .token--row, .row--r2 .token--row, .row--r3 .token--row { width: 42px; height: 42px; font-size: 15px; }
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-row { grid-template-columns: minmax(0, 1fr); }
  .side-list li { grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: 8px; }
}

/* ── rank target: rank control, preview pill, review ─────────
   The pill sits on the row's top edge, centred, like the reference's
   hover pill, so it never covers the brand name or amount. Rows with a
   badge carry it on their bottom edge instead. It previews only: the
   rank button underneath is the control, for mouse, keyboard and touch. */
.rank-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  justify-self: center; min-width: 44px; min-height: 44px; padding: 6px 4px; margin: 0;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
}
.rank-btn:hover, .rank-btn:focus-visible { color: var(--gold-hi); background: rgba(201, 162, 87, .12); }
.rank-cue {
  display: none; font: 600 10px/1 var(--sans); letter-spacing: .02em; color: var(--gold-hi);
  padding-bottom: 2px; border-bottom: 1px dashed rgba(232, 197, 126, .65);
}
.rank-pill {
  position: absolute; z-index: 3; top: 0; left: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 24px); padding: 5px 14px; border-radius: 999px;
  background: var(--gold-fill); color: #19130a; box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(25, 19, 10, .35);
  font: 600 13px/1.25 var(--sans); letter-spacing: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility .15s;
}
.rank-pill--info { background: #11181a; color: var(--gold-hi); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line-2); }
.row.has-badge .rank-pill { top: auto; bottom: 0; transform: translate(-50%, 50%); }
@media (hover: hover) {
  .row:hover .rank-pill { opacity: 1; visibility: visible; pointer-events: auto; }
  .row:hover .rank-btn { color: var(--gold-hi); }
}
.rank-btn:focus-visible .rank-pill { opacity: 1; visibility: visible; pointer-events: auto; }
/* Keyboard focus wins over a different hovered row: keep one readable action. */
#boardList:has(.rank-btn:focus-visible) .row:not(:has(.rank-btn:focus-visible)) .rank-pill { opacity: 0; visibility: hidden; pointer-events: none; }
html.ml-motion-off .rank-pill { transition: none; }
/* No precise hover: the rank shows a visible "Boost" cue to tap. */
@media (hover: none), (max-width: 560px) { .rank-cue { display: block; } }
@media (max-width: 560px) {
  .rank-btn { min-width: 0; width: 100%; padding: 10px 0 6px; }
  .rank-pill { font-size: 12px; padding: 4px 12px; }
}
@media (max-width: 420px) { .rank-btn { padding-top: 2px; } }

.review { margin-top: 12px; }
.review > * + * { margin-top: 12px; }
.review .pay-sum { margin-top: 12px; }
.rv-lead { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.rv-lead:focus { outline: none; }
.rv-lead strong { color: var(--gold-hi); }
.rv-notes { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
#rvChanged:focus { outline: none; }

/* ── sidebar: this month's race ───────────────────────────── */
.side-race .tab-moon { flex: none; }
.sr-leader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.sr-k { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sr-name { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sr-amt { text-align: right; font-size: 15px; font-weight: 700; color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-msg { margin-top: 4px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.sr-msg b { color: var(--gold-hi); white-space: nowrap; }
.sr-when { padding-top: 10px; border-top: 1px solid var(--line); }
.sr-count { margin-top: 2px; font: 700 18px/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.sr-at { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.sr-foot { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* The 30-option category list has long labels: let both selects shrink
   inside narrow layouts instead of widening the page. */
.list-filter { min-width: 0; max-width: 100%; }
.sel { min-width: 0; max-width: 100%; }
.sel select { max-width: 100%; text-overflow: ellipsis; }
@media (min-width: 761px) { .entry-category { flex-basis: 21.5rem; } }

/* ── monthly category boards ─────────────────────────────────
   On a category board the category rank leads; the overall rank sits
   beneath it, smaller, and wraps inside narrow rank columns. */
.rank-ov { display: block; margin-top: 3px; font: 600 11px/1.2 var(--sans); letter-spacing: 0; color: var(--muted); white-space: normal; }
.row--top .rank-ov { color: #d9c08a; }
.tag--cat { border-color: rgba(232, 197, 126, .55); color: #ead7a8; }
.h-cats { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.h-cats summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #ead7a8; }
.h-cats ul { margin: 4px 0 8px; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.h-cat { color: var(--ink); font-weight: 600; }
.h-cat::after { content: ":"; }

/* Independent pixel-review correction, Codex, 13 October 2026.
   Keep the reference's compact introduction so the public list is prominent.
   The month remains in the tabs/list heading; its second kicker is redundant. */
.board { padding-top: 10px; }
.board-head { margin-top: 8px; }
.board-kicker { display: none; }
.board-title { margin-top: 0; font-size: clamp(32px, 3.6vw, 48px); }
.board-gap { margin-top: 4px; font-size: 14px; }
.entry { margin-top: 12px; }
.entry-foot { margin-top: 6px; font-size: 12px; }
.board-grid { margin-top: 14px; }
.board-list { margin-top: 14px; }
@media (min-width: 761px) {
  .entry-field, .entry-cta { min-height: 50px; }
  .entry-field input, .entry-field select { min-height: 48px; }
  .list-filter select { min-height: 36px; }
}
@media (max-width: 560px) {
  .board { padding-top: 12px; }
  .board-head { margin-top: 10px; }
  .board-gap { font-size: 14px; }
  .entry { margin-top: 12px; }
  .board-grid { margin-top: 18px; }
}
/* At tablet widths the two fields fit one row; make the wrapped CTA
   intentional and full-width instead of a small orphan at the left. */
@media (min-width: 761px) and (max-width: 900px) {
  .entry-cta { flex: 1 1 100%; }
}

/* Mobile density, 13 October 2026: at 640 px and below the entry row and
   its footer sit behind one Join free disclosure (race-ui.js), so the #1
   row shows sooner. The bar stays hidden without script and on wider
   screens, where the entry row is always open as before. */
.entry-bar { display: none; }
@media (max-width: 640px) {
  .entry-bar { display: grid; gap: 6px; margin-top: 10px; text-align: center; }
  .entry-toggle { width: 100%; min-height: 48px; padding: 10px 18px; font-size: 16px; }
  .entry-toggle::after {
    content: ""; width: 7px; height: 7px; margin-top: -4px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  }
  .entry-toggle[aria-expanded="true"] { background: rgba(10, 14, 16, .45); color: var(--gold-hi); border-color: var(--line-2); box-shadow: none; }
  .entry-toggle[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
  .entry-teaser { font-size: 13px; line-height: 1.4; color: var(--muted); }
  .entry-panel .entry { margin-top: 10px; }
  .entry-panel .entry-foot { font-size: 13px; }
  .entry-field select { text-overflow: ellipsis; }
}
/* ── solar hero (v7 galaxy restoration, Claude, 13 October 2026) ──────
   Brand copy left, an empty stage cell where the scene places its Sun,
   the compact public race card right (Moon above it). Below 960 px the
   stage becomes a short band on top, then copy, then the card, so the
   #1 shows before the long board. Content only; the scene stays behind. */
.solar-hero {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(24px, 5vh, 64px) 24px clamp(16px, 3vh, 36px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(120px, .8fr) minmax(300px, 360px);
  grid-template-areas: "copy stage race"; align-items: center; gap: 24px;
  min-height: min(720px, calc(100vh - 96px)); min-height: min(720px, calc(100svh - 96px));
}
.hero-copy { grid-area: copy; max-width: 34rem; }
.hero-stage { grid-area: stage; align-self: stretch; min-height: 240px; }
.hero-race { grid-area: race; align-self: end; }
.hero-kicker { color: var(--gold-hi); }
.hero-title { margin-top: 14px; font: 500 clamp(40px, 4.6vw, 66px)/1.02 var(--serif); letter-spacing: -.03em; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.hero-title em { display: block; font-style: italic; color: var(--gold-hi); }
.hero-lede { margin-top: 16px; max-width: 30rem; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
.hero-paths { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.hero-race { border: 1px solid var(--line-2); border-radius: 22px; padding: 14px 16px 16px; background: rgba(8, 12, 14, .8); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.hr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.hr-title { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.hr-title .tab-moon { flex: none; }
.hr-pill { flex: none; font-size: 11px; padding: 4px 9px; }
.hr-body { margin-top: 8px; }
.hr-lead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(201, 162, 87, .22), rgba(201, 162, 87, .08)); border: 1px solid rgba(232, 197, 126, .4); }
.hr-k { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.hr-name { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.hr-amt { text-align: right; font: 700 18px/1.3 var(--sans); color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-link { color: var(--ink); text-decoration: none; border-radius: 6px; }
.hr-link:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.hr-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hr-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); font-size: 15px; }
.hr-list li:first-child { border-top: 0; }
.hr-rank { font-weight: 600; color: var(--gold-hi); text-align: center; font-variant-numeric: tabular-nums; }
.hr-list .hr-link, .hr-list .hr-slot { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.hr-row-amt { font-weight: 700; color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-msg { padding: 10px 2px; color: var(--ink-2); font-size: 14px; }
.hr-note { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.hr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hr-acts .btn { flex: 1 1 auto; }
.board { scroll-margin-top: 72px; }

@media (max-width: 959px) {
  .solar-hero {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "copy" "race";
    min-height: 0; gap: 18px; padding-top: 0;
  }
  .hero-stage { min-height: 0; height: clamp(200px, 30vw, 280px); }
  .hero-copy { max-width: 40rem; }
  .hero-race { align-self: stretch; max-width: 34rem; width: 100%; }
}
@media (max-width: 760px) {
  .hero-stage { height: clamp(150px, 42vw, 230px); }
  .hero-title { margin-top: 10px; font-size: clamp(32px, 9vw, 42px); }
  .hero-lede { margin-top: 10px; font-size: 16px; }
  .hero-paths { margin-top: 16px; }
  .hero-paths .btn { flex: 1 1 9rem; min-height: 46px; padding: 10px 16px; }
}
@media (max-width: 560px) {
  .solar-hero { padding: 0 16px 8px; gap: 14px; }
  .hero-race { padding: 12px 12px 14px; border-radius: 18px; }
  .hr-name { font-size: 16px; }
  .hr-amt { font-size: 16px; }
}
@media (max-width: 360px) {
  .hr-lead { grid-template-columns: auto minmax(0, 1fr); }
  .hr-amt { grid-column: 2; text-align: left; }
}

/* Independent 320px pixel review: compact the headline rather than hide
   ranking content. The disclosure alone still left the paid total below fold. */
@media (max-width: 360px) {
  .board-title, .board-title.is-long { font-size: 25px; }
  .board-gap { font-size: 13px; line-height: 1.35; }
  .entry-teaser { font-size: 12px; }
  .list-head { font-size: 14px; }
}

/* Owner V9 navigation and public race portal. Static effects respect Pause/reduced motion. */
.head-in { gap: 16px; }
.nav { gap: 2px; margin-left: 0; }
.head-actions { margin-left: auto; }
.nav a { padding-inline: 10px; font-size: 14px; }
.nav a.nav-moon { color: var(--gold-hi); max-width: none; white-space: nowrap; line-height: 1.25; font-size: 13px; }
.moon-portal { display:flex; align-items:center; gap:16px; margin:22px 0 20px; padding:12px 16px 12px 10px; width:fit-content; max-width:100%; border:1px solid rgba(220,184,112,.48); border-radius:60px 20px 20px 60px; background:linear-gradient(115deg,rgba(211,173,95,.16),rgba(7,11,13,.8)); text-decoration:none; color:var(--ink); }
.throne-ring { display:grid; place-items:center; width:60px; height:60px; flex:none; border-radius:50%; border:2px solid #d9b56e; box-shadow:inset 0 0 18px rgba(215,175,97,.3),0 0 20px rgba(215,175,97,.1); background:radial-gradient(ellipse at 35% 20%,#4e4430,#111618 65%); }
.throne-ring span { color:#ffe2a6; font-size:28px; }
.throne-copy { display:grid; gap:6px; }
.throne-copy strong { font:600 clamp(18px,1.55vw,22px)/1.15 var(--serif); }
.throne-copy > span { color:var(--gold-hi); font-size:13px; font-weight:600; }
.moon-portal:hover { border-color:var(--gold-hi); background:linear-gradient(115deg,rgba(211,173,95,.23),rgba(7,11,13,.8)); }
.moon-portal:focus-visible { outline:2px solid var(--gold-hi); outline-offset:5px; }
.account-menu { position:relative; font-size:14px; }
.account-menu summary { cursor:pointer; min-height:44px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--line-2); border-radius:30px; color:var(--ink); }
.account-menu summary::after { content:'⌄'; margin-left:8px; }
.account-pop { position:absolute; right:0; top:calc(100% + 8px); padding:16px; min-width:240px; border:1px solid var(--line-2); border-radius:16px; background:#111719; display:grid; gap:12px; box-shadow:0 12px 36px #0008; z-index:30; }
@media(max-width:1079px) { .product-strip { flex-wrap:wrap; } .product-strip .strip-race { flex-basis:100%; justify-content:center; border:0; background:none; gap:10px; } .drawer .account-pop { left:0; right:auto; } }
@media(max-width:360px) { .moon-portal { gap:10px; padding-right:12px; } .throne-ring { width:48px; height:48px; } .throne-copy strong { font-size:19px; } }

/* V10 full bleed (Claude, 13 October 2026). The fixed scene and veil run
   corner to corner under viewport-fit=cover; page content, money and
   controls keep the device's safe areas (env() is 0 elsewhere, so no
   layout changes on ordinary screens). The background glow reaches
   further toward the edges so no centred box reads behind the scene. */
body {
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  background: radial-gradient(ellipse at 50% 38%, #121c1f 0%, #0b1214 52%, #070b0d 88%) fixed, #070b0d;
}
.toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* V11 tactile brand tokens (Claude, 13 October 2026). CSS only: the
   token link, its href and native behaviour are untouched. A slight
   perspective tilt and a glint on mouse hover; the same state when the
   row's name link (the token's keyboard stop) has keyboard focus, whose
   own outline stays; a restrained press. Pause or reduced motion keeps
   the glint and ring but drops every transform. */
.token--row { position: relative; overflow: hidden; }
.token--row::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 250, 235, 0) 32%, rgba(255, 250, 235, .3) 47%, rgba(255, 250, 235, 0) 62%);
  opacity: 0; transition: opacity .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .token-link:hover .token--row { transform: perspective(320px) rotateX(6deg) rotateY(-8deg) translateY(-1px); }
  .token-link:hover .token--row::after { opacity: 1; }
}
.token-link:focus-visible .token--row, .row:has(.b-name-link:focus-visible) .token--row {
  transform: perspective(320px) rotateX(6deg) rotateY(-8deg) translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -3px 7px rgba(0, 0, 0, .4), 0 0 0 1.5px var(--gold-hi), 0 6px 16px rgba(0, 0, 0, .5);
}
.token-link:focus-visible .token--row::after, .row:has(.b-name-link:focus-visible) .token--row::after { opacity: 1; }
.token-link:active .token--row { transform: translateY(1px) scale(.97); }
.token-link:active .token--row::after { opacity: .5; }
html.ml-motion-off .token--row { transform: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .token--row { transform: none !important; transition: none; }
}

/* V12 leader entry spotlight (Claude, 13 October 2026). The current
   overall #1's public card, once per fresh visit while the scene visits
   Earth, then gone; under Pause/reduced motion or without WebGL the same
   card is static, with Hide. It shares the hero's stage cell without
   changing the hero's layout (contain: size), never covers the header,
   copy or race card, and only its card and button take pointer input.
   data-phase comes from js/leader-spotlight.js. Country only (no city,
   pin or point); no separate ad badge. A placement, not a result. */
.leader-spot { grid-area: stage; align-self: stretch; justify-self: stretch; position: relative; z-index: 2; min-height: 0; contain: size; pointer-events: none; }
.ls-wrap { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(300px, calc(100% + 16px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ls-card {
  --ls-gap: 7px; --ls-open: .5s cubic-bezier(.22, .61, .36, 1);
  pointer-events: auto; width: 100%; display: grid; gap: var(--ls-gap); padding: 12px 14px;
  border: 1px solid rgba(232, 197, 126, .5); border-radius: 18px; background: rgba(8, 12, 14, .88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 34px rgba(232, 197, 126, .08);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s, grid-template-rows var(--ls-open), row-gap var(--ls-open);
}
/* The country first (locate), then the whole card (spotlight); it stays
   while the pointer or focus is on it as the scene returns. */
.leader-spot[data-country="yes"][data-phase="locate"] .ls-card,
.leader-spot:is([data-phase="spotlight"], [data-phase="static"], .is-held) .ls-card,
.leader-spot[data-phase="return"]:is(:hover, :focus-within) .ls-card {
  opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s, grid-template-rows var(--ls-open), row-gap var(--ls-open);
}
/* V13: no height snap. While a country is being found the card holds
   only its kicker and "Leading from …" line; at the spotlight phase
   (data-revealed, js/leader-spotlight.js) the brand row opens from 0fr to
   its natural height and fades in. The open card is exactly the V12
   card, so stage, layout and phone fit are unchanged. The closed row is
   hidden, so its link takes no focus; its 6px inset keeps an open link's
   focus ring inside the row's clip. */
.ls-card:has(> .ls-main) { grid-template-rows: auto 1fr auto; }
.ls-main { min-height: 0; overflow: hidden; margin: -6px; padding: 6px; transition: opacity .3s ease .12s, visibility 0s; }
.leader-spot[data-mode="animated"][data-country="yes"]:not([data-revealed]) .ls-card:has(> .ls-main) { grid-template-rows: auto 0fr auto; row-gap: calc(var(--ls-gap) / 2); }
.leader-spot[data-mode="animated"][data-country="yes"]:not([data-revealed]) :is(.ls-main, .ls-note) { opacity: 0; visibility: hidden; transition: none; }
.ls-skip {
  pointer-events: auto; min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243, 239, 228, .24); background: rgba(7, 11, 13, .62); color: var(--ink-2); font: 600 12px/1.2 var(--sans);
}
.ls-skip:hover { color: var(--ink); border-color: rgba(243, 239, 228, .5); }
.leader-spot[data-phase="return"]:not(:hover, :focus-within) .ls-skip { visibility: hidden; }
.ls-k { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.ls-amt { color: var(--ink); font-weight: 700; letter-spacing: .02em; }
.ls-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ls-token { width: 40px; height: 40px; border-radius: 22%; font-size: 15px; }
.ls-name { color: var(--ink); font: 600 18px/1.25 var(--sans); overflow-wrap: anywhere; border-radius: 6px; }
a.ls-name { text-decoration: underline; text-decoration-color: rgba(232, 197, 126, .45); text-underline-offset: 4px; }
a.ls-name:hover { text-decoration-color: var(--gold-hi); }
.ls-sub { margin-top: 2px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.ls-host { color: var(--muted); }
.ls-country { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.ls-demo { color: #ead7a8; font-size: 12px; }
.ls-body { font-size: 14px; color: var(--ink-2); }
.ls-note { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.hero-title:focus { outline: none; }
.hero-title:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; }
html.ml-motion-off .ls-card { transition: none; }
@media (prefers-reduced-motion: reduce) { .ls-card { transition: none; } }
@media (max-width: 959px) {
  .ls-wrap { left: auto; right: 0; top: 4px; bottom: 4px; transform: none; width: min(64%, 340px); justify-content: space-between; }
  .ls-skip { order: -1; }
  .solar-hero:has(.leader-spot:not([hidden])) .solar-caption { visibility: hidden; }
}
/* Phones: the card fits the stage band (no layout change): smaller type,
   two-line name, one-line handle; the website is the name link itself,
   and the note and long words stay available to assistive tech. */
@media (max-width: 760px) {
  .ls-card { --ls-gap: 3px; padding: 7px 10px 8px; border-radius: 14px; }
  .ls-k { font-size: 10px; letter-spacing: .05em; }
  .ls-main { gap: 8px; }
  .ls-token { width: 28px; height: 28px; font-size: 11px; }
  .ls-name { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ls-sub { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ls-host { display: none; }
  .ls-country { font-size: 12px; }
  .ls-demo { font-size: 11px; }
  .ls-body { font-size: 12.5px; line-height: 1.4; }
  .ls-skip { min-height: 28px; padding: 2px 10px; font-size: 11.5px; }
  .ls-long, .ls-note { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ls-country { line-height: 1.35; }
}
/* V13 narrow phones: "Leading from New Zealand · demo" stays one line in
   the stage band (whose height is fixed), at the same legible weight. */
@media (max-width: 380px) {
  .ls-card { padding-inline: 8px; }
  .ls-country { font-size: 11.5px; letter-spacing: -.005em; }
}
html.ml-motion-off .ls-main { transition: none; }
@media (prefers-reduced-motion: reduce) { .ls-main { transition: none; } }

/* V14 final polish (owner, 13 October 2026). Header: the miniature M's
   orbit is ~22 % larger (box 46 → 56 px; rings, dots, spin and Pause
   behaviour unchanged, the M itself unchanged). Rotated and flattened,
   its outer ring now reaches ~31 px from the mark's centre, ~14 px past
   the 34 px mark on each side, so the mark gains a 6 px left margin and
   the brand gap grows to 19 px: the dots pass clear of the wordmark and
   the screen edge. From 1080 px the primary nav is centred between the
   brand and the account controls, so spare width is shared on both sides
   instead of one long gap before sign-in; the Moon line, product pills
   and Plans get small deliberate gaps that scale gently with width. Below
   1080 px the existing collapse (menu button, product strip) is unchanged;
   every hit area keeps its 44 px height. */
.brand:where(.ml-solar *) { gap: 19px; }
.um-mark { margin-left: 6px; }
.um-orbit { inset: -11px; }
@media (min-width: 1080px) {
  .head-in { gap: clamp(16px, 1.6vw, 32px); }
  .nav { flex: 1 1 auto; justify-content: center; gap: clamp(4px, .45vw, 10px); min-width: 0; }
  .nav a.nav-moon { margin-right: clamp(2px, .7vw, 14px); }
  .nav .nav-product + a:not(.nav-product) { margin-left: clamp(2px, .4vw, 8px); }
  .head-actions { margin-left: 0; gap: 12px; }
}
/* Leader card hierarchy: the brand name is the strongest type (display
   serif, near-white, a restrained gold underline when it is a link; the
   global focus ring is untouched). In "Leading from Australia" only the
   country's own span is warm gold; the prefix is muted and the demo label
   stays quieter still. Phones keep the V13 type sizes and line heights,
   so the card's height in the fixed stage band does not grow. No motion. */
.ls-name { font: 600 19px/1.2 var(--serif); letter-spacing: -.005em; color: #fffaf0; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
a.ls-name { text-decoration: underline; text-decoration-color: rgba(232, 197, 126, .62); text-decoration-thickness: 1px; text-underline-offset: 5px; }
a.ls-name:hover { text-decoration-color: var(--gold-hi); }
.ls-from { color: var(--muted); }
.ls-place { color: var(--gold-hi); font-weight: 600; letter-spacing: .005em; }
.ls-country .ls-demo { color: rgba(170, 177, 169, .8); }
@media (max-width: 760px) {
  .ls-name { font-size: 14px; line-height: 1.25; }
  a.ls-name { text-underline-offset: 3px; }
}

/* Independent pixel review: reserve the wrapped model note below Hide
   on medium desktop; wide/short desktop and phone placement stays put. */
@media (min-width: 960px) and (max-width: 1199px) {
  .ls-wrap { bottom: 60px; }
}

/* V15 public listing clicks (owner, 13 October 2026). Beside each row's
   category and website, as on the reference board: a quiet count of local
   demo link activations in this tab (js/public-clicks.js). Plain text, no
   badge or motion. The phone teaser is now empty and takes no space. */
.b-clicks { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry-teaser:empty { display: none; }

/* V16 reference fidelity (owner, 13 October 2026). Inside the ranking:
   Top 10 / Top 20 are thin rules with a small gold label, only at a
   complete rank boundary; Latest activity is one quiet row of compact
   chips (each the listing's own link) that scrolls sideways when it
   overflows and never moves by itself. Under the header: the traffic
   pill, in its own calm row so the approved header keeps its spacing.
   Its Stats button keeps a 44 px hit area while the pill stays slim. */
.board-mark { display: flex; align-items: center; gap: 12px; padding: 10px 24px; }
.bm-rule { flex: 1 1 auto; height: 1px; background: var(--line-2); }
.bm-label { flex: none; font: 600 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }

.board-activity { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.act { display: grid; gap: 4px; min-width: 0; }
.act-title { padding: 0 24px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.act-list {
  list-style: none; margin: 0; padding: 5px 24px 8px; display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 24px; scrollbar-width: thin;
}
.act-list > li { flex: none; }
.act-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; max-width: 20rem; padding: 0 14px 0 8px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 12, 14, .6);
  color: var(--ink-2); text-decoration: none; font-size: 13px; line-height: 1.2; white-space: nowrap;
}
.act-chip:hover { border-color: var(--line-2); color: var(--ink); }
.act-chip:focus-visible { outline-offset: 2px; }
.token--act { width: 28px; height: 28px; font-size: 10.5px; border-radius: 22%; }
.act-name { min-width: 0; max-width: 10.5em; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.act-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.act-amt { color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.act-empty { padding: 2px 24px 4px; font-size: 14px; color: var(--muted); }

.traffic-row { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 7px 24px; }
.traffic {
  display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; padding: 0 2px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 12, 14, .55);
  font-size: 12px; line-height: 1.3; color: var(--muted);
}
.tr-n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.traffic .sep { margin: 0 6px; }
.tr-stats {
  height: 44px; margin: -8px 0; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--gold-hi); font: 600 12px/1 var(--sans);
}
.tr-stats:focus-visible { outline-offset: -6px; }
.tr-stats:hover { text-decoration: underline; text-decoration-color: rgba(232, 197, 126, .55); text-underline-offset: 3px; }
@media (max-width: 1079px) { .traffic-row { padding: 7px 14px; text-align: center; } }
@media (max-width: 560px) {
  .board-mark { padding: 8px 14px; }
  .act-title, .act-empty { padding-inline: 14px; }
  .act-list { padding-inline: 14px; scroll-padding-inline: 14px; }
  .act-name { max-width: 9em; }
}

/* Operator pixel correction: match the reference's compact two-line
   activity tiles. Five fit the desktop rail; narrow screens scroll tiles
   smaller than the viewport, so focused links can be fully revealed. */
.act-list > li { flex: 0 0 calc((100% - 32px)/5); min-width: 154px; }
.act-chip {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: 18px 18px; column-gap: 6px; row-gap: 1px;
  width: 100%; max-width: none; height: 58px; padding: 8px;
  border-radius: 13px;
}
.act-chip .token { grid-column: 1; grid-row: 1 / 3; }
.act-name { grid-column: 2 / 4; grid-row: 1; max-width: none; font-size: 12px; }
.act-rank { grid-column: 2; grid-row: 2; font-size: 11px; }
.act-amt { grid-column: 3; grid-row: 2; font-size: 11px; }
@media (max-width: 560px) {
  .act-list > li { flex-basis: 164px; }
  .act-name { max-width: none; }
}

/* Operator pixel correction: legacy universe-m.css assigns .um-orbit a
   520/320px fixed size. The nav mark owns its compact inset orbit. */
.site-head .um-orbit { width: auto; height: auto; border: 0; }