/* ============================================================
   Fwdly. White ground, one purple accent, Archivo 800 uppercase
   over DM Sans. Same family as the pads: the page is light and
   the anchors are dark. The accent is dark enough to carry white
   text, so it is a ground under white type, never under ink.

   Motion rules for this file:
   - opacity and transform only, nothing that triggers layout
   - every animation is finite, none is driven by scroll position
   - the resting state of every element is its visible state, so
     nothing here can strand content invisible
   ============================================================ */

:root{
  --bg:     #ffffff;
  --bg-2:   #f4f0fc;
  --card:   #ffffff;
  --ink:    #14092b;
  --dark:   #1a0b3a;
  --acc:    #6925e2;
  --acc-2:  #dcc9f7;
  --on-acc: #ffffff;

  --muted: rgba(20,9,43,.64);
  --dim:   rgba(20,9,43,.42);
  --line:  rgba(20,9,43,.11);
  --line-2:rgba(20,9,43,.20);

  --on-dark:      #ffffff;
  --on-dark-mute: rgba(255,255,255,.66);
  --on-dark-dim:  rgba(255,255,255,.40);
  --on-dark-line: rgba(255,255,255,.14);

  --display: Archivo, "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card: 32px;
  --r-sm: 18px;
  --pill: 800px;
  --pad: 2rem;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.4,0,.2,1);
  --shadow: 0 1px 2px rgba(20,9,43,.04), 0 12px 32px -12px rgba(20,9,43,.14);
  --shadow-lift: 0 2px 4px rgba(20,9,43,.05), 0 26px 48px -18px rgba(20,9,43,.24);
  color-scheme: light;
}
@media (min-width:900px){ :root{ --pad:4rem; } }
@media (min-width:1440px){ :root{ --pad:5.6rem; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ font-size:62.5%; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:1.7rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--acc-2); color:var(--ink); }
*{ scrollbar-width:none; } *::-webkit-scrollbar{ display:none; width:0; height:0; }

.wrap{ max-width:150rem; margin-inline:auto; padding-inline:var(--pad); }

