/* Non-Fungible Sound - site design system.
   Every size is a multiple of --px (one art pixel = 3 CSS px). Black and white
   carries the art; one accent per idea: voice (sound, mining), rare, chain. */
:root{
  color-scheme:dark;
  --px:3px;
  --ink:#050507; --panel:#101016; --panel2:#17171f; --line:#2c2c38; --line2:#3b3b4a;
  --text:#EEF0F5; --dim:#A0A0B2; --dimmer:#65657a;
  --voice:#7CF5B0; --voice-deep:#2f8c5f; --rare:#F2A65A; --chain:#7FD8E6; --no:#F2718C;
  --glow:0 0 calc(var(--px)*4) rgba(255,255,255,.55);
  --display:"Silkscreen","IBM Plex Mono",monospace;
  --num:"VT323","IBM Plex Mono",monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1120px;
  /* 9-slice pixel frames: 1-unit line, stepped corners, filled centre */
  --f-base:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%232c2c38' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1z'/%3E%3Cpath fill='%23101016' d='M1 1h3v3H1z'/%3E%3C/svg%3E");
  --f-voice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%237CF5B0' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1z'/%3E%3Cpath fill='%230c1813' d='M1 1h3v3H1z'/%3E%3C/svg%3E");
  --f-rare:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2A65A' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1z'/%3E%3Cpath fill='%23191309' d='M1 1h3v3H1z'/%3E%3C/svg%3E");
  --f-chain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%237FD8E6' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1z'/%3E%3Cpath fill='%230b1719' d='M1 1h3v3H1z'/%3E%3C/svg%3E");
  --f-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1z'/%3E%3Cpath fill='%23000000' d='M1 1h3v3H1z'/%3E%3C/svg%3E");
  --f-btn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%237CF5B0' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1zM1 1h3v3H1z'/%3E%3C/svg%3E");
  --f-ghost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%233b3b4a' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1z'/%3E%3Cpath fill='%23101016' d='M1 1h3v3H1z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:transparent;color:var(--text);font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--voice);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%}
[hidden]{display:none!important}
::selection{background:var(--voice);color:var(--ink)}
:focus-visible{outline:2px solid var(--voice);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
/* moving background (bg.js): fixed behind everything, never in the way */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- frames ---------- */
.frame{border:calc(var(--px)*2) solid transparent;border-image:var(--f-base) 2 fill / calc(var(--px)*2) stretch}
.frame.voice{border-image-source:var(--f-voice)}
.frame.rare{border-image-source:var(--f-rare)}
.frame.chain{border-image-source:var(--f-chain)}
.frame.white{border-image-source:var(--f-white)}
.pad{padding:calc(var(--px)*6)}
@media (max-width:640px){.pad{padding:calc(var(--px)*5)}}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.15;margin:0}
h1{font-size:clamp(30px,6vw,60px)}
h2{font-size:clamp(22px,3.4vw,33px);margin-bottom:12px}
h3{font-size:18px;margin-bottom:8px}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);margin:0 0 14px}
.eyebrow b{color:var(--voice);font-weight:500}
.lead{font-size:clamp(16px,2vw,19px);color:var(--dim);max-width:62ch;margin:0}
.lead em,.prose em{font-style:normal;color:var(--text)}
.prose{max-width:70ch;color:var(--dim)}
.prose p{margin:0 0 14px}
.prose strong{color:var(--text);font-weight:600}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.glow{text-shadow:var(--glow)}
.hi{color:var(--voice)} .rare{color:var(--rare)} .chain{color:var(--chain)} .no{color:var(--no)} .dim{color:var(--dim)}
code,.code{font-family:var(--mono);font-size:.9em;color:var(--text);background:var(--panel2);
  border:1px solid var(--line);border-radius:2px;padding:1px 5px;overflow-wrap:anywhere}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:400 14px/1 var(--display);letter-spacing:.04em;color:var(--ink);white-space:nowrap;
  padding:calc(var(--px)*3) calc(var(--px)*5);text-decoration:none;user-select:none;
  border:calc(var(--px)*2) solid transparent;border-image:var(--f-btn) 2 fill / calc(var(--px)*2) stretch;
  box-shadow:0 var(--px) 0 var(--voice-deep);transition:transform .06s,box-shadow .06s,filter .12s;background:none}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:active{transform:translateY(var(--px));box-shadow:0 0 0 var(--voice-deep)}
