:root{
  --bg:#0c0613;--bg2:#21102f;--purple:#9254e8;--violet:#c064ee;--pink:#f29ad8;--gold:#f7d38e;--white:#fffaff;--muted:#dac9e1;--line:rgba(255,255,255,.15);
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  --font-display:"Playfair Display","Bodoni 72","Didot","Times New Roman",Georgia,serif;
  --font-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--white);font-family:var(--font-ui);overflow:hidden}
body{min-height:100dvh;overscroll-behavior:none}
button{font:inherit;color:inherit}button:focus-visible{outline:2px solid #f2a4df;outline-offset:4px}
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(ellipse at 50% 18%,rgba(113,37,151,.78) 0%,rgba(58,18,79,.72) 28%,rgba(25,9,37,.96) 63%,#08040d 100%)}
.backdrop:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(255,154,224,.08),transparent 25%),linear-gradient(120deg,transparent 30%,rgba(255,255,255,.025) 50%,transparent 70%);pointer-events:none}
.aurora{position:absolute;border-radius:50%;filter:blur(75px);opacity:.4;mix-blend-mode:screen;will-change:transform}
.aurora-a{width:60vw;height:60vw;left:-22vw;top:4vh;background:#8b3dcc;animation:floatA 15s ease-in-out infinite alternate}
.aurora-b{width:52vw;height:52vw;right:-22vw;top:38vh;background:#e55ebd;animation:floatB 18s ease-in-out infinite alternate}
.aurora-c{width:44vw;height:44vw;left:32vw;bottom:-24vw;background:#655bea;animation:floatC 20s ease-in-out infinite alternate}
.grain{position:absolute;inset:-50%;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");pointer-events:none}
.stars{position:absolute;inset:0;opacity:.4;background-image:radial-gradient(circle at 12% 23%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 19%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 88% 67%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 30% 76%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 57% 38%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 44% 12%,#f7d38e 0 1px,transparent 1.7px),radial-gradient(circle at 69% 51%,#f29ad8 0 1px,transparent 1.7px);background-size:100% 100%;animation:starPulse 5s ease-in-out infinite alternate}
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}.petal{position:absolute;top:100%;font-size:14px;color:var(--pink);opacity:0;text-shadow:0 0 12px rgba(239,145,213,.7);animation:petalRise linear forwards}
.confetti-layer{position:fixed;inset:0;z-index:30;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-14px;left:var(--cx,50%);width:7px;height:12px;border-radius:2px;background:var(--cc,#ef91d5);opacity:0;animation:confettiFall var(--cdur,2.4s) cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:var(--cdelay,0s)}
#app{position:relative;z-index:1;width:100%;height:100dvh}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--safe-top)) max(18px,4vw) calc(20px + var(--safe-bottom));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s cubic-bezier(.2,.75,.2,1),visibility .65s}
.scene.is-active{opacity:1;visibility:visible;pointer-events:auto}.scene.is-leaving{opacity:0}

/* Gift / cover */
.scene-gift{flex-direction:column;text-align:center}
.scene-gift:after{content:"✦   ·   ♡   ·   ✦";position:absolute;top:calc(8% + var(--safe-top));left:0;right:0;color:rgba(247,211,142,.55);font-size:10px;letter-spacing:.7em;pointer-events:none}
.gift-stage{position:absolute;top:37%;left:50%;width:min(310px,78vw);height:min(310px,78vw);transform:translate(-50%,-50%);display:grid;place-items:center}
.halo{position:absolute;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,#f19bdf55 0,#aa54dc20 42%,transparent 70%);filter:blur(18px);animation:haloPulse 3s ease-in-out infinite}
.halo:after{content:"";position:absolute;inset:18%;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 50px rgba(238,143,218,.2)}
.gift-button{position:relative;width:230px;height:205px;border:0;background:transparent;cursor:pointer;padding:0;transform:translateY(0);animation:giftFloat 4s ease-in-out infinite;filter:drop-shadow(0 28px 32px rgba(0,0,0,.42));touch-action:manipulation;}
.gift-button:active{transform:scale(.96)}
.gift-box{position:absolute;left:50%;top:50%;width:150px;height:116px;transform:translate(-50%,-38%);display:block}
.gift-body{position:absolute;left:0;right:0;bottom:0;height:91px;border-radius:8px 8px 20px 20px;background:linear-gradient(135deg,#b55bdd 0%,#803bc3 48%,#5d2b9c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset -16px -16px 30px rgba(28,7,49,.22)}
.gift-body:after{content:"";position:absolute;left:10px;right:10px;top:8px;height:1px;background:rgba(255,255,255,.25);filter:blur(.2px)}
.gift-lid{position:absolute;z-index:3;left:-7px;top:8px;width:164px;height:32px;border-radius:9px;background:linear-gradient(135deg,#dd75e9,#963fca);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 12px rgba(38,9,59,.22);transform-origin:50% 100%;transform:translate3d(0,0,0) rotate(0deg);transition:transform .82s cubic-bezier(.18,.82,.2,1);will-change:transform}
.ribbon{position:absolute;background:linear-gradient(90deg,#f7a9e2,#f7d0ef,#eb8dd7);opacity:.82}
.ribbon-v{z-index:4;left:65px;top:7px;width:19px;height:109px;border-radius:5px}.ribbon-h{z-index:5;left:0;top:47px;width:150px;height:15px}
.bow{position:absolute;z-index:7;top:-11px;width:37px;height:28px;border-radius:80% 20% 80% 20%;background:#f2a2df;box-shadow:0 4px 8px rgba(45,10,63,.25)}
.bow-left{left:55px;transform:rotate(25deg)}.bow-right{left:82px;transform:scaleX(-1) rotate(25deg)}.bow-center{position:absolute;z-index:8;left:73px;top:0;width:18px;height:18px;border-radius:50%;background:#f8c6ed;box-shadow:0 0 18px #f0a0df99}
.gift-shadow{position:absolute;left:50%;bottom:13px;width:142px;height:22px;transform:translateX(-50%);border-radius:50%;background:#0009;filter:blur(14px);animation:shadowPulse 4s ease-in-out infinite}
.gift-sparkles{position:absolute;inset:0;pointer-events:none}.gift-sparkles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;opacity:.8;animation:sparkle 3s ease-in-out infinite}.gift-sparkles i:nth-child(1){left:8%;top:30%;animation-delay:-.4s}.gift-sparkles i:nth-child(2){right:12%;top:26%;animation-delay:-1.3s}.gift-sparkles i:nth-child(3){right:4%;top:56%;width:3px;height:3px;animation-delay:-2s}.gift-sparkles i:nth-child(4){left:13%;top:66%;width:3px;height:3px;animation-delay:-2.6s}.gift-sparkles i:nth-child(5){left:27%;top:7%;animation-delay:-1.8s}.gift-sparkles i:nth-child(6){right:25%;top:11%;width:3px;height:3px;animation-delay:-.9s}
.gift-copy{position:absolute;left:18px;right:18px;bottom:calc(6vh + var(--safe-bottom));max-width:560px;margin:auto}
.kicker{margin:0 0 10px;font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:#f0deef}.gift-copy h1{margin:0 0 21px;font-family:var(--font-display);font-weight:400;font-size:clamp(54px,14vw,82px);line-height:.92;letter-spacing:.005em;text-shadow:0 10px 50px rgba(0,0,0,.35)}
.open-button{position:relative;overflow:hidden;height:50px;padding:0 26px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:12px;letter-spacing:.02em;cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .3s ease,background .3s ease,border-color .3s ease}.open-button:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);animation:shineSweep 3.2s ease-in-out infinite}.open-button span{display:inline-block;margin-left:8px;color:#f5a9df;transition:transform .3s ease}.open-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.35)}.open-button:hover span{transform:translate(2px,-2px)}
/* Opening: keep the lid perfectly horizontal. It lifts upward as a single, flat piece. */
.gift-button.opening{animation:none}
.gift-button.opening .gift-lid{transform:translate3d(0,-31px,0) rotate(0deg) scale(1.015)}
.gift-button.opening .bow-left{transform:translate3d(0,-31px,0) rotate(25deg)}
.gift-button.opening .bow-right{transform:translate3d(0,-31px,0) scaleX(-1) rotate(25deg)}
.gift-button.opening .bow-center{transform:translate3d(0,-31px,0)}
.gift-button.opening .gift-box{animation:boxOpen .75s ease}
.gift-button.opening .halo{animation:haloBurst .85s ease forwards}

/* Letter */
.scene-letter{background:radial-gradient(circle at 50% 48%,rgba(194,101,217,.2),transparent 42%)}.letter-wrap{position:relative;width:min(420px,88vw)}.letter-glow{position:absolute;inset:5%;border-radius:30px;background:radial-gradient(circle,#e983d966,transparent 67%);filter:blur(30px);opacity:.8}.letter-card{position:relative;width:100%;aspect-ratio:1.35;border:1px solid rgba(255,255,255,.2);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.045));backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 35px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(40px) scale(.9);opacity:0}.wax-seal{position:absolute;top:-19px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ef91d5,#c24fa8 60%,#9c3486);display:grid;place-items:center;color:#fff2f9;font-size:16px;box-shadow:0 6px 18px rgba(155,40,120,.55),inset 0 1px 1px rgba(255,255,255,.4);z-index:2}.letter-card.show{animation:letterIn 1.05s cubic-bezier(.18,.85,.2,1) forwards}.letter-star{font-size:13px;color:#f3a7df;margin-bottom:16px}.letter-card p{margin:0;font-family:var(--font-display);font-size:clamp(29px,7.5vw,42px);font-weight:400}.letter-rule{width:52px;height:1px;background:linear-gradient(90deg,transparent,#f2a3dc,transparent);margin:17px 0 11px}.letter-card small{font-size:8px;letter-spacing:.35em;text-transform:uppercase;color:#d8c4df}

/* Song */
.scene-song{flex-direction:column;justify-content:space-between;text-align:center;padding-top:calc(18px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom));overflow:hidden}.scene-song:before{content:"";position:absolute;width:85vw;height:85vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle,rgba(201,90,219,.2),transparent 64%);filter:blur(20px);pointer-events:none}.song-top{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between}.song-top>span{font-size:8px;letter-spacing:.42em;color:#e2cde8}.restart-button{width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.06);font-size:17px;line-height:1;cursor:pointer}.song-main{position:relative;z-index:2;width:min(720px,94vw);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0}.record-orb{position:relative;width:60px;height:60px;margin-bottom:14px;opacity:.92}.orb-ring{position:absolute;inset:0;border:1px solid rgba(243,151,220,.25);border-radius:50%;animation:ringPulse 3s ease-in-out infinite}.ring-2{inset:8px;animation-delay:-1s;border-color:rgba(182,120,232,.28)}.orb-groove{position:absolute;inset:3px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.09) 0 1px,transparent 1px 4px);animation:orbSpin 6s linear infinite;animation-play-state:paused}.orb-core{position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:#f0a0dd;box-shadow:0 0 20px #ef8edb;z-index:2}body.is-playing .orb-groove{animation-play-state:running}.equalizer{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:16px;margin-bottom:18px;opacity:.9}.equalizer span{width:3px;height:100%;border-radius:2px;background:linear-gradient(180deg,#f39cda,#9d58df);transform:scaleY(.25);animation:eqBounce 1.1s ease-in-out infinite;animation-play-state:paused}.equalizer span:nth-child(1){animation-delay:-1s}.equalizer span:nth-child(2){animation-delay:-.6s}.equalizer span:nth-child(3){animation-delay:-.3s}.equalizer span:nth-child(4){animation-delay:-.8s}.equalizer span:nth-child(5){animation-delay:-.15s}body.is-playing .equalizer span{animation-play-state:running}.song-title h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(48px,12.5vw,82px);line-height:.9;letter-spacing:.025em;text-transform:uppercase;text-shadow:0 8px 45px rgba(0,0,0,.28)}.song-title p{margin:15px 0 0;font-size:11px;letter-spacing:.22em;color:#d7c2df}.player-area{position:relative;z-index:2;width:min(660px,92vw);padding-bottom:2px}.player-row{display:flex;align-items:center;gap:14px}.player-button{flex:0 0 45px;width:45px;height:45px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;cursor:pointer}.track{position:relative;flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.14);cursor:pointer}.track-fill{position:relative;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#9d58df,#f39cda,#f4cf8c);background-size:200% 100%;box-shadow:0 0 14px rgba(237,137,214,.7);animation:trackShimmer 3s linear infinite}.track-thumb{position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 10px 3px rgba(255,255,255,.8),0 0 16px 4px rgba(237,137,214,.7)}.sound-button{border:0;background:transparent;color:#cfbdd7;font-size:10px;min-width:42px;padding:8px 0;cursor:pointer}.time-row{display:flex;justify-content:space-between;margin-top:7px;padding:0 59px;font-size:8px;color:rgba(235,222,239,.5);letter-spacing:.05em}

/* End */
.scene-end{background:radial-gradient(circle at 50% 45%,rgba(220,111,207,.17),transparent 45%)}.end-card{text-align:center;animation:endIn 1.2s cubic-bezier(.2,.8,.2,1)}.end-star{display:block;color:#f2a4dd;font-size:18px;margin-bottom:20px}.end-card p{margin:0;font-family:var(--font-display);font-size:clamp(28px,7vw,42px);line-height:1.1}.end-card h2{margin:13px 0 27px;font-family:var(--font-display);font-size:clamp(46px,13vw,74px);font-weight:400;background:linear-gradient(90deg,#fff,#ed9fdb);-webkit-background-clip:text;background-clip:text;color:transparent}.end-card button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:999px;padding:12px 21px;font-size:11px;cursor:pointer}
.toast{position:fixed;z-index:40;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translate(-50%,15px);padding:9px 14px;border-radius:999px;background:rgba(20,9,30,.75);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:10px;color:#eadbea;opacity:0;pointer-events:none;transition:.35s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes floatA{to{transform:translate(9vw,4vh) scale(1.12)}}@keyframes floatB{to{transform:translate(-7vw,-5vh) scale(.9)}}@keyframes floatC{to{transform:translate(3vw,-8vh) scale(1.15)}}@keyframes starPulse{50%{opacity:.18}}@keyframes giftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shadowPulse{50%{transform:translateX(-50%) scale(.82);opacity:.65}}@keyframes haloPulse{50%{transform:scale(1.12);opacity:.82}}@keyframes sparkle{0%,100%{transform:scale(.6);opacity:.15}50%{transform:scale(1.35);opacity:.95}}@keyframes boxOpen{0%{transform:translateY(0)}45%{transform:translateY(5px) scale(.99)}100%{transform:none}}@keyframes haloBurst{to{transform:scale(2.4);opacity:0}}@keyframes letterIn{0%{opacity:0;transform:translateY(42px) scale(.88) rotate(-2deg)}100%{opacity:1;transform:none}}@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.14);opacity:.9}}@keyframes endIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@keyframes petalRise{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}8%{opacity:.55}92%{opacity:.4}100%{transform:translateY(-112vh) translateX(var(--drift,18px)) rotate(200deg);opacity:0}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(92vh) rotate(520deg);opacity:0}}@keyframes orbSpin{to{transform:rotate(360deg)}}@keyframes eqBounce{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}@keyframes trackShimmer{to{background-position:-200% 0}}@keyframes shineSweep{0%{left:-60%}35%{left:130%}100%{left:130%}}
@media (max-width:600px){.gift-stage{top:36%;transform:translate(-50%,-50%) scale(.92)}.gift-copy{bottom:calc(5vh + var(--safe-bottom))}.gift-copy h1{font-size:clamp(51px,14vw,70px);margin-bottom:18px}.song-main{width:100%}.record-orb{margin-bottom:13px}.song-title h2{font-size:clamp(44px,13.5vw,61px)}.song-title p{margin-top:12px}.player-area{width:100%}.time-row{padding:0 59px}}
@media (max-width:380px){.gift-stage{transform:translate(-50%,-50%) scale(.82)}.gift-copy{bottom:calc(4vh + var(--safe-bottom))}.gift-copy h1{font-size:50px}.open-button{height:45px}.song-top>span{letter-spacing:.3em}.song-title h2{font-size:42px}.player-button{flex-basis:41px;width:41px;height:41px}.time-row{padding:0 55px}}
@media (max-height:700px){.gift-stage{top:34%;transform:translate(-50%,-50%) scale(.82)}.gift-copy{bottom:calc(3.5vh + var(--safe-bottom))}.song-main{justify-content:flex-start;padding-top:5vh}.record-orb{width:46px;height:46px;margin-bottom:9px}.equalizer{margin-bottom:10px}.song-title h2{font-size:clamp(40px,10vw,64px)}.player-area{padding-bottom:0}}
@media (min-width:900px){.gift-stage{top:41%}.gift-copy{bottom:7vh}.scene-song{padding-left:7vw;padding-right:7vw}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}