/* ---------- type ---------- */
.display{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.015em; line-height:.93;
}
.t-hero{ font-size:clamp(3.8rem,6vw,7.6rem); }
.t-1{ font-size:clamp(3.2rem,5.2vw,6.4rem); }
.t-2{ font-size:clamp(2.4rem,2.8vw,3.4rem); }
.t-3{ font-size:clamp(2rem,2vw,2.6rem); }
.eyebrow{
  font-family:var(--mono); font-size:1.25rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--dim);
}
.lead{ font-size:clamp(1.7rem,1.3vw,2rem); line-height:1.5; color:var(--muted); max-width:52ch; }
.body{ color:var(--muted); }
.sub{ font-weight:700; }
.mono{ font-family:var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.small{ font-size:1.5rem; color:var(--muted); }
.fine{ font-size:1.3rem; color:var(--dim); }
.mark-hl{ background:var(--acc-2); padding:0 .18em; border-radius:.2em; }
/* an inline link needs an underline on a light page; the accent alone is not
   enough contrast to carry one */
.ln{ color:var(--ink); box-shadow:inset 0 -.14em var(--acc-2); }
.ln:hover{ box-shadow:inset 0 -.32em var(--acc-2); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; z-index:40; width:100%;
  display:flex; align-items:center; gap:1.2rem;
  padding:1.6rem var(--pad);
  transition:padding .35s var(--ease-io), background .35s var(--ease-io),
             box-shadow .35s var(--ease-io), backdrop-filter .35s var(--ease-io);
}
.nav.stuck{
  padding-block:1rem;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; font-size:1.9rem; color:var(--ink);
}
.brand img{ width:3rem; height:3rem; }
/* the accent has to be a ground on a light page, not a text colour */
.brand em{ font-style:normal; color:var(--acc); }
.brand img{ width:3.4rem; height:3.4rem; object-fit:contain; }
.nav-mid{ display:none; margin-left:2.4rem; gap:.3rem; }
@media (min-width:1000px){ .nav-mid{ display:flex; } }
.nav-mid a{
  position:relative; padding:.9rem 1.6rem; border-radius:var(--pill);
  font-size:1.6rem; color:var(--muted);
  transition:color .25s var(--ease-io), background .25s var(--ease-io);
}
.nav-mid a:hover{ color:var(--ink); background:var(--bg-2); }
.nav-mid a[aria-current="page"]{ color:var(--ink); }
.nav-mid a[aria-current="page"]::after{
  content:""; position:absolute; left:1.6rem; right:1.6rem; bottom:.4rem;
  height:2px; background:var(--ink); border-radius:2px;
}
.nav-end{ display:flex; align-items:center; gap:1rem; margin-left:auto; }

/* ---------- pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1.2rem 2.2rem; border-radius:var(--pill);
  font-size:1.6rem; font-weight:500; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s var(--ease-io), color .15s var(--ease-io), border-color .15s var(--ease-io);
}
.pill-acc{ background:var(--acc); color:var(--on-acc); font-weight:700; }
.pill-acc:hover{ background:var(--ink); color:var(--on-dark); }
.pill-dark{ background:var(--ink); color:var(--on-dark); font-weight:700; }
.pill-dark:hover{ background:var(--acc); color:var(--on-acc); }
.pill-line{ border-color:var(--line-2); color:var(--ink); }
.pill-line:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pill:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.arw{ font-size:.82em; }
.state{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1rem 1.6rem; border-radius:var(--pill);
  border:1px solid var(--line-2); color:var(--muted);
  font-family:var(--mono); font-size:1.2rem; text-transform:uppercase; letter-spacing:.16em;
}
.state i{ width:7px; height:7px; border-radius:50%; background:var(--ink); }

/* ---------- hero ---------- */
.hero{ padding-top:13rem; }
@media (min-width:1000px){ .hero{ padding-top:15rem; } }
.hero-grid{ display:grid; gap:3rem; }
.hero-copy{ display:grid; gap:2.2rem; justify-items:start; }
/* ---------- the live readout ----------
   Where the decorative block was. Everything in it is a reading off the
   deployed contract, so it is worth the space the graphic was taking. */
.live{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:2.4rem; display:grid; gap:2rem; align-content:start;
}
.live.is-cold .live-dot{ background:var(--dim); animation:none; }
.live-top{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--ink); flex:none;
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }
.live-k{ font-family:var(--mono); font-size:1.15rem; text-transform:uppercase; letter-spacing:.18em; color:var(--dim); }
.live-a{ margin-left:auto; font-size:1.3rem; color:var(--muted); box-shadow:inset 0 -.12em var(--acc-2); }
.live-a:hover{ color:var(--ink); }
.live-figure{ display:grid; gap:.8rem; }
.live-figure b{
  font-family:var(--display); font-weight:800; letter-spacing:.01em; line-height:.9;
  font-size:clamp(4.4rem,6vw,7rem); font-variant-numeric:tabular-nums;
}
.live-coin{ border-top:1px solid var(--line); padding-top:2rem; display:grid; gap:1.4rem; }
.live-coin-top{ display:grid; gap:.5rem; }
.live-sym{ font-size:1.9rem; color:var(--ink); }
.live-said{
  font-size:1.5rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.live-rows{ display:grid; }
.live-rows div{
  display:flex; justify-content:space-between; gap:1.6rem;
  padding:1rem 0; border-top:1px solid var(--line); font-size:1.45rem;
}
.live-rows div:first-child{ border-top:0; }
.live-rows dt{ color:var(--dim); }
.live-rows dd{ color:var(--ink); }
.live-note{ font-size:1.3rem; color:var(--dim); }

.hero-foot{ display:grid; gap:1.8rem; justify-items:start; }
.hero-foot .ca{ max-width:100%; }
@media (min-width:1000px){
  /* the card tops out level with the headline; nothing sinks to the bottom of the row */
  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:0 5rem; }
  .hero-copy{ padding-bottom:3rem; }
  .live{ grid-row:span 2; }
  .hero-foot{ grid-column:1; max-width:46rem; }
}
.go{ display:flex; flex-wrap:wrap; gap:1rem; }

