:root{
  --ink:#f7f0ff;
  --ink-dim:#b9acd4;
  --gold:#f2d092;
  --intro-cw:clamp(58px,6.2vw,84px);
  --intro-ch:calc(var(--intro-cw) * 1.4);
  --gallery-cw:clamp(70px,6.8vw,110px);
  --gallery-ch:calc(var(--gallery-cw) * 1.4);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-shoot:cubic-bezier(.19,.92,.18,1.02);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:
    radial-gradient(760px 540px at 82% 8%, rgba(173,80,142,.28), transparent 62%),
    radial-gradient(760px 620px at 12% 22%, rgba(88,72,170,.24), transparent 64%),
    radial-gradient(840px 720px at 34% 98%, rgba(48,80,140,.24), transparent 66%),
    radial-gradient(560px 520px at 93% 88%, rgba(210,142,88,.16), transparent 64%),
    linear-gradient(180deg, #03030b 0%, #080617 48%, #020208 100%);
  color:var(--ink);
  font-family:'Spline Sans Mono', ui-monospace, monospace;
  overflow:hidden;
  height:100vh;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
  background:radial-gradient(circle at 50% 48%, rgba(15,10,30,.78), rgba(1,1,5,1) 72%);
  animation:curtainIn 1.25s ease forwards;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  transition:opacity .4s ease;
}
body.viewing::after{ opacity:0; }
body:not(.ready) .head,
body:not(.ready) #stage,
body:not(.ready) .hint{ opacity:0; }
body.ready .head{ animation:headIn .9s var(--ease-out) .12s both; }
body.ready #stage{ animation:stageIn .9s ease .18s both; }

@keyframes curtainIn{ 0%{ opacity:1; } 100%{ opacity:0; } }
@keyframes headIn{ 0%{ opacity:0; transform:translateY(-14px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes stageIn{ 0%{ opacity:0; } 100%{ opacity:1; } }

.nebula{
  position:fixed;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(closest-side 28% 24% at 26% 30%, rgba(228,120,190,.34), transparent),
    radial-gradient(closest-side 28% 30% at 74% 26%, rgba(130,120,245,.28), transparent),
    radial-gradient(closest-side 30% 26% at 68% 74%, rgba(245,186,128,.22), transparent),
    radial-gradient(closest-side 28% 30% at 30% 78%, rgba(90,150,240,.22), transparent);
  animation:nebula 34s ease-in-out infinite;
}
.nebula::before,
.nebula::after{
  content:"";
  position:absolute;
  inset:8% 12%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.06), transparent 58%);
  filter:blur(38px);
  animation:depthDrift 22s ease-in-out infinite;
}
.nebula::after{ inset:18% 2% 2% 28%; opacity:.55; animation-duration:31s; animation-direction:reverse; }
@keyframes nebula{ 0%,100%{ transform:scale(1) rotate(0deg) translate(0,0); } 50%{ transform:scale(1.1) rotate(5deg) translate(2%,-1%); } }
@keyframes depthDrift{ 0%,100%{ transform:translate3d(-1%,1%,0) scale(.95); } 50%{ transform:translate3d(2%,-2%,0) scale(1.08); } }

.sky{
  position:fixed;
  inset:-50px;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
  will-change:transform;
  transition:transform .18s ease-out;
}
.star{ position:absolute; border-radius:50%; background:#fff; animation:twinkle linear infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.08; } 50%{ opacity:.86; } }
.milkyway{
  position:absolute;
  left:-50%;
  top:18%;
  width:200%;
  height:400px;
  transform:rotate(-19deg);
  filter:blur(21px);
  opacity:.56;
  background:radial-gradient(ellipse 46% 60% at 50% 50%, rgba(198,180,255,.19), rgba(235,175,225,.08) 46%, transparent 72%);
}
.meteor{
  position:absolute;
  top:-12%;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 9px 2px #fff;
  opacity:0;
  animation:shoot linear infinite;
}
.meteor::after{
  content:"";
  position:absolute;
  top:50%;
  right:1px;
  height:1.4px;
  transform-origin:right center;
  width:190px;
  transform:translateY(-50%);
  background:linear-gradient(270deg, rgba(255,235,250,.92), transparent);
}
@keyframes shoot{
  0%{ transform:translate(0,0) rotate(28deg); opacity:0; }
  5%{ opacity:.85; }
  30%{ opacity:.85; }
  46%,100%{ transform:translate(-78vw,96vh) rotate(28deg); opacity:0; }
}

.backdrop{
  position:fixed;
  inset:0;
  z-index:72;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(4,3,12,.36), rgba(0,0,3,.78));
  transition:opacity .72s ease;
}
.backdrop.on{ opacity:1; }

.head{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  pointer-events:none;
  padding:32px 40px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  transition:opacity .55s ease, filter .55s ease;
}
body.focus-open .head{ opacity:.32; filter:brightness(.72); }
.title{ position:relative; }
.title .cn{
  font-family:'ZCOOL KuaiLe', cursive;
  font-size:clamp(40px,6.4vw,82px);
  line-height:.9;
  background:linear-gradient(135deg,#ffd9ec 0%,#f7b6d8 30%,#f3d49a 72%,#ffe9c2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 16px rgba(247,182,216,.44));
  letter-spacing:.02em;
}
.title .en{
  font-family:'Fraunces', serif;
  font-weight:300;
  letter-spacing:.42em;
  font-size:clamp(13px,1.7vw,22px);
  margin-top:8px;
  padding-left:4px;
  background:linear-gradient(180deg,#ffffff,#cdd6ff 72%,#a9b4e8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 20px rgba(180,195,255,.28);
}
.title .sub{
  font-size:10px;
  letter-spacing:.3em;
  color:var(--ink-dim);
  margin-top:10px;
  padding-left:4px;
  text-transform:uppercase;
  opacity:.78;
}
.meta{
  text-align:right;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--ink-dim);
  text-transform:uppercase;
  line-height:1.7;
}
.meta .rose{ color:#f7b6d8; }

.hint{
  position:fixed;
  left:50%;
  bottom:9%;
  transform:translateX(-50%);
  z-index:90;
  font-size:12px;
  letter-spacing:.4em;
  color:var(--ink-dim);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:14px;
  transition:opacity .5s ease;
  pointer-events:none;
  white-space:nowrap;
}
.hint .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.28; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.38); } }

.collapse-btn{
  position:fixed;
  left:50%;
  bottom:6.5%;
  transform:translateX(-50%) translateY(14px);
  z-index:91;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease, transform .4s var(--ease-out);
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  padding:11px 22px;
  border-radius:999px;
  color:var(--ink);
  font-family:'Spline Sans Mono', monospace;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.collapse-btn:hover{ background:rgba(247,182,216,.14); border-color:rgba(247,182,216,.42); }
.collapse-btn.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.collapse-btn svg{ width:15px; height:15px; flex:0 0 auto; }

#stage{
  position:fixed;
  inset:0;
  z-index:10;
  cursor:pointer;
  transition:filter .6s ease;
}
body.focus-open #stage{ filter:brightness(.62) saturate(.82) contrast(.95); }

.intro-stack{
  position:absolute;
  inset:0;
  z-index:24;
  transform:translateZ(0);
  transition:opacity .72s ease;
}
.intro-stack.exploding{ pointer-events:none; }
.intro-card,
.gallery-card{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center center;
  backface-visibility:hidden;
}
.intro-card{
  width:var(--intro-cw);
  height:var(--intro-ch);
  margin-left:calc(var(--intro-cw) / -2);
  margin-top:calc(var(--intro-ch) / -2);
  transform-origin:50% 100%;
  transform-style:preserve-3d;
  transform:var(--stack-transform);
  filter:drop-shadow(0 13px 28px rgba(0,0,0,.62));
  transition:transform .85s var(--ease-shoot), opacity .58s ease, filter .58s ease;
}
.intro-card .float{ animation:coreFloat 4.2s ease-in-out var(--float-delay) infinite; }
.float{
  position:relative;
  width:100%;
  height:100%;
  transform-origin:center center;
  transform-style:preserve-3d;
}
.intro-stack::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--intro-cw) * 1.95);
  height:calc(var(--intro-ch) * 1.42);
  transform:translate(-50%,-43%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,236,188,.18), transparent 43%),
    radial-gradient(ellipse at 50% 58%, rgba(0,0,0,.70), rgba(0,0,0,.34) 44%, transparent 72%);
  filter:blur(20px);
  opacity:.82;
  transition:opacity .5s ease, transform .5s ease;
}
.intro-stack.charging::before{
  opacity:1;
  transform:translate(-50%,-43%) scale(1.08);
}
.intro-stack.exploding::before{ opacity:0; }
.intro-card:first-child .card-inner{
  box-shadow:0 18px 44px rgba(0,0,0,.66), 0 0 34px rgba(255,218,172,.28), 0 0 74px rgba(247,182,216,.18);
}
.intro-stack.charging .intro-card{
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.58)) drop-shadow(0 0 32px rgba(255,221,166,.22)) brightness(1.08);
  transform:var(--stack-transform) scale(1.07);
}
.intro-stack.exploding .intro-card{
  transition:transform 4.6s cubic-bezier(.12,.72,.14,1), opacity .95s ease 3.65s, filter 2.4s ease 1.8s;
  transform:var(--burst-transform);
  opacity:0;
  filter:drop-shadow(0 28px 72px rgba(255,216,170,.14)) blur(.15px);
}
.intro-stack.exploding .intro-card .float{
  animation:none;
}

