:root{--bg:#120a24;--ink:#fff;--pink:#ff6bb5;--cyan:#5ef2ff;--violet:#a98bff;--yellow:#ffe066;--mute:rgba(255,240,255,.7);--r:26px;--bounce:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{min-height:100svh;font:500 15px/1.6 "M PLUS Rounded 1c","Varela Round","Nunito",ui-rounded,"PingFang SC","Hiragino Maru Gothic ProN","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.fx-cursor{cursor:none}
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 10% 0%,#3b1a6b 0%,transparent 55%),radial-gradient(90% 70% at 100% 100%,#5a1650 0%,transparent 60%),linear-gradient(160deg,#160b2e,#0d0a22 60%,#1a0b26)}
.bg::before{content:"";position:absolute;inset:-10%;background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.6px);background-size:18px 18px;-webkit-mask:radial-gradient(ellipse 60% 50% at 85% 15%,#000,transparent 70%),radial-gradient(ellipse 50% 40% at 10% 90%,#000,transparent 70%);mask:radial-gradient(ellipse 60% 50% at 85% 15%,#000,transparent 70%),radial-gradient(ellipse 50% 40% at 10% 90%,#000,transparent 70%)}
.bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.14) 3px 4px);opacity:.35}
.bg i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;will-change:transform;animation:float 18s var(--ease) infinite alternate}
.bg i:nth-child(1){left:-20vmax;top:-20vmax;background:radial-gradient(closest-side,rgba(255,107,181,.35),transparent)}
.bg i:nth-child(2){right:-22vmax;bottom:-24vmax;background:radial-gradient(closest-side,rgba(94,242,255,.28),transparent);animation-delay:-7s}
.bg i:nth-child(3){left:40vw;top:20vh;width:36vmax;height:36vmax;background:radial-gradient(closest-side,rgba(169,139,255,.28),transparent);animation-delay:-12s}
@keyframes float{to{transform:translate3d(5vmax,-4vmax,0) scale(1.15)}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.spot{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,40%),rgba(255,140,220,.16),rgba(94,242,255,.06) 35%,transparent 60%)}
.flash{position:fixed;inset:0;z-index:20;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#fff,#ffd6f0 40%,#b8f6ff);opacity:0}
.flash.go{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
header,footer,main,.hero{width:min(1240px,92vw);margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;letter-spacing:.04em;color:#fff;text-shadow:2px 2px 0 var(--pink),-1px -1px 0 var(--cyan)}
.brand svg{width:26px;height:26px;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pill{font-size:13px;font-weight:800;color:#2a0f3d;background:linear-gradient(90deg,var(--yellow),#ffb3dd);padding:7px 14px;border-radius:999px;border:2px solid #fff;box-shadow:3px 3px 0 var(--pink);transition:transform .35s var(--bounce);user-select:text}
.pill:hover{transform:translate3d(0,-3px,0) rotate(-3deg)}
.hero{position:relative;text-align:center;padding:clamp(34px,6vh,70px) 0 clamp(26px,4vh,44px)}
.tag{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:900;letter-spacing:.3em;color:var(--cyan);padding:6px 14px;border:2px dashed rgba(94,242,255,.6);border-radius:999px;margin-bottom:18px;background:rgba(94,242,255,.06)}
h1{position:relative;display:inline-block;font-size:clamp(30px,6vw,74px);line-height:1.12;font-weight:900;letter-spacing:.02em;color:#fff;-webkit-text-stroke:2px #2a0f3d;paint-order:stroke fill;text-shadow:4px 4px 0 var(--pink),8px 8px 0 rgba(94,242,255,.55),0 0 34px rgba(255,107,181,.55)}
h1 .ch{display:inline-block;animation:hop 2.8s var(--bounce) infinite;animation-delay:calc(var(--i)*.09s)}
@keyframes hop{0%,70%,100%{transform:translate3d(0,0,0)}78%{transform:translate3d(0,-10px,0) rotate(-4deg)}88%{transform:translate3d(0,2px,0)}}
h1.glitch{animation:glitch .3s steps(2) 2}
@keyframes glitch{0%{transform:translate(2px,-1px);filter:drop-shadow(-3px 0 var(--cyan)) drop-shadow(3px 0 var(--pink))}50%{transform:translate(-3px,1px);filter:drop-shadow(3px 0 var(--cyan)) drop-shadow(-3px 0 var(--pink))}100%{transform:none}}
.sub{margin-top:16px;color:var(--mute);font-weight:700;font-size:clamp(13px,1.5vw,16px)}
.sub b{color:var(--yellow)}
.deco{position:absolute;pointer-events:none;font-size:clamp(18px,2.6vw,34px);animation:twk 3s ease-in-out infinite}
.deco.a{left:4%;top:30%;color:var(--yellow)}.deco.b{right:6%;top:18%;color:var(--pink);animation-delay:-1s}.deco.c{right:14%;bottom:8%;color:var(--cyan);animation-delay:-2s;font-size:clamp(14px,1.8vw,22px)}.deco.d{left:12%;bottom:6%;color:var(--violet);animation-delay:-1.6s}
@keyframes twk{0%,100%{transform:scale(.8) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(25deg);opacity:1}}
.reveal{opacity:0;transform:translate3d(0,24px,0) scale(.97);animation:in .9s var(--bounce) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.32s}
@keyframes in{to{opacity:1;transform:none}}
.card{position:relative;display:block;border-radius:var(--r);padding:clamp(8px,1.1vw,14px);background:linear-gradient(135deg,#ffd1ec,#c9b8ff 50%,#b5f5ff);box-shadow:8px 8px 0 #2a0f3d,8px 8px 0 3px var(--pink),0 30px 90px -20px rgba(255,107,181,.5);transition:transform .45s var(--bounce),box-shadow .45s var(--bounce);cursor:zoom-in;outline:none;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(rgba(42,15,61,.18) 1.4px,transparent 1.8px);background-size:10px 10px;pointer-events:none}
.card .frame{position:relative;border-radius:calc(var(--r) - 10px);overflow:hidden;border:3px solid #2a0f3d;background:#fff}
.card .frame.glitch{animation:glitch .18s steps(2) 3}
.card picture,.card img{display:block;width:100%;height:auto;aspect-ratio:4000/2650}
.shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translate3d(-100%,0,0);animation:sh 5s ease-in-out infinite 1.5s;mix-blend-mode:screen}
@keyframes sh{0%,60%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}
@media (hover:hover){.card:hover{transform:translate3d(-3px,-6px,0) rotate(-.4deg);box-shadow:12px 14px 0 #2a0f3d,12px 14px 0 3px var(--pink),0 40px 100px -20px rgba(255,107,181,.65)}}
.card:active{transform:scale(.985)}
.card:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.sticker{position:absolute;z-index:3;font-weight:900;font-size:13px;padding:6px 12px;border-radius:12px;border:2px solid #2a0f3d;box-shadow:3px 3px 0 #2a0f3d;transition:transform .4s var(--bounce)}
.sticker.s1{top:-16px;left:22px;background:var(--yellow);color:#2a0f3d;transform:rotate(-6deg)}
.sticker.s2{bottom:-16px;right:24px;background:var(--pink);color:#fff;transform:rotate(4deg)}
@media (hover:hover){.card:hover .s1{transform:rotate(-12deg) scale(1.08)}.card:hover .s2{transform:rotate(8deg) scale(1.08)}}
.shards{position:fixed;z-index:15;pointer-events:none}
.shard{position:absolute;inset:0;background-size:100% 100%;will-change:transform,opacity;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:42px 0 calc(30px + env(safe-area-inset-bottom));color:var(--mute);font-size:12px;font-weight:800;letter-spacing:.14em}
footer .mark{user-select:text}
footer .heart{color:var(--pink)}
dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:rgba(18,10,36,.94);padding:0;overflow:auto;opacity:0;transition:opacity .3s ease}
dialog[open]{opacity:1}
dialog::backdrop{background:transparent}
dialog img{display:block;width:max(100vw,2400px);max-width:none;height:auto;margin:auto;background:#fff;cursor:zoom-out}
.close{position:fixed;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:var(--pink);color:#fff;font-size:24px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 #2a0f3d;transition:transform .3s var(--bounce)}
.close:hover{transform:rotate(90deg) scale(1.1)}
.cursor{position:fixed;left:0;top:0;z-index:30;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;will-change:transform;display:none}
body.fx-cursor .cursor{display:block}
.cursor svg{width:100%;height:100%;transition:transform .25s var(--bounce);filter:drop-shadow(0 0 6px var(--pink))}
.cursor.down svg{transform:scale(1.6) rotate(45deg)}
@media (max-width:700px){h1{font-size:7vw;letter-spacing:0;-webkit-text-stroke:1.5px #2a0f3d;text-shadow:3px 3px 0 var(--pink),5px 5px 0 rgba(94,242,255,.55)}.card{box-shadow:5px 5px 0 #2a0f3d,5px 5px 0 2px var(--pink)}.deco.c,.deco.d{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}