/* SPROUT
   Design tokens measured directly off useorigin.com's computed styles.
   Display  : Bricolage Grotesque 500 (was Fraunces 300; one edit in :root to swap)
   Body     : Suisse Intl 300   -> Inter 300, 16/24, rgba(255,255,255,.6)
   Labels   : Roboto Mono 12px UPPERCASE ls .25px
   Radii    : 8px controls, 16px cards. No pills anywhere.
   Accent   : #4b49aa indigo. */

:root{
  /* the display face in one place, so trying another is one edit */
  --display:"Bricolage Grotesque",Inter,system-ui,sans-serif;--display-w:500;--display-wb:700;
  --ink:#0f1011;
  --ink-2:#151617;
  --paper:#ffffff;
  --paper-2:#fafafa;
  --body:rgba(255,255,255,.6);
  --dim:rgba(255,255,255,.45);
  --iris:#1f8a7a;
  --iris-lift:#2fb39f;
  --iris-soft:rgba(47,179,159,.14);
  --rise:#4ec9a0;
  --fall:#e5674f;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --card:rgba(0,0,0,.38);
  --glass:rgba(15,16,17,.82);
  --pad:clamp(20px,4vw,40px);
  --r-c:8px;    /* controls */
  --r-k:16px;   /* cards */
  --r-s:6px;
  /* Aliases referenced across the sheet and the views. They were never
     declared, so every rule using them fell back to inherit/transparent:
     the bloodline bars on a coin page did not paint at all. */
  --gold:var(--iris-lift);
  --bone-dim:rgba(255,255,255,.55);
  --mute:rgba(255,255,255,.28);
  --muted:var(--dim);
  --bg:var(--ink-2);
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--paper);min-height:100vh;background:var(--ink);
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;font-weight:300;line-height:24px;letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(47,179,159,.4)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:9px}
*::-webkit-scrollbar-track{background:transparent}
input,button,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--iris-lift);outline-offset:2px}

/* Origin sets every small label in mono, uppercase, 12/18, ls .25px. */
.mono,.tiny,.up,th,.chip,.gen,.step-n,.foot-col h4,.navlink,.btn{
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums}
.tiny{font-size:12px;line-height:18px;letter-spacing:.25px;text-transform:uppercase;
  color:var(--body);font-weight:400}