/* on a white page the cards take the faint lavender ground, and the
   hero form stays white on top of it */
.stat,.card,.list,.slab,.panel{ background:var(--bg-2); border-color:transparent; }
.launch{ background:var(--card); border-color:var(--line); }
.stat.hot,.states .stat.hot{ background:var(--acc); }
.list .av{ background:var(--card); }
.card .step{ background:var(--card); }
.ledger tbody tr:hover{ background:rgba(255,255,255,.7); }
.code-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:1.6rem 1.8rem; display:grid; gap:.6rem; }
.code-card b{ font-family:var(--mono); font-size:2.6rem; font-weight:400; letter-spacing:.06em; color:var(--acc); }

/* ---------- stat cards ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:6rem; }
@media (min-width:900px){ .stats{ grid-template-columns:repeat(4,1fr); gap:1.6rem; } }
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:2.4rem; min-height:15rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.8rem;
}
.stat.hot{ background:var(--acc); border-color:transparent; color:var(--on-acc); }
.stat span{ font-size:1.5rem; color:var(--muted); }
.stat.hot span{ color:rgba(255,255,255,.72); }
.stat b{
  font-family:var(--display); font-weight:800; letter-spacing:.01em; line-height:.9;
  font-size:clamp(3rem,3.4vw,4.4rem); font-variant-numeric:tabular-nums;
}
.stat b em{ font-family:var(--mono); font-style:normal; font-size:.34em; letter-spacing:.04em; margin-left:.25em; }

/* ---------- section shell ---------- */
.sec{ padding-top:clamp(8rem,12vh,15rem); }
.sec-head{ display:grid; gap:2.2rem; }
@media (min-width:1000px){
  .sec-head{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:6rem; }
  .sec-head .lead{ padding-bottom:.6rem; }
}
.sec-head .eyebrow{ grid-column:1/-1; }

/* ---------- cards ---------- */
.cards{ display:grid; gap:1.6rem; margin-top:4.4rem; }
@media (min-width:820px){ .cards{ grid-template-columns:repeat(2,1fr); } }
.card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:3rem; display:grid; gap:1.1rem; align-content:start;
}
.card .step{
  justify-self:start; margin-bottom:1.4rem;
  padding:.5rem 1.2rem; border-radius:var(--pill); background:var(--bg-2);
  font-family:var(--mono); font-size:1.15rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted);
}
.card .sub{ color:var(--ink); }
.card .body{ font-size:1.6rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.tags span{
  padding:.55rem 1.1rem; border-radius:var(--pill); border:1px solid var(--line);
  font-family:var(--mono); font-size:1.15rem; color:var(--dim);
}

/* ---------- three column steps ---------- */
.steps{ display:grid; gap:0; margin-top:4rem; border-top:1px solid var(--line); }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.steps > div{ padding:3rem 0; border-bottom:1px solid var(--line); }
@media (min-width:820px){
  .steps > div{ padding:3.4rem 3rem 3.8rem; border-bottom:0; border-left:1px solid var(--line); }
  .steps > div:first-child{ padding-left:0; border-left:0; }
}
.steps .eyebrow{ display:block; margin-bottom:1.8rem; }
.steps h3{ margin-bottom:1.2rem; }
.steps p{ font-size:1.6rem; color:var(--muted); }

/* ---------- ledger ---------- */
.slab{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:2.4rem; margin-top:4rem;
}
@media (min-width:900px){ .slab{ padding:3.2rem; } }
.ledger{ width:100%; overflow-x:auto; }
@media (max-width:900px){
  .ledger{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);
           mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent); }
}
.ledger table{ width:100%; min-width:58rem; border-collapse:collapse; text-align:left; }
.ledger th{
  font-family:var(--mono); font-size:1.15rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.16em; color:var(--dim); padding:0 2rem 1.4rem 0;
}
.ledger td{ padding:1.5rem 2rem; border-top:1px solid var(--line); font-size:1.55rem; color:var(--muted); }
.ledger td{ padding-left:0; }
.ledger th:last-child,.ledger td:last-child{ padding-right:0; }
.ledger td:first-child{ color:var(--ink); }
.ledger .n{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; letter-spacing:-.02em; }
.ledger th.n{ text-align:right; }
.ledger tbody tr{ transition:background .3s var(--ease-io); }
.ledger tbody tr:hover{ background:var(--bg-2); }
.ledger tr.sum td{ color:var(--ink); font-weight:700; border-top-color:var(--line-2); }
.ledger tr.sum td:last-child b{ background:var(--acc-2); padding:.25rem .7rem; border-radius:.6rem; }
.ledger tr.down td:first-child{ color:var(--dim); }

