/* GenPad: a turning deck of real launch cards, set in the HYPE palette. */
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0A1F1C;
  --deep: #06120F;
  --mint: #97FCE4;
  --teal: #50D2C1;
  --mist: #9DB2BD;
  --cream: #EDE6D6;
  --paper: #E8EFEB;
  --line-d: rgba(151, 252, 228, .16);
  --line-l: rgba(10, 31, 28, .16);
  --m: clamp(16px, 1.4vw, 28px);
  --disp: var(--ui);
  --ui: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --black: #000;
  --black-a55: rgba(0, 0, 0, .55);
  --black-a60: rgba(0, 0, 0, .6);
  --black-a70: rgba(0, 0, 0, .7);
  --board: #0D2723;
  --coral: #FFB4A8;
  --cream-a30: rgba(237, 230, 214, .3);
  --cream-a35: rgba(237, 230, 214, .35);
  --cream-a55: rgba(237, 230, 214, .55);
  --deep-a70: rgba(6, 18, 15, .7);
  --deep-a82: rgba(6, 18, 15, .82);
  --ink-a07: rgba(10, 31, 28, .07);
  --ink-a35: rgba(10, 31, 28, .35);
  --ink-a60: rgba(10, 31, 28, .6);
  --ink-a65: rgba(10, 31, 28, .65);
  --ink-a70: rgba(10, 31, 28, .7);
  --ink-a78: rgba(10, 31, 28, .78);
  --ink-a82: rgba(10, 31, 28, .82);
  --mint-a14: rgba(151, 252, 228, .14);
  --mint-a16: rgba(151, 252, 228, .16);
  --mint-a22: rgba(151, 252, 228, .22);
  --mint-a35: rgba(151, 252, 228, .35);
  --mint-a40: rgba(151, 252, 228, .4);
  --teal-a12: rgba(80, 210, 193, .12);
  --white-a50: rgba(255, 255, 255, .5);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; background: var(--ink); color: var(--cream); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 400 14px/1.5 var(--ui); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.sr, .lead caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 99; background: var(--mint); color: var(--ink); padding: 10px 14px; border-radius: 99px; }
.skip:focus { top: 12px; }
.muted { color: var(--mist); }


/* Header */
.mast { position: fixed; inset: 0 0 auto 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px var(--m); transition: background .4s var(--ease), color .4s var(--ease); }
.mast.is-solid { background: var(--ink-a82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mast-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.mast-brand img { width: 34px; height: 34px; border-radius: 9px; }
.mast-line { margin: 0; max-width: 300px; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--mist); }
.mast-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ca { border: 1px solid var(--line-d); background: transparent; border-radius: 99px; padding: 7px 12px; font-size: 12px; color: var(--mist); white-space: nowrap; }
.ca.has { color: var(--cream); }
.pairnote { font-size: 12px; color: var(--mist); white-space: nowrap; }
.pairnote a { color: var(--mint); text-decoration: none; }
.ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--line-d); color: var(--cream); transition: background .25s var(--ease), color .25s var(--ease); }
.ico:hover { background: var(--mint); color: var(--ink); }
.buy, .wallet { border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 0; }
.buy { background: var(--mint); color: var(--ink); }
.buy[aria-disabled="true"] { background: var(--mint-a22); color: var(--mint); }
.wallet { background: var(--cream); color: var(--ink); }
.wallet.on { background: transparent; color: var(--mint); border: 1px solid var(--mint); }


/* Display type: tight grotesk, sentence case, two sizes per section */
h1, h2 { font-family: var(--ui); font-weight: 600; letter-spacing: -.045em; line-height: .95; margin: 0; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
[data-lines] > span { display: inline-block; }
.line-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.line-mask > span { display: inline-block; will-change: transform; }
.pill { display: inline-flex; align-items: center; gap: 10px; border-radius: 99px; background: var(--mint); color: var(--ink); padding: 11px 18px; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; border: 0;
  transition: transform .35s var(--ease), background .25s var(--ease); }
.pill svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.pill:hover svg { transform: translateY(2px); }
.pill:active { transform: scale(.97); }

/* Stage: a vortex of real format, dial and pair cards that becomes a ring, then a wall */
.stage { position: relative; height: 330vh; --cw: clamp(92px, 8.6vw, 220px); }
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(70% 60% at 50% 55%, var(--teal-a12), transparent 70%), var(--ink); }
.orbit { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 45%; z-index: 1; }
.orbit-in { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.card { position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.333); margin: calc(var(--cw) * -.667) 0 0 calc(var(--cw) * -.5);
  border-radius: calc(var(--cw) * .08); border: 0; padding: calc(var(--cw) * .08); text-align: left; display: flex; flex-direction: column; gap: 4px;
  background: var(--cream); color: var(--ink); box-shadow: 0 30px 50px -24px var(--black-a60); will-change: transform; font-size: calc(var(--cw) * .062); line-height: 1.3; }
