:root{
  --ground:#06070B; --surface:#0D0F15; --raise:#131722;
  --line:#1C2029; --line-soft:#12151D;
  --ink:#E9EBF0; --dim:#8C93A2; --faint:#565D6B;
  --accent:#7DD3FC; --accent-deep:#38BDF8; --warm:#FB923C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:Newsreader,Georgia,serif; font-size:17.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px}
.wrap.narrow{max-width:790px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
.dim{color:var(--dim)} .n{text-align:right; font-variant-numeric:tabular-nums}
.break{overflow-wrap:anywhere}
h1,h2{font-family:Archivo,system-ui,sans-serif; letter-spacing:-.028em;
  text-wrap:balance; margin:0}
a{color:var(--accent)}
code{font-family:"IBM Plex Mono",monospace; font-size:.9em; color:var(--ink)}

#dust{position:fixed; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none; display:block}
main,.foot{position:relative; z-index:1}

.topbar{border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(6,7,11,.86); backdrop-filter:blur(8px); z-index:20}
.bar{display:flex; align-items:center; justify-content:space-between;
  height:62px; gap:24px}
.brand{font-family:"IBM Plex Mono",monospace; font-size:13px;
  letter-spacing:.28em; color:var(--ink); text-decoration:none;
  white-space:nowrap}
.topbar nav{display:flex; gap:22px; font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.topbar nav a{color:var(--dim); text-decoration:none}
.topbar nav a:hover,.topbar nav a.here{color:var(--ink)}

/* Hero ------------------------------------------------------------------ */
.hero{position:relative; padding:96px 0 60px; overflow:hidden}
#field{position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:.55; pointer-events:none}
.heroin{position:relative; z-index:1}
.eyebrow{margin:0 0 22px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.hero h1{font-size:clamp(38px,6.6vw,74px); font-weight:800; line-height:1.03}
.lede{margin:26px 0 0; max-width:58ch; color:var(--dim); font-size:19px}
.lede b{color:var(--ink); font-weight:500}
.herocta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.proof{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.proof span{font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px}
.proof span::before{content:"¹3"; color:var(--accent); margin-right:7px}

/* The headline word flickers between measured states, then settles. */
.glitch{position:relative; display:inline-block}
.js .glitch::after{content:attr(data-t); position:absolute; inset:0;
  color:var(--accent); clip-path:inset(0 0 100% 0); opacity:0}
.js .glitch.live::after{animation:flick 2.4s steps(1) infinite}
@keyframes flick{
  0%,86%{clip-path:inset(0 0 100% 0); opacity:0}
  88%{clip-path:inset(12% 0 62% 0); opacity:.85; transform:translateX(-2px)}
  91%{clip-path:inset(58% 0 22% 0); opacity:.75; transform:translateX(3px)}
  94%{clip-path:inset(30% 0 46% 0); opacity:.6; transform:translateX(-1px)}
  96%,100%{clip-path:inset(0 0 100% 0); opacity:0; transform:none}
}
.stats{display:grid; gap:22px; margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.stat{border-top:1px solid var(--line); padding-top:16px}
.stat .v{font-family:Archivo,sans-serif; font-weight:700; font-size:40px;
  line-height:1; letter-spacing:-.03em}
.stat .v sup{font-size:.52em; vertical-align:super}
.stat .l{font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-top:10px}
.stat .n{text-align:left; color:var(--faint); font-size:14.5px; margin-top:6px}

.btn{font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; padding:14px 22px; border-radius:2px;
  border:1px solid var(--accent); background:var(--accent); color:#04121B;
  cursor:pointer; text-decoration:none; display:inline-block;
  transition:transform .16s ease, box-shadow .16s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 22px rgba(125,211,252,.18)}
.btn:disabled{background:transparent; color:var(--faint);
  border-color:var(--line); cursor:not-allowed; transform:none; box-shadow:none}
.btn.ghost{background:transparent; color:var(--accent)}

/* Measurement lab -------------------------------------------------------- */
.measure{border-top:1px solid var(--line); background:var(--surface);
  padding:70px 0}
.lab{display:grid; gap:28px; grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
  align-items:start; margin-top:10px}
.labart{background:#000; border:1px solid var(--line); aspect-ratio:1/1;
  display:grid; place-items:center; overflow:hidden; position:relative}
.artinner{width:100%; display:grid; place-items:center}
.labart svg{width:100%; height:auto; display:block}

/* The image comes up through the same cells the register settles into, so
   the reveal reads as the measurement resolving rather than as a transition
   effect borrowed from somewhere else. Delays are per-cell CSS variables, so
   the whole curtain runs on the compositor with no timers. */
.tiles{position:absolute; inset:0; z-index:3; display:grid; gap:1px;
  pointer-events:none; padding:1px;
  grid-template-columns:repeat(22,1fr); grid-template-rows:repeat(22,1fr)}
.tiles i{background:#11151E; opacity:1}
.tiles i.on{background:var(--accent-deep)}
.tiles i.warm{background:#1D2430}
.tiles.armed i{transition:background .12s linear var(--d),
  opacity .34s ease calc(var(--d) + .10s)}
.tiles.clearing i{background:var(--accent); opacity:0}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.placeholder{color:var(--faint); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase}
/* Sits above the closed curtain. Anything below it only shows through the
   1px cell gaps, which reads as dirt rather than as a label. */
.hint{position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  color:var(--faint); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; pointer-events:none;
  transition:opacity .3s ease}
.hint.gone{opacity:0}
.bits{display:grid; grid-template-columns:repeat(52,1fr); gap:2px;
  margin-bottom:20px}
.bits i{display:block; height:9px; background:var(--line);
  transition:background .08s linear}
.bits i.on{background:var(--accent)}
.bits i.settled{background:var(--accent-deep)}
.bits i.settled.off{background:var(--line-soft)}
.readout{margin:0 0 20px; display:grid; grid-template-columns:auto 1fr;
  gap:3px 14px; font-size:12.5px; min-height:150px; align-content:start}
.readout dt{color:var(--faint)}
.readout dd{margin:0; overflow-wrap:anywhere}
.readout .hot{color:var(--warm)}

/* Sections --------------------------------------------------------------- */
section.steps,section.work,section.rarity,section.prov,section.page{padding:72px 0}
section.work{border-top:1px solid var(--line-soft); position:relative;
  overflow:hidden}
/* The pair came out of one entangled measurement, so the section is lit from
   between them rather than from anywhere in particular. */
section.work .glow{position:absolute; left:50%; top:46%; width:min(1100px,120vw);
  aspect-ratio:1/1; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle,
    rgba(125,211,252,.13) 0%,
    rgba(99,102,241,.07) 34%,
    rgba(6,7,11,0) 68%)}
section.work .wrap{position:relative; z-index:1}
.js section.work .glow{animation:breathe 7.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75; transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}}
h2{font-size:clamp(25px,3.3vw,36px); font-weight:700}
.sub{color:var(--dim); max-width:66ch; margin:14px 0 26px}
.sub b{color:var(--ink); font-weight:500}

ol.how{counter-reset:s; list-style:none; padding:0; margin:22px 0 26px;
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
ol.how li{counter-increment:s; position:relative; padding-top:34px;
  border-top:1px solid var(--line); color:var(--dim); font-size:16px}
ol.how li::before{content:counter(s,decimal-leading-zero); position:absolute;
  top:12px; left:0; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.2em; color:var(--accent)}
ol.how li b{color:var(--ink); font-weight:500}

.twin{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.tw{background:#000; border:1px solid var(--line); position:relative;
  overflow:hidden}
.twart{position:relative}
.tw .tiles{grid-template-columns:repeat(18,1fr);
  grid-template-rows:repeat(18,1fr)}
/* The pair's curtain carries the divergence: cells over bits where the twins
   disagree run late and flash warm, so the break in an otherwise perfectly
   synchronised dissolve is the decoherence itself. */
.tw .tiles i.split{background:var(--warm)}
.tw .tiles.clearing i.split{background:var(--warm)}
.tw svg{width:100%; height:auto; display:block}
.cap{padding:11px 14px 4px; font-size:11.5px; color:var(--faint)}
.strip{display:flex; gap:1px; padding:6px 14px 14px; height:26px}
.strip i{flex:1; background:var(--dim); opacity:.5; border-radius:.5px}
.strip i.z{background:var(--line); opacity:.7}
.strip i.d{background:var(--warm); opacity:1}
.js .strip i.d{animation:diverge 2.6s ease-in-out infinite}
@keyframes diverge{0%,100%{opacity:.45} 50%{opacity:1}}
.js .strip i{transform-origin:bottom; transform:scaleY(.08)}
.js .strip.filled i{transition:transform .5s cubic-bezier(.2,.7,.3,1);
  transform:scaleY(1)}

.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:2px;
  background:var(--surface); margin:20px 0}
table{border-collapse:collapse; width:100%; min-width:540px;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:8px 16px; border-bottom:1px solid var(--line-soft);
  font-weight:400}
thead th{color:var(--faint); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; border-bottom:1px solid var(--line)}
tbody th{color:var(--dim); white-space:nowrap}
tbody tr.group th,tbody tr.group td{border-top:1px solid var(--line)}
.bar{width:130px} .bar i{display:block; height:5px; background:var(--accent);
  opacity:.5; border-radius:1px; min-width:1px}
.ladder tbody tr:last-child th{color:var(--warm)}
.more summary{cursor:pointer; font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); padding:8px 0}

.mintbar{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.mintgrid{display:grid; gap:34px; padding:38px 28px;
  grid-template-columns:minmax(260px,1.25fr) minmax(190px,.8fr) minmax(240px,1fr);
  align-items:start}
.k{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint)}
.big{font-size:38px; line-height:1.1; margin-top:8px; letter-spacing:-.02em}
.fine{font-size:14.5px; color:var(--dim); margin:12px 0 0}
.fine b{color:var(--ink)}
.terms{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
  font-family:"IBM Plex Mono",monospace; font-size:13px}
.terms dt{color:var(--faint)} .terms dd{margin:0}
.cta{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.qty{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); display:flex; gap:10px;
  align-items:center}
.qty select{font-family:"IBM Plex Mono",monospace; font-size:14px;
  background:var(--raise); color:var(--ink); border:1px solid var(--line);
  border-radius:2px; padding:7px 10px; letter-spacing:0}
#mint-status:empty{display:none}
#mint-status[data-tone="ok"]{color:var(--accent)}
#mint-status[data-tone="warn"]{color:var(--warm)}

/* Minted tokens land here, newest first, each showing the register it was
   bound to as soon as the reveal service writes it. */
.btn.small{padding:9px 14px; font-size:11px}
.owned{grid-column:1/-1; margin:4px 0 0}
.owned:empty{display:none}
.results{grid-column:1/-1; display:grid; gap:16px; margin-top:8px;
  grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.results:empty{display:none}
.result{margin:0; background:#000; border:1px solid var(--line); overflow:hidden}
.result-art{aspect-ratio:1/1; display:grid; place-items:center; background:#05070B}
.result-art img{width:100%; height:auto; display:block}
.result-wait{font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); text-align:center; padding:0 14px; line-height:1.6}
.result.pending .result-art{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55} 50%{opacity:1}}
.result-meta{padding:11px 13px; border-top:1px solid var(--line)}
.result-meta a{font-size:12px; text-decoration:none}
.result-traits{margin:8px 0 0; display:grid; grid-template-columns:auto 1fr;
  gap:2px 10px; font-family:"IBM Plex Mono",monospace; font-size:10.5px}
.result-traits dt{color:var(--faint)}
.result-traits dd{margin:0; color:var(--dim); overflow-wrap:anywhere}
.result-art img,.plate,.tw{cursor:zoom-in}
/* Only once something has been measured; an empty plate is not worth a zoom. */
.labart:has(svg){cursor:zoom-in}

/* Any token image can be opened full size. The artwork is 1000x1000 and the
   detail that makes it worth owning is invisible in a 184px card. */
.lightbox{position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(4,5,8,.94); padding:4vmin; cursor:zoom-out;
  opacity:0; pointer-events:none; transition:opacity .18s ease}
.lightbox.open{opacity:1; pointer-events:auto}
.lightbox figure{margin:0; max-width:min(92vw,88vh); width:100%}
.lightbox img,.lightbox svg{width:100%; height:auto; display:block;
  border:1px solid var(--line)}
.lightbox figcaption{margin-top:12px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--dim)}
.lightbox .close{position:absolute; top:18px; right:22px; color:var(--dim);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; background:none; border:0; cursor:pointer}
.lightbox .close:hover{color:var(--ink)}

.hashline{font-size:13px; color:var(--accent); background:var(--raise);
  border:1px solid var(--line); border-radius:2px; padding:14px 16px;
  margin:18px 0; overflow-wrap:anywhere}
.status{border-left:2px solid var(--warm); padding:12px 0 12px 16px;
  color:var(--dim); font-size:16px}
.status b{color:var(--ink); font-weight:500}
section.page h2{margin-top:52px}
section.page p{color:var(--dim)}
section.page p b,section.page em{color:var(--ink)}

.foot{border-top:1px solid var(--line); padding:34px 0 60px; margin-top:30px}
.foot p{color:var(--faint); font-size:14px; margin:0; max-width:70ch}

.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}

@media (max-width:860px){
  .mintgrid,.lab{grid-template-columns:1fr}
  .hero{padding:60px 0 34px}
  .bits{grid-template-columns:repeat(26,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
  .js .reveal{opacity:1; transform:none}
}