:root{--blue:#2a1bff;--deep:#1a0fb8;--pink:#ff5fa2;--lemon:#ffe23d;--mint:#3df2b5;--ink:#140c3d;--bg:#f3f0ff;--card:#fff;
--r1:#6b8bff;--r2:#8a5cff;--r3:#d44bff;--r4:#ff4d6d;--r5:#ffb703}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 16px/1.55 Onest,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
h1,h2,h3,.logo{font-family:Unbounded,sans-serif}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px 5vw;background:var(--blue);color:#fff}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.dot{width:22px;height:22px;border-radius:50% 50% 50% 4px;background:var(--lemon);border:3px solid var(--ink)}
.top nav{display:flex;gap:22px;margin-right:auto;font-weight:500}
.top nav a:hover{text-decoration:underline;text-underline-offset:6px}
.langs{display:flex;background:var(--deep);border-radius:99px;padding:3px}
.langs a{padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700}
.langs a.on{background:#fff;color:var(--blue)}
.btn{font:700 15px Onest,sans-serif;border:3px solid var(--ink);border-radius:99px;padding:10px 20px;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pink{background:var(--pink)}.btn.lemon{background:var(--lemon)}.btn.mint{background:var(--mint)}.btn.ghost{background:#fff}
.btn.big{padding:15px 28px;font-size:17px}.btn.sm{padding:6px 14px;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px;background:var(--blue);color:#fff;padding:60px 5vw 90px;overflow:hidden}
.hero h1{font-size:clamp(38px,5.6vw,74px);line-height:1.02;font-weight:800;letter-spacing:-.02em;max-width:11ch}
.hero p{margin:22px 0 30px;font-size:19px;max-width:44ch;color:#dcd8ff}
.ctas{display:flex;gap:16px;flex-wrap:wrap}
.stats{display:flex;gap:34px;margin-top:44px;list-style:none;padding:0;flex-wrap:wrap;color:#cfc9ff;font-size:14px}
.stats b{display:block;font:800 26px Unbounded;color:var(--lemon)}
.fan{position:relative;height:430px}
.hero-card{position:absolute;left:50%;top:20px;width:230px;margin-left:-115px;transform:translateX(var(--x)) rotate(var(--rot));animation:drop .7s cubic-bezier(.2,1.3,.4,1) both;animation-delay:var(--d)}
@keyframes drop{from{transform:translate(var(--x),-480px) rotate(calc(var(--rot) * 4));opacity:0}}
.ticker{background:var(--lemon);border-block:3px solid var(--ink);overflow:hidden;white-space:nowrap;font-weight:700}
.track{display:inline-block;padding:10px 0;animation:run 40s linear infinite}
.track span{margin-right:54px}.track em{font-style:normal;background:var(--ink);color:var(--lemon);border-radius:99px;padding:1px 10px;margin-right:8px;font-size:13px}
@keyframes run{to{transform:translateX(-50%)}}
.sec{padding:76px 5vw 10px;max-width:1280px;margin:auto}
.sec h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;margin-bottom:26px}
.lead{max-width:60ch;margin:-10px 0 28px;font-size:18px}
.tools{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.tabs{display:flex;gap:8px}
.tab{font:700 15px Onest;padding:9px 20px;border-radius:99px;border:3px solid var(--ink);background:#fff;cursor:pointer}
.tab.on{background:var(--ink);color:var(--lemon)}
.tools input,.tools select{font:500 15px Onest;padding:9px 18px;border:3px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink)}
.tools input{flex:1;min-width:200px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px}
.card{--c:var(--r3);background:var(--card);border:3px solid var(--ink);border-radius:22px 22px 22px 4px;box-shadow:6px 6px 0 var(--c);overflow:hidden;color:var(--ink)}
.card[hidden]{display:none}
.r1{--c:var(--r1)}.r2{--c:var(--r2)}.r3{--c:var(--r3)}.r4{--c:var(--r4)}.r5{--c:var(--r5)}
.art{height:150px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fff8,transparent 50%),linear-gradient(135deg,var(--c),var(--ink));border-bottom:3px solid var(--ink)}
.art b{font:800 30px Unbounded;color:#fff;transform:rotate(-8deg);text-align:center;line-height:1;padding:0 10px;text-shadow:3px 3px 0 var(--ink)}
.meta{padding:14px 16px 6px;display:grid;gap:2px}
.meta span{font-size:13px;opacity:.7}.meta small{background:var(--ink);color:#fff;border-radius:6px;padding:0 6px;margin-left:4px}
.meta strong{font:700 17px/1.25 Unbounded}
.buy{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 16px}
.price{font:800 20px Unbounded}
.hero-card .meta{padding-bottom:16px}
.empty{padding:50px 0;text-align:center;font-size:18px}
.trade{margin-top:40px}
.tr-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pane{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:22px;box-shadow:6px 6px 0 var(--ink)}
.pane h3{font-size:19px;margin-bottom:16px}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tcard{--c:var(--r3);font:inherit;text-align:left;cursor:pointer;display:grid;gap:2px;padding:12px;border:3px solid var(--ink);border-radius:14px;background:#fff;border-left:10px solid var(--c);color:var(--ink)}
.tcard span{font-size:12px;opacity:.7}.tcard b{font-size:14px;line-height:1.2}.tcard i{font-style:normal;font-weight:700}
.tcard.on{background:var(--mint);box-shadow:inset 0 0 0 3px var(--ink)}
.balance{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;background:var(--ink);color:#fff;border-radius:26px;padding:22px 28px}
.balance small{display:block;color:#bdb6ff}.balance strong{font:800 28px Unbounded;color:var(--mint)}
.balance.bad strong{color:var(--pink)}
.how ol{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none;padding:0}
.how li{padding:26px;border:3px solid var(--ink);border-radius:26px;background:var(--mint);box-shadow:6px 6px 0 var(--ink)}
.how li:nth-child(2){background:var(--pink)}.how li:nth-child(3){background:var(--lemon)}
.how b{display:block;font:800 20px Unbounded;margin-bottom:8px}
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:90px;padding:30px 5vw;background:var(--ink);color:#fff}
footer small{color:#bdb6ff}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);background:var(--ink);color:var(--lemon);padding:12px 24px;border-radius:99px;font-weight:700;border:3px solid var(--lemon);transition:transform .25s;z-index:50}
.toast.show{transform:translate(-50%,0)}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;padding-bottom:50px}.fan{height:340px}.hero-card{width:170px;margin-left:-85px}.hero-card .art{height:110px}
 .top nav{display:none}.top{gap:12px;justify-content:space-between}.top .btn{display:none}
 .tr-cols,.how ol{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.hero-card,.track{animation:none}html{scroll-behavior:auto}}
h1,h2,h3,.logo{font-family:Unbounded,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
body{font-family:Onest,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
.art{position:relative;overflow:hidden}
.art img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;filter:drop-shadow(0 6px 0 rgba(20,12,61,.45))}
.art.has b{display:none}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;background:var(--deep);padding:6px 16px;border-radius:99px;font-weight:700;font-size:14px}
.lang summary::-webkit-details-marker{display:none}
.menu{position:absolute;right:0;top:calc(100% + 12px);width:310px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
.menu a{padding:6px 12px;border-radius:10px;font-weight:500}
.menu a:hover{background:var(--bg)}.menu a.on{background:var(--lemon);font-weight:700}
@media(max-width:900px){.menu{width:250px}}