/* LarvaStocks — bento terminal. */
:root{
  --bg:#0b0e11; --panel:#13171d; --panel2:#1a1f27; --line:#262d37;
  --paper:#f2eee4; --paper2:#e7e1d2; --ink:#16181c; --inkmut:#5c5648;
  --text:#eef1f6; --muted:#8b95a7; --accent:#b8e600; --accent-hi:#ccff00;
  --gold:#f0cc52; --red:#e05a4e;
  --mono:"Space Grotesk",ui-monospace,monospace;
  --sans:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* anchor targets stop below the sticky topbar instead of underneath it */
h1,h2,h3,[id]{scroll-margin-top:96px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65}
img{display:block;max-width:100%}
a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--mono);line-height:1.05;letter-spacing:-.02em}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ============ floating pill nav (index) + legacy header (inner pages) ============ */
.topbar{position:sticky;top:14px;z-index:60;display:flex;justify-content:center;padding:0 16px}
.pill{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:22px;background:rgba(19,23,29,.88);border:2px solid var(--line);
  padding:10px 12px 10px 20px;backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.pill .logo{font-family:var(--mono);font-weight:800;font-size:18px;color:var(--text);letter-spacing:.05em}
.pill .logo b{color:var(--accent-hi)}
.pill a.link{color:var(--muted);font-size:14px;font-family:var(--mono)}
.pill a.link:hover,.pill a.link.active{color:var(--text);text-decoration:none}
header{position:sticky;top:0;z-index:50;background:rgba(11,14,17,.92);border-bottom:2px solid var(--line);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.logo{font-family:var(--mono);font-weight:800;font-size:20px;color:var(--text);letter-spacing:.05em}
.logo b{color:var(--accent-hi)}
.nav a.link{color:var(--muted);font-size:14.5px;font-family:var(--mono)}
.nav a.link:hover,.nav a.link.active{color:var(--text);text-decoration:none}
.nav .spacer{flex:1}
.round{font-family:var(--mono);font-size:13px;color:var(--muted);border:2px solid var(--line);padding:7px 12px;background:var(--panel)}
.round b{color:var(--accent-hi)}
.connect{font-family:var(--mono);font-size:13.5px;font-weight:700;padding:10px 16px;background:var(--accent);
  color:#0c1400;border:2px solid var(--accent);cursor:pointer}
.connect:hover{background:var(--accent-hi)}
/* Connected state MUST flip the fill to dark. The address used to be painted
   lime (--accent-hi) on the lime button fill (--accent), so the button went
   solid green with invisible text and looked broken after connecting. */
.connect.connected{background:var(--panel2);color:var(--accent-hi);
  border-color:var(--accent);font-size:12.5px;letter-spacing:.02em}
.connect.connected:hover{background:var(--panel)}
.connect.connected::before{content:"";display:inline-block;width:7px;height:7px;
  margin-right:7px;background:var(--accent-hi);border-radius:50%;vertical-align:middle}
.connect.connected.wrongnet{color:var(--red);border-color:var(--red)}
.connect.connected.wrongnet::before{background:var(--red)}
@media(max-width:920px){.round{display:none}.pill{gap:12px}.pill a.link{font-size:12.5px}}

/* ============ editorial hero ============ */
.heroX{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:92px 0 44px}
.heroX .kicker{font-family:var(--mono);color:var(--accent-hi);font-weight:700;font-size:14px;letter-spacing:.22em;margin-bottom:18px}
.heroX h1{font-size:clamp(40px,6vw,86px);text-transform:uppercase}
.heroX h1 .row2{color:transparent;-webkit-text-stroke:2px var(--accent-hi)}
.heroX .sub{color:var(--muted);font-size:18px;max-width:50ch;margin:24px 0 32px}
.heroX .ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.heroX .heroart{width:100%;max-width:440px;aspect-ratio:1;object-fit:cover;justify-self:end;border:2px solid var(--line);
  box-shadow:10px 10px 0 rgba(0,0,0,.45)}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--text);
  background:var(--panel);border:2px solid var(--line);padding:8px 14px}
.chip b{color:var(--accent-hi);font-variant-numeric:tabular-nums}
/* Hold the hero chips still.
   Every number in this row arrives late and arrives wider than its placeholder:
   burned starts at 0 and lands at nine figures, paid starts as an ellipsis and
   lands at five. Each change resized its chip, which re-wrapped the row, so the
   whole cluster shuffled around while somebody was trying to read it, and again
   on every refresh. Reserving the finished width up front means the row is laid
   out once and never moves. Tabular figures above keep the ticking countdown
   from jittering a pixel at a time as its digits change. */
.ctas .chip{white-space:nowrap}
.ctas .chip b{display:inline-block;text-align:right}
.ctas .chip b[data-live-supply]{min-width:5ch}
.ctas .chip b[data-larva-burned]{min-width:11ch}
.ctas .chip b[data-paid-usd]{min-width:8ch}
/* The contract addresses under the hero.
   Drawn as one quiet line, not as chips. Boxing them made four more bordered
   pills sitting under four that were already there, and the hero turned into a
   wall of rectangles wrapping over three rows. This is reference material
   somebody looks up once before they buy: it has to be findable and copyable,
   and it must not compete with the live figures above it. */
.cas{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:16px;
  font-family:var(--mono);font-size:12px;color:var(--muted)}
/* $LARVA carries the line: it is what somebody is scanning for, and the address
   next to it means nothing until they know which token it belongs to. */
.cas .lbl{color:var(--accent);font-weight:700;letter-spacing:.03em}
.cas .sep{opacity:.35;padding:0 4px}
.cas button.ca{display:inline-flex;align-items:baseline;gap:7px;padding:0;border:0;
  background:none;font:inherit;color:var(--text);cursor:pointer;
  text-align:left;word-break:break-all}
.cas button.ca i{font-style:normal;color:var(--muted);
  border-bottom:1px dotted var(--line)}
.cas a{color:var(--muted);border-bottom:1px dotted var(--line)}
.cas a:hover,.cas button.ca:hover{color:var(--accent)}
.cas button.ca:hover i{color:var(--accent)}
.cas .ca.done,.cas .ca.done i{color:var(--accent)}
@media(max-width:980px){.heroX{grid-template-columns:1fr}.heroX .heroart{justify-self:center;max-width:400px}}

/* ============ bento grid ============ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:56px 0}
.b{background:var(--panel);border:2px solid var(--line);padding:26px;position:relative;overflow:hidden}
.b:hover{border-color:#33404e}
.b .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--muted);margin-bottom:14px}
.b .huge{font-family:var(--mono);font-weight:800;font-size:clamp(38px,4.6vw,64px);line-height:1;color:var(--accent-hi)}
.b .huge span{color:var(--muted);font-size:.45em}
/* the headline figure keeps full size and colour; only the qualifier
   beside it is the muted, smaller one */
.b .huge span.n{color:var(--accent-hi);font-size:1em}
.b p{color:var(--muted);font-size:14.5px}
.b-6{grid-column:span 6}.b-4{grid-column:span 4}.b-3{grid-column:span 3}.b-8{grid-column:span 8}.b-12{grid-column:span 12}
.b .artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.b .artgrid img{border:2px solid var(--line);aspect-ratio:1;object-fit:cover;background:var(--panel2)}
.b .logostrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.b .logostrip img,.b .logostrip .badge{width:34px;height:34px;border-radius:50%;background:#3a3f4a;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:12px;color:#e8ecf2}
.b .barwrap{height:14px;background:var(--panel2);border:2px solid var(--line);margin-top:16px}
.b .barwrap i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
.b.mintcard-b{background:linear-gradient(135deg,#1e2410,var(--panel));border-color:var(--accent)}
/* the headline number: what the collection has actually paid out */
.b.paidband{background:linear-gradient(135deg,#1c2410,var(--panel));border-color:var(--accent)}
.paidnum{font-family:var(--mono);font-weight:800;line-height:1;color:var(--accent-hi);
  font-size:clamp(44px,7vw,96px);margin:6px 0 10px}
/* mint is over: the way in is the secondary market, so the button carries the
   mark of the place it sends you rather than reading as another site action */
.oslink svg{width:18px;height:18px;fill:currentColor;flex:none}
.b .fusepair{display:flex;align-items:center;gap:12px;margin-top:8px}
.b .fusepair img{width:88px;aspect-ratio:1;object-fit:cover;border:2px solid var(--line);background:var(--panel2)}
.b .fusepair .arrow{color:var(--accent-hi);font-family:var(--mono);font-weight:800;font-size:22px}
@media(max-width:940px){.b-6,.b-4,.b-3,.b-8{grid-column:span 12}}

/* ============ light paper band ============ */
.paperband{background:var(--paper);color:var(--ink);padding:84px 0;border-top:6px solid var(--accent);border-bottom:6px solid var(--accent)}
.paperband h2{font-size:clamp(30px,4vw,48px);text-transform:uppercase;color:var(--ink)}
.paperband .lead{color:var(--inkmut);max-width:60ch;margin:14px 0 44px;font-size:17px}
.stepsX{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--ink)}
.stepX{padding:26px 22px;border-right:3px solid var(--ink);background:var(--paper)}
.stepX:last-child{border-right:0}
.stepX:nth-child(even){background:var(--paper2)}
.stepX .num{font-family:var(--mono);font-weight:800;font-size:44px;color:var(--accent);line-height:1}
.stepX h3{font-size:17px;margin:12px 0 8px;color:var(--ink)}
.stepX p{color:var(--inkmut);font-size:14.5px}
.feeflow{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--ink);font-family:var(--mono)}
.fee{padding:20px 22px;border-right:3px solid var(--ink)}
.fee:last-child{border-right:0}
.fee .v{font-weight:800;font-size:26px;color:var(--ink)}
.fee .k{font-size:12.5px;color:var(--inkmut);margin-top:4px}
@media(max-width:940px){.stepsX,.feeflow{grid-template-columns:1fr 1fr}.stepX:nth-child(2),.fee:nth-child(2){border-right:0}.stepX,.fee{border-bottom:3px solid var(--ink)}}

/* ============ grails band ============ */
.grailband{padding:84px 0;background:radial-gradient(ellipse 800px 420px at 50% 0%,rgba(240,204,82,.07),transparent)}
.grailband h2{font-size:clamp(30px,4vw,48px);text-transform:uppercase}
.grailband .lead{color:var(--muted);max-width:60ch;margin:14px 0 40px}
.grailrow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.grailrow img{border:2px solid var(--line);aspect-ratio:1;object-fit:cover;background:var(--panel2)}
.grailrow img:hover{border-color:var(--gold)}
.grailrow .mystery{aspect-ratio:1;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:30px;color:var(--muted)}
@media(max-width:820px){.grailrow{grid-template-columns:repeat(3,1fr)}}

/* ============ marquee ============ */
.marquee{overflow:hidden;border-top:2px solid var(--line);border-bottom:2px solid var(--line);background:var(--panel);padding:14px 0}
.marquee .track{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite}
.marquee img{width:110px;height:110px;border:2px solid var(--line);object-fit:cover;background:var(--panel2)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ============ legacy component set (inner pages) ============ */
.vox{background:var(--panel);border:2px solid var(--line);box-shadow:6px 6px 0 rgba(0,0,0,.42)}
.vox-hi{border-color:var(--accent)}
.btn{display:inline-block;font-family:var(--mono);font-weight:700;font-size:15px;padding:14px 24px;
  border:2px solid var(--accent);cursor:pointer;color:#0c1400;background:var(--accent);box-shadow:6px 6px 0 rgba(0,0,0,.42);
  transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.45);text-decoration:none;background:var(--accent-hi)}
/* mint is over: the way in is the secondary market, so the button carries the
   mark of the place it sends you rather than reading as another site action.
   Must come after .btn, which also sets display and would otherwise win. */
.oslink{display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1}
.btn.ghost{background:transparent;color:var(--accent-hi)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:72px 0 56px}
.hero h1{font-size:clamp(34px,5.2vw,58px);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent-hi)}
.hero p{color:var(--muted);font-size:17.5px;max-width:46ch;margin-bottom:28px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid9 img{border:2px solid var(--line);transition:opacity .25s}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px 0 56px}
.stat{padding:22px 20px}
.stat .n{font-family:var(--mono);font-size:clamp(24px,3vw,36px);font-weight:800}
.stat .n.glow{color:var(--accent-hi)}
.stat .l{color:var(--muted);font-size:13px;margin-top:6px;font-family:var(--mono)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
section{padding:56px 0}
.sec-title{font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.sec-sub{color:var(--muted);margin-bottom:32px;max-width:64ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{padding:22px}
.step .k{font-family:var(--mono);color:var(--accent-hi);font-weight:800;font-size:13px;margin-bottom:10px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.tables{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.tbl{padding:16px 14px;text-align:center}
.tbl .logo,.tbl .badge{width:26px;height:26px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:12px;background:#3a3f4a;color:#e8ecf2}
.tbl .sym{font-family:var(--mono);font-weight:800;font-size:15px}
.tbl .chg{font-family:var(--mono);font-size:13px;margin-top:4px}
.up{color:var(--accent-hi)}.dn{color:var(--red)}
.tbl .seats{color:var(--muted);font-size:12px;margin-top:8px;font-family:var(--mono)}
@media(max-width:900px){.tables{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.tables{grid-template-columns:repeat(2,1fr)}}
.grails{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grails .card{border:2px solid var(--line)}
.grails .mystery{aspect-ratio:1;background:repeating-linear-gradient(45deg,var(--panel) 0 12px,var(--panel2) 12px 24px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:26px;color:var(--muted)}
@media(max-width:820px){.grails{grid-template-columns:repeat(3,1fr)}}
.fuseband{padding:44px 36px;display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:space-between}
.fuseband .big{font-family:var(--mono);font-size:clamp(34px,5vw,54px);font-weight:800}
.fuseband .big span{color:var(--muted);font-size:.55em}
.supplybar{height:12px;background:var(--panel2);border:2px solid var(--line);margin-top:12px;width:min(420px,100%)}
.supplybar i{display:block;height:100%;background:var(--accent);width:100%}
.floor{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fl{padding:22px}
.fl .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.fl .sym{font-family:var(--mono);font-weight:800;font-size:19px}
.fl .row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:6px 0;border-top:1px solid var(--line);font-family:var(--mono)}
.fl .row b{color:var(--text)}
@media(max-width:900px){.floor{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.floor{grid-template-columns:1fr}}
.notice{padding:16px 20px;color:var(--muted);font-size:14.5px;border-left:4px solid var(--accent);background:var(--panel);margin:26px 0}
.counter{text-align:center;padding:56px 20px 40px}
.counter .huge{font-family:var(--mono);font-weight:800;font-size:clamp(52px,9vw,110px);line-height:1}
.counter .huge span{color:var(--muted);font-size:.4em}
.feed .item{display:flex;gap:14px;align-items:center;padding:16px;margin-bottom:12px}
.feed img{width:64px;height:64px;border:2px solid var(--line)}
.docs{display:grid;grid-template-columns:220px 1fr;gap:44px;padding:44px 0}
.docs nav{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:10px}
.docs nav a{color:var(--muted);font-family:var(--mono);font-size:13.5px}
.docs h2{font-size:22px;margin:38px 0 12px;padding-top:8px}
.docs h2:first-child{margin-top:0}
.docs p,.docs li{color:#b8c0cc;font-size:15.5px;margin-bottom:10px}
.docs ul{padding-left:22px}
.docs table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14.5px}
.docs th,.docs td{border:1px solid var(--line);padding:8px 12px;text-align:left;font-family:var(--mono)}
.docs th{color:var(--muted);font-weight:600}
.faq details{border:2px solid var(--line);background:var(--panel);margin-bottom:10px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--mono);font-size:14.5px}
.faq p{margin-top:10px}
@media(max-width:820px){.docs{grid-template-columns:1fr}.docs nav{position:static;flex-direction:row;flex-wrap:wrap;gap:14px}}
.pick.on{border-color:var(--accent)}

/* ============ footer ============ */
footer{margin-top:88px;background:linear-gradient(180deg,var(--panel) 0%,#0b0e13 100%);
  border-top:1px solid var(--line)}

/* one row: identity anchors the left, links sit tight on the right */
.fbar{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding:28px 0 18px;flex-wrap:wrap}
.fbrand{display:flex;flex-direction:column;gap:7px}
.fmark{font-family:var(--mono);font-weight:800;font-size:16px;letter-spacing:.07em;
  color:var(--text);text-decoration:none;line-height:1}
.fmark b{color:var(--accent-hi)}
.ftag{color:#5f6874;font-size:12px;line-height:1.5;margin:0;max-width:42ch}
.fnav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end}
.fnav a{color:#8f98a5;font-size:12.5px;text-decoration:none;transition:color .15s}
.fnav a:hover{color:var(--accent-hi)}
.fnav .sep{width:1px;height:11px;background:#2a3038;flex:none}
.fnav a.ext{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:#6d7683}
.fnav a.ext:hover{color:var(--gold)}

/* a gold hairline instead of a hard rule: the only flourish down here */
.frule{height:1px;background:linear-gradient(90deg,rgba(217,178,62,.55),rgba(217,178,62,.10) 38%,transparent 72%)}

/* legal, deliberately quiet and narrow so it reads as fine print */
.ffine{padding:16px 0 0}
.fnote{color:#79818d;font-size:12px;line-height:1.6;margin:0 0 10px;max-width:88ch}
.fnote a{color:#98a0ac;text-decoration:underline;text-underline-offset:3px}
.fnote a:hover{color:var(--accent-hi)}
.disc{color:#4e555f;font-size:10.5px;line-height:1.75;margin:0;max-width:120ch}
.disc b{color:#6d7683;font-weight:700}
.copyline{padding:12px 0 22px;color:#3f4650;font-size:10.5px;font-family:var(--mono);
  letter-spacing:.03em}

@media(max-width:900px){
  .fbar{align-items:flex-start;gap:22px;padding:28px 0 18px}
  .fnav{justify-content:flex-start;gap:16px}
  .fnav .sep{display:none}
}
/* legacy three column footer, kept so nothing breaks if a page still uses it */
.fcols{display:grid;grid-template-columns:1.2fr 1fr 1.6fr;gap:36px;padding:44px 0}
.fcols h4{font-family:var(--mono);font-size:14px;margin-bottom:12px;color:var(--text)}
.fcols p,.fcols a{color:var(--muted);font-size:13.5px}
.fcols .addr{font-family:var(--mono);font-size:12.5px;word-break:break-all}
.fcols ul{list-style:none}
.fcols li{margin-bottom:8px}
@media(max-width:820px){.fcols{grid-template-columns:1fr}}


/* ============ v2 inner pages ============ */
.pagehead{padding:84px 0 30px}
.pagehead .kicker{font-family:var(--mono);color:var(--accent-hi);font-weight:700;font-size:13px;letter-spacing:.22em;margin-bottom:14px}
.pagehead h1{font-size:clamp(38px,5.5vw,72px);text-transform:uppercase}
.pagehead .sub{color:var(--muted);font-size:17px;max-width:56ch;margin-top:16px}
.chiprow{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 10px}
.tierrow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:30px 0 10px}
.tiercard{background:var(--panel);border:2px solid var(--line);padding:22px 18px;text-align:center;position:relative}
.tiercard:hover{border-color:var(--accent)}
.tiercard .mult{font-family:var(--mono);font-weight:800;font-size:38px;color:var(--accent-hi);line-height:1}
.tiercard .nm{font-family:var(--mono);font-size:13px;margin:10px 0 6px}
.tiercard .cost{color:var(--muted);font-size:12.5px;font-family:var(--mono)}
.tiercard.top{border-color:var(--gold)}
.tiercard.top .mult{color:var(--gold)}
@media(max-width:940px){.tierrow{grid-template-columns:repeat(2,1fr)}}
.paperlite{background:var(--paper);color:var(--ink);padding:70px 0;border-top:6px solid var(--accent);border-bottom:6px solid var(--accent)}
.paperlite h2{color:var(--ink);font-size:clamp(26px,3.4vw,40px);text-transform:uppercase}
.paperlite .lead{color:var(--inkmut);margin:12px 0 34px;max-width:60ch}
.paperlite .vox{background:#fff;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);color:var(--ink)}
.paperlite .mintrow{border-bottom:1px solid #cfc8b4;color:var(--inkmut)}
.paperlite .mintrow b{color:var(--accent)}
.paperlite .qty button{background:#fff;border:2px solid var(--ink);color:var(--ink)}
.paperlite .qty .n{color:var(--ink)}
.paperlite .mintnote{color:var(--inkmut)}
.paperlite .step p, .paperlite .step h3{color:var(--ink)}
.paperlite .step .k{color:var(--accent)}
.paperdocs{background:var(--paper);border-top:6px solid var(--accent)}
.paperdocs .docs p,.paperdocs .docs li{color:#3d382c}
.paperdocs .docs h2{color:var(--ink)}
.paperdocs .docs nav a{color:#6e6753}
.paperdocs .docs th,.paperdocs .docs td{border-color:#c9c2ae;color:var(--ink)}
.paperdocs .docs th{color:#6e6753}
.paperdocs .faq details{background:#fff;border:3px solid var(--ink)}
.paperdocs .faq summary{color:var(--ink)}
.paperdocs .faq p{color:#3d382c}
.paperdocs a{color:#5a7a00}
.fusegallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.fusegallery img{width:100%;border:2px solid var(--line)}
@media(max-width:820px){.fusegallery{grid-template-columns:1fr}}

/* ============ the wallet chooser ============ */
/* The one place on the site that is not hard edged.
   Everything else here is brutalist on purpose, but a connect dialog is the
   first thing a stranger touches and it is judged against every other dapp
   they have used. So: soft corners, real depth, the wallet's own logo, and
   room to breathe. */
.walletpick{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;
  justify-content:center;padding:20px;
  animation:wpIn .16s ease-out}
@keyframes wpIn{from{opacity:0}to{opacity:1}}
.wp-back{position:absolute;inset:0;background:rgba(6,8,11,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wp-box{position:relative;width:min(400px,100%);border-radius:20px;
  background:linear-gradient(180deg,#181d25,#12161c);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;animation:wpUp .22s cubic-bezier(.2,.9,.3,1)}
@keyframes wpUp{from{transform:translateY(10px) scale(.985);opacity:0}
                to{transform:none;opacity:1}}
.wp-head{display:flex;align-items:center;justify-content:center;position:relative;
  padding:20px 20px 14px;font-family:var(--mono);font-weight:700;font-size:16px;
  letter-spacing:-.01em}
.wp-x{position:absolute;right:14px;top:14px;width:30px;height:30px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;background:none;
  border:0;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.wp-x:hover{background:rgba(255,255,255,.07);color:var(--text)}
.wp-list{padding:6px 10px 10px;display:flex;flex-direction:column;gap:4px;
  max-height:min(58vh,440px);overflow-y:auto}
.wp-item{display:flex;align-items:center;gap:14px;width:100%;padding:11px 12px;
  border-radius:14px;background:transparent;border:1px solid transparent;
  color:var(--text);font:inherit;cursor:pointer;text-align:left;
  transition:background .14s,border-color .14s,transform .14s}
.wp-item:hover{background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.09)}
.wp-item:active{transform:scale(.99)}
.wp-icon{width:38px;height:38px;flex:none;border-radius:11px;overflow:hidden;
  background:#20262f;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.wp-icon img{width:100%;height:100%;object-fit:cover}
.wp-name{flex:1;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.wp-tag{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-hi);
  background:rgba(204,255,0,.12);border:1px solid rgba(204,255,0,.28);
  padding:4px 8px;border-radius:7px}
.wp-go{color:#5b6675;display:flex;align-items:center;transition:color .14s,transform .14s}
.wp-item:hover .wp-go{color:var(--text);transform:translateX(2px)}
.wp-none{padding:10px 14px 18px;color:var(--muted);font-size:14px;line-height:1.6}
.wp-foot{display:flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 20px;border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.22);color:var(--muted);font-family:var(--mono);
  font-size:11.5px;letter-spacing:.01em}
.wp-foot b{color:var(--text);font-weight:700}
.wp-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-hi);
  box-shadow:0 0 8px rgba(204,255,0,.85)}
.wp-sep{opacity:.35}

/* the WalletConnect row and its QR panel */
.wp-icon-wc{background:linear-gradient(135deg,#3396ff,#1f6fe0);color:#fff}
.wp-tag-qr{color:#7fb6ff;background:rgba(51,150,255,.12);
  border-color:rgba(51,150,255,.25)}
.wp-scan{padding:6px 14px 18px;text-align:center}
.wp-qr{width:210px;height:210px;margin:8px auto 16px;padding:12px;border-radius:16px;
  background:#fff;display:flex;align-items:center;justify-content:center}
.wp-spin{width:26px;height:26px;border-radius:50%;border:3px solid #d8dee6;
  border-top-color:#b8e600;animation:wpSpin .8s linear infinite}
@keyframes wpSpin{to{transform:rotate(360deg)}}
.wp-scan p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 auto 14px;
  max-width:30ch}
.wp-copy,.wp-back-btn{font-family:var(--mono);font-size:12px;padding:8px 14px;
  border-radius:9px;background:rgba(255,255,255,.05);color:var(--text);
  border:1px solid rgba(255,255,255,.1);cursor:pointer;margin:0 4px}
.wp-copy:hover,.wp-back-btn:hover{background:rgba(255,255,255,.09)}

/* ============ mobile nav: hamburger ============ */
/* Source wraps its pill onto four lines under 520px, which reads as a broken
   header on a phone. Collapse the links behind a toggle instead; desktop is
   untouched. */
/* The three strips are DRAWN, not a font glyph. The old button used ☰,
   which renders as a blank box (or nothing) on any device whose font lacks it,
   so the menu looked like it was missing entirely. Spans always paint. */
.navtoggle{display:none;background:none;border:2px solid var(--line);
  padding:9px 10px;cursor:pointer;line-height:0}
.navtoggle:hover{border-color:var(--accent)}
.navtoggle .bar{display:block;width:20px;height:2px;background:var(--text);
  transition:transform .18s ease,opacity .18s ease}
.navtoggle .bar+.bar{margin-top:4px}
.navtoggle:hover .bar{background:var(--accent-hi)}
/* open state turns the three strips into an x, no glyph swap needed */
.pill.open .navtoggle .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pill.open .navtoggle .bar:nth-child(2){opacity:0}
.pill.open .navtoggle .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:720px){
  .pill{flex-wrap:nowrap;justify-content:space-between;gap:10px;padding:10px 12px;width:100%}
  .pill .logo{font-size:16px;flex:1}
  /* order matters once .open lets the pill wrap: logo and toggle must stay on
     the first row, everything revealed goes underneath. Without explicit
     orders the toggle got pushed past the links onto the LAST row, so the
     close (x) landed under the Connect wallet button. */
  /* Connect must NOT hide behind the hamburger: connecting a wallet is the one
     action every visitor needs, and burying it in a collapsed menu meant you
     had to discover the menu first. It stays on the first row next to the
     toggle; only the nav links collapse. */
  .pill .logo{order:1}
  .pill .connect{order:2;flex:0 0 auto}
  .navtoggle{display:block;order:3;flex:0 0 auto}
  .pill a.link{order:4}
  .pill a.link{display:none;width:100%;text-align:left;padding:9px 4px;font-size:14px;
    border-top:1px solid var(--line)}
  .pill .connect{display:block;width:auto;margin:0;padding:9px 12px;font-size:12px}
  .pill.open{flex-wrap:wrap}
  .pill.open a.link{display:block}
  /* the logo can shrink; the two controls keep their size */
  .pill .logo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* the hero contract line must never clip its trailing link on narrow screens */
.cas{overflow-wrap:anywhere;min-width:0}
.cas button.ca{min-width:0;flex:1 1 auto}
.cas a{white-space:nowrap}

/* .heroX and .grailband set a padding shorthand after .wrap, which zeroes the
   24px gutter the wrapper had established. Desktop hides it behind the
   max-width margin; on a phone every hero line goes flush to the edge and the
   trailing link clips. Restore the gutter explicitly. */
.wrap.heroX{padding-left:24px;padding-right:24px}

/* the contract address is 42 chars; on a phone it wraps and shoves the copy
   affordance onto its own line. Ellipsize the address and pin the copy word. */
@media(max-width:560px){
  .cas button.ca{max-width:100%}
  .cas button.ca{overflow:hidden}
  .cas .ca-addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
    display:inline-block;max-width:62vw;vertical-align:bottom}
  .cas button.ca i{flex:0 0 auto;white-space:nowrap}
}