.gallery-columns{
  position:fixed;
  top:50%;
  right:clamp(22px,4.8vw,78px);
  width:clamp(470px,50vw,680px);
  height:118vh;
  transform:translateY(-50%);
  z-index:16;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  column-gap:clamp(8px,1vw,14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease .08s;
}
.gallery-columns.columns-on{
  opacity:1;
  pointer-events:auto;
}
.gallery-column{
  position:relative;
  height:100%;
  overflow:hidden;
  padding:8vh 0;
  -webkit-mask-image:linear-gradient(transparent 0%, transparent 18%, #000 30%, #000 88%, transparent 100%);
  mask-image:linear-gradient(transparent 0%, transparent 18%, #000 30%, #000 88%, transparent 100%);
}
.column-track{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(11px,1.25vw,18px);
  align-items:center;
  transform:translateY(0);
  will-change:transform;
}

.gallery-card{
  position:relative;
  top:auto;
  left:auto;
  width:var(--gallery-cw);
  height:var(--gallery-ch);
  opacity:0;
  transform:translate3d(0, var(--entry-y), 0) rotate(var(--spawn-rotate)) scale(.86);
  transition:
    transform 4.15s cubic-bezier(.13,.75,.15,1) var(--arrive-delay),
    opacity 3.2s ease var(--arrive-delay),
    filter .55s ease;
  cursor:pointer;
}
.gallery-columns.columns-on .gallery-card{
  opacity:1;
  transform:translate(0,0) rotate(0deg) scale(1);
}
.stage--focusing .gallery-card{ pointer-events:none; }
.gallery-columns.is-live .gallery-card .float{
  animation:cardBreath 5.6s ease-in-out var(--float-delay) infinite;
}
body.focus-open .gallery-card .float{ animation-duration:11.2s; }
.gallery-card:hover{ z-index:20; }
.gallery-card:hover .card-inner,
.gallery-card.warming .card-inner{
  will-change:transform;
  transform:perspective(1500px) translateZ(50px) translateY(-9px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:0 28px 58px rgba(0,0,0,.64), 0 0 32px rgba(245,180,215,.44), inset 0 0 0 1px rgba(255,255,255,.26);
}
.gallery-card:hover .face,
.gallery-card.warming .face{ filter:brightness(1.07) saturate(1.08) contrast(1.03); }
.gallery-card:hover .sheen{ transform:translateX(100%); }

.standee-layer{
  display:none !important;
  position:fixed;
  left:clamp(18px,4vw,76px);
  bottom:0;
  z-index:18;
  width:clamp(330px,41vw,610px);
  height:min(88vh,820px);
  opacity:0;
  pointer-events:none;
  transform:translate3d(-22px,18px,0) scale(.985);
  transition:opacity 2.18s ease, filter 2.18s ease;
  filter:brightness(.84) saturate(.95);
}
.standee-layer.show{
  opacity:1;
  pointer-events:none;
  filter:brightness(1) saturate(1.02);
  animation:standeeBreath 6.8s ease-in-out infinite;
}
.standee-layer.leaving{
  opacity:0;
  animation:none;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .42s ease, filter .42s ease;
}
body.focus-open .standee-layer.show{ animation-duration:13.6s; }
.standee-layer::before{
  content:"";
  position:absolute;
  left:-12%;
  right:-10%;
  bottom:1%;
  height:76%;
  border-radius:48%;
  pointer-events:none;
  background:radial-gradient(ellipse at 45% 55%, rgba(247,182,216,.20), rgba(85,98,170,.12) 42%, transparent 72%);
  filter:blur(30px);
  opacity:.7;
}
.standee{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-width:100%;
  max-height:100%;
  margin:auto;
  object-fit:contain;
  object-position:left bottom;
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  filter:drop-shadow(0 36px 66px rgba(0,0,0,.58)) drop-shadow(0 0 30px rgba(247,182,216,.16));
  transition:opacity .72s ease, transform .72s var(--ease-out), filter .72s ease;
}
.standee-layer.show .standee.current{
  opacity:1;
  pointer-events:auto;
}
.standee-b{
  transform:translateX(3%) scale(.72);
  transform-origin:left bottom;
}
.standee-layer.show .standee-b.current{
  transform:translateX(3%) scale(.72);
}
@keyframes standeeBreath{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-8px,0) scale(1.012); }
}

.card-inner{
  position:relative;
  width:100%;
  height:100%;
  border-radius:14px;
  overflow:hidden;
  background:#090715;
  box-shadow:0 10px 30px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .42s var(--ease-out), box-shadow .42s ease;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  --rx:0deg;
  --ry:0deg;
}
.card-back{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  backface-visibility:hidden;
  transform:rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,237,184,.24), transparent 18%),
    conic-gradient(from 20deg, rgba(245,208,146,.22), transparent 18%, rgba(166,120,255,.18), transparent 42%, rgba(245,208,146,.20), transparent 72%, rgba(246,182,216,.18)),
    linear-gradient(145deg, #150d2b 0%, #090716 52%, #1d112a 100%);
  box-shadow:inset 0 0 0 1px rgba(255,229,174,.46), inset 0 0 0 5px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.46);
}
.card-back::before,
.card-back::after{
  content:"";
  position:absolute;
  inset:12%;
  border:1px solid rgba(255,229,174,.34);
  border-radius:10px;
  transform:rotate(5deg);
}
.card-back::after{
  inset:22%;
  border-color:rgba(247,182,216,.28);
  transform:rotate(-16deg);
}
.card-back span,
.card-back i,
.card-back b{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.card-back span{
  width:44%;
  height:44%;
  border:1px solid rgba(255,230,180,.52);
  box-shadow:0 0 20px rgba(255,218,172,.18);
}
.card-back i{
  width:7px;
  height:7px;
  background:#ffe2a8;
  box-shadow:0 -24px 0 -2px #fff2c8, 22px 12px 0 -2px #f7b6d8, -20px 16px 0 -2px #cdd6ff;
}
.card-back b{
  width:74%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,230,180,.5), transparent);
  transform:translate(-50%,-50%) rotate(-31deg);
}
.face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  pointer-events:none;
  backface-visibility:hidden;
  transition:filter 1s ease;
}
.card-inner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
  background:linear-gradient(transparent, rgba(0,0,0,.5));
  pointer-events:none;
}
.num{
  position:absolute;
  left:13px;
  bottom:9px;
  z-index:4;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:20px;
  color:rgba(255,255,255,.95);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.tag{
  position:absolute;
  right:12px;
  bottom:13px;
  z-index:4;
  font-size:9px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
}
.sheen{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.2) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform .7s ease;
}
.rim{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 7px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.16);
  transition:opacity .5s ease;
}
.aura{
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  opacity:0;
  z-index:-1;
  box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 110px rgba(245,170,215,.34);
  transition:opacity 1.05s ease .08s;
}
.gallery-card.warming .aura{ opacity:.24; transition-delay:.18s; }
.fx{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease .22s;
}
.fx i{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
.fx .sweep{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform:translateX(-120%);
}
.gallery-card.warming .fx{ opacity:.3; }
.gallery-card.warming .fx i{ animation:floatup linear infinite; }
@keyframes floatup{
  0%{ transform:translateY(10px) scale(.6); opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:.9; }
  100%{ transform:translateY(-40px) scale(1.1); opacity:0; }
}

.focus-layer{
  position:fixed;
  inset:0;
  z-index:20000;
  pointer-events:none;
}
.focus-layer.show{ pointer-events:auto; }
.focus-scrim{
  position:absolute;
  inset:0;
  cursor:zoom-out;
}
.focus-card{
  position:fixed;
  z-index:2;
  overflow:visible;
  cursor:zoom-out;
  transition:left .52s var(--ease-out), top .52s var(--ease-out), width .52s var(--ease-out), height .52s var(--ease-out), border-radius .52s var(--ease-out);
  filter:drop-shadow(0 42px 90px rgba(0,0,0,.62));
  transform-origin:center center;
  animation:focusBreath 6.8s ease-in-out infinite;
}
.focus-inner{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  background:#070610;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 80px rgba(247,182,216,.22);
  transform-origin:center center;
  transition:transform .16s ease-out;
  will-change:transform;
}
body.focus-open .focus-card{ animation-duration:13.6s; }
.focus-inner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.focus-inner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%, rgba(0,0,0,.18));
}
.focus-glow{
  position:absolute;
  inset:-18%;
  z-index:-1;
  border-radius:30px;
  background:radial-gradient(ellipse at center, rgba(247,182,216,.32), transparent 68%);
  filter:blur(26px);
}