.card i { width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); border-radius: 22%; background: var(--ink); color: var(--mint); display: grid; place-items: center; font-style: normal; }
.card i svg { width: 58%; height: 58%; }
.card b { margin-top: auto; font-weight: 600; font-size: calc(var(--cw) * .125); line-height: 1; letter-spacing: -.035em; }
.card em { font-style: normal; color: var(--ink-a70); }
.card small { display: flex; justify-content: space-between; border-top: 1px solid var(--line-l); padding-top: 5px; font-size: calc(var(--cw) * .058); color: var(--ink-a70); }
.card small strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card.is-mint { background: var(--mint); }
.card.is-ink { background: var(--deep); color: var(--cream); box-shadow: 0 30px 50px -24px var(--black-a60), 0 0 0 1px var(--line-d) inset; }
.card.is-ink em, .card.is-ink small { color: var(--mist); }
.card.is-ink small { border-color: var(--line-d); }
.card.is-ink small strong { color: var(--mint); }
.card.is-ink i { background: var(--mint); color: var(--ink); }
.card.is-teal { background: var(--teal); }
.card-logo { width: 46%; aspect-ratio: 1; border-radius: 50%; margin: auto auto 0; background: var(--ink); object-fit: cover; box-shadow: 0 0 0 1px var(--line-d); }
.card-big { margin-top: auto; font-weight: 600; font-size: calc(var(--cw) * .17); letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.card:hover { box-shadow: 0 30px 50px -24px var(--black-a60), 0 0 0 2px var(--mint); }
.st-head { position: absolute; inset: 86px var(--m) auto; display: flex; justify-content: space-between; align-items: flex-start; z-index: 3; pointer-events: none; }
.st-l, .st-r { font-size: clamp(46px, 5.6vw, 150px); }
.st-l > span, .st-r > span { display: block; }
.st-r { text-align: right; }
.st-foot { position: absolute; inset: auto var(--m) var(--m); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 20px; z-index: 3; }
.st-copy { margin: 0; max-width: 330px; font-size: clamp(13px, .9vw, 17px); line-height: 1.45; }
.st-note { margin: 0; justify-self: end; text-align: right; max-width: 260px; font-size: 12.5px; color: var(--mist); }
.st-wall { position: absolute; right: var(--m); top: 50%; width: min(34vw, 600px); transform: translateY(-50%); z-index: 3; opacity: 0; visibility: hidden; }
.st-wall h2 { font-size: clamp(40px, 4.6vw, 120px); }
.st-wall h2 > span { display: block; }
.st-wall p { margin: 3vh 0 3.4vh; max-width: 380px; font-size: clamp(13px, .9vw, 17px); color: var(--mist); }

/* Pick: the format list beside the real builder */
.pick { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(24px, 3.4vw, 72px); align-items: start; padding: 14vh var(--m) 12vh; }
.pick-list { position: sticky; top: 96px; }
.fmts { display: flex; flex-direction: column; align-items: flex-start; }
.fmt { display: inline-flex; align-items: center; border: 0; background: none; padding: 0; margin: 0; font-weight: 600; font-size: clamp(40px, 4.9vw, 132px); letter-spacing: -.045em; line-height: 1.04;
  color: var(--cream-a30); white-space: nowrap; transition: color .35s var(--ease); }
.fmt svg { width: 0; height: .62em; flex: none; transition: width .5s var(--ease), margin .5s var(--ease); }
.fmt:hover { color: var(--cream-a55); }
.fmt.on { color: var(--cream); }
.fmt.on svg { width: .78em; margin-right: .14em; color: var(--mint); }
.fmt:active { transform: translateX(3px); }
.pick-read { margin: 4vh 0 0; max-width: 380px; font-size: 14px; color: var(--mist); }
.pick-clock { margin: 2vh 0 0; font-size: 13px; color: var(--mist); }
.pick-clock span { color: var(--mint); font-weight: 600; font-variant-numeric: tabular-nums; }
.rig { position: relative; background: var(--board); color: var(--cream); border-radius: 28px; padding: clamp(14px, 1.4vw, 26px); box-shadow: 0 0 0 1px var(--line-d) inset, 0 60px 120px -60px var(--black-a70); }
.rig-grid { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr); gap: clamp(12px, 1.2vw, 22px); }
.rig-coin { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: 20px; letter-spacing: -.03em; margin-bottom: 10px; padding: 0; }
.coin-row { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 10px; align-items: start; }
.drop { display: block; position: relative; aspect-ratio: 1 / 1; width: 100%; border: 1px dashed var(--mint-a40); border-radius: 16px; cursor: pointer; overflow: hidden; margin-bottom: 10px; background: var(--deep); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-face { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8px; color: var(--mist); font-size: 11.5px; line-height: 1.25; }
.drop-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--mist); margin-bottom: 4px; }
.field input, .field textarea, .paste input, #splitNote, #whenAt { width: 100%; background: var(--deep); border: 1px solid var(--line-d); border-radius: 12px; padding: 9px 11px; font-size: 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .paste input:focus, #splitNote:focus, #whenAt:focus { border-color: var(--mint); outline: none; box-shadow: 0 0 0 2px var(--mint); }
#whenAt { color-scheme: dark; margin-top: 10px; }
.rig-dials { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-content: start; }
.dial { background: var(--deep); border: 1px solid var(--line-d); border-radius: 16px; padding: 12px 14px; min-width: 0; }
#dialPair { grid-column: 1 / -1; }
.dial-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.dial-head b { font-weight: 600; font-size: clamp(16px, 1.1vw, 21px); letter-spacing: -.03em; white-space: nowrap; }
.dial-head > span { font-size: 13px; color: var(--mint); }
.dial-read { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mist); }
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pt { border: 1px solid var(--line-d); background: transparent; border-radius: 14px; padding: 8px; text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color .25s var(--ease), background .25s var(--ease); }
.pt img { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); }
.pt-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: var(--ink); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 13px; }
.pt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt span { font-size: 11.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.pt:hover { border-color: var(--mint); }
.pt.on { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.pt.on span { color: var(--ink-a70); }
.paste { margin-top: 10px; position: relative; }
.paste-out { display: grid; gap: 6px; margin-top: 6px; }
.paste-out button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line-d); background: transparent; border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.paste-out button[disabled] { opacity: .55; cursor: not-allowed; }
.paste-out img { width: 22px; height: 22px; border-radius: 50%; }
.paste-out small { color: var(--mist); margin-left: auto; }
#buyAmt { width: 90px; text-align: right; background: transparent; border: 0; border-bottom: 1px solid var(--line-d); color: var(--mint); font-size: 15px; font-weight: 600; padding: 2px 4px; }
#buyUnit { font-style: normal; }
input[type="range"] { width: 100%; accent-color: var(--mint); height: 26px; }
.seg { display: inline-flex; border: 1px solid var(--line-d); border-radius: 99px; padding: 3px; }
.seg button { border: 0; background: transparent; border-radius: 99px; padding: 5px 11px; font-size: 12.5px; color: var(--mist); transition: color .25s var(--ease); }
.seg button.on { background: var(--mint); color: var(--ink); }
.rig-sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-d); }
.rig-sum p { margin: 0; font-size: 14px; }
.go { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 99px; background: var(--mint); color: var(--ink); padding: 6px 18px 6px 6px; font-weight: 600; font-size: 15px; transition: transform .35s var(--ease); white-space: nowrap; }
.go img { width: 34px; height: 34px; border-radius: 10px; transition: transform .45s var(--ease); }
.go:hover { transform: scale(1.03); }
.go:hover img { transform: rotate(-8deg); }
.go[disabled] { opacity: .6; cursor: progress; transform: none; }
.go:active { transform: scale(.98); }
.chip:active, .seg button:active, .wallet:active, .ca:active, .cp-acts a:active, .cp-acts button:active, .paste-out button:active { transform: translateY(1px); }
.seg button:hover:not(.on) { color: var(--cream); }
.paste-out button:hover:not([disabled]) { border-color: var(--mint); }
.cp-acts a:hover, .cp-acts button:hover:not([disabled]) { border-color: var(--mint); }
.cp-acts button[disabled] { opacity: .55; cursor: not-allowed; }
.status { margin: 10px 0 0; font-size: 13px; color: var(--mint); min-height: 1.4em; }
.status.bad { color: var(--coral); }
.status a { color: var(--mint); }

