

:root {
  --card: var(--panel);
  --card-hi: var(--slab);
  --line: var(--hair);
  --line-hi: #3a3f47;
  --text: var(--paper);
  --muted: var(--mute);
  --bad: #ff8a7a;
  --r-card: var(--radius-card);
  --r-img: 14px;
  --display: var(--font-display);
  --ui: var(--font-body);
  --mono: var(--font-data);
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--desk); color: var(--text); font: 16px/1.5 var(--ui); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; background: var(--desk); }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--text); color: var(--desk); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

.nav { display: flex; align-items: center; gap: 32px; height: 76px; position: relative; }
.wm { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.wm img { width: 30px; height: 30px; }
.ice { color: var(--ice); }
.nav nav { display: flex; gap: 24px; margin-right: auto; }
.nav nav a { color: var(--muted); font-size: 15px; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--text); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; font: 700 15px/1 var(--ui); border: 1px solid var(--text); border-radius: 0; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--text); color: var(--desk); }
.btn-solid:hover { background: #ffffff; }
.btn-ghost { color: var(--text); border-color: var(--line-hi); }
.btn-ghost:hover { border-color: var(--text); }
.btn-primary { background: var(--text); color: var(--desk); }
.btn-small, .btn-nav { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-nav.is-on { background: transparent; color: var(--text); border-color: var(--line-hi); font-family: var(--mono); font-weight: 400; }

.wmenu { position: absolute; right: 0; top: 64px; z-index: 20; min-width: 200px; background: var(--card); border: 1px solid var(--line-hi); border-radius: 14px; padding: 6px; display: grid; }
.wmenu button { text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.wmenu button:hover { background: var(--card-hi); }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 64px 0 104px; }
h1 { font: 800 clamp(42px, 5.8vw, 84px)/.96 var(--display); font-stretch: 112%; letter-spacing: -.035em; }
.lede { margin-top: 24px; font-size: 20px; line-height: 1.4; color: var(--muted); max-width: 40ch; }
.ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.split { display: grid; grid-template-columns: 188px 88px 1fr; align-items: center; row-gap: 14px; }
.split .eyebrow { grid-column: 1 / -1; }
.card { background: var(--card); border: var(--border) solid var(--line); border-radius: var(--r-card); }
.root { padding: 14px; display: grid; gap: 14px; }
.meme-img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-img); object-fit: cover; background: #000; }
.slot { aspect-ratio: 1; border-radius: var(--r-img); border: 1px dashed var(--line-hi); display: grid; place-items: center; text-align: center; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tk { font: 800 24px/1 var(--display); font-stretch: 112%; letter-spacing: -.01em; }
.sub { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.wires { display: block; width: 100%; height: 300px; }
.wires path { fill: none; stroke: var(--ice); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mkts { list-style: none; display: grid; gap: 18px; }
.mk { height: 88px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 0 20px 6px; }

.chip { --c: #2b2f36; --d: #16191d; width: 44px; height: 44px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font: 800 13px/1 var(--display); font-stretch: 112%; color: #fff; box-shadow: 0 4px 0 var(--d), 0 8px 0 var(--c), 0 9px 0 var(--d); }
.chip.q1 { --c: var(--coin-openai-top); --d: var(--coin-openai-side); }
.chip.q2 { --c: var(--coin-anthropic-top); --d: var(--coin-anthropic-side); }
.chip.q3 { --c: var(--coin-figureai-top); --d: var(--coin-figureai-side); }
.pair { font: 800 14px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pair i { font-style: normal; color: var(--ice); margin: 0 8px; }

.markets { padding: 0 0 96px; scroll-margin-top: 16px; }
.list-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
h2 { font: 800 36px/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.row { display: grid; grid-template-columns: 1.3fr 1.5fr .7fr auto; align-items: center; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
a.row:hover .btn-row { border-color: var(--text); }
.who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who > span { min-width: 0; }
.who b { display: block; font: 800 18px/1.15 var(--display); font-stretch: 112%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym { display: block; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.thumb { width: 48px; height: 48px; flex: none; border-radius: var(--r-img); object-fit: cover; background: var(--card); }
.thumb.ph { display: grid; place-items: center; border: 1px dashed var(--line-hi); font: 800 18px/1 var(--display); font-stretch: 112%; color: var(--muted); }
.mcol { display: flex; align-items: center; gap: 20px; min-width: 0; }
.stack { display: flex; flex: none; padding-bottom: 3px; }
.stack .chip { width: 28px; height: 28px; font-size: 11px; margin-right: -6px; box-shadow: 0 3px 0 var(--d); outline: 2px solid var(--desk); object-fit: cover; }
.mtext { min-width: 0; }
.mtext b { display: block; font: 500 13px/1.3 var(--mono); }
.pairs { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row time { font: 500 13px/1 var(--mono); color: var(--muted); }
.btn-row { height: 40px; min-width: 96px; font-size: 14px; }
.row.sk > span { height: 18px; border-radius: 6px; background: var(--card); }
.row.sk > span:first-child { height: 48px; }
.empty { padding: 40px 0; color: var(--muted); display: grid; gap: 16px; justify-items: start; }

.stub { padding: 72px 0 120px; max-width: 640px; }
.stub h1 { font-size: clamp(40px, 5vw, 64px); }
.stub p { margin-top: 20px; color: var(--muted); font-size: 18px; }
.flag { display: inline-block; margin-bottom: 20px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--desk); background: var(--ice); padding: 6px 8px; }

.foot { border-top: 1px solid var(--line); padding: 24px 0 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 12px/1.6 var(--mono); color: var(--muted); }

.dlg { margin: auto; width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--text); border: 1px solid var(--line-hi); border-radius: var(--r-card); padding: 20px; }
.dlg::backdrop { background: rgba(5, 6, 8, .78); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.dlg-head h2 { font-size: 24px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-hi); }
.stack-16 { display: grid; gap: 16px; }
.dlg-sub, .hint { color: var(--muted); font-size: 14px; }
.wlist { display: grid; gap: 8px; }
.wopt { display: grid; grid-template-columns: 28px 1fr auto 16px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-align: left; font-weight: 700; }
.wopt:hover { border-color: var(--line-hi); background: var(--card-hi); }
.wopt img { border-radius: 6px; }
.wico { width: 28px; height: 28px; border-radius: 6px; background: var(--card-hi); display: grid; place-items: center; font: 800 14px/1 var(--display); font-stretch: 112%; }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tag.on { color: var(--ice); }
.wait-box { display: grid; justify-items: center; gap: 10px; padding: 18px 0; text-align: center; }
.wait-title { font: 800 18px/1.2 var(--display); font-stretch: 112%; }
.callout { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line-hi); border-radius: 14px; }
.callout.bad { border-color: var(--bad); }
.callout.bad .ico { color: var(--bad); margin-top: 3px; }
.callout p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .nav { height: 64px; gap: 16px; }
  .nav nav { display: none; }
  .wm { margin-right: auto; font-size: 20px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 72px; }
  h1 { font-size: 42px; }
  .lede { font-size: 18px; }
  .ctas .btn { flex: 1; }
  .split { grid-template-columns: 1fr; }
  .root { grid-template-columns: 72px 1fr; align-items: center; }
  .wires { display: none; }
  .mkts { margin-left: 36px; padding-top: 22px; margin-top: -14px; border-left: 1.5px solid var(--ice); padding-left: 20px; gap: 14px; }
  .mk { position: relative; height: 76px; padding: 0 14px 6px; gap: 12px; }
  .mk::before { content: ""; position: absolute; left: -21px; top: 50%; width: 20px; border-top: 1.5px solid var(--ice); }
  .chip { width: 38px; height: 38px; font-size: 12px; }
  .pair { font-size: 12px; }
  .pair i { margin: 0 4px; }
  h2 { font-size: 28px; }
  .row { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .row .who { grid-column: 1; }
  .row .btn-row { grid-column: 2; grid-row: 1; }
  .row .mcol { grid-row: 2; grid-column: 1 / -1; }
  .row time { grid-row: 3; }
  .row.sk > span:nth-child(n+3) { display: none; }
  .row.sk > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.launch { padding: 48px 0 96px; }
.launch-head h1 { font-size: clamp(40px, 5vw, 72px); }
.launch-head .lede { margin-top: 16px; }
.notice { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--line-hi); border-radius: 14px; color: var(--text); max-width: 760px; }
.launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin-top: 40px; }
.lform { display: grid; gap: 18px; max-width: 640px; }
.fld { display: grid; gap: 8px; }
.fld > span { font: 700 13px/1 var(--ui); }
.fld em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; }
.fld input, .fld textarea, .fld select { width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font: 400 16px/1.3 var(--ui); }
.fld textarea { resize: vertical; }
.fld input:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible { outline: 2px solid var(--ice); outline-offset: 1px; border-color: transparent; }
.fld input[type="file"] { padding: 10px; font-size: 14px; color: var(--muted); }
.fld [aria-invalid="true"] { border-color: var(--bad); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ferr { color: var(--bad); font-size: 14px; }
.quote { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.qline { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.qline span { color: var(--muted); }
.qline b { font: 500 14px/1.3 var(--mono); }
.qnote { font-size: 13px; color: var(--muted); }
.lactions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.status { min-height: 1.5em; font: 500 13px/1.5 var(--mono); color: var(--ice); }
.preview { position: sticky; top: 24px; padding: 14px; display: grid; gap: 12px; }
.pv-img { aspect-ratio: 1; border-radius: var(--r-img); border: 1px dashed var(--line-hi); display: grid; place-items: center; overflow: hidden; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-img img { width: 100%; height: 100%; object-fit: cover; }
.pv-name { font: 800 24px/1.1 var(--display); font-stretch: 112%; overflow-wrap: anywhere; }
.done { margin-top: 40px; padding: 24px; display: grid; gap: 14px; max-width: 640px; }
.mono { font-family: var(--mono); }

@media (max-width: 720px) {
  .launch { padding: 28px 0 72px; }
  .launch-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .preview { position: static; order: -1; grid-template-columns: 72px 1fr; align-items: center; }
  .preview .pv-img { grid-row: span 2; }
  .pv-name { font-size: 20px; }
  .fld-row { grid-template-columns: 1fr; }
  .lactions .btn { flex: 1; }
}

.stage-hero { padding: 56px 0 88px; text-align: center; }
.big { font: 800 clamp(44px, 7.6vw, 118px)/.9 var(--display); font-stretch: 112%; letter-spacing: -.045em; }
.cascade-wrap { position: relative; margin: 36px auto 0; max-width: 1180px; }
.cascade-wrap .eyebrow { position: absolute; left: 0; top: 0; }
.cascade { position: relative; width: 100%; overflow: visible; }
.cascade-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pcard { position: absolute; left: 0; top: 0; width: 480px; height: 320px; transform-origin: 50% 50%; }
.pcard .slab { position: absolute; left: 0; right: 0; top: 12px; bottom: -12px; border-radius: var(--radius-card); background: var(--slab); border: var(--border) solid var(--hair); }
.pcard .face { position: absolute; inset: 0; border-radius: var(--radius-card); background: var(--panel); border: var(--border) solid var(--hair); }
.pcard svg { position: absolute; left: 0; top: 0; overflow: visible; }
.plabel { position: absolute; left: 34px; top: 262px; font-family: var(--mono); font-size: 27px; letter-spacing: .02em; white-space: pre; text-align: left; }
.plabel b { color: var(--paper); font-weight: 800; }
.plabel i { color: var(--ice); font-style: normal; font-weight: 800; }
.plabel span { color: var(--mute); font-weight: 500; }
.tagline { margin: 40px auto 0; font: 800 clamp(22px, 2.8vw, 40px)/1.1 var(--display); font-stretch: 112%; letter-spacing: -.03em; }
.ctas.center { justify-content: center; margin-top: 32px; }

@media (max-width: 720px) {
  .stage-hero { padding: 28px 0 64px; }
  .big { font-size: 44px; }
  .cascade-wrap { margin-top: 20px; }
  .tagline { font-size: 24px; margin-top: 24px; max-width: 16ch; }
  .ctas.center { margin-top: 24px; }
}

.xlink { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line-hi); color: var(--text); font: 500 13px/1 var(--mono); }
.xlink:hover { border-color: var(--text); }
.foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .xlink { width: 40px; padding: 0; justify-content: center; }
  .xlink span { display: none; }
}
@media (max-width: 720px) {
  .nav { gap: 10px; }
  .wm { font-size: 17px; gap: 8px; }
  .wm img { width: 26px; height: 26px; }
  .xlink { flex: none; }
  .btn-nav { flex: none; padding: 0 14px; }
}

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
  radial-gradient(60vmax 45vmax at 0% 100%, rgba(169, 220, 251, .10), transparent 70%),
  radial-gradient(50vmax 40vmax at 100% 0%, rgba(47, 93, 255, .10), transparent 70%), var(--desk); }
.bg::before { content: ""; position: absolute; inset: -24px; background-image: radial-gradient(circle, var(--dot) 1.4px, transparent 1.6px); background-size: 24px 24px; animation: grid-drift 6s linear infinite; }
@keyframes grid-drift { to { transform: translate3d(24px, 24px, 0); } }
body { background: transparent; }
html { background: var(--desk); }
.fl { position: absolute; width: clamp(110px, 14vw, 220px); height: auto; opacity: .22; animation: float 9s ease-in-out infinite alternate; will-change: transform; }
.fl.round { border-radius: 50%; border: 5px solid #2a2e35; width: clamp(70px, 8vw, 130px); opacity: .28; }
.f1 { left: -3vw; top: 14vh; animation-duration: 9s; --r: -8deg; }
.f2 { right: -2vw; top: 8vh; animation-duration: 11s; animation-delay: -3s; --r: 7deg; }
.f3 { left: 6vw; bottom: 6vh; animation-duration: 10s; animation-delay: -6s; --r: 5deg; }
.f4 { right: 9vw; bottom: 16vh; animation-duration: 8s; animation-delay: -2s; --r: -6deg; }
.f5 { left: 40vw; top: -6vh; animation-duration: 12s; animation-delay: -5s; --r: -4deg; opacity: .14; }
.f6 { right: 30vw; bottom: -8vh; animation-duration: 13s; animation-delay: -8s; --r: 6deg; opacity: .14; }
.f7 { left: 18vw; top: 46vh; animation-duration: 10s; animation-delay: -4s; --r: 8deg; opacity: .18; }
@keyframes float {
  from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  to { transform: translate3d(0, -28px, 0) rotate(calc(var(--r, 0deg) * -1)); }
}
@media (max-width: 720px) {
  .f5, .f6, .f7 { display: none; }
  .fl { width: 110px; opacity: .18; }
  .fl.round { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg::before, .fl { animation: none; }
}

.row.official { position: relative; margin: 10px 0; padding: 18px 16px; border: 1.5px solid var(--ice); border-radius: 18px; background: #0d1319; }
.badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 7px 3px 5px; border-radius: 999px; background: var(--ice); color: var(--desk); font: 800 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.badge img { width: 12px; height: 12px; filter: brightness(0); }
@media (max-width: 720px) { .row.official { padding: 14px 12px; } }