.btn.ghost{color:var(--text);border-image-source:var(--f-ghost);box-shadow:0 var(--px) 0 #1f1f29}
.btn.ghost:hover{color:var(--voice)}
.btn.big{font-size:16px;padding:calc(var(--px)*4) calc(var(--px)*7)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:default;filter:none;transform:none}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(5,5,7,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none!important}
.brand-mark{font:400 21px/1 var(--display);letter-spacing:.06em}
.brand-mark b{font-weight:400;color:var(--voice)}
.brand-logo{width:40px;height:40px;display:block}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{font:400 12.5px/1 var(--display);letter-spacing:.04em;color:var(--dim);padding:10px 10px;text-decoration:none}
.nav a:hover{color:var(--text)}
.nav a[aria-current=page]{color:var(--voice)}
.head-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--dim);
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:9px 11px;cursor:pointer}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip .dot{width:7px;height:7px;background:var(--dimmer)}
.chip.on .dot{background:var(--voice);box-shadow:0 0 8px var(--voice)}
.chip.on{color:var(--text)}
.menu-btn{display:none}
@media (max-width:960px){
  .nav{position:fixed;inset:62px 0 auto 0;flex-direction:column;background:var(--ink);
    border-bottom:1px solid var(--line);padding:8px 16px 16px;margin:0;display:none}
  .nav.open{display:flex}
  .nav a{font-size:15px;padding:13px 4px;border-bottom:1px solid var(--panel2)}
  .menu-btn{display:inline-flex}
}
#soundToggle .ico{display:none}
@media (max-width:420px){#soundToggle .lbl{display:none}#soundToggle .ico{display:inline}}

/* ---------- sections ---------- */
main{display:block}
.section{padding:clamp(48px,8vw,96px) 0}
.section.tight{padding:clamp(32px,5vw,56px) 0}
.section + .section{border-top:1px solid var(--panel2)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card h3{margin-bottom:10px}
.card p{margin:0;color:var(--dim);font-size:15px}
.card .k{font:400 13px/1 var(--display);color:var(--voice);margin-bottom:14px;display:block}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,84px) 0 clamp(40px,6vw,72px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{margin-bottom:20px}
.hero h1 .hi{text-shadow:0 0 18px rgba(124,245,176,.45)}
.hero .lead{margin-bottom:28px}
/* the home punk: the same white pixel frame as the voice cards, but open in
   the middle so the moving background shows through */
.hero-frame{width:100%;max-width:480px;aspect-ratio:1;margin:0 auto;display:grid;place-items:center;
  border:calc(var(--px)*2) solid transparent;border-image:var(--f-white) 2 / calc(var(--px)*2) stretch;
  box-shadow:0 0 40px rgba(255,255,255,.06)}
.hero-art{display:block;width:84%;height:auto}

/* ---------- the voice card (art + waveform in one square) ---------- */
.vcard{position:relative;width:100%;max-width:480px;aspect-ratio:1;background:#000;overflow:hidden;cursor:pointer;
  border:calc(var(--px)*2) solid transparent;border-image:var(--f-white) 2 fill / calc(var(--px)*2) stretch;
  box-shadow:0 0 40px rgba(255,255,255,.06)}
.vcard img,.vcard canvas.art{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
.vcard canvas.wave{position:absolute;left:5%;right:5%;bottom:2.5%;width:90%;height:11%}
.vcard .tag{position:absolute;left:12px;top:10px;font:400 20px/1 var(--num);color:#fff;opacity:.85}
.vcard .play{position:absolute;right:12px;top:10px;font:400 20px/1 var(--num);color:#fff;opacity:.85}
.vcard:hover .play{color:var(--voice)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:calc(var(--px)*5)}
.stat .l{font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.stat .v{font:400 clamp(30px,4vw,40px)/1 var(--num);margin-top:10px;color:var(--text)}
.stat .v small{font-size:.55em;color:var(--dim)}
.stat .h{font-size:12.5px;color:var(--dimmer);margin-top:6px}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;
  font:400 34px/1 var(--num);color:var(--voice);margin-bottom:10px}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:400 12px/1.2 var(--display);color:var(--dimmer);letter-spacing:.04em}
.tbl td:first-child{color:var(--dim);white-space:nowrap}
.tbl td.y{color:var(--voice)} .tbl td.n{color:var(--dim)}
.tbl-scroll{overflow-x:auto}

/* ---------- faq ---------- */
details.q{border-bottom:1px solid var(--line)}
details.q summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font:600 16.5px/1.4 var(--sans);color:var(--text)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 26px/1 var(--num);color:var(--voice)}
details.q[open] summary::after{content:"\2212"}
details.q .a{padding:0 0 18px;color:var(--dim);max-width:72ch}
details.q .a p{margin:0 0 10px}

/* ---------- forms ---------- */
.field{display:flex;gap:10px;flex-wrap:wrap}
.input{flex:1;min-width:160px;background:#000;color:var(--text);border:1px solid var(--line2);border-radius:2px;
  padding:13px 14px;font:400 26px/1 var(--num);letter-spacing:.06em}
.input::placeholder{color:var(--dimmer)}
.input:focus{outline:2px solid var(--voice);outline-offset:1px;border-color:var(--voice)}
.input.bad{border-color:var(--no)}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{font:400 12.5px/1 var(--display);letter-spacing:.03em;color:var(--dim);background:var(--panel);
  border:1px solid var(--line);border-radius:2px;padding:11px 14px;cursor:pointer}
.tab:hover{color:var(--text)}
.tab[aria-selected=true]{color:var(--ink);background:var(--voice);border-color:var(--voice)}
.drop{border:2px dashed var(--line2);background:var(--panel);padding:38px 20px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--voice);background:var(--panel2)}
.drop h3{margin:0 0 6px}
.drop p{margin:0;color:var(--dimmer);font:13px/1.5 var(--mono)}
.state{margin-top:12px;font:500 13px/1.5 var(--mono);color:var(--dimmer);min-height:20px}
.state.bad{color:var(--no)} .state.good{color:var(--voice)}

/* ---------- chips / traits ---------- */
.traits{display:flex;flex-wrap:wrap;gap:6px}
.t{font:500 11.5px/1 var(--mono);padding:6px 8px;background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
.t.type{color:var(--text);border-color:var(--line2)}
.badge{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 8px;border:1px solid var(--line2);color:var(--dim)}
.badge.hi{color:var(--voice);border-color:var(--voice-deep)}
.badge.rare{color:var(--rare);border-color:#6b4a27}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:13px/1.45 var(--mono);margin:0}
.spec dt{color:var(--dimmer);white-space:nowrap}
.spec dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.spec dd.v{color:var(--voice)} .spec dd.r{color:var(--rare)} .spec dd.n{color:var(--dimmer)}

/* ---------- progress bar (pixel segments) ---------- */
.bar{height:21px;background:#000;border:1px solid var(--line2);padding:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--voice) 0 9px,transparent 9px 12px);
  transition:width .2s}

/* ---------- hash strip: 64 nibbles, leading zeros lit ---------- */
.hstrip{display:grid;grid-template-columns:repeat(64,1fr);gap:1px;height:18px}
.hstrip i{display:block;background:#1d1d26}
.hstrip i.z{background:var(--voice);box-shadow:0 0 6px rgba(124,245,176,.6)}
.hstrip i.t{outline:1px solid var(--rare);outline-offset:-1px}
.hexline{font:400 17px/1.2 var(--num);color:var(--dim);overflow-wrap:anywhere;letter-spacing:.03em}
.hexline b{color:var(--voice);font-weight:400}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{padding:calc(var(--px)*4);font-size:14px;animation:pop .18s ease-out}
.toast a{font-weight:600}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:40px;padding:48px 0 40px;color:var(--dimmer);font-size:14px}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px}
@media (max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr}}
.site-foot h4{font:400 12px/1 var(--display);letter-spacing:.06em;color:var(--dim);margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-foot a{color:var(--dimmer)}
.site-foot a:hover{color:var(--text)}
.site-foot .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--panel2);font-size:12.5px;max-width:90ch}

/* ---------- collection ---------- */
.pmap{display:grid;grid-template-columns:repeat(100,1fr);gap:1px;background:#000;padding:6px;
  image-rendering:pixelated}
.pmap i{aspect-ratio:1;background:#16161d;display:block}
.pmap i.m{background:#fff;box-shadow:0 0 4px rgba(255,255,255,.7)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.tile{display:block;color:var(--text);text-decoration:none!important}
.tile .img{position:relative;aspect-ratio:1;background:#000;border:1px solid var(--line)}
.tile .img img{width:100%;height:100%;display:block}
.tile:hover .img{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.18)}
.tile .cap{display:flex;justify-content:space-between;gap:8px;padding:8px 2px 0;font:400 18px/1 var(--num)}
.tile .cap span{color:var(--dimmer)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- collection gallery (filters + grid + pop-up) ---------- */
.ghead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.gtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gsearch{display:flex;align-items:center;gap:8px;background:#000;border:1px solid var(--line2);padding:0 12px;height:48px;min-width:230px}
.gsearch:focus-within{border-color:var(--voice)}
.gsearch span{color:var(--voice);font-size:24px}
.gsearch input{background:none;border:0;outline:0;color:var(--text);font:400 22px/1 var(--num);width:100%;min-width:0}
.gsearch input::placeholder{color:var(--dimmer)}
#myBtn[aria-pressed=true]{color:var(--ink);border-image-source:var(--f-btn);box-shadow:0 var(--px) 0 var(--voice-deep)}
.glayout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.glayout.nofilters{grid-template-columns:minmax(0,1fr)}
.glayout.nofilters .gfilters{display:none}
.gfilters{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto}
.gfh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.glink{background:none;border:0;color:var(--voice);font:500 12.5px var(--mono);cursor:pointer;padding:4px}
.glink:hover{text-decoration:underline}
.fgrp{border-top:1px solid var(--line);padding:10px 0}
.fgrp summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font:400 12.5px/1.4 var(--display);color:var(--text);letter-spacing:.03em}
.fgrp summary::-webkit-details-marker{display:none}
.fgrp summary::after{content:"+";font:400 20px/1 var(--num);color:var(--voice)}
.fgrp[open] summary::after{content:"\2212"}
.fgrp .opts{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.fopt{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);cursor:pointer;padding:3px 2px}
.fopt:hover{color:var(--text)}
.fopt input{accent-color:#7CF5B0;margin:0}
.fopt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopt small{font:400 16px/1 var(--num);color:var(--dimmer)}
.gright{display:flex;flex-direction:column;gap:14px;min-width:0}
.gbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gbar .eyebrow b{color:var(--voice);font-weight:400}
.gpills{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.gpill{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--mono);color:var(--text);background:var(--panel2);
  border:1px solid var(--line2);padding:6px 9px;cursor:pointer}
.gpill:hover{border-color:var(--no);color:var(--no)}
.gsort{display:flex;align-items:center;gap:8px}
.gsort select{background:#000;color:var(--text);border:1px solid var(--line2);font:500 13px var(--mono);padding:8px 10px;letter-spacing:0;text-transform:none}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.gcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);cursor:pointer;text-align:left;
  padding:0;color:var(--text);font:inherit;transition:transform .12s,border-color .12s,box-shadow .12s}
.gcard:hover{transform:translateY(-3px);border-color:#fff;box-shadow:0 14px 30px -18px rgba(255,255,255,.35)}
.gcard canvas{display:block;width:100%;aspect-ratio:1;background:#000}
.gcard{position:relative}
.rchip{position:absolute;left:8px;top:8px;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--r);background:rgba(0,0,0,.55);border:1px solid color-mix(in srgb,var(--r) 55%,transparent);padding:4px 6px;pointer-events:none}
.rbadge{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;
  color:var(--r);border:1px solid color-mix(in srgb,var(--r) 55%,transparent);background:color-mix(in srgb,var(--r) 10%,transparent)}
.gkv .tr.rarity{grid-column:1 / -1;border-color:color-mix(in srgb,var(--r) 45%,transparent)}
.gkv .tr.rarity .v{color:var(--r);font-weight:600;letter-spacing:.04em}
.gcard canvas.cw{aspect-ratio:auto;height:22px;border-top:1px solid #15151c}
.gcard .cb{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px}
.gcard .gno{font:400 22px/1 var(--num);color:var(--text)}
.gcard .st{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.gcard .st.m{color:var(--voice)}
.gcard .st.y{color:var(--ink);background:var(--voice);padding:3px 5px}
.gempty{padding:56px 20px;text-align:center;border:1px dashed var(--line2);color:var(--dim)}
.gempty b{display:block;font:400 22px/1.3 var(--display);color:var(--text);margin-bottom:6px}
.gmo{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.gmd{position:relative;width:min(900px,100%);max-height:92vh;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;overflow:auto}
/* left side: rarity background over the full height, the punk, then its
   voice lines as a row of their own underneath */
.gpic{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:#000;padding:18px 0 22px}
.gpic img{width:100%;aspect-ratio:1;height:auto;display:block}
.gpic canvas.wave{display:block;width:78%;height:64px;flex:none}
.ginfo{padding:20px;display:flex;flex-direction:column;gap:12px;background:#08080c;min-height:0}
.gkv{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gkv .tr{background:var(--panel);border:1px solid var(--line);padding:6px 9px;min-width:0}
.gkv .tr .k{font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer)}
.gkv .tr .v{font-size:13.5px;margin-top:2px;overflow-wrap:anywhere;line-height:1.35}
.gkv .tr .v small{color:var(--dimmer);font:400 15px/1 var(--num);margin-left:5px}
.gkv .tr.voice .v{color:var(--voice)}
.gown{background:#000;border:1px solid var(--line2);padding:10px 12px;font:13px/1.5 var(--mono);color:var(--dim);overflow-wrap:anywhere}
.lockmsg{margin:0;padding:10px 12px;border:1px solid #6b4a27;background:#191309;color:var(--rare);font-size:14px;line-height:1.5}
.lockmsg b{color:var(--text);font-weight:600}
.gx{position:absolute;top:10px;right:10px;width:38px;height:38px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--text);font-size:22px;line-height:1;cursor:pointer;z-index:2}
.gx:hover{border-color:#fff}
@media (max-width:860px){
  .glayout{grid-template-columns:minmax(0,1fr)}
  .gfilters{position:static;max-height:none}
  .glayout:not(.showfilters) .gfilters{display:none}
  .gmd{grid-template-columns:1fr}
  .gpic{padding:10px 0 16px}
  .gpic img{width:auto;height:38vh;max-width:100%}
  .gpic canvas.wave{height:48px}
  .gsearch{min-width:0;flex:1}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ---------- mint: the mystery card and the step list ---------- */
.vcard canvas.art#shuffle{image-rendering:pixelated}
.mystery{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(120px,22vw,220px)/1 var(--display);
  color:#fff;text-shadow:0 0 18px rgba(255,255,255,.7),0 0 48px rgba(255,255,255,.35);pointer-events:none;
  animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.msteps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:m}
.msteps li{counter-increment:m;display:flex;gap:12px;align-items:center;font-size:15px;color:var(--dimmer)}
.msteps li::before{content:counter(m);display:grid;place-items:center;width:28px;height:28px;flex:none;
  font:400 20px/1 var(--num);border:1px solid var(--line2);color:var(--dim)}
.msteps li.on{color:var(--text)}
.msteps li.on::before{border-color:var(--voice);color:var(--voice);box-shadow:0 0 10px rgba(124,245,176,.4)}
.msteps li.done{color:var(--dim)}
.msteps li.done::before{content:"\2713";background:var(--voice);border-color:var(--voice);color:var(--ink)}