/* ACROSS PAD. Warm paper, navy ink, one blue. Libre Caslon for headlines,
   Geist for reading, Geist Mono for anything that has to line up. Green and
   red are kept strictly for money going up and down, never for decoration.
   No gradients, no glow, no default OS chrome anywhere. */

:root{
  --paper:#F1EDE5;
  --paper-2:#E7E1D6;
  --card:#F8F5EF;
  --white:#FFFFFF;
  --ink:#152A3B;
  --ink-2:#3A5367;
  --muted:#576A7B;
  --faint:#6E8090;
  --line:#DFD8CE;
  --line-2:#C7BEB1;

  /* the brand accent: everything interactive that is not a gain or a loss */
  --accent:#2B5372;
  --accent-2:#1F3E57;
  --accent-bg:#E8EFF3;
  --accent-line:#CEDDE8;

  --green:#1D6B45;
  --green-bg:#E1EDE5;
  --green-line:#C2D9CB;
  --red:#A8402D;
  --red-bg:#F5E5E1;
  --red-line:#E4C4BC;
  --amber:#8A6414;
  --amber-bg:#F2EAD6;
  --amber-line:#E0D0A6;
  --dark:#0E1E2C;
  --dark-2:#16293A;

  --serif:"Libre Caslon Display", Georgia, "Times New Roman", serif;
  --serif-em:"Libre Caslon Text", Georgia, serif;
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --word:"Space Grotesk", "Geist", system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);

  --sidebar:238px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{scrollbar-width:thin;scrollbar-color:#C7BEB1 transparent;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
::selection{background:#CEDDE8;color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CDC4B7;border-radius:99px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#B3A898}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}

a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0}
code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;color:var(--ink-2)}
strong{font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.good{color:var(--green)}
.bad{color:var(--red)}
.warn{color:var(--amber)}
.dim{color:var(--muted)}
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

.label{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 14px/1 var(--sans);padding:11px 18px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease);
}
.btn:hover{border-color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn.lg{padding:14px 24px;font-size:15px}
.btn.block{width:100%}
.btn.tiny{padding:6px 11px;font-size:13px}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:#8E3526;border-color:#8E3526}
.btn[disabled]{background:var(--paper-2);border-color:var(--line);color:var(--faint);cursor:not-allowed;transform:none}
.btn[disabled]:hover{border-color:var(--line)}
.btn svg{width:15px;height:15px;flex:0 0 auto}

.ripple{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;
  background:rgba(21,42,59,.12);transform:translate(-50%,-50%) scale(0);animation:rip .55s var(--ease) forwards}
.btn.primary .ripple,.btn.danger .ripple{background:rgba(241,237,229,.28)}
@keyframes rip{to{transform:translate(-50%,-50%) scale(26);opacity:0}}

.icon-btn{
  width:38px;height:38px;flex:0 0 auto;display:inline-grid;place-items:center;
  border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.icon-btn:hover{border-color:var(--ink-2)}
.icon-btn svg{width:15px;height:15px;display:block;fill:currentColor}

.spin-ring{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* -------------------------------------------------------------------- brand */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);flex:0 0 auto;background:none;border:0;cursor:pointer;padding:0}
.logo{width:26px;height:26px;display:block;flex:0 0 auto}
.wordmark{font:700 17px/1 var(--word);letter-spacing:.06em;color:inherit}

/* --------------------------------------------------------------- ca + x chip */
.ca-chip{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 11px;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--ink);
  font:500 13px var(--sans);cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);
}
.ca-chip:hover{border-color:var(--ink-2)}
.ca-tag{font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted);padding:4px 5px;border-radius:4px;background:var(--paper-2)}
.ca-val{font:500 13px var(--mono);color:var(--ink-2)}
.ca-ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);flex:0 0 auto}
.ca-chip.live .ca-tag{background:var(--green-bg);color:var(--green)}
.ca-chip.copied{border-color:var(--green);background:var(--green-bg)}
.ca-chip.copied .ca-val{color:var(--green)}
.ca-chip.soon{cursor:default}
.ca-chip.soon .ca-val{color:var(--muted)}

/* ================================================================== LANDING */
.lnav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:26px;
  padding:14px clamp(16px,4vw,48px);
  background:rgba(241,237,229,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease);
}
.lnav.stuck{border-bottom-color:var(--line)}
.lnav-links{display:flex;gap:2px}
.lnav-links a{font:500 14.5px var(--sans);color:var(--ink-2);padding:8px 12px;border-radius:7px;
  transition:background .15s var(--ease),color .15s var(--ease)}
.lnav-links a:hover{background:var(--paper-2);color:var(--ink)}
.lnav-acts{margin-left:auto;display:flex;gap:9px;align-items:center}

.land{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

.hero{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);
  align-items:center;padding:clamp(32px,5vw,72px) 0 clamp(44px,6vw,76px);
  /* full height on a laptop, but it should not balloon on a tall monitor */
  min-height:min(calc(100svh - 68px),760px);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(43,83,114,.38)}70%{box-shadow:0 0 0 7px rgba(43,83,114,0)}100%{box-shadow:0 0 0 0 rgba(43,83,114,0)}}
/* Caslon sets tight, so the headline takes negative leading and a little
   optical indent to hang its first stem on the left margin. */
.hero h1{
  font:400 clamp(44px,5.8vw,82px)/.92 var(--serif);letter-spacing:-.025em;
  margin:0 0 22px;text-wrap:balance;margin-left:-.03em;
}
.hero h1 em{font-family:var(--serif-em);font-style:italic;color:var(--accent)}
.lede{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.85;color:var(--ink-2);max-width:560px}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}

.chain-rail{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px;max-width:560px}
.chain-rail li{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font:500 13px/1 var(--mono);color:var(--ink-2);
}
.chain-rail li .cdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.chain-rail li.more{color:var(--muted);padding-left:11px}