/* Dials: a big list, the active one tells you what it changes */
.dials { position: relative; padding: 14vh var(--m) 16vh; border-top: 1px solid var(--line-d); }
.dials-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.dials-title { font-size: clamp(36px, 3.6vw, 92px); }
.dials-title > span { display: block; }
.dials-sub { margin: 0; max-width: 300px; font-size: 13.5px; color: var(--mist); }
.rows { list-style: none; margin: 8vh 0 0; padding: 0; position: relative; min-height: 34vw; }
.row { width: 44%; }
.row b { display: inline-flex; align-items: center; font-weight: 600; font-size: clamp(40px, 5.2vw, 140px); letter-spacing: -.045em; line-height: 1.04; color: var(--cream-a30); cursor: pointer; transition: color .35s var(--ease); white-space: nowrap; }
.row b svg { width: 0; height: .62em; flex: none; color: var(--mint); transition: width .5s var(--ease), margin .5s var(--ease); }
.row b:hover { color: var(--cream-a55); }
.row.on b { color: var(--cream); }
.row.on b svg { width: .78em; margin-right: .14em; }
.row-d { position: absolute; left: 50%; right: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility .5s; }
.row.on .row-d { opacity: 1; visibility: visible; transform: none; }
.row-d p { margin: 0; font-size: clamp(18px, 1.5vw, 32px); line-height: 1.3; letter-spacing: -.02em; max-width: 26ch; }
.row-d .row-not { margin-top: 3vh; font-size: 14px; letter-spacing: 0; color: var(--mist); max-width: 46ch; }
.row-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 3vh; background: var(--mint-a14); color: var(--mint); border-radius: 99px; padding: 7px 13px; font-size: 13px; font-weight: 600; }
.row-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.build-notes { display: flex; justify-content: space-between; gap: 24px; margin-top: 10vh; padding-top: 14px; border-top: 1px solid var(--line-d); }
.build-notes p { max-width: 400px; margin: 0; font-size: 13px; color: var(--mist); }

