/* ===================================================================
   torpor.si
   One stylesheet. Paper and ink: a warm light ground, deep ink, one
   accent. Bricolage Grotesque for words and display, JetBrains Mono for
   numbers, addresses and anything that must line up. Rounded surfaces,
   quiet shadows, no hairline grids. A dark theme sits behind one
   attribute on <html>.
   =================================================================== */

@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "JB Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg:       #f6f4ef;
  --s1:       #ffffff;   /* a card, a panel */
  --s2:       #eeebe3;   /* hovered, inset */
  --line:     #e4e0d6;   /* a quiet edge */
  --line2:    #cfc9bc;   /* an edge that must be seen */
  --ink:      #16150f;
  --mute:     #6a665d;
  --faint:    #9a958a;
  --acc:      #ff4a1f;   /* the accent: live, selected, the primary action */
  --acc-ink:  #ffffff;
  --acc-soft: #ffe6de;
  --gold:     #b4761c;   /* the basket, listings */
  --gold-soft:#f6ead0;
  --up:       #148f4b;
  --up-soft:  #dcf3e4;
  --down:     #d83a1d;
  --platinum: #0a7f8f;   /* SI */
  --plat-soft:#d9eef1;
  --signal:   #d83a1d;
  --tile:     #ffffff;
  --shade:    rgba(22, 21, 15, .42);
  --shadow:   0 1px 2px rgba(22, 21, 15, .05), 0 10px 30px -14px rgba(22, 21, 15, .22);
  --shadow2:  0 2px 4px rgba(22, 21, 15, .06), 0 24px 60px -20px rgba(22, 21, 15, .35);

  --sans: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --mono: "JB Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(16px, 2.4vw, 32px);
  --wrap: 1400px;
  --r: 12px;     /* cards, panels */
  --rs: 8px;     /* buttons, inputs */
  --rp: 999px;   /* chips */
  --t: .14s;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:       #0f0f0e;
  --s1:       #171716;
  --s2:       #202020;
  --line:     #262624;
  --line2:    #363633;
  --ink:      #f2efe8;
  --mute:     #a39e93;
  --faint:    #6d695f;
  --acc:      #ff5a2e;
  --acc-ink:  #16150f;
  --acc-soft: #3a1b12;
  --gold:     #e2ab3f;
  --gold-soft:#332a14;
  --up:       #3ddc84;
  --up-soft:  #10301d;
  --down:     #ff6a4d;
  --platinum: #7fd8e6;
  --plat-soft:#0f2b30;
  --signal:   #ff6a4d;
  --tile:     #1b1b19;
  --shade:    rgba(0, 0, 0, .62);
  --shadow:   0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .7);
  --shadow2:  0 2px 4px rgba(0, 0, 0, .4), 0 30px 70px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.5 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--bg); }
.mono, .tnum { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* the brand marks are cream; on paper they go to ink */
:root:not([data-theme="dark"]) .brand img { filter: brightness(.09); }

/* ------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line2); }
.topbar { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 var(--pad); max-width: var(--wrap); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; height: 100%; text-decoration: none; flex: none; padding-right: 6px; }
.brand .mark { height: 26px; width: auto; }
.brand .word { height: 11px; width: auto; }
.nav { display: flex; gap: 2px; height: 100%; align-items: center; margin-left: 6px; }
.nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--rs); font: 600 14px var(--sans); color: var(--mute); text-decoration: none; transition: color var(--t), background var(--t); }
.nav a:hover { color: var(--ink); background: var(--s2); }
.nav a.on { color: var(--ink); background: var(--s2); }
.nav a.navsi { color: var(--platinum); font-weight: 700; letter-spacing: .02em; }
.ksearch { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 auto; max-width: 400px; height: 38px; padding: 0 12px 0 14px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); color: var(--faint); font: 400 13px var(--sans); cursor: text; text-align: left; transition: border-color var(--t), color var(--t), box-shadow var(--t); }
.ksearch:hover { border-color: var(--mute); color: var(--mute); }
.ksearch .lens { width: 12px; height: 12px; border: 1.6px solid currentColor; border-radius: 50%; box-shadow: 4px 4px 0 -2.6px currentColor; flex: none; }
.ksearch kbd { margin-left: auto; font: 500 10.5px var(--mono); padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--faint); background: var(--bg); }
.topwho { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; position: relative; }
.topwho .create { height: 36px; }
.topwho .btn.ghost.create.on { border-color: var(--ink); color: var(--ink); background: var(--s2); }
.theme { width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); color: var(--mute); cursor: pointer; display: grid; place-items: center; transition: color var(--t), border-color var(--t); }
.theme:hover { color: var(--ink); border-color: var(--mute); }
.theme i { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: inset -4px -3px 0 0 var(--s1); }
:root[data-theme="dark"] .theme i { box-shadow: none; outline: 2px solid currentColor; outline-offset: 2px; width: 7px; height: 7px; }
.wallet-chip { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 6px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); font: 500 12.5px var(--mono); color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color var(--t), background var(--t); }
.wallet-chip:hover { border-color: var(--mute); }
.wallet-chip .avatar { margin: 0; border-radius: 50%; }
.wallet-chip .addr { letter-spacing: 0; }
.wallet-chip .bal { color: var(--mute); padding-left: 9px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wallet-chip .bal small { font-size: 9.5px; color: var(--faint); margin-left: 2px; }
.wallet-chip .net { display: none; }
.wallet-chip .netbad { font: 600 10.5px var(--sans); color: var(--signal); }
.wallet-chip.off { border-color: var(--signal); }

.walmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow2); display: flex; flex-direction: column; overflow: hidden; animation: toastin .15s ease-out both; }
.walmenu .wmhead { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.walmenu .wmhead .avatar { margin: 0; border-radius: 50%; }
.walmenu .wmhead b { display: block; font: 500 13px var(--mono); }
.walmenu .wmhead span { font: 400 12px var(--sans); color: var(--mute); }
.walmenu .wmnet { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 12px var(--sans); color: var(--signal); }
.walmenu .wmnet i { display: none; }
.walmenu .wmnet.ok { color: var(--mute); }

.walmenu .wmnet .link { margin-left: auto; color: var(--ink); }
.walmenu > a, .walmenu > button { display: block; width: 100%; text-align: left; padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 500 13px var(--sans); text-decoration: none; cursor: pointer; }
.walmenu > a:hover, .walmenu > button:hover { background: var(--s2); }
.walmenu > button:last-child { border-bottom: 0; color: var(--mute); }
.walmenu > button:last-child:hover { color: var(--signal); }

/* the ticker: the last sales and listings, sliding under the header */
.ticker { position: relative; height: 34px; border-top: 1px solid var(--line); overflow: hidden; font: 500 11.5px/34px var(--sans); white-space: nowrap; }
.ticker:empty { display: none; }
.ticker .track { display: inline-flex; animation: ticker 70s linear infinite; will-change: transform; }
.ticker:hover .track { animation-play-state: paused; }
.ticker a { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--mute); text-decoration: none; border-right: 1px solid var(--line); }
.ticker a:hover { color: var(--ink); }
.ticker a img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; background: var(--s2); }
.ticker .k { font: 600 11px var(--sans); color: var(--faint); }
.ticker .k.sale { color: var(--up); }
.ticker .k.list { color: var(--gold); }
.ticker b { color: var(--ink); font-weight: 600; }
.ticker span:not(.k) { font-family: var(--mono); font-size: 11px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ page */
.page { flex: 1 0 auto; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 30px var(--pad) 80px; }
.page.wide { max-width: var(--wrap); }
.page.narrow { max-width: 760px; }
.section { margin-top: 28px; border: 1px solid var(--line2); border-radius: 16px; background: var(--s1); overflow: hidden; }
.section > .secthead { padding: 16px 20px; border-bottom: 1px solid var(--line); margin: 0; }
.section > .secthead + .secthead { border-top: 1px solid var(--line); }
.section > .secthead h2 { font-size: 20px; }
.section > .chead { padding: 10px 20px; }
.section .crow { border-radius: 0; padding: 12px 20px; }
.section .crow:last-child { border-bottom: 0; }
.section .crow:hover { background: var(--s2); }
.section > .more { padding: 12px 20px 16px; margin: 0; border-top: 1px solid var(--line); }
.section > .empty { margin: 16px 20px; }
.section .arow { border-radius: 0; padding: 10px 20px; }
.section .arow:last-child { border-bottom: 0; }
.section .launched, .section .sitop { gap: 0; }
.section .lcard, .section .sirowh { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 10px 20px; }
.section .lcard:last-child, .section .sirowh:last-child { border-bottom: 0; }
.section .lcard:hover, .section .sirowh:hover { background: var(--s2); }
.section > .morerow { padding: 16px 20px; }
.section > .lede, .section > .note { padding: 0 20px 16px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px var(--pad); border-top: 1px solid var(--line); font: 500 12px var(--sans); color: var(--faint); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ------------------------------------------------------------ type */
h1 { font: 800 clamp(44px, 7vw, 104px)/.92 var(--sans); letter-spacing: -.045em; margin: 0 0 22px; font-optical-sizing: auto; }
h1 em, h2 em { font-style: normal; color: var(--mute); font-weight: 500; }
h2 { font: 750 clamp(22px, 2.3vw, 30px)/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 12px; }
h2.plain { margin: 0; }
.h1s { font-size: clamp(36px, 4.8vw, 66px); letter-spacing: -.04em; margin-bottom: 8px; }
.lede { color: var(--mute); font-size: 16px; line-height: 1.5; max-width: 52ch; margin: 0 0 22px; }
.kicker { font: 600 13px var(--sans); color: var(--mute); margin: 0 0 10px; }
.lab { font: 500 12px var(--sans); color: var(--faint); }
.note { font: 400 13px/1.55 var(--sans); color: var(--mute); }
.note b { color: var(--ink); font-weight: 600; }
.note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.note a:hover { text-decoration-color: currentColor; }
.bad { color: var(--signal); }
.err { color: var(--signal); font: 500 12.5px var(--sans); min-height: 1.3em; margin: 0; }
.label { display: block; font: 500 12.5px var(--sans); color: var(--mute); }
.help { font: 400 12px/1.5 var(--sans); color: var(--faint); margin-top: 4px; }
.fine { font: 400 12.5px/1.55 var(--sans); color: var(--mute); min-height: 1.5em; }
.fine b { color: var(--ink); font-weight: 600; }
.faint { color: var(--faint); }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--rs); background: var(--ink); color: var(--bg); font: 700 13.5px var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t), transform var(--t); }
.btn:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btn.ghost { background: var(--s1); color: var(--ink); border-color: var(--line2); }
.btn.ghost:hover { background: var(--s2); border-color: var(--ink); color: var(--ink); }
.btn.ghost.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13px; }
.btn.xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn.bad { color: var(--signal); border-color: var(--line2); background: var(--s1); }
.btn.bad:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.wide { width: 100%; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font: 500 13px var(--sans); color: var(--mute); text-decoration: none; white-space: nowrap; transition: color var(--t); }
.link:hover { color: var(--ink); }
.cta { display: flex; gap: 8px; flex-wrap: wrap; }

/* tabs: a ruled line with the active one underlined */
.tabs { display: flex; gap: 0; width: 100%; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 11px 2px; margin-right: 22px; border: 0; background: none; color: var(--mute); font: 500 13.5px var(--sans); cursor: pointer; white-space: nowrap; transition: color var(--t); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px 2px 0 0; }
.tabs.sub { width: auto; border-bottom: 0; gap: 4px; }
.tabs.sub button { padding: 6px 11px; margin-right: 0; font-size: 12.5px; border-radius: var(--rp); }
.tabs.sub button.on { background: var(--ink); color: var(--bg); }
.tabs.sub button.on::after { display: none; }
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: var(--rp); background: var(--s2); color: var(--mute); font: 600 11px/18px var(--mono); text-align: center; }
.tabs button.on .badge { background: var(--acc); color: var(--acc-ink); }
.tabs.sub button.on .badge { background: var(--bg); color: var(--ink); }

