zz birthday mix chunk 0 of 5 (Claude, hidden, do not edit)
⟨title⟩Bacci Birthday Mix and Cake · Bacci Kid⟨/title⟩⟨base target="_top"⟩
⟨style⟩
@font-face{font-family:"Bacci Serif";src:url("https://cdn.shopify.com/s/files/1/0500/7307/5871/files/Bacci-Serif-v6.otf?v=1792617217") format("opentype");font-display:swap}
@font-face{font-family:"Bacci Sans";src:url("https://cdn.shopify.com/s/files/1/0500/7307/5871/files/Bacci-Sans-v6.otf") format("opentype");font-display:swap}
:root{--gold:#ffd35c;--gold2:#e0a83c;--gold3:#b4762a;--pink:#ff5fa2;--cyan:#5ee7ff;--mint:#8ff0c6;--cream:#fff7ec;--ink:#1a0b2e;--glass:rgba(16,8,40,.62);--line:rgba(255,211,92,.38);--d:"Bacci Serif",Georgia,"Times New Roman",serif;--b:"Bacci Sans","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--px:0px;--py:0px;--top:56px;--dock:88px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:#07041a;color:var(--cream);font:600 16px/1.4 var(--b);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%}
button{font:inherit;color:inherit}
a{color:var(--gold)}
[hidden]{display:none!important}
#stage{position:absolute;inset:0;overflow:hidden;perspective:900px}
/* ---------- backdrops ---------- */
#bgCake{background-image:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/bacci-birthday-mix-sunny-birthday-atelier.png?v=1792915808&width=1200)}
#bgWish{background-image:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/DandiWish-Firstlight-Gardens-Hero-v1.png?width=1600)}
@media (min-aspect-ratio:1/1){#bgCake{background-image:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/DandiWish-Firstlight-Gardens-Hero-v1.png?width=1600);background-position:50% 45%}#bgWish{background-image:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/bacci-birthday-mix-holo-stage.jpg?v=1792914203&width=1600);background-position:50% 30%}}
.bgs{position:absolute;inset:0;overflow:hidden}
.bg{position:absolute;inset:-7%;background-size:cover;background-position:50% 30%;opacity:0;transition:opacity .9s ease;transform:translate3d(var(--px),var(--py),0) scale(1.06);will-change:transform,opacity;animation:kb 26s ease-in-out infinite alternate}
.bg.on{opacity:1}
@keyframes kb{from{scale:1}to{scale:1.09}}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.bg video.ready{opacity:1}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,transparent 40%,rgba(7,4,26,.55) 100%),linear-gradient(180deg,rgba(7,4,26,.15),rgba(7,4,26,.2) 40%,rgba(7,4,26,.78) 100%)}
.rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg at 50% 50%,transparent 0 12deg,rgba(255,211,92,.07) 14deg 20deg,transparent 22deg 60deg,rgba(94,231,255,.05) 62deg 68deg,transparent 70deg 120deg,rgba(255,211,92,.06) 122deg 128deg,transparent 130deg 360deg);animation:spin 70s linear infinite;mix-blend-mode:screen;pointer-events:none;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.chr{position:absolute;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));transform:translate3d(calc(var(--px)*var(--d,2)),calc(var(--py)*var(--d,2)),0);will-change:transform;opacity:0;transition:opacity .9s ease .2s}
.scene.on .chr{opacity:1}
@media (max-width:899px){.chr{bottom:auto!important;top:calc(var(--top) + 2px)}#sArrive .chr:first-of-type{width:min(23vw,104px)!important}#sArrive .chr:nth-of-type(2){width:min(19vw,86px)!important;top:calc(var(--top) + 30px)}#sMix .chr.dj{width:min(34vw,150px)!important;right:2%}#sMix .chr.cat{width:min(17vw,78px)!important;top:calc(var(--top) + 40px)}#sCake .chr{width:min(20vw,90px)!important}#sWish .chr{width:min(26vw,120px)!important;left:50%;margin-left:-13vw}}
.chr img{display:block;width:100%;height:auto;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
/* ---------- top bar ---------- */
.top{position:absolute;left:0;right:0;top:0;height:var(--top);padding:max(8px,env(safe-area-inset-top)) 12px 0;display:flex;align-items:center;gap:10px;z-index:20}
.top .crest{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--cream)}
.top .crest img{height:40px;width:auto;filter:drop-shadow(0 0 10px rgba(255,211,92,.55))}
.top .ttl{flex:1;min-width:0;line-height:1.05}
.top .ttl b{display:block;font:400 17px/1 var(--d);color:var(--gold);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .ttl small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.icon{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(16,8,40,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;font-size:18px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.35);flex:none}
.icon[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 16px rgba(255,211,92,.5),inset 0 1px 0 rgba(255,255,255,.25)}
/* ---------- scenes ---------- */
.scene{position:absolute;inset:0;padding:var(--top) 12px calc(var(--dock) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:flex-end;align-items:center;opacity:0;pointer-events:none;visibility:hidden;transform:scale(1.04);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;z-index:5}
.scene.on{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s}
.ui{position:relative;width:100%;max-width:560px;max-height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
.ui⟩.glass{display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden}
.ui⟩.glass⟩*{flex:none}
.glass{position:relative;border-radius:24px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px -20px rgba(0,0,0,.8),0 0 40px -10px rgba(255,211,92,.25);padding:12px 12px}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 35%,transparent 65%,rgba(255,211,92,.1));pointer-events:none}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:900}
h1{margin:0;font:400 clamp(26px,7.4vw,52px)/1 var(--d);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 30px rgba(255,211,92,.45);letter-spacing:.01em}
h1 .g{background:linear-gradient(180deg,#fff2c4 0%,#ffd35c 45%,#e0a83c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 12px rgba(255,211,92,.35))}
h2{margin:0;font:400 clamp(21px,5.6vw,30px)/1.05 var(--d);color:var(--gold)}
h3{margin:0;font:400 15px/1.1 var(--d);color:var(--gold);letter-spacing:.04em}
p{margin:0}
.sub{font-size:13.5px;line-height:1.3;opacity:.92}
#sArrive .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
#sArrive .hero{flex:none}
#gate{flex:1 1 auto}
#gate .agreeBox{flex:1 1 auto;min-height:84px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 18px;border:0;border-radius:999px;background:linear-gradient(180deg,#fff0bf 0%,#ffd35c 40%,#f59e2a 100%);color:#2a1200;font:900 15px var(--b);cursor:pointer;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(120,50,0,.25),0 8px 24px rgba(255,170,60,.35);transition:transform .12s,box-shadow .12s;text-align:center}
.btn:active{transform:translateY(2px) scale(.98)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--cream);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.btn.pink{background:linear-gradient(180deg,#ffd0e2,#ff5fa2 50%,#d9307a);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px rgba(255,95,162,.35)}
.btn.cyan{background:linear-gradient(180deg,#d6fbff,#5ee7ff 50%,#1aa9c9);color:#06283a;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 24px rgba(94,231,255,.3)}
.btn.sm{min-height:42px;padding:6px 14px;font-size:14px}
.tiny{font-size:12px;opacity:.85;line-height:1.35}
.grow{flex:1 1 auto}
/* ---------- arrival / agreement ---------- */
#sArrive .hero{text-align:center;padding:0 4px 4px}
#sArrive .crestBig{height:min(9dvh,84px);width:auto;filter:drop-shadow(0 0 22px rgba(255,211,92,.65));animation:float 7s ease-in-out infinite}
.agreeBox{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 12px;border-radius:16px;background:rgba(255,247,236,.94);color:#2a1200;border:1px solid rgba(224,168,60,.6);font-size:13.5px;line-height:1.45}
.agreeBox p{margin:0 0 7px}
.agreeBox a{color:#0f6f78}
label.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.35}
label.chk input{width:24px;height:24px;flex:none;accent-color:#ffd35c;margin-top:1px}
/* ---------- mixer ---------- */
.pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:16px;padding:6px 10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:1px;min-height:46px;justify-content:center}
.pill b{font:400 16px/1.05 var(--d);color:var(--gold)}
.pill span{font-size:11.5px;opacity:.8}
.pill[aria-pressed="true"]{background:linear-gradient(180deg,rgba(94,231,255,.22),rgba(94,231,255,.08));border-color:var(--cyan);box-shadow:0 0 18px rgba(94,231,255,.35)}
.layers{display:flex;gap:8px}
.layer{flex:1;min-height:46px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.07);display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;text-align:left}
.layer .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);font-size:16px;flex:none}
.layer b{display:block;font:900 13px/1.1 var(--b)}
.layer span{font-size:11px;opacity:.75}
.layer[aria-pressed="true"]{background:linear-gradient(180deg,rgba(143,240,198,.3),rgba(143,240,198,.1));border-color:var(--mint);box-shadow:0 0 18px rgba(143,240,198,.4)}
.layer.off{opacity:.45}
.deckRow{display:flex;align-items:center;gap:12px}
.turn{position:relative;width:104px;height:104px;flex:none;cursor:pointer;border:0;background:none;padding:0}
.turn .disc{position:absolute;inset:8px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#2b1a45 0 2px,#1b0f30 2px 4px),#1b0f30;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.6),0 0 30px rgba(255,211,92,.15);display:grid;place-items:center}
.turn .disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 40%,rgba(255,255,255,.14) 45%,transparent 50%,transparent 85%,rgba(255,255,255,.1) 92%,transparent 100%);pointer-events:none}
.turn .lbl{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c4,#ffd35c 40%,#b4762a 100%);display:grid;place-items:center;color:#2a1200;font-size:22px;box-shadow:0 0 0 3px #1b0f30,0 0 0 4px rgba(255,211,92,.5)}
.turn.playing .disc{animation:spin 2.2s linear infinite}
.turn svg{position:absolute;inset:0;width:104px;height:104px;transform:rotate(-90deg)}
.turn circle{fill:none;stroke-width:5}
.turn .bgc{stroke:rgba(255,255,255,.12)}
.turn .fgc{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:308;stroke-dashoffset:308;filter:drop-shadow(0 0 6px rgba(255,211,92,.8))}
.turn .dot{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink);transform:rotate(var(--a)) translateY(-49px)}
.deckTxt{flex:1;min-width:0}
.deckTxt .big{font:400 20px/1.05 var(--d);color:#fff}
.deckTxt .st{font-size:12.5px;opacity:.85;margin-top:4px;line-height:1.3}
.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;min-height:56px;padding:6px 6px 5px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:var(--cream);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px rgba(0,0,0,.35);transition:transform .08s}
.pad .ic{font-size:20px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.pad b{font:900 12px/1 var(--b)}
.pad::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 60%,var(--c,#ff5fa2) 0%,transparent 70%);opacity:0;transition:opacity .35s}
.pad.hit{transform:scale(.94)}
.pad.hit::after{opacity:.75;transition:none}
.pad .rip{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;border:2px solid var(--c,#ff5fa2);opacity:0;pointer-events:none}
.pad.hit .rip{animation:rip .5s ease-out}
@keyframes rip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(14)}}
.mixBtns{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:7px}
.mixBtns .btn,.cakeBtns .btn{min-height:40px;padding:4px 6px;font-size:12.5px;white-space:nowrap}
input.nm{min-height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.1);color:#fff;font:800 16px var(--b);padding:6px 12px;width:100%}
input.nm::placeholder{color:rgba(255,247,236,.55)}
.code{display:inline-bloc