body.bursting #stage::before{
  content:"";
  position:fixed;
  left:50%;
  top:50%;
  z-index:30;
  pointer-events:none;
  width:160px;
  height:160px;
  margin:-80px 0 0 -80px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,190,.5), rgba(247,182,216,.18) 34%, transparent 68%);
  filter:blur(10px);
  animation:burstFlash 1s ease-out forwards;
}
body.bursting #stage::after{
  content:"";
  position:fixed;
  left:50%;
  top:50%;
  z-index:30;
  pointer-events:none;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  color:#ffe6b9;
  box-shadow:
    0 -92px 0 -1px currentColor, 65px -68px 0 -2px currentColor, 96px -4px 0 -1px currentColor,
    70px 62px 0 -2px currentColor, 5px 94px 0 -1px currentColor, -72px 63px 0 -2px currentColor,
    -96px 0 0 -1px currentColor, -62px -72px 0 -2px currentColor,
    34px -128px 0 -3px #fff, 128px 34px 0 -3px #fff, -120px 40px 0 -3px #fff, -22px 126px 0 -3px #fff;
  filter:drop-shadow(0 0 12px rgba(255,226,190,.92));
  animation:burstStars 1.24s ease-out forwards;
}
.shock{
  position:fixed;
  inset:0;
  z-index:31;
  pointer-events:none;
  overflow:hidden;
}
.shock span{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--size);
  height:var(--size);
  margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius:999px;
  opacity:0;
  background:hsl(var(--hue), 96%, 72%);
  box-shadow:0 0 14px hsl(var(--hue), 96%, 72%);
}
.shock.go span{
  animation:fireworkSpark 1.95s var(--ease-out) var(--delay) forwards;
}
@keyframes burstFlash{
  0%{ opacity:0; transform:scale(.2); }
  24%{ opacity:1; }
  100%{ opacity:0; transform:scale(2.2); }
}
@keyframes burstStars{ 0%{ opacity:0; transform:scale(.2) rotate(0deg); } 18%{ opacity:1; } 100%{ opacity:0; transform:scale(1.45) rotate(34deg); } }
@keyframes fireworkSpark{
  0%{ opacity:0; transform:translate3d(0,0,0) scale(.55); }
  14%{ opacity:1; }
  70%{ opacity:.85; }
  100%{ opacity:0; transform:translate3d(var(--x), var(--y), 0) scale(.12); }
}
@keyframes coreFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-7px) scale(1.025); } }
@keyframes cardBreath{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-5px) scale(1.012); } }
@keyframes focusBreath{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-3px) scale(1.006); } }

@media (max-width:760px){
  :root{
    --intro-cw:clamp(52px,14vw,74px);
    --gallery-cw:clamp(46px,11vw,66px);
  }
  .head{ padding:22px 20px; }
  .meta{ display:none; }
  .gallery-columns{
    right:clamp(10px,3vw,18px);
    width:min(78vw, 390px);
    column-gap:6px;
  }
  .gallery-column{ padding:11vh 0; }
  .standee-layer{
    left:-14vw;
    width:70vw;
    height:74vh;
    opacity:0;
  }
  .standee-layer.show{ opacity:.84; }
  .collapse-btn{
    bottom:4.5%;
    padding:10px 16px;
    font-size:11px;
    letter-spacing:.18em;
  }
  .hint{
    bottom:7%;
    max-width:92vw;
    font-size:10px;
    letter-spacing:.22em;
  }
}

.intro-stack.burst-done{ visibility:hidden; }
.music-btn{
  position:fixed; right:28px; bottom:28px; z-index:120; display:flex; align-items:center; gap:9px;
  padding:10px 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  color:var(--ink-dim); background:rgba(8,6,18,.48); backdrop-filter:blur(12px); cursor:pointer;
  font:500 10px/1 'Spline Sans Mono',monospace; letter-spacing:.2em; transition:.35s ease;
}
.music-btn[hidden]{ display:none; }
.music-btn:hover,.music-btn.playing{ color:var(--gold); border-color:rgba(242,208,146,.42); }
.music-bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.music-bars i{ width:2px; height:4px; border-radius:2px; background:currentColor; }
.music-btn.playing .music-bars i{ animation:musicBar .9s ease-in-out infinite alternate; }
.music-btn.playing .music-bars i:nth-child(2){ animation-delay:-.5s; }
.music-btn.playing .music-bars i:nth-child(3){ animation-delay:-.2s; }
@keyframes musicBar{ to{ height:12px; } }
.focus-copy{
  position:absolute; left:50%; top:calc(100% + 18px); width:min(520px,88vw); transform:translateX(-50%);
  text-align:center; color:var(--ink); pointer-events:none; text-shadow:0 2px 18px #000;
}
.focus-copy h2{ font-family:'Fraunces','Microsoft YaHei',serif; font-size:clamp(20px,2.4vw,32px); font-weight:400; letter-spacing:.08em; }
.focus-meta{ margin-top:7px; color:var(--gold); font-size:10px; letter-spacing:.2em; }
.focus-story{ margin:10px auto 0; max-width:46em; color:var(--ink-dim); font:12px/1.8 system-ui,'Microsoft YaHei',sans-serif; letter-spacing:.06em; }