/* Garage: one token sheet, then components. Near-black tinted warm, bone ink, hairlines, ONE accent (safety orange) used
   only for what matters (the launch, the bag, live). Geist for words, Geist Mono for every number, address, time and tag. */
:root {
  --bg: #0b0a09; --s1: #100f0d; --s2: #161512; --s3: #1d1c18; --s4: #26241f;
  --ink: #ece9df; --ink2: #b3afa3; --ink3: #7a776d; --ink4: #55534c;
  --line: rgba(236, 233, 223, .07); --line2: rgba(236, 233, 223, .12); --line3: rgba(236, 233, 223, .22);
  --acc: #ff6a1f; --acc2: #ff8a4c; --acc-ink: #170b04; --acc-wash: rgba(255, 106, 31, .10);
  --up: #3fd98a; --dn: #ff5d5d; --warn: #f2c14e;
  --r: 8px; --r-s: 6px; --r-xs: 4px;
  --f: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --w: 1320px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 84px; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--f); font-feature-settings: 'ss01', 'cv11'; min-height: 100vh; overflow-x: hidden; }
::selection { background: var(--acc); color: var(--acc-ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-xs); }
.mono, .num { font-family: var(--m); font-variant-numeric: tabular-nums; }
.wrap { width: min(var(--w), calc(100% - 48px)); margin: 0 auto; }
* { scrollbar-width: thin; scrollbar-color: var(--s4) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 8px; border: 2px solid var(--s2); } *::-webkit-scrollbar-track { background: transparent; }

/* the page's one atmosphere layer: a faint dot field + a warm wash at the top */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(1200px 520px at 70% -120px, rgba(255, 106, 31, .07), transparent 70%),
              radial-gradient(rgba(236, 233, 223, .045) 1px, transparent 1.2px) 0 0 / 22px 22px; }

/* ── nav */
.nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(11, 10, 9, .72); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--m); letter-spacing: -.02em; }
.brand svg { width: 26px; height: 26px; }
.brand .tag { font: 500 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--line2); padding: 4px 6px; border-radius: var(--r-xs); }
.nav .links { display: flex; gap: 22px; font-size: 14px; color: var(--ink2); }
.nav .links a { transition: color .15s; } .nav .links a:hover, .nav .links a.on { color: var(--ink); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mode { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2);
  padding: 7px 10px; border: 1px solid var(--line2); border-radius: 99px; white-space: nowrap; }
.mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px rgba(242, 193, 78, .14); }
.mode.live i { background: var(--up); box-shadow: 0 0 0 3px rgba(63, 217, 138, .14); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(63, 217, 138, 0); } }
.me { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border: 1px solid var(--line2); border-radius: 99px; font-size: 13px; transition: border-color .15s; }
.me:hover { border-color: var(--line3); }
.me .bal { font-family: var(--m); color: var(--ink2); }
.me img { width: 28px; height: 28px; border-radius: 50%; display: block; }

/* ── buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: var(--r-s); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; letter-spacing: -.01em; cursor: pointer; transition: transform .12s var(--ease), background .15s, border-color .15s, color .15s; white-space: nowrap; user-select: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.bone { background: var(--ink); color: var(--bg); } .btn.bone:hover { background: #fff; }
.btn.acc { background: var(--acc); color: var(--acc-ink); } .btn.acc:hover { background: var(--acc2); }
.btn.ghost { border-color: var(--line2); color: var(--ink); background: transparent; } .btn.ghost:hover { border-color: var(--line3); background: rgba(236, 233, 223, .03); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn.xl { height: 58px; padding: 0 26px; font-size: 17px; border-radius: var(--r); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.link { color: var(--ink2); border-bottom: 1px solid var(--line3); transition: color .15s, border-color .15s; } .link:hover { color: var(--ink); border-color: var(--ink2); }

/* ── type */
.eyebrow { font: 500 11px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: 10px; }
.eyebrow b { color: var(--acc); font-weight: 500; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; font-weight: 600; }
.h1 { font-size: clamp(46px, 6.2vw, 92px); line-height: .96; letter-spacing: -.05em; }
.h1 .dim { color: var(--ink3); }
.h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink2); max-width: 54ch; }
.muted { color: var(--ink3); } .ink2 { color: var(--ink2); }
.up { color: var(--up); } .dn { color: var(--dn); } .acc { color: var(--acc); }