/* Directory */
.dir { position: relative; padding: 14vh var(--m) 12vh; border-top: 1px solid var(--line-d); }
.dir-head { display: grid; grid-template-columns: minmax(max-content, 1fr) auto; gap: 30px; align-items: end; margin-bottom: 6vh; }
.dir-title { font-size: clamp(46px, 7vw, 190px); white-space: nowrap; }
.dir-side { max-width: 360px; }
.dir-side p { margin: 0 0 14px; font-size: 13px; color: var(--mist); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-d); background: transparent; border-radius: 99px; padding: 7px 13px; font-size: 13px; font-weight: 500; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.chip:hover { border-color: var(--mint); }
.chip.on { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.coins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.coin { background: var(--board); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-d) inset; transition: transform .45s var(--ease), box-shadow .3s var(--ease); }
.coin:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 1px var(--mint) inset; }
.coin a { display: block; text-decoration: none; }
.coin-img { aspect-ratio: 1 / 1; background: var(--deep); position: relative; }
.coin-img img { width: 100%; height: 100%; object-fit: cover; }
.coin-body { padding: 14px 16px 16px; }
.coin-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.coin-top b { font-weight: 600; font-size: 22px; letter-spacing: -.03em; }
.coin-top span { font-size: 12px; color: var(--mint); }
.coin-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.coin-meta strong { color: var(--cream); font-weight: 500; }
.empty { list-style: none; color: var(--mist); font-size: 14px; padding: 30px 0; max-width: 520px; }

/* Leaderboard */
.board { position: relative; padding: 14vh var(--m) 12vh; border-top: 1px solid var(--line-d); }
.board-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: end; }
.board-title { font-size: clamp(36px, 3.6vw, 92px); }
.board-title > span { display: block; }
.board-copy { margin: 0; max-width: 420px; justify-self: end; color: var(--mist); font-size: 13.5px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8vh 0 0; }
.stats > div { border-left: 1px solid var(--line-d); padding: 6px 18px 30px; }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats dt { font-size: 13px; color: var(--mist); }
.stats dd { margin: 6px 0 0; font-size: clamp(34px, 4vw, 100px); font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sheet { margin-top: 4vh; }
.lead { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.lead th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--mist); padding: 0 10px 12px; border-bottom: 1px solid var(--line-d); }
.lead td { padding: 16px 10px; border-bottom: 1px solid var(--line-d); vertical-align: middle; }
.lead td:first-child { font-weight: 600; font-size: 26px; letter-spacing: -.04em; }
.lead a { text-decoration: none; border-bottom: 1px solid var(--line-d); }
.lead .best { display: inline-flex; align-items: center; gap: 8px; }
.lead .best img { width: 24px; height: 24px; border-radius: 6px; }
.lead .empty { padding: 30px 10px; }