/* ------------------------------------------------------------ panels and cells */
.panel { position: relative; padding: 20px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--s1); }
.panel.soft { background: var(--bg); }
.panel.dashed { border-style: dashed; background: none; }
.panel > .kicker { margin-bottom: 10px; }
/* a row of cells: tiles, strips, stat bars */
.tiles, .strip, .statbar, .dist { display: grid; gap: 1px; margin: 0 0 20px; background: var(--line); border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.strip { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0 0 28px; }
.tile, .statbar > div, .dist > div { background: var(--s1); padding: 20px 22px 18px; min-width: 0; }
.tile b, .statbar b { display: block; font: 750 34px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.tile span, .statbar span { font: 500 12px var(--sans); color: var(--faint); }
.statbar { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.statbar b { font-size: 26px; }
.statbar b .hype, .tile b .hype { font: inherit; letter-spacing: inherit; color: var(--ink); }
.statbar b .hype small, .tile b .hype small { font: 500 11px var(--mono); margin-left: 5px; color: var(--faint); }
.statbar .pctl { font: 400 11px var(--mono); color: var(--faint); margin-left: 6px; letter-spacing: 0; }
.empty { border: 1px dashed var(--line2); border-radius: var(--r); padding: 30px 20px; text-align: center; color: var(--faint); font: 500 13px var(--sans); }
.empty a { color: var(--ink); }
.empty.wide { grid-column: 1 / -1; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* ------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.input { width: 100%; min-width: 0; height: 42px; background: var(--s1); border: 1px solid var(--line2); border-radius: var(--rs); color: var(--ink); font: 400 14px var(--sans); padding: 0 12px; transition: border-color var(--t), box-shadow var(--t); }
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.input::placeholder { color: var(--faint); }
.input.mono, input[inputmode="decimal"].input, input[inputmode="numeric"].input { font-family: var(--mono); font-size: 13px; }
select.input { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="number"].input { text-align: right; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row .grow { flex: 1 1 200px; min-width: 0; }
.form { display: grid; gap: 14px; max-width: 560px; }
.spacer { flex: 1 1 auto; }
.chk { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--sans); color: var(--mute); cursor: pointer; white-space: nowrap; }
.chk input { accent-color: var(--ink); margin: 0; width: 14px; height: 14px; }
.chk.big { font-size: 13.5px; color: var(--ink); padding: 4px 0; }
.gate { max-width: 560px; padding-top: 4vh; }

/* ------------------------------------------------------------ money and marks */
.hype { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hype small { font-size: .7em; letter-spacing: .04em; color: var(--mute); margin-left: 4px; }
.hype.big { font: 650 clamp(36px, 4.6vw, 56px)/1 var(--sans); letter-spacing: -.03em; }
.hype.big small { font: 500 12px var(--mono); letter-spacing: .06em; }
.up { color: var(--up); } .down { color: var(--down); }
.delta { font: 500 11px var(--mono); margin-left: 6px; }
.badge-l { display: inline-flex; align-items: center; font: 600 10px var(--sans); letter-spacing: .02em; color: var(--ink); background: var(--s2); border-radius: var(--rp); padding: 2px 8px; vertical-align: middle; }
.badge-v { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--platinum); color: #fff; font-size: 10px; vertical-align: middle; }
.rankb { position: absolute; left: 8px; top: 8px; font: 600 11px/1 var(--mono); padding: 5px 8px; border-radius: 6px; background: var(--s1); color: var(--ink); box-shadow: var(--shadow); }
.rankb.top { color: var(--platinum); }
.rankb.high { color: var(--gold); }
.washb { font: 600 9px var(--mono); letter-spacing: .08em; color: var(--signal); background: var(--acc-soft); border-radius: 4px; padding: 2px 5px; margin-left: 6px; vertical-align: middle; }
.avatar { display: inline-block; vertical-align: middle; margin-right: 6px; flex: none; border-radius: 50%; }
.wallet-chip .avatar { margin-right: 0; }
.arr { color: var(--faint); }
.livedot { display: none; }

@keyframes blink { 50% { opacity: .2; } }

/* ------------------------------------------------------------ home */
.herob { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 28px 0 40px; }
.herob h1 { margin-bottom: 26px; }
.herob .kicker { margin-bottom: 18px; }
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wall a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--s2); border-radius: 10px; }
.wall img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .3, 1); }
.wall a:hover img { transform: scale(1.05); }
.wall .wtag { position: absolute; left: 6px; bottom: 6px; font: 500 11px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--s1); color: var(--ink); box-shadow: var(--shadow); }
.secthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.secthead h2 { margin: 0; }
.homegrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.launched { display: grid; gap: 8px; }
.lcard { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color var(--t); }
.lcard:hover { border-color: var(--line2); }
.lcard img, .lcard .nopic { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--s2); }
.lcard b { display: block; font: 600 14.5px/1.2 var(--sans); color: var(--ink); }
.lcard .lbody span { font: 400 12px var(--sans); color: var(--mute); }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.pagehead .lede { margin-bottom: 0; }
.pagestats { display: flex; gap: 0; flex: none; border: 1px solid var(--line2); border-radius: 16px; background: var(--s1); overflow: hidden; }
.pagestats:empty { display: none; }
.pagestats span { font: 500 12px var(--sans); color: var(--faint); padding: 14px 20px; border-right: 1px solid var(--line); }
.pagestats span:last-child { border-right: 0; }
.pagestats b { display: block; font: 750 26px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); margin-bottom: 7px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ collection rows */
.crow, .chead { display: grid; grid-template-columns: 32px 44px minmax(0, 1fr) 76px repeat(5, minmax(84px, 120px)); gap: 14px; align-items: center; }
.chead { padding: 0 12px 10px; font: 500 12px var(--sans); color: var(--faint); border-bottom: 1px solid var(--line); }
.chead span:nth-child(n+4) { text-align: right; }
.crow { padding: 10px 12px; text-decoration: none; border-bottom: 1px solid var(--line); border-radius: 10px; transition: background var(--t); }
.crow:hover { background: var(--s1); }
.crow .rank { font: 500 12px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.crow .pic { width: 44px; height: 44px; border-radius: 9px; background: var(--s2); object-fit: cover; display: block; }
.crow .who { min-width: 0; }
.crow .who b { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .who span { font: 400 12px var(--sans); color: var(--faint); }
.crow .num { text-align: right; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.crow .num i { display: none; font: 400 11px var(--sans); color: var(--faint); margin-top: 3px; font-style: normal; }
.crow .num .delta { display: block; margin: 3px 0 0; }
.star { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 14px; padding: 4px; line-height: 1; transition: color var(--t); }
.star:hover, .star.on { color: var(--gold); }

/* ------------------------------------------------------------ token cards */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cards.dense { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 8px; }
.cards.large { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { position: relative; display: block; text-decoration: none; background: var(--s1); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; transition: border-color var(--t), transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s; }
.card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); z-index: 1; }
.card .art { position: relative; aspect-ratio: 1; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.card .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .3, 1); }
.card:hover .art img { transform: scale(1.04); }
.card .art.none { background: var(--s2); }
.card .art.none::after { content: "#"; font: 500 28px var(--mono); color: var(--faint); }
.card .body { padding: 11px 12px 12px; }
.card .cname { font: 500 11.5px var(--sans); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .tname { font: 600 14.5px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); margin: 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .price { display: flex; justify-content: space-between; align-items: baseline; font: 600 13px var(--mono); min-height: 16px; }
.card .price .none { color: var(--faint); font: 500 11.5px var(--sans); }
.card .mine { font: 600 10px var(--sans); letter-spacing: .02em; color: var(--gold); }
.card .last { font: 400 11px var(--mono); color: var(--faint); }
.card .quick { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 34px; border-radius: 7px; background: var(--ink); color: var(--bg); font: 600 12.5px var(--sans); text-align: center; transform: translateY(calc(100% + 10px)); transition: transform .18s cubic-bezier(.2, .8, .3, 1); border: 0; cursor: pointer; }
.card:hover .quick { transform: none; }
.card .quick:hover { background: var(--acc); color: var(--acc-ink); }
.card.picked { box-shadow: inset 0 0 0 2px var(--gold); border-color: var(--gold); }
.card .tick { opacity: 0; transition: opacity var(--t); position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line2); background: var(--s1); display: grid; place-items: center; font-size: 12px; color: var(--ink); box-shadow: var(--shadow); }
.card:hover .tick, .card.picked .tick { opacity: 1; }
.card.picked .tick { background: var(--gold); color: #fff; border-color: var(--gold); }
.cards.dense .card .body { padding: 8px 10px 9px; }
.cards.dense .card .tname { font-size: 12.5px; }
.cards.dense .card .cname { display: none; }
.skcard { pointer-events: none; }
.skel { background: linear-gradient(90deg, var(--s2), var(--s1), var(--s2)); background-size: 200% 100%; animation: skel 1.2s linear infinite; min-height: 14px; border-radius: 6px; }
.skcard .art.skel { aspect-ratio: 1; border-radius: 0; }
@keyframes skel { to { background-position: -200% 0; } }

/* ------------------------------------------------------------ collection page */
.banner { margin: -30px 0 22px; height: 240px; overflow: hidden; border-radius: var(--r); background: var(--s2); }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.brandpick { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.pick { position: relative; display: grid; place-items: center; border: 1px dashed var(--line2); border-radius: var(--r); background: var(--s1); cursor: pointer; overflow: hidden; text-align: center; min-height: 120px; }
.pick.avatar { aspect-ratio: 1; }
.pick.banner { aspect-ratio: 3 / 1; min-height: 0; margin: 0; height: auto; }
.pick:hover { border-color: var(--ink); }
.pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick span { position: relative; z-index: 1; padding: 8px; }
.pick.has span { background: color-mix(in srgb, var(--s1) 80%, transparent); border-radius: 8px; }
.pick i { display: block; font: 600 12.5px var(--sans); color: var(--ink); font-style: normal; }
.pick b { display: block; font: 400 11.5px var(--sans); color: var(--faint); margin-top: 2px; }
.pbrand { position: relative; margin-bottom: 1px; }
.pbrand .pbanner { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; background: var(--s2); border-radius: var(--r); display: block; }
.pbrand .pavatar { position: absolute; left: 12px; bottom: -14px; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 2px solid var(--bg); background: var(--s2); }
.pbrand + .card { margin-top: 22px; }

.colhead { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-bottom: 20px; }
.colhead .pic { width: 92px; height: 92px; border-radius: 18px; background: var(--s2); object-fit: cover; border: 1px solid var(--line); display: block; }
.colhead h1 { font-size: clamp(28px, 3.6vw, 46px); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; letter-spacing: -.03em; }
.colhead .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.colhead .facts a, .colhead .facts span { display: block; min-width: 104px; padding: 8px 12px; background: var(--s1); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.colhead .facts i { display: block; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--faint); margin-bottom: 3px; font-style: normal; }
.colhead .facts b { font: 600 13px var(--mono); color: var(--ink); }
.colhead .facts b small { font-size: 11px; color: var(--faint); }
.colhead .facts a:hover { border-color: var(--line2); }
.colhead .desc { margin-top: 10px; color: var(--mute); font-size: 13.5px; max-width: 70ch; }
.colacts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.coltabs { margin-bottom: 18px; }
.mintbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 18px; border-color: var(--ink); }
.mintbox .ph { font: 600 12px var(--sans); color: var(--acc); }
.mintbox .pbar { height: 5px; border-radius: 3px; background: var(--s2); margin: 10px 0 8px; overflow: hidden; }
.mintbox .pbar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.qty { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--rs); height: 40px; overflow: hidden; background: var(--s1); }
.qty button { width: 36px; border: 0; background: none; color: var(--ink); font-size: 16px; cursor: pointer; }
.qty button:hover { background: var(--s2); }
.qty b { min-width: 36px; display: grid; place-items: center; font: 600 13px var(--mono); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.creator { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 18px; border-color: var(--gold); background: var(--gold-soft); }

.items { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.items.norail { grid-template-columns: minmax(0, 1fr); }
.rail { position: sticky; top: 106px; max-height: calc(100vh - 122px); overflow: auto; scrollbar-width: thin; padding-right: 6px; }
.railtop { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.railtop .link { display: none; }
.rail .group { border-bottom: 1px solid var(--line); padding: 6px 0; }
.rail .ghead { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 9px 0; color: var(--ink); font: 600 13px var(--sans); cursor: pointer; text-align: left; }
.rail .ghead .n { color: var(--faint); font-weight: 400; margin-left: 8px; font-family: var(--mono); font-size: 11px; }
.rail .ghead::after { content: "+"; color: var(--faint); }
.rail .group.open .ghead::after { content: "\2212"; }
.rail .gbody { display: none; padding: 2px 0 6px; }
.rail .group.open .gbody { display: block; }
.rail .tv { display: flex; align-items: center; gap: 8px; padding: 5px 0; font: 400 13px var(--sans); cursor: pointer; color: var(--mute); }
.rail .tv:hover, .rail .tv.on { color: var(--ink); }
.rail .tv input { accent-color: var(--ink); margin: 0; flex: none; width: 14px; height: 14px; }
.rail .tv .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .tv .c, .rail .tv .f { font: 400 11px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.rail .tv .f { min-width: 44px; text-align: right; color: var(--mute); }
.rail .range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.rail .range .input, .rail .tsearch .input { height: 34px; font-size: 12.5px; padding: 0 10px; }
.rail .tsearch { margin-bottom: 6px; }
.toolbar2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar2 .input { max-width: 240px; height: 36px; font-size: 13px; }
.toolbar2 .spacer { flex: 1; }
.toolbar2 select.input { max-width: 180px; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--rs); height: 36px; overflow: hidden; background: var(--s1); }
.seg button { background: none; border: 0; color: var(--mute); padding: 0 11px; cursor: pointer; font-size: 13px; line-height: 1; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--sans); padding: 5px 10px; border: 1px solid var(--line2); border-radius: var(--rp); color: var(--ink); background: var(--s1); cursor: pointer; }
.chip:hover { border-color: var(--signal); color: var(--signal); }
.chip.clear { border-style: dashed; color: var(--mute); }
.railtoggle { display: none; }
.sweepbar { position: sticky; bottom: 12px; z-index: 30; display: grid; grid-template-columns: auto minmax(120px, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 16px; margin: 0 0 14px; border: 1px solid var(--gold); border-radius: var(--r); background: var(--s1); box-shadow: var(--shadow2); }
.sweepbar .k { font: 600 12px var(--sans); color: var(--gold); }
.sweepbar input[type=range] { width: 100%; accent-color: var(--gold); }
.sweepbar .sum { font: 400 12px var(--sans); color: var(--mute); white-space: nowrap; }
.sweepbar .sum b { color: var(--ink); font-weight: 600; font-family: var(--mono); }
.sentinel { height: 1px; }
.more { display: flex; justify-content: center; margin-top: 16px; }

/* chart, holders, analytics */
.chart { position: relative; width: 100%; height: 280px; border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); overflow: hidden; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart .ax { font: 400 10.5px var(--mono); fill: var(--faint); }
.chart .ax.now { fill: var(--mute); }
.chart .floorline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chart .floorarea { fill: url(#fa); }
.chart .floornow { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; opacity: .5; }
.chart .sale { fill: var(--acc); }
.chart .sale.wash { fill: var(--signal); opacity: .45; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.empty-chart { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font: 500 13px var(--sans); }
.legend { display: flex; gap: 16px; margin-top: 8px; font: 500 12px var(--sans); color: var(--faint); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.anal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.holder { display: grid; grid-template-columns: 28px minmax(0, 1fr) 70px 64px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font: 400 12.5px var(--mono); }
.holder > span:nth-child(2) { display: flex; align-items: center; gap: 10px; min-width: 0; }
.holder .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--s2); overflow: hidden; }
.holder .bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.holder a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.holder .pct { text-align: right; color: var(--mute); font-variant-numeric: tabular-nums; }
.dist { grid-template-columns: repeat(5, 1fr); margin: 0; gap: 8px; }
.dist div { text-align: center; padding: 12px 6px; }
.dist b { display: block; font: 650 20px/1 var(--sans); letter-spacing: -.02em; margin-bottom: 6px; }
.dist span { font: 400 11px var(--sans); color: var(--faint); white-space: nowrap; }
.depthrow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 30px; gap: 10px; align-items: center; font: 400 12px var(--mono); color: var(--mute); padding: 6px 0; border-bottom: 1px solid var(--line); }
.depthrow .bar { height: 4px; border-radius: 2px; background: var(--s2); overflow: hidden; }
.depthrow .bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.depthrow b { text-align: right; color: var(--ink); font-weight: 600; }
.bigspread { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bigspread b { font: 650 32px/1 var(--sans); letter-spacing: -.03em; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 50vh; overflow: auto; margin-top: 12px; }
.pickone { background: none; border: 1px solid var(--line2); border-radius: 8px; padding: 4px; cursor: pointer; color: var(--mute); font: 400 11px var(--mono); overflow: hidden; }
.pickone:hover { border-color: var(--ink); color: var(--ink); }
.pickone img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 4px; border-radius: 5px; }
.offerrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 12.5px var(--mono); }
.offerrow a { color: var(--ink); text-decoration: none; }
.offerrow b { font-weight: 600; }
.offerrow .spacer { flex: 1; }
.offerrow .exp { font-size: 11px; color: var(--faint); font-family: var(--sans); }

/* ------------------------------------------------------------ token page */
.tokpage { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 40px; align-items: start; }
.tokart { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--tile); border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; cursor: zoom-in; }
.tokart img { width: 100%; height: 100%; object-fit: contain; }
.tokart.none { background: var(--s2); cursor: default; }
.tokart.none::after { content: "#"; font: 500 72px var(--mono); color: var(--faint); }
.tokart .rankb { font-size: 12px; padding: 7px 10px; left: 12px; top: 12px; }
.traitpanel { margin-top: 18px; }
.zoom { position: fixed; inset: 0; z-index: 140; background: color-mix(in srgb, var(--bg) 94%, transparent); display: grid; place-items: center; cursor: zoom-out; padding: 20px; }
.zoom img { max-width: 100%; max-height: 100%; border-radius: var(--r); }
.tokhead .crumb { font: 500 13px var(--sans); color: var(--mute); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.tokhead .crumb:hover { color: var(--ink); }
.tokhead h1 { font-size: clamp(30px, 4vw, 52px); margin: 8px 0 8px; letter-spacing: -.03em; }
.tokhead .own { font: 400 12.5px var(--sans); color: var(--mute); display: flex; gap: 16px; flex-wrap: wrap; }
.tokhead .own a { color: var(--ink); text-decoration: none; font-family: var(--mono); font-size: 12px; }
.pricebox { margin-top: 18px; }
.pricebox .plabel { font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; }
.pricebox .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.pricebox .refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.pricebox .refs span { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--faint); }
.pricebox .refs b { color: var(--ink); font: 600 12.5px var(--mono); display: block; margin-top: 4px; }
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.trait { display: block; padding: 10px 12px; background: var(--s1); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color var(--t); }
.trait:hover { border-color: var(--line2); }
.trait i { display: block; font-style: normal; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--faint); margin-bottom: 4px; }
.trait b { font: 600 13.5px var(--sans); color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trait .pct { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; font: 400 11px var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trait .pct .rare { color: var(--platinum); }
.hist { display: flex; flex-direction: column; }
.hrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 110px 90px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 12.5px var(--mono); }
.hrow .k { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--up); }
.hrow .k.mint { color: var(--platinum); }
.hrow .k.transfer { color: var(--mute); }
.hrow .k.list { color: var(--gold); }
.hrow a { color: var(--mute); text-decoration: none; }
.hrow a:hover { color: var(--ink); }
.hrow .when { text-align: right; font: 400 11.5px var(--sans); color: var(--faint); }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0; font: 400 12.5px var(--mono); border-top: 1px solid var(--line); margin: 0; }
.details dt { font: 500 12px var(--sans); color: var(--faint); padding: 10px 18px 10px 0; border-bottom: 1px solid var(--line); align-self: center; }
.details dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.details a { color: var(--ink); text-decoration: none; }
.morerow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }

/* ------------------------------------------------------------ activity */
.ahead, .arow { display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) 130px minmax(0, 1fr) 90px; gap: 12px; align-items: center; }
.ahead { padding: 0 12px 10px; font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--faint); border-bottom: 1px solid var(--line); }
.ahead span:last-child { text-align: right; }
.arow { padding: 8px 12px; border-bottom: 1px solid var(--line); border-radius: 10px; text-decoration: none; font: 400 12.5px var(--mono); transition: background var(--t); }
.arow:hover { background: var(--s1); }
.arow .pic { width: 44px; height: 44px; border-radius: 9px; background: var(--s2); object-fit: cover; display: block; }
.arow .what { min-width: 0; }
.arow .what b { display: block; font: 600 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .what span { font: 400 12px var(--sans); color: var(--faint); }
.arow .k { font: 600 10px var(--mono); letter-spacing: .08em; }
.arow .k.sale { color: var(--up); }
.arow .k.list { color: var(--gold); }
.arow .num { font-weight: 600; }
.arow .parties { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .when { text-align: right; font: 400 11.5px var(--sans); color: var(--faint); }
.arow.new { animation: rowin .8s ease-out; }
@keyframes rowin { from { background: var(--up-soft); } }

/* ------------------------------------------------------------ wallet */
.walhead { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.walhead > div { min-width: 0; }
.walhead h1 { font: 650 clamp(22px, 3vw, 34px)/1 var(--mono); letter-spacing: -.02em; margin: 0 0 6px; }
.walhead .note { overflow-wrap: anywhere; }
.walhead .avatar { border-radius: 16px; }
.selbar { position: sticky; bottom: 12px; z-index: 30; display: flex; gap: 14px; align-items: center; padding: 12px 16px; margin-top: 16px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--s1); box-shadow: var(--shadow2); flex-wrap: wrap; }
.selbar .k { font: 600 12px var(--sans); color: var(--mute); }
.selbar b { font: 650 18px var(--sans); }
.selbar .spacer { flex: 1; }

/* ------------------------------------------------------------ launch */
.launch { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.launch .form { max-width: none; }
.launch fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.launch legend { font: 650 20px/1.2 var(--sans); letter-spacing: -.02em; margin-bottom: 14px; padding: 0; }
.launch .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.launch .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.preview { position: sticky; top: 106px; }
.preview .card { max-width: 320px; }
.drop { display: block; border: 1px dashed var(--line2); border-radius: var(--r); padding: 28px 18px; text-align: center; color: var(--mute); font: 400 13px/1.6 var(--sans); cursor: pointer; background: var(--s1); transition: border-color var(--t), background var(--t); }
.drop b { color: var(--ink); font-weight: 600; }
.drop:hover, .drop.over { border-color: var(--ink); background: var(--s2); }
.drop input { display: none; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; margin-top: 10px; }
.thumbs:empty { display: none; }
.thumbs img, .thumbs .morethumbs { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--s2); border-radius: 6px; }
.thumbs .morethumbs { display: grid; place-items: center; font: 500 11px var(--mono); color: var(--mute); }
.stepper { display: flex; gap: 4px; margin-bottom: 22px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.stepper button { flex: 1; background: none; border: 0; border-radius: 8px; padding: 9px 8px; color: var(--faint); font: 500 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.stepper button.on { color: var(--bg); background: var(--ink); }
.stepper button.done { color: var(--ink); }

/* ------------------------------------------------------------ palette, modal, toasts, basket */
.pal { position: fixed; inset: 0; z-index: 150; background: var(--shade); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; animation: shadein .12s ease-out both; }
.palbox { width: min(680px, 100%); background: var(--s1); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow2); overflow: hidden; }
.palbox input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font: 400 16px var(--sans); color: var(--ink); outline: none; }
.palbox input::placeholder { color: var(--faint); }
.palres { max-height: 56vh; overflow: auto; padding: 4px; }
.palres .ph { padding: 12px 14px 6px; font: 600 11px var(--mono); letter-spacing: .08em; color: var(--faint); }
.palres a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font: 600 13.5px var(--sans); }
.palres a.sel, .palres a:hover { background: var(--s2); }
.palres a img, .palres a .ico { width: 34px; height: 34px; border-radius: 8px; background: var(--s2); object-fit: cover; display: grid; place-items: center; color: var(--mute); font: 400 16px var(--mono); }
.palres a .sub { font: 400 11.5px var(--sans); color: var(--faint); display: block; margin-top: 1px; }
.palres a .r { font: 500 12px var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.palfoot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font: 500 11px var(--sans); color: var(--faint); }
.palfoot kbd { font: 500 10px var(--mono); padding: 1px 5px; border: 1px solid var(--line2); border-radius: 4px; margin-right: 5px; }
.shade { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: var(--shade); animation: shadein .2s ease-out both; overflow: auto; }
@keyframes shadein { from { opacity: 0; } }
.shadebox { width: min(460px, 100%); outline: none; padding: 24px; border-radius: 16px; box-shadow: var(--shadow2); }
.shadebox h2 { margin-bottom: 14px; padding-right: 30px; }
.shadebox .note + .field { margin-top: 14px; }
.shadebox .field + .field { margin-top: 10px; }
.shadebox .row { margin-top: 16px; }
.shadebox .x, .basket .x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--mute); font-size: 20px; cursor: pointer; line-height: 1; }
.shadebox .x:hover, .basket .x:hover { color: var(--ink); background: var(--s2); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 160; display: flex; flex-direction: column; gap: 6px; max-width: min(380px, calc(100vw - 32px)); }
.toast { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 10px; background: var(--s1); font: 400 13px/1.5 var(--sans); box-shadow: var(--shadow2); animation: toastin .2s ease-out both; }
.toast.bad { border-left-color: var(--signal); }
.toast.ok { border-left-color: var(--up); }
.toast a { color: var(--ink); }
@keyframes toastin { from { transform: translateY(6px); opacity: 0; } }
.spin { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--faint); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loadbar { position: fixed; left: 0; top: 0; height: 2px; width: 0; background: var(--acc); z-index: 200; animation: loadbar 2.4s cubic-bezier(.1, .8, .2, 1) forwards; }
.loadbar.done { width: 100%; opacity: 0; transition: width .2s, opacity .4s .2s; animation: none; }
@keyframes loadbar { to { width: 86%; } }
.basket { position: fixed; right: 16px; bottom: 16px; z-index: 130; width: min(380px, calc(100vw - 32px)); border: 1px solid var(--gold); border-radius: var(--r); background: var(--s1); box-shadow: var(--shadow2); overflow: hidden; animation: toastin .2s ease-out both; }
.basket .bhead { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left; }
.basket .bhead .k { font: 600 12px var(--sans); color: var(--gold); }
.basket .bhead b { font: 650 18px/1 var(--sans); }
.basket .bhead .bsum { margin-left: auto; font: 600 12.5px var(--mono); }
.basket .bhead .fold { color: var(--faint); font-size: 16px; width: 20px; text-align: center; }
.basket .bbody { display: none; max-height: 40vh; overflow: auto; border-top: 1px solid var(--line); padding: 6px 8px; }
.basket.open .bbody { display: block; }
.basket .bitem { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 30px; gap: 10px; align-items: center; padding: 6px 4px; font: 400 12px var(--mono); }
.basket .bitem img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: var(--s2); }
.basket .bitem .bname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); font-size: 13px; font-weight: 500; }
.basket .bitem .x { position: static; width: 26px; height: 26px; font-size: 16px; }
.basket .bfoot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
body:has(.basket:not([hidden])) .toasts { bottom: 76px; }
body:has(.basket.open) .toasts { right: 412px; }