.num{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.dim{color:var(--body)}
.gold{color:var(--iris-lift)}
.serif{font-family:var(--display);font-weight:var(--display-w)}
/* body sets line-height in PIXELS (24px), and that inherits into headings
   regardless of their font size. Any heading without its own line-height was
   therefore rendering 48px type on a 24px line: it collided with itself when
   it wrapped, and its ascenders climbed into whatever sat above it. Headings
   that already declare a line-height keep theirs; this only catches the ones
   that were silently inheriting the body value. */
h1,h2,h3,h4,h5,h6{line-height:1.12}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* ---------- nav ----------
   A single floating card of frosted glass, inset from all three edges and
   rounded, exactly like the reference: the sky runs above and beside it.
   Inside: brand at the left, chip-style links centred, CTA hard right. */
.nav{position:sticky;top:8px;z-index:60;
  margin:11px 10px 0;border-radius:16px;overflow:hidden;
  background:rgba(0,0,0,.14);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:0;
  box-shadow:none}
.nav .wrap{max-width:none}
/* the nav is the primary object on the page, so it gets real height */
.nav .nav-in{display:flex;align-items:center;gap:10px;padding:16px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.mark{width:28px;height:28px;display:block;object-fit:contain;flex:0 0 auto}
.crest{width:26px;height:26px;display:block;object-fit:contain;flex:0 0 auto}
/* The right-hand group is pushed to the far edge. Targeting whatever follows
   the links rather than #wbtn by name, because docs and method have no wallet
   button: there the CTA is the first element after the links and must take the
   auto margin instead, or it collapses back into the centred group. */
.nav .navlinks + #wbtn,.nav .navlinks + .btn-cta{margin-left:auto}
/* Absolute centring, not auto margins: brand and CTA have different widths, so
   auto margins park the group off-centre by half that difference. */
.nav .nav-in{position:relative}
.navlinks{display:flex;align-items:center;gap:4px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.navlink{font-family:"Roboto Mono",ui-monospace,monospace;
  font-size:11px;line-height:14px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:400;color:rgba(255,255,255,.9);background:transparent;
  padding:7px 12px;border-radius:6px;transition:background .15s ease,color .15s ease}
.navlink:hover{background:rgba(255,255,255,.12);color:#fff}
.navlink[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff}
/* one opaque CTA, matched to the chip metrics so the row reads as one system */
.btn-cta{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:"Roboto Mono",ui-monospace,monospace;
  font-size:11px;line-height:14px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;
  padding:8px 14px;border-radius:6px;background:#fff;color:#0f1011;
  transition:background .15s ease}
.btn-cta:hover{background:#eceef0}
.btn-cta .arw{font-size:12px;line-height:1;transform:translateY(-.5px)}
/* Below this width the centred link group, the wallet button and the CTA
   cannot all sit inside the plate without running past its right edge, so the
   links fold away and the CTA shrinks to the mark of what it does. */
@media (max-width:820px){
  .nav .navlinks{display:none}
  .nav .navlinks + #wbtn,.nav .navlinks + .btn-cta{margin-left:auto}
}
@media (max-width:560px){
  .nav .nav-in{gap:8px;padding:12px 14px}
  .mark{width:24px;height:24px}
  .btn-cta{padding:8px 11px}
  .btn-cta .cta-long{display:none}
}
@media (max-width:1180px){
  .navlinks{position:static;transform:none;margin-left:auto}
}
/* Only while the links still show: once they fold away at 820px nothing else
   carries the auto margin, so the right-hand group has to keep it. */
@media (min-width:821px) and (max-width:1180px){
  .nav .navlinks + #wbtn,.nav .navlinks + .btn-cta{margin-left:10px}
}
@media (max-width:900px){
  .nav{margin:10px 8px 0;top:8px}
  .nav .nav-in{padding:12px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--r-c);
  background:var(--surface);color:var(--paper);border:0;cursor:pointer;
  font-size:12px;line-height:24px;font-weight:500;letter-spacing:.25px;text-transform:uppercase;
  transition:background .15s ease,opacity .15s ease}
.btn:hover{background:rgba(255,255,255,.1)}
.btn-line{background:transparent;color:var(--paper);border:1px solid var(--line-2)}
.btn-line:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}
.btn-gold{background:var(--paper);color:#000}
.btn-gold:hover{background:#e6e6e6}
.btn-iris{background:var(--iris);color:#fff}
.btn-iris:hover{background:var(--iris-lift)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn-sm{padding:8px 12px;line-height:18px}

/* ---------- surfaces ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-k);overflow:hidden}
.pad{padding:24px}
.callout{background:var(--iris-soft);border:1px solid rgba(47,179,159,.4);
  border-radius:var(--r-k);padding:20px 24px}

/* ---------- hero ---------- */
/* Full-bleed sky photograph behind the hero, exactly as the reference does it.
   The nav sits ON the image, and the image fades into the dark canvas at the
   bottom so the next section starts without a seam. */
.sky{position:absolute;top:0;left:0;right:0;height:940px;overflow:hidden;z-index:0;pointer-events:none}
/* The cloud plate. sky.js renders it once and swaps the canvas for this
   image, which is wider than the plate and drifts across it on a compositor
   transform: no per-frame drawing under the page. It is always the home
   plate's height, so the shorter inner sky shows its top. */
.sky-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.sky-img{position:absolute;top:0;left:0;width:125%;height:940px;z-index:0;
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:0;transition:opacity .9s ease;will-change:transform;
  animation:sky-drift 240s ease-in-out infinite alternate}
.sky-img.ready{opacity:1}
/* 20% of an image 125% wide is the plate's extra quarter, edge to edge */
@keyframes sky-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-20%,0,0)}}
@media (prefers-reduced-motion:reduce){.sky-img{animation:none}}

/* Two scrims, not one. The vertical gradient seats the plate into the dark
   canvas below; the radial one sits under the headline only, because the
   upward-looking sky puts its brightest cloud mass dead centre where the
   type lands. Without the radial, white-on-cloud washes out. */
.sky:after{content:"";position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(120% 62% at 50% 34%,rgba(9,14,24,.42) 0%,rgba(9,14,24,.22) 38%,
      rgba(9,14,24,0) 68%),
    linear-gradient(180deg,rgba(15,16,17,.22) 0%,rgba(15,16,17,.04) 24%,
      rgba(15,16,17,.12) 60%,rgba(15,16,17,.72) 86%,var(--ink) 100%)}

/* Page content must paint ABOVE the sky layer. Without this the sky (a
   positioned element) covers every non-positioned section that follows it,
   which is what hid the launch form behind the clouds. */
#app,.foot{position:relative;z-index:2}
/* Inner routes get a much shorter sky: the tall plate is a hero device. */
body.inner .sky{height:420px}
body.inner .sky:after{background:linear-gradient(180deg,rgba(15,16,17,.34) 0%,
  rgba(15,16,17,.10) 30%,rgba(15,16,17,.80) 78%,var(--ink) 100%)}

.hero{position:relative;z-index:2;padding:clamp(90px,13vw,176px) 0 clamp(60px,7vw,96px);text-align:center}
.eyebrow{display:inline-block;margin:0 0 30px;padding:5px 14px;border-radius:var(--r-s);
  background:rgba(180,230,245,.9);color:#01646f;
  font-family:"Roboto Mono",monospace;font-size:12px;line-height:16px;
  letter-spacing:.25px;text-transform:uppercase;font-weight:500}
.hero h1{font-family:var(--display);font-weight:var(--display-w);color:#fff;
  font-size:clamp(44px,6.6vw,92px);line-height:.95;letter-spacing:-.035em;margin:0 0 26px;
  text-shadow:0 2px 40px rgba(0,20,50,.45)}
.hero h1 em{font-style:italic;padding-right:.1em}
.hero-sub{max-width:560px;margin:0 auto 34px;font-size:16px;line-height:24px;font-weight:300;
  color:rgba(255,255,255,.72);text-shadow:0 1px 20px rgba(0,20,50,.5)}
.hero-sub b{display:block;color:#fff;font-weight:600;margin-bottom:2px}

/* The hero ask-field is gone. It was a second way to do what the two buttons
   above it already do, and it read as a chat box on a page that is not one. */
.hero-tag{margin:40px 0 0;font-size:16px;font-weight:300;color:rgba(255,255,255,.6)}
h2.sec{font-family:var(--display);font-weight:var(--display-w);
  font-size:clamp(38px,5.6vw,80px);line-height:1;letter-spacing:-.8px;margin:0 0 18px}
h3.sub{font-family:var(--display);font-weight:var(--display-w);
  font-size:clamp(26px,3vw,38px);line-height:.9;letter-spacing:normal;margin:0 0 12px;color:var(--paper-2)}

.rule-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:56px}
.rule-strip>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-k);
  padding:24px;display:flex;flex-direction:column;gap:8px;text-align:left}
.rule-strip b{font-family:var(--display);font-weight:var(--display-w);font-size:26px;line-height:1.05}
.rule-strip span{font-size:14px;line-height:21px;color:var(--body);font-weight:300}

/* ---------- dynasty graph ---------- */
.graphwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-k);padding:16px;overflow:hidden}
#tree{display:block;width:100%;height:auto}
.edge{stroke:rgba(255,255,255,.14);stroke-width:1;fill:none;transition:stroke .3s ease}
.edge.hot{stroke:var(--iris-lift);stroke-width:1.6}
.pulse{fill:var(--iris-lift)}
.node circle{fill:#17181b;stroke:rgba(255,255,255,.24);stroke-width:1.2;transition:all .18s ease}
.node text{font-size:11px;fill:var(--body);font-family:"Roboto Mono",monospace;letter-spacing:.25px}
.node{cursor:pointer}
.node:hover circle{stroke:var(--iris-lift);fill:#16302c}
.node.sel circle{stroke:var(--iris-lift);fill:#1b3d37}
.node.sel text,.node:hover text{fill:var(--paper)}
.legend{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:16px;
  font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.25px;
  text-transform:uppercase;color:var(--dim)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--iris-lift);display:inline-block}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;line-height:18px;letter-spacing:.25px;text-transform:uppercase;
  color:var(--dim);font-weight:400;padding:14px;border-bottom:1px solid var(--line)}
td{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:15px;font-weight:300}
tbody tr{transition:background .14s ease}
tbody tr:hover{background:rgba(255,255,255,.03)}
.gen{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 8px;
  border-radius:var(--r-s);background:var(--surface);font-size:12px;letter-spacing:.25px;color:var(--body)}

/* ---------- lineage bits ---------- */
.path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:300}
.path a{color:var(--body);transition:color .15s ease}
.path a:hover{color:var(--paper)}
.path i{color:var(--dim);font-style:normal;font-size:11px}
.stat{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;
  min-width:0;padding:18px 22px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .tiny,.stat b,.stat .dim{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
@media(min-width:901px){.statrow.six{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:900px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:last-child{border-bottom:0}}
@media(max-width:560px){.statrow{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0}}
.stat b{font-family:var(--display);font-weight:var(--display-w);
  font-size:clamp(21px,1.85vw,29px);line-height:1.08}
.royal-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.royal-bar{height:5px;border-radius:3px;background:var(--iris-lift)}

/* ---------- launch flow ---------- */
.step-n{font-size:12px;line-height:18px;letter-spacing:.25px;text-transform:uppercase;
  color:var(--iris-lift);margin-bottom:14px}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pcard{padding:16px;border-radius:var(--r-c);border:1px solid var(--line);background:var(--surface);
  text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.pcard:hover{border-color:var(--line-2);background:var(--surface-2)}
.pcard.sel{border-color:var(--iris-lift);background:var(--iris-soft)}
.seg{display:inline-flex;background:var(--surface);border-radius:var(--r-c);padding:3px;gap:3px}
.seg button{padding:8px 14px;border-radius:var(--r-s);font-family:"Roboto Mono",monospace;
  font-size:12px;letter-spacing:.25px;text-transform:uppercase;color:var(--body);transition:all .15s ease}
.seg button.on{background:var(--paper);color:#000;font-weight:500}
/* Scoped to .launch on purpose. These used to be global and leaked into the
   hero ask field, painting a second surface inside the pill. */
.launch input[type=text],.launch input[type=number]{width:100%;padding:12px 14px;border-radius:var(--r-c);
  border:1px solid var(--line);background:var(--surface);color:var(--paper);
  font-size:15px;font-weight:300;transition:border-color .15s ease}
.launch input[type=text]:focus,.launch input[type=number]:focus{border-color:var(--iris-lift);outline:none}

/* A typed amount with its unit pinned inside the field. */
.launch .efield{position:relative;margin-top:8px}
.launch .efield input[type=text]{padding-right:56px;font-family:"Roboto Mono",ui-monospace,monospace;font-size:17px}
.launch .efield.min input[type=text]{padding-right:132px}
.launch .efield.min .eunit{right:78px}
.launch .efield .emin{position:absolute;right:10px;top:50%;transform:translateY(-50%);height:30px;padding:0 12px;border-radius:6px;
  font-size:11px;letter-spacing:.08em;color:#0f1011;background:var(--iris-lift);border:0;cursor:pointer}
.launch .efield .emin:hover{background:#fff}
.launch .efield .eunit{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:11px;letter-spacing:.08em;color:var(--dim);pointer-events:none}

/* Thumb keeps pointer capture, so dragging survives a re-render of sibling nodes. */
.launch input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:100%;
  height:28px;cursor:grab;touch-action:none;margin:6px 0}
.launch input[type=range]:active{cursor:grabbing}
.launch input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.16);border-radius:2px}
.launch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;
  border-radius:50%;background:var(--paper);border:0;cursor:inherit;
  box-shadow:0 1px 5px rgba(0,0,0,.55);transition:transform .13s ease,box-shadow .13s ease}
.launch input[type=range]:hover::-webkit-slider-thumb,.launch input[type=range]:active::-webkit-slider-thumb{
  transform:scale(1.15);box-shadow:0 0 0 7px rgba(47,179,159,.3)}
.launch input[type=range]::-moz-range-track{height:3px;background:rgba(255,255,255,.16);border-radius:2px}
.launch input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--paper);border:0}

.btn-wallet{flex:0 0 auto;height:28px;padding:0 12px;border-radius:7px;
  font-family:"Roboto Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);
  transition:background .15s ease}
.btn-wallet:hover{background:rgba(255,255,255,.2)}
/* The one outbound social link in the nav. Icon only, on the wallet button's
   metrics, so the right-hand group stays a single system rather than gaining a
   labelled fourth control. It takes the auto margin because it now follows the
   centred link group. */
.nav .navlinks + .btn-x{margin-left:auto}
.btn-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:7px;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.12);transition:background .15s ease,color .15s ease}
.btn-x:hover{background:rgba(255,255,255,.2);color:#fff}
.btn-x svg{display:block}
@media (max-width:560px){.btn-x{width:26px;height:26px}}

.btn-wallet.on{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}

/* ---------- risk gate ----------------------------------------------------
   A launchpad puts an irreversible transaction one click away, so the
   disclosure sits in front of the pad rather than in the footer. Same card
   language as the boards: dark plate, hairline border, the restrained tilt
   driven by the shared --card-* variables. */
.gback{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,7,9,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;transition:opacity .32s ease}
.gback.gin{opacity:1}
.gback.gout{opacity:0}
.gbox{position:relative;width:100%;max-width:540px;max-height:86vh;overflow:auto;
  padding:30px 32px 26px;border-radius:20px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,#131518 0%,#0e1013 100%);
  box-shadow:0 40px 110px rgba(0,0,0,.66);
  transform:perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) translateY(14px);
  transition:transform .38s cubic-bezier(.2,.65,.3,1)}