/* ---------- dark statement band ---------- */
.band{
  background:var(--dark); color:var(--on-dark); border-radius:var(--r-card);
  margin-top:clamp(8rem,12vh,13rem); padding:clamp(3rem,5vw,5.6rem);
  display:grid; gap:2.8rem; overflow:hidden; position:relative;
}
@media (min-width:1000px){ .band{ grid-template-columns:minmax(0,1fr) auto; align-items:end; } }
.band .t-1{ max-width:18ch; }
.band em{ font-style:normal; color:var(--acc-2); }
.band .pill-acc:hover{ background:var(--on-dark); color:var(--ink); }

/* ---------- rules ---------- */
.rules{ list-style:none; counter-reset:r; margin-top:4rem; }
.rules li{
  counter-increment:r; display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:1.6rem;
  padding:2rem 0; border-top:1px solid var(--line); font-size:1.6rem; color:var(--muted);
}
.rules li::before{
  content:counter(r,decimal-leading-zero);
  font-family:var(--mono); font-size:1.25rem; color:var(--dim); padding-top:.5rem;
}
.rules li:last-child{ border-bottom:1px solid var(--line); }
.rules b{ color:var(--ink); font-weight:700; }
.rules strong{ font-weight:700; background:var(--acc-2); padding:0 .2em; border-radius:.2em; color:var(--ink); }

/* ---------- lime closing block ---------- */
.close{
  background:var(--acc); color:var(--on-acc); border-radius:var(--r-card);
  margin-top:clamp(8rem,12vh,13rem); padding:clamp(3rem,5vw,5.6rem);
  display:grid; gap:2.8rem;
}
@media (min-width:1000px){ .close{ grid-template-columns:minmax(0,1fr) auto; align-items:end; } }
.close p{ color:rgba(255,255,255,.76); font-size:1.7rem; max-width:46ch; }
.close .pill-dark{ background:var(--on-acc); color:var(--acc); }
.close .pill-dark:hover{ background:var(--ink); color:var(--on-dark); }

/* ---------- footer ---------- */
.foot{ padding-top:1.6rem; }
.foot-card{
  background:var(--dark); color:var(--on-dark); border-radius:var(--r-card);
  padding:clamp(2.8rem,4vw,4.4rem); display:grid; gap:3rem;
}
@media (min-width:900px){ .foot-card{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:3.2rem; } }
.foot-card img{ width:4rem; height:4rem; margin-bottom:2rem; }
.foot-card p{ font-size:1.55rem; color:var(--on-dark-mute); max-width:42ch; }
.foot-card h4{ font-family:var(--mono); font-size:1.15rem; font-weight:400; text-transform:uppercase; letter-spacing:.2em; color:var(--on-dark-dim); margin-bottom:1.8rem; }
.foot-card nav{ display:grid; gap:1.2rem; font-size:1.6rem; }
.foot-card nav a{ color:var(--on-dark-mute); }
.foot-card nav a:hover{ color:var(--acc-2); }
.foot-card dl div{ display:flex; justify-content:space-between; gap:1.6rem; font-size:1.5rem; padding:.3rem 0; }
.foot-card dt{ color:var(--on-dark-dim); }
.foot-card dd{ color:var(--on-dark-mute); font-family:var(--mono); letter-spacing:-.02em; }
.foot-card .ln{ color:var(--on-dark); }
.foot-card .ln:hover{ color:var(--acc-2); box-shadow:none; }
.wordmark{
  font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(5.2rem,15.4vw,20.6rem); line-height:.82; color:var(--bg-2);
  margin:clamp(3rem,6vw,5.6rem) 0 0; user-select:none;
}
.foot-end{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.6rem;
  border-top:1px solid var(--line); margin-top:2.4rem; padding:2.2rem 0 4rem;
  font-size:1.35rem; color:var(--dim);
}
.disclaim{ margin-top:2.4rem; font-size:1.35rem; color:var(--dim); max-width:76ch; }

/* ============================================================
   Motion
   ============================================================ */

/* The hero arrives once, on load. `both` holds the from-state before it
   starts, and the rule is switched off entirely for reduced motion, which
   leaves every element at its normal resting state. */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.hero-copy > *,
.hero-foot > *{ animation:rise .8s var(--ease) both; }
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.13s; }
.hero-foot > *:nth-child(1){ animation-delay:.30s; }
.hero-foot > *:nth-child(2){ animation-delay:.38s; }
.live{ animation:rise .9s var(--ease) .2s both; }

/* Scroll reveals only exist when the script is there to undo them. The
   class on <html> is set inline in the head, so a page with no JS never
   hides anything in the first place. */
.js .rv{ opacity:0; transform:translateY(14px); }
.js .rv.is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0ms !important;
    transition-duration:.001ms !important; transition-delay:0ms !important;
  }
  .js .rv{ opacity:1; transform:none; }
}

/* ---------- narrow ---------- */
@media (max-width:760px){
  .nav{ padding:1.2rem var(--pad); }
  .nav-end .state{ display:none; }
  .brand{ font-size:1.6rem; }
  .brand img{ width:2.6rem; height:2.6rem; }
  .pill{ padding:1.1rem 1.7rem; font-size:1.5rem; }
  .hero{ padding-top:10rem; }
  .card{ padding:2.4rem; }
  .rows-unused{ padding:.4rem 1.8rem; }
}

/* the state chip, once there is something to be live about */
.state.is-live i{ background:var(--ink); animation:pulse 2.4s var(--ease-io) infinite; }

/* ============================================================
   SendPad additions: the launch form, the coin list, the trade
   panel, the claim page, the wallet chrome.
   ============================================================ */