/* ------------------------------------------------------------ the landing (the gate) */
.landtag { font: 500 12.5px var(--sans); color: var(--faint); margin-left: 4px; }
.landhero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: end; padding: 56px 0 48px; }
.landhero h1 { font-size: clamp(44px, 6.8vw, 100px); margin-bottom: 28px; max-width: 14ch; }
.landnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.landnums div { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 14px 14px; min-width: 0; }
.landnums b { display: block; font: 650 clamp(20px, 2vw, 28px)/1 var(--sans); overflow-wrap: anywhere; letter-spacing: -.03em; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.landnums span { font: 500 12px var(--sans); color: var(--faint); }
.landgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.landgrid > div { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px 24px; min-height: 200px; min-width: 0; }
.landgrid i { display: block; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--faint); font-style: normal; margin-bottom: 28px; }
.landgrid b { display: block; font: 650 20px/1.1 var(--sans); letter-spacing: -.02em; margin-bottom: 10px; }
.landgrid span { font: 400 13px/1.55 var(--sans); color: var(--mute); }
.landgrid .si { background: var(--plat-soft); border-color: transparent; }
.landgrid .si i { color: var(--platinum); }
.landenter { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.landform { max-width: 460px; }
.landform .row { flex-wrap: nowrap; }
.landform .err { margin-top: 8px; }

/* ------------------------------------------------------------ back row, transaction dialog */
.backrow { display: flex; align-items: center; gap: 18px; margin: -8px 0 18px; font: 500 13px var(--sans); }
.backrow .back { color: var(--ink); text-decoration: none; padding: 7px 12px 7px 10px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); transition: border-color var(--t); }
.backrow .back:hover { border-color: var(--ink); }
.backrow .crumbs { display: flex; gap: 10px; color: var(--faint); min-width: 0; }
.backrow .crumbs a { color: var(--mute); text-decoration: none; }
.backrow .crumbs a:hover { color: var(--ink); }
.backrow .crumbs > *:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--line2); }
.backrow .crumbs > :last-child { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txcard { width: min(420px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--s1); box-shadow: var(--shadow2); }
.txcard .txlabel { margin-bottom: 18px; }
.txsteps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.txsteps li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: 500 13px var(--sans); color: var(--faint); }
.txsteps li i { width: 16px; height: 16px; border: 1.5px solid var(--line2); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; flex: none; }
.txsteps li.now { color: var(--ink); border-color: var(--line2); }
.txsteps li.now i { border-color: var(--ink); border-top-color: transparent; animation: spin .8s linear infinite; }
.txsteps li.done { color: var(--mute); }
.txsteps li.done i { background: var(--up); border-color: var(--up); }
.txsteps li.done i::after { content: "\2713"; color: #fff; font-weight: 700; }
.txok, .txbad { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px; border: 1px solid var(--up); border-radius: 12px; background: var(--up-soft); margin-bottom: 18px; }
.txok .mark, .txbad .mark { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--up); color: #fff; font: 700 22px var(--sans); }
.txok b, .txbad b { font: 650 14.5px var(--sans); letter-spacing: -.01em; }
.txok span:not(.mark), .txbad span:not(.mark) { font: 400 12.5px/1.5 var(--sans); color: var(--mute); }
.txbad { border-color: var(--signal); background: var(--acc-soft); }
.txbad .mark { background: var(--signal); }
.txacts { justify-content: flex-end; }

/* ------------------------------------------------------------ SI */
/* the SI score: a quiet pill, a dot in the grade's colour, the number, the letter */
.sib { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px 0 8px; border-radius: 999px; font: 500 12px var(--mono); color: var(--mute); vertical-align: middle; white-space: nowrap; background: var(--s2); }
.sib::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.sib.gS::before, .sib.gA::before { background: var(--up); }
.sib.gB::before { background: var(--platinum); }
.sib.gC::before { background: var(--gold); }
.sib.gD::before { background: var(--signal); }
.sib i { font-size: 9.5px; font-style: normal; letter-spacing: .12em; font-weight: 700; color: var(--mute); }
.sib b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sib em { font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--faint); letter-spacing: .04em; }
.sib.flagged { box-shadow: inset 0 0 0 1px var(--signal); }
.sib.pending { color: var(--faint); }
.sib.big { height: 30px; font-size: 13.5px; padding: 0 12px 0 10px; gap: 8px; }
.sib.big::before { width: 8px; height: 8px; }
.sib.big b { font-size: 15px; }
.silink { text-decoration: none; display: inline-flex; }
.crow .num.si { text-align: left; }
.crow .num .sib i { display: inline-grid; }
.sibig { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.sibig b { font: 700 76px/1 var(--sans); letter-spacing: -.045em; }
.sibig span { font: 500 12px var(--sans); color: var(--faint); }
.sibig span i { display: block; font: 700 22px/1 var(--sans); font-style: normal; letter-spacing: -.02em; margin-bottom: 4px; }
.sibig.gS span i, .sibig.gA span i { color: var(--up); }
.sibig.gB span i { color: var(--platinum); }
.sibig.gC span i { color: var(--gold); }
.sibig.gD span i { color: var(--signal); }
.siparts { display: grid; gap: 8px; }
.sipart { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.sirow { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 14px; align-items: center; margin-bottom: 6px; }
.sirow b { font: 600 13px var(--sans); }
.sirow .bar { height: 5px; border-radius: 3px; background: var(--s2); overflow: hidden; }
.sirow .bar i { display: block; height: 100%; background: var(--platinum); border-radius: 3px; }
.sirow em { font: 500 12px var(--mono); font-style: normal; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.siflag { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 13px/1.5 var(--sans); color: var(--ink); }
.siflag u { text-decoration: none; color: var(--signal); font-weight: 700; flex: none; }
.twin { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 500 12px var(--sans); }
.twin u { text-decoration: none; font-weight: 700; }
.twin.ok { color: var(--mute); }
.twin.ok u { color: var(--up); }
.twin.bad { color: var(--signal); }
.twin a { color: var(--ink); }

/* ------------------------------------------------------------ SI page and home block */
.sigrid { margin-bottom: 8px; }
.sihow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sihow > div { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 18px; min-width: 0; }
.sihow i { display: block; font: 700 22px/1 var(--sans); letter-spacing: -.02em; color: var(--platinum); font-style: normal; margin-bottom: 10px; }
.sihow b { display: block; font: 650 14.5px var(--sans); margin-bottom: 6px; }
.sihow span { font: 400 12.5px/1.55 var(--sans); color: var(--mute); }
.chead.sihead, .crow.sirow2 { grid-template-columns: 32px 44px minmax(0, 1fr) 90px repeat(3, minmax(90px, 130px)) minmax(120px, 1fr); }
.chead.sihead span:nth-child(n+4) { text-align: left; }
.crow.sirow2 .num { text-align: left; display: flex; align-items: center; gap: 8px; }
.mini { display: inline-block; width: 70px; height: 5px; border-radius: 3px; background: var(--s2); overflow: hidden; vertical-align: middle; }
.mini i { display: block; height: 100%; background: var(--platinum); border-radius: 3px; }
.crow .num small { font: 500 11.5px var(--mono); color: var(--mute); }
.crow .num.flags { flex-wrap: wrap; gap: 4px; }
.crow .num.flags em { font: 600 10px var(--sans); font-style: normal; color: var(--signal); background: var(--acc-soft); border-radius: var(--rp); padding: 2px 7px; }
.sitop { display: grid; gap: 8px; }
.sirowh { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color var(--t); }
.sirowh:hover { border-color: var(--line2); }
.sirowh img, .sirowh .pic { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--s2); }
.sirowh b { display: block; font: 600 14px/1.2 var(--sans); color: var(--ink); }
.sirowh .who span { font: 400 12px var(--sans); color: var(--faint); }

/* ---- ask SI */
.askbox { border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); padding: 16px 18px 18px; margin: 0 0 18px; }
.askhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.askhead .note { margin: 0; }
.askform { display: flex; gap: 8px; }
.askform .input { height: 44px; font-size: 14px; }
.askform .btn { height: 44px; padding: 0 22px; }
.asksug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asksug button { height: 30px; padding: 0 11px; border: 1px solid var(--line2); border-radius: var(--rp); background: transparent; color: var(--mute); font: 500 12px var(--sans); cursor: pointer; transition: color var(--t), border-color var(--t); }
.asksug button:hover { color: var(--ink); border-color: var(--ink); }
.askout:not(:empty) { margin-top: 16px; border-top: 1px solid var(--line); }
.askrow { padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.askrow:last-child { border-bottom: 0; }
.askq { margin: 0 0 8px; font: 500 12.5px var(--sans); color: var(--faint); }
.askq::before { content: "Q  "; color: var(--platinum); font-family: var(--mono); font-weight: 700; }
.aska { margin: 0 0 10px; padding-left: 14px; border-left: 2px solid var(--platinum); font: 400 15px/1.6 var(--sans); color: var(--ink); white-space: pre-line; max-width: 72ch; }
.aska.bad { border-left-color: var(--signal); color: var(--mute); }
.aska.wait { display: flex; gap: 5px; align-items: center; height: 24px; }
.aska.wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--platinum); animation: askdot 1s ease-in-out infinite; }
.aska.wait i:nth-child(2) { animation-delay: .15s; }
.aska.wait i:nth-child(3) { animation-delay: .3s; }
@keyframes askdot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- launches */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.lc { background: var(--s1); border: 1px solid var(--line2); border-radius: var(--r); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: border-color var(--t), transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s; }
.lc:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--shadow); }
.lc.featured { border-color: var(--ink); }
.lc.fresh { animation: rowin 1.2s ease-out; }
.lcover { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--s2); overflow: hidden; }
.lcover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.lc:hover .lcover img { transform: scale(1.03); }
.lchip { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: var(--rp); background: var(--s1); color: var(--mute); font: 600 11px var(--sans); box-shadow: var(--shadow); }
.lchip.now { color: #fff; background: var(--acc); }
.lchip.up { color: var(--ink); }
.lchip.past { color: var(--faint); }
.lbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lname { display: flex; align-items: baseline; gap: 8px; }
.lname b { font: 650 18px/1.15 var(--sans); letter-spacing: -.02em; }
.lname span { font: 500 11px var(--mono); color: var(--faint); }
.ldesc { color: var(--mute); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lfacts span { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.lfacts i { display: block; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--faint); font-style: normal; margin-bottom: 3px; }
.lfacts b { font: 600 12.5px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lfacts b small { font-size: 9.5px; color: var(--faint); }
.llinks { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: auto; font: 500 12.5px var(--sans); }
.llinks a { color: var(--mute); text-decoration: none; }
.llinks a:hover { color: var(--ink); }
.llinks .btn { margin-left: auto; color: var(--bg); }
.llinks .btn:hover { color: var(--acc-ink); }
.applyshade { align-items: start; padding-top: 6vh; }
.applybox { width: min(760px, 100%); padding: 26px 26px 28px; }
.applyhead { margin-bottom: 18px; padding-right: 30px; }
.applyform { max-width: none; }
.applyform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.applyform .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------ small screens, motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1000px) {
  .items { grid-template-columns: 1fr; }
  .rail { position: fixed; inset: 0; z-index: 110; max-height: none; background: var(--bg); padding: 70px 18px 24px; display: none; }
  .rail.open { display: block; }
  .railtoggle { display: inline-flex; }
  .railtop .link { display: inline; }
  .anal { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .topbar { gap: 8px; height: 54px; padding: 0 12px; }
  .brand { padding-right: 0; }
  .brand .word { display: none; }
  .nav { display: none; }
  .ksearch { flex: 1 1 auto; max-width: none; height: 36px; padding-left: 12px; }
  .ksearch kbd { display: none; }
  .topwho { gap: 6px; }
  .wallet-chip .bal { display: none; }
  .wallet-chip { height: 36px; padding-right: 10px; }
  .theme { width: 34px; height: 34px; }
  .topwho .create { display: none; }
  .walmenu { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); width: auto; z-index: 125; }
  .ticker { height: 30px; line-height: 30px; }
  .page { padding: 20px 16px 56px; }
  .section { margin-top: 30px; }
  h1 { font-size: clamp(36px, 11vw, 52px); }
  .herob { grid-template-columns: 1fr; gap: 24px; padding: 8px 0 24px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; gap: 8px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile b, .statbar b { font-size: 22px; }
  .statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .homegrid { grid-template-columns: 1fr; gap: 0; }
  .pagehead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pagestats span { padding: 10px 12px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cards.large { grid-template-columns: 1fr; }
  .cards.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .card .body { padding: 9px 10px 10px; }
  .card .quick { transform: none; position: static; height: 32px; margin: 0 8px 8px; width: calc(100% - 16px); }
  .crow, .chead { grid-template-columns: 40px minmax(0, 1fr) 56px 90px; gap: 10px; }
  .crow .rank, .chead span:first-child, .crow .num:nth-child(n+6), .chead span:nth-child(n+6) { display: none; }
  .crow { padding: 10px 8px; }
  .crow .pic { width: 40px; height: 40px; }
  .crow .who b { font-size: 14px; }
  .crow .who b .badge-l { display: none; }
  .crow .who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crow .num i { display: block; }
  .ahead { display: none; }
  .arow { grid-template-columns: 44px 40px minmax(0, 1fr) 100px; padding: 8px; }
  .arow .pic { width: 40px; height: 40px; }
  .arow .parties, .arow .when { display: none; }
  .hrow { grid-template-columns: 60px minmax(0, 1fr) 90px; }
  .hrow .to, .hrow .when { display: none; }
  .banner { height: 140px; margin: -20px 0 16px; }
  .colhead { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "pic title" "facts facts" "desc desc" "acts acts"; gap: 12px; align-items: center; }
  .colhead .pic { grid-area: pic; width: 56px; height: 56px; border-radius: 12px; }
  .colhead > div:not(.colacts) { display: contents; }
  .colhead h1 { grid-area: title; font-size: 30px; }
  .colhead .facts { grid-area: facts; display: grid; grid-template-columns: 1fr 1fr; width: auto; margin: 0; }
  .colhead .facts a, .colhead .facts span { min-width: 0; }
  .colhead .desc { grid-area: desc; margin: 0; }
  .colacts { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .colacts .btn { width: 100%; }
  .statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statbar > div:nth-child(n+7) { display: none; }
  .mintbox { grid-template-columns: 1fr; }
  .toolbar2 .input { max-width: none; flex: 1 1 100%; }
  .sweepbar { grid-template-columns: 1fr 1fr; }
  .dist { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .tokpage { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .tokpage > div { display: contents; }
  .tokpage .tokart { order: 1; }
  .tokpage .tokhead { order: 2; }
  .tokpage .pricebox { order: 3; margin-top: 0; }
  .tokpage .tabs { order: 4; margin: 4px 0 0 !important; }
  .tokpage #tab-offers, .tokpage #tab-history, .tokpage #tab-details { order: 5; }
  .tokpage .traitpanel { order: 6; margin-top: 0; }
  .pricebox .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch { grid-template-columns: 1fr; }
  .launch .three { grid-template-columns: 1fr; }
  .preview { position: static; }
  .stepper { flex-wrap: wrap; }
  .stepper button { flex: 1 1 33%; }
  .basket { right: 8px; left: 8px; bottom: 8px; width: auto; }
  body:has(.basket.open) .toasts { right: 16px; }
  .foot { flex-direction: column; gap: 6px; text-align: center; }
  .landhero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px 0 24px; }
  .landhero h1 { font-size: 40px; overflow-wrap: anywhere; }
  .landnums b { font-size: 15px; white-space: nowrap; }
  .landnums div { padding: 12px 10px 10px; }
  .landnums span { font-size: 11px; }
  .landgrid { grid-template-columns: minmax(0, 1fr); }
  .landgrid .si b::after { display: block; width: max-content; margin: 8px 0 0; }
  .landgrid > div { min-height: 0; }
  .landtag { display: none; }
  .backrow { margin-top: 0; }
  .backrow .crumbs { display: none; }
  .sirow { grid-template-columns: 90px minmax(0, 1fr) 60px; }
  .sibig b { font-size: 56px; }
  .sihow { grid-template-columns: 1fr 1fr; gap: 8px; }
  .chead.sihead { display: none; }
  .crow.sirow2 { grid-template-columns: 40px minmax(0, 1fr) 90px; }
  .crow.sirow2 .num:nth-child(n+5) { display: none; }
  .askform { flex-direction: column; }
  .askform .btn { width: 100%; }
  .applyform .two, .applyform .three { grid-template-columns: 1fr; }
  .applyshade { padding: 8px; }
  .applybox { padding: 20px 16px 22px; }
}

/* ------------------------------------------------------------ the five sections: phone tab bar, NFT strip */
.tabbar { display: none; }
.subnav { border-bottom: 1px solid var(--line); background: var(--bg); }
.subin { display: flex; gap: 2px; align-items: center; height: 46px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.subin::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: var(--rp); font: 600 13.5px var(--sans); color: var(--mute); text-decoration: none; transition: color var(--t), background var(--t); }
.subnav a:hover { color: var(--ink); background: var(--s2); }
.subnav a.on { color: var(--bg); background: var(--ink); }

/* ------------------------------------------------------------ trending */
.trend { margin-top: 20px; }
.trend > .secthead { gap: 14px; flex-wrap: wrap; }
.secthead .seg.small, .seg.small { height: 32px; border-radius: var(--rp); }
.seg.small button { padding: 0 13px; font: 600 12.5px var(--sans); }
.cats { display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); color: var(--mute); font: 600 13px var(--sans); cursor: pointer; transition: color var(--t), border-color var(--t), background var(--t); }
.cats button:hover { color: var(--ink); border-color: var(--ink); }
.cats button.on { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.trail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1px; background: var(--line); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 120px; }
.trail::-webkit-scrollbar { display: none; }
.trail.fit { overflow-x: hidden; scroll-snap-type: none; }
.trail .empty { grid-column: 1 / -1; border: 0; border-radius: 0; background: var(--s1); }
.tcard { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; background: var(--s1); text-decoration: none; color: var(--ink); transition: background var(--t); }
.tcard:hover { background: var(--s2); }
.tban { position: relative; aspect-ratio: 2.1; background: var(--s2); overflow: hidden; }
.tban > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tban.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--line); }
.tban.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tban.mosaic.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tban.mosaic.n2 { grid-template-rows: 1fr; }
.tban.mosaic.n3 img:first-child { grid-row: 1 / 3; }
.tban .tgrad { position: absolute; inset: 0; background: linear-gradient(135deg, var(--s2), var(--line2)); }
.trank { position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 750 14px var(--sans); display: grid; place-items: center; box-shadow: var(--shadow); z-index: 1; }
.tmeta { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px 12px; }
.tav { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--s2); margin-top: -30px; position: relative; border: 3px solid var(--s1); box-shadow: var(--shadow); }
.tav.none { display: grid; place-items: center; font: 700 18px var(--sans); color: var(--faint); }
.tcard:hover .tav { border-color: var(--s2); }
.tname { min-width: 0; }
.tname b { display: flex; align-items: center; gap: 6px; font: 700 16px/1.2 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tname span { display: block; font: 400 12.5px var(--sans); color: var(--mute); margin-top: 3px; }
.tstats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: auto; }
.tstats > div { padding: 12px 16px; min-width: 0; }
.tstats > div + div { border-left: 1px solid var(--line); }
.tstats span { display: block; font: 500 11.5px var(--sans); color: var(--faint); margin-bottom: 5px; }
.tstats b { font: 650 15px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tstats b small { font-size: 10.5px; color: var(--mute); margin-left: 3px; }
.catchip { display: inline-block; font: 500 11px var(--sans); color: var(--mute); background: var(--s2); border-radius: var(--rp); padding: 2px 8px; vertical-align: middle; }

/* ------------------------------------------------------------ profile */
.prohead { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 24px; border: 1px solid var(--line2); border-radius: 16px; background: var(--s1); margin-bottom: 16px; }
.prohead .avatar { margin: 0; width: 72px; height: 72px; }
.prohead h1 { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 6px; letter-spacing: -.03em; }
.prohead .addr { font: 500 12.5px var(--mono); color: var(--mute); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; }
.prohead .addr > span:first-child { word-break: break-all; }
.prohead .addr .link { font-size: 12.5px; }
.proacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ptabs { margin: 18px 0 14px; }
.trows .trow { grid-template-columns: 40px minmax(0, 1fr) repeat(2, minmax(100px, 140px)); }
.trows .thead { grid-template-columns: 40px minmax(0, 1fr) repeat(2, minmax(100px, 140px)); }
.gate { max-width: 560px; padding-top: 4vh; }
.gate .lede { margin-bottom: 18px; }

/* ------------------------------------------------------------ more */
.morewrap { max-width: 720px; }
.morewrap .section { margin-top: 0; }
.morewrap .section + .section { margin-top: 16px; }
.morewrap .msrow { padding: 13px 20px; }
.morewrap .msrow:last-child { border-bottom: 0; }
.ptsrow { display: flex; align-items: center; gap: 16px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ptsrow b { font: 800 46px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ptsrow .k { font: 400 13px/1.5 var(--sans); color: var(--mute); }
.ptsrow .k strong { color: var(--ink); font-weight: 600; }
.ptsrow .btn { margin-left: auto; }
.lrow { display: grid; grid-template-columns: 28px 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--s2); }
.lrow .rk { font: 500 12px var(--mono); color: var(--faint); }
.lrow .avatar { margin: 0; }
.lrow b { font: 600 13.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow b small { font: 400 12px var(--sans); color: var(--faint); margin-left: 8px; }
.lrow .num { font: 600 13px var(--mono); text-align: right; white-space: nowrap; }
.lrow .num i { display: block; font: 400 11px var(--sans); color: var(--faint); font-style: normal; margin-top: 2px; }
.lrow.me { background: var(--up-soft); }
/* plain rows the profile's token tab uses */
.trow, .thead { display: grid; grid-template-columns: 40px minmax(0, 1fr) repeat(2, minmax(100px, 140px)); gap: 12px; align-items: center; }
.thead { padding: 10px 16px; font: 500 12px var(--sans); color: var(--faint); border-bottom: 1px solid var(--line); }
.thead span:nth-child(n+3) { text-align: right; }
.trow { padding: 9px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.trow:hover { background: var(--s2); }
.trow:last-child { border-bottom: 0; }
.trow .who b { display: block; font: 650 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .who span { display: block; font: 400 12px var(--sans); color: var(--faint); }
.trow .num { text-align: right; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trow .num small { font-size: 10px; color: var(--mute); margin-left: 2px; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 14px var(--sans); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: default; }
.mrow:last-child { border-bottom: 0; }
a.mrow, button.mrow { cursor: pointer; }
a.mrow:hover, button.mrow:hover { background: var(--s2); }
.mrow span { color: var(--mute); font-weight: 400; font-size: 12.5px; }
.mrow .spacer { flex: 1; }
.mrow .seg.small { height: 32px; }
.mrow .seg.small button { padding: 0 11px; }
.mrow em { font-style: normal; color: var(--faint); font-size: 12.5px; }
.pts { padding: 18px 20px 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pts b { font: 800 44px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pts span { color: var(--mute); font-size: 13px; }
.reflink { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 20px 16px; }
.reflink .input { font-family: var(--mono); font-size: 12.5px; }


/* ------------------------------------------------------------ auction: where the frogs go after the hammer */
.custody { display: grid; gap: 1px; background: var(--line); }
.crow2 { display: grid; grid-template-columns: 90px repeat(3, minmax(0, 1fr)); background: var(--s1); }
.crow2 > div { padding: 14px 18px; border-left: 1px solid var(--line); min-width: 0; }
.crow2 > div:first-child { border-left: 0; font: 750 15px var(--sans); display: flex; align-items: center; }
.crow2 i { display: block; font: 400 11.5px var(--sans); color: var(--faint); font-style: normal; margin-bottom: 4px; }
.crow2 b { font: 500 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.crow2 .wait { color: var(--faint); font: 400 13px var(--sans); }
.crow2 a { color: var(--ink); text-decoration: none; }
.commit { padding: 16px 20px; }
.commit code { display: block; font: 500 12.5px var(--mono); word-break: break-all; padding: 10px 12px; background: var(--s2); border-radius: 8px; margin-top: 10px; }

@media (max-width: 1000px) {
}
@media (max-width: 860px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--s1); border-top: 1px solid var(--line2); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; color: var(--mute); text-decoration: none; font: 600 10.5px var(--sans); -webkit-tap-highlight-color: transparent; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--ink); }
  .tabbar a.navsi.on { color: var(--platinum); }
  .page { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .basket, .toasts { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .selbar { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .subin { height: 42px; padding: 0 12px; }
  .subnav a { height: 30px; padding: 0 12px; font-size: 13px; }
  .trend { margin-top: 14px; }
  .trail { grid-auto-columns: 86%; }
  .cats { padding: 10px 12px; }
  .trow, .thead { grid-template-columns: 40px minmax(0, 1fr) minmax(76px, 104px) minmax(64px, 84px); gap: 10px; padding-left: 12px; padding-right: 12px; }
  .trow .rk, .thead .rk, .trow .c3, .thead .c3, .trow .c4, .thead .c4 { display: none; }
  .trows .trow, .trows .thead { grid-template-columns: 40px minmax(0, 1fr) minmax(90px, 120px); }
  .tfacts { grid-template-columns: 1fr 1fr; }
  .tfacts > div:nth-child(3) { border-left: 0; }
  .tfacts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .crow2 { grid-template-columns: 1fr; }
  .crow2 > div { border-left: 0; border-top: 1px solid var(--line); }
  .crow2 > div:first-child { border-top: 0; }
  .prohead { grid-template-columns: 56px minmax(0, 1fr); padding: 16px; }
  .prohead .avatar { width: 56px; height: 56px; }
  .proacts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ------------------------------------------------------------ the More sheet on phones */
.msheet { position: fixed; inset: 0; z-index: 140; background: var(--shade); display: flex; align-items: flex-end; animation: shadein .12s ease-out; }
.msheet[hidden] { display: none; }
.msbox { width: 100%; max-height: 84vh; overflow: auto; background: var(--bg); border-radius: 18px 18px 0 0; padding: 6px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow2); animation: sheetup .18s cubic-bezier(.2, .8, .3, 1); }
@keyframes sheetup { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.msgrip { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 6px auto 10px; }
.mshead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.mshead b { font: 750 20px var(--sans); letter-spacing: -.02em; }
.mshead .x { position: static; width: 34px; height: 34px; }
.mslist { border: 1px solid var(--line2); border-radius: 14px; background: var(--s1); overflow: hidden; }
.msrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.msrow:last-child { border-bottom: 0; }
.msrow:active { background: var(--s2); }
.msrow i { width: 44px; height: 44px; border-radius: 12px; background: var(--s2); display: grid; place-items: center; color: var(--ink); }
.msrow i svg { width: 20px; height: 20px; }
.msrow b { display: block; font: 650 15px var(--sans); }
.msrow span { display: block; font: 400 12.5px var(--sans); color: var(--mute); margin-top: 2px; }
.msrow em { font-style: normal; color: var(--faint); font-size: 18px; text-align: center; line-height: 1; }

/* ------------------------------------------------------------ no heroes: stats as a line, the clock alone */
.pagestats.inline { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; border-radius: 0; background: none; overflow: visible; align-items: baseline; }
.pagestats.inline span { padding: 0; border: 0; font: 400 12.5px var(--sans); color: var(--mute); white-space: nowrap; }
.pagestats.inline b { display: inline; font: 650 13px var(--mono); color: var(--ink); margin: 0 4px 0 0; letter-spacing: 0; }
.toolbar2 .pagestats.inline { margin-left: auto; }
@media (max-width: 860px) {
  .toolbar2 .pagestats.inline { margin-left: 0; width: 100%; }
}

/* the deploy steps scroll sideways on a phone instead of wrapping */
@media (max-width: 860px) {
  .stepper { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .stepper::-webkit-scrollbar { display: none; }
  .stepper button { flex: none; padding: 9px 12px; }
}

html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }

/* ------------------------------------------------------------ the rank auction */
.aucstrip { margin-bottom: 16px; }
.aucstrip .tile b.mono { font: 650 24px/1 var(--mono); letter-spacing: -.02em; }
.aucstrip .tile b a { color: var(--ink); text-decoration: none; font: 600 16px var(--mono); }
.aucstrip .tile b a:hover { color: var(--acc); }
.aucstrip .hypeu { font: 500 11px var(--mono); color: var(--mute); margin-left: 4px; }
.refund { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--gold); border-radius: var(--r); background: var(--gold-soft); }
.refund b { display: block; font: 700 14px var(--sans); margin-bottom: 2px; }
.lots3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lot { background: var(--s1); border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; transition: border-color var(--t); }
.lot.mine { border-color: var(--up); }
.lot.outbid { border-color: var(--signal); }
.lotpic { position: relative; aspect-ratio: 1; background: var(--s2); }
.lotpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rankchip { position: absolute; left: 12px; top: 12px; padding: 6px 11px; border-radius: var(--rp); background: var(--ink); color: var(--bg); font: 700 12px var(--sans); box-shadow: var(--shadow); }
.lchip { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: var(--rp); background: var(--s1); color: var(--mute); font: 600 11px var(--sans); box-shadow: var(--shadow); }
.lchip.now { color: #fff; background: var(--acc); }
.lchip.up { color: var(--ink); }
.lchip.past { color: var(--faint); }
.lotpic .lchip { left: auto; right: 12px; top: 12px; }
.lotname { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; }
.lotname h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.lotname span { font: 500 12px var(--mono); color: var(--faint); white-space: nowrap; }
.traits5 { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.traits5 > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 18px; background: var(--s1); }
.traits5 i { font: 400 11.5px var(--sans); color: var(--faint); font-style: normal; }
.traits5 b { font: 600 13.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traits5 em { font: 500 11.5px var(--mono); color: var(--mute); font-style: normal; }
.bidbox { padding: 16px 18px; }
.bidtop { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.bidtop i { display: block; font: 400 11.5px var(--sans); color: var(--faint); font-style: normal; margin-bottom: 5px; }
.bidtop b { display: block; font: 750 clamp(19px, 1.7vw, 26px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bidtop > div { min-width: 0; }
.bidtop b.date { font: 650 15px/1.3 var(--sans); letter-spacing: -.01em; white-space: normal; }
.bidtop b small { font: 500 11px var(--mono); color: var(--mute); margin-left: 5px; letter-spacing: .04em; }
.bidtop span { display: block; font: 400 12px/1.4 var(--sans); color: var(--mute); margin-top: 6px; }
.bidtop .me { color: var(--up); font-weight: 600; }
.bidtop .out { color: var(--signal); font-weight: 600; }
.bidform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.bidin { position: relative; }
.bidin input { width: 100%; height: 44px; padding: 0 56px 0 12px; border: 1px solid var(--line2); border-radius: var(--rs); background: var(--s1); font: 500 16px var(--mono); color: var(--ink); }
.bidin input:focus { outline: none; border-color: var(--ink); }
.bidin span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 11px var(--mono); color: var(--faint); letter-spacing: .04em; }
.bidform .btn { height: 44px; }
.quick { display: flex; gap: 6px; margin: 10px 0 8px; flex-wrap: wrap; }
.quick button { height: 28px; padding: 0 10px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); color: var(--mute); font: 500 12px var(--mono); cursor: pointer; transition: color var(--t), border-color var(--t); }
.quick button:hover { color: var(--ink); border-color: var(--ink); }
.bidbox .help { margin: 0; }
.bidhist { border-top: 1px solid var(--line); padding: 12px 18px 14px; }
.bidhist .lab { margin-bottom: 4px; }
.bidrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bidrow:last-child { border-bottom: 0; }
.bidrow .avatar { margin: 0; }
.bidrow a { color: var(--ink); text-decoration: none; font: 500 12px var(--mono); }
.bidrow.me a::after { content: " you"; color: var(--up); font-family: var(--sans); font-weight: 600; }
.bidrow b { font: 600 12.5px var(--mono); color: var(--ink); }
.bidrow span { color: var(--faint); font: 400 11.5px var(--sans); }
.howrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.howrow > div { background: var(--s1); padding: 20px 20px 22px; min-width: 0; }
.howrow i { display: block; font: 700 11px var(--mono); letter-spacing: .12em; color: var(--acc); font-style: normal; margin-bottom: 18px; }
.howrow b { display: block; font: 750 17px/1.15 var(--sans); letter-spacing: -.02em; margin-bottom: 6px; }
.howrow span { font: 400 13.5px/1.5 var(--sans); color: var(--mute); }
@media (max-width: 1000px) {
  .lots3 { grid-template-columns: 1fr 1fr; }
  .howrow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .aucstrip .tile:last-child { grid-column: 1 / -1; }
  .aucstrip .tile b.mono { font-size: 19px; }
  .lots3 { grid-template-columns: 1fr; }
  .howrow { grid-template-columns: 1fr; }
  .refund { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ tokens: the screener */
.scr { margin-top: 0; }
.termbar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.termbar .input { max-width: 240px; height: 36px; font-size: 13px; }
.termbar .pagestats.inline { margin-left: 0; }
.shead, .srow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 118px 72px 118px 112px 96px 88px 104px; gap: 12px; align-items: center; }
.shead { padding: 10px 16px; font: 500 12px var(--sans); color: var(--faint); border-bottom: 1px solid var(--line); position: sticky; top: 62px; background: var(--s1); z-index: 2; }
.shead span:nth-child(n+3) { text-align: right; }
.srow { padding: 9px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background var(--t); }
.srow:hover { background: var(--s2); }
.srow:last-child { border-bottom: 0; }
.srow .rk { font: 500 12px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.srow .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.srow .who > span { min-width: 0; }
.srow .who b { display: block; font: 650 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .who em { display: block; font: 400 12px var(--sans); color: var(--faint); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlogo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--sans); color: #fff; background: var(--ink); flex: none; overflow: hidden; font-style: normal; }
.tlogo.big { width: 48px; height: 48px; font-size: 13px; }
.tlogo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.srow .num { text-align: right; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srow .num small { font-size: 10px; color: var(--mute); margin-left: 2px; }
.srow .num i { display: block; font: 400 11px var(--sans); color: var(--faint); font-style: normal; margin-top: 2px; }
.srow .num em { font-style: normal; }
.srow .c6 { display: flex; justify-content: flex-end; }
.pos { color: var(--up); }
.neg { color: var(--down); }
.spark { width: 96px; height: 28px; display: block; }
.spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark.pos polyline { stroke: var(--up); }
.spark.neg polyline { stroke: var(--down); }

/* ------------------------------------------------------------ tokens: one pair */
.pairhead { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.pairhead .back { color: var(--ink); text-decoration: none; padding: 7px 12px 7px 10px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); font: 500 13px var(--sans); white-space: nowrap; }
.pairwho { min-width: 0; flex: 1 1 260px; }
.pairwho h1 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 4px; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 10px; }
.pairwho h1 span { font: 500 14px var(--sans); color: var(--mute); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pairaddr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 12px var(--mono); color: var(--mute); }
.pairaddr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pairaddr .link { font-size: 12px; }
.poolchip { font: 500 11px var(--sans); color: var(--mute); background: var(--s2); border-radius: var(--rp); padding: 3px 8px; text-decoration: none; }
.poolchip:hover { color: var(--ink); }
.pairacts { display: flex; gap: 8px; }
.pairgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto; gap: 16px; align-items: start; }
.pairgrid > .section { margin-top: 0; }
.pchart { grid-column: 1; grid-row: 1; }
.ptrades { grid-column: 1; grid-row: 2; }
.order { grid-column: 2; grid-row: 1 / 3; }
.pricebar { display: flex; align-items: flex-end; gap: 24px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pbig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pbig b { font: 800 36px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pbig small { font: 500 12px var(--mono); color: var(--mute); }
.chg { font: 600 13px var(--mono); padding: 3px 8px; border-radius: var(--rp); background: var(--s2); }
.chg.pos { color: var(--up); background: var(--up-soft); }
.chg.neg { color: var(--down); background: var(--acc-soft); }
.pfacts { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.pfacts i { display: block; font: 400 11.5px var(--sans); color: var(--faint); font-style: normal; margin-bottom: 3px; white-space: nowrap; }
.pfacts b { font: 600 13.5px var(--mono); white-space: nowrap; }
.pfacts em { font-style: normal; }
.chartbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ohlc { display: flex; gap: 12px; font: 400 11.5px var(--mono); color: var(--faint); flex-wrap: wrap; }
.ohlc b { color: var(--ink); font-weight: 500; }
.candles { height: 340px; padding: 8px 8px 0; }
.candles svg { width: 100%; height: 100%; display: block; }
.candles .grid { stroke: var(--line); stroke-width: 1; }
.candles .ax { font: 400 10.5px var(--mono); fill: var(--faint); }
.candles .wick { stroke-width: 1; }
.candles .wick.up, .candles .cnd.up { stroke: var(--up); fill: var(--up); }
.candles .wick.down, .candles .cnd.down { stroke: var(--down); fill: var(--down); }
.candles .vol.up { fill: var(--up); opacity: .35; }
.candles .vol.down { fill: var(--down); opacity: .35; }
.candles .last { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.candles .lasttag { fill: var(--ink); }
.candles .lastt { font: 500 10.5px var(--mono); fill: var(--bg); }
.candles .cross { stroke: var(--mute); stroke-width: 1; stroke-dasharray: 2 3; }
.candles .pline { fill: none; stroke-width: 1.6; }
.candles .pline.up { stroke: var(--up); }
.candles .pline.down { stroke: var(--down); }
.candles .empty-chart { height: 100%; display: grid; place-items: center; color: var(--faint); font: 400 13px var(--sans); }
.tsub { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tsub button { flex: 1; min-width: 90px; height: 42px; border: 0; background: none; color: var(--mute); font: 600 12.5px var(--sans); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tsub button.on { color: var(--ink); border-bottom-color: var(--ink); }
.trhead, .trrow { display: grid; grid-template-columns: 72px 56px minmax(80px, 1fr) minmax(80px, 1fr) minmax(90px, 1fr) minmax(120px, 1.2fr) 34px; gap: 10px; align-items: center; padding: 8px 16px; }
.trhead { font: 500 11.5px var(--sans); color: var(--faint); border-bottom: 1px solid var(--line); }
.trrow { border-bottom: 1px solid var(--line); font: 400 12.5px var(--sans); color: var(--mute); }
.trrow:last-child { border-bottom: 0; }
.trrow .w { font: 400 11.5px var(--sans); color: var(--faint); }
.trrow .k { font: 600 12px var(--sans); }
.trrow.buy .k { color: var(--up); }
.trrow.sell .k { color: var(--down); }
.trrow .m { font: 500 12px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trrow .who { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trrow .who a { color: var(--ink); text-decoration: none; font: 500 12px var(--mono); }
.trrow .avatar { margin: 0; }
.trrow .tx { color: var(--faint); text-decoration: none; font: 500 11px var(--mono); }
.trrow .tx:hover { color: var(--ink); }
.info { margin: 0; padding: 8px 20px 16px; }
.info > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font: 400 13px/1.5 var(--sans); }
.info > div:last-child { border-bottom: 0; }
.info dt { color: var(--faint); }
.info dd { margin: 0; color: var(--ink); word-break: break-all; }
.info dd a { color: var(--ink); text-decoration: none; }
.order { position: sticky; top: 76px; margin-top: 0; }
.oside { display: flex; width: auto; margin: 14px 16px 0; height: 40px; }
.oside button { flex: 1; height: 100%; font: 700 13.5px var(--sans); }
.oside button.on.buy { background: var(--up); color: #fff; }
.oside button.on.sell { background: var(--down); color: #fff; }
.obox { padding: 14px 16px 16px; }
.olab { display: flex; justify-content: space-between; align-items: baseline; font: 400 12px var(--sans); color: var(--faint); margin: 10px 0 6px; }
.olab b { color: var(--mute); font: 500 12px var(--mono); }
.olab .link { font-size: 12px; margin-left: 6px; color: var(--ink); }
.oin { position: relative; }
.oin input { width: 100%; height: 52px; padding: 0 76px 0 14px; border: 1px solid var(--line2); border-radius: var(--rs); background: var(--s1); font: 500 20px var(--mono); color: var(--ink); }
.oin input:focus { outline: none; border-color: var(--ink); }
.ounit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 600 12px var(--mono); color: var(--mute); letter-spacing: .03em; }
.opresets { display: flex; gap: 6px; margin-top: 8px; }
.opresets button { flex: 1; height: 28px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); color: var(--mute); font: 500 11.5px var(--mono); cursor: pointer; }
.opresets button:hover { color: var(--ink); border-color: var(--ink); }
.oout { position: relative; height: 52px; display: flex; align-items: center; padding: 0 76px 0 14px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--s2); }
.oout b { font: 500 20px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odetails { margin: 12px 0; display: grid; gap: 0; }
.odetails > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font: 400 12.5px var(--sans); }
.odetails > div:last-child { border-bottom: 0; }
.odetails dt { color: var(--faint); }
.odetails dd { margin: 0; color: var(--ink); font: 500 12px var(--mono); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tslip { display: flex; gap: 4px; }
.tslip button { height: 24px; padding: 0 8px; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--s1); color: var(--mute); font: 500 11px var(--mono); cursor: pointer; }
.tslip button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.obtn { height: 48px; font-size: 15px; }
.obtn.buy { background: var(--up); border-color: var(--up); color: #fff; }
.obtn.sell { background: var(--down); border-color: var(--down); color: #fff; }
.obtn:hover { filter: brightness(.94); }
.obox .help { margin-top: 10px; }
@media (max-width: 1000px) {
  .pairgrid { grid-template-columns: 1fr; grid-template-rows: none; }
  .pchart, .ptrades, .order { grid-column: 1; grid-row: auto; }
  .order { position: static; }
  .shead, .srow { grid-template-columns: 30px minmax(0, 1fr) 110px 70px 110px; }
  .shead .c4, .srow .c4, .shead .c5, .srow .c5, .shead .c6, .srow .c6, .shead .c7, .srow .c7 { display: none; }
}
@media (max-width: 860px) {
  .shead { top: 54px; }
  .shead, .srow { grid-template-columns: minmax(0, 1fr) 104px 64px; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .shead .rk, .srow .rk, .shead .c3, .srow .c3 { display: none; }
  .candles { height: 260px; }
  .pricebar { gap: 14px; }
  .pfacts { margin-left: 0; gap: 14px; }
  .trhead, .trrow { grid-template-columns: 60px 44px minmax(0, 1fr) minmax(0, 1fr) 30px; }
  .trhead span:nth-child(5), .trrow > :nth-child(5), .trhead span:nth-child(6), .trrow > :nth-child(6) { display: none; }
}

/* ------------------------------------------------------------ the sweep panel */
.swq { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; align-items: center; margin: 14px 0 12px; }
.swq input[type="range"] { width: 100%; accent-color: var(--ink); }
.swq .input { height: 38px; text-align: center; font-family: var(--mono); }
.swpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 44px; }
.swpick span { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--s2); border: 1px solid var(--line); }
.swpick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swsum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 12px; border-top: 1px solid var(--line); font: 400 12.5px var(--sans); color: var(--mute); }
.swsum b { font: 700 18px var(--sans); color: var(--ink); }

/* ------------------------------------------------------------ the profile's Created tab */
.crea { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.crea:last-child { border-bottom: 0; }
.crea .who { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--ink); }
.crea .pic { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--s2); flex: none; display: block; }
.crea .who b { display: block; font: 650 14.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crea .who span span { display: block; font: 400 12px var(--sans); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crea .facts { font: 400 12.5px/1.45 var(--sans); color: var(--mute); }
.crea .facts b { color: var(--ink); font-weight: 600; }
.crea .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
  .crea { grid-template-columns: 1fr; gap: 10px; }
  .crea .acts { justify-content: flex-start; }
}

/* ------------------------------------------------------------ the pair page: price, change, facts, the chart */
.pricebar { align-items: center; }
.pchg { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pchg span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: 600 12.5px var(--mono); }
.pchg span i { font: 500 10.5px var(--sans); color: var(--faint); font-style: normal; }
.pfacts2 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.pfacts2 > div { background: var(--s1); padding: 10px 16px 11px; min-width: 0; }
.pfacts2 i { display: block; font: 400 11px var(--sans); color: var(--faint); font-style: normal; margin-bottom: 3px; white-space: nowrap; }
.pfacts2 b { font: 600 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pfacts2 em { font-style: normal; }
.lwc { position: relative; height: 420px; }
.lwc .empty-chart { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font: 400 13px var(--sans); }
.chartnote { padding: 10px 16px 12px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--sans); color: var(--faint); }
.chartbar .link { font-size: 12px; }
.trrow.me { background: var(--up-soft); }
:root[data-theme="dark"] .trrow.me { background: color-mix(in srgb, var(--up) 14%, transparent); }
@media (max-width: 1000px) { .pfacts2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .lwc { height: 300px; }
  .pchg { margin-left: 0; width: 100%; }
  .pchg span { flex: 1; min-width: 0; }
  .pfacts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ SI page */
.sigrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.sigrid2 .section { margin-top: 0; }
.gradebar { display: flex; gap: 2px; height: 46px; padding: 16px 20px 10px; }
.gradebar button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 28px; border: 0; border-radius: 6px; cursor: pointer; color: #fff; font: 700 12px var(--sans); opacity: .92; transition: opacity var(--t), transform var(--t); }
.gradebar button:hover, .gradebar button.on { opacity: 1; transform: scaleY(1.12); }
.gradebar button span { font: 500 11px var(--mono); opacity: .85; }
.gradebar .gS, .gradebar .gA, .gradekeys .gS i, .gradekeys .gA i { background: var(--up); }
.gradebar .gB, .gradekeys .gB i { background: var(--platinum); }
.gradebar .gC, .gradekeys .gC i { background: var(--gold); }
.gradebar .gD, .gradekeys .gD i { background: var(--signal); }
.gradebar .gA { filter: brightness(.86); }
.gradekeys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 10px; padding: 4px 20px 16px; }
.gradekeys span { display: flex; align-items: center; gap: 6px; font: 400 11.5px var(--sans); color: var(--mute); white-space: nowrap; min-width: 0; }
.gradekeys i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.gradekeys b { color: var(--ink); font-weight: 700; }
.gradekeys small { font: 500 11px var(--mono); color: var(--faint); margin-left: auto; }
.sihow2 > div { display: grid; grid-template-columns: 40px 104px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.sihow2 > div:last-child { border-bottom: 0; }
.sihow2 i { font: 750 18px/1 var(--sans); letter-spacing: -.02em; color: var(--platinum); font-style: normal; }
.sihow2 b { font: 650 13.5px var(--sans); }
.sihow2 span { font: 400 12.5px/1.5 var(--sans); color: var(--mute); }
.chead .sortk { background: none; border: 0; padding: 0; font: inherit; color: var(--faint); cursor: pointer; text-align: left; }
.chead .sortk:hover { color: var(--ink); }
.chead .sortk.on { color: var(--ink); font-weight: 600; }
.chead .sortk.on::after { content: " \2193"; }
.flagrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.flagrow:last-child { border-bottom: 0; }
.flagrow:hover { background: var(--s2); }
.flagrow .pic { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--s2); display: block; }
.flagrow .who { min-width: 0; }
.flagrow .who b { display: block; font: 600 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flagrow .who span { font: 400 12px/1.4 var(--sans); color: var(--signal); }
@media (max-width: 860px) {
  .sigrid2 { grid-template-columns: 1fr; }
  .gradekeys { grid-template-columns: 1fr 1fr; }
  .sihow2 > div { grid-template-columns: 32px minmax(0, 1fr); }
  .sihow2 span { grid-column: 2; }
  .chead.sihead { display: none; }
}

/* ------------------------------------------------------------ the profile dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; margin-bottom: 4px; }
.dcard { border: 1px solid var(--line2); border-radius: 16px; background: var(--s1); padding: 16px 20px 18px; min-width: 0; }
.dhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.dhead b { font: 700 15px var(--sans); letter-spacing: -.01em; }
.dhead .note { font-size: 12px; }
.dbig { font: 800 40px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dbig small { font: 400 12.5px var(--sans); color: var(--mute); letter-spacing: 0; }
.dsplit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dsplit span { background: var(--bg); padding: 9px 12px; min-width: 0; }
.dsplit i { display: block; font: 400 11px var(--sans); color: var(--faint); font-style: normal; margin-bottom: 3px; white-space: nowrap; }
.dsplit b { font: 600 13.5px var(--mono); white-space: nowrap; }
.reflink.nopad { padding: 0; grid-template-columns: minmax(0, 1fr) auto auto; }
.dcard .help { margin-top: 10px; }
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dbig { font-size: 32px; }
}

/* ------------------------------------------------------------ more: the board's gap row, status values */
.lrow.gap { padding: 2px 20px; color: var(--faint); pointer-events: none; }
.mrow em.mono { font-family: var(--mono); color: var(--mute); }
.morewrap .more { padding: 10px 20px 14px; margin: 0; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ launch: closed until mainnet */
.soonbox { margin: 0 0 18px; border-color: var(--ink); }
.soonin { padding: 16px 20px 20px; display: grid; gap: 16px; max-width: 64ch; }
.soonin .note { font-size: 14px; }

/* ------------------------------------------------------------ a banner made from the cover */
.banner.auto { position: relative; }
.banner.auto img { filter: blur(26px) saturate(1.15); transform: scale(1.3); opacity: .9; }
.banner.auto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)); }

/* the pair facts: a range may wrap; phones see three suggested questions */
.pfacts2 b.wrap { white-space: normal; line-height: 1.35; }
@media (max-width: 860px) { .asksug button:nth-child(n+4) { display: none; } }

/* ------------------------------------------------------------ more: watchlist rows, support answers */
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.wrow:last-child { border-bottom: 0; }
.wrow > a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; text-decoration: none; color: var(--ink); }
.wrow .pic { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--s2); display: block; }
.wrow .who { min-width: 0; }
.wrow .who b { display: block; font: 600 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .who span { display: block; font: 400 12px var(--sans); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .link { font-size: 12px; color: var(--faint); }
.wrow .link:hover { color: var(--signal); }
.morewrap .msrow { cursor: pointer; }
button.msrow { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { padding: 12px 20px; font: 600 14px var(--sans); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--faint); font: 500 16px var(--mono); width: 14px; }
.faq details[open] summary::before { content: "‘2"; }
.faq p { padding: 0 20px 14px 44px; font: 400 13px/1.55 var(--sans); color: var(--mute); }
.faq p a { color: var(--ink); }
@media (max-width: 860px) {
  .wrow { padding: 10px 14px; }
  .wrow .who span { white-space: normal; }
  .faq summary { padding: 12px 14px; }
  .faq p { padding: 0 14px 14px 38px; }
}

/* ------------------------------------------------------------ the More menu in the desktop header */
.nav { position: relative; }
.nav a.hasmenu { padding-right: 26px; }
.nav a.hasmenu::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform var(--t); }
.nav a.hasmenu.open::after { transform: rotate(225deg); margin-top: -1px; }
.nav a.hasmenu { position: relative; }
.navdrop { position: absolute; top: calc(100% + 6px); z-index: 70; width: 300px; padding: 6px; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow2); animation: toastin .14s ease-out both; }
.navdrop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav .navdrop a.ndrow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; height: auto; padding: 8px 10px; margin: 0; border-radius: 10px; text-decoration: none; color: var(--ink); font: inherit; }
.nav .navdrop a.ndrow:hover, .nav .navdrop a.ndrow:focus-visible { background: var(--s2); color: var(--ink); outline: none; }
.ndrow i { width: 36px; height: 36px; border-radius: 10px; background: var(--s2); display: grid; place-items: center; color: var(--ink); }
.ndrow:hover i { background: var(--bg); }
.ndrow i svg { width: 18px; height: 18px; }
.ndrow b { display: block; font: 650 14px/1.2 var(--sans); letter-spacing: -.01em; }
.ndrow span { display: block; font: 400 12px/1.35 var(--sans); color: var(--mute); margin-top: 2px; }
.nav .navdrop a.ndall { display: block; height: auto; margin: 6px 4px 2px; padding: 9px 10px 5px; border-top: 1px solid var(--line); border-radius: 0; background: none; font: 500 12.5px var(--sans); color: var(--mute); text-decoration: none; }
.nav .navdrop a.ndall:hover { color: var(--ink); background: none; }

/* ------------------------------------------------------------ the application: what is compulsory, what is locked */
.req { font-style: normal; color: var(--signal); font-weight: 700; margin-left: 3px; }
.reqnote { color: var(--signal); font-weight: 500; }
.input.bad { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent); }
.field.locked .label, .chk.locked { color: var(--faint); }
.field.locked .input { background: var(--s2); color: var(--mute); cursor: not-allowed; }
.field.locked .label::after { content: " locked while the mint is on"; font: 500 11px var(--sans); color: var(--signal); }
.lchip b { font-family: var(--mono); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.aprow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.aprow:last-child { border-bottom: 0; }
.aprow .pic { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--s2); display: block; }
.aprow .who { min-width: 0; }
.aprow .who b { display: block; font: 650 14.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aprow .who b small { font: 500 11px var(--mono); color: var(--faint); margin-left: 6px; }
.aprow .who > span { display: block; font: 400 12.5px/1.45 var(--sans); color: var(--mute); }
.aprow .acts { display: flex; gap: 6px; }
@media (max-width: 860px) { .aprow { grid-template-columns: 40px minmax(0, 1fr); } .aprow .acts { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ select and sweep */
body.nobasket #basket { display: none !important; }
body.hasbar .page { padding-bottom: 170px; }
.card .tick { opacity: 1; font: 600 15px/1 var(--sans); color: var(--mute); }
.card .tick:hover { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .card .tick { opacity: 0; } .card:hover .tick, .card.picked .tick { opacity: 1; } }
.card.picked { box-shadow: inset 0 0 0 2px var(--acc); border-color: var(--acc); }
.card.picked .tick { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.selhead { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; font: 500 12.5px var(--mono); color: var(--mute); cursor: pointer; flex-wrap: wrap; }
.selhead input { accent-color: var(--acc); width: 16px; height: 16px; margin: 0; }
.selhead b { color: var(--ink); font-weight: 700; }
.selhead em { font: 400 12px var(--sans); color: var(--faint); font-style: normal; }
.sweep2 { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 115; width: min(calc(100% - 32px), 1040px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumbs thumbs" "row acts"; gap: 10px 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 16px; background: var(--s1); box-shadow: var(--shadow2); animation: toastin .18s ease-out both; }
.sweep2 .swthumbs { grid-area: thumbs; display: flex; gap: 4px; align-items: center; min-height: 0; }
.sweep2 .swthumbs:empty { display: none; }
.sweep2 .swthumbs img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: var(--s2); border: 1px solid var(--line); }
.sweep2 .swthumbs i { font: 500 12px var(--mono); color: var(--mute); margin-left: 4px; font-style: normal; }
.sweep2 .swrow { grid-area: row; display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.swstep { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: var(--rp); height: 40px; background: var(--s1); overflow: hidden; flex: none; }
.swstep button { width: 40px; height: 100%; border: 0; background: none; color: var(--ink); font-size: 18px; cursor: pointer; }
.swstep button:disabled { color: var(--faint); cursor: default; }
.swstep button:hover:not(:disabled) { background: var(--s2); }
.swstep b { min-width: 40px; text-align: center; font: 700 15px var(--mono); font-variant-numeric: tabular-nums; }
.sweep2 #sw_slider { flex: 1 1 140px; min-width: 120px; max-width: 260px; accent-color: var(--acc); }
.swcap { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--sans); color: var(--mute); white-space: nowrap; }
.swcap .input { width: 110px; height: 40px; font-family: var(--mono); font-size: 13px; }
.swcap em { font: 600 11px var(--mono); color: var(--faint); font-style: normal; }
.swtotal { font: 400 12.5px var(--sans); color: var(--mute); white-space: nowrap; margin-left: auto; text-align: right; }
.swtotal b { font: 700 18px var(--sans); color: var(--ink); letter-spacing: -.02em; margin-right: 4px; }
.swtotal i { display: block; font: 400 11.5px var(--sans); color: var(--faint); font-style: normal; }
.sweep2 .swacts { grid-area: acts; display: flex; gap: 8px; }
.sweep2 .swacts .btn { height: 42px; }
@media (max-width: 1000px) { .sweep2 #sw_slider { display: none; } }
@media (max-width: 860px) {
  body.hasbar .page { padding-bottom: calc(230px + env(safe-area-inset-bottom)); }
  .sweep2 { left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); width: auto; transform: none; grid-template-columns: 1fr; grid-template-areas: "thumbs" "row" "acts"; gap: 10px; padding: 10px 12px; border-radius: 14px; }
  .sweep2 .swrow { gap: 10px; }
  .swcap .input { width: 96px; height: 38px; }
  .swstep { height: 38px; }
  .swtotal { width: 100%; margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .swtotal i { display: inline; }
  .sweep2 .swacts { display: grid; grid-template-columns: 1fr 1fr auto; }
  .sweep2 .swacts .btn { height: 40px; padding: 0 12px; font-size: 13px; }
  .sweep2 .swacts #sw_clear { grid-column: auto; }
}

/* ---- the NFTs overview: plain headings, one period, one picture per card ---- */
.ovbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; }
.ovbar .cats { padding: 0; border: 0; }
.ovh { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 30px 0 12px; }
.ovbar + .ovh { margin-top: 0; }
.ovh h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.ovh .note { font: 400 12.5px/1.4 var(--sans); color: var(--faint); text-align: right; min-width: 0; }
.trail2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-height: 120px; }
.trail2 .empty { grid-column: 1 / -1; }
.tcard2 { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); background: var(--s1); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color var(--t); }
.tcard2.tpin { border-color: var(--ink); }
.tcard2.tpin .trank { background: var(--up); color: #fff; }
.tcard2:hover { border-color: var(--ink); }
.tcard2 .tpic { position: relative; aspect-ratio: 1.3; background: var(--s2); overflow: hidden; }
.tcard2 .tpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard2 .tpic .tgrad { position: absolute; inset: 0; background: linear-gradient(135deg, var(--s2), var(--line2)); }
.tcard2 .tbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; padding: 12px 14px 14px; }
.tcard2 .tbody b { font: 650 15.5px/1.25 var(--sans); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard2 .tbody .sub { grid-column: 1 / -1; font: 400 12.5px/1.5 var(--sans); color: var(--mute); }
.tcard2 .tbody .sub em { font: 600 12px var(--mono); font-style: normal; color: var(--ink); }
.crow.ov, .chead.ov { grid-template-columns: 32px 40px minmax(0, 1fr) 104px 92px repeat(4, minmax(84px, 120px)); gap: 12px; }
.chead.ov { padding: 0 12px 8px; }
.chead.ov span:nth-child(4), .chead.ov span:nth-child(5) { text-align: left; }
.chead.ov span:nth-child(n+6) { text-align: right; }
.crow.ov { padding: 8px 12px; border-radius: 10px; }
.crow.ov .pic { width: 40px; height: 40px; }
.crow.ov .who b { font-size: 14.5px; }
.crow.ov .who b .here { font-style: normal; color: var(--acc); font-size: 12px; }
.crow.ov .cat { font: 500 12.5px var(--sans); color: var(--mute); }
.crow.ov .num { font-size: 13px; }
.homegrid.ov2 { margin-top: 6px; }
.homegrid.ov2 > section { min-width: 0; }
.ov .feedbox { display: grid; gap: 4px; }
@media (max-width: 860px) {
  .trail2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .trail2::-webkit-scrollbar { display: none; }
  .tcard2 { scroll-snap-align: start; }
  .crow.ov, .chead.ov { grid-template-columns: 40px minmax(0, 1fr) 88px 74px; gap: 8px; }
  .crow.ov { padding: 8px 4px; }
  .crow.ov .num { font-size: 12px; }
  .crow.ov .rank, .chead.ov span:first-child, .crow.ov .cat, .chead.ov span:nth-child(4), .crow.ov .num:nth-child(n+7), .chead.ov span:nth-child(n+7) { display: none; }
  .crow.ov .num:nth-child(6), .chead.ov span:nth-child(6) { display: block; }
  .ovbar { margin-bottom: 16px; }
  .ovh { margin-top: 24px; }
}

/* ---- before mainnet: trading closed ---- */
.closedbar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--s1); font: 500 13px/1.4 var(--sans); color: var(--mute); }
.closedbar b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.banner + .closedbar { margin-top: -6px; }
.closedbar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
html:not(.closed) .closedbar { display: none; }
html.closed .card .tick, html.closed .card .quick, html.closed [data-act="buy"], html.closed [data-act="basket"], html.closed [data-act="offer"],
html.closed [data-act="list"], html.closed [data-act="reprice"], html.closed [data-act="accept"], html.closed [data-accept], html.closed #listsel,
html.closed #sweepopen, html.closed #selhead, html.closed #sweep2, html.closed #offerbtn, html.closed #sweepbtn, html.closed #offerbtn2, html.closed #basket { display: none !important; }
.closedbox { padding: 18px; }
.closedbox b { display: block; font: 700 16px var(--sans); margin-bottom: 6px; }
.closedline { margin: 4px 0 0; }
@media (max-width: 860px) {
  /* one running line on a phone, not a bold column beside four short lines */
  .closedbar { display: block; padding: 10px 12px; font-size: 12.5px; }
  .closedbar::before { display: inline-block; margin: 0 7px 1px 0; }
  .closedbar b { margin-right: 4px; }
}
/* the trade list's tx links: a thumb-sized target */
.trrow a.tx { display: inline-block; padding: 8px 10px; margin: -8px -10px; }

/* a token whose pools hold under 1 HYPE: listed only when every token is asked for */
.spamtag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 600 10px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--down); background: var(--acc-soft); vertical-align: 2px; }

/* launchpad chips on the tokens screener */
.padchips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.padchips button { font: 500 12px var(--sans); color: var(--mute); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; cursor: pointer; text-transform: capitalize; display: inline-flex; gap: 5px; align-items: center; }
.padchips button i { font: 500 10.5px var(--mono); font-style: normal; color: var(--faint); }
.padchips button:hover { color: var(--ink); border-color: var(--line2); }
.padchips button.on { color: var(--ink); background: var(--s2); border-color: var(--line2); }
@media (max-width: 720px) { .padchips { width: 100%; order: 9; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } }

/* ---- the admin's add/remove row on More */
.adminhide { flex-direction: column; align-items: stretch; gap: 8px; }
.adminhidebox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adminhidebox .input { flex: 1 1 260px; height: 34px; font-size: 13px; font-family: var(--mono); }
.adminhide em { font: 400 12px var(--sans); color: var(--faint); font-style: normal; }

/* ---- collection head rules shared with the mint page */
.colhead { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 22px; align-items: center; padding: 18px 0 8px; }
.colwho h1 { font: 700 30px/1 var(--sans); letter-spacing: -.03em; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.colwho .chk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--up); color: #fff; font: 700 12px var(--sans); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 11.5px var(--mono); letter-spacing: .02em; color: var(--mute); background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }
.chip.state { display: inline-flex; align-items: center; gap: 6px; }
.chip.state i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.chip.state.on { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.chip.state.on i { background: var(--up); }
  .colhead { grid-template-columns: auto 1fr; }
  .colwho h1 { font-size: 24px; }
@media (max-width: 880px) {
  .colhead { grid-template-columns: auto 1fr; }
  .colwho h1 { font-size: 24px; }
}

/* ---- the mint page: a drop page in the OpenSea shape, the mint panel pinned on the right */
.mintbanner { width: 100%; height: clamp(140px, 20vw, 280px); overflow: hidden; background: var(--s2); border-bottom: 1px solid var(--line); }
.mintbanner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 14px 0 18px; }
.mavatar { width: 84px; height: 84px; border-radius: 20px; border: 3px solid var(--bg); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); margin-top: -48px; background: var(--s2); object-fit: cover; }
.mwho { min-width: 0; }
.mwho h1 { font: 700 28px/1 var(--sans); letter-spacing: -.03em; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.mwho .chk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--up); color: #fff; font: 700 12px var(--sans); }
.mwho .chip { white-space: nowrap; }
.mstate { font: 600 12px var(--sans); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--mute); background: var(--s1); white-space: nowrap; }
.mstate.on { color: #fff; background: var(--up); border-color: var(--up); }
.mbody { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; margin-bottom: 34px; }
.mmain { display: grid; gap: 16px; min-width: 0; }
.mbox { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; min-width: 0; }
.mboxhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mboxhead b { font: 700 17px var(--sans); letter-spacing: -.01em; }
.mboxhead span { font: 400 12.5px var(--mono); color: var(--faint); }
/* the spotlight: one frog large, its traits beside it, the strip to pick another */
.spot { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px 20px; align-items: center; }
.spothead { grid-column: 1 / -1; margin-bottom: 0; }
.spotpic { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--s2); }
.spotpic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .18s; }
.spotpic img.fade { opacity: 0; }
.spotno { position: absolute; left: 12px; top: 12px; font: 600 12px var(--mono); color: var(--bg); background: var(--ink); padding: 4px 8px; border-radius: 999px; }
.spotside { display: grid; gap: 14px; min-width: 0; }
.spottraits { display: grid; gap: 7px; margin: 0; }
.spottraits div { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 10px; font: 400 13px var(--sans); }
.spottraits dt { color: var(--faint); }
.spottraits dd { margin: 0; display: grid; grid-template-columns: 1fr 70px 44px; align-items: center; gap: 10px; }
.spottraits dd span { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spottraits dd i { height: 5px; border-radius: 999px; background: var(--s2); overflow: hidden; }
.spottraits dd i b { display: block; height: 100%; background: var(--ink); opacity: .55; }
.spottraits dd em { font: 500 11.5px var(--mono); font-style: normal; color: var(--mute); text-align: right; }
.spottraits .spotsum dd { grid-template-columns: 1fr; }
.spottraits .spotsum dd span { color: var(--mute); font-weight: 500; }
.spotstrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.spotstrip::-webkit-scrollbar { display: none; }
.spotstrip button { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 10px; border: 2px solid transparent; background: var(--s2); overflow: hidden; cursor: pointer; opacity: .7; }
.spotstrip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spotstrip button.on, .spotstrip button:hover { opacity: 1; border-color: var(--ink); }
/* the schedule: one row per phase */
.sched { list-style: none; margin: 0; padding: 0; }
.ph { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "dot name meta time pill"; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ph:first-child { border-top: 0; padding-top: 2px; }
.ph:last-child { padding-bottom: 2px; }
.ph > i { grid-area: dot; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line2); font: 600 11px var(--mono); color: var(--mute); font-style: normal; }
.ph.live > i { background: var(--up); border-color: var(--up); color: #fff; }
.ph.done { opacity: .55; }
.ph.done > i { background: var(--s2); }
.ph.mine { background: color-mix(in srgb, var(--s2) 70%, var(--s1)); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 12px; border-top-color: transparent; }
.ph.mine + .ph { border-top-color: transparent; }
.phname { grid-area: name; } .phmeta { grid-area: meta; } .phtime { grid-area: time; }
.ph b { display: block; font: 700 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phmeta b, .phtime b { font: 600 13px var(--mono); }
.ph span { display: block; font: 400 12px var(--sans); color: var(--mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .pill { grid-area: pill; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--s2); color: var(--mute); font-style: normal; }
.ph .pill:empty { display: none; }
.ph .pill.live { background: var(--up); color: #fff; } .ph .pill.mine { background: var(--ink); color: var(--bg); }
/* the panel: state, the numbers, your wallet, the mint */
.mpanel { position: sticky; top: 92px; background: var(--s1); border: 1px solid var(--ink); border-radius: 18px; padding: 18px 20px; display: grid; gap: 14px; min-width: 0; }
.mnext { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mnext b { font: 700 17px var(--sans); letter-spacing: -.01em; }
.mnext em { font: 500 12.5px var(--mono); font-style: normal; color: var(--mute); white-space: nowrap; }
.mnext em:empty { display: none; }
.mnext.on b { color: var(--up); }
.mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.mstats dt { font: 500 12px var(--sans); color: var(--faint); }
.mstats dd { margin: 3px 0 0; font: 700 15px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mstats dd small { font-size: 11px; font-weight: 500; color: var(--faint); }
.mstats dd.soft { font-weight: 500; font-size: 12.5px; color: var(--mute); }
.mintbar { height: 6px; border-radius: 999px; background: var(--s2); overflow: hidden; }
.mintbar b { display: block; height: 100%; background: var(--up); width: 0; transition: width .4s; }
.checkrow { display: flex; gap: 8px; }
.checkrow .input { font-family: var(--mono); font-size: 13px; }
.checkout .note { margin: 10px 0 0; }
.checkout .note.neg { color: var(--down); }
.verdict { display: grid; gap: 5px; padding: 12px 14px; margin-top: 10px; border-radius: 12px; background: var(--s2); border-left: 3px solid var(--faint); }
.verdict b { font: 700 14px var(--sans); }
.verdict span { font: 400 13px/1.5 var(--sans); color: var(--mute); }
.verdict.yes { border-left-color: var(--up); } .verdict.yes b { color: var(--up); }
.verdict.yes.tB { border-left-color: var(--platinum); } .verdict.yes.tB b { color: var(--platinum); }
.verdict.wait { border-left-color: var(--gold); } .verdict.wait b { color: var(--gold); }
.verdict.no { border-left-color: var(--line2); }
.qty { display: flex; align-items: center; gap: 10px; }
.qty button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--ink); font: 500 18px var(--mono); cursor: pointer; }
.qty button:hover { border-color: var(--line2); }
.qty output { font: 700 22px var(--mono); min-width: 32px; text-align: center; }
.qtymax { font: 400 12px var(--mono); color: var(--faint); }
.qtycost { margin-left: auto; font: 600 13px var(--mono); color: var(--ink); }
.mpanel .help { margin: 0; }
/* the podium before the mint, the feed during it */
.livehead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.livehead b { font: 700 17px var(--sans); letter-spacing: -.01em; }
.livehead span { font: 400 13px var(--sans); color: var(--mute); }
.livehead .btn { margin-left: auto; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.podium .lot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--s2); text-decoration: none; color: inherit; }
.podium .lot:hover { border-color: var(--line2); }
.podium img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--s2); }
.podium i { display: block; font: 500 12px var(--sans); color: var(--faint); font-style: normal; }
.podium b { display: block; font: 700 16px var(--sans); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium span { font: 400 12px var(--sans); color: var(--mute); }
.livelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.liverow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--s2); text-decoration: none; color: inherit; }
.liverow img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--s2); }
.liverow b { font: 600 13px var(--mono); }
.liverow span { font: 400 12px var(--mono); color: var(--mute); display: block; }
.liverow em { font: 400 11.5px var(--sans); font-style: normal; color: var(--faint); }
/* the phone bar when the panel has scrolled away */
.mintstick { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--s1); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(0, 0, 0, .12); }
.mintstick > div { flex: 1; min-width: 0; }
.mintstick b { display: block; font: 700 14px var(--sans); }
.mintstick span { display: block; font: 400 12px var(--mono); color: var(--mute); }
@media (min-width: 881px) { .mintstick { display: none; } }
@media (max-width: 1100px) {
  .mbody { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
  .spot { grid-template-columns: 220px minmax(0, 1fr); }
  .podium { grid-template-columns: 1fr; }
  .ph { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "dot name pill" "dot meta time"; row-gap: 6px; }
  .phtime { text-align: right; }
}
@media (max-width: 880px) {
  .mhead { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 10px 0 14px; }
  .mavatar { width: 68px; height: 68px; margin-top: -38px; border-radius: 16px; }
  .mwho h1 { font-size: 24px; }
  .mstate { grid-column: 1 / -1; justify-self: start; }
  .mbody { grid-template-columns: 1fr; gap: 14px; margin-bottom: 70px; }
  .mpanel { order: -1; position: static; padding: 16px; }
  .spot { grid-template-columns: 1fr; gap: 14px; }
  .spottraits div { grid-template-columns: 76px 1fr; }
  .spottraits dd { grid-template-columns: 1fr 54px 40px; }
  .mbox { padding: 16px; }
  .ph.mine { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
}

/* ---- collection head, compact: the banner, the avatar over its edge, chips, a stat strip */
.banner { margin: -30px 0 0; height: clamp(140px, 18vw, 220px); border-radius: 0 0 var(--r) var(--r); }
.colhead.compact { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px 18px; align-items: end; margin: 0 0 14px; padding-top: 0; }
.colhead.compact .pic { width: 84px; height: 84px; border-radius: 20px; border: 3px solid var(--bg); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); margin-top: -34px; }
.colhead.compact h1 { font-size: clamp(24px, 2.6vw, 32px); gap: 10px; margin-top: 6px; }
.colhead.compact .chips { margin-top: 8px; }
.colhead.compact .chips a.chip { text-decoration: none; }
.colhead.compact .chips a.chip:hover { color: var(--ink); border-color: var(--line2); }
.colhead.compact .desc { margin-top: 8px; font-size: 13px; }
.colhead.compact .colacts { align-self: end; }
.statstrip { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 12px 0 14px; margin-bottom: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statstrip > div { display: grid; gap: 2px; }
.statstrip b { font: 700 16px var(--mono); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.statstrip b .hype { font: inherit; color: var(--ink); }
.statstrip b .hype small { font: 500 10.5px var(--mono); margin-left: 4px; color: var(--faint); }
.statstrip span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.statstrip .pctl { font: 400 10.5px var(--mono); color: var(--faint); margin-left: 5px; }
@media (max-width: 880px) {
  .colhead.compact { grid-template-columns: 64px minmax(0, 1fr); }
  .colhead.compact .pic { width: 64px; height: 64px; margin-top: -26px; border-radius: 16px; }
  .colhead.compact .colacts { grid-column: 1 / -1; }
  .statstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
}
.chip { white-space: nowrap; }
@media (max-width: 880px) {
  .colhead.compact { grid-template-columns: 1fr; gap: 8px; }
  .colhead.compact .pic { margin-bottom: -4px; }
  .colhead.compact h1 { margin-top: 0; }
  .colhead.compact .colacts { display: flex; gap: 8px; flex-wrap: wrap; }
}