@font-face{font-family:"Grotesk";src:url(grotesk.woff2) format("woff2");font-display:swap}
:root{--bg:#1b1838;--bg2:#252150;--card:#2e2a5e;--line:#4a4486;--text:#fdf8ff;--mute:#c4bde8;--pink:#ffb3d1;--mint:#a8f0d8;--lav:#c9b6ff;--moon:#fff1b8;--r:22px;--round:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Grotesk",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(900px 600px at 85% -10%,#5b4aa8 0%,transparent 60%),radial-gradient(800px 600px at -10% 30%,#3d2f73 0%,transparent 55%),radial-gradient(700px 500px at 50% 110%,#5a3a74 0%,transparent 60%),var(--bg);color:var(--text);font:16px/1.6 "Grotesk",system-ui,sans-serif;overflow-x:hidden}
a{color:var(--pink)}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(1.5px 1.5px at 8% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 22% 40%,var(--moon),transparent),radial-gradient(2px 2px at 40% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 30%,var(--lav),transparent),radial-gradient(2px 2px at 78% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 45%,var(--pink),transparent),radial-gradient(1.5px 1.5px at 15% 75%,#fff,transparent),radial-gradient(2px 2px at 55% 65%,var(--moon),transparent),radial-gradient(1.5px 1.5px at 85% 80%,#fff,transparent);animation:twinkle 5s ease-in-out infinite alternate;opacity:.8}
@keyframes twinkle{to{opacity:.35}}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:12px 20px;background:rgba(27,24,56,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font:800 18px var(--round);color:var(--moon);text-decoration:none}
.top nav{display:flex;gap:18px;margin-left:auto}
.top nav a{color:var(--mute);text-decoration:none;font-size:14px}
.top nav a:hover{color:var(--text)}
@media(max-width:640px){.top nav{display:none}.top .btn{margin-left:auto}}
.btn{min-height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:700 15px var(--round);cursor:pointer;transition:transform .12s,box-shadow .2s}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--hot{background:linear-gradient(135deg,#ffc6de,#c9b6ff);border-color:#ffd6e8;color:#2b1d4f;box-shadow:0 10px 30px -10px rgba(255,179,209,.9)}
.btn--ghost{background:transparent}
.hero{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:1160px;margin:0 auto;padding:56px 20px 36px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:32px}}
.kicker{font:700 13px var(--round);color:var(--mint);letter-spacing:.06em;margin:0 0 12px;text-transform:uppercase}
.title{margin:0;font:800 clamp(48px,9vw,96px)/.95 var(--round);color:var(--moon);text-shadow:0 0 40px rgba(255,241,184,.35)}
.title span{background:linear-gradient(90deg,var(--pink),var(--lav),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mute);font-size:18px;max-width:540px;margin:22px 0}
.lead b{color:var(--moon)}
.pals{display:flex;gap:10px;margin:0 0 24px}
.pals img{width:78px;height:78px;border-radius:20px;border:3px solid var(--card);box-shadow:0 8px 20px -8px #000;animation:bob 3.2s ease-in-out infinite}
.pals img:nth-child(2){animation-delay:.4s}.pals img:nth-child(3){animation-delay:.8s}.pals img:nth-child(4){animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-6px)}}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font:800 24px var(--round)}
.stats span{font-size:13px;color:var(--mute)}
.card{background:linear-gradient(180deg,rgba(62,56,120,.9),rgba(40,36,84,.92));border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:0 30px 70px -25px #000}
.mintcard__pic{border-radius:22px;overflow:hidden;aspect-ratio:1;margin-bottom:14px;background:#000}
.mintcard__pic img{width:100%;height:100%;display:block;object-fit:cover;animation:bob 3s ease-in-out infinite}
.row{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px dashed var(--line)}
.row span{color:var(--mute)}
.qty{display:flex;align-items:center;gap:12px;margin:14px 0}
.qty button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:22px;cursor:pointer}
.qty button:disabled{opacity:.4}
.qty output{font:800 24px var(--round);min-width:36px;text-align:center}
.qty__note{color:var(--mute);font-size:13px;margin-left:auto}
.mintcard .btn--hot{width:100%}
.msg{min-height:1.4em;color:var(--mint);font-size:14px;word-break:break-word}
.fine{color:var(--mute);font-size:12.5px;margin:6px 0 0}
.sec{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:44px 20px}
.h2{font:800 clamp(30px,5vw,44px) var(--round);margin:0 0 8px;color:var(--moon)}
.h3{font:700 20px var(--round);margin:26px 0 4px}
.sub{color:var(--mute);margin:0 0 20px}
.species{margin-top:16px}
.odds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.odds{grid-template-columns:repeat(2,1fr)}}
.odd{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:12px;text-align:center;display:flex;flex-direction:column;gap:2px}
.odd img{width:100%;aspect-ratio:1;border-radius:16px;margin-bottom:8px}
.odd b{font:800 18px var(--round)}
.odd span{font:800 28px var(--round)}
.odd em{font-style:normal;color:var(--mute);font-size:12.5px}
.r0{--rc:#d8d3ef}.r1{--rc:#8fd3ff}.r2{--rc:#c79bff}.r3{--rc:#ffd56b}
.odd span,.odd b{color:var(--rc)}.odd.r3{border-color:#ffd56b;box-shadow:0 0 30px -8px #ffd56b}.odd.r2{border-color:#9b74e6}
.hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.hstats div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column}
.hstats span{color:var(--mute);font-size:13px}
.hstats b{font:800 20px var(--round)}
.hactions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:12px}
.pc{position:relative;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:8px;color:var(--text);cursor:pointer;font:inherit;transition:transform .12s,border-color .2s}
.pc:hover{transform:translateY(-2px)}
.pc[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,179,209,.4)}
.pc.dim{opacity:.5}
.pc img{width:100%;aspect-ratio:1;border-radius:14px;display:block;background:#000}
.pc b{display:block;font:800 15px var(--round);margin-top:6px}
.pc small{display:block;color:var(--mute);font-size:12.5px}
.badge{position:absolute;top:14px;left:14px;padding:2px 10px;border-radius:999px;font:800 11.5px var(--round);text-transform:uppercase;background:var(--rc);color:#24193f}
.reveal{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,rgba(255,179,209,.18),rgba(201,182,255,.18));border:2px solid var(--pink);border-radius:24px;padding:14px;margin:10px 0;flex-wrap:wrap;animation:pop .5s ease-out}
.reveal img{width:120px;height:120px;border-radius:18px}
.reveal b{font:800 22px var(--round);display:block}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:0;margin:0;list-style:none}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.steps b{display:block;font:800 20px var(--round);color:var(--pink);margin-bottom:4px}
.steps span{color:var(--mute)}
.owner{border-top:1px dashed var(--line)}
.ofield{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.ofield input{flex:1;min-width:200px;min-height:46px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:0 16px;font:inherit}
.foot{position:relative;z-index:1;text-align:center;color:var(--mute);font-size:13px;padding:30px 20px 50px}
.dbg{opacity:.6;font-size:11.5px}
.mintcard a.btn{display:block;text-align:center;text-decoration:none;margin:14px 0 4px}
.fine a,.foot a{color:inherit}
.kind{position:absolute;top:8px;left:8px;font:700 11px var(--round,sans-serif);padding:2px 8px;border-radius:99px;background:rgba(20,14,40,.75);color:#fff;letter-spacing:.04em}
.pc{position:relative}

.btn--os{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#2081E2;border-color:#4a9bf0;color:#fff;text-decoration:none;font-weight:700}
.btn--os:hover{background:#1868b7}
.btn--os .os{width:16px;height:16px;flex:none}
.btn--sm{min-height:34px;padding:0 12px;font-size:13px}
.btn--sm .os{width:14px;height:14px}
.btn--big{min-height:42px;padding:0 18px;font-size:14px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.cta .btn{text-decoration:none}
.mintcard a.btn--os{display:flex;margin:8px 0 2px;padding:9px 14px;font-size:14px}
.ticker{display:block;overflow:hidden;white-space:nowrap;background:#2081E2;color:#fff;text-decoration:none;font:700 11px/1 var(--round,sans-serif);letter-spacing:.06em;padding:6px 0;position:relative;z-index:5}
.ticker span{display:inline-flex;align-items:center;gap:8px;animation:tick 24s linear infinite;padding-left:100%}
.ticker .os{width:12px;height:12px}
@keyframes tick{to{transform:translateX(-100%)}}
@media(max-width:640px){.top{gap:8px;padding:10px 12px}.top .brand{font-size:15px}.top .btn--os{margin-left:auto}.top .btn--os+.btn{margin-left:0;min-height:34px;padding:0 12px;font-size:12px}.btn--big{min-height:40px;padding:0 14px;font-size:13px}}
