@property --c1 { syntax: '<color>'; inherits: true; initial-value: #FF2BD6; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #2F3BFF; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #E4FF1A; }

:root{
  --ink:#0B0714;
  --hot:#FF2BD6;
  --blue:#2F3BFF;
  --acid:#E4FF1A;
  --cyan:#22F0FF;
  --white:#FFFFFF;
  --pulse:0;
  --mono:"Rubik Mono One","Noto Sans SC",sans-serif;
  --bungee:"Bungee","Noto Sans SC",sans-serif;
  --chakra:"Chakra Petch","Noto Sans SC",sans-serif;
  --pop:"ZCOOL QingKe HuangYou","Noto Sans SC",sans-serif;
  --sans:"Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --bounce:linear(0,.013,.049,.104 6.7%,.395 13.7%,.528,.645,.743,.826,.893 32.3%,.946,.985 40.4%,1.012,1.03 47.9%,1.036,1.038 53.6%,1.033 57.2%,1.012 65.9%,.998 76.2%,1);
  --g:clamp(16px,3vw,44px);
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body{margin:0;overflow-x:clip;background:transparent;--c1:#FF2BD6;--c2:#2F3BFF;--c3:#E4FF1A;transition:--c1 .6s,--c2 .6s,--c3 .6s}
body[data-pal="ember"]{--c1:#FF6A1A;--c2:#B3121F;--c3:#FFB547}
body[data-pal="dice"]{--c1:#FF5A3C;--c2:#2B4CB8;--c3:#FFC21A}
body[data-pal="riso"]{--c1:#FF48B0;--c2:#3255A4;--c3:#FFE800}
body[data-pal="mortal"]{--c1:#C9F31D;--c2:#FF4655;--c3:#ECE8E1}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;user-select:none;-webkit-user-drag:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lbl{font-family:var(--bungee);font-size:14px;letter-spacing:.08em;color:var(--c3)}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
::selection{background:var(--hot);color:#fff}

/* ---------- 背景 ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.bg-a{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;background:var(--c1);animation:blobA 18s ease-in-out infinite alternate}
.bg-b{width:60vmax;height:60vmax;right:-22vmax;bottom:-25vmax;background:var(--c2);animation:blobB 22s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes blobB{to{transform:translate(-16vmax,-10vmax) scale(.9)}}
.bg .bg-dots{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:calc(.16 + var(--pulse)*.14);background:radial-gradient(circle,rgba(255,255,255,.9) 0 1.2px,transparent 1.6px) 0 0/14px 14px;mask:linear-gradient(180deg,#000,transparent 70%);-webkit-mask:linear-gradient(180deg,#000,transparent 70%)}
#riso{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}

/* ---------- pill ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 28px;border-radius:999px;font-family:var(--chakra);font-weight:700;font-size:18px;letter-spacing:.02em;border:3px solid var(--ink);transition:transform .5s var(--bounce),box-shadow .3s}
.pill-hot{background:var(--hot);color:#fff;box-shadow:5px 5px 0 var(--acid),5px 5px 0 3px var(--ink)}
.pill-hot:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:9px 9px 0 var(--acid),9px 9px 0 3px var(--ink)}
.pill-ghost{background:transparent;color:#fff;border-color:#fff}
.pill-ghost:hover{background:#fff;color:var(--ink)}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;z-index:90;background:var(--ink);display:grid;place-items:center;transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.gate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,43,214,.35),transparent 60%),radial-gradient(circle at 70% 70%,rgba(47,59,255,.35),transparent 55%)}
.gate.out{clip-path:polygon(0 0,100% 0,100% 0,0 0);pointer-events:none}
.gate.gone{display:none}
.gate-in{position:relative;text-align:center;padding:24px}
.gate-logo{font-family:var(--mono);font-size:clamp(64px,13vw,170px);line-height:1;background:linear-gradient(180deg,#fff 0 38%,#9aa3ff 48%,#1a1466 52%,#FF2BD6 80%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #fff}
.gate-sub{font-family:var(--bungee);letter-spacing:.2em;color:var(--acid);margin-top:10px}
.gate-eq{display:flex;gap:6px;justify-content:center;height:46px;align-items:flex-end;margin:28px 0}
.gate-eq i{width:10px;background:var(--hot);animation:eq .9s ease-in-out infinite alternate}
.gate-eq i:nth-child(2n){background:var(--acid);animation-duration:.7s}
.gate-eq i:nth-child(3n){background:var(--cyan);animation-duration:1.1s}
@keyframes eq{from{height:8px}to{height:46px}}
.gate-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.gate-note{margin-top:22px;font-size:14px;color:rgba(255,255,255,.6)}
.count{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:40vmin;color:var(--acid);pointer-events:none;-webkit-text-stroke:4px var(--ink);text-shadow:12px 12px 0 var(--hot)}
.count span{animation:cnt .5s var(--bounce) both}
@keyframes cnt{from{transform:scale(2.2) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:var(--g);right:var(--g);z-index:40;display:flex;align-items:center;gap:18px;height:58px;padding:0 10px 0 22px;border-radius:999px;background:rgba(11,7,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:2px solid rgba(255,255,255,.14)}
.nav-logo{font-family:var(--mono);font-size:22px;background:linear-gradient(180deg,#fff 45%,var(--c1));-webkit-background-clip:text;background-clip:text;color:transparent}
.lamps{display:flex;gap:6px}
.lamps i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .08s}
.lamps i.on{background:var(--c3);box-shadow:0 0 14px var(--c3)}
.lamps i.on:first-child{background:var(--c1);box-shadow:0 0 14px var(--c1)}
.bpm{font-family:var(--chakra);font-weight:700;font-size:13px;color:rgba(255,255,255,.6)}
.nav nav{margin-left:auto;display:flex;gap:4px}
.nav nav a{font-family:var(--bungee);font-size:14px;padding:8px 14px;border-radius:999px;transition:background .2s,color .2s}
.nav nav a:hover{background:var(--c3);color:var(--ink)}
.snd{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--chakra);font-size:14px}
.snd[aria-pressed="true"]{background:var(--acid)}
.snd-eq{display:flex;gap:2px;align-items:flex-end;height:16px}
.snd-eq i{width:3px;height:4px;background:var(--ink)}
.snd[aria-pressed="true"] .snd-eq i{animation:eq2 .5s ease-in-out infinite alternate}
.snd-eq i:nth-child(2){animation-delay:-.2s}.snd-eq i:nth-child(3){animation-delay:-.35s}.snd-eq i:nth-child(4){animation-delay:-.1s}
@keyframes eq2{to{height:16px}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px var(--g) 60px;overflow:hidden;text-align:center}
.burst{position:absolute;left:50%;top:46%;width:min(120vw,1500px);height:min(120vw,1500px);transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(calc(.9 + var(--pulse)*.08));pointer-events:none}
.burst polygon{fill:var(--c3);opacity:.12}
.rings i{position:absolute;left:50%;top:46%;width:40vmin;height:40vmin;border-radius:50%;border:3px solid var(--c1);transform:translate(-50%,-50%) scale(var(--s,1));opacity:var(--o,0);pointer-events:none}
.hero-kicker{display:flex;gap:10px;position:relative}
.hero-kicker span{font-family:var(--bungee);font-size:14px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);transform:rotate(-3deg)}
.hero-kicker span:nth-child(2){background:var(--c3);transform:rotate(2deg)}
.hero-kicker span:nth-child(3){background:var(--c1);color:#fff;transform:rotate(-1deg)}
.chrome{position:relative;width:min(100%,1500px);aspect-ratio:2048/720;margin:10px 0 -3vw}
.hero-zh{position:relative;font-family:var(--pop);font-size:clamp(46px,7vw,110px);line-height:1;color:var(--c3);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--c1);transform:rotate(-4deg) scale(calc(1 + var(--pulse)*.05))}
.hero-lead{position:relative;margin-top:24px;font-size:clamp(18px,1.6vw,23px);font-weight:700;line-height:1.6}
.eq{position:relative;display:flex;gap:5px;align-items:flex-end;height:60px;margin:30px 0 26px}
.eq span{width:9px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--c3),var(--c1));height:6px}
.hero-go{position:relative}
.yst{position:absolute;left:0;top:0;width:var(--w);height:auto;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(calc(1 + var(--k,0)*.22)) translateY(calc(var(--k,0)*-14px));filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35));pointer-events:none}

/* ---------- tape ---------- */
.tape{position:relative;z-index:3;background:var(--c3);color:var(--ink);transform:rotate(-3deg);margin:0 -4vw;border-block:4px solid var(--ink);overflow:hidden;transition:background .6s}
.tape-track{display:flex;gap:28px;align-items:center;width:max-content;padding:14px 0;animation:mq 22s linear infinite;font-family:var(--bungee);font-size:26px}
.tape-track b{color:var(--c1);-webkit-text-stroke:1px var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- tracks ---------- */
.tracks{padding:140px var(--g) 100px}
.tracks-head{display:flex;align-items:baseline;gap:22px;margin-bottom:46px}
.tracks-head .lbl{white-space:nowrap}
.tracks-title{font-family:var(--mono);font-size:clamp(34px,8.6vw,130px);line-height:1;color:#fff;-webkit-text-stroke:0;text-shadow:6px 6px 0 var(--c1)}
.deck{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px}
.trk{--tilt:-1.6deg;--hit:0;transform:rotate(var(--tilt)) scale(calc(1 + var(--hit)*.018));transition:transform .5s var(--bounce)}
.trk:nth-child(2n){--tilt:1.4deg;margin-top:70px}
.trk:hover{--tilt:0deg}
.trk-link{display:block;background:var(--ink);border:4px solid #fff;border-radius:28px;overflow:hidden;box-shadow:10px 10px 0 var(--c1);transition:box-shadow .3s,transform .5s var(--bounce)}
.trk:hover .trk-link{transform:translateY(-8px);box-shadow:16px 18px 0 var(--c3)}
.trk-art{position:relative;aspect-ratio:4/3;overflow:hidden}
.trk-meta{background:var(--ink);display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 22px;border-top:4px solid #fff}
.trk-no{font-family:var(--mono);font-size:44px;line-height:1;color:var(--c3)}
.trk-meta h3{font-size:24px;font-weight:900}
.trk-meta p{font-size:15px;color:rgba(255,255,255,.72);margin-top:2px}
.trk-date{font-family:var(--chakra);font-weight:700;font-size:15px;padding:6px 12px;border-radius:999px;border:2px solid rgba(255,255,255,.4)}

/* 01 入卷：暗底光带 */
.t-ember .trk-art{background:#07080a}
.ember-band{position:absolute;left:-30%;right:-30%;top:40%;height:26%;background:linear-gradient(90deg,transparent,#ff5a1f 30%,#ffb14a 50%,#ff3b1f 70%,transparent);filter:blur(28px);transform:rotate(-24deg) translateX(var(--ex,0%));opacity:calc(.55 + var(--hit)*.4);mix-blend-mode:screen}
.ember-band.b{top:52%;height:8%;filter:blur(6px);opacity:calc(.5 + var(--hit)*.5)}
.rig{position:absolute;bottom:-4%;transform:translateY(calc(var(--jump,0)*-26px)) rotate(calc(var(--jump,0)*-3deg))}
.rig .body{width:100%}
.rig .eyes{position:absolute;left:50%;transform:translate(-50%,-50%)}
.rig.knight{left:12%;width:34%}
.rig.knight .eyes{top:30%;width:40%}
.rig.lantern{right:12%;width:30%}
.rig.lantern .eyes{top:50%;width:48%}
.ember-title{position:absolute;left:50%;top:10%;transform:translateX(-50%);font-family:"Noto Serif SC",serif;font-weight:900;font-size:clamp(46px,6vw,92px);color:#fff;text-shadow:0 0 30px #ff6a1a,0 0 2px #ffb14a;letter-spacing:.2em}

/* 02 骰子夜：奶油底贴纸 */
.t-dice .trk-art{background:#FAF4DC}
.t-dice video{position:absolute;right:4%;bottom:0;height:92%;width:auto}
.dst{position:absolute;width:21%;transform:rotate(var(--r,0deg)) translateY(calc(var(--jump,0)*-22px)) scale(calc(1 + var(--jump,0)*.1));filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25))}
.dst.s1{left:6%;top:36%;--r:-12deg}
.dst.s2{left:27%;top:58%;--r:8deg}
.dst.s3{left:12%;top:70%;--r:-4deg;width:17%}
.dice-title{position:absolute;left:6%;top:8%;font-family:"Fredoka","Noto Sans SC",sans-serif;font-weight:700;font-size:clamp(46px,5.8vw,88px);color:#E8402A;-webkit-text-stroke:3px #1d1a2e;paint-order:stroke fill;text-shadow:5px 5px 0 #1d1a2e;transform:rotate(-5deg)}

/* 03 叠印社：印版 */
.t-riso .trk-link{background:transparent}
.t-riso .trk-art{background:transparent}
.riso-plate{position:absolute;inset:0}
.riso-title{position:absolute;left:8%;bottom:6%;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(56px,8vw,130px);line-height:.8;letter-spacing:-.05em;height:.8em;width:3em}
.riso-title span{position:absolute;left:0;top:0;mix-blend-mode:multiply}
.rb{color:#3255A4;transform:translate(calc(var(--hit)*6px),calc(var(--hit)*-4px))}
.rp{color:#FF48B0;transform:translate(calc(var(--hit)*-8px + 4px),calc(var(--hit)*5px + 3px))}

/* 04 凡骨：荧绿斜切 */
.t-mortal .trk-art{background:#CDF615}
.mortal-word{position:absolute;left:0;right:0;top:50%;z-index:2;transform:translateY(-50%);text-align:center;font-family:"Anton",sans-serif;font-size:clamp(90px,12.6vw,200px);line-height:1;color:transparent;-webkit-text-stroke:3px #0F1116;letter-spacing:-.01em;pointer-events:none}
.t-mortal video{position:absolute;left:50%;bottom:-6%;height:112%;width:auto;transform:translateX(-50%)}
.slash{z-index:3;position:absolute;left:-10%;right:-10%;top:52%;height:14px;background:#0F1116;box-shadow:0 0 0 3px #CDF615;transform:rotate(-16deg) scaleX(var(--cut,0));transform-origin:0 50%}
.mortal-zh{z-index:3;position:absolute;right:5%;top:6%;font-family:"Ma Shan Zheng",serif;font-size:clamp(50px,6vw,96px);color:#FF4655;text-shadow:4px 4px 0 #0F1116;line-height:1}

/* ---------- about ---------- */
.about{padding:120px var(--g) 110px;max-width:1300px;margin:0 auto}
.about-h{font-family:var(--pop);font-weight:400;font-size:clamp(48px,7.4vw,120px);line-height:1.05;margin-top:16px;color:#fff;text-shadow:6px 6px 0 var(--c2)}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.about-grid div{border:3px solid #fff;border-radius:24px;padding:24px 26px;background:rgba(11,7,20,.5)}
.about-grid b{display:block;font-family:var(--mono);font-weight:400;font-size:clamp(60px,7vw,110px);line-height:1;color:var(--c3)}
.about-grid span{font-weight:700;font-size:18px}
.about-p{margin-top:34px;font-size:clamp(17px,1.4vw,21px);line-height:1.8;max-width:36em;color:rgba(255,255,255,.82)}

/* ---------- footer ---------- */
.foot{padding:40px var(--g) 28px;overflow:hidden}
.foot-next{font-family:var(--mono);font-size:clamp(46px,10vw,170px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,calc(.35 + var(--pulse)*.5));white-space:nowrap}
.foot-next span{font-family:var(--pop);-webkit-text-stroke:0;color:var(--c1);font-size:.5em;vertical-align:.3em;margin-left:.2em}
.foot-row{display:flex;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;border-top:2px solid rgba(255,255,255,.2);font-family:var(--chakra);font-weight:700;font-size:14px;color:rgba(255,255,255,.6)}

.flash{position:fixed;inset:0;z-index:95;pointer-events:none;background:var(--c1);clip-path:circle(0 at var(--fx,50%) var(--fy,50%));transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.flash.go{clip-path:circle(150% at var(--fx,50%) var(--fy,50%))}

@media (max-width: 900px){
  .nav nav,.bpm{display:none}
  .snd b{display:none}
  .deck{grid-template-columns:1fr;gap:40px}
  .trk:nth-child(2n){margin-top:0}
  .about-grid{grid-template-columns:1fr}
  .yst{--w:64px!important}
  .chrome{margin-bottom:-6vw}
  .trk-meta{grid-template-columns:auto 1fr;gap:12px}
  .trk-date{display:none}
  .trk-no{font-size:34px}
  .foot-row{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){
  .tape-track,.bg i{animation:none}
}