/* SCION
   Design tokens measured directly off useorigin.com's computed styles.
   Display  : Lyon Display 300  -> Newsreader 300 (h1 96/86.4, h2 80/80 ls-.8, h3 38/34.2)
   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{
  --ink:#0f1011;
  --ink-2:#151617;
  --paper:#ffffff;
  --paper-2:#fafafa;
  --body:rgba(255,255,255,.6);
  --dim:rgba(255,255,255,.45);
  --iris:#4b49aa;
  --iris-lift:#6260c9;
  --iris-soft:rgba(75,73,170,.16);
  --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;
}

*{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(75,73,170,.45)}
*::-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:"Newsreader",Georgia,serif;font-weight:300}

.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}
  .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-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(75,73,170,.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}
.sky img,.sky video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;display:block}
/* The still is the poster underneath. The video fades in only once it can actually
   play, so a slow connection sees the photograph instead of a black rectangle. */
.sky-video{opacity:0;transition:opacity .9s ease;z-index:1}
.sky-video.ready{opacity:1}
.sky-still{z-index:0}
/* 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,.52) 0%,rgba(9,14,24,.30) 38%,
      rgba(9,14,24,0) 68%),
    linear-gradient(180deg,rgba(15,16,17,.34) 0%,rgba(15,16,17,.06) 24%,
      rgba(15,16,17,.14) 60%,rgba(15,16,17,.74) 86%,var(--ink) 100%)}
@media (prefers-reduced-motion:reduce){.sky-video{display:none}}

/* 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:"Newsreader",Georgia,serif;font-weight:300;color:#fff;
  font-size:clamp(48px,7.6vw,104px);line-height:.9;letter-spacing:normal;margin:0 0 26px;
  text-shadow:0 2px 40px rgba(0,20,50,.45)}
.hero h1 em{font-style:italic}
.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 reference puts a large translucent ask-field under the CTA. Ours resolves
   a parent symbol and drops you into the launch flow, so it does real work. */
.askbar{display:flex;align-items:center;gap:12px;max-width:600px;margin:52px auto 0;
  padding:12px 12px 12px 26px;border-radius:var(--r-pill,56px);
  background:rgba(255,255,255,.13);border:0;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:none}
.askbar input,.askbar input[type=text]{flex:1;width:auto;min-width:0;background:none;border:0;
  border-radius:0;padding:0;box-shadow:none;color:#fff;font-size:16px;font-weight:300}
.askbar input[type=text]:focus{border:0;box-shadow:none;outline:none}
.askbar input::placeholder{color:rgba(255,255,255,.7)}
.askbar input:focus{outline:none}
.askgo{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.85);
  color:#0f1011;display:inline-flex;align-items:center;justify-content:center;font-size:17px;
  transition:background .15s ease}
.askgo:hover{background:#fff}
.hero-tag{margin:26px 0 0;font-size:16px;font-weight:300;color:rgba(255,255,255,.6)}
.creds{display:flex;gap:44px;justify-content:center;flex-wrap:wrap;margin-top:44px;
  font-family:"Roboto Mono",monospace;font-size:12px;line-height:18px;letter-spacing:.25px;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.creds span{display:flex;flex-direction:column;align-items:center;gap:3px}
.creds b{font-weight:500;color:#fff}
h2.sec{font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(38px,5.6vw,80px);line-height:1;letter-spacing:-.8px;margin:0 0 18px}
h3.sub{font-family:"Newsreader",Georgia,serif;font-weight:300;
  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:"Newsreader",Georgia,serif;font-weight:300;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:#1d1c33}
.node.sel circle{stroke:var(--iris-lift);fill:#232145}
.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(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:"Newsreader",Georgia,serif;font-weight:300;
  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}

/* 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(75,73,170,.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)}
.btn-wallet.on{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}

/* ---------- 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:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(40px,5.6vw,72px);line-height:.9;margin:0 0 20px}
.doc h2{font-family:"Newsreader",Georgia,serif;font-weight:300;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}}
/* 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:#5a5893}

/* ---------- 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;line-height:1}
.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)}
.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(98,96,201,.45)}
.txrow a.gold:hover{color:#8a88e6}

/* ---- 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. */
.btn-src{margin-left:auto;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 13px;border-radius:9px;cursor:pointer;
  color:var(--dim);background:transparent;border:1px solid rgba(255,255,255,.16)}
.btn-src:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.nav .navlinks + .btn-src{margin-left:auto}
.nav .btn-src + #wbtn,.nav .btn-src + .btn-cta{margin-left:10px}
@media (max-width:900px){.btn-src{display:none}}

.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}}