:root{
  --night:#170505;--lacquer:#2e0909;--red:#b8281b;--cinnabar:#d9442b;--gold:#e8b04b;--gold-2:#f6d58a;--paper:#f6ead2;--ink:#1a0a06;--jade:#7ef0c8;
  --line:rgba(246,213,138,.22);--muted:rgba(246,234,210,.7);
  --f-d:'Playfair Display',Georgia,serif;--f-b:'DM Sans',system-ui,sans-serif;--f-m:'DM Mono',ui-monospace,monospace;--f-zh:'Ma Shan Zheng','Noto Serif SC','Songti SC',serif;
  --r:14px;--pad:clamp(20px,5vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
main{overflow-x:clip}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--night);color:var(--paper);font:400 clamp(15px,1.05vw,17px)/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:italic;color:var(--gold)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--gold);color:var(--ink);padding:8px 12px;border-radius:8px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
.sec{padding:clamp(80px,11vw,170px) var(--pad);position:relative}
.sec-pad{padding-inline:var(--pad)}
h2{font:900 clamp(2.6rem,7vw,6.4rem)/.92 var(--f-d);margin:.2em 0 .35em;letter-spacing:-.015em}
h3{font:700 clamp(1.25rem,2vw,1.7rem)/1.1 var(--f-d);margin:0 0 .4em}
.eyebrow{font:500 .74rem/1 var(--f-m);letter-spacing:.2em;color:var(--gold);margin:0}
.kicker{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 .7rem/1 var(--f-m);letter-spacing:.18em;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(28px,4vw,56px)}
.lead{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--paper)}
p{color:var(--muted)}
/* grain + petals + cursor */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}}
.petals{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--gold);border-radius:50%;z-index:150;pointer-events:none;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;mix-blend-mode:screen;opacity:0}
.cursor span{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;background:var(--gold);border-radius:50%}
.cursor.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(232,176,75,.15)}
@media (hover:none){.cursor{display:none}}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120}.progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--gold),var(--jade));transform-origin:0 50%;transform:scaleX(0)}
/* loader */
.loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:50.5%;background:
 repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.18) 46px 48px),
 repeating-linear-gradient(0deg,transparent 0 46px,rgba(0,0,0,.18) 46px 48px),linear-gradient(180deg,#5a1009,#2e0909);box-shadow:inset 0 0 0 10px #3d0c07,inset 0 0 0 13px var(--gold)}
.door-l{left:0}.door-r{right:0}
.knob{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:4px solid var(--gold);box-shadow:0 0 0 6px rgba(232,176,75,.25)}
.door-l .knob{right:22px}.door-r .knob{left:22px}
.loader-core{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;text-align:center}
.loader-seal{width:110px;height:110px;display:grid;place-items:center;background:var(--cinnabar);color:var(--paper);border-radius:14px;font:400 4.4rem/1 var(--f-zh);box-shadow:0 0 0 4px var(--night),0 0 0 6px var(--gold),0 20px 60px rgba(0,0,0,.5);animation:stamp 1.1s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-4deg)}}
.loader-txt{display:flex;gap:18px;align-items:baseline}.loader-txt .zh{font:400 2.2rem var(--f-zh);color:var(--gold)}
.loader-pct{font:500 1.6rem var(--f-m);color:var(--paper);letter-spacing:.1em}
.loader-sub{font:500 .68rem var(--f-m);letter-spacing:.3em;color:var(--muted)}
.loader.open .door-l{transform:translateX(-101%) perspective(800px) rotateY(18deg)}.loader.open .door-r{transform:translateX(101%) perspective(800px) rotateY(-18deg)}
.loader .door{transition:transform 1.3s cubic-bezier(.77,0,.18,1)}
.loader.open .loader-core{opacity:0;transform:scale(.9);transition:.5s}
.loader.gone{display:none}
/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);transition:background .3s,padding .3s,transform .4s}
.nav.solid{background:rgba(23,5,5,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:10px;border-bottom:1px solid var(--line)}
.nav.hide{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:10px}
.seal-sm{width:38px;height:38px;display:grid;place-items:center;background:var(--cinnabar);border-radius:8px;font:400 1.5rem/1 var(--f-zh);box-shadow:0 0 0 2px var(--gold);transform:rotate(-4deg);transition:transform .4s}
.brand:hover .seal-sm{transform:rotate(8deg) scale(1.06)}
.brand-word{font:900 1.25rem/1 var(--f-d);display:grid}.brand-word b{color:var(--gold)}.brand-word small{font:500 .55rem/1.4 var(--f-m);letter-spacing:.2em;color:var(--muted)}
.nav-links{display:flex;gap:4px}
.nav-links a{font:500 .72rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:999px;position:relative;overflow:hidden;transition:color .2s}
.nav-links a i{font-style:normal;color:var(--gold);margin-right:6px;opacity:.7}
.nav-links a::after{content:"";position:absolute;inset:0;background:rgba(232,176,75,.12);border-radius:inherit;transform:scale(.4);opacity:0;transition:.3s}
.nav-links a:hover::after,.nav-links a.on::after{transform:none;opacity:1}
.nav-actions{display:flex;align-items:center;gap:10px}
.sound{display:flex;align-items:center;gap:8px;font:500 .68rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:rgba(23,5,5,.4)}
.eq{display:flex;gap:2px;align-items:flex-end;height:12px}.eq i{width:2px;height:3px;background:var(--gold);transition:height .2s}
.sound[aria-pressed=true] .eq i{animation:eq .8s ease-in-out infinite alternate}.sound[aria-pressed=true] .eq i:nth-child(2){animation-delay:-.3s}.sound[aria-pressed=true] .eq i:nth-child(3){animation-delay:-.6s}.sound[aria-pressed=true] .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:3px}to{height:12px}}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--paper);transition:.3s}.burger span:first-child{top:17px}.burger span:last-child{top:24px}
.burger[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}.burger[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:99;background:rgba(23,5,5,.97);display:grid;align-content:center;gap:6px;padding:var(--pad);clip-path:circle(0 at calc(100% - 40px) 36px);transition:clip-path .7s cubic-bezier(.77,0,.18,1)}
.drawer.open{clip-path:circle(150% at calc(100% - 40px) 36px)}
.drawer a{font:900 clamp(2rem,9vw,3.4rem)/1.1 var(--f-d);border-bottom:1px solid var(--line);padding:8px 0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.35em;border-radius:999px;font:700 .82rem/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,box-shadow .25s,background .25s,color .25s;white-space:nowrap}
.btn img{width:auto;height:18px}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::before{transform:translateX(120%)}
.btn-buy{background:var(--cinnabar);color:var(--paper);box-shadow:0 0 0 1.5px var(--gold),0 10px 30px rgba(217,68,43,.35)}
.btn-buy img{filter:brightness(0) invert(1)}
.btn-buy:hover{box-shadow:0 0 0 1.5px var(--gold-2),0 14px 40px rgba(217,68,43,.55)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 30px rgba(232,176,75,.3)}
.btn-gold img{filter:brightness(0)}
.btn-ghost{border:1px solid var(--line);background:rgba(23,5,5,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}
img.inv{filter:brightness(0) invert(.93) sepia(.3) saturate(2) hue-rotate(5deg)}
.pill{font:500 .7rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 14px;transition:.25s}
.pill:hover,.pill[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
/* CA */
.ca{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 6px 6px 14px;border-radius:999px;background:rgba(23,5,5,.6);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ca-tag{font:700 .66rem var(--f-m);letter-spacing:.18em;color:var(--gold)}
.ca code{font:500 .82rem var(--f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:52ch}
.ca-copy{font:700 .66rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--ink);border-radius:999px;padding:8px 14px;transition:.2s}
.ca-copy:hover{background:var(--gold-2)}
.ca-sm{margin:10px 0 14px}
/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr;align-items:end;padding:120px var(--pad) 90px}
.hero-bg{position:absolute;inset:-6%;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-sun{position:absolute;z-index:1;left:16%;top:42%;width:28vw;height:28vw;margin:-14vw;border-radius:50%;background:radial-gradient(circle,rgba(255,233,180,.55),rgba(255,190,110,.12) 45%,transparent 70%);mix-blend-mode:screen;animation:sun 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes sun{to{transform:scale(1.15);opacity:.75}}
.hero-vignette{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(23,5,5,.55) 0,rgba(23,5,5,0) 22%,rgba(23,5,5,0) 50%,rgba(23,5,5,.9) 88%,var(--night)),radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(23,5,5,.55))}
.cat-stage{position:absolute;z-index:4;left:60%;top:8%;bottom:4%;width:min(64vh,46vw);transform:translateX(-50%);display:grid;place-items:center}
.cat-poster{position:absolute;inset:auto 0 6% 0;margin:auto;width:auto;height:84%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));transition:opacity .8s;animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
#cat-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s;cursor:grab;touch-action:pan-y}
#cat-canvas:active{cursor:grabbing}
.cat-stage.live #cat-canvas{opacity:1}.cat-stage.live .cat-poster{opacity:0}
.cat-halo{position:absolute;z-index:-1;width:90%;aspect-ratio:1;top:6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(232,176,75,0),rgba(232,176,75,.35),rgba(126,240,200,.25),rgba(232,176,75,0) 60%);filter:blur(28px);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cat-hint{position:absolute;bottom:2%;font:500 .62rem var(--f-m);letter-spacing:.16em;text-transform:uppercase;background:rgba(23,5,5,.6);border:1px solid var(--line);padding:7px 12px;border-radius:999px;backdrop-filter:blur(8px)}
.vert{position:absolute;z-index:3;top:22%;writing-mode:vertical-rl;font:400 clamp(2rem,4vw,3.6rem)/1 var(--f-zh);color:rgba(246,213,138,.75);letter-spacing:.2em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.vert-l{display:none}.vert-r{right:calc(var(--pad) * .5)}
.hero-copy{position:relative;z-index:5;max-width:600px;display:grid;gap:18px;justify-items:start}
.chip{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 .7rem var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:rgba(23,5,5,.55);border:1px solid rgba(126,240,200,.35);padding:8px 14px;border-radius:999px;backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 0 rgba(126,240,200,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(126,240,200,0)}100%{box-shadow:0 0 0 0 rgba(126,240,200,0)}}
.hero-title{margin:0;line-height:.82;position:relative}
.ht-zh{display:block;font:400 clamp(1.6rem,3.2vw,2.6rem)/1 var(--f-zh);color:var(--gold);letter-spacing:.3em;margin-bottom:.15em}
.ht-word{display:block;white-space:nowrap;font:900 clamp(4rem,9.4vw,9rem)/.85 var(--f-d);letter-spacing:-.03em;color:var(--paper);text-shadow:0 6px 0 var(--red),0 18px 60px rgba(0,0,0,.6)}
.ht-word .ch{display:inline-block;will-change:transform}
.hero-lead{margin:0;max-width:38ch;font-size:clamp(1rem,1.3vw,1.18rem);color:var(--paper)}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px}
.hero-foot{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:22px;display:flex;justify-content:space-between;gap:12px;font:500 .64rem var(--f-m);letter-spacing:.18em;color:var(--muted)}
.nihao-count b{color:var(--gold)}
.scroll-cue i{display:inline-block;width:1px;height:14px;background:var(--gold);margin-left:8px;vertical-align:middle;animation:cue 1.6s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.nihao-pop{position:fixed;z-index:160;pointer-events:none;font:400 2.4rem var(--f-zh);color:var(--gold-2);text-shadow:0 4px 18px rgba(0,0,0,.6)}
/* marquee */
.marquee{overflow:hidden;background:var(--cinnabar);color:var(--paper);border-block:2px solid var(--gold);transform:rotate(-1.5deg) scale(1.03);margin:-10px 0 0;position:relative;z-index:6}
.mq-track{display:flex;gap:28px;width:max-content;padding:14px 0;animation:mq 34s linear infinite;font:900 clamp(1.1rem,2vw,1.6rem) var(--f-d);letter-spacing:.04em;align-items:center}
.mq-track b{color:var(--gold-2);font-size:.8em}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* about */
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:26px}
.facts div{padding:14px 12px;border-right:1px solid var(--line);display:grid;gap:4px}.facts div:last-child{border:0}
.facts span{font:500 .6rem var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts b{font:900 clamp(1rem,1.6vw,1.35rem) var(--f-d);color:var(--gold-2)}
.fan{position:relative;height:clamp(380px,46vw,600px)}
.fan-card{position:absolute;left:50%;top:50%;width:min(62%,340px);background:var(--paper);padding:10px 10px 34px;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform-origin:50% 120%;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .3s;cursor:pointer}
.fan-card img{width:100%;height:auto;border-radius:3px}
.fan-card figcaption{position:absolute;left:12px;right:12px;bottom:9px;font:500 .62rem var(--f-m);letter-spacing:.14em;color:var(--ink);display:flex;justify-content:space-between}
.scrolls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(50px,7vw,100px)}
.scroll-card{position:relative;padding:28px 22px 24px;border-radius:var(--r);background:linear-gradient(160deg,rgba(184,40,27,.22),rgba(46,9,9,.6));border:1px solid var(--line);transform-style:preserve-3d;transition:transform .2s,border-color .3s;overflow:hidden}
.scroll-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(232,176,75,.2),transparent 55%);opacity:0;transition:opacity .3s}
.scroll-card:hover{border-color:var(--gold)}.scroll-card:hover::after{opacity:1}
.sc-n{display:block;font:400 2.6rem/1 var(--f-zh);color:var(--gold);margin-bottom:14px}
.scroll-card p{margin:0;font-size:.95rem}
/* memes */
.memes{position:relative;padding-top:clamp(70px,9vw,140px)}
.memes-pin{position:relative;overflow:hidden}
.memes-head{max-width:1440px}
.memes-sub{max-width:46ch}
.strip{display:flex;gap:22px;padding:30px var(--pad) 60px;width:max-content;align-items:center}
.strip figure{margin:0;flex:none;height:clamp(240px,40vh,420px);position:relative;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);cursor:pointer;transform:rotate(var(--r,0deg));transition:transform .4s}
.strip figure:hover{transform:rotate(0) scale(1.04)}
.strip img{height:100%;width:auto}
.strip figure::after{content:attr(data-n);position:absolute;left:10px;top:10px;font:500 .6rem var(--f-m);letter-spacing:.14em;background:rgba(23,5,5,.7);padding:5px 8px;border-radius:99px}
.depot{padding-bottom:clamp(60px,8vw,120px)}
.depot-bar{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.depot-count b{font:900 clamp(2.4rem,5vw,4rem)/1 var(--f-d);color:var(--gold)}.depot-count span{font:500 .72rem var(--f-m);letter-spacing:.14em;color:var(--muted);margin-left:8px}
.depot-tools{display:flex;gap:8px}
.masonry{columns:5 220px;column-gap:14px}
.masonry figure{break-inside:avoid;margin:0 0 14px;position:relative;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--lacquer);opacity:0;transform:translateY(30px) scale(.97);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.masonry figure.in{opacity:1;transform:none}
.masonry img{width:100%;height:auto;transition:transform .6s,filter .4s}
.masonry figure:hover img{transform:scale(1.07)}
.masonry figure::after{content:attr(data-n);position:absolute;right:8px;bottom:8px;font:500 .58rem var(--f-m);letter-spacing:.12em;background:rgba(23,5,5,.75);padding:4px 8px;border-radius:99px;opacity:0;transition:.3s}
.masonry figure:hover::after{opacity:1}
.masonry.wall{columns:9 110px;column-gap:6px}.masonry.wall figure{margin-bottom:6px;border-radius:4px}
.depot-more{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.depot-hint{font:500 .7rem var(--f-m);letter-spacing:.14em;color:var(--muted)}
/* pfp */
.pfp{background:radial-gradient(ellipse at 70% 50%,rgba(184,40,27,.35),transparent 60%)}
.pfp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.pfp-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.pfp-tray{display:flex;gap:8px;flex-wrap:wrap}
.pfp-tray img{width:54px;height:54px;object-fit:cover;border-radius:50%;border:2px solid var(--gold);cursor:pointer;transition:transform .2s}
.pfp-tray img:hover{transform:scale(1.12) rotate(-6deg)}
.oracle{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin-inline:auto;display:grid;place-items:center}
.ring{position:absolute;border-radius:50%;inset:0;border:1px dashed rgba(232,176,75,.45);animation:spin 40s linear infinite}
.ring-b{inset:7%;border:1px solid rgba(126,240,200,.25);animation-duration:26s;animation-direction:reverse}
.ring-c{inset:-3%;border:0;animation-duration:60s}
.ring-c span{position:absolute;left:50%;top:50%;font:400 1.6rem/1 var(--f-zh);color:var(--gold);width:1.6rem;margin:-.8rem}
.oracle.spin .ring{animation-duration:2s}
.oracle-card{position:relative;width:70%;background:var(--paper);color:var(--ink);border-radius:14px;padding:12px;box-shadow:0 0 0 2px var(--gold),0 40px 80px rgba(0,0,0,.55);transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.oracle.spin .oracle-card{transform:rotate(2deg) scale(.97)}
.oracle-top,.oracle-bot{display:flex;justify-content:space-between;font:500 .62rem var(--f-m);letter-spacing:.14em;padding:4px 4px 10px}
.oracle-bot{padding:10px 4px 2px;min-height:2.6em;line-height:1.4}
.oracle-img{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--lacquer)}
.oracle-img img{width:100%;height:100%;object-fit:cover}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.oracle-seal{position:absolute;right:4%;bottom:6%;width:74px;height:74px;display:grid;place-items:center;background:var(--cinnabar);color:var(--paper);font:400 2.6rem/1 var(--f-zh);border-radius:12px;transform:rotate(8deg);box-shadow:0 0 0 3px var(--gold),0 14px 30px rgba(0,0,0,.4)}
/* how */
.path{position:relative;display:grid;gap:clamp(40px,6vw,90px);margin-top:clamp(40px,5vw,70px)}
.path-line{position:absolute;left:50%;top:0;height:100%;width:10px;transform:translateX(-50%);overflow:visible}
.path-line path{stroke:var(--gold);stroke-width:2;fill:none;stroke-dasharray:6 8;vector-effect:non-scaling-stroke}
.step{position:relative;display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;gap:clamp(16px,3vw,40px)}
.step-n{grid-column:2;grid-row:1;width:90px;height:90px;display:grid;place-items:center;border-radius:50%;background:var(--cinnabar);font:400 2.8rem/1 var(--f-zh);box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--gold);z-index:2}
.step-art{grid-column:1;grid-row:1;justify-self:end;max-width:420px;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-2deg)}
.step-art img{width:100%;height:auto}
.step-txt{grid-column:3;grid-row:1;max-width:460px}
.step:nth-child(odd of .step) .step-art{grid-column:3;justify-self:start;transform:rotate(2deg)}
.step:nth-child(odd of .step) .step-txt{grid-column:1;justify-self:end;text-align:right}
.step:nth-child(odd of .step) .step-txt .ca{margin-left:auto}
/* chart */
.chart-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.chart-links{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.chart-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0e0303;height:clamp(440px,70vh,720px);box-shadow:0 0 0 6px rgba(232,176,75,.06)}
.chart-frame iframe{width:100%;height:100%;border:0;display:block}
.chart-wait{position:absolute;inset:0;display:grid;place-items:center}
#candles{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.cw-txt{position:relative;text-align:center;display:grid;justify-items:center;gap:8px;padding:20px;max-width:440px}
.cw-zh{font:400 clamp(3.4rem,8vw,6rem)/1 var(--f-zh);color:var(--gold)}
.cw-ca{font:500 .74rem var(--f-m);letter-spacing:.12em}
/* join */
.join{padding-top:clamp(70px,9vw,140px)}
.banner{position:relative;width:calc(100% - 2 * clamp(10px,2vw,28px));margin-inline:auto;aspect-ratio:2200/1228;max-height:88vh;border-radius:clamp(14px,2vw,26px);overflow:hidden;box-shadow:0 0 0 2px var(--gold),0 40px 100px rgba(0,0,0,.6);isolation:isolate}
.banner-bg{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2}
.banner-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,5,5,.88),rgba(23,5,5,.35) 55%,rgba(23,5,5,.1))}
.banner-cat{position:absolute;right:6%;bottom:-2%;height:92%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));animation:bob 5s ease-in-out infinite}
.banner-copy{position:absolute;left:clamp(18px,5vw,80px);top:50%;transform:translateY(-50%);max-width:min(560px,58%);display:grid;gap:16px;justify-items:start}
.banner-copy h2{margin:0;font-size:clamp(2.2rem,6vw,5.6rem)}.banner-copy h2 span{display:block}
.banner-copy p{margin:0;color:var(--paper)}
.join-btns{display:flex;flex-wrap:wrap;gap:10px}
.fortune{display:flex;align-items:center;justify-content:center;gap:22px;padding-block:clamp(50px,7vw,90px);flex-wrap:wrap;text-align:center}
.fortune-seal{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ef5a3c,var(--red));box-shadow:0 0 0 3px var(--gold),0 14px 40px rgba(217,68,43,.4);display:grid;place-items:center;font:400 3.2rem/1 var(--f-zh);color:var(--gold-2);transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.fortune-seal:hover{transform:rotate(-12deg) scale(1.08)}
.fortune-seal.pop{animation:popseal .7s}
@keyframes popseal{30%{transform:scale(.85) rotate(20deg)}70%{transform:scale(1.15) rotate(-10deg)}}
.fortune-txt{font:700 italic clamp(1.1rem,2vw,1.6rem)/1.3 var(--f-d);color:var(--paper);max-width:32ch;margin:0}
/* footer */
.foot{padding:40px var(--pad) 50px;border-top:1px solid var(--line)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font:500 .66rem var(--f-m);letter-spacing:.16em;color:var(--muted)}
.foot-brand{font:900 2rem var(--f-d);color:var(--paper);letter-spacing:0}.foot-brand b{color:var(--gold)}
.totop{border:1px solid var(--line);padding:9px 14px;border-radius:999px}
.disc{font-size:.8rem;max-width:90ch;margin-top:22px}
/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:var(--paper)}
.lb::backdrop{background:rgba(10,2,2,.9);backdrop-filter:blur(8px)}
.lb[open]{display:grid;place-items:center}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(92vw,900px)}
.lb img{max-height:78vh;width:auto;max-width:100%;border-radius:10px;box-shadow:0 0 0 2px var(--gold);animation:lbin .4s cubic-bezier(.2,1.2,.4,1)}
@keyframes lbin{from{transform:scale(.9);opacity:0}}
.lb figcaption{display:flex;gap:18px;font:500 .7rem var(--f-m);letter-spacing:.14em}.lb figcaption a{color:var(--gold)}
.lb-x{position:fixed;top:18px;right:18px;font:500 .7rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:10px 14px;border-radius:999px}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);font:500 .7rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:12px 16px;border-radius:999px;background:rgba(23,5,5,.6)}
.lb-prev{left:14px}.lb-next{right:14px}
/* toast */
.toast{position:fixed;left:50%;bottom:26px;z-index:400;transform:translate(-50%,30px);opacity:0;background:var(--paper);color:var(--ink);font:700 .78rem var(--f-m);letter-spacing:.1em;padding:12px 18px;border-radius:999px;box-shadow:0 0 0 2px var(--gold),0 14px 40px rgba(0,0,0,.4);transition:.35s cubic-bezier(.2,1.4,.4,1);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* reveal */
.rv{opacity:0;transform:translateY(34px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal-lines .ln{display:block;overflow:hidden;padding-bottom:.06em}.reveal-lines .ln>span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal-lines.in .ln>span{transform:none}.reveal-lines.in .ln:nth-child(2)>span{transition-delay:.12s}
/* responsive */
@media (max-width:1080px){.nav-links{display:none}.burger{display:block}.scrolls{grid-template-columns:1fr 1fr}.facts{grid-template-columns:repeat(3,minmax(0,1fr))}.facts div:nth-child(3){border-right:0}.facts div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:820px){
  .hero{padding-top:90px;padding-bottom:70px;align-items:end}
  .cat-stage{left:50%;top:9%;bottom:auto;height:48svh;width:min(86vw,46svh)}
  .vert{display:none}
  .cat-hint{display:none}
  .ht-word{font-size:clamp(3.6rem,17vw,5.4rem)}
  .hero-copy{gap:14px}
  .hero-foot .nihao-count{display:none}
  .about-grid,.pfp-grid{grid-template-columns:1fr}
  .fan{height:420px}
  .step,.step:nth-child(odd of .step){grid-template-columns:60px 1fr;gap:14px}
  .step-n{grid-column:1!important;grid-row:1;width:60px;height:60px;font-size:2rem}
  .step .step-art,.step:nth-child(odd of .step) .step-art{grid-column:2!important;grid-row:1;justify-self:stretch;transform:none;max-width:none}
  .step .step-txt,.step:nth-child(odd of .step) .step-txt{grid-column:2!important;grid-row:2;justify-self:stretch;text-align:left}
  .step:nth-child(odd of .step) .step-txt .ca{margin-left:0}
  .path-line{left:30px}
  .banner{aspect-ratio:auto;height:auto;min-height:620px}
  .banner-shade{background:linear-gradient(180deg,rgba(23,5,5,.2),rgba(23,5,5,.92) 55%)}
  .banner-cat{height:50%;right:50%;transform:translateX(50%);top:2%;bottom:auto;animation:none}
  .banner-copy{position:relative;left:auto;top:auto;transform:none;max-width:none;padding:330px 18px 24px}
  .chart-frame{height:540px}
}
@media (max-width:560px){
  .nav .btn-buy span{display:none}.nav .btn-buy{padding:.75em .9em}.sound .sound-label{display:none}
  .brand-word small{display:none}
  .scrolls{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}.facts div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)}.facts div:nth-child(2n){border-right:0!important}
  .ca code{max-width:20ch}
  .masonry{columns:2 140px;column-gap:10px}.masonry figure{margin-bottom:10px}
  .masonry.wall{columns:4 70px}
  .hero-foot span:first-child{display:none}
  .btn{padding:.8em 1.05em;font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}.reveal-lines .ln>span{transform:none}}