.gin .gbox{transform:perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) translateY(0)}
.gin .gbox.card-tracking{transition-duration:160ms}
.ghead{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.gmark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.82)}
.gtitle{font-size:27px;line-height:1.15;margin:0 0 6px;color:var(--paper)}
.gsub{margin:0 0 22px;font-size:14px;color:var(--body)}
.gsec{margin-bottom:16px}
.gsec h3{margin:0 0 5px;font-size:14px;font-weight:500;color:var(--paper)}
.gsec p{margin:0;font-size:13.5px;line-height:1.62;color:var(--body)}
.gnote{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.42)}
.glink{display:inline-block;font-family:"Roboto Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:2px;
  transition:color .15s ease,border-color .15s ease}
.glink:hover{color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.5)}
.glink-out{margin-top:6px}
.grule{height:1px;border:0;background:rgba(255,255,255,.09);margin:22px 0 18px}
/* The native box is replaced rather than styled: it stays in the DOM as the
   real control, so keyboard, focus and form semantics are untouched. */
.grow{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px;cursor:pointer}
.grow input{position:absolute;opacity:0;width:0;height:0}
.gtick{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:5px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.04);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease}
.gtick:after{content:"";width:9px;height:5px;margin-top:-2px;
  border-left:1.7px solid #0f1011;border-bottom:1.7px solid #0f1011;
  transform:rotate(-45deg) scale(.6);opacity:0;transition:opacity .13s ease,transform .13s ease}