/* ── panels */
.panel { background: linear-gradient(180deg, rgba(236, 233, 223, .025), rgba(236, 233, 223, 0) 40%), var(--s1); border: 1px solid var(--line2); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(236, 233, 223, .04), 0 30px 80px -40px rgba(0, 0, 0, .8); min-width: 0; }
.panel > header { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.panel > header h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.panel > header .count { font: 500 11px/1 var(--m); color: var(--ink3); padding: 4px 6px; border: 1px solid var(--line2); border-radius: var(--r-xs); }
.panel > header .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.label { font: 500 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font: 500 11px/1 var(--m); color: var(--ink2);
  border: 1px solid var(--line2); white-space: nowrap; }
.chip.acc { color: var(--acc); border-color: rgba(255, 106, 31, .35); background: var(--acc-wash); }
.chip.up { color: var(--up); border-color: rgba(63, 217, 138, .3); background: rgba(63, 217, 138, .07); }
.chip.warn { color: var(--warn); border-color: rgba(242, 193, 78, .3); background: rgba(242, 193, 78, .07); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* ── form */
.field { display: grid; gap: 7px; min-width: 0; }
.field > span { font-size: 12.5px; color: var(--ink2); display: flex; align-items: baseline; gap: 8px; }
.field > span em { font-style: normal; color: var(--ink4); font-family: var(--m); font-size: 11px; margin-left: auto; }
.in { width: 100%; height: 42px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-s); outline: none; transition: border-color .15s, background .15s; min-width: 0; }
.in:hover { border-color: var(--line3); } .in:focus { border-color: var(--acc); background: #0e0d0b; }
textarea.in { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.in.mono { font-family: var(--m); }
.affix { position: relative; } .affix > b { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink3); font: 500 15px var(--m); pointer-events: none; }
.affix > .in { padding-left: 26px; } .affix > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 12px var(--m); color: var(--ink3); font-style: normal; pointer-events: none; }

/* ── the fee split line (launcher, token page) */
.feeline { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; color: var(--ink2); }
.feeline .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden; display: flex; min-width: 60px; }
.feeline .bar i { background: var(--up); } .feeline .bar i + i { background: var(--ink4); }

/* ── toast */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: var(--r-s); background: var(--s3); border: 1px solid var(--line3); font-size: 14px; max-width: min(560px, 92vw);
  box-shadow: 0 20px 60px -20px #000; animation: rise .35s var(--ease); }
.toast.err { border-color: rgba(255, 93, 93, .45); } .toast.ok { border-color: rgba(63, 217, 138, .4); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ── reveal */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.rv.in-view { opacity: 1; transform: none; }

/* ── footer */
.foot { border-top: 1px solid var(--line); margin-top: 96px; }
.foot .wrap { padding: 36px 0 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; font-size: 13px; color: var(--ink3); }
.foot .brand { color: var(--ink); margin-bottom: 12px; }
.foot h4 { margin: 0 0 10px; font: 500 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); }
.foot a { display: block; color: var(--ink2); padding: 3px 0; } .foot a:hover { color: var(--ink); }

/* ── skeleton */
.sk { background: linear-gradient(90deg, var(--s2), var(--s3), var(--s2)); background-size: 200% 100%; animation: sk 1.4s infinite linear; border-radius: var(--r-xs); color: transparent !important; }
@keyframes sk { to { background-position: -200% 0; } }

@media (max-width: 860px) {
  .nav .links { display: none; }
  .nav .wrap { gap: 12px; }
  .foot .wrap { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 32px); }
}
@media (max-width: 520px) {
  .brand .tag, .nav .long, .me .bal { display: none; }
  .mode { padding: 7px; } .mode .mt { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } }