/* ============================================================
   DrawPad. White ground, one marker-red 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. The one piece of colour beyond that is the palette
   on the easel, which is the product's, not the page's.

   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:   #fbf2ee;
  --card:   #ffffff;
  --ink:    #1b0f0a;
  --dark:   #1f120c;
  --acc:    #e63b1f;
  --acc-2:  #ffd8cf;
  --on-acc: #ffffff;

  --muted: rgba(27,15,10,.64);
  --dim:   rgba(27,15,10,.42);
  --line:  rgba(27,15,10,.11);
  --line-2:rgba(27,15,10,.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(27,15,10,.04), 0 12px 32px -12px rgba(27,15,10,.14);
  --shadow-lift: 0 2px 4px rgba(27,15,10,.05), 0 26px 48px -18px rgba(27,15,10,.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; grid-template-columns:minmax(0,1fr); 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; grid-template-columns:minmax(0,1fr); gap:1.8rem; justify-items:start; }
.hero-foot > *{ min-width:0; max-width:100%; }
.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(230,59,31,.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:80; }
.split-line i:nth-child(2){ background:var(--ink); flex:10; }
.split-line i:nth-child(3){ background:var(--acc-2); flex:10; }
.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; grid-template-columns:minmax(0,1fr); gap:1.4rem; justify-items:start; }
.coin-id > *{ min-width:0; max-width:100%; }
.coin-side{ min-width:0; }
.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,minmax(0,1fr)); gap:1.2rem; }
.states .stat{ min-height:11rem; padding:1.8rem; }
.states .stat b{ font-size:clamp(1.5rem,1.5vw,2.1rem); overflow-wrap:anywhere; }
.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(27,15,10,.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; } }

/* ============================================================
   the easel: the canvas, its tools and the launch form under it.
   The canvas is the hero graphic. Every colour in the palette row
   is the contract's palette, in the contract's order.
   ============================================================ */
.easel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.6rem; display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; align-content:start;
  min-width:0; animation:rise .9s var(--ease) .2s both;
}
.easel > *{ min-width:0; }
@media (min-width:1000px){ .easel{ grid-row:span 2; align-self:start; padding:2rem; } }
.easel-top{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.easel-top .live-a{ margin-left:auto; }
.easel-tools{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.tool{
  height:3.6rem; padding:0 1.2rem; border-radius:var(--pill); border:1px solid var(--line-2); background:transparent;
  font:inherit; font-size:1.3rem; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
  transition:background .2s var(--ease-io), color .2s var(--ease-io);
}
.tool:hover{ background:var(--bg-2); color:var(--ink); }
.tool:disabled{ opacity:.4; cursor:not-allowed; }
.tool[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.tool kbd{ font-family:var(--mono); font-size:1rem; color:var(--dim); }

.paper{
  position:relative; aspect-ratio:1; width:100%; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); background:#fff; touch-action:none; cursor:crosshair;
  box-shadow:inset 0 0 0 1px rgba(27,15,10,.03);
}
.paper canvas{ display:block; width:100%; max-width:100%; height:100%; }
.paper .empty{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-family:var(--mono); font-size:1.15rem; text-transform:uppercase; letter-spacing:.18em; color:var(--dim);
  transition:opacity .3s var(--ease-io);
}
.paper.has-ink .empty{ opacity:0; }

.palette{ display:grid; grid-template-columns:repeat(16,1fr); gap:.5rem; }
.palette button{
  aspect-ratio:1; border-radius:50%; border:1px solid rgba(27,15,10,.12); cursor:pointer; padding:0;
  position:relative; transition:transform .18s var(--ease);
}
.palette button:hover{ transform:scale(1.12); }
.palette button[aria-pressed="true"]{ transform:scale(1.18); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--ink); z-index:1; }
.palette-row{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:1.2rem; }
.palette-row > span{ font-family:var(--mono); font-size:1.05rem; text-transform:uppercase; letter-spacing:.18em; color:var(--dim); width:4.4rem; }
.palette.small{ grid-template-columns:repeat(16,1fr); gap:.4rem; }
.palette.small button{ border-radius:.5rem; }
.palette.small button[aria-pressed="true"]{ transform:scale(1.1); }

.widths{ display:flex; gap:.5rem; }
.widths button{
  width:3.6rem; height:3.6rem; border-radius:50%; border:1px solid var(--line-2); background:transparent;
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.widths button i{ display:block; border-radius:50%; background:var(--ink); }
.widths button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); }
.widths button[aria-pressed="true"] i{ background:var(--bg); }

.meter{ display:grid; gap:.6rem; }
.meter-bar{ height:6px; border-radius:var(--pill); background:var(--bg-2); overflow:hidden; }
.meter-bar i{ display:block; height:100%; width:0; background:var(--ink); border-radius:var(--pill); transition:width .25s var(--ease); }
.meter-bar.is-full i{ background:#b3261e; }
.meter-row{ display:flex; justify-content:space-between; gap:1rem; font-family:var(--mono); font-size:1.1rem; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); }
.meter-row b{ font-weight:400; color:var(--ink); }

/* ---------- the gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:4rem; }
@media (min-width:700px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .gallery{ grid-template-columns:repeat(4,1fr); } }
.gallery-empty{ grid-column:1/-1; padding:3rem 0; color:var(--muted); font-size:1.6rem; }
.art{
  display:grid; gap:1rem; padding:1.2rem; border-radius:var(--r-card); background:var(--bg-2); color:inherit;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.art:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.art-img{ aspect-ratio:1; border-radius:calc(var(--r-card) - 1.2rem); overflow:hidden; background:#fff; border:1px solid var(--line); }
.art-img svg, .art-img img{ display:block; width:100%; height:100%; }
.art-img.skel{ animation:pulse 1.6s var(--ease-io) infinite; background:var(--card); }
.art-meta{ display:grid; gap:.3rem; padding:.2rem .6rem .6rem; }
.art-meta b{ font-size:1.6rem; }
.art-meta span{ font-size:1.3rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.art-meta .n{ font-family:var(--mono); font-size:1.15rem; letter-spacing:-.02em; color:var(--dim); display:flex; justify-content:space-between; gap:1rem; }

/* ---------- the coin page's artwork ---------- */
.artwork{
  border-radius:var(--r-card); overflow:hidden; background:#fff; border:1px solid var(--line);
  aspect-ratio:1; width:100%; max-width:56rem; animation:rise .9s var(--ease) .1s both;
}
.artwork svg{ display:block; width:100%; height:100%; }
.artwork.skel{ background:var(--bg-2); }
.coin-head.with-art{ grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){
  .coin-head.with-art{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:4rem; }
  .coin-head.with-art .coin-side{ display:grid; gap:2rem; }
}
.coin-id .said{ font-size:1.6rem; color:var(--muted); max-width:52ch; }
.strokes{ display:flex; flex-wrap:wrap; gap:.7rem; }
.strokes span{ padding:.5rem 1.1rem; border-radius:var(--pill); border:1px solid var(--line); font-family:var(--mono); font-size:1.15rem; color:var(--dim); }

/* ---------- the studio ---------- */
.studio-grid{ display:grid; gap:2rem; margin-top:4rem; }
@media (min-width:1000px){ .studio-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }

/* ---------- the X link in the nav ---------- */
.pill-x{ padding:1.2rem 0; width:4.4rem; justify-content:center; }
.pill-x svg{ display:block; }
.foot-end a{ color:inherit; box-shadow:inset 0 -.12em var(--acc-2); }
.foot-end a:hover{ color:var(--acc); }