/* ---------- forms ---------- */
.form{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; }
.field{ display:grid; grid-template-columns:minmax(0,1fr); gap:.6rem; }
.field label{ font-family:var(--mono); font-size:1.15rem; text-transform:uppercase; letter-spacing:.18em; color:var(--dim); }
.field .hint{ font-size:1.3rem; color:var(--dim); }
.field .hint.bad{ color:#b3261e; }
.in{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card);
  padding:0 1.6rem; height:5.2rem; transition:border-color .25s var(--ease-io), box-shadow .25s var(--ease-io);
}
.in:focus-within{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(105,37,226,.14); }
.in .pre{ font-family:var(--mono); color:var(--dim); font-size:1.6rem; }
.in input, .in select{
  flex:1; min-width:0; border:0; background:transparent; outline:0; color:var(--ink);
  font:inherit; font-size:1.7rem; height:100%;
}
.in input::placeholder{ color:var(--dim); }
.in .post{ font-family:var(--mono); font-size:1.3rem; color:var(--dim); white-space:nowrap; }
.in.mono input{ font-family:var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.two{ display:grid; gap:1.4rem; }
@media (min-width:560px){ .two{ grid-template-columns:1fr 1fr; } }
.seg{ display:flex; gap:.5rem; flex-wrap:wrap; }
.seg button{
  padding:.8rem 1.4rem; border-radius:var(--pill); border:1px solid var(--line-2); background:transparent;
  font:inherit; font-size:1.4rem; color:var(--muted); cursor:pointer;
}
.seg button[aria-pressed="true"]{ background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
.seg button:disabled{ opacity:.45; cursor:not-allowed; }
.seg button:disabled small{ font-family:var(--mono); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; margin-left:.5rem; }
.pill:disabled{ opacity:.5; cursor:not-allowed; }
.pill.wide{ justify-content:center; width:100%; }
.msg{ font-size:1.45rem; color:var(--muted); min-height:1.2em; }
.msg.bad{ color:#b3261e; }
.msg.ok{ color:var(--ink); }
.msg a{ box-shadow:inset 0 -.12em var(--acc-2); }

/* the launch card in the hero takes the live panel's slot */
.launch{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:2.4rem; display:grid; grid-template-columns:minmax(0,1fr); gap:1.8rem; align-content:start;
  animation:rise .9s var(--ease) .2s both;
}
@media (min-width:1000px){ .launch{ grid-row:span 2; align-self:start; } }
.launch-top{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.launch-top .live-a{ margin-left:auto; }
.split-line{ display:flex; gap:0; border-radius:var(--pill); overflow:hidden; height:8px; }
.split-line i{ display:block; height:100%; }
.split-line i:nth-child(1){ background:var(--acc); flex:90; }
.split-line i:nth-child(2){ background:var(--ink); flex:5; }
.split-line i:nth-child(3){ background:var(--acc-2); flex:5; }
.split-keys{ display:flex; gap:1.6rem; flex-wrap:wrap; font-size:1.3rem; color:var(--muted); }
.split-keys span::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.6rem; background:var(--acc); }
.split-keys span:nth-child(2)::before{ background:var(--ink); }
.split-keys span:nth-child(3)::before{ background:var(--acc-2); }

/* ---------- the coin list ---------- */
.list{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:.6rem 2.4rem; margin-top:4rem; }
.list-empty{ padding:3rem 0; color:var(--muted); font-size:1.6rem; }
.row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.8rem;
  align-items:center; padding:2rem 0; border-top:1px solid var(--line);
  color:inherit;
}
.row:first-child{ border-top:0; }
.row:hover{ background:transparent; }
.av{
  width:4.6rem; height:4.6rem; border-radius:50%; background:var(--bg-2); color:var(--ink);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.7rem;
  overflow:hidden;
}
.row:hover .av{ background:var(--acc-2); }
.row-main{ min-width:0; display:grid; gap:.4rem; }
.row-top{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.row-top b{ font-weight:700; font-size:1.7rem; }
.row-for{ font-size:1.5rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-for .at{ color:var(--ink); font-weight:500; }
.chip{ padding:.4rem 1rem; border-radius:var(--pill); background:var(--acc-2); color:var(--ink); font-size:1.2rem; font-weight:700; }
.chip-line{ background:transparent; border:1px solid var(--line); color:var(--dim); font-weight:400; font-family:var(--mono); }
.row-end{ text-align:right; display:grid; gap:.2rem; }
.row-end b{ font-family:var(--mono); font-size:1.6rem; font-weight:400; letter-spacing:-.02em; }
.row-end span{ font-family:var(--mono); font-size:1.1rem; text-transform:uppercase; letter-spacing:.16em; color:var(--dim); }
@media (max-width:700px){
  .row{ grid-template-columns:auto minmax(0,1fr); }
  .row-end{ grid-column:2; text-align:left; }
}

/* ---------- the coin page ---------- */
.coin-head{ display:grid; gap:2rem; padding-top:13rem; }
@media (min-width:1000px){ .coin-head{ padding-top:15rem; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; gap:4rem; } }
.coin-id{ display:grid; gap:1.4rem; justify-items:start; }
.coin-id .for{ font-size:clamp(1.8rem,1.6vw,2.2rem); color:var(--muted); }
.coin-id .for a{ color:var(--ink); box-shadow:inset 0 -.14em var(--acc-2); }
.kv{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2rem; }
@media (min-width:900px){ .kv{ grid-template-columns:repeat(4,1fr); } }
.kv .stat{ min-height:12rem; padding:2rem; }
.kv .stat b{ font-size:clamp(2.2rem,2.4vw,3rem); }
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:2.4rem; display:grid; grid-template-columns:minmax(0,1fr); gap:1.6rem; align-content:start;
}
.panel .seg{ justify-self:start; }
.quote{ display:grid; gap:.6rem; }
.quote div{ display:flex; justify-content:space-between; gap:1.6rem; font-size:1.45rem; padding:.8rem 0; border-top:1px solid var(--line); }
.quote div:first-child{ border-top:0; }
.quote dt{ color:var(--dim); }
.quote dd{ font-family:var(--mono); color:var(--ink); letter-spacing:-.02em; }
.bal{ display:flex; justify-content:space-between; gap:1rem; font-size:1.35rem; color:var(--dim); }
.bal button{ background:none; border:0; font:inherit; color:var(--ink); cursor:pointer; box-shadow:inset 0 -.12em var(--acc-2); }

/* ---------- the claim page ---------- */
.claim-grid{ display:grid; gap:2rem; margin-top:4rem; }
@media (min-width:1000px){ .claim-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.states{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.states .stat{ min-height:11rem; padding:1.8rem; }
.states .stat b{ font-size:clamp(1.9rem,2vw,2.6rem); }
.states .stat.hot{ background:var(--acc); color:var(--on-acc); }
.who{ display:flex; align-items:center; gap:1.2rem; }
.who img{ width:4.4rem; height:4.4rem; border-radius:50%; background:var(--bg-2); }
.who .av{ font-size:1.6rem; }
.who b{ display:block; font-size:1.6rem; }
.who span{ font-size:1.35rem; color:var(--dim); }
.tag-demo{ padding:.4rem 1rem; border-radius:var(--pill); background:var(--bg-2); color:var(--muted); font-family:var(--mono); font-size:1.1rem; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- wallet chrome ---------- */
.wal{ display:inline-flex; align-items:center; gap:.8rem; }
.wal .addr{ font-family:var(--mono); font-size:1.35rem; letter-spacing:-.02em; }
.banner{
  position:fixed; top:6.6rem; left:50%; transform:translateX(-50%); z-index:39;
  background:var(--ink); color:var(--bg); padding:1rem 1.6rem; border-radius:var(--pill);
  font-size:1.4rem; display:flex; gap:1.2rem; align-items:center; box-shadow:var(--shadow-lift);
  max-width:calc(100% - 2 * var(--pad));
}
.banner button{ background:var(--acc); color:var(--on-acc); border:0; border-radius:var(--pill); padding:.6rem 1.2rem; font:inherit; font-size:1.3rem; font-weight:700; cursor:pointer; }
.modal-back{ position:fixed; inset:0; z-index:60; background:rgba(20,9,43,.45); display:grid; place-items:center; padding:2rem; }
.modal{ background:var(--card); border-radius:var(--r-card); padding:2.4rem; width:min(36rem,100%); display:grid; gap:1.6rem; box-shadow:var(--shadow-lift); }
.modal-top{ display:flex; align-items:center; justify-content:space-between; }
.modal .x{ background:none; border:0; font-size:2.4rem; line-height:1; cursor:pointer; color:var(--dim); }
.modal-list{ display:grid; gap:.6rem; }
.modal-item{
  display:flex; align-items:center; gap:1.2rem; padding:1.2rem 1.4rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:transparent; font:inherit; font-size:1.6rem; cursor:pointer; text-align:left;
  transition:background .25s var(--ease-io);
}
.modal-item:hover{ background:var(--bg-2); }
.modal-item img{ width:2.8rem; height:2.8rem; border-radius:.6rem; }
.modal-dot{ width:2.8rem; height:2.8rem; border-radius:.6rem; background:var(--bg-2); }
.skel{ color:transparent; background:var(--bg-2); border-radius:.4em; animation:pulse 1.6s var(--ease-io) infinite; }
@media (max-width:560px){
  .states{ grid-template-columns:1fr; }
  .states .stat{ min-height:auto; flex-direction:row; align-items:center; justify-content:space-between; padding:1.4rem 1.8rem; }
  .kv{ grid-template-columns:1fr 1fr; }
  .kv .stat{ min-height:auto; }
  .kv .stat b{ font-size:2rem; }
}

/* ---------- the contract address ---------- */
.ca{
  display:inline-flex; align-items:center; gap:1.2rem; max-width:100%;
  padding:1rem 1.4rem; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg-2);
  font:inherit; color:var(--ink); cursor:pointer; text-align:left;
}
.ca .mono{ font-size:1.4rem; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ca-act{ font-family:var(--mono); font-size:1.1rem; text-transform:uppercase; letter-spacing:.16em; color:var(--acc); flex:none; }
.ca.is-copied .ca-act{ color:var(--ink); }

/* ---------- the chart ---------- */
.chart-card{
  position:relative; background:var(--bg-2); border-radius:var(--r-card);
  padding:2.4rem; margin-top:2rem; display:grid; gap:1.6rem;
}
.chart-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.6rem; flex-wrap:wrap; }
.chart-head > div{ display:grid; gap:.5rem; }
.chart-now{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,3vw,3.6rem); line-height:.95; font-variant-numeric:tabular-nums; }
.chart-meta{ text-align:right; }
.chart{ position:relative; width:100%; height:26rem; }
.chart svg{ width:100%; height:100%; display:block; overflow:visible; }
.chart .grid{ stroke:var(--line); stroke-width:1; }
.chart .axis{ font-family:var(--mono); font-size:1.1rem; fill:var(--dim); }
.chart .line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .area{ fill:var(--acc); opacity:.08; }
.chart .hair{ stroke:var(--ink); stroke-width:1; opacity:0; }
.chart .dot{ fill:var(--acc); stroke:var(--bg-2); stroke-width:2; r:5; opacity:0; }
.chart.is-hover .hair,.chart.is-hover .dot{ opacity:1; }
.chart .hit{ fill:transparent; cursor:crosshair; }
.chart-empty{ display:grid; place-items:center; height:100%; color:var(--dim); font-size:1.4rem; }
.chart-tip{
  position:absolute; z-index:5; pointer-events:none; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:1rem 1.2rem; box-shadow:var(--shadow-lift); display:grid; gap:.3rem; min-width:16rem;
}
.chart-tip b{ font-family:var(--mono); font-size:1.5rem; font-weight:400; letter-spacing:-.02em; }
.chart-tip span{ font-size:1.25rem; color:var(--dim); }
.chart-table summary{ cursor:pointer; }
.chart-table .ledger{ margin-top:1.2rem; }
.chart-table table{ min-width:0; }
.chart-table td{ font-size:1.35rem; padding:1rem 1.6rem 1rem 0; }
@media (max-width:560px){ .chart{ height:20rem; } .chart-meta{ text-align:left; } }