/* Stackers v2 — bento terminal. A different site, not a reskin. */
:root{
  --bg:#0b0e11; --panel:#13171d; --panel2:#1a1f27; --line:#262d37;
  --paper:#f2eee4; --paper2:#e7e1d2; --ink:#16181c; --inkmut:#5c5648;
  --text:#eef1f6; --muted:#8b95a7; --accent:#2ba05c; --accent-hi:#3dd67e;
  --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:#07130b;border:2px solid var(--accent);cursor:pointer}
.connect:hover{background:var(--accent-hi)}
.connect.connected:hover{background:var(--accent)!important;color:#07130b!important}
@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;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-stack-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)}
/* $STACK 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 .artstack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.b .artstack img{border:2px solid var(--line)}
.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,#14231a,var(--panel));border-color:var(--accent)}
/* the headline number: what the collection has actually paid out */
.b.paidband{background:linear-gradient(135deg,#0f2417,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{display:inline-flex;align-items:center;gap:8px}
.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;border:2px solid var(--line)}
.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)}
.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)}
@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:#07130b;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)}
.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:#1c7a45}
.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(61,214,126,.12);border:1px solid rgba(61,214,126,.22);
  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(61,214,126,.8)}
.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:#2ba05c;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)}