/* the hero card: a live curve, drawn from the real contract maths */
.hero-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;
  box-shadow:0 1px 0 rgba(21,42,59,.03),0 40px 70px -48px rgba(21,42,59,.35);
}
.hc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}
.hc-live{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.hc-blk{font:13px var(--mono);color:var(--muted)}
.hc-sym{font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.hc-price{font:500 clamp(34px,4vw,50px)/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.hc-sub{font-size:14px;color:var(--muted);margin-top:9px}
#hc-curve{display:block;width:100%;height:auto;margin:16px 0 4px}
.hc-foot{display:grid;grid-template-columns:1fr auto;gap:14px;border-top:1px solid var(--line);padding-top:15px;margin-top:12px}
.hc-foot .k{display:block;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.hc-foot .v{display:block;font-size:15px;font-weight:500}
.hc-go{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid var(--line);
  font:500 14.5px var(--sans);color:var(--ink);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.hc-go span{transition:transform .2s var(--ease)}
.hc-go:hover span{transform:translateX(4px)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hs{display:flex;flex-direction:column;gap:6px;min-width:0;padding:24px 22px 24px 0}
.hs+.hs{padding-left:22px;border-left:1px solid var(--line)}
.hs .k{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hs .v{font:500 26px/1.15 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hs .sub{font-size:14px;color:var(--muted)}

.lsec{padding:clamp(72px,9vw,124px) 0 0;scroll-margin-top:72px}
.lsec-head .label{display:block;margin-bottom:14px}
.lsec-head h2{font:400 clamp(32px,4vw,54px)/.97 var(--serif);letter-spacing:-.022em;margin:0 0 16px;text-wrap:balance;max-width:800px}
.lsec-head p{font-size:17px;line-height:1.75;color:var(--ink-2);max-width:620px}

.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.step-card{
  display:flex;flex-direction:column;gap:11px;padding:25px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.step-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 26px 44px -34px rgba(21,42,59,.35)}
.step-n{font:500 13px var(--mono);color:var(--muted)}
.step-card h3{font:400 29px/1.02 var(--serif);letter-spacing:-.018em}
.step-card p{color:var(--ink-2);font-size:15.5px;line-height:1.65;flex:1}
.step-link{font:500 14.5px var(--sans);display:inline-flex;gap:6px;align-items:center}
.step-link span{transition:transform .2s var(--ease)}
.step-card:hover .step-link span{transform:translateX(4px)}

.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:44px}

/* the payout rail on the fees section */
.flow{list-style:none;margin:0;padding:0}
.flow li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:10px;padding:18px 0}
.flow .fn{position:relative;z-index:1;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper);font:500 12px/1 var(--mono);color:var(--muted);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.flow li:not(:last-child)::after,.flow li:not(:last-child)::before{content:'';position:absolute;left:15px;top:48px;bottom:-18px;width:1px}
.flow li:not(:last-child)::after{background:var(--line)}
.flow li:not(:last-child)::before{z-index:1;background:var(--ink);transform:scaleY(0);transform-origin:top;
  transition:transform .55s cubic-bezier(.65,0,.35,1) .25s}
.flow.anim h3,.flow.anim p{opacity:.36;transition:opacity .5s var(--ease)}
.flow.anim li.lit h3,.flow.anim li.lit p{opacity:1}
.flow li.lit .fn{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:scale(1.06)}
.flow li.lit:not(:last-child)::before{transform:scaleY(1)}
.flow h3{font:600 17px/1.3 var(--sans);margin-bottom:5px}
.flow p{color:var(--ink-2);font-size:15.5px;line-height:1.65}

.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--green-line);
  background:var(--green-bg);border-radius:10px;color:#17452F;font-size:15px;line-height:1.6}
.note svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.note strong{color:#0F3A25}
.note.warn{background:var(--amber-bg);border-color:var(--amber-line);color:#5B400B}
.note.warn svg{stroke:var(--amber)}
.note.warn strong{color:#4A340A}
.note.bad{background:var(--red-bg);border-color:var(--red-line);color:#6B2518}
.note.bad svg{stroke:var(--red)}

/* landing preview of the explore table */
.peek{border-top:1px solid var(--ink);margin-top:40px}
.peek-row{
  display:grid;grid-template-columns:44px 1fr 120px 110px auto;align-items:center;gap:14px;width:100%;
  padding:16px 6px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
  text-align:left;color:var(--ink);transition:padding .25s var(--ease),background .2s var(--ease);
}
.peek-row:hover{background:var(--paper-2);padding-left:14px}
.peek-name{font:400 25px/1.05 var(--serif);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-sub{font:13px var(--mono);color:var(--muted)}
.peek-go{font:500 14px var(--sans);color:var(--muted)}
.peek-row:hover .peek-go{color:var(--ink)}

.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font:500 17px/1.4 var(--sans);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:26px;width:11px;height:11px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq summary:hover{color:var(--ink)}
.faq .ans{padding:0 40px 22px 0;color:var(--ink-2);font-size:15.5px;line-height:1.75;max-width:760px}
.faq .ans p+p{margin-top:12px}

.cta-band{
  margin-top:clamp(72px,9vw,124px);padding:clamp(40px,5vw,64px);border-radius:16px;
  background:var(--dark);color:var(--paper);display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cta-band h2{font:400 clamp(30px,3.4vw,46px)/.98 var(--serif);letter-spacing:-.02em;max-width:560px;text-wrap:balance}
.cta-band p{color:#9FB2C0;font-size:16px;line-height:1.7;margin-top:14px;max-width:520px}
.cta-band .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta-band .btn:hover{background:#fff;border-color:#fff}
.cta-band .btn.ghost{background:transparent;border-color:#2E4459;color:#BCCBD6}
.cta-band .btn.ghost:hover{background:var(--dark-2);color:var(--paper)}

.foot{max-width:1200px;margin:0 auto;padding:68px clamp(16px,4vw,48px) 44px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.foot-brand{max-width:420px}
.foot-brand p{color:var(--ink-2);font-size:15px;line-height:1.65;margin-top:14px}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a,.foot-col button{display:block;font:500 14.5px var(--sans);color:var(--ink-2);padding:5px 0;background:none;border:0;cursor:pointer;text-align:left}
.foot-col a:hover,.foot-col button:hover{color:var(--ink);text-decoration:underline}
.foot-note{font-size:13.5px;color:var(--muted);line-height:1.7;margin-top:20px;max-width:840px}

/* ====================================================================== APP
   No left rail. A top bar carries the brand, the screens and the controls;
   each screen is a page with its own title, the way a workspace reads rather
   than a dashboard. */

#app{display:flex;flex-direction:column;min-height:100vh}

.appbar{position:sticky;top:0;z-index:40;background:rgba(241,237,229,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.appbar-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:13px clamp(14px,3vw,32px)}
.appbar .brand{flex:0 0 auto}

.appnav{display:flex;gap:2px;margin-left:10px}
.appnav button{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;border:0;
  background:none;font:500 14.5px var(--sans);color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.appnav button:hover{background:var(--paper-2);color:var(--ink)}
.appnav button.on{background:var(--ink);color:var(--paper)}
.appnav .count{font:500 11.5px var(--mono);padding:2px 6px;border-radius:5px;
  background:var(--paper-2);color:var(--muted)}
.appnav button.on .count{background:rgba(241,237,229,.2);color:var(--paper)}

.appbar-acts{margin-left:auto;display:flex;gap:9px;align-items:center;min-width:0}
#btn-wallet.connected{background:var(--card);color:var(--ink);border-color:var(--line-2);
  font-family:var(--mono);font-size:13.5px}
.net-slot{min-width:172px}
.net-slot .dd-btn{background:var(--card);font:500 13.5px var(--sans);padding:9px 11px}

/* one quiet line of live chain numbers, instead of a row of stat blocks */
.chainline{border-top:1px solid var(--line);background:var(--paper-2)}
.chainline-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px clamp(14px,3vw,32px);font:12.5px var(--mono);color:var(--muted)}
.chainline b{font-weight:500;color:var(--ink-2)}
.chainline .sep{opacity:.45}
.chainline .warnpill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:3px 9px;border-radius:99px;background:var(--amber-bg);border:1px solid var(--amber-line);
  color:var(--amber);font-size:12px}
.chainline .warnpill button{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.tick{animation:tickFlash .7s var(--ease)}
@keyframes tickFlash{0%{color:var(--accent)}100%{color:inherit}}

/* -------------------------------------------------------------- the page */
.screen{max-width:1320px;margin:0 auto;width:100%;padding:clamp(24px,4vw,44px) clamp(14px,3vw,32px) 96px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.page-eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-head h1{font:400 clamp(34px,3.6vw,52px)/.96 var(--serif);letter-spacing:-.025em;margin-top:13px}
.page-head .lede{font-size:16px;line-height:1.7;margin-top:13px;max-width:620px}
.page-acts{display:flex;gap:9px;flex-wrap:wrap}

/* a strip of big numbers split by hairlines, the way Heirloom sets out a
   summary: label above, figure large, caption below */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.strip .cell{padding:20px 22px;min-width:0;border-left:1px solid var(--line)}
.strip .cell:first-child{border-left:0}
.strip .k{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.strip .v{display:block;font:400 clamp(26px,2.6vw,34px)/1 var(--serif);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip .v.sans{font-family:var(--sans);font-weight:500;font-size:clamp(20px,2vw,25px)}
.strip .sub{display:block;font-size:13px;color:var(--muted);margin-top:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .cell:nth-child(odd){border-left:0}
  .strip .cell:nth-child(n+3){border-top:1px solid var(--line)}
}

section.band{padding-top:36px;scroll-margin-top:96px}

/* section headings: a serif line with a count and its actions on the same
   baseline, no numbered rail */
.shead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.shead h2{font:400 clamp(22px,2.2vw,28px)/1.1 var(--serif);letter-spacing:-.02em}
.shead .count{font:500 12px var(--mono);padding:3px 8px;border-radius:6px;
  background:var(--paper-2);color:var(--muted);align-self:center}
.shead p{flex:1 1 260px;font-size:14.5px;line-height:1.6;color:var(--muted);min-width:0}
.shead .acts{margin-left:auto;display:flex;gap:8px;align-items:center;align-self:center}

.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;position:relative}
.panel.pad-0{padding:0;overflow:hidden}
.panel+.panel{margin-top:16px}
.panel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:15px;margin-bottom:17px;border-bottom:1px solid var(--line)}
.panel-head h3{font:400 20px/1.1 var(--serif);letter-spacing:-.015em}
.panel-head p{flex:1 1 200px;font-size:13.5px;color:var(--muted);line-height:1.55}
.panel-head .acts{margin-left:auto;align-self:center}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.grid-wide{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}

.kv{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:9px 0;font-size:14.5px}
.kv+.kv{border-top:1px solid var(--line)}
.kv .k{color:var(--muted)}
.kv .v{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.kv .v.mono{font-family:var(--mono);font-size:13.5px}

/* ------------------------------------------------------------- form controls */
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field>label,.field>.lab{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.field .count{font:500 11.5px var(--mono);color:var(--faint);letter-spacing:.04em;text-transform:none}
.field .count.over{color:var(--red)}
.row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.row.tight{gap:10px}
.field.grow{flex:1 1 260px}

input,textarea{
  font:400 15px var(--sans);color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;min-width:0;width:100%;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
textarea{resize:vertical;min-height:84px;line-height:1.6;font-family:var(--sans)}
input:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,42,59,.07)}
input::placeholder,textarea::placeholder{color:#93A0AA}
input.mono{font-family:var(--mono);font-size:14px}
input.bad,textarea.bad{border-color:var(--red)}
input[type=file]{display:none}
input[type=checkbox]{width:auto;min-width:0}

.hint{font-size:13.5px;color:var(--muted);line-height:1.6}
.hint.err{color:var(--red)}
.hint.ok{color:var(--green)}
.hint a{color:var(--ink-2);text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font:500 13.5px/1 var(--mono);padding:9px 12px;border-radius:7px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-2);cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.sm{padding:6px 9px;font-size:12.5px}

.seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line);width:max-content;max-width:100%}
.seg button{border:0;background:transparent;padding:8px 15px;border-radius:7px;font:500 14px/1 var(--sans);color:var(--muted);cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(21,42,59,.1),inset 0 0 0 1px var(--line)}
.seg.sm button{padding:7px 13px;font-size:13.5px}
.seg.buy button.on.buy{background:var(--green);color:#fff;box-shadow:none}
.seg.buy button.on.sell{background:var(--red);color:#fff;box-shadow:none}

/* the switch, themed rather than a native checkbox */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:38px;height:22px;border-radius:99px;background:var(--line-2);position:relative;flex:0 0 auto;
  transition:background .2s var(--ease)}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--white);
  box-shadow:0 1px 3px rgba(21,42,59,.3);transition:transform .2s var(--ease)}
.switch input:checked+.track{background:var(--green)}
.switch input:checked+.track::after{transform:translateX(16px)}
.switch input:focus-visible+.track{outline:2px solid var(--ink);outline-offset:2px}

/* --------------------------------------------------------------- dropdown */
.dd{position:relative;min-width:0;width:100%}
.dd-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--white);border:1px solid var(--line-2);color:var(--ink);
  border-radius:8px;padding:10px 12px;font:500 14px var(--sans);cursor:pointer;text-align:left;transition:border-color .15s var(--ease)}
.dd-btn:hover{border-color:var(--ink-2)}
.dd.open .dd-btn{border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,42,59,.07)}
.dd-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:9px;min-width:0}
.dd-caret{color:var(--muted);flex:0 0 auto;width:10px;height:10px;transition:transform .2s var(--ease);
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.dd.open .dd-caret{transform:rotate(-135deg) translate(-2px,-2px)}
.dd-list{position:fixed;z-index:95;background:var(--card);border:1px solid var(--line-2);border-radius:10px;
  padding:5px;box-shadow:0 26px 50px -24px rgba(21,42,59,.4);overflow-y:auto;overscroll-behavior:contain;
  animation:tipIn .14s var(--ease);scrollbar-width:thin;scrollbar-color:#C7BEB1 transparent}
.dd-search{position:sticky;top:-5px;background:var(--card);padding:4px 4px 7px;margin:-5px -5px 3px;border-bottom:1px solid var(--line);z-index:1}
.dd-search input{border:1px solid var(--line);border-radius:7px;font-size:14px;padding:8px 10px}
.dd-group{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:9px 10px 5px}
.dd-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--ink-2);cursor:pointer;text-align:left;
  padding:9px 10px;border-radius:7px;font:14px var(--sans)}
.dd-opt .sub{margin-left:auto;font:12px var(--mono);color:var(--muted);flex:0 0 auto}
.dd-opt:hover,.dd-opt.active{background:var(--paper-2);color:var(--ink)}
.dd-opt.on{color:var(--ink);font-weight:600}
.dd-opt .cdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dd-empty{padding:16px 10px;font-size:14px;color:var(--muted);text-align:center}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------- token identity */
.tlogo{width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--paper);display:inline-grid;place-items:center;
  font:600 13px/1 var(--mono);letter-spacing:.02em;flex:0 0 auto;overflow:hidden;object-fit:cover}
.tlogo img{width:100%;height:100%;object-fit:cover;display:block}
.tlogo.xs{width:22px;height:22px;border-radius:6px;font-size:9px}
.tlogo.sm{width:28px;height:28px;border-radius:7px;font-size:11px}
.tlogo.lg{width:56px;height:56px;border-radius:12px;font-size:19px}
.tlogo.xl{width:76px;height:76px;border-radius:15px;font-size:26px}
.cdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}

.badge{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  padding:5px 8px;border-radius:5px;background:var(--paper-2);color:var(--muted);border:1px solid var(--line)}
.badge.green{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.badge.red{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.badge.amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.badge.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* --------------------------------------------------------------- progress */
.bar{height:6px;border-radius:99px;background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .5s var(--ease)}
.bar.green i{background:var(--green)}
.bar.sm{height:4px}

/* ------------------------------------------------------------------ tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;min-width:720px}
table.tbl th{
  font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card);
}
table.tbl th.num,table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl th.sortable{cursor:pointer;user-select:none}
table.tbl th.sortable:hover{color:var(--ink)}
table.tbl th .arrow{opacity:0;margin-left:5px}
table.tbl th.sorted .arrow{opacity:1}
table.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
table.tbl tbody tr{cursor:pointer;transition:background .15s var(--ease)}
table.tbl tbody tr:hover{background:var(--paper-2)}
table.tbl tbody tr:last-child td{border-bottom:0}
.cell-tok{display:flex;align-items:center;gap:11px;min-width:0}
.cell-tok .nm{min-width:0}
.cell-tok .n1{display:block;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-tok .n2{display:block;font:12.5px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-back{display:flex;align-items:center;gap:8px;font:13px var(--mono);color:var(--ink-2)}

.empty{padding:56px 24px;text-align:center;color:var(--muted)}
.empty h3{font:400 26px/1.1 var(--serif);letter-spacing:-.015em;color:var(--ink);margin-bottom:10px}
.empty p{font-size:15px;line-height:1.7;max-width:460px;margin:0 auto 20px}

.skel{background:linear-gradient(100deg,var(--paper-2) 30%,#DFD7C9 50%,var(--paper-2) 70%);
  background-size:220% 100%;animation:shimmer 1.2s linear infinite;border-radius:6px;display:block}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* =============================================================== launch form */
.launch-grid{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:20px;align-items:start}
.launch-side{position:sticky;top:76px}

.drop{
  border:1px dashed var(--line-2);border-radius:11px;background:var(--paper);
  display:flex;align-items:center;gap:15px;padding:15px;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--paper-2)}
.drop .ph{width:64px;height:64px;border-radius:11px;background:var(--paper-2);border:1px solid var(--line);
  display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.drop .ph img{width:100%;height:100%;object-fit:cover}
.drop .ph svg{width:22px;height:22px;fill:none;stroke:var(--faint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.drop .txt{min-width:0}
.drop .t1{display:block;font:500 14.5px var(--sans);margin-bottom:4px}
.drop .t2{display:block;font-size:13px;color:var(--muted);line-height:1.5}

.tax-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tax-opt{
  border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:13px 10px;cursor:pointer;text-align:center;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.tax-opt:hover{border-color:var(--line-2)}
.tax-opt .p{display:block;font:500 19px/1 var(--sans);font-variant-numeric:tabular-nums}
.tax-opt .s{font:11.5px var(--mono);color:var(--muted);margin-top:6px;display:block}
.tax-opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tax-opt.on .s{color:#9FB2C0}

.summary-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 0;font-size:14.5px}
.summary-row+.summary-row{border-top:1px solid var(--line)}
.summary-row .k{color:var(--muted);flex:0 0 auto}
.summary-row .v{font-weight:500;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.preview-card{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:18px;margin-bottom:16px}
.preview-top{display:flex;gap:13px;align-items:center;min-width:0}
.preview-top .nm{min-width:0;flex:1}
.preview-top .n1{display:block;font:600 17px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-top .n2{display:block;font:12.5px var(--mono);color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-desc{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:13px;word-break:break-word}
.preview-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}

/* the deploy step list */
.steps{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.st{display:grid;grid-template-columns:18px 1fr;gap:11px;padding:7px 0}
.st-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);margin-top:4px;flex:0 0 auto}
.st.active .st-dot{border-color:var(--ink);border-top-color:transparent;animation:spin .8s linear infinite}
.st.done .st-dot{background:var(--green);border-color:var(--green)}
.st.fail .st-dot{background:var(--red);border-color:var(--red)}
.st strong{display:block;font:500 14.5px var(--sans)}
.st.wait strong{color:var(--muted)}
.st span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5;word-break:break-word}
.st.fail span{color:var(--red)}
.st a{font:12.5px var(--mono);color:var(--ink-2);text-decoration:underline}

/* ================================================================== explore */
.filter-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search{position:relative;flex:1 1 260px;min-width:0}
.search input{padding-left:36px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  fill:none;stroke:var(--faint);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.scan-note{display:flex;align-items:center;gap:9px;font:12.5px var(--mono);color:var(--muted);flex-wrap:wrap}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:14px}
.tcard{
  border:1px solid var(--line);border-radius:12px;background:var(--card);padding:17px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:13px;min-width:0;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tcard:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 20px 34px -28px rgba(21,42,59,.4)}
.tcard-top{display:flex;gap:12px;align-items:center;min-width:0}
.tcard-top .nm{min-width:0;flex:1}
.tcard-top .n1{display:block;font:600 16px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard-top .n2{display:block;font:12px var(--mono);color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbadges{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.tbadges:empty{display:none}
.tcard-top .badge,.cell-tok .badge{flex:none;font-size:10.5px;padding:3px 7px}
.tcard-desc{font-size:13.5px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.tcard-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tcard-nums .k{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.tcard-nums .v{display:block;font:500 14px/1.2 var(--sans);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font:12px var(--mono);color:var(--muted)}
.tcard-price{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-top:11px;border-top:1px solid var(--line);font-size:13px}
.tcard-price .mono{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =============================================================== token page */
.tok-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tok-id{display:flex;gap:16px;align-items:center;min-width:0;flex:1 1 320px}
.tok-id h1{font:400 clamp(28px,2.9vw,41px)/1 var(--serif);letter-spacing:-.02em;word-break:break-word}
.tok-id .sym{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tok-price{text-align:right;flex:0 0 auto}
.tok-price .p{font:500 clamp(26px,2.6vw,36px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tok-price .d{font:500 14px var(--mono);margin-top:7px}
.tok-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.chart-wrap{position:relative;width:100%;min-height:260px}
.chart-wrap svg{display:block;width:100%;height:auto}
.chart-wrap .grid{stroke:#E0D9CD;stroke-width:1}
.chart-wrap .axis{fill:var(--ink-2);font-family:var(--mono);font-size:12.5px}
.chart-wrap .axis.dim{fill:var(--muted);font-size:11px}
.chart-wrap .wick{stroke-width:1.4}
.chart-wrap .wick.up{stroke:var(--green)}
.chart-wrap .wick.down{stroke:var(--red)}
.chart-wrap .body.up{fill:var(--green)}
.chart-wrap .body.down{fill:var(--red)}
.chart-wrap .vol{opacity:.3}
.chart-wrap .vol.up{fill:var(--green)}
.chart-wrap .vol.down{fill:var(--red)}
.chart-wrap .hair{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
@media (max-width:560px){.chart-wrap .axis{font-size:11px}}
.chart-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);border-radius:10px;
  padding:10px 12px;font:12.5px/1.6 var(--mono);white-space:nowrap;z-index:5;
  box-shadow:0 12px 24px -12px rgba(21,42,59,.6)}
.chart-tip b{font-weight:600;font-size:13px}
.chart-tip b.up{color:var(--green)}
.chart-tip b.down{color:var(--red)}
.chart-tip .k{display:inline-block;width:14px;color:var(--muted)}

.trade-grid{display:grid;grid-template-columns:minmax(0,1fr) 386px;gap:20px;align-items:start}
.trade-side{position:sticky;top:76px}
.swap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 30px 60px -44px rgba(21,42,59,.35)}
.swap-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.swap-title{font:600 16px var(--sans)}
.swap-field{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 14px 11px;
  transition:border-color .15s var(--ease)}
.swap-field:focus-within{border-color:var(--ink-2)}
.sf-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.sf-bal{font:13px var(--mono);cursor:pointer}
.sf-bal:hover{color:var(--ink);text-decoration:underline}
.sf-row{display:flex;align-items:center;gap:10px;margin:8px 0 6px}
.sf-input,.sf-out{flex:1 1 auto;min-width:0;font:500 30px/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sf-input{border:0;background:transparent;padding:0;border-radius:0;width:100%}
.sf-input:focus{box-shadow:none;border:0}
.sf-out{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-out.pending{color:var(--faint)}
.sf-tok{flex:0 0 auto;font:600 13.5px/1 var(--mono);padding:8px 11px;border-radius:99px;background:var(--card);border:1px solid var(--line-2)}
.sf-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.sf-usd{font-size:13.5px;color:var(--muted)}
.swap-arrow{display:flex;justify-content:center;height:8px;position:relative;z-index:1}
.swap-arrow svg{width:32px;height:32px;margin-top:-12px;padding:7px;border-radius:9px;background:var(--card);border:1px solid var(--line);
  fill:none;stroke:var(--ink-2);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.swap-msg{margin-top:12px;padding:11px 13px;border-radius:9px;font-size:14px;line-height:1.55}
.swap-msg.good{background:var(--green-bg);color:#17452F;border:1px solid var(--green-line)}
.swap-msg.bad{background:var(--red-bg);color:#6B2518;border:1px solid var(--red-line)}
.swap-msg.warn{background:var(--amber-bg);color:#5B400B;border:1px solid var(--amber-line)}
.swap-msg a{text-decoration:underline}

.feed{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
.feed li{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:14px}
.feed li:last-child{border-bottom:0}
.feed .tside{align-self:center;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 7px;border-radius:5px;text-align:center}
.feed .tside.buy{background:var(--green-bg);color:var(--green)}
.feed .tside.sell{background:var(--red-bg);color:var(--red)}
.feed .who{display:block;font:13px var(--mono);color:var(--ink-2)}
.feed .when{display:block;font:12px var(--mono);color:var(--muted);margin-top:2px}
.feed .amt{text-align:right;font-variant-numeric:tabular-nums}
.feed .amt .a1{display:block;font-weight:500}
.feed .amt .a2{display:block;font:12px var(--mono);color:var(--muted);margin-top:2px}
.feed li.fresh{animation:rowIn .5s var(--ease)}
@keyframes rowIn{from{background:var(--green-bg)}to{background:transparent}}

.holders{list-style:none;margin:0;padding:0}
.holders li{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.holders li:last-child{border-bottom:0}
.holders .rank{font:12px var(--mono);color:var(--muted)}
.holders .addr{display:inline-block;font:13px var(--mono);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.holders .pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}

/* ============================================================ sheets, toast */
.sheet{position:fixed;inset:0;z-index:90;background:rgba(21,42,59,.36);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s var(--ease) both}
@keyframes fadeIn{to{opacity:1}}
.sheet-box{width:min(480px,100%);background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;max-height:88vh;overflow-y:auto;box-shadow:0 40px 80px -30px rgba(21,42,59,.5);
  animation:tipIn .2s var(--ease)}
.sheet-box.wide{width:min(620px,100%)}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.sheet-top h3{font:600 17px var(--sans)}
.sheet-p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin-bottom:14px}
.sheet-acts{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.sheet-acts .btn{flex:1 1 auto}
.sheet-foot{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.55}

.wallet-list{display:flex;flex-direction:column;gap:7px}
.wallet-opt{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);cursor:pointer;text-align:left;transition:border-color .15s var(--ease),background .15s var(--ease)}
.wallet-opt:hover{border-color:var(--ink);background:var(--paper-2)}
.wallet-opt img{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
.wallet-opt .wn{display:block;font:500 15px var(--sans)}
.wallet-opt .wd{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;
  gap:8px;align-items:center;max-width:calc(100vw - 28px);pointer-events:none}
.toast{display:flex;align-items:center;gap:11px;background:var(--ink);color:var(--paper);border-radius:10px;
  padding:12px 16px;font-size:14.5px;box-shadow:0 22px 40px -20px rgba(21,42,59,.7);
  animation:toastIn .25s var(--ease);pointer-events:auto;max-width:100%}
.toast.out{animation:toastOut .25s var(--ease) forwards}
.toast .ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast.good .ic{stroke:#79CCA3}
.toast.bad .ic{stroke:#F0A090}
.toast a{text-decoration:underline;color:#A9BCC9;white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* ================================================================ responsive */
.mob-only{display:none}

@media (max-width:1080px){
  .launch-grid,.trade-grid{grid-template-columns:minmax(0,1fr)}
  .launch-side,.trade-side{position:static}
  .grid-wide{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:28px}
  .hero-card{margin-top:8px}
  .split2{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:900px){
  .steps3{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs:nth-child(3){border-left:0}
  .hs:nth-child(n+3){border-top:1px solid var(--line)}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .lnav-links{display:none}
}
@media (max-width:960px){
  /* the bar stacks: brand and controls on one line, the screens below them,
     scrollable sideways so every screen stays reachable */
  .appbar-in{flex-wrap:wrap;gap:10px;padding-bottom:0}
  .appnav{order:3;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none;
    padding:2px 0 9px;border-top:1px solid var(--line);margin-top:2px}
  .appnav::-webkit-scrollbar{display:none}
  .appnav button{padding:9px 12px;font-size:14px}
  .appbar-acts{margin-left:auto}
  .net-slot{min-width:0;width:150px}
}
@media (max-width:780px){
  .mob-only{display:inline-flex}
  .tok-head{flex-direction:column}
  .tok-price{text-align:left}
  .peek-row{grid-template-columns:36px 1fr auto;gap:10px}
  .peek-row .hide-sm{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
  .tax-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  .lnav{gap:10px;padding:11px 14px}
  .lnav-acts{gap:7px}
  .lnav .wordmark{display:none}
  .hero h1{font-size:clamp(38px,11vw,52px)}
  .stats{grid-template-columns:minmax(0,1fr)}
  .hs{padding:18px 0}
  .hs+.hs{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .hs:nth-child(n+3){border-top:1px solid var(--line)}
  .screen{padding:18px 14px 76px}
  .panel{padding:16px}
  .ca-val{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* at phone width the network picker moves out of the bar and onto the
     chain line, so the brand and the wallet button still fit */
  .appbar-in{padding:10px 12px 0}
  /* the controls wrap inside their own box, so the picker drops to a line of
     its own instead of squeezing the wallet button off the edge */
  .appbar-acts{gap:7px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .appbar .btn{padding:11px 14px}
  .appbar .wordmark{display:none}
  .net-slot{order:4;flex:0 0 100%;width:auto;margin:2px 0 0}
  .chainline-in{padding:7px 12px;font-size:11.5px;gap:6px}
  .chainline .warnpill{margin-left:0;width:100%;justify-content:center;margin-top:4px}
  .page-head h1{font-size:clamp(30px,8.5vw,38px)}
  .page-head{padding-bottom:18px;margin-bottom:20px}
  .card-grid{grid-template-columns:minmax(0,1fr)}
  .sf-input,.sf-out{font-size:26px}
  .toast-wrap{bottom:14px}
  .cta-band{padding:28px 20px}
  .faq summary{font-size:16px}
}

/* ======================================================= THE WIRE DIAGRAM
   "Launch here, pair anywhere" drawn literally: the launch chain in the
   middle, backing chains around it, and fees flowing back down the wires.
   The dashes move along the stroke rather than the nodes moving, so the
   whole thing costs one compositor layer. */

.wire-wrap{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 14px;box-shadow:0 1px 0 rgba(21,42,59,.03),0 40px 70px -50px rgba(21,42,59,.4);overflow:hidden}
.wire-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.wire-title{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#wire{display:block;width:100%;height:auto}

#wire .wire-link{fill:none;stroke:var(--line-2);stroke-width:1.4}
#wire .wire-flow{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:5 11;animation:wireFlow 9s linear infinite;opacity:.85}
@keyframes wireFlow{to{stroke-dashoffset:-320px}}

#wire .node-box{fill:var(--paper);stroke:var(--line-2);stroke-width:1.2}
#wire .node-box.hub{fill:var(--accent);stroke:var(--accent)}
#wire .node-dot{fill:var(--accent)}
#wire .node-label{font-family:var(--mono);font-size:11.5px;fill:var(--ink-2)}
#wire .node-label.hub{fill:#EAF1F6;font-weight:500}
#wire .node-sub{font-family:var(--mono);font-size:10px;fill:var(--muted)}
#wire .node{transform-box:fill-box;transform-origin:center}
#wire .node.drift-a{animation:driftA 7s ease-in-out infinite}
#wire .node.drift-b{animation:driftB 8.5s ease-in-out infinite}
#wire .node.drift-c{animation:driftA 10s ease-in-out infinite}
#wire .node.drift-d{animation:driftB 11.5s ease-in-out infinite}

/* borrowed from the way Heirloom lets its diagram breathe: a couple of
   pixels of drift, never enough to make anything hard to read */
@keyframes driftA{50%{transform:translateY(-5px) rotate(-.6deg)}}
@keyframes driftB{50%{transform:translateY(5px) rotate(.45deg)}}

.wire-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--muted)}
.wire-legend i{width:16px;height:0;border-top:1.6px solid var(--accent);display:inline-block;margin-right:7px;vertical-align:middle}
.wire-legend i.plain{border-top-color:var(--line-2);border-top-style:solid}

/* =========================================================== THE DARK BAND
   A full-bleed navy stretch where a serif line brightens as it comes up the
   screen, with a few cards drifting behind it. */

.band-dark{
  position:relative;background:var(--dark);color:#E8EDF2;overflow:hidden;
  margin-top:clamp(72px,9vw,124px);
  padding:clamp(96px,16vw,190px) clamp(16px,4vw,48px);
  /* full bleed out of .land without breaking its max-width */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.band-dark .band-inner{max-width:900px;margin:0 auto;position:relative;z-index:2;text-align:center}
.band-dark h2{
  font:400 clamp(30px,4.6vw,60px)/1.02 var(--serif);letter-spacing:-.022em;text-wrap:balance;
  color:#9FB1C2;transition:color .6s var(--ease);
}
.band-dark.lit h2{color:#F3F1EA}
.band-dark .band-sub{
  margin-top:20px;font-size:16.5px;line-height:1.8;color:#8CA0B2;max-width:560px;
  margin-inline:auto;opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--ease) .15s,transform .7s var(--ease) .15s;
}
.band-dark.lit .band-sub{opacity:1;transform:none}
.band-dark .band-cta{margin-top:28px;display:flex;gap:11px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.band-dark.lit .band-cta{opacity:1;transform:none}
.band-dark .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.band-dark .btn:hover{background:#fff;border-color:#fff}
.band-dark .btn.ghost{background:transparent;border-color:#2E4459;color:#BCCBD6}
.band-dark .btn.ghost:hover{background:var(--dark-2);color:#fff}

/* the cards drifting behind the headline */
.band-float{position:absolute;inset:0;z-index:1;pointer-events:none}
.bf{
  position:absolute;display:flex;align-items:center;gap:9px;
  padding:9px 13px 9px 9px;border-radius:9px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  font:12.5px var(--mono);color:#93A8BB;white-space:nowrap;
  /* no backdrop blur here: these drift continuously, and blurring a moving
     backdrop keeps the compositor busy for no visible gain over flat navy */
  will-change:transform;
}
.bf i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.bf:nth-child(1){top:8%;left:6%;animation:driftA 9s ease-in-out infinite}
.bf:nth-child(2){top:24%;right:7%;animation:driftB 11s ease-in-out infinite}
.bf:nth-child(3){bottom:22%;left:11%;animation:driftB 13s ease-in-out infinite}
.bf:nth-child(4){bottom:9%;right:13%;animation:driftA 10.5s ease-in-out infinite}
.bf:nth-child(5){top:47%;left:2%;animation:driftA 12s ease-in-out infinite}
.bf:nth-child(6){bottom:44%;right:2%;animation:driftB 14s ease-in-out infinite}

@media (max-width:900px){
  .bf:nth-child(n+3){display:none}
  .bf{font-size:11.5px}
  .bf:nth-child(1){left:2%}
  .bf:nth-child(2){right:2%}
}

/* ========================================================== FEATURE ROWS
   Heirloom's list layout: a mark, the name, the short version, the long
   version, and an arrow that leans in on hover. */

.frows{margin-top:40px;border-top:1px solid var(--line)}
.frow{
  display:grid;grid-template-columns:26px 168px minmax(0,1fr) minmax(0,1.35fr) 22px;
  gap:18px;align-items:center;width:100%;text-align:left;
  padding:19px 6px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
  color:var(--ink);transition:background .2s var(--ease),padding .25s var(--ease);
}
.frow:hover{background:var(--card);padding-left:14px;padding-right:14px}
.frow .fr-ic{width:19px;height:19px;color:var(--accent);fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.frow .fr-name{font:500 15.5px var(--sans)}
.frow .fr-short{font-size:14.5px;color:var(--muted)}
.frow .fr-long{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.frow .fr-go{width:15px;height:15px;color:var(--faint);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease),color .2s var(--ease)}
.frow:hover .fr-go{transform:translate(2px,-2px);color:var(--accent)}
.frows-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:20px 6px 0;font-size:14.5px;color:var(--muted)}

@media (max-width:860px){
  /* every cell is placed by hand here: with one child hidden, auto-placement
     puts the arrow where the name should be */
  .frow{grid-template-columns:22px minmax(0,1fr) 18px;gap:6px 12px;align-items:flex-start}
  .frow .fr-short{display:none}
  .frow .fr-ic{grid-column:1;grid-row:1 / span 2;margin-top:1px}
  .frow .fr-name{grid-column:2;grid-row:1}
  .frow .fr-long{grid-column:2;grid-row:2;font-size:14px}
  .frow .fr-go{grid-column:3;grid-row:1;margin-top:3px}
}

/* a blue-tinted panel, for the one thing on a screen that matters most */
.panel.tint{background:var(--accent-bg);border-color:var(--accent-line)}
.panel.tint .kv+.kv{border-top-color:var(--accent-line)}

/* ============================================================ STEP CHAIN
   The four moves in a payout, as connected plates rather than a numbered
   rail. The arrow between them is drawn by the border, so it survives
   wrapping onto a second line. */

.steps-chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.step-plate{
  position:relative;padding:16px 16px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);min-width:0;
}
.step-plate .sp-n{
  display:inline-grid;place-items:center;width:23px;height:23px;border-radius:6px;
  background:var(--accent-bg);border:1px solid var(--accent-line);
  font:500 11px/1 var(--mono);color:var(--accent);margin-bottom:11px;
}
.step-plate h3{font:600 14.5px var(--sans);margin-bottom:5px}
.step-plate p{font-size:13.5px;line-height:1.55;color:var(--muted)}
.step-plate+.step-plate::before{
  content:'';position:absolute;left:-12px;top:50%;width:12px;height:1px;background:var(--line-2);
}
@media (max-width:640px){ .step-plate+.step-plate::before{display:none} }

/* ================================================================ RECEIPT
   The launch summary: a list of terms with the cost set apart at the foot,
   the way a receipt separates the line items from the total. */

.receipt{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.receipt-head{padding:15px 20px;border-bottom:1px solid var(--line);background:var(--paper-2);
  font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.receipt-body{padding:6px 20px 14px}
.receipt-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;font-size:14.5px}
.receipt-row+.receipt-row{border-top:1px solid var(--line)}
.receipt-row .k{color:var(--muted);flex:0 0 auto}
.receipt-row .v{font-weight:500;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt-foot{padding:16px 20px;border-top:1px solid var(--line-2);background:var(--paper-2);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.receipt-foot .k{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.receipt-foot .v{font:400 25px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.receipt-foot .sub{display:block;font:13px var(--sans);color:var(--muted);margin-top:7px;text-align:right}

/* the network the app runs on, stated rather than chosen */
.netpill{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 15px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;font:500 14px var(--sans);color:var(--ink);white-space:nowrap}

/* the trade panel's quote rows and slippage picker */
.swap-rows{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.swap-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.swap-row .k{color:var(--muted)}
.swap-row .v{font-size:13px}
.slip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.slip .btn.tiny.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}