/* Upcoming */
.soon { position: relative; padding: 14vh var(--m) 14vh; border-top: 1px solid var(--line-d); }
.soon-title { font-size: clamp(56px, 10vw, 280px); white-space: nowrap; letter-spacing: -.055em; }
.drop-word .dw { display: inline-block; white-space: nowrap; }
.drop-word .ch { display: inline-block; will-change: transform; }
.soon-copy { max-width: 400px; margin: 2vh 0 6vh; font-size: 14px; color: var(--mist); }
.clocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.clocks .empty { grid-column: 1 / -1; margin: 0; }
.clk { background: var(--mint); color: var(--ink); border-radius: 20px; padding: 16px; text-decoration: none; display: flex; flex-direction: column; gap: 14px; transition: transform .45s var(--ease); }
.clk:hover { transform: rotate(-1.5deg) translateY(-4px); }
.clk-top { display: flex; align-items: center; gap: 10px; }
.clk-top img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--deep); }
.clk b { font-weight: 600; font-size: 22px; letter-spacing: -.03em; }
.clk-t { font-size: 34px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.clk small { color: var(--ink-a70); font-size: 12px; }
.mine { max-width: 760px; margin: 8vh 0 0; }
.mine h3 { font-weight: 600; font-size: 26px; letter-spacing: -.03em; margin: 0 0 12px; }
.mine ul { list-style: none; margin: 0; padding: 0; }
.mine li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-d); font-size: 14px; }
.mine li a { font-weight: 600; }

/* Last call */
.last { position: relative; padding: 16vh var(--m) 12vh; text-align: center; overflow: hidden; border-top: 1px solid var(--line-d); }
.last-tile { position: relative; width: 96px; margin: 0 auto; }
.last-tile img { border-radius: 24px; box-shadow: 0 0 0 1px var(--line-d), 0 30px 80px -10px var(--mint-a35); }
.last-line { position: relative; margin: 22px 0 8vh; font-weight: 600; font-size: 15px; }
.last-form { position: relative; max-width: 1400px; margin: 0 auto; }
.last-form input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--cream-a30); text-align: center; font-family: var(--ui); font-weight: 600; letter-spacing: -.05em;
  font-size: clamp(54px, 12vw, 300px); line-height: 1.05; padding: 0 0 .06em; color: var(--mint); }
.last-form input::placeholder { color: var(--cream-a30); }
.last-form input:focus { outline: none; border-color: var(--mint); }
.last-form p { margin: 14px 0 0; font-size: 12.5px; color: var(--mist); }

/* Footer and dock */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px var(--m); border-top: 1px solid var(--line-d); font-size: 13px; }
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.foot-brand img { border-radius: 6px; }
.foot p { margin: 0; color: var(--mist); text-align: center; }
.foot nav { display: flex; justify-content: flex-end; gap: 18px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--mint); }
.dock { position: fixed; left: 50%; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 5px; border-radius: 99px;
  background: var(--deep-a82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-d); text-decoration: none; font-weight: 600; font-size: 13px;
  transform: translate(-50%, 140%); transition: transform .6s var(--ease); }
.dock.show { transform: translate(-50%, 0); }
.dock img { border-radius: 9px; transition: transform .45s var(--ease); }
.dock:hover img { transform: rotate(-10deg); }
.dock span { white-space: nowrap; background: var(--mint); color: var(--ink); border-radius: 99px; padding: 7px 14px; }


