/* Archivo, served from here rather than from Google.
   One variable file covers 400 to 700, so the four weights the page uses cost
   one request. Loading it from fonts.googleapis.com meant a stylesheet round
   trip to one host and the font itself from a second, both on the path that
   blocks the first paint, each with its own dns lookup and tls handshake. */
@font-face{
  font-family:Archivo;
  src:url(/fonts/archivo-latin.woff2) format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
:root{
  /* Ground and surfaces. Navy rather than neutral black: a launchpad is a
     market, and the references that set this brief read as instruments on a
     dark desk rather than as a black page. */
  --ink:#070B14; --ink-2:#0A0F1C;
  --raise:#101827; --raise-2:#18212F; --raise-3:#202B3C;
  --line:#1C2637; --line-2:#2A3648;
  --slab:#454F63;

  /* Sulfur stays the brand: it is the logo, the hero and the primary action.
     Cobalt is the interactive chrome, which the references lean on heavily and
     this page had almost none of. */
  --sulfur:#F5C518; --sulfur-dim:#B8940F;
  --cobalt:#3B82F6; --cobalt-dim:#1D4ED8;

  /* A market moves up and down and this palette had no way to say so. */
  --up:#22C55E; --down:#F0616D;

  --text:#EDF1F8; --mute:#8794AB; --dim:#5B6880;

  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow:0 18px 44px -28px rgba(0,0,0,.9);
  --tabs:calc(59px + env(safe-area-inset-bottom));
  --rail:236px;
  --ease:cubic-bezier(.22,.9,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:Archivo,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:var(--tabs);
}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:100%;max-width:64rem;margin:0 auto;padding:0 16px}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
  background:rgba(11,14,20,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.top .wrap{display:flex;align-items:center;gap:12px;height:56px;padding-top:env(safe-area-inset-top)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.brand img{width:26px;height:26px;border-radius:7px;display:block}
.brand b{font-weight:700;letter-spacing:-.04em;font-size:1.04rem}
.nav{display:none;gap:2px;margin-left:12px}
.nav a{
  text-decoration:none;color:var(--mute);font-size:.88rem;font-weight:500;
  padding:7px 12px;border-radius:8px;transition:color .16s,background .16s;
}
.nav a:hover{color:var(--text);background:var(--raise)}
.nav a[aria-current="page"]{color:var(--text);background:var(--raise-2)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.wbtn{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--raise-2);border:1px solid var(--line-2);border-radius:10px;
  padding:7px 12px;font-size:.82rem;font-weight:500;cursor:pointer;
  transition:border-color .16s,background .16s;
}
.wbtn:hover{border-color:#36415A;background:#1C2433}
.pulse{width:6px;height:6px;border-radius:99px;background:var(--sulfur);flex:none;
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

/* ---------- bottom tabs, phones only ---------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  border-top:1px solid var(--line);background:rgba(11,14,20,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:58px;text-decoration:none;color:var(--dim);font-size:.66rem;font-weight:500;
  letter-spacing:.01em;transition:color .16s;
}
.tabs a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.tabs a[aria-current="page"]{color:var(--sulfur)}

/* ---------- views ---------- */
.view{display:none;animation:viewIn .34s var(--ease)}
.view.on{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;margin-bottom:6px}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;
  z-index:-2;opacity:0;transform:scale(1.05);animation:heroIn 1s var(--ease) .04s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,14,20,.6),rgba(11,14,20,.3) 40%,var(--ink) 96%)}
.heroIn{padding-block:40px 28px;min-height:54vh;display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{margin:0 0 10px;font-size:clamp(2rem,8.4vw,3.1rem);line-height:1.04;letter-spacing:-.04em;max-width:13ch}
.hero p{margin:0;color:#AEB6C6;max-width:34ch}
.rise{opacity:0;transform:translateY(14px);animation:rise .66s var(--ease) forwards}
.d1{animation-delay:.2s}.d2{animation-delay:.3s}.d3{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}
.pill{display:inline-flex;align-items:center;gap:7px;margin-top:15px;width:fit-content;
  font-size:.74rem;color:var(--mute);border:1px solid var(--line-2);
  background:rgba(11,14,20,.55);border-radius:99px;padding:5px 11px}

/* ---------- sections and slabs ---------- */
/* padding-block, not a shorthand: .wrap and .sec sit on the same element, and
   `padding: 20px 0` would zero the side padding .wrap set, putting text
   against the edge of a phone. Desktop hid it, because the max-width centering
   supplies margins of its own. */
.sec{padding-block:20px 4px}
.sec h2{margin:0 0 3px;font-size:1.12rem;letter-spacing:-.025em}
.sec p.sub{margin:0 0 15px;color:var(--mute);font-size:.87rem}
.slab{position:relative;background:var(--raise);border:1px solid var(--line);
  border-radius:14px;padding:16px 15px 17px;margin-bottom:10px;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.slab::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;
  border-radius:3px;background:var(--line-2);transition:background .3s var(--ease)}
.slab[data-active="true"]{border-color:var(--line-2);background:var(--raise-2)}
.slab[data-active="true"]::before{background:var(--sulfur)}
.slab[data-done="true"]::before{background:var(--slab)}
.step{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.step i{font-style:normal;font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums}
.step b{font-size:.97rem;font-weight:600;letter-spacing:-.015em}
.step em{font-style:normal;margin-left:auto;font-size:.73rem;color:var(--mute)}

/* ---------- pad grid, responsive everywhere ---------- */
.pads{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pad{position:relative;text-align:left;cursor:pointer;min-height:88px;
  background:#0F141F;border:1px solid var(--line);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:9px;
  transition:transform .16s var(--ease),border-color .16s,background .16s}
.pad:active:not(:disabled){transform:scale(.97)}
.pad:hover:not(:disabled){border-color:var(--line-2);background:#141B28}
.pad[aria-pressed="true"]{border-color:var(--sulfur);background:#181A12}
.pad:disabled{cursor:not-allowed;background:#0C1017;border-color:#171E2A}
.pad:disabled .nm{color:var(--dim)}
.nm{font-weight:600;font-size:.95rem;letter-spacing:-.015em;padding-right:36px}
.pad .soon{position:absolute;top:11px;right:11px;font-size:.62rem;
  color:var(--dim);white-space:nowrap}
.pad .live{position:absolute;top:15px;right:13px;width:6px;height:6px;border-radius:99px;
  background:var(--sulfur);box-shadow:0 0 0 3px rgba(245,197,24,.14)}
.cmp td.pad a{color:inherit;text-decoration:none;font-weight:600}
.cmp td.pad a:hover{color:var(--sulfur)}
.cmp td.cost{font-variant-numeric:tabular-nums}

/* A launch as it lands, wearing the pad it went to. */
.fitem{position:relative;padding-left:18px;text-decoration:none;color:inherit}
.fitem > .spine{
  position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
  background:var(--spine,var(--line-2));
}
a.fitem{transition:background .15s,border-color .15s}
a.fitem:hover{background:var(--raise-2);border-color:var(--line-2)}
.fitem .av{overflow:hidden;flex:none}
.fitem img.av{object-fit:cover}

/* ================= the market bar ======================================== */
/* How the feed is ranked, and what it is narrowed to. Both pages carry the
   same bar, and the filters in it are built from the pads and chains actually
   in the feed rather than from a list typed into the page. */
.mkbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px;
}
.mkorder{display:flex;gap:3px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;padding:3px;flex:none}
.mksort{
  background:none;border:0;border-radius:7px;padding:5px 11px;cursor:pointer;
  font-size:.78rem;color:var(--mute);white-space:nowrap;transition:color .16s,background .16s;
}
.mksort:hover{color:var(--text)}
.mksort.on{background:var(--raise-2);color:var(--text);font-weight:600}
.mkfilters{display:flex;flex-wrap:wrap;gap:10px 16px;min-width:0}
.mksearch{flex:1 1 14rem;min-width:0;order:-1}
@media (min-width:900px){ .mksearch{flex:0 1 18rem;order:0} }
.mkgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.mklabel{font-size:.7rem;color:var(--dim);flex:none}
.mkchip{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:99px;cursor:pointer;white-space:nowrap;
  background:var(--raise);border:1px solid var(--line);color:var(--mute);
  font-size:.76rem;font-weight:500;transition:background .15s,border-color .15s,color .15s;
}
.mkchip:has(> .spine){padding-left:14px}
.mkchip > .spine{
  position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:3px;height:12px;border-radius:2px;background:var(--spine);
}
.mkchip em{font-style:normal;font-size:.66rem;color:var(--dim)}
.mkchip:hover{border-color:var(--line-2);color:var(--text)}
.mkchip.on{background:var(--raise-3);border-color:var(--line-2);color:var(--text)}
.mkchip.on em{color:var(--mute)}

.padchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.padchip{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 14px;border-radius:99px;cursor:pointer;
  background:var(--raise);border:1px solid var(--line);color:var(--mute);
  font-size:.8rem;font-weight:500;transition:background .15s,border-color .15s,color .15s;
}
.padchip > .spine{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:3px;height:13px;border-radius:2px;background:var(--spine);
}
.padchip em{font-style:normal;font-size:.68rem;color:var(--dim)}
.padchip:hover{border-color:var(--line-2);color:var(--text)}
.padchip[aria-pressed="true"]{background:var(--raise-3);border-color:var(--line-2);color:var(--text)}
.padchip[aria-pressed="true"] em{color:var(--mute)}

/* ================= token cards ========================================== */
/* A grid of cards, claimed by whichever container is currently holding cards.
   It used to be pinned to the two feed ids, so the container that holds a row
   list instead was laid out as a single grid cell and every row inside it
   collapsed on top of the next. */
.cardgrid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
}
.tcard{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:11px 11px 12px 14px;border-radius:var(--r);
  background:var(--raise);border:1px solid var(--line);text-decoration:none;color:var(--text);
  transition:border-color .16s,background .16s,transform .16s var(--ease);
}
a.tcard:hover{background:var(--raise-2);border-color:var(--line-2);transform:translateY(-2px)}
.tcard > .spine{
  position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
  background:var(--spine,var(--line-2));
}
.tcart{
  aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--ink);
  border:1px solid var(--line);display:grid;place-items:center;
}
.tcart .tcimg{width:100%;height:100%;object-fit:cover;display:block}
/* The initials fallback, when a pad advertises a logo its own host has lost. */
div.tcimg{
  width:100%;height:100%;display:grid;place-items:center;
  font-weight:700;font-size:1.5rem;color:var(--slab);letter-spacing:-.02em;
}
.tchead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.tchead b{font-size:.92rem;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcmarks{display:flex;align-items:center;gap:5px;flex:none}
.tcmarks img{width:13px;height:13px;border-radius:3px;display:block}
.tcmarks em{font-style:normal;font-size:.62rem;color:var(--dim)}
.tcline{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tccap{font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums}
.tcmove{font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.tcmove.up{color:var(--up)}
.tcmove.down{color:var(--down)}
@media (min-width:760px){
  .cardgrid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:14px}
}

/* ================= the tape ============================================== */
.ticker{display:none}
@media (min-width:1080px){ .ticker{display:block} }
.ticker{
  overflow:hidden;border-top:1px solid var(--line);background:var(--ink-2);
  padding:7px 0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  /* The strip's height is reserved before it has anything in it. Revealing it
     once the feed answered pushed the whole page down, which was the largest
     layout shift on the site by an order of magnitude. An empty strip is a
     thin band under the header, and a filled one is the same height.
     35px, not the 19px of one row: box-sizing is border-box everywhere here,
     so this figure has to cover the padding and the border as well, and a
     first attempt at 19px reserved half the strip and left the shift in. */
  min-height:35px;
}
.tickrun{display:flex;gap:26px;width:max-content;animation:tape 70s linear infinite}
.ticker:hover .tickrun{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tickrun{animation:none}
  .ticker{overflow-x:auto}
}
.tick{
  position:relative;display:flex;align-items:center;gap:7px;padding-left:9px;
  font-size:.78rem;white-space:nowrap;
}
.tick .spine{position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;background:var(--spine)}
.tick b{font-weight:600;letter-spacing:.01em}
.tickprice{color:var(--mute);font-variant-numeric:tabular-nums}
.tickmove{font-variant-numeric:tabular-nums;font-weight:600}
.tickmove.up{color:var(--up)}
.tickmove.down{color:var(--down)}

/* A row is a slab: its leading edge says which pad it came from. */
.trow{position:relative;padding-left:20px}
.trow > .spine{
  position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
  background:var(--spine,var(--line-2));opacity:.9;
}
.trow:hover > .spine{opacity:1}

/* ================= the rail, and the stack in it ========================== */
.rail{display:none}

@media (min-width:1080px){
  .rail{
    display:flex;flex-direction:column;gap:18px;
    position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom));
    background:var(--ink-2);border-right:1px solid var(--line);
  }
  .rail .brand{padding:4px 8px 2px}
  /* The rail already says where you are, so the header stops repeating it and
     keeps only the things that belong to the session. */
  .railhide,.top .nav{display:none}
  /* The rail is a gutter on the page, not a margin on each block. Shifting the
     inner wrap instead put its max-width and the rail side by side and pushed
     the page wider than the screen. */
  .view,footer,.top{padding-left:var(--rail)}
  .top .wrap{max-width:none;justify-content:flex-end;padding-right:28px}
  .view > .wrap,footer .wrap{max-width:76rem;margin:0 auto;padding-left:28px;padding-right:28px}
  body{padding-bottom:0}
}

.railnav{display:flex;flex-direction:column;gap:2px}
.railnav a{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);
  color:var(--mute);text-decoration:none;font-size:.88rem;font-weight:500;
  transition:background .15s,color .15s;
}
.railnav a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.railnav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.railnav a[aria-current]{background:var(--raise-2);color:var(--text)}

.railcta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--r);background:var(--sulfur);color:#17130A;
  font-weight:700;font-size:.9rem;text-decoration:none;
  transition:transform .16s var(--ease),filter .16s;
}
.railcta span{font-size:1.1rem;line-height:1;margin-top:-2px}
.railcta:hover{filter:brightness(1.06)}
.railcta:active{transform:scale(.98)}

.railpads{margin-top:auto;display:flex;flex-direction:column;gap:8px;min-height:0}
.railhead{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.railhead span{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.railhead a{font-size:.72rem;color:var(--cobalt);text-decoration:none}
.railhead a:hover{text-decoration:underline}
.railroster{display:flex;flex-direction:column;gap:3px;overflow:auto;min-height:0}

/* A slab: a thin top highlight and a pad coloured spine down the leading edge.
   The spine is the whole idea. Six launchpads in one place means the venue is
   a fact you need on every row, and reading it beats reading a label. */
.railpad{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:8px 10px 8px 14px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--text);font-size:.83rem;
  background:var(--raise);border:1px solid var(--line);
  transition:background .15s,border-color .15s;
}
.railpad:hover{background:var(--raise-2);border-color:var(--line-2)}
.railpad .spine{
  position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--spine);
}
.railpad b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.railchains{
  font-size:.68rem;color:var(--dim);background:var(--ink);border:1px solid var(--line);
  border-radius:99px;min-width:19px;text-align:center;padding:1px 5px;
}
.railpad.down{opacity:.5}
.railpad.down .spine{background:var(--dim)}
.railfoot{padding:0 6px}
.railfoot a{color:var(--dim);font-size:.75rem;text-decoration:none}

/* A pad in the roster, wearing its own colour. */
.padrow{position:relative;padding-left:20px}
.padrow > .spine{
  position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--spine,var(--line-2));
}
.padrow:hover{background:var(--raise-2)}

/* ================= a pad, in detail ====================================== */
.pdh{
  margin:22px 0 9px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:600;
}
.pdrows{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.pdchains{display:flex;flex-direction:column;gap:10px}
.pdchain{
  background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}
.pdchead{display:flex;align-items:center;gap:7px;width:100%;margin-bottom:3px}
.pdchead img{border-radius:4px;display:block}
.pdchead b{font-size:.9rem;letter-spacing:-.01em}
.pdnone{color:var(--dim);font-size:.8rem}
#v-pad .btn{margin-top:22px;display:inline-block}
#v-pad .ps-notes{margin-top:0}

/* The one thing a visitor needs to know before reading the rest of the page,
   so it sits above the figures rather than under them. */
.soonbox{
  margin:0 0 20px;padding:15px 16px;border-radius:var(--r);
  border:1px solid var(--cobalt-dim);background:rgba(59,130,246,.06);
}
.soonbox b{display:block;font-size:.9rem;color:var(--text);margin-bottom:6px}
.soonbox p{margin:0;font-size:.82rem;line-height:1.6;color:var(--mute);max-width:58ch}
.soonbox .btn{margin-top:13px}
@media (min-width:760px){
  .pdchains{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
}

/* ================= pad options, drawn from what the pad describes ========= */
.ps-blurb{margin:0 0 18px;color:var(--mute);font-size:.92rem;line-height:1.55;max-width:46ch}
.ps-form{display:flex;flex-direction:column;gap:22px}
.ps-group{display:flex;flex-direction:column;gap:16px}
.ps-numbered .ps-group{
  background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:18px 16px;
}
.ps-head{display:flex;align-items:center;gap:11px;margin-bottom:2px}
.ps-head i{
  font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--ink);
  background:var(--sulfur);border-radius:7px;padding:3px 7px;flex:none;
}
.ps-head h3{margin:0;font-size:1rem;letter-spacing:-.02em}

.ps-field{display:flex;flex-direction:column;gap:7px}
.ps-label{display:flex;align-items:baseline;gap:8px;font-size:.86rem;font-weight:500}
.ps-req{
  font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.05em;
  color:var(--sulfur);opacity:.8;
}
.ps-help{display:block;color:var(--mute);font-size:.78rem;line-height:1.5}

.ps-field input[type=text],.ps-field input[type=number],.ps-field textarea,.ps-field select{
  width:100%;background:#0F141F;border:1px solid var(--line-2);border-radius:11px;
  padding:12px 13px;font-size:.92rem;transition:border-color .16s;
}
.ps-field textarea{resize:vertical;min-height:74px;line-height:1.5}
.ps-field input:focus,.ps-field textarea:focus,.ps-field select:focus{border-color:var(--cobalt);outline:none}
.ps-field input::placeholder,.ps-field textarea::placeholder{color:var(--dim)}

/* a choice with consequences gets room to state them */
.ps-cards{display:flex;flex-direction:column;gap:9px}
.ps-card{position:relative;display:block;cursor:pointer}
.ps-card input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ps-card-in{
  display:block;background:#0F141F;border:1px solid var(--line-2);border-radius:13px;
  padding:13px 14px;transition:border-color .16s,background .16s;
}
.ps-card-in b{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600}
.ps-card-in small{display:block;margin-top:5px;color:var(--mute);font-size:.79rem;line-height:1.5}
.ps-card input:checked ~ .ps-card-in{border-color:var(--sulfur);background:#181A12}
.ps-card input:focus-visible ~ .ps-card-in{outline:2px solid var(--cobalt);outline-offset:2px}
.ps-badge{
  font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.05em;
  color:var(--mute);border:1px solid var(--line-2);border-radius:99px;padding:2px 7px;
}
.ps-card input:checked ~ .ps-card-in .ps-badge{color:var(--sulfur);border-color:rgba(245,197,24,.4)}

/* two or three exclusive answers, side by side */
.ps-seg{display:flex;gap:4px;background:#0F141F;border:1px solid var(--line-2);border-radius:12px;padding:4px}
.ps-seg-i{flex:1;position:relative;cursor:pointer}
.ps-seg-i input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ps-seg-i span{
  display:block;text-align:center;padding:9px 6px;border-radius:9px;
  font-size:.84rem;font-weight:500;color:var(--mute);transition:background .16s,color .16s;
}
.ps-seg-i input:checked + span{background:var(--sulfur);color:var(--ink);font-weight:600}
.ps-seg-i input:focus-visible + span{outline:2px solid var(--cobalt);outline-offset:2px}

.ps-sel{position:relative}
.ps-count{
  display:block;margin-top:6px;font-style:normal;color:var(--dim);font-size:.72rem;
}

.ps-num{position:relative;display:flex;align-items:center}
.ps-num input{padding-right:44px}
.ps-unit{
  position:absolute;right:13px;font-style:normal;color:var(--mute);font-size:.84rem;
  pointer-events:none;
}
.ps-range{display:flex;align-items:center;gap:13px}
.ps-range .ps-num{width:104px;flex:none}
.ps-slider{
  flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:var(--line-2);outline:none;
}
.ps-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:99px;
  background:var(--sulfur);cursor:pointer;border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--sulfur);
}
.ps-slider::-moz-range-thumb{
  width:15px;height:15px;border-radius:99px;background:var(--sulfur);cursor:pointer;border:3px solid var(--ink);
}
.ps-ends{display:flex;justify-content:space-between;color:var(--dim);font-size:.72rem;margin-top:-2px}

.ps-row{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
.ps-row .ps-label{flex-direction:column;align-items:flex-start;gap:3px}
.ps-toggle{position:relative;flex:none;cursor:pointer}
.ps-toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ps-toggle i{
  display:block;width:44px;height:26px;border-radius:99px;background:var(--line-2);
  transition:background .18s var(--ease);
}
.ps-toggle i::after{
  content:"";position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:99px;
  background:var(--text);transition:transform .18s var(--ease);
}
.ps-toggle input:checked + i{background:var(--sulfur)}
.ps-toggle input:checked + i::after{transform:translateX(18px);background:var(--ink)}
.ps-toggle input:focus-visible + i{outline:2px solid var(--cobalt);outline-offset:2px}

/* what the pad wants understood before it is signed */
.ps-notes{
  margin:20px 0 0;padding:15px 16px 15px 32px;list-style:none;
  background:rgba(51,85,255,.05);border:1px solid rgba(51,85,255,.16);border-radius:13px;
  color:var(--mute);font-size:.8rem;line-height:1.6;
}
.ps-notes li{position:relative;margin-bottom:7px}
.ps-notes li:last-child{margin-bottom:0}
.ps-notes li::before{
  content:"";position:absolute;left:-15px;top:8px;width:5px;height:5px;border-radius:99px;
  background:var(--cobalt);opacity:.7;
}
@media (min-width:760px){
  .ps-numbered .ps-group{padding:22px}
  /* A grid rather than one flex row. Four cards in a row overflowed the
     section and clipped the last one, and a pad can return any number. */
  .ps-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:10px}
  .ps-card-in{height:100%}
}
.chains{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.chip{font-size:.63rem;color:var(--mute);border:1px solid var(--line-2);
  border-radius:99px;padding:1px 7px 1px 4px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px}
.chip img{width:11px;height:11px;border-radius:3px;display:block}
.pad:disabled .chip{color:#49525F;border-color:#1A212C}

/* ---------- forms ---------- */
label.f{display:block;margin-bottom:13px}
label.f > span{display:block;font-size:.78rem;color:var(--mute);margin-bottom:6px}
input,select{width:100%;font-size:16px;background:#070A10;border:1px solid var(--line-2);
  border-radius:10px;padding:11px 12px;transition:border-color .16s}
input:hover,select:hover{border-color:#36415A}
input::placeholder{color:#424D60}
.hint{font-size:.75rem;color:var(--dim)}
.empty{color:var(--dim);font-size:.87rem}
.drop{border:1px dashed var(--line-2);border-radius:11px;padding:16px;text-align:center;
  color:var(--mute);font-size:.85rem;cursor:pointer;transition:border-color .16s,background .16s}
.drop:hover{border-color:#3A465E;background:#0F1520}
.drop img{max-width:72px;max-height:72px;border-radius:9px;margin-bottom:8px;display:block;margin-inline:auto}

/* ---------- dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:var(--tabs);z-index:55;display:none;
  border-top:1px solid var(--line);background:rgba(11,14,20,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dock.on{display:block}
.dock .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.go{flex:0 0 auto;font-weight:700;font-size:.96rem;background:var(--sulfur);color:#17130A;
  border:0;border-radius:11px;padding:12px 24px;cursor:pointer;
  transition:transform .16s var(--ease)}
.go:active:not(:disabled){transform:scale(.97)}
.go:disabled{background:#222A39;color:#68738A;cursor:not-allowed}
.note{font-size:.76rem;color:var(--mute);line-height:1.3}

/* ---------- stat tiles ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
.stat{background:var(--raise);border:1px solid var(--line);border-radius:13px;padding:14px}
.stat b{display:block;font-size:1.7rem;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem;color:var(--mute)}
.stat.accent b{color:var(--sulfur)}

/* ---------- pad catalogue rows ---------- */
.row{display:flex;gap:12px;align-items:flex-start;background:var(--raise);
  border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:9px}
/* The pad rows are anchors, so they inherit link colour and underline unless
   told otherwise. */
a.row{text-decoration:none;color:inherit;cursor:pointer}
a.row:hover{border-color:var(--line-2)}
.row .ic{width:34px;height:34px;border-radius:10px;background:#0F141F;border:1px solid var(--line-2);
  display:grid;place-items:center;flex:none;font-weight:700;font-size:.85rem;color:var(--mute)}
.row .bd{min-width:0;flex:1}
.row h3{margin:0 0 2px;font-size:.96rem;letter-spacing:-.015em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row p{margin:0 0 8px;color:var(--mute);font-size:.83rem}
/* Same words as the badges on a token row, so a pad and a token do not
   describe the same state in two different voices. */
.tag{font-size:.66rem;color:var(--mute);border:1px solid var(--line-2);
  border-radius:5px;padding:1px 7px;white-space:nowrap}
.tag.live{color:#17130A;background:var(--sulfur);border-color:var(--sulfur);font-weight:600}
/* Cobalt, not a dimmed grey and not the live yellow. A pad that Padstack can
   read but cannot launch through is neither working nor broken, and painting
   it as either one of those says something untrue about it. */
.tag.soon{color:var(--cobalt);border-color:var(--cobalt-dim);background:rgba(59,130,246,.09)}

/* ---------- footer ---------- */
/* padding-block, never the shorthand: this rule sits after the one that gives
   the page its rail gutter, and a shorthand here zeroed that gutter, so the
   first 200px of the footer sat underneath the rail. */
footer{border-top:1px solid var(--line);margin-top:26px;padding-block:26px 30px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
.fcol h4{margin:0 0 9px;font-size:.78rem;color:var(--mute);font-weight:600;letter-spacing:-.01em}
.fcol a,.fcol span{display:block;color:var(--mute);text-decoration:none;font-size:.84rem;margin-bottom:6px}
.fcol a:hover{color:var(--text)}
.fbot{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line);font-size:.78rem;color:var(--dim);flex-wrap:wrap}
.fbot img{width:20px;height:20px;border-radius:6px;opacity:.8}

@media (min-width:760px){
  body{padding-bottom:0}
  .tabs{display:none}
  .nav{display:flex}
  .wrap{padding:0 24px}
  .heroIn{padding-block:74px 44px;min-height:50vh}
  .dock{bottom:0}
  .stats{grid-template-columns:repeat(4,1fr)}
  .fcols{grid-template-columns:repeat(4,1fr)}
  .pads{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.hero img{opacity:1;transform:none}
}

/* ================= landing ================= */
/* A 16:9 video covering a very tall viewport zooms enormously, so the
   hero is capped rather than left to follow vh alone. */
.vhero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(30rem,86vh,46rem);display:flex;align-items:flex-end}
.vhero video,.vhero .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;z-index:-2;
}
.vhero video{opacity:0;transition:opacity .8s var(--ease)}
.vhero video.ready{opacity:1}
.vhero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(11,14,20,.55) 0%,rgba(11,14,20,.25) 34%,rgba(11,14,20,.88) 82%,var(--ink) 100%)}
.vheroIn{padding-block:56px 34px;width:100%}
.vhero h1{margin:0 0 12px;font-size:clamp(2.3rem,9vw,4.2rem);line-height:1.02;letter-spacing:-.045em;max-width:15ch}
.vhero .lead{margin:0 0 22px;color:#B6BECD;font-size:clamp(1rem,3.6vw,1.18rem);max-width:38ch}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.95rem;
  border-radius:12px;padding:12px 20px;cursor:pointer;border:1px solid transparent;
  transition:transform .16s var(--ease),background .16s,border-color .16s}
.btn:active{transform:scale(.975)}
.btn.primary{background:var(--sulfur);color:#17130A}
.btn.ghost{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.09)}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0D111A}
.ticker .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.ticker .wrap::-webkit-scrollbar{display:none}
.tk{flex:1 0 auto;min-width:132px;padding:14px 16px 14px 0;margin-right:16px;border-right:1px solid var(--line)}
.tk:last-child{border-right:0}
.tk b{display:block;font-size:1.24rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2}
.tk span{font-size:.71rem;color:var(--mute)}

.live{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--mute);margin-bottom:10px}
.live .dot{width:7px;height:7px;border-radius:99px;background:#37D67A;box-shadow:0 0 0 3px rgba(55,214,122,.15);
  animation:pulse 2s var(--ease) infinite}
.feed{display:flex;flex-direction:column;gap:8px}
.fitem{display:flex;align-items:center;gap:11px;background:var(--raise);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;animation:fin .4s var(--ease)}
@keyframes fin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fitem .av{width:30px;height:30px;border-radius:9px;background:#0F141F;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--mute);flex:none}
.fitem .mid{min-width:0;flex:1}
.fitem .t{font-size:.9rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem .s{font-size:.74rem;color:var(--mute)}
.fitem .r{font-size:.7rem;color:var(--dim);white-space:nowrap}

.how{display:grid;gap:10px;grid-template-columns:1fr}
.howc{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:16px}
.howc i{font-style:normal;font-size:.7rem;color:var(--dim);font-variant-numeric:tabular-nums}
.howc h3{margin:6px 0 5px;font-size:1rem;letter-spacing:-.02em}
.howc p{margin:0;color:var(--mute);font-size:.86rem}

@media (min-width:760px){
  .vheroIn{padding-block:90px 52px}
  .how{grid-template-columns:repeat(3,1fr)}
  .tk{min-width:160px}
}

/* ================= premium pass ================= */
/* one soft light source behind every page, so sections sit in a space
   rather than on a flat sheet */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(245,197,24,.055), transparent 62%),
    radial-gradient(48rem 34rem at 6% 8%, rgba(51,85,255,.05), transparent 60%);
}
.sec{padding-block:26px 6px}
.sec h2{font-size:clamp(1.25rem,4.6vw,1.7rem);letter-spacing:-.03em;margin-bottom:5px}
.sec p.sub{font-size:.9rem;margin-bottom:18px;max-width:46ch}

/* section heading with a rule that stops at the text, an editorial device
   rather than a full width divider */
.sec h2::after{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sulfur),transparent);margin-top:9px;
}

.slab,.row,.howc,.stat,.fitem{
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 12px 30px -22px rgba(0,0,0,.9);
}
.slab:hover,.row:hover{border-color:var(--line-2)}
.row{transition:border-color .2s var(--ease),transform .2s var(--ease)}
.row:hover{transform:translateY(-1px)}

.pad{box-shadow:0 10px 26px -22px rgba(0,0,0,.9)}
.pad[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(245,197,24,.35),0 14px 30px -20px rgba(245,197,24,.25)}

.stat{position:relative;overflow:hidden}
.stat::after{
  content:"";position:absolute;right:-28px;top:-28px;width:76px;height:76px;border-radius:99px;
  background:radial-gradient(circle,rgba(245,197,24,.10),transparent 68%);
}
.stat b{margin-bottom:2px}

.tk b{position:relative}
.ticker{background:linear-gradient(180deg,#0D111A,#0A0D14)}

.btn.primary{box-shadow:0 10px 26px -14px rgba(245,197,24,.55)}
.go:not(:disabled){box-shadow:0 10px 26px -14px rgba(245,197,24,.5)}

/* inputs get a focus ring that reads as the brand rather than the OS */
input:focus,select:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(51,85,255,.16);outline:none}
.drop{background:#0C1119}
.drop:focus-visible{border-color:var(--cobalt)}

/* the catalogue icon carries the pad's initials in the brand's slab shape */
.row .ic{background:linear-gradient(180deg,#141A26,#0E131C);color:#8A94A8;letter-spacing:-.02em}

/* tab bar gets a lifted active indicator */
.tabs a{position:relative}
.tabs a[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2px;border-radius:0 0 3px 3px;background:var(--sulfur);
}

/* nav link underline on hover, quiet */
.nav a{position:relative}

footer{background:linear-gradient(180deg,transparent,rgba(255,255,255,.012))}
.fcol h4{color:#69738A}

@media (min-width:760px){
  .sec{padding-block:34px 8px}
  .vhero{min-height:clamp(34rem,90vh,50rem)}
}

/* ================= controls, search, filters ================= */
/* One surface for everything that narrows the list, rather than three loose
   rows of chrome before a visitor reaches a single token. */
.tbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  background:var(--raise);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;margin-bottom:14px;
}
.tbar .search{flex:1 1 16rem;min-width:0}
.search{position:relative}
.search input{padding-left:36px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--dim);fill:none;stroke-width:2;pointer-events:none}

/* ================= skeletons ================= */
.sk{background:var(--raise);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;display:flex;gap:11px;align-items:center;margin-bottom:8px}
.sk .b{background:linear-gradient(90deg,#171E2C,#202a3d,#171E2C);background-size:200% 100%;
  border-radius:7px;animation:shim 1.4s linear infinite}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.sk .av{width:30px;height:30px;border-radius:9px;flex:none}
.sk .l1{height:11px;width:44%;margin-bottom:7px}
.sk .l2{height:9px;width:26%}

/* ================= token detail ================= */
.tdet{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px}
.tdet .head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tdet .logo{width:46px;height:46px;border-radius:13px;background:#0F141F;border:1px solid var(--line-2);
  display:grid;place-items:center;font-weight:700;color:var(--mute);flex:none;object-fit:cover}
.tdet h2{margin:0;font-size:1.3rem;letter-spacing:-.03em}
.tdet h2::after{display:none}
.tdet .sym{color:var(--mute);font-size:.86rem}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.kv div{background:#0D121B;border:1px solid var(--line);border-radius:11px;padding:11px}
.kv b{display:block;font-size:1.02rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kv span{font-size:.71rem;color:var(--mute)}
.addr{display:flex;align-items:center;gap:8px;margin-top:12px;background:#0D121B;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.addr code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.copy{flex:none;background:var(--raise-2);border:1px solid var(--line-2);border-radius:8px;
  padding:5px 10px;font-size:.74rem;cursor:pointer;transition:border-color .16s}
.copy:hover{border-color:#3A465E}

/* ================= the price line ================= */
/* The line wears the pad's spine colour, so a token reads as belonging to the
   pad it launched on here the same way it does in every list. */
.pchart{
  background:#0D121B;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 14px 10px;margin:0 0 14px;
}
.pchart.loading{opacity:.6}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pnow b{display:block;font-size:1.45rem;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.15}
.pnow span{font-size:.75rem;color:var(--mute)}
.pmove.up{color:var(--up)}
.pmove.down{color:var(--down)}
.pranges{display:flex;gap:4px;background:var(--ink-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.prange{
  background:none;border:0;border-radius:6px;padding:4px 9px;cursor:pointer;
  font-size:.75rem;color:var(--mute);font-variant-numeric:tabular-nums;transition:color .16s,background .16s;
}
.prange:hover{color:var(--text)}
.prange.on{background:var(--raise-2);color:var(--text)}

.pplot{margin-top:12px}
.pcanvas{position:relative;touch-action:pan-y}
.pline{display:block;width:100%;height:168px;overflow:visible}
/* Stretched to the panel width, so the stroke has to opt out of the stretch or
   a wide screen draws a thicker line than a narrow one. */
.pstroke{
  fill:none;stroke:var(--spine,var(--cobalt));stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1s var(--ease);
}
.parea{stroke:none}
#pfill stop.a{stop-color:var(--spine,var(--cobalt));stop-opacity:.26}
#pfill stop.b{stop-color:var(--spine,var(--cobalt));stop-opacity:0}
.pcross{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.pcross.on{opacity:1}
.pdot{
  position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--spine,var(--cobalt));box-shadow:0 0 0 3px #0D121B;opacity:0;pointer-events:none;
}
.pdot.on{opacity:1}
/* The high and the low sit over the plot, so they carry the panel's own ground
   behind them: a line that peaks in the corner ran straight through the
   figure that says how high the peak was. */
.pband{position:absolute;inset:0;pointer-events:none;font-size:.68rem;color:var(--mute);
  font-variant-numeric:tabular-nums}
.pband span{position:absolute;right:0;background:#0D121B;border-radius:4px;padding:1px 5px}
.pband .hi{top:-4px}
.pband .lo{bottom:-4px}
/* The whole plot is the target, so the readout works anywhere over the line
   rather than only within a few pixels of it. */
.pgrab{position:absolute;inset:0;cursor:crosshair;border-radius:8px}
.pfoot{
  display:flex;align-items:baseline;gap:8px;margin-top:8px;min-height:18px;
  font-size:.75rem;color:var(--mute);
}
.pfoot b{font-size:.9rem;color:var(--text);font-variant-numeric:tabular-nums}
.pempty{margin-top:12px;padding:22px 4px 16px;text-align:center}
.pempty p{margin:0;font-size:.86rem}
.pempty .sub{margin-top:5px;font-size:.76rem;color:var(--mute)}

/* ================= comparison table ================= */
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raise)}
.cmp table{border-collapse:collapse;width:100%;min-width:640px;font-size:.84rem}
.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp thead th{
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600;
  background:var(--ink-2);position:sticky;top:0;
}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:var(--raise-2)}
.cmp td.pad{position:relative;font-weight:600;letter-spacing:-.01em;padding-left:20px}
.cmp td.pad .spine{
  position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
  background:var(--spine,var(--line-2));
}
.cmp td.num{font-variant-numeric:tabular-nums;text-align:right}
.cmp th:nth-child(5),.cmp th:nth-child(6){text-align:right}
.cmp .yes{color:var(--up)}
.cmp .no{color:var(--dim)}
.cmp .soon{color:var(--cobalt)}

/* ================= toasts ================= */
.toasts{position:fixed;left:16px;right:16px;bottom:calc(var(--tabs) + 12px);z-index:80;
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:rgba(23,30,44,.96);border:1px solid var(--line-2);border-radius:12px;
  padding:11px 14px;font-size:.86rem;box-shadow:0 18px 40px -20px rgba(0,0,0,.95);
  animation:tin .3s var(--ease);pointer-events:none}
.toast.good{border-color:rgba(245,197,24,.45)}
.toast.bad{border-color:rgba(255,110,90,.45)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:760px){
  .toasts{left:auto;right:24px;bottom:24px;width:22rem}
  .kv{grid-template-columns:repeat(4,1fr)}
  .controls{flex-direction:row;align-items:center}
  .search{flex:1;max-width:22rem}
}

/* ================= chains strip ================= */
.chainstrip{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cstrip{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:13px;
  display:flex;align-items:center;gap:10px;transition:border-color .18s,transform .18s var(--ease)}
.cstrip:hover{border-color:var(--line-2);transform:translateY(-1px)}
.cstrip .g{width:32px;height:32px;border-radius:10px;flex:none;display:block;object-fit:cover;
  background:#0F141F;border:1px solid var(--line-2)}
.cstrip b{display:block;font-size:.9rem;letter-spacing:-.015em}
.cstrip span{font-size:.72rem;color:var(--mute)}

/* ================= value props ================= */
.props{display:grid;gap:9px;grid-template-columns:1fr}
.prop{background:var(--raise);border:1px solid var(--line);border-radius:13px;padding:15px}
.prop .ic{width:30px;height:30px;border-radius:9px;background:#141A26;border:1px solid var(--line-2);
  display:grid;place-items:center;margin-bottom:10px}
.prop .ic svg{width:16px;height:16px;stroke:var(--sulfur);fill:none;stroke-width:1.8}
.prop h3{margin:0 0 4px;font-size:.95rem;letter-spacing:-.02em}
.prop p{margin:0;color:var(--mute);font-size:.84rem}

/* ================= faq ================= */
.faq details{background:var(--raise);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:600;font-size:.92rem;letter-spacing:-.015em;list-style:none;
  display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--dim);
  border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq p{margin:10px 0 0;color:var(--mute);font-size:.86rem}

/* ================= quote panel ================= */
.quote{background:linear-gradient(180deg,#141A26,#101520);border:1px solid var(--line-2);
  border-radius:13px;padding:14px;margin-top:12px}
.quote h4{margin:0 0 10px;font-size:.86rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.quote h4.qsep{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow span{font-size:.82rem;color:var(--mute)}
.qrow b{font-size:.88rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.qrow.total b{color:var(--sulfur);font-size:1rem}

/* ================= pad detail ================= */
.pdet .hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pdet .mk{
  width:56px;height:56px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;
  font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--spine,var(--mute));
  background:color-mix(in srgb,var(--spine,var(--line-2)) 12%,var(--raise));
  border:1px solid color-mix(in srgb,var(--spine,var(--line-2)) 34%,transparent);
}
.pdet h2{margin:0;font-size:1.35rem;letter-spacing:-.03em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pdet h2::after{display:none}
.schemaprev{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sfield{font-size:.7rem;color:var(--mute);background:#0E131C;border:1px solid var(--line);
  border-radius:7px;padding:4px 9px}
.sfield b{color:var(--text);font-weight:600}

/* ================= breakdown bars ================= */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:10px;font-size:.83rem}
.bar .n{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t{height:7px;border-radius:99px;background:#151B27;overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--sulfur),rgba(245,197,24,.45));transition:width .6s var(--ease)}
.bar .v{font-variant-numeric:tabular-nums;color:var(--text);font-size:.8rem}

@media (min-width:760px){
  .chainstrip{grid-template-columns:repeat(5,1fr)}
  .props{grid-template-columns:repeat(3,1fr)}
}

/* ================= launch, premium pass ================= */
.lgrid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}

/* step markers become numbered discs joined by a rail */
.slab{padding-left:17px}
.step i{
  display:grid;place-items:center;width:21px;height:21px;border-radius:99px;flex:none;
  background:#151C29;border:1px solid var(--line-2);color:var(--dim);
  font-size:.65rem;font-weight:600;font-variant-numeric:tabular-nums;
  transition:background .25s var(--ease),border-color .25s,color .25s;
}
.slab[data-active="true"] .step i{background:rgba(245,197,24,.14);border-color:var(--sulfur);color:var(--sulfur)}
.slab[data-done="true"] .step i{background:var(--sulfur);border-color:var(--sulfur);color:#17130A}

/* pad cards */
.pad{padding:13px 13px 14px;border-radius:13px;min-height:92px;gap:10px}
.pad .mk{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,#1A2130,#10151F);border:1px solid var(--line-2);
  font-size:.64rem;font-weight:700;color:#8A94A8;letter-spacing:-.02em;
}
.pad .padhead{display:flex;align-items:center;gap:9px;padding-right:40px}
.pad .nm{padding-right:0;font-size:.93rem}
.pad[aria-pressed="true"] .mk{background:linear-gradient(180deg,#2A2413,#171509);border-color:rgba(245,197,24,.5);color:var(--sulfur)}
.pad::after{
  content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,rgba(245,197,24,.10),transparent 46%);transition:opacity .22s var(--ease);
}
.pad[aria-pressed="true"]::after{opacity:1}

/* live token preview */
.preview{
  position:relative;overflow:hidden;background:linear-gradient(165deg,#17202F,#0D121B);
  border:1px solid var(--line-2);border-radius:16px;padding:18px;
}
.preview::before{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:99px;
  background:radial-gradient(circle,rgba(245,197,24,.13),transparent 66%);pointer-events:none;
}
.preview h4{margin:0 0 14px;font-size:.8rem;color:var(--mute);font-weight:600;letter-spacing:-.01em}
.pvhead{display:flex;align-items:center;gap:13px;margin-bottom:14px}
/* A display rule beats the hidden attribute, so an element with hidden set
   still renders as a box. Every toggled element here restates it. */
[hidden]{display:none !important}
.pvlogo{
  width:52px;height:52px;border-radius:15px;flex:none;object-fit:cover;
  background:linear-gradient(180deg,#1B2432,#111823);border:1px solid var(--line-2);
  display:grid;place-items:center;font-weight:700;font-size:1.05rem;color:#6C7689;letter-spacing:-.03em;
}
.pvname{font-size:1.12rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;
  word-break:break-word;color:var(--text)}
.pvname.dim{color:#5B6578}
.pvtick{font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums;margin-top:2px}
.pvmeta{display:flex;flex-wrap:wrap;gap:6px}

/* logo dropzone */
.drop{padding:18px 14px;border-radius:13px;transition:border-color .18s,background .18s,transform .18s var(--ease)}
.drop.over{border-color:var(--sulfur);background:#191A12;transform:scale(1.01)}
.drop img{max-width:60px;max-height:60px;border-radius:11px}

/* dock */
.dock .wrap{gap:14px}
.go{padding:13px 26px;border-radius:12px}

@media (min-width:900px){
  .lgrid{grid-template-columns:1fr 19rem}
  .lgrid .previewcol{position:sticky;top:74px}
}

/* ================= modal ================= */
.scrim{
  position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center;
  background:rgba(6,8,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:0;
}
.scrim.on{display:flex;animation:scrimIn .22s var(--ease)}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:30rem;background:linear-gradient(180deg,#151C2A,#0D121B);
  border:1px solid var(--line-2);border-top-left-radius:20px;border-top-right-radius:20px;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.95);
  animation:sheetIn .3s var(--ease);max-height:88dvh;overflow-y:auto;
}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal .grab{width:36px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 14px}
.modal h3{margin:0 0 4px;font-size:1.08rem;letter-spacing:-.025em}
.modal .sub2{margin:0 0 16px;color:var(--mute);font-size:.85rem}
.modal .foot{display:flex;gap:9px;margin-top:18px}
.modal .foot .btn{flex:1;justify-content:center}

/* toasts must sit above the modal */
.toasts{z-index:90}

/* ================= transaction progress ================= */
.steps{display:flex;flex-direction:column;gap:0}
.pstep{display:flex;gap:12px;align-items:flex-start;padding:9px 0;position:relative}
.pstep:not(:last-child)::before{
  content:"";position:absolute;left:10px;top:31px;bottom:-3px;width:2px;border-radius:2px;
  background:var(--line-2);
}
.pstep.done:not(:last-child)::before{background:var(--sulfur)}
.pstep .dot{
  width:22px;height:22px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:#151C29;border:1px solid var(--line-2);color:var(--dim);font-size:.62rem;font-weight:700;
  transition:background .3s var(--ease),border-color .3s,color .3s;
}
.pstep.active .dot{border-color:var(--sulfur);color:var(--sulfur);background:rgba(245,197,24,.13)}
.pstep.done .dot{background:var(--sulfur);border-color:var(--sulfur);color:#17130A}
.pstep.failed .dot{background:#3A1714;border-color:#FF6E5A;color:#FF6E5A}
.pstep .bd{min-width:0;flex:1}
.pstep b{display:block;font-size:.9rem;font-weight:600;letter-spacing:-.015em;color:var(--dim);transition:color .3s}
.pstep.active b,.pstep.done b{color:var(--text)}
.pstep span{display:block;font-size:.77rem;color:var(--mute);margin-top:1px}
.spin{
  width:11px;height:11px;border-radius:99px;border:2px solid rgba(245,197,24,.3);
  border-top-color:var(--sulfur);animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.pstep.active .dot .spin{display:block}

.txline{display:flex;align-items:center;gap:8px;margin-top:14px;background:#0D121B;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.txline code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;
  color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

@media (min-width:760px){
  .scrim{align-items:center;padding:24px}
  .modal{border-radius:20px}
  .modal .grab{display:none}
}

/* ---------- coming soon gate ----------
   Covers the whole page and has no dismiss control. The stack is the one
   bold element, everything around it stays quiet. */
.gate{
  position:fixed;inset:0;z-index:2147483000;
  display:grid;grid-template-rows:1fr auto;
  background:
    radial-gradient(120% 80% at 50% 8%,rgba(51,85,255,.16),transparent 62%),
    radial-gradient(90% 60% at 50% 104%,rgba(245,197,24,.10),transparent 68%),
    var(--ink);
  overflow:hidden;
  padding:env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom));
}
.gate::after{
  /* fine grain so the large flat field does not band on cheap panels */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:screen;
}
.gate-in{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,4.5vh,38px);text-align:center;min-height:0;
}

/* the stack */
.gate-stage{
  perspective:1000px;perspective-origin:50% 46%;
  width:min(20rem,74vw);height:clamp(11rem,30vh,17rem);
  flex:none;display:grid;place-items:center;
}
.gate-stack{
  position:relative;width:min(15rem,56vw);height:min(15rem,56vw);
  transform-style:preserve-3d;transform:rotateX(60deg) rotateZ(0deg);
  animation:gate-spin 26s linear infinite;
}
@keyframes gate-spin{to{transform:rotateX(60deg) rotateZ(360deg)}}
.gate-slab{
  position:absolute;inset:0;border-radius:20px;transform-style:preserve-3d;
  border:1px solid rgba(146,166,214,.34);
  background:linear-gradient(135deg,rgba(41,51,70,.92),rgba(18,23,34,.92));
  box-shadow:0 0 34px rgba(51,85,255,.18);
  animation:gate-rise .9s var(--ease) backwards;
}
.gate-slab::before{
  /* the underside, which reads as plate thickness at this tilt */
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:#070A10;transform:translateZ(-11px);
}
.gate-slab::after{
  content:'';position:absolute;inset:14px;border-radius:12px;
  border:1px solid rgba(146,166,214,.14);
}
.gate-slab:nth-child(1){transform:translateZ(0px) scale(1)}
.gate-slab:nth-child(2){transform:translateZ(30px) scale(.9);animation-delay:.08s}
.gate-slab:nth-child(3){transform:translateZ(60px) scale(.8);animation-delay:.16s}
.gate-slab:nth-child(4){transform:translateZ(90px) scale(.7);animation-delay:.24s}
.gate-slab:nth-child(5){
  transform:translateZ(124px) scale(.58);animation-delay:.32s;
  border-color:rgba(245,197,24,.6);
  background:linear-gradient(135deg,rgba(245,197,24,.22),rgba(51,85,255,.2));
  box-shadow:0 0 46px rgba(245,197,24,.3);
}
@keyframes gate-rise{from{opacity:0}}

.gate-brand{display:flex;align-items:center;gap:10px}
.gate-brand img{width:30px;height:30px;border-radius:8px;display:block}
.gate-brand b{font-size:1.15rem;font-weight:700;letter-spacing:-.04em}
.gate h1{
  margin:0;font-size:clamp(1.85rem,7.4vw,3.15rem);font-weight:700;
  letter-spacing:-.045em;line-height:1.04;
}
.gate p{
  margin:0;max-width:31rem;color:var(--mute);
  font-size:clamp(.92rem,3.4vw,1.02rem);line-height:1.62;
}
.gate-copy{display:flex;flex-direction:column;align-items:center;gap:12px}
.gate-cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--text);color:var(--ink);font-weight:600;font-size:.9rem;
  padding:11px 20px;border-radius:11px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.gate-form{margin:18px 0 14px;width:100%;max-width:27rem}
.gate-row{display:flex;gap:8px;flex-wrap:wrap}
.gate-row input{
  flex:1 1 13rem;min-width:0;padding:12px 13px;font:inherit;font-size:.86rem;color:var(--text);
  background:rgba(7,11,20,.72);border:1px solid var(--line-2);border-radius:var(--r-sm);
}
.gate-row input::placeholder{color:var(--dim)}
.gate-row input:focus{outline:none;border-color:var(--sulfur)}
.gate-row button{
  flex:0 0 auto;padding:12px 18px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  color:#17130A;background:var(--sulfur);border:1px solid var(--sulfur);border-radius:var(--r-sm);
}
.gate-row button:disabled{opacity:.6;cursor:progress}
.gate-msg{margin:9px 0 0;font-size:.78rem;color:var(--mute);min-height:1.1em}
.gate-msg.good{color:var(--up)}
.gate-msg.bad{color:var(--down)}
.gate-count{margin:4px 0 0;font-size:.74rem;color:var(--dim);font-variant-numeric:tabular-nums}
/* The follow link stops being the one action once there is a form above it. */
.gate-cta.ghost{background:none;color:var(--mute);border:1px solid var(--line-2)}
.gate-cta.ghost:hover{color:var(--text);border-color:var(--slab)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The place somebody already holds, in the brand's own furniture: the spine,
   the sulfur number, the slab ground. It replaces the form rather than sitting
   under it, because there is nothing left to fill in. */
.gate-pass{
  width:100%;max-width:27rem;margin:18px 0 14px;padding:14px 15px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(245,197,24,.05),rgba(7,11,20,.55));
  text-align:left;
}
.gate-pass-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gate-pass-top span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.gate-pass-top b{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--sulfur);
  font-variant-numeric:tabular-nums}
.gate-pass-addr{display:flex;align-items:center;gap:8px;margin-top:9px}
.gate-pass-addr code{font-size:.82rem;color:var(--text);letter-spacing:.01em}
.gate-pass-addr i{width:7px;height:7px;border-radius:99px;flex:none}
.gate-pass-addr i.evm{background:var(--cobalt)}
.gate-pass-addr i.svm{background:#9945FF}
.gate-pass-note{margin:10px 0 0;font-size:.74rem;color:var(--mute)}

.gate-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* quiet strip: the chains the flow will open with */
.gate-foot{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:14px;padding:16px 0 4px;
}
.gate-foot img{width:22px;height:22px;border-radius:50%;display:block;opacity:.44;
  transition:opacity .2s}
.gate-foot img:hover{opacity:.9}

@media (min-width:720px){
  .gate-stage{width:26rem;height:19rem}
  .gate-stack{width:17rem;height:17rem}
}
@media (prefers-reduced-motion:reduce){
  .gate-stack{animation:none;transform:rotateX(60deg) rotateZ(38deg)}
  .gate-slab{animation:none}
  .gate-cta{transition:none}
}

/* ---------- tokens list ---------- */
.tmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.tlive{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--mute)}
.trange{margin-left:auto;font-size:.76rem;color:var(--dim);font-variant-numeric:tabular-nums}
.tnewpill{
  border:1px solid rgba(245,197,24,.4);background:rgba(245,197,24,.1);color:var(--sulfur);
  border-radius:99px;padding:5px 13px;font-size:.76rem;font-weight:600;cursor:pointer;
  animation:gate-rise .3s var(--ease);
}
.tnewpill:hover{background:rgba(245,197,24,.18)}

/* one continuous ledger rather than a grid of floating cards */
.tlist{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--raise)}
.trow{
  position:relative;display:grid;gap:6px 12px;align-items:center;
  grid-template-columns:38px minmax(0,1fr) auto;
  grid-template-areas:"av id price" "st st st";
  padding:13px 14px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .16s;
}
/* The headings are hidden at this width: with the figures stacked under each
   row there is no column for them to head, and each cell carries its own
   label instead. */
.thead{display:none}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--raise-2)}
.trow::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:transparent;transition:background .16s;
}
.trow:hover::before{background:var(--sulfur)}
.trank{display:none;grid-area:rank;color:var(--dim);font-size:.78rem;
  font-variant-numeric:tabular-nums;text-align:right}
.tav{grid-area:av;width:38px;height:38px;border-radius:11px;
  background:var(--raise-2);border:1px solid var(--line-2)}
img.tav{display:block;object-fit:cover}
div.tav{display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;color:var(--slab)}
.tid{grid-area:id;min-width:0;display:flex;flex-direction:column;gap:4px}
.tid b{font-size:.94rem;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ttags em{font-style:normal;font-size:.74rem;font-weight:600;color:var(--mute);
  letter-spacing:.02em}
.ttags img{width:14px;height:14px;border-radius:50%;display:block;opacity:.85}
.tpad{font-size:.68rem;color:var(--mute);background:var(--raise-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;white-space:nowrap}
.tphase{font-size:.68rem;border-radius:5px;padding:1px 6px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--mute)}
.tphase.graduated{border-color:rgba(245,197,24,.4);color:var(--sulfur)}
.tphase.live{border-color:rgba(51,85,255,.45);color:#8AA0FF}
.tprice{grid-area:price;font-size:.94rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tstats{grid-area:st;display:flex;gap:18px;padding-top:4px}
.tcell{display:flex;flex-direction:column;gap:1px;min-width:0}
.tcell b{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.tcell i{font-style:normal;font-size:.66rem;color:var(--dim)}
/* Nothing reported. Stacked, the cell would be a label with no figure, so it
   goes; in columns it has to stay, or the rows below stop lining up. */
.tcell.none{display:none}

/* The table layout is decided by the width of the LIST, not of the window.
   A viewport media query put the seven column table inside the six hundred
   pixel column on a token page, where the name had seventy pixels and every
   row read "ST...".

   The heading is a sibling of the list rather than inside it, so it asks the
   section instead. Both come out the same because they are the same width,
   and a browser without container queries keeps the stacked layout, which is
   the one that works everywhere. */
.wrap.sec{container-type:inline-size}
.tlist{container-type:inline-size}

@container (min-width:820px){
  .thead,.trow{
    grid-template-columns:34px 40px minmax(0,1fr) 7rem 7rem 7rem 5.5rem;
    grid-template-areas:none;
  }
  .thead{
    display:grid;gap:12px;align-items:center;padding:0 14px 8px;
    font-size:.7rem;color:var(--dim);
  }
  /* The stacked layout places every child by name. Those names do not exist in
     this template, so each one has to go back to flowing in source order or
     the row scatters across rows of its own. */
  .trow > *{grid-area:auto}
  .thead > *{text-align:right}
  .thead > :nth-child(2){text-align:left;grid-column:span 2}
  .thsort{
    background:none;border:0;padding:0;font:inherit;color:var(--dim);cursor:pointer;
    transition:color .16s;
  }
  .thsort:hover{color:var(--text)}
  .thsort[aria-sort="descending"]{color:var(--sulfur)}
  .trank{display:block;text-align:right}
  /* The three figures stop being a group of their own and become columns of
     the row, which is the only way they line up with the heading above. */
  .tstats{display:contents}
  .tcell{display:block;text-align:right}
  .tcell.none{display:block}
  .tcell i{display:none}
  .tcell b{font-size:.86rem;font-weight:500;color:var(--mute)}
  .tprice{font-size:.9rem;text-align:right}
  .trow{padding:12px 16px}
  .thead{padding:0 16px 8px}
  .tav{width:40px;height:40px}
  .tid{gap:3px}
}

/* a live arrival announces itself once, then settles */
.trow.tnew{animation:tnew 2.4s var(--ease)}
@keyframes tnew{
  0%{background:rgba(245,197,24,.14);opacity:0;transform:translateY(-6px)}
  12%{opacity:1;transform:none}
  100%{background:transparent}
}

.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 0 4px}
.pbtn{
  background:var(--raise-2);border:1px solid var(--line-2);border-radius:9px;
  padding:8px 15px;font-size:.82rem;font-weight:500;cursor:pointer;
  transition:border-color .16s,background .16s;
}
.pbtn:hover:not(:disabled){border-color:#36415A;background:#1C2433}
.pbtn:disabled{opacity:.36;cursor:default}
.pnum{font-size:.78rem;color:var(--mute);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .trow.tnew{animation:none}
  .tnewpill{animation:none}
}

/* a chain with no mark on disk still gets a readable badge */
.cmark{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--raise-2);border:1px solid var(--line-2);
  color:var(--slab);font-size:.6rem;font-weight:700;line-height:1;flex:none;
}
.fcol a,.fcol span{display:block}

/* ---------- launch wizard ----------
   One step on screen at a time. The card on the right is the only thing that
   moves on its own, everything else stays still and quiet. */
.wizwrap{padding-top:22px;padding-bottom:26px}

.wrail{display:flex;align-items:center;gap:6px;list-style:none;margin:0 0 22px;padding:0;
  overflow-x:auto;scrollbar-width:none}
.wrail::-webkit-scrollbar{display:none}
.wrail li{display:flex;align-items:center;gap:6px;flex:none}
.wrail b{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--raise);
  font-size:.68rem;font-weight:700;color:var(--dim);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.wrail span{font-size:.76rem;color:var(--dim);white-space:nowrap;transition:color .25s}
.wrail li[data-state="on"] b{background:var(--sulfur);border-color:var(--sulfur);color:var(--ink)}
.wrail li[data-state="on"] span{color:var(--text);font-weight:600}
.wrail li[data-state="done"] b{background:var(--raise-2);border-color:var(--slab);color:var(--text)}
.wrail li[data-state="done"] span{color:var(--mute)}
.wrail i{width:16px;height:1px;background:var(--line-2);flex:none;display:block}
.wrail li:last-child i{display:none}

.wstage{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}

/* The panels share one cell so a step leaving and a step arriving overlap.
   Only the current one is in flow: every panel sitting in the same grid cell
   made the cell as tall as the TALLEST step, so the short steps carried a
   void under them, 270px of it on the review step at desktop width. */
.wpanels{display:grid;border:0;padding:0;margin:0;position:relative}
.wpanel{
  grid-area:1 / 1;border:0;margin:0;padding:0;min-width:0;
  position:absolute;top:0;left:0;right:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(28px,0,0) rotateY(-7deg);
  transform-origin:left center;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.wpanel.on{
  position:relative;opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.wpanel.back{transform:translate3d(-28px,0,0) rotateY(7deg)}
.wpanel h2{margin:0 0 6px;font-size:1.32rem;letter-spacing:-.035em}
.wpanel .sub{margin:0 0 14px}
.wpanel .pill{margin-bottom:14px}

.chainpick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.cpick{
  display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:var(--raise);border:1px solid var(--line);border-radius:13px;padding:13px 14px;
  transition:border-color .18s,background .18s,transform .18s var(--ease);
}
.cpick:hover{border-color:var(--slab);transform:translateY(-2px)}
.cpick[aria-pressed="true"]{border-color:var(--sulfur);background:var(--raise-2)}
.cpick img,.cpick .cmark{width:26px;height:26px;border-radius:50%;flex:none}
.cpick b{font-size:.92rem;font-weight:600}
.cpick span{display:block;font-size:.7rem;color:var(--dim)}

/* the 3D token card */
.wpreview{display:flex;flex-direction:column;gap:16px;align-items:center}
.pvstage{perspective:900px;width:100%;max-width:22rem}
/* Under the card: what the pad charges, asked as soon as a pad is picked. The
   column used to end at the card and leave the rest of the page empty. */
.pvcost{width:100%;max-width:22rem}
.pvcost{
  background:#0D121B;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
}
.pvcost h4{margin:0 0 8px;font-size:.72rem;font-weight:600;color:var(--dim)}
.pvrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:5px 0;font-size:.8rem;color:var(--mute);
}
.pvrow > span{flex:none;white-space:nowrap}
.pvrow b{flex:1 1 auto;min-width:0;color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right}
.pvrow.dim{color:var(--dim);justify-content:flex-start}
.pvcard{
  position:relative;transform-style:preserve-3d;
  transition:transform .4s var(--ease);
}
.pvcard .pvface{border-left:3px solid var(--spine,transparent)}
.pvface{
  position:relative;border-radius:18px;padding:20px;transform-style:preserve-3d;
  border:1px solid var(--line-2);
  background:linear-gradient(150deg,var(--raise-2),var(--raise) 62%);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.pvface::before{
  /* the card's edge, which is what makes it read as an object rather than a box */
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:#070A10;transform:translateZ(-14px);
}
.pvface::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.10),transparent 42%);
}
.pvhead{display:flex;align-items:center;gap:12px;transform:translateZ(26px)}
.pvid{min-width:0}
.pvmeta{transform:translateZ(16px)}

@media (min-width:880px){
  .wstage{grid-template-columns:minmax(0,1fr) 22rem;gap:34px}
  .wpreview{position:sticky;top:78px}
}

.wnav{display:flex;align-items:center;gap:12px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line)}
.wnote{font-size:.76rem;color:var(--dim);margin-left:auto;text-align:right}
.wnext{
  background:var(--sulfur);color:var(--ink);border:0;border-radius:11px;
  padding:11px 22px;font-size:.9rem;font-weight:700;cursor:pointer;
  transition:transform .18s var(--ease),opacity .18s,box-shadow .18s;
}
.wnext:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,197,24,.28)}
.wnext:disabled{opacity:.32;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){
  .wpanel{transition:opacity .2s}
  .wpanel,.wpanel.back{transform:none}
  .pvcard{transform:none;transition:none}
  .cpick:hover,.wnext:hover:not(:disabled){transform:none}
}

/* the wizard's own column should not stretch to the sticky preview's height */
.wstage{align-items:start}
.wpanels{align-self:start}
.wpanel.on{min-height:0}

/* a stronger resting angle, so the card reads as an object before it moves */
.pvcard{transform:rotateX(6deg) rotateY(-11deg)}
.pvface{padding:22px}
/* a lit edge along the top, which is what sells the thickness */
.pvface{border-top-color:rgba(255,255,255,.16)}

/* stronger depth: a tighter perspective and a thicker visible edge */
.pvstage{perspective:680px}
.pvcard{transform:rotateX(7deg) rotateY(-15deg)}
.pvface::before{transform:translateZ(-20px);inset:-1px;background:#05070C;
  box-shadow:0 30px 50px rgba(0,0,0,.6)}
.pvhead{transform:translateZ(34px)}
.pvmeta{transform:translateZ(22px)}

/* A panel waiting its turn is parked to one side for the slide, which widened
   the page on a narrow screen. Clip that axis only: `clip` does not create a
   scroll container the way `hidden` would, and vertical content stays visible. */
.wpanels{overflow-x:clip;overflow-y:visible}

/* the wallet picker, shown only when more than one is installed */
.wpick{display:grid;gap:10px;margin:4px 0 2px}
.wpick .cpick{width:100%}
.wpick img{width:26px;height:26px;border-radius:7px;flex:none}

/* ---------- token page and trading ---------- */
.tokgrid{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media (min-width:880px){
  .tokgrid{grid-template-columns:minmax(0,1fr) 20rem;gap:26px}
  .tradecol{position:sticky;top:78px}
}
.trade{
  border:1px solid var(--line-2);border-radius:16px;padding:16px;
  background:linear-gradient(170deg,var(--raise-2),var(--raise) 70%);
}
.tabs2{display:flex;gap:4px;background:var(--ink);border:1px solid var(--line);
  border-radius:11px;padding:3px;margin-bottom:14px}
.tb{
  flex:1;background:transparent;border:0;border-radius:8px;padding:8px 0;
  font-size:.86rem;font-weight:600;color:var(--mute);cursor:pointer;
  transition:background .16s,color .16s;
}
.tb[aria-selected="true"]{background:var(--raise-2);color:var(--text)}
.amtrow{display:flex;align-items:center;gap:8px;background:var(--ink);
  border:1px solid var(--line-2);border-radius:11px;padding:10px 12px}
.amtrow input{flex:1;min-width:0;background:transparent;border:0;outline:none;
  font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.amtrow .unit{font-size:.78rem;font-weight:600;color:var(--mute);flex:none}
/* What the wallet holds, directly above the amounts that take a share of it,
   because a percentage of a number you cannot see is not an offer. */
.held{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin:0;font-size:.74rem;color:var(--dim)}
.held b{font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}

/* A wallet name with the network it signs on under it, so one list can offer
   an evm wallet and a solana wallet without them reading as the same thing. */
.cpname{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.cpname em{font-style:normal;font-size:.68rem;color:var(--dim)}

/* ---------- padstack's own launch pack ---------- */
.kitrow{
  padding:13px 15px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raise);
}
.kittop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.kittop b{font-size:.84rem;letter-spacing:-.01em}
.kittop .btn{padding:4px 11px;font-size:.72rem}
.kitval{margin:0;font-size:.82rem;line-height:1.62;color:var(--mute);
  white-space:pre-wrap;word-break:break-word}
.kitrow.long .kitval{max-width:70ch}
/* A field nobody has written yet reads as a prompt, not as content. */
.kitval.empty{color:var(--dim);font-style:italic}
/* The announcement reads as the thing that will be pasted, so it keeps the
   line breaks it will go out with rather than reflowing as prose. */
.postrow{border-color:var(--line-2);background:var(--ink-2)}
.postrow .kitval{max-width:62ch;color:var(--text);font-size:.85rem;line-height:1.72}
.kitcount{margin-left:auto;margin-right:10px;font-size:.7rem;color:var(--dim);
  font-variant-numeric:tabular-nums}
#v-kit .pdh:first-child{margin-top:4px}

/* ---------- prepare a launch for a pad that cannot take one yet ---------- */
.preparegrid{display:grid;gap:20px;align-items:start}
@media (min-width:1000px){
  .preparegrid{grid-template-columns:minmax(0,1fr) 20.5rem}
  /* The pack follows you down a long form, because the count of what is still
     missing is the reason to look at it. */
  .preparepack{position:sticky;top:84px}
}
.packcard{
  display:flex;flex-direction:column;gap:11px;padding:16px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--raise);
}
.packcard h4{margin:0;font-size:.92rem;letter-spacing:-.015em}
.packcount{font-size:1.28rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.packstill{font-size:.72rem;color:var(--dim);text-transform:none}
.packcard .ps-notes{margin:0}
.packtext{
  margin:0;padding:11px;max-height:16rem;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);
  font-size:.72rem;line-height:1.55;color:var(--mute);white-space:pre-wrap;word-break:break-word;
}
.soonacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.soonbox .soonacts .btn{margin-top:0}
#v-prepare .ps-wrap{display:block}

/* ---------- the connected wallet ---------- */
/* Clicking the wallet used to sign you out, so the only way to read your own
   address was to lose your session. This is what it shows instead. */
.wdetail{display:flex;flex-direction:column;gap:0}
.waddr{display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:10px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink-2)}
.waddr code{flex:1;min-width:0;font-size:.74rem;color:var(--text);
  word-break:break-all;line-height:1.45}
.wdrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-top:1px solid var(--line)}
.wdrow span{font-size:.74rem;color:var(--dim)}
.wdrow b{font-size:.78rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
.quick{display:flex;gap:6px;margin:9px 0 12px;flex-wrap:wrap}
.quick button{
  background:var(--raise);border:1px solid var(--line);border-radius:8px;
  padding:5px 11px;font-size:.74rem;color:var(--mute);cursor:pointer;
  transition:border-color .16s,color .16s;
}
.quick button:hover{border-color:var(--slab);color:var(--text)}
/* An amount that cannot be worked out yet. Still there, because a row that
   empties itself reads as a broken panel, and still says why when tapped. */
.quick button.idle{color:var(--dim);border-style:dashed}
.qout{
  border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:12px;
  font-size:.82rem;color:var(--mute);min-height:2.6rem;background:var(--ink);
}
.qout b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.qout .warn{color:var(--sulfur)}
.trade .wnext{width:100%}
.trade .hint{margin:10px 0 0;text-align:center}

/* A grid child defaults to min-width:auto, so it refuses to shrink below its
   widest content and a long contract address pushed the whole page sideways. */
.tokgrid > *{min-width:0}
.tdet .addr code,.tdet code{overflow-wrap:anywhere}
.tdet .kv{min-width:0}
.tdet .kv b{overflow-wrap:anywhere}
.tlinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tdet .sym{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* the badge sat in a column container and stretched the full width */
.tdet h2{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tdet h2 .tphase{font-size:.62rem;flex:none;align-self:center}
.qout .alt{margin-top:6px;font-size:.74rem;color:var(--dim)}
.qout .alt.warn{color:var(--sulfur)}

/* the trade confirmation */
.confirm{display:block;margin:2px 0 4px}
.confirm .qrow{padding:8px 0}
.confirm .qrow span{font-size:.84rem}
.confirm .qrow b{font-size:.88rem;font-variant-numeric:tabular-nums}
.confirm .hint{margin:12px 0 0;text-align:left}
.confirm .qrow b.warn{color:var(--sulfur)}
.confirm .hint.warn{color:var(--sulfur)}
/* a token with only one or two reported figures should not look broken */
.tstats:empty{display:none}

/* ---------- dashboard, the personal half ---------- */
.mine{
  border:1px solid var(--line-2);border-radius:16px;padding:16px;margin:18px 0;
  background:linear-gradient(170deg,var(--raise-2),var(--raise) 70%);
}
.minehead{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.minehead h3{margin:0;font-size:1.05rem;letter-spacing:-.03em}
.minewho{font-size:.76rem;color:var(--mute);font-variant-numeric:tabular-nums}
.mine .stats{margin-bottom:14px}
.feehead{margin:18px 0 10px;font-size:.86rem;font-weight:600}

.lrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.lrow:last-child{border-bottom:0}
.lrow .lsym{font-weight:600;font-size:.9rem}
.lrow .lname{color:var(--mute);font-size:.8rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lstate{
  font-size:.66rem;border-radius:5px;padding:2px 7px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--mute);
}
.lrow .lstate.live{border-color:rgba(51,85,255,.45);color:#8AA0FF}
.lrow .lstate.failed{border-color:rgba(255,110,90,.45);color:#FF8F7C}
.lrow .lstate.prepared{border-color:rgba(245,197,24,.45);color:var(--sulfur)}
.lrow .lright{margin-left:auto;display:flex;align-items:center;gap:8px}
.lrow a.lopen{font-size:.76rem;color:var(--sulfur);text-decoration:none}
.lrow a.lopen:hover{text-decoration:underline}

.frow{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.frow:last-child{border-bottom:0}
.frow .fsym{font-weight:600;font-size:.86rem}
.frow .fpad{font-size:.68rem;color:var(--mute);background:var(--ink);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.frow .famt{margin-left:auto;font-weight:600;font-size:.88rem;
  font-variant-numeric:tabular-nums}
.frow .fstate{margin-left:auto;font-size:.74rem;color:var(--dim)}

/* ---------- token page, given the same weight as the launch card ----------
   The card sits in perspective and lifts toward a mouse. The stat tiles carry
   the depth rather than a flat border, and the logo stands off the surface. */
.tokgrid{perspective:1100px}
.tdet{
  position:relative;transform-style:preserve-3d;
  background:linear-gradient(160deg,var(--raise-2),var(--raise) 64%);
  border-color:var(--line-2);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tdet::before{
  /* the card's edge, which is what stops it reading as a flat panel */
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:#06090F;transform:translateZ(-16px);
}
.tdet::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 44%);
}
.tdet > *{position:relative}
.tdet .head{transform:translateZ(28px)}
.tdet .logo{
  width:52px;height:52px;
  box-shadow:0 10px 22px rgba(0,0,0,.5);
  transition:transform .45s var(--ease);
}
.tdet:hover .logo{transform:translateZ(20px) scale(1.04)}

.tdet .kv{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  transform:translateZ(14px);
}
.tdet .kv > div{
  background:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;
  transition:transform .3s var(--ease),border-color .3s;
}
.tdet .kv > div:hover{transform:translateY(-3px);border-color:var(--slab)}
.tdet .kv b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tdet .kv span{display:block;margin-top:3px;font-size:.7rem;color:var(--dim)}

.tdet .addr{transform:translateZ(10px)}
.tdet .tlinks{transform:translateZ(10px)}

/* the trade panel gets the same treatment so the two halves belong together */
.trade{
  transform-style:preserve-3d;
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  transition:transform .45s var(--ease);
}
.tradecol{perspective:1100px}

/* the whole page arrives rather than appearing */
.tdet,.tradecol{animation:tokenIn .5s var(--ease) backwards}
.tradecol{animation-delay:.08s}
@keyframes tokenIn{
  from{opacity:0;transform:translateY(14px) rotateX(6deg)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .tdet,.tradecol{animation:none}
  .tdet,.trade,.tdet .logo,.tdet .kv > div{transition:none;transform:none}
  .tdet:hover .logo,.tdet .kv > div:hover{transform:none}
}

/* the quote, as rows rather than a paragraph */
.qout{padding:13px 14px;transition:opacity .25s}
.qout.stale{opacity:.45}
.qempty{font-size:.82rem;color:var(--mute)}
.qhead{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.qlabel{font-size:.72rem;color:var(--dim)}
.qbig{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.qbig b{font-size:1.32rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.qbig span{font-size:.8rem;color:var(--mute);font-weight:600}
/* The dollar figure sits under the amount rather than beside it. Beside it,
   two numbers of similar weight compete and neither is read first. */
.qworth{font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums}
.qrows{display:flex;flex-direction:column;gap:1px}
.qline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0;border-top:1px solid var(--line)}
.qline span{font-size:.74rem;color:var(--dim)}
.qline b{font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
.qline b.warn{color:var(--sulfur)}
.qnote{margin-top:9px;font-size:.72rem;color:var(--dim)}
.qnote.warn{color:var(--sulfur)}

/* every route that answered, so the price used is never the only one seen */
.qvenues{margin-bottom:12px}
.qvlabel{font-size:.7rem;color:var(--dim);margin-bottom:6px}
.qvenue{
  display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--ink);margin-bottom:6px;
}
.qvenue:last-child{margin-bottom:0}
.qvenue.on{border-color:rgba(245,197,24,.45);background:rgba(245,197,24,.06)}
.qvenue.quoteonly{opacity:.62}
.qvname{font-size:.78rem;font-weight:600}
.qvamt{margin-left:auto;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.qvunit{font-size:.68rem;color:var(--dim)}
.qvtag{font-size:.62rem;color:var(--dim);border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px;white-space:nowrap}
.qvenue.on .qvtag{border-color:rgba(245,197,24,.4);color:var(--sulfur)}

/* What else is on the same pad. It exists to fill the column left beside a
   tall trade panel on a wide screen. On a phone there is no such column: the
   panel stacks underneath, so this would only make a long page longer. */
.alsofrom{display:none}
@media (min-width:880px){
  .alsofrom{display:block;margin-top:20px;animation:tokenIn .5s var(--ease) .14s backwards}
}
.alsofrom h3{margin:0 0 12px;font-size:.98rem;letter-spacing:-.03em}
@media (prefers-reduced-motion:reduce){ .alsofrom{animation:none} }

/* ---------- an empty screen that says what belongs here ---------- */
.blank{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:38px 20px;
  border:1px solid var(--line);border-radius:16px;
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(51,85,255,.10),transparent 70%),
    var(--raise);
}
/* the same stack the brand is built on, at rest */
.blankmark{
  display:grid;gap:3px;place-items:center;margin-bottom:4px;
  transform:rotateX(52deg) rotateZ(38deg);transform-style:preserve-3d;
}
.blankmark i{
  display:block;width:44px;height:44px;border-radius:10px;
  border:1px solid rgba(146,166,214,.28);
  background:linear-gradient(135deg,rgba(41,51,70,.9),rgba(18,23,34,.9));
}
.blankmark i:nth-child(2){width:36px;height:36px;opacity:.75}
.blankmark i:nth-child(3){width:28px;height:28px;opacity:.5;
  border-color:rgba(245,197,24,.45)}
.blank h3{margin:0;font-size:1.02rem;letter-spacing:-.03em}
.blank p{margin:0;max-width:27rem;font-size:.84rem;color:var(--mute);line-height:1.6}
.blankgo{
  margin-top:6px;display:inline-flex;align-items:center;
  background:var(--text);color:var(--ink);border:0;border-radius:10px;
  padding:9px 18px;font-size:.84rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.blankgo.ghost{background:var(--raise-2);color:var(--text);border:1px solid var(--line-2);margin-left:8px}
.blankgo.ghost:hover{border-color:#3A465E}
.blankgo:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(0,0,0,.45)}

/* the controls should read as one row on a wide screen, not drift apart */
@media (min-width:720px){
  .controls{flex-direction:row;align-items:center;gap:12px}
  .controls .search{flex:1;min-width:0;max-width:26rem}
  .sorts{margin-left:auto;flex:none}
}
@media (prefers-reduced-motion:reduce){
  .blankgo:hover{transform:none}
}

/* A heading for a panel that is not a numbered step. The step component draws
   its marker as a circle, which rendered as an empty ring when there was no
   number to put in it. */
.slabhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.slabhead b{font-size:.94rem;font-weight:600;letter-spacing:-.02em}
.slabhead em{font-style:normal;font-size:.74rem;color:var(--dim);margin-left:auto}

/* ---------- notifications ---------- */
.bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;
  background:var(--raise-2);border:1px solid var(--line-2);border-radius:10px;
  cursor:pointer;transition:border-color .16s,background .16s;
}
.bell:hover{border-color:#36415A;background:#1C2433}
.bell svg{width:17px;height:17px;stroke:var(--mute);fill:none;stroke-width:1.7}
.bell[aria-expanded="true"] svg{stroke:var(--text)}
.bellcount{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--sulfur);color:var(--ink);
  font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums;
  border:2px solid var(--ink);
}

.inbox{
  position:absolute;top:calc(100% + 8px);right:16px;z-index:70;
  width:min(22rem,calc(100vw - 32px));max-height:60vh;overflow-y:auto;
  background:var(--raise);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 20px 44px rgba(0,0,0,.55);
  animation:inboxIn .18s var(--ease);
}
@keyframes inboxIn{from{opacity:0;transform:translateY(-6px)}}
.inboxhead{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--raise);
}
.inboxhead b{font-size:.88rem}
.inboxread{
  margin-left:auto;background:transparent;border:0;cursor:pointer;
  font-size:.74rem;color:var(--sulfur);
}
.inboxread:hover{text-decoration:underline}
.note{
  display:block;padding:12px 14px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .14s;
}
.note:last-child{border-bottom:0}
.note:hover{background:var(--raise-2)}
.note.unread{background:rgba(245,197,24,.045)}
.note .ntitle{display:flex;align-items:baseline;gap:7px;font-size:.85rem;font-weight:600}
.note .ndot{width:6px;height:6px;border-radius:99px;background:var(--sulfur);flex:none}
.note .nbody{margin-top:3px;font-size:.76rem;color:var(--mute);line-height:1.5;
  overflow-wrap:anywhere}
.note .nwhen{margin-top:5px;font-size:.68rem;color:var(--dim)}
.note .nops{font-size:.6rem;color:var(--dim);border:1px solid var(--line-2);
  border-radius:4px;padding:0 5px;margin-left:auto}
.note.warn .ndot{background:#FF8F7C}
.note.critical .ndot{background:#FF6E5A}
.inbox .empty{padding:20px 14px;text-align:center}
@media (prefers-reduced-motion:reduce){ .inbox{animation:none} }

/* $PAD pinned. One sulfur accent, as the mark allows, and nothing else shouts. */
.padpin{margin:0 auto 6px;max-width:var(--wrap,1180px);padding:0 20px}
.padpin-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(245,197,24,.08),rgba(245,197,24,0) 42%),#161B25;
  border:1px solid #232A38;border-left:3px solid #F5C518;border-radius:12px;padding:13px 16px}
.padpin-logo{width:34px;height:34px;border-radius:9px;flex:0 0 auto;object-fit:cover;background:#10131A}
.padpin-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.padpin-sym{font-weight:700;font-size:15px;letter-spacing:-.02em;color:#E4E7EC}
.padpin-sub{font-size:12px;color:#79839A}
.padpin-ca{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.padpin-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#AEB7C8;
  background:#10131A;border:1px solid #232A38;border-radius:8px;padding:7px 10px;
  max-width:100%;overflow-wrap:anywhere}
.padpin-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#79839A}
.padpin-dot{width:6px;height:6px;border-radius:50%;background:#F5C518}
.padpin-stats{display:flex;gap:16px;font-size:12px;color:#79839A}
.padpin-stats b{color:#E4E7EC;font-weight:600}
@media (max-width:760px){
  .padpin-ca{margin-left:0;width:100%}
  .padpin-in{gap:12px}
}


/* trade card, premium pass 2026-09-17 ----------------------------------------
   Styling only. Nothing here changes what the card does, which matters because this is the
   path that signs transactions. Appended last so single-class rules win on order, not on
   specificity, and every earlier rule stays readable where it is. */

.trade{
  position:relative;
  background:linear-gradient(180deg,var(--raise) 0%,var(--ink-2) 62%);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -34px rgba(0,0,0,.95);
}
/* a hairline of light along the top edge, the cheap trick that reads as glass */
.trade::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,transparent,rgba(245,197,24,.45),transparent);
  pointer-events:none;
}

/* segmented control: the selected side is unmistakable, and buy and sell carry their own
   meaning rather than both reading as neutral grey */
.tabs2{
  gap:0;padding:4px;background:var(--ink);border:1px solid var(--line);
  border-radius:12px;margin-bottom:14px;
}
.tb{
  flex:1;padding:9px 0;border-radius:9px;font-size:.86rem;font-weight:600;letter-spacing:-.01em;
  color:var(--mute);background:transparent;border:0;cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.tb:hover:not([aria-selected="true"]){color:var(--text)}
.tb[aria-selected="true"]{
  background:var(--raise-2);color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 16px -10px rgba(0,0,0,.9);
}
.tb[data-side="buy"][aria-selected="true"]{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,inset 0 -2px 0 var(--up)}
.tb[data-side="sell"][aria-selected="true"]{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,inset 0 -2px 0 var(--down)}
.tb:focus-visible{outline:2px solid var(--sulfur);outline-offset:-2px}

/* the amount. It was a tall empty slab; now the figure is the biggest thing on the card and
   the unit sits beside it as a chip rather than floating as loose text. */
.trade .f > span{display:block;font-size:.72rem;color:var(--dim);margin-bottom:7px;letter-spacing:.01em}
.amtrow{
  gap:10px;background:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:12px 12px 12px 14px;min-height:0;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.amtrow:focus-within{border-color:var(--sulfur);box-shadow:0 0 0 3px rgba(245,197,24,.12)}
.amtrow input{
  font-size:1.6rem;font-weight:600;letter-spacing:-.03em;line-height:1.15;
  color:var(--text);font-variant-numeric:tabular-nums;padding:0;
}
.amtrow input::placeholder{color:var(--dim)}
.amtrow .unit{
  font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--text);
  background:var(--raise-2);border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;
}

.held{margin:8px 1px 0;font-size:.74rem;color:var(--dim)}

/* quick amounts, sized to be tapped */
.quick{gap:7px;margin:12px 0 12px}
.quick button{
  flex:1;min-width:0;padding:8px 0;border-radius:9px;font-size:.78rem;font-weight:600;
  color:var(--mute);background:var(--raise);border:1px solid var(--line);
  transition:border-color .14s ease,color .14s ease,background .14s ease;
}
.quick button:hover{border-color:var(--sulfur);color:var(--text);background:var(--raise-2)}
.quick button:focus-visible{outline:2px solid var(--sulfur);outline-offset:2px}

/* the quote. Reserved height so an arriving price does not shove the button down the page. */
.qout{
  background:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;min-height:58px;display:flex;flex-direction:column;justify-content:center;
}
.qempty{color:var(--dim);font-size:.8rem}
.qbig b{font-size:1.24rem}

/* the commit button carries the one accent, and says so */
.trade .wnext{
  width:100%;margin-top:12px;border-radius:12px;padding:13px 0;
  font-weight:700;letter-spacing:-.01em;
}
.trade .hint{margin-top:10px;font-size:.72rem;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .tb,.amtrow,.quick button{transition:none}
}


/* the pinned own-token card */
.tcard.is-ours{border-color:rgba(245,197,24,.4);box-shadow:0 0 0 1px rgba(245,197,24,.16) inset}
.ourstag{position:absolute;top:10px;right:10px;z-index:2;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:lowercase;
  color:#10131A;background:var(--sulfur);border-radius:6px;padding:3px 7px;pointer-events:none}
.tcard{position:relative}


/* ticker tiles, premium pass 2026-09-17 --------------------------------------
   Four figures, so each one gets room and the numbers carry the weight. The dividing rules
   were doing the work that space should do, so they are lighter and the type is heavier. */
.ticker{margin:0 auto}
.ticker .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:linear-gradient(180deg,var(--raise) 0%,var(--ink-2) 100%);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 22px 56px -38px rgba(0,0,0,.95);
  overflow:hidden;
}
.tk{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:18px 20px;min-width:0;
}
.tk + .tk::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.tk b{
  font-size:1.6rem;font-weight:700;letter-spacing:-.035em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.tk span{font-size:.74rem;color:var(--dim);letter-spacing:.01em}
/* the first figure carries the one accent, as the mark allows */
.tk:first-child b{color:var(--sulfur)}

@media (max-width:900px){
  .ticker .wrap{grid-template-columns:repeat(2,1fr)}
  .tk:nth-child(3)::before,.tk:nth-child(2n+1)::before{display:none}
  .tk:nth-child(n+3){border-top:1px solid var(--line-2)}
}
@media (max-width:420px){
  .tk{padding:14px 15px}
  .tk b{font-size:1.35rem}
}

/* where a figure came from, said quietly */
.gtnote{margin:10px 0 0;font-size:.7rem;color:var(--dim);line-height:1.5}