:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* INK FLUID — IMMERSIVE EDITION */
:root{--accent:#a35aff;--accent-soft:#e0c7ff;--line:#39245b}
body{background:radial-gradient(ellipse 75% 28% at 84% 2%,rgba(109,37,202,.19),transparent 75%),radial-gradient(ellipse 60% 24% at 3% 38%,rgba(95,28,176,.10),transparent 75%),#07050c}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.24' filter='url(%23n)'/%3E%3C/svg%3E")}
#reading-progress{position:fixed;top:0;left:0;width:0;height:3px;z-index:100;background:linear-gradient(90deg,#7426f4,#dfbaff,#fff);box-shadow:0 0 18px #a35aff;pointer-events:none}
.top{background:rgba(9,5,18,.72);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
.top .wrap{min-height:76px}.mark{letter-spacing:.09em}.mark i{animation:mark-pulse 3s ease-in-out infinite}
@keyframes mark-pulse{50%{box-shadow:0 0 7px 5px #a35aff80,0 0 32px 9px #a35aff55;transform:scale(1.16)}}
.hero{position:relative;min-height:min(760px,88svh);padding-top:clamp(60px,8vw,115px);isolation:isolate}
.hero::before{content:"";position:absolute;width:clamp(350px,65vw,900px);height:clamp(350px,65vw,900px);right:-23%;top:-20%;background:radial-gradient(circle,rgba(132,56,255,.21),rgba(101,25,211,.08) 36%,transparent 69%);filter:blur(28px);z-index:-1;animation:ambient 12s ease-in-out infinite alternate;pointer-events:none}
@keyframes ambient{to{transform:translate(-10%,8%) scale(1.18);opacity:.7}}
.hero h1{font-size:clamp(58px,8.8vw,124px);line-height:.88;letter-spacing:-.075em;max-width:760px;text-shadow:0 14px 65px #0007}
.hero h1 em{background:linear-gradient(110deg,#8b37ff 5%,#c99dff 52%,#f4e6ff 80%,#8b37ff 110%);background-size:220% 100%;color:transparent;-webkit-background-clip:text;background-clip:text;animation:liquid-text 7s ease-in-out infinite}
@keyframes liquid-text{50%{background-position:100% 0}}
.hero .lede{font-size:clamp(17px,1.65vw,21px);line-height:1.65;max-width:480px}
.hero-art{perspective:1100px;transform-style:preserve-3d;filter:drop-shadow(0 30px 70px #5c1ab44d);transition:transform .3s ease-out;will-change:transform}
.hero-art figure{border-radius:18px;box-shadow:0 15px 40px #0008;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;overflow:hidden}
.hero-art figure:first-child{transform:rotate(-4deg) translateY(8px);z-index:2}.hero-art figure:nth-child(2){transform:rotate(6deg) translate(3px,-8px)}.hero-art figure:nth-child(3){transform:rotate(3deg) translate(5px,8px)}
.hero-art figure:hover{transform:translateY(-15px) rotate(0deg) scale(1.035);box-shadow:0 30px 70px #8d39ff55;z-index:4}
.hero-art img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.hero-art figure:hover img{transform:scale(1.08)}
.btn{transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-3px)}.btn.solid{background:linear-gradient(115deg,#8c38ff,#c28aff);box-shadow:0 8px 35px #8734ff45;border:1px solid #bf88ff}.btn.solid:hover{box-shadow:0 12px 50px #a75aff80}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff45 50%,transparent 75%);transform:translateX(-150%);transition:transform .65s}.btn:hover::after{transform:translateX(150%)}
.stats{border-radius:18px;background:linear-gradient(130deg,#1a1029a8,#0b0713b8);border:1px solid #49316a;overflow:hidden;box-shadow:0 25px 80px #0005}.stat b{background:linear-gradient(135deg,#fff,#b890ff);color:transparent;-webkit-background-clip:text;background-clip:text}
.ticker{transform:rotate(-1deg) scale(1.025);box-shadow:0 15px 50px #0005}.track img{border-radius:12px;transition:transform .3s,filter .3s}.track img:hover{transform:scale(1.1);filter:saturate(1.3)}.ticker:hover .track{animation-play-state:paused}
section{scroll-margin-top:95px}.sec-head h2,.about h2{letter-spacing:-.055em}
.pillar{transition:background .3s,padding .3s,border-color .3s;border-radius:12px}.pillar:hover{background:#9c5cff0d;padding-left:14px;border-color:#9b5cff}
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s!important;border-radius:14px!important;overflow:hidden}.card:hover{transform:translateY(-9px)!important;box-shadow:0 22px 55px #000b,0 0 30px #8c3cff25;border-color:#9958ff!important}.card img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s}.card:hover img{transform:scale(1.085);filter:saturate(1.2)}
.chip{transition:transform .2s,background .2s,border-color .2s}.chip:hover{transform:translateY(-2px)}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.in-view{opacity:1;transform:translateY(0)}
#cursor-halo{position:fixed;left:0;top:0;width:370px;height:370px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,#8f3dff16,transparent 68%);mix-blend-mode:screen}
@media(max-width:800px){.hero{min-height:auto}.hero h1{font-size:clamp(54px,12vw,90px)}.hero-art{transform:none!important}.hero-art figure:first-child{transform:rotate(-2deg)}.hero-art figure:nth-child(2){transform:rotate(3deg)}.hero-art figure:nth-child(3){transform:rotate(2deg)}#cursor-halo{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* PREMIUM POLISH — Ink Fluid */
:root{color-scheme:dark;--accent:#b27aff;--accent-soft:#e6d3ff;--ink-bg:#08060d;--ink-panel:#100b19;--ink-line:rgba(196,151,255,.18)}
html{background:var(--ink-bg);scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:"Hanken Grotesk",Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#f7f2ff;background:radial-gradient(ellipse 55% 30% at 82% 0%,rgba(123,55,210,.18),transparent 75%),radial-gradient(ellipse 40% 25% at 0% 44%,rgba(89,35,150,.11),transparent 75%),#08060d;letter-spacing:.005em}
::selection{background:#a86aff;color:#fff}
a{color:inherit;text-decoration:none}
.top{border-bottom:1px solid rgba(206,171,255,.12);background:rgba(8,6,13,.82)!important}
.top .wrap{max-width:1320px;padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
.mark{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.045em}
.hero{max-width:1500px;margin-inline:auto;padding-inline:clamp(22px,6vw,96px);min-height:650px;align-items:center}
.hero h1{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.085em;line-height:.86}
.hero .lede{color:#c3b8d1}
.hero-art figure{border:1px solid rgba(215,187,255,.2);background:#100b19;box-shadow:0 24px 90px rgba(0,0,0,.48)}
.btn{border-radius:999px!important;font-weight:600;letter-spacing:.01em;padding:14px 22px!important}
.btn.solid{background:linear-gradient(115deg,#8e42f4,#c29aff)!important;border-color:#c6a2ff!important;color:#10071b!important}
.btn:not(.solid){border:1px solid rgba(205,170,255,.32);background:rgba(255,255,255,.025)}
.stats{max-width:1120px;margin:12px auto 80px;border:1px solid var(--ink-line);border-radius:20px;background:linear-gradient(125deg,rgba(31,19,47,.88),rgba(13,9,20,.82));backdrop-filter:blur(16px)}
.stat{padding:25px 18px}
section{max-width:1320px;margin-inline:auto;padding-inline:clamp(22px,5vw,72px)}
.sec-head h2,.about h2{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.065em;line-height:.98}
.about,.faq,.collect{position:relative}
.pillar{border:1px solid transparent;border-radius:16px;padding:18px!important}
.card{border:1px solid rgba(206,171,255,.13)!important;background:linear-gradient(155deg,rgba(28,18,40,.94),rgba(13,9,19,.96))!important;border-radius:16px!important}
.card:hover{border-color:rgba(180,125,255,.52)!important;box-shadow:0 24px 70px rgba(74,30,125,.24)!important}
input,select,button{font:inherit}
input,select{background:#100b19!important;color:#f7f2ff!important;border:1px solid rgba(206,171,255,.24)!important;border-radius:10px!important}
footer{border-top:1px solid rgba(206,171,255,.14);color:#a99bb9}
.ticker{border-block:1px solid rgba(206,171,255,.12);background:rgba(15,9,23,.85)}
@media(min-width:1100px){.hero{padding-top:80px;padding-bottom:70px}.hero h1{font-size:clamp(76px,8.3vw,126px)}}
@media(max-width:760px){.hero{min-height:auto;padding-top:62px;padding-bottom:45px;gap:34px}.hero h1{font-size:clamp(56px,15vw,88px)}.hero .lede{font-size:16px}.stats{margin:8px 18px 54px}.stat{padding:17px 8px}.sec-head h2,.about h2{font-size:clamp(38px,10vw,58px)}section{padding-inline:20px}.top .wrap{min-height:64px}.hero-art figure{border-radius:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
:root{--cinema-violet:#a45aff}html{scroll-behavior:smooth}body{background:#07040e!important}#ink-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}body>header,body>.wrap,body>footer,body>main{position:relative;z-index:1}.hero{position:relative;min-height:min(860px,95svh);overflow:visible}.hero::after{content:"";position:absolute;inset:10% -6% 0 35%;border:1px solid rgba(184,123,255,.10);border-radius:50%;transform:rotate(-22deg);pointer-events:none;filter:drop-shadow(0 0 20px #8b38ff55);animation:orbitBreath 8s ease-in-out infinite alternate}.hero h1{font-size:clamp(68px,9vw,145px)!important;letter-spacing:-.085em;line-height:.86!important;position:relative}.hero h1 em{filter:drop-shadow(0 0 35px #9d42ff80)}.hero-art{position:relative;animation:floatArt 7s ease-in-out infinite}.hero-art figure{border:1px solid #bc81ff66!important;box-shadow:0 30px 90px #6000b955!important}.hero-art figure:first-child{box-shadow:0 40px 110px #7c26f677!important}.hero .eyebrow{letter-spacing:.28em;text-transform:uppercase}.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s,box-shadow .3s,border-color .3s!important}.btn:hover{box-shadow:0 0 38px #8f39ff60;transform:translateY(-4px)}.btn:after{content:"";position:absolute;inset:-100%;background:linear-gradient(105deg,transparent 40%,#ffffff40 50%,transparent 60%);transform:translateX(-100%);transition:transform .7s;pointer-events:none}.btn:hover:after{transform:translateX(100%)}.card{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s!important}.card:hover{box-shadow:0 25px 65px #812aff50!important;border-color:#ae6cff!important}.sec-head h2,.closing h2{letter-spacing:-.055em}.stats,.about,.rar,.closing{position:relative}.stats:before,.closing:before{content:"";position:absolute;inset:-25px;background:radial-gradient(ellipse at 50% 50%,#7323d91b,transparent 70%);pointer-events:none;z-index:-1}.ticker{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}#cinema-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#05020b;transition:opacity .9s,visibility .9s;pointer-events:none}#cinema-intro.done{opacity:0;visibility:hidden}#cinema-intro .intro-logo{font-size:clamp(55px,11vw,160px);font-weight:900;letter-spacing:-.09em;color:white;text-align:center;line-height:.9;animation:introRise 1.2s both}#cinema-intro .intro-logo span{color:#a45aff;text-shadow:0 0 70px #a45aff}#cinema-intro .intro-caption{font:12px monospace;letter-spacing:.5em;text-align:center;color:#ae8acb;margin-top:26px;animation:introRise 1.4s .2s both}#cinema-intro .intro-line{height:2px;width:min(260px,65vw);margin:32px auto 0;background:linear-gradient(90deg,transparent,#ab5bff,transparent);transform-origin:left;animation:lineGrow 1.8s both}@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes introRise{from{opacity:0;transform:translateY(45px);filter:blur(14px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes floatArt{0%,100%{translate:0 0}50%{translate:0 -16px}}@keyframes orbitBreath{to{transform:rotate(-13deg) scale(1.06);opacity:.45}}@media(max-width:800px){.hero{min-height:auto}.hero h1{font-size:clamp(56px,12vw,88px)!important}.hero-art{animation:none}.hero::after{display:none}#ink-canvas{opacity:.5}}@media(prefers-reduced-motion:reduce){#cinema-intro{display:none}.hero-art{animation:none!important}html{scroll-behavior:auto}}
.hero-art{isolation:isolate;filter:drop-shadow(0 25px 75px #7524dc77)}
.hero-art figure{position:relative;isolation:isolate;overflow:hidden!important;background:#10081e!important;cursor:pointer}
.hero-art figure::before{content:"";position:absolute;inset:-60%;z-index:3;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 22%,#c185ff25 27%,transparent 34% 68%,#9c49ff25 74%,transparent 80%);mix-blend-mode:screen;animation:inkSwirl 13s linear infinite}
.hero-art figure::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#e2b7ff55,transparent 43%);mix-blend-mode:screen;opacity:.6;transition:opacity .4s}
.hero-art figure:hover::after{opacity:1}
.hero-art figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.15s ease,transform 7s ease,filter 1.15s ease;will-change:opacity}
.hero-art figure img.ink-next{opacity:0;transform:scale(1.18) rotate(5deg);filter:blur(15px) saturate(1.8)}
.hero-art figure img.ink-next.ink-show{opacity:1;transform:scale(1.025) rotate(0);filter:blur(0) saturate(1.1)}
.hero-art figure img.ink-old{opacity:0;transform:scale(1.16) rotate(-4deg);filter:blur(12px)}
.hero-art figcaption{z-index:5;bottom:12px;left:12px;backdrop-filter:blur(12px);border:1px solid #d5a8ff33}
.hero-art figure .ink-index{position:absolute;right:12px;top:12px;z-index:5;color:#e3c7ff;font:10px monospace;letter-spacing:.14em;background:#08031099;border:1px solid #c89cff55;border-radius:30px;padding:7px 9px}
.hero-art .ink-ring{position:absolute;inset:-10%;border:1px solid #b469ff40;border-radius:50%;pointer-events:none;z-index:-1;animation:ringPulse 6s ease-in-out infinite alternate}
#ink-canvas{opacity:1!important}
@keyframes inkSwirl{to{transform:rotate(360deg)}}@keyframes ringPulse{to{transform:scale(1.09) rotate(12deg);opacity:.3}}
@media(prefers-reduced-motion:reduce){.hero-art figure::before,.hero-art .ink-ring{animation:none!important}.hero-art figure img{transition:none!important}}
:root{--bg:#030207;--surface:#0b0712;--surface-2:#10091c;--line:#26123f;--accent:#8200ff;--accent-soft:#a449ff;--accent-deep:#39006e;--muted:#a69ab7;--on-accent:#fff;color-scheme:dark}
body{background:#030207!important;background-image:radial-gradient(ellipse 65% 28% at 75% 10%,rgba(91,0,180,.09),transparent 75%)!important}
#ink-canvas{opacity:.47!important}.hero::before{background:radial-gradient(circle,rgba(104,0,225,.19),rgba(51,0,108,.07) 42%,transparent 72%)!important}
.hero::after{border-color:#7200ff24!important}.hero h1 em{background:linear-gradient(105deg,#7100f0,#a331ff,#e1baff,#8300f7)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important}
.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(18px,3vw,52px);min-height:750px!important}
.hero-art{height:clamp(450px,43vw,640px);display:block!important;position:relative;perspective:1250px;transform-style:preserve-3d;isolation:isolate;animation:none!important;filter:drop-shadow(0 35px 65px #34006b55)!important}
.hero-art::before{content:"";position:absolute;inset:12% 5%;border-radius:50%;background:radial-gradient(ellipse,#6200ce33 0%,#3d007422 34%,transparent 70%);filter:blur(27px);animation:stagePulse 7s ease-in-out infinite;pointer-events:none}
.hero-art::after{content:"";position:absolute;left:8%;right:8%;bottom:8%;height:25%;background:radial-gradient(ellipse,#7900ff2b,transparent 70%);filter:blur(24px);pointer-events:none}
.hero-art figure,.hero-art figure:first-child,.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){position:absolute!important;display:block!important;aspect-ratio:3/4!important;min-height:0!important;width:clamp(155px,48%,285px);height:auto;top:50%;left:50%;margin:0!important;border-radius:19px!important;border:1px solid #8c37ff75!important;background:#0b0616!important;box-shadow:0 35px 90px #000c,0 0 38px #6600cc33!important;transform:translate(-50%,-50%) translate3d(var(--tx),var(--ty),var(--tz)) rotateY(var(--ry)) rotateZ(var(--rz))!important;animation:cardHover var(--duration) ease-in-out infinite alternate!important;transition:box-shadow .5s,filter .5s!important;backface-visibility:hidden}
.hero-art figure:first-child{--tx:0px;--ty:-13px;--tz:95px;--ry:-4deg;--rz:-2deg;--duration:5.4s;z-index:5;width:clamp(180px,55%,325px)}
.hero-art figure:nth-child(2){--tx:-155px;--ty:43px;--tz:-35px;--ry:24deg;--rz:-13deg;--duration:6.8s;z-index:3;filter:brightness(.74)}
.hero-art figure:nth-child(3){--tx:159px;--ty:28px;--tz:-50px;--ry:-24deg;--rz:12deg;--duration:6.2s;z-index:4;filter:brightness(.83)}
.hero-art figure:hover{z-index:9!important;filter:brightness(1.13)!important;box-shadow:0 35px 100px #000,0 0 65px #8000ff80!important}
.hero-art figure img{width:100%;height:100%;object-fit:cover}.hero-art .ink-ring{inset:7%!important;border-color:#8200ff35!important;transform:rotate(-18deg);box-shadow:0 0 55px #6100e51b}
.hero-art .ink-ring:before,.hero-art .ink-ring:after{content:"";position:absolute;inset:12%;border:1px solid #a32aff30;border-radius:50%;transform:rotate(60deg) scaleX(.7)}
.hero-art .ink-ring:after{inset:-12%;transform:rotate(-35deg) scaleX(.85);border-color:#5b00bc35}
.hero-art figure::before{background:conic-gradient(from 0deg,transparent 0 24%,#8300ff24 28%,transparent 36% 70%,#ab45ff25 75%,transparent 81%)!important}
.hero-art figure::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#a447ff55,transparent 44%)!important}
.btn.solid{background:#7700ed!important;border-color:#8d20ff!important;color:white!important;box-shadow:0 8px 38px #7000ff3b}.btn.solid:hover{background:#920dff!important}
.card,.stat,.pillar,.about,.rar,.closing{border-color:#26123f!important}.card{background:#0b0712!important}
@keyframes cardHover{from{translate:0 -11px}to{translate:0 13px}}
@keyframes stagePulse{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}
@media(max-width:1100px){.hero-art figure:nth-child(2){--tx:-105px}.hero-art figure:nth-child(3){--tx:105px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:0!important}.hero-art{order:-1;height:clamp(360px,95vw,530px);width:100%;max-width:560px;margin-inline:auto}.hero-art figure:first-child{width:48%}.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){width:42%}.hero-art figure:nth-child(2){--tx:-28vw;--ty:35px}.hero-art figure:nth-child(3){--tx:28vw;--ty:30px}}
@media(max-width:420px){.hero-art{height:350px}.hero-art figure:first-child{width:52%}.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){width:43%}}
@media(prefers-reduced-motion:reduce){.hero-art figure{animation:none!important}.hero-art::before{animation:none!important}}
/* Layout: sticky nav, asymmetric hero collage, art ticker, about + pillars, filterable gallery, rarity, roadmap, FAQ, closing call, footer.
   Look: violet on black, single dark theme by choice. Type scale is fixed: 12 / 14 / 16 / 18 / 28 / 44 / 76. */
:root {
  --bg: #07050c;
  --surface: #0e0a18;
  --surface-2: #161026;
  --line: #271d3f;
  --fg: #f0ebfa;
  --muted: #a398c0;
  --accent: #9b5cff;
  --accent-soft: #c6a8ff;
  --accent-deep: #3a1a86;
  --on-accent: #12072b;

  --font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-md: 18px;
  --t-lg: clamp(24px, 3.4vw, 28px);
  --t-xl: clamp(32px, 5.2vw, 44px);
  --t-2xl: clamp(48px, 9vw, 76px);

  --gutter: 20px;
  --section: clamp(64px, 9vw, 112px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  padding-inline: var(--gutter);
  padding-block: 0 40px;
  overflow-x: hidden;
}
a { color: inherit; }
img, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.wrap { max-width: 1200px; margin-inline: auto; }
section { padding-block: var(--section) 0; }

/* shared type roles */
.eyebrow { font: 500 var(--t-xs)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 18px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-2xl); line-height: .94; letter-spacing: -.035em; }
h2 { font-size: var(--t-xl); line-height: 1.04; letter-spacing: -.025em; }
h3 { font-size: var(--t-lg); line-height: 1.1; letter-spacing: -.02em; }
.lede { font-size: var(--t-md); color: var(--muted); max-width: 54ch; margin: 0; }
.body { color: var(--muted); max-width: 62ch; margin: 0; }
.label { font: 500 var(--t-xs)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sec-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 var(--t-sm)/1 var(--font-body);
  padding: 13px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-soft); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.solid:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--on-accent); }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: rgba(7,5,12,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.mark { font: 800 var(--t-md)/1 var(--font-display); letter-spacing: .04em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.mark i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); display: inline-block; }
.top nav { display: flex; gap: 28px; }
.top nav a { font-size: var(--t-sm); color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--fg); }
.top .acts { display: flex; gap: 8px; }

/* hero */
.hero { padding-block: clamp(40px, 6vw, 80px) 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-top: 24px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.hero-art { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.hero-art figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); aspect-ratio: 1; }
.hero-art figure:first-child { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.hero-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-art figcaption { position: absolute; left: 10px; bottom: 10px; font: 500 var(--t-xs)/1 var(--font-mono); background: rgba(7,5,12,.78); padding: 6px 8px; border-radius: 3px; }
.hero-glow { position: absolute; inset: auto; pointer-events: none; }

/* stats */
.stats { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.stat { padding: 24px 20px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font: 800 var(--t-xl)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 10px; }

/* ticker */
.ticker { margin-top: var(--section); margin-inline: calc(50% - 50vw); overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
.track { display: flex; gap: 12px; width: max-content; padding: 12px; animation: slide 70s linear infinite; }
.track img { width: 168px; height: 168px; border-radius: 3px; flex: none; display: block; object-fit: cover; background: var(--surface); }
@keyframes slide { to { transform: translateX(-50%); } }

/* about */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); }
.pillars { display: grid; gap: 0; }
.pillar { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-block: 24px; border-top: 1px solid var(--line); }
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-soft); }
.pillar h3 { font-size: var(--t-md); margin-bottom: 6px; letter-spacing: -.01em; }
.pillar p { margin: 0; color: var(--muted); font-size: var(--t-base); }

/* gallery */
.tools { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-sm)/1 var(--font-body); padding: 10px 14px; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--sw, var(--fg)); }
.chip:hover { color: var(--fg); border-color: var(--accent); }
.chip[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); background: var(--surface-2); }
.search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; background: var(--surface); }
.search:focus-within { border-color: var(--accent); }
.search input { background: transparent; border: 0; outline: 0; color: var(--fg); font: 400 var(--t-sm)/1 var(--font-body); padding: 12px 0; width: 150px; }
.search input::placeholder { color: var(--muted); }
.count { font: 400 var(--t-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 16px; }
.card { background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; min-width: 0; font: inherit; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .2s; }
.thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card:hover .thumb { border-color: var(--accent); transform: translateY(-3px); }
.meta { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; font: 400 var(--t-xs)/1.3 var(--font-mono); color: var(--muted); }
.meta b { font-weight: 500; color: var(--fg); }
.tag1 { position: absolute; top: 8px; right: 8px; font: 500 var(--t-xs)/1 var(--font-mono); letter-spacing: .08em; background: var(--accent); color: var(--on-accent); padding: 5px 7px; border-radius: 3px; }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 48px 0; text-align: center; border: 1px dashed var(--line); border-radius: 4px; }

/* rarity */
.rar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); }
.bars { display: grid; gap: 18px; align-content: start; }
.bar-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 36px; gap: 14px; align-items: center; font-size: var(--t-sm); }
.bar-row .nm { display: flex; align-items: center; gap: 8px; }
.bar-row .nm i { width: 10px; height: 10px; border-radius: 50%; background: var(--sw); flex: none; }
.bar-row .tr { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-row .fl { height: 100%; background: var(--accent); border-radius: 99px; width: calc(var(--w) * 1%); }
.bar-row .n { font: 500 var(--t-sm)/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 28px; }
.trait { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 16px; }
.trait b { display: block; font: 600 var(--t-base)/1.2 var(--font-body); margin-bottom: 6px; }
.trait span { font-size: var(--t-sm); color: var(--muted); }
.note { font-size: var(--t-sm); color: var(--muted); margin: 0; }

/* roadmap */
.road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.phase { border-top: 2px solid var(--line); padding-top: 20px; }
.phase.on { border-top-color: var(--accent); }
.phase .label { color: var(--accent-soft); display: block; margin-bottom: 12px; }
.phase h3 { font-size: var(--t-md); letter-spacing: -.01em; margin-bottom: 8px; }
.phase p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

/* faq */
.faq { display: grid; gap: 0; max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 600 var(--t-md)/1.35 var(--font-body); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 var(--t-lg)/1 var(--font-body); color: var(--accent-soft); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 22px; color: var(--muted); max-width: 64ch; }

.addr { font-family: var(--font-mono); font-size: var(--t-xs); word-break: break-all; color: var(--accent-soft); user-select: all; }

/* closing */
.close { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; padding: clamp(36px, 6vw, 72px); background: radial-gradient(120% 140% at 85% 0%, var(--accent-deep) 0%, var(--surface) 55%, var(--bg) 100%); display: grid; gap: 28px; justify-items: start; }
.close h2 { max-width: 16ch; }

footer { margin-top: var(--section); padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; color: var(--muted); font-size: var(--t-sm); }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 30; background: rgba(4,3,8,.95); display: flex; align-items: center; justify-content: center; padding: 20px; padding-block: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)); }
.lb[hidden] { display: none; }
.lb-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; width: min(1080px, 100%); max-height: 100%; overflow: auto; align-items: center; }
.lb-art { aspect-ratio: 1; width: 100%; max-height: 82vh; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--surface); }
.lb-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lb h3 { font-size: var(--t-xl); margin-bottom: 10px; }
.lb .sub { font: 400 var(--t-sm)/1.4 var(--font-mono); color: var(--accent-soft); margin: 0 0 18px; }
.lb p.tx { color: var(--muted); margin: 0 0 22px; }
.lb dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0 0 26px; font-size: var(--t-sm); border-top: 1px solid var(--line); padding-top: 18px; }
.lb dt { font: 400 var(--t-xs)/1.7 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lb dd { margin: 0; }
.lb-ctl { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .top nav { display: none; }
  .hero, .about, .rar, .lb-in { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .road { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}
@media (max-width: 560px) {
  .top .acts .btn:not(.solid) { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .road { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: 96px minmax(0, 1fr) 32px; }
  .search { width: 100%; }
  .search input { width: 100%; }
  .track img { width: 132px; height: 132px; }
  .cta .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { animation: none; }
  .thumb, .btn { transition: none; }
  .card:hover .thumb { transform: none; }
}
:root{--bg:#010103!important;--surface:#050408!important;--surface-2:#08050f!important;--line:#1a1027!important;--accent:#9000ff!important;--accent-soft:#ad38ff!important;--accent-deep:#27004c!important;--muted:#9a91a8!important;color-scheme:dark!important}
html,body{background:#010103!important}body{background-image:radial-gradient(ellipse 42% 25% at 77% 12%,#35006b13,transparent 78%)!important}
#ink-canvas{opacity:.22!important}.hero::before{opacity:.35!important}.hero::after{opacity:.3!important}
.hero-art{touch-action:pan-y;cursor:grab;user-select:none;filter:drop-shadow(0 25px 65px #27004b66)!important}
.hero-art.dragging{cursor:grabbing}.hero-art figure,.hero-art figure:first-child,.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){animation:none!important;transition:transform .12s linear,opacity .3s,filter .3s,box-shadow .3s!important;transform:translate(-50%,-50%) translate3d(var(--cx,0px),var(--cy,0px),var(--cz,0px)) rotateY(var(--yaw,0deg)) rotateZ(var(--roll,0deg))!important;will-change:transform;box-shadow:0 28px 80px #000e,0 0 25px #6700d42b!important}
.hero-art figure::before{opacity:.35}.hero-art .ink-ring{border-color:#6500bb20!important;opacity:.48}.hero-art::before{opacity:.45}.hero-art::after{opacity:.4}
.hero-art figure img{pointer-events:none}.hero-art figure figcaption,.hero-art figure .ink-index{pointer-events:none}
.orbit-hint{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);white-space:nowrap;font:10px ui-monospace,monospace;letter-spacing:.18em;color:#ae8bbd;z-index:12;background:#05030bba;padding:10px 15px;border:1px solid #5d1b9c55;border-radius:30px;pointer-events:none}
.orbit-controls{position:absolute;right:5%;bottom:8%;z-index:13;display:flex;gap:8px}.orbit-controls button{background:#090512d9;color:#e5d4fa;border:1px solid #6720ad88;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:20px}.orbit-controls button:hover{background:#240b3c}
.card,.pillar,.stat,.about,.rar,.closing,.close,.faq-item{background-color:#06040a!important;border-color:#1b1029!important}
.btn.solid{background:#7600d7!important;color:#fff!important}.btn:not(.solid){background:#090510!important;border-color:#4b167c!important}
@media(max-width:800px){.hero-art{height:clamp(350px,88vw,500px)}.orbit-hint{bottom:0;font-size:9px}.orbit-controls{right:2%;bottom:11%}}
@media(prefers-reduced-motion:reduce){.hero-art figure{transition:none!important}}
/* Stable hero previews: three independent cards instead of a rotating, overlapping 3D stack. */
.hero-art{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(8px,1.4vw,18px)!important;align-items:center!important;align-content:center!important;height:auto!important;min-height:0!important;perspective:none!important;transform:none!important;transform-style:flat!important;animation:none!important;will-change:auto!important;touch-action:auto!important;filter:drop-shadow(0 22px 45px #27004b44)!important}
.hero-art figure,.hero-art figure:first-child,.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){position:relative!important;top:auto!important;left:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:3/4!important;margin:0!important;transform:none!important;animation:none!important;filter:none!important;opacity:1!important;backface-visibility:visible!important;overflow:hidden!important;border-radius:14px!important;border:1px solid #8c37ff55!important;box-shadow:0 16px 38px #0009!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}
.hero-art figure:hover{transform:translateY(-5px)!important;z-index:2!important;border-color:#a45aff!important;box-shadow:0 20px 45px #6700a944!important}
.hero-art figure img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;filter:none!important;transform:none!important;transition:transform .35s ease!important;will-change:auto!important}
.hero-art figure:hover img{transform:scale(1.035)!important}
.hero-art figure::before{display:none!important}.hero-art figure::after{opacity:.18!important}.hero-art .ink-ring,.hero-art .orbit-hint,.hero-art .orbit-controls,.hero-art .ink-index{display:none!important}
.hero-art figure figcaption{position:absolute!important;left:8px!important;right:8px!important;bottom:8px!important;width:auto!important;text-align:center!important;font-size:10px!important;letter-spacing:.12em!important;background:#07040edb!important;border:1px solid #a45aff44!important;border-radius:7px!important;padding:7px 4px!important;backdrop-filter:blur(8px)!important}
/* Keep the search field clean; remove the small No. marker from inside it. */
.search>span.label{display:none!important}.search{gap:0!important}
/* Hide hard-to-read token numbers on gallery cards and centre the colourway name. */
.card .meta{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;min-height:48px!important;padding:12px 10px!important}
.card .meta>b{display:none!important}.card .meta>span{font-size:14px!important;font-weight:650!important;letter-spacing:.04em!important;color:#e7d8fa!important;text-align:center!important;width:100%!important}
@media(max-width:800px){.hero-art{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%!important;height:auto!important;max-width:560px!important;margin-inline:auto!important}.hero-art figure,.hero-art figure:first-child,.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){width:100%!important;transform:none!important}.hero-art figure figcaption{font-size:8px!important;padding:6px 2px!important}.card .meta>span{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.hero-art figure,.hero-art figure img{transition:none!important}}
/* Replaces the three-card stack with one continuous abstract fluid artwork. */
.hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;gap:clamp(24px,4vw,64px)!important}
.hero-art.fluid-stage{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr auto!important;align-items:center!important;justify-items:center!important;gap:18px!important;position:relative!important;width:100%!important;height:clamp(430px,48vw,650px)!important;min-height:0!important;max-width:680px!important;margin-inline:auto!important;overflow:visible!important;perspective:none!important;transform:none!important;transform-style:flat!important;animation:none!important;touch-action:auto!important;cursor:default!important;filter:none!important;isolation:isolate!important}
.fluid-stage__halo{position:absolute;inset:12% 5% 18%;border-radius:50%;background:radial-gradient(ellipse at center,#7800ff40 0%,#3d007b22 42%,transparent 72%);filter:blur(34px);animation:fluidHalo 8s ease-in-out infinite alternate;pointer-events:none;z-index:-2}
.fluid-stage__frame{position:absolute;inset:4% 3% 12%;overflow:hidden;border-radius:48% 52% 46% 54% / 48% 44% 56% 52%;border:1px solid #a45aff48;background:#030106;box-shadow:0 0 0 1px #4a147333,0 0 55px #6500cc24,0 35px 100px #000c;isolation:isolate;transform:rotate(-3deg);transition:border-color .5s,box-shadow .5s,border-radius 1.2s}
.fluid-stage__frame:before{content:"";position:absolute;inset:8%;border:1px solid #c49aff20;border-radius:inherit;z-index:3;pointer-events:none;mix-blend-mode:screen}
.fluid-stage__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.88;filter:saturate(.95) contrast(1.06);transform:scale(1.015)}
.fluid-stage__vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 28%,#05010a40 68%,#010103d9 100%),linear-gradient(180deg,#01010312,#0101032b);pointer-events:none}
.fluid-stage__label{position:absolute;z-index:4;left:7%;right:7%;bottom:7%;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #c59bff30;border-radius:999px;background:#07030dc9;backdrop-filter:blur(14px);font:10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;color:#e9dcff;white-space:nowrap}
.fluid-stage__live-dot{width:6px;height:6px;border-radius:50%;background:#b66cff;box-shadow:0 0 12px #a45aff;flex:none;animation:livePulse 2.4s ease-in-out infinite}
.fluid-stage__label-line{height:1px;flex:1;background:linear-gradient(90deg,#a45aff88,transparent)}
.fluid-stage__orbit{position:absolute;inset:12% 0 20%;border:1px solid #8b35e51f;border-radius:50%;pointer-events:none;z-index:-1;transform:rotate(-25deg) scaleX(.88)}
.fluid-stage__orbit--two{inset:19% -4% 26%;border-color:#c49aff18;transform:rotate(24deg) scaleX(.94)}
.fluid-stage__caption{align-self:end;justify-self:center;position:relative;margin:0!important;color:#b9a8ce!important;font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.1em;text-align:center;text-transform:uppercase}
.fluid-stage__caption span{padding:0 9px;color:#a45aff}
.hero-art.fluid-stage:hover .fluid-stage__frame{border-color:#b77aff80;box-shadow:0 0 0 1px #6e2ba944,0 0 70px #6500cc35,0 35px 100px #000c;border-radius:51% 49% 53% 47% / 45% 52% 48% 55%}
@keyframes fluidHalo{from{transform:scale(.94);opacity:.65}to{transform:scale(1.07);opacity:1}}
@keyframes livePulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:800px){.hero{grid-template-columns:1fr!important;gap:16px!important}.hero-art.fluid-stage{order:-1;height:clamp(340px,88vw,510px)!important;max-width:560px!important;margin-top:0!important;margin-bottom:4px!important}.fluid-stage__frame{inset:4% 5% 4%}.fluid-stage__label{font-size:9px;gap:8px;padding:11px 12px}.fluid-stage__caption{font-size:9px!important;letter-spacing:.07em}}
@media(prefers-reduced-motion:reduce){.fluid-stage__halo,.fluid-stage__live-dot{animation:none!important}.fluid-stage__frame{transition:none!important}.fluid-stage__video{display:none!important}.fluid-stage__frame{background:#05010b url('web/ink-fluid-poster.jpg') center/cover no-repeat!important}}

/* ===== production additions ===== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:999px;font:600 14px/1 var(--font-body);text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
.collect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding-block:20px;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:span 2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;font:500 var(--t-sm)/1 var(--font-mono);color:var(--accent-soft)}
.steps b{font:800 var(--t-md)/1.2 var(--font-display);letter-spacing:-.01em}
.steps span{color:var(--muted)}
.facts{margin:0;display:grid;border:1px solid var(--line);border-radius:14px;background:linear-gradient(130deg,#1a1029a8,#0b0713b8);overflow:hidden}
.facts>div{padding:20px 24px;border-top:1px solid var(--line)}
.facts>div:first-child{border-top:0}
.facts dt{font:500 var(--t-xs)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.facts dd{margin:0;font-size:var(--t-md)}
.facts .addr{display:block;font:400 var(--t-sm)/1.5 var(--font-mono);word-break:break-all;color:var(--accent-soft)}
.facts .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.facts .btn{padding:10px 16px}
footer nav{flex-wrap:wrap}
@media(max-width:800px){.collect{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.fluid-stage__video{animation:none}}

html{overflow-x:clip}