/* Coin page */
.page { min-height: 100vh; padding: 110px var(--m) 80px; }
.cp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); align-items: end; }
.cp-img { width: clamp(120px, 14vw, 240px); aspect-ratio: 1; border-radius: 24%; overflow: hidden; background: var(--deep); border: 1px solid var(--line-d); }
.cp-img img { width: 100%; height: 100%; object-fit: cover; }
.cp-title { font-size: clamp(56px, 10vw, 240px); white-space: nowrap; }
.cp-name { margin: 8px 0 0; color: var(--mist); font-size: 15px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 7vh; }
.cp-card { background: var(--deep); border: 1px solid var(--line-d); border-radius: 24px; padding: clamp(16px, 2vw, 28px); }
.cp-card.mint { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.cp-card h2 { font-size: clamp(28px, 2.6vw, 48px); margin-bottom: 18px; }
.cp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.cp-stats dt { font-size: 12.5px; color: var(--mist); }
.cp-stats dd { margin: 4px 0 0; font-size: clamp(22px, 2vw, 34px); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bar { height: 10px; border-radius: 99px; background: var(--mint-a14); overflow: hidden; margin-top: 22px; }
.bar i { display: block; height: 100%; background: var(--mint); border-radius: 99px; width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-l); font-size: 14px; }
.cp-list li span:first-child { color: var(--ink-a65); }
.cp-note { font-family: var(--disp); font-weight: 600; letter-spacing: -.03em; font-size: clamp(22px, 2vw, 34px); line-height: 1.1; margin: 0 0 10px; }
.cp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cp-acts a, .cp-acts button { border-radius: 99px; padding: 10px 16px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid var(--line-d); background: transparent; }
.cp-acts .solid { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.cp-count { font-family: var(--disp); font-weight: 600; letter-spacing: -.05em; font-size: clamp(64px, 13vw, 300px); line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; margin: 4vh 0 0; white-space: nowrap; }

img.card-logo:not([src]) { visibility: hidden; }
.stage.is-still { height: auto; }
.stage.is-still .stage-pin { position: relative; }

@media (max-width: 1100px) {
  .mast { grid-template-columns: auto minmax(0, 1fr); }
  .mast-line { display: none; }
  .pairnote { display: none; }
  .pick { grid-template-columns: minmax(0, 1fr); padding-top: 10vh; }
  .pick-list { position: static; }
  .fmts { flex-direction: row; flex-wrap: wrap; gap: 0 .5em; }
  .fmt { font-size: clamp(30px, 6vw, 64px); }
  .fmt.on svg { width: .6em; }
  .st-wall { width: min(46vw, 460px); }
  .cp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .mast { padding: 10px 12px; gap: 8px; }
  .mast-brand span, .ico, .ca { display: none; }
  .buy, .wallet { padding: 7px 11px; font-size: 12px; }
  .stage { height: 260vh; --cw: 86px; }
  .st-head { top: 70px; flex-direction: column; gap: 0; }
  .st-l, .st-r { font-size: 15vw; }
  .st-head > .line-mask:last-child, .st-head > .st-r { align-self: flex-end; }
  .st-foot { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }
  .st-note { display: none; }
  .st-wall { left: var(--m); right: var(--m); top: auto; bottom: 26px; width: auto; transform: none; }
  .st-wall h2 { font-size: 11vw; }
  .st-wall p { margin: 12px 0 14px; }
  .pick { padding: 9vh 10px 8vh; }
  .pick-list { padding: 0 6px; }
  .fmt { font-size: 9vw; }
  .rig { border-radius: 22px; padding: 10px; }
  .rig-grid { grid-template-columns: minmax(0, 1fr); }
  .rig-dials { grid-template-columns: minmax(0, 1fr); }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rig-sum { flex-direction: column; align-items: stretch; }
  .go { justify-content: center; }
  .dials-head, .build-notes, .dir-head, .board-head { display: block; }
  .dials-sub, .board-copy { margin-top: 14px; }
  .build-notes p + p, .dir-side { margin-top: 14px; }
  .rows { min-height: 0; }
  .row { width: auto; margin-bottom: 4vh; }
  .row b { font-size: 11vw; color: var(--cream); }
  .row b svg { display: none; }
  .row-d, .row.on .row-d { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 8px; }
  .row-d p { font-size: 17px; }
  .dir-title, .soon-title { white-space: normal; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .lead th:nth-child(5), .lead td:nth-child(5), .lead th:nth-child(4), .lead td:nth-child(4) { display: none; }
  .foot { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .foot-brand, .foot nav { justify-content: center; }
  .cp-head { grid-template-columns: minmax(0, 1fr); }
  .cp-title { white-space: normal; font-size: 18vw; }
  .cp-count { font-size: 17vw; }
}
@media (min-width: 1700px) {
  .rig { zoom: 1.1; }
}
@media (min-width: 2200px) {
  .rig { zoom: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.lead td.empty { font-family: var(--ui); font-size: 15px; }
.card .pt-ic.card-logo { display: grid; width: 46%; height: auto; font-size: calc(var(--cw) * .2); }
.coins .empty, .clocks .empty { grid-column: 1 / -1; max-width: none; margin: 0; padding: clamp(28px, 4vw, 70px); border: 1px dashed var(--mint-a40); border-radius: 20px; font-size: clamp(15px, 1.2vw, 22px); color: var(--cream); }