.grow:hover .gtick{border-color:rgba(255,255,255,.45)}
.grow input:checked + .gtick{background:var(--paper);border-color:var(--paper)}
.grow input:checked + .gtick:after{opacity:1;transform:rotate(-45deg) scale(1)}
.grow input:focus-visible + .gtick{outline:2px solid var(--iris-lift);outline-offset:2px}
.gtext{font-size:13.5px;line-height:1.5;color:var(--body)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:20px;padding:15px 18px;border-radius:12px;
  font-family:"Roboto Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:500;
  background:var(--paper);color:#0f1011;transition:background .15s ease,opacity .15s ease}
.gbtn:hover:not([disabled]){background:#fff}
.gbtn[disabled]{opacity:.3;cursor:not-allowed}
.gfull{display:block;width:max-content;margin:16px auto 0;border-bottom-color:transparent}
.gfull:hover{border-bottom-color:rgba(255,255,255,.5)}
body.gated{overflow:hidden}
@media (max-width:560px){
  .gback{padding:14px}
  .gbox{padding:24px 20px 20px;max-height:92vh}
  .gtitle{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .gback,.gbox{transition:none}
  .gbox{transform:none!important}
}

/* ---------- license modal ----------
   Used by the footer MIT link. Plain overlay, no library. */
.mback{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mback[hidden]{display:none}
.mbox{width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;
  border-radius:var(--r-c);border:1px solid var(--line);background:#0e1013;
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.mx{width:26px;height:26px;flex:0 0 auto;border-radius:6px;font-size:12px;line-height:1;
  color:var(--body);background:rgba(255,255,255,.06);transition:background .15s ease,color .15s ease}
.mx:hover{background:rgba(255,255,255,.14);color:var(--paper)}
.mtext{margin:0;padding:18px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:"Roboto Mono",ui-monospace,monospace;font-size:12px;line-height:1.75;
  color:var(--body)}

/* ---------- long form ---------- */
.doc{max-width:640px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--pad) 96px}
.doc h1{font-family:var(--display);font-weight:var(--display-w);
  font-size:clamp(40px,5.6vw,72px);line-height:.9;margin:0 0 20px}
.doc h2{font-family:var(--display);font-weight:var(--display-w);font-size:clamp(28px,3vw,38px);
  line-height:.95;letter-spacing:-.4px;margin:60px 0 16px;display:flex;align-items:baseline;gap:14px}
.doc h2 span{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.25px;
  text-transform:uppercase;color:var(--iris-lift)}
.doc h3{font-size:17px;font-weight:500;margin:32px 0 10px;color:var(--paper)}
.doc p,.doc li{color:var(--body);line-height:26px;font-size:16px;font-weight:300}
.doc p{margin:0 0 18px}
.doc li{margin-bottom:12px}
.doc strong{color:var(--paper);font-weight:500}
.doc code{font-family:"Roboto Mono",monospace;font-size:13px;background:var(--surface-2);
  padding:2px 7px;border-radius:var(--r-s);color:var(--paper)}
.doc table{margin:24px 0;font-size:15px}
.doc td{padding:12px 14px}

/* ---------- live state ---------- */
.rise{color:var(--rise)}
.fall{color:var(--fall)}
.live{color:var(--rise)}
.flash-up{animation:flash .55s ease}
@keyframes flash{0%{background:rgba(78,201,160,.18)}100%{background:transparent}}
.flash-dn{animation:flashdn .55s ease}
@keyframes flashdn{0%{background:rgba(229,103,79,.18)}100%{background:transparent}}
/* Status chips sit on top of the sky video, where a translucent tint has no
   fixed backdrop to tint against and simply dissolves. They are solid dark
   greys with a real border instead, so the box reads as a box on any frame.
   State is carried by a small dot, not by washing the whole chip in colour. */
.chip{display:inline-flex;align-items:center;gap:8px;
  font-size:12px;line-height:18px;letter-spacing:.25px;text-transform:uppercase;
  padding:8px 12px;border-radius:var(--r-c);white-space:nowrap;
  background:#191b1d;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.chip-live,.chip-sim{background:#191b1d;color:rgba(255,255,255,.72)}
.chip-live:before,.chip-sim:before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.chip-live:before{background:#3f8f74}
.chip-sim:before{background:#c4443a}

/* An outbound reference, not an accent. Same muted white as every other
   secondary link on the pad, with the underline carrying the affordance. */
.exlink{color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.exlink:hover{color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.5)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:104px;background:#0b0c0d}
.foot-in{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:40px;padding:64px 0 32px}
.foot-col h4{font-size:12px;line-height:18px;letter-spacing:.25px;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin:0 0 16px}
.foot-col a{display:block;color:var(--body);font-size:15px;font-weight:300;padding:6px 0;
  transition:color .15s ease}
.foot-col a:hover{color:var(--paper)}
.foot-bar{display:flex;gap:20px;flex-wrap:wrap;align-items:center;padding:22px 0 44px;
  border-top:1px solid var(--line);font-family:"Roboto Mono",monospace;
  font-size:12px;letter-spacing:.25px;color:var(--dim)}

@media(max-width:900px){
  .pairgrid{grid-template-columns:1fr !important}
  .foot-in{grid-template-columns:1fr 1fr;gap:30px}
  .hide-sm{display:none}
  .navlinks{gap:4px}
  .navlink{padding:7px 9px}
  .brand{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto}
}

/* ---- brand mark --------------------------------------------------------
   The mark carries the brand on its own. A serif wordmark set beside a solid
   white crest never resolves into one object: two different weights of white,
   two different edge qualities, and the type always looks bolted on. The crest
   is already the whole idea, so the name is dropped and the alt text carries
   it for screen readers and search. */
.brand-lock{display:flex;align-items:center;gap:9px;line-height:1}
.brand .word{font-family:var(--display);font-weight:var(--display-wb);font-size:19px;letter-spacing:-.01em;color:#fff}
@media (max-width:560px){.brand .word{display:none}}
.brand-lock .mark,.brand-lock .crest{transition:opacity .18s}
.nav .brand-lock:hover .mark{opacity:.78}

/* ---- coin pictures ----------------------------------------------------- */
.pfp{border-radius:50%;flex:0 0 auto;display:block;object-fit:contain;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.pfp-txt{display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:"Roboto Mono",ui-monospace,monospace;letter-spacing:.02em;border:0}
.cell-coin{display:flex;align-items:center;gap:10px}

/* ---- board head: title, count, sort tabs on one line -------------------- */
.board-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.board-head h1{font-size:clamp(30px,4.4vw,44px);margin:0;line-height:1.1}
.count-pill{font-size:11.5px;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);opacity:.8}
.tabs{display:flex;gap:4px;margin-left:auto;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:999px;padding:3px}
.tab{font:inherit;font-size:13px;color:inherit;opacity:.6;background:transparent;border:0;
  padding:7px 15px;border-radius:999px;cursor:pointer;transition:opacity .15s,background .15s}
.tab:hover{opacity:.9}
.tab.on{opacity:1;background:rgba(255,255,255,.12)}

/* ---- coin cards ---------------------------------------------------------
   A stacked card: art on top carrying the badges, text block underneath. The
   art is square and the lettermark fills it edge to edge rather than sitting
   as a small circle on a large tile, because a grid of mostly-empty tiles
   reads as broken rather than as minimal. */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.ccard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.02);transition:border-color .18s,transform .18s}
.ccard:hover{border-color:var(--gold);transform:translateY(-2px)}
/* The pad's own coin. Light gold edge, faint glow, so it reads as the house
   coin at a glance without shouting over the board. */
.ccard-pin{border-color:rgba(214,167,90,.62);box-shadow:0 0 0 1px rgba(214,167,90,.22),0 8px 26px rgba(214,167,90,.10)}
.ccard-pin:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(214,167,90,.4),0 10px 30px rgba(214,167,90,.16)}
.ccard-art{position:relative;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.03);overflow:hidden}
/* The pfp helper ships inline width/height for its inline uses, so the board
   overrides both: here it is a tile, not an avatar. */
.ccard-art .pfp{width:100%!important;height:100%!important;border-radius:0;border:0;
  font-size:44px!important;letter-spacing:.02em}
.ccard-art img.pfp{object-fit:cover}
.ccard-badge,.ccard-corner{position:absolute;top:9px;font-size:10.5px;letter-spacing:.03em;
  padding:4px 9px;border-radius:999px;background:rgba(10,12,16,.72);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14)}
.ccard-badge{left:9px;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard-badge i{font-style:normal;color:var(--gold);font-size:9px;vertical-align:1px}
.ccard-corner{right:9px;opacity:.85}
.ccard-body{padding:12px 13px 13px}
.ccard-name{font-size:14.5px;font-weight:500;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard-tick{font-size:11.5px;opacity:.55;margin-top:2px}
.ccard-stats{display:flex;align-items:baseline;gap:8px;margin-top:10px;flex-wrap:wrap}
.ccard-stats b{font-size:14px;font-weight:600;font-family:"Roboto Mono",ui-monospace,monospace}
.ccard-stats b em{font-style:normal;font-size:9.5px;opacity:.5;margin-left:2px;letter-spacing:.04em}
.ccard-stats span{font-size:11px;opacity:.55;font-family:"Roboto Mono",ui-monospace,monospace;margin-left:auto}
.ccard-foot{display:flex;justify-content:space-between;gap:8px;margin-top:11px;
  padding-top:9px;border-top:1px solid var(--line);font-size:10.5px;opacity:.45}
@media(max-width:560px){
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .ccard-art .pfp{font-size:34px!important}
  .tabs{margin-left:0;width:100%;justify-content:space-between}
  .tab{flex:1;padding:7px 8px;font-size:12px}
}

/* ---- live board -------------------------------------------------------- */
.livehead{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.livegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.livecard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  background:rgba(255,255,255,.02);padding:16px;transition:border-color .18s,transform .18s}
.livecard:hover{border-color:var(--gold);transform:translateY(-2px)}
.livecard-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.livecard-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.livecard-rows span{display:block}
.livecard-rows b{font-size:13px;font-weight:500}
.livecard-foot{display:flex;justify-content:space-between;margin-top:14px;
  padding-top:11px;border-top:1px solid var(--line);opacity:.7}
@media(max-width:560px){.livegrid{grid-template-columns:1fr}}

/* ---- narrow viewports: nothing may exceed the viewport --------------------
   The coins table has eight columns and a hard minimum width, so on a phone it
   scrolls inside its own panel rather than pushing the whole page sideways.
   The footer drops to a single column at the same point for the same reason. */
@media(max-width:640px){
  .panel:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panel table{min-width:560px}
  .foot-in{grid-template-columns:1fr;gap:26px;padding:44px 0 28px}
  .foot-col,.foot-col p{max-width:100%}
  .livecard-rows{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  html,body{overflow-x:hidden}
}

/* Explorer links on a coin page: the launch tx sits first because it is the
   one record that proves where the coin came from. */
.txrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:14px}
.txrow a{color:rgba(255,255,255,.55);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16)}
.txrow a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.txrow a.gold{color:var(--iris-lift);border-bottom-color:rgba(47,179,159,.45)}
.txrow a.gold:hover{color:#7fd9c9}

/* ---- boot curtain -----------------------------------------------------------
   The pad cannot render until the chain read resolves, and a half-built page
   with an empty board is a worse first frame than no page at all. So the first
   paint is deliberately black, and the pad fades up underneath it once there is
   something true to show. */
#boot{position:fixed;inset:0;z-index:400;background:#0b0c0d;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .5s ease}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:bootpulse 1.5s ease-in-out infinite}
.boot-in img{opacity:.9;object-fit:contain}
.boot-line{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
@keyframes bootpulse{0%,100%{opacity:.55}50%{opacity:1}}
body.booting{overflow:hidden}
body.booting .sky,body.booting .nav,body.booting #app,body.booting .foot{opacity:0}
.sky,.nav,#app,.foot{opacity:1;transition:opacity .55s ease .06s}
body.booted #boot{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  #boot,.sky,.nav,#app,.foot{transition:none}
  .boot-in{animation:none}
}

/* ---- external parent candidates (Robinhood Chain / Pons) ----
   Dashed while they sit outside the tree, solid once adopted: the border is a
   statement about registration, not decoration. */
.xcard{padding:14px 16px;border-radius:var(--r-c);border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.02);text-align:left;opacity:.78;transition:opacity .18s,border-color .18s,transform .18s}
.xcard[data-adopt]:hover{opacity:1;border-color:var(--gold);transform:translateY(-1px)}
.xcard-on{border-style:solid;border-color:rgba(212,175,55,.45);opacity:1}
.xcard .xsym{font-weight:500;letter-spacing:.2px}
.xcard .xup{color:#6fbf9b}
.xcard .xdn{color:#c98b8b}

/* ---- copyable contract address ----
   Sits in the same row as the explorer links but reads as a control, not a
   link: the full address in mono, a copy glyph, and an inline confirmation
   that replaces the glyph rather than firing a toast for something this small. */
.capill{display:inline-flex;align-items:center;gap:8px;position:relative;
  padding:5px 10px;border-radius:7px;cursor:pointer;font-size:11.5px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.62);font-family:"Roboto Mono",monospace;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.capill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.capill .ca-label{color:rgba(255,255,255,.38);letter-spacing:.14em;font-size:10px}
.capill .ca-val{letter-spacing:.2px}
.capill .ca-ico{opacity:.65;flex:0 0 auto}
.capill:hover .ca-ico{opacity:1}
.capill .ca-done{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;border-radius:7px;background:#1d3a30;color:#7fd3ac;
  letter-spacing:.16em;font-size:10px;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .16s ease}
.capill.is-copied{border-color:rgba(127,211,172,.45)}
.capill.is-copied .ca-done{opacity:1}
/* Phones cannot fit 42 hex characters next to two links; the head and tail are
   what a human eyeballs to confirm a paste anyway. */
@media(max-width:720px){
  .capill .ca-val{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl}
}

/* Outside coins now lead the parent picker instead of sitting under a second
   heading below it, so they must carry the same weight as the in-tree cards:
   solid border, same padding, full opacity. The dashed "not really an option"
   treatment was correct when they were a footnote and wrong now. */
.pcard-lite{padding:16px;opacity:1;border-style:solid;border-color:var(--line);background:var(--surface)}
.pcard-lite:hover{border-color:var(--line-2);background:var(--surface-2);transform:none}
.pcard-lite[data-adopt]:hover{border-color:var(--gold)}

/* The 24h figure was breaking out of the card on long tickers: the symbol and
   the percentage sat in one flex row with no min-width floor, so PERPSHOOD
   pushed +454.7% past the border instead of the row shrinking. The number is
   the part that must never wrap or clip, so the symbol yields first. */
.pick-x{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.xcard{overflow:hidden}
.xcard > div:first-child{gap:8px;min-width:0}
.xcard .xsym{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xcard .xup,.xcard .xdn{flex:0 0 auto;white-space:nowrap}

/* Adoptable cards carry the coin's own picture. A lettermark is the fallback,
   not the default: these are real coins with real branding, and showing them
   as two grey letters made the board look like a mock. */
.xcard .xhead{display:flex;align-items:center;gap:8px;min-width:0}
.xcard .xlogo{width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;background:rgba(255,255,255,.05)}
.xcard .xlogo-txt{display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.5px;color:var(--dim);text-transform:uppercase}

/* ---------- source button + modal body ----------
   The topbar button is deliberately quieter than the wallet and launch
   buttons: it is a claim you can check, not an action that costs money. */
/* Source reads as one of the nav links, sitting between Docs and Method,
   because it is reading material and not an action. */
.nav .navlinks{margin-right:auto}

.sbox{max-width:720px}
.mbody{padding:18px;overflow:auto}
.sintro{font-size:13.5px;line-height:1.7;margin:0 0 20px}
.shead{font-family:"Roboto Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:24px 0 10px;font-weight:500}
.shead:first-of-type{margin-top:0}
.srow{padding:12px 14px;margin-bottom:8px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.srow-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.slink{font-size:11px;white-space:nowrap}
.saddr{margin:6px 0 4px;font-size:12px;word-break:break-all;color:#e8e2d4}
.snote{margin:0;font-size:12.5px;line-height:1.6}
.sdeploy{margin:10px 0 0;line-height:1.6}
.sfiles{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sfiles li{display:flex;align-items:baseline;gap:10px;padding:6px 10px;border-radius:7px}
.sfiles li:hover{background:rgba(255,255,255,.05)}
.sfiles a{font-size:12.5px;color:var(--gold);text-decoration:none;flex:0 0 116px}
.sfiles a:hover{text-decoration:underline}
.sfiles span{font-size:12px}

/* ---------- how to use ---------- */
.howto .hsec{font-size:13px;letter-spacing:.02em;margin:40px 0 14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:"Roboto Mono",ui-monospace,monospace;text-transform:uppercase;
  color:var(--dim);font-weight:500}
.howto p{line-height:1.75;font-size:14px;margin:0 0 12px}
.howto p:last-child{margin-bottom:0}
.hcard{padding:18px 20px;border-radius:var(--r-c);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);margin-bottom:12px}
.hwarn{border-color:rgba(212,175,55,.28)}
.hwarn strong{color:var(--gold)}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hgrid .hcard{margin:0}
.hst{font-size:17px;margin:0 0 8px}
.hstep{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.hstep:last-of-type{border-bottom:0}
.hnum{flex:0 0 32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;color:var(--gold);
  border:1px solid rgba(212,175,55,.34);background:rgba(212,175,55,.07)}
.hbody{font-size:14px}
.hcta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:36px 0 10px}
@media (max-width:720px){.hgrid{grid-template-columns:1fr}.hstep{gap:12px}}

/* ---- in-place source reader ----
   The files open inside the modal rather than a new tab: a raw text/plain dump
   loses line numbers and the way back, and the browser has already cached
   every one of these to run the page. */
.mhead .mback-btn{background:none;border:0;cursor:pointer;padding:0 12px 0 0;
  font-size:11.5px;letter-spacing:.05em;color:var(--dim)}
.mhead .mback-btn:hover{color:#fff}
.mbody-code{padding:0;display:flex;flex-direction:column;overflow:hidden}
.cbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.09);flex:0 0 auto}
.cwrap{display:flex;align-items:flex-start;overflow:auto;flex:1 1 auto;
  background:rgba(0,0,0,.24)}
.cwrap pre{margin:0;font-size:12px;line-height:1.62;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
.cgut{padding:14px 10px 20px;text-align:right;color:rgba(255,255,255,.26);
  user-select:none;position:sticky;left:0;flex:0 0 auto;
  background:rgba(14,15,16,.97);border-right:1px solid rgba(255,255,255,.07)}
.ccode{padding:14px 20px 20px;color:#d8dbe2;white-space:pre;flex:1 1 auto}

/* Launch flow, scroll budget. The picker is the right amount of information
   while you are choosing and pure scrolling cost once you have chosen, so the
   grids scroll inside themselves rather than pushing the form off screen. */
.launch .pick{max-height:342px;overflow-y:auto;gap:14px;margin-top:16px;
  padding:4px 8px 4px 2px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.launch .pick .pcard{padding:15px 16px}
.launch .pick::-webkit-scrollbar{width:7px}
.launch .pick::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.launch .picked-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.launch .disclose{background:none;border:0;color:var(--dim);cursor:pointer;
  font:inherit;font-size:12.5px;padding:0 0 12px;letter-spacing:.2px}
.launch .disclose:hover{color:var(--ink)}
.launch [hidden]{display:none !important}
.launch label.ghost{display:inline-block}
.launch button.ghost,.launch label.ghost{background:none;border:1px solid var(--line-2);color:var(--paper);
  cursor:pointer;font:inherit;font-size:12.5px;padding:8px 16px;border-radius:8px}
.launch button.ghost:hover,.launch label.ghost:hover{border-color:var(--gold);background:rgba(255,255,255,.05)}

/* ---------- wallet chooser ----------
   Same plate as the risk gate: one dialog language for the whole pad. */
.wbox{max-width:400px;padding-bottom:18px}
.wrow{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 8px;
  padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:9px;color:var(--paper);font:inherit;font-size:14px;text-align:left;
  cursor:pointer;transition:background .15s,border-color .15s}
.wrow:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.wicon{width:26px;height:26px;border-radius:6px;flex:0 0 auto;object-fit:contain}
.wicon-x{background:rgba(255,255,255,.08);border:1px solid var(--line)}
.wname{flex:1 1 auto}
.warw{font-family:"Roboto Mono",ui-monospace,monospace;font-size:13px;opacity:.4}
.wcancel{margin-top:10px}

/* ---------- yield ---------- */
.yrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.yrow:first-of-type{border-top:0}
.yrow-sym{min-width:96px}
.yrow-amt{flex:1;font-size:14px}
.yrow .btn-p{padding:7px 16px;font-size:12px}
.ynote{color:var(--body)}
@media(max-width:680px){.yrow{flex-wrap:wrap;gap:8px}.yrow-amt{flex:1 1 100%}}

/* ---------- trade ---------- */
.tside{display:flex;gap:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
  margin-bottom:16px;width:max-content;background:rgba(0,0,0,.28)}
.tbtn{background:none;border:0;color:var(--dim);font:inherit;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:10px 26px;cursor:pointer;transition:background .15s,color .15s}
.tbtn:hover{color:var(--paper)}
/* The selected side has to be unmistakable at a glance: filled, not merely a
   shade brighter. The previous rule referenced a colour token that does not
   exist in this sheet, so the active tab rendered as near-black text on a
   near-black panel and read as the DISABLED one. */
.tbtn.on{background:var(--paper);color:var(--ink);font-weight:600}
.tbtn.on[data-side="sell"]{background:var(--fall);color:#fff}
/* DexScreener's own embed of the coin's Uniswap pair. */
.dexembed iframe{width:100%;height:420px;border:1px solid var(--line);border-radius:8px;background:#000;display:block}
@media(max-width:680px){.dexembed iframe{height:340px}}
/* What you pay with: a quieter toggle above the buy/sell one. */
.tmodes{margin-bottom:10px}
.tmb{background:none;border:0;color:var(--dim);font:inherit;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;padding:8px 18px;cursor:pointer;transition:background .15s,color .15s}
.tmb:hover{color:var(--paper)}
.tmb.on{background:rgba(255,255,255,.1);color:var(--paper);font-weight:600}
.tlab{display:block;margin-bottom:6px}
.tfield{display:flex;align-items:center;border:1px solid var(--line);padding:12px 14px;gap:10px}
.tfield input{flex:1;background:none;border:0;color:var(--paper);font:inherit;font-size:22px;outline:none;min-width:0}
.tunit{color:var(--dim);font-size:13px;letter-spacing:.05em}
.tmeta{display:flex;justify-content:space-between;font-size:12px;margin-top:7px}
.tmax{cursor:pointer;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.tout{display:flex;justify-content:space-between;align-items:baseline;border:1px solid var(--line);border-top:0;padding:12px 14px;font-size:19px}
.tout .dim{font-size:12px}
.tlines{margin-top:14px}
.trow{display:flex;justify-content:space-between;font-size:13px;padding:5px 0}
.trow.warn .mono{color:#e0685f}
.twarn{font-size:12.5px;line-height:1.65;color:#e0a05f;margin:10px 0 0}
.btn.wide{width:100%;justify-content:center;text-align:center}

/* ---------- live trade feed ----------
   One rule for colour on this pad: green is a buy, red is a sell, and nothing
   else gets either colour. */
.feed{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.feed-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.feed-live{margin-left:auto;color:var(--dim);display:flex;align-items:center;gap:6px}
.feed-dot{width:6px;height:6px;border-radius:50%;background:var(--rise);display:inline-block;
  animation:feedpulse 2.4s ease-in-out infinite}
@keyframes feedpulse{0%,100%{opacity:1}50%{opacity:.25}}
.feed-cols,.feed-row{display:grid;grid-template-columns:52px 1fr 1fr 1.05fr 80px 42px;
  gap:10px;align-items:center}
.feed-cols{color:var(--dim);padding:0 8px 7px;border-bottom:1px solid var(--line)}
.feed-cols span:not(:first-child):not(:nth-child(5)):not(:last-child){text-align:right}
.feed-body{max-height:236px;overflow-y:auto;scrollbar-width:thin}
.feed-row{padding:7px 8px;font-size:12.5px;text-decoration:none;color:var(--body);
  border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s}
.feed-row:hover{background:var(--surface)}
.feed-row span:not(.feed-side):not(.feed-who):not(.feed-age){text-align:right}
.feed-side{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.feed-row.buy .feed-side{color:var(--rise)}
.feed-row.sell .feed-side{color:var(--fall)}
.feed-row.buy .mono{color:var(--rise)}
.feed-row.sell .mono{color:var(--fall)}
.feed-row .feed-who,.feed-row .feed-age{color:var(--dim)}
.feed-px{opacity:.8}
.feed-empty{font-size:13px;line-height:1.65;margin:12px 0 0}
.feed-row.flash{animation:feedflash 1.6s ease-out}
@keyframes feedflash{0%{background:var(--surface-2)}100%{background:transparent}}
@media(max-width:900px){.feed-cols,.feed-row{grid-template-columns:46px 1fr 1fr 42px}
  .feed-px,.feed-who{display:none}}

/* ---------- trade status chip ----------
   This is the only element that tells a user whether their money moved, so it
   is a filled chip rather than dim micro-type. */
.tnote{margin-top:12px;padding:10px 13px;border-radius:8px;font-size:13px;line-height:1.5;
  border:1px solid transparent;display:flex;align-items:center;gap:9px}
/* display:flex used to beat the hidden attribute, so an empty chip painted
   its status dot under the button before anything had been sent. */
.tnote[hidden]{display:none}
.tnote::before{content:'';width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:currentColor}
.tnote.ok{background:rgba(78,201,160,.14);border-color:rgba(78,201,160,.42);color:var(--rise);font-weight:600}
.tnote.bad{background:rgba(229,103,79,.14);border-color:rgba(229,103,79,.42);color:var(--fall);font-weight:600}
.tnote.wait{background:var(--surface);border-color:var(--line-2);color:var(--paper)}
.tnote.wait::before{animation:feedpulse 1.4s ease-in-out infinite}
.coinhead{display:flex;align-items:center;gap:14px}
.coinhead .pfp{border-radius:10px;flex:0 0 auto}

/* ---------- yield / vaults ---------- */
.ybanner[hidden]{display:none}
.ybanner{display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface);font-size:14px;line-height:1.68;max-width:860px}
.ybanner strong{color:var(--paper)}
.ybanner code{font-family:var(--mono);font-size:12.5px}
.ybanner-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;margin-top:7px;background:var(--muted)}
.ybanner.warn{border-color:rgba(214,167,90,.45);background:rgba(214,167,90,.09)}
.ybanner.warn .ybanner-dot{background:#d6a75a}
.ybanner.ok{border-color:rgba(78,201,160,.42);background:rgba(78,201,160,.09)}
.ybanner.ok .ybanner-dot{background:var(--rise)}
.ybanner.bad{border-color:rgba(229,103,79,.42);background:rgba(229,103,79,.09)}
.ybanner.bad .ybanner-dot{background:var(--fall)}
.vault-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.vault-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* The dropdown LIST is drawn by the browser, not by this stylesheet, so the
   closed control being dark did nothing for the open popup: it rendered with
   the default light background while the options inherited white text, i.e.
   white on white. color-scheme tells the UA to draw the popup dark, and the
   explicit option colours cover the engines that ignore it. */
.vault-ctl select{color-scheme:dark}
.vault-ctl select option{background:#141416;color:#f4f4f5}
.vault-ctl select option:checked{background:#2a2a2e;color:#fff}
.vault-ctl select{background:var(--surface);color:var(--paper);border:1px solid var(--line-2);
  border-radius:8px;padding:9px 12px;font-family:var(--mono);font-size:13px;min-width:190px}
.vkeys{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:22px}
.vk{background:var(--bg);padding:14px 16px}
.vk-k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.vk-v{font-size:17px;color:var(--paper)}
.vsplit{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:760px){.vsplit{grid-template-columns:1fr}}
.vpos{border:1px solid var(--line);border-radius:10px;padding:16px}
.ypos-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.ypos-row:first-child{border-top:0}
.ytabs{display:flex;gap:8px;margin-bottom:14px}
.ytab{flex:1;padding:10px;border-radius:8px;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.ytab:hover{color:var(--paper)}
.ytab.on{background:var(--paper);color:#0d0d0f;border-color:var(--paper)}
.vfield{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:8px;
  background:#fff;padding:0 10px 0 14px;margin-bottom:12px}
.vfield input{flex:1;background:transparent;border:0;outline:0;color:#111;font-family:var(--mono);
  font-size:16px;padding:13px 0}
.vfield button{background:transparent;border:0;color:#666;font-size:11px;letter-spacing:.08em;cursor:pointer}
.ypreview{font-size:13px;color:var(--body);margin-bottom:12px}
.ypreview strong{color:var(--paper)}

/* ---------- risk gate: the lights behind the plate ----------
   Three soft indigo lights, the same hue as the card's outline, drifting
   slowly in a layer clipped to the card's own footprint. The plate itself is
   opaque, so what you actually see is the halo travelling around its edge:
   the border appears to breathe rather than glow evenly.

   Everything animated here is a transform, which keeps the work on the
   compositor and the whole thing at 60fps while the modal blurs the page
   behind it. Nothing repaints, nothing reflows. */
.gwrap{position:relative;width:100%;max-width:540px;display:flex}
.gwrap > .gbox{max-width:100%}
.gglow{position:absolute;inset:-22px;border-radius:34px;overflow:hidden;
  pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease .15s}
.gin .gglow{opacity:1}
.gglow > i{position:absolute;display:block;border-radius:50%;
  filter:blur(44px);will-change:transform;
  transform:translate3d(0,0,0)}
/* Sampled off the card's own outline so the light and the border are the same
   colour rather than two indigos that nearly match. */
.gglow > i:nth-child(1){width:290px;height:290px;top:-70px;left:-60px;
  background:radial-gradient(circle,rgba(47,179,159,.70),rgba(47,179,159,0) 68%);
  animation:gdrift1 34s ease-in-out infinite}
.gglow > i:nth-child(2){width:250px;height:250px;bottom:-80px;right:-50px;
  background:radial-gradient(circle,rgba(31,138,122,.70),rgba(31,138,122,0) 68%);
  animation:gdrift2 41s ease-in-out infinite}
.gglow > i:nth-child(3){width:210px;height:210px;top:38%;right:-70px;
  background:radial-gradient(circle,rgba(60,150,140,.55),rgba(60,150,140,0) 70%);
  animation:gdrift3 29s ease-in-out infinite}
@keyframes gdrift1{
  0%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(120px,180px,0) scale(1.12)}
  50%{transform:translate3d(330px,420px,0) scale(.94)}
  75%{transform:translate3d(90px,540px,0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes gdrift2{
  0%{transform:translate3d(0,0,0) scale(1)}
  30%{transform:translate3d(-160px,-220px,0) scale(1.14)}
  60%{transform:translate3d(-300px,-520px,0) scale(.9)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes gdrift3{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-230px,-160px,0) scale(1.1)}
  66%{transform:translate3d(-120px,240px,0) scale(.92)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@media (prefers-reduced-motion: reduce){
  .gglow > i{animation:none}
}

/* ---------- yield: pay-with ---------- */
.ypay{display:flex;align-items:center;gap:8px;margin:14px 0 8px}
.ypaych{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:7px;padding:5px 12px;font:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:.15s}
.ypaych:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.ypaych.on{background:#fff;color:#0b0b0c;border-color:#fff}
.ypaynote{margin:0 0 10px;line-height:1.65;max-width:56ch}
.ypos-row{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line);font-size:14px}

/* ---------- launch: the in-tree parent door ----------
   Was a dim "+ Or launch under..." line that read as a footnote, so CROWN and
   the launched coins behind it went unnoticed. Now a full-width plate showing
   the faces of what is inside. */
.launch .disclose-card{display:flex;align-items:center;gap:14px;width:100%;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;cursor:pointer;font:inherit;color:inherit;text-align:left;transition:.16s}
.launch .disclose-card:hover{border-color:var(--gold);background:rgba(255,255,255,.045)}
.launch .disclose-card.open{border-color:var(--gold)}
.launch .dc-marks{display:flex;flex:0 0 auto}
.launch .dc-marks .pfp{margin-right:-8px;border:1px solid #0b0b0c;border-radius:50%}
.launch .dc-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.launch .dc-txt strong{font-size:14.5px}
.launch .dc-txt .dim{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.launch .dc-chev{flex:0 0 auto;font-size:18px;color:var(--dim)}
.launch .disclose-card:hover .dc-chev{color:var(--gold)}

/* ---------- launch: coin picture ---------- */
/* Wider canvas for the launch flow. The parent board and the form both want
   horizontal room, and every pixel of width bought here is vertical scrolling
   the user does not pay. */
.wrap.launch-wide{max-width:1460px}
.launch .formgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start}
@media (max-width:1080px){.launch .formgrid{grid-template-columns:1fr}}
.launch .art-lbl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--paper)}
.launch .art-txt p.art-note{color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.55}
.launch .art-row{display:flex;gap:16px;align-items:center;margin-top:22px;
  border-top:1px solid var(--line);padding-top:20px}
.launch .art-pv{flex:0 0 auto;width:64px;height:64px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.launch .art-pv img{width:100%;height:100%;object-fit:cover;display:block}
/* the site mark is a white glyph with no plate of its own, so it gets one */
.launch .art-pv.def{background:#1b1c1e}
.launch .art-pv.def img{object-fit:contain;padding:10px}
.launch .art-txt{flex:1 1 auto;min-width:0}
.launch .art-txt p{margin:4px 0 10px;font-size:12.5px;line-height:1.55}
.launch .art-btns{display:flex;gap:8px;flex-wrap:wrap}
.launch .art-pick{display:inline-block}