zz birthday mix chunk 1 of 5 (Claude, hidden, do not edit)
k;padding:8px 12px;border-radius:12px;background:#0a0620;color:var(--gold);font:900 16px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.08em;word-break:break-all;border:1px solid var(--line)}
/* ---------- cake ---------- */
.rowPick{display:flex;gap:6px;align-items:center;min-width:0}
.rowPick h3{flex:none;width:52px;font-size:13px}
.chips{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px 2px;flex:1;min-width:0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:38px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--cream);font:800 13px var(--b);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--pink);background:linear-gradient(180deg,rgba(255,95,162,.4),rgba(255,95,162,.15));box-shadow:0 0 16px rgba(255,95,162,.45)}
.ui⟩.glass⟩.cakeStage{flex:1 1 auto}
.cakeStage{position:relative;min-height:138px;display:grid;place-items:end center;perspective:800px;cursor:pointer;overflow:visible}
.cake{transform-origin:50% 100%}
.cakeStage .hint{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:12px;opacity:.85}
.cakeWrap{position:relative;width:230px;height:190px;transform-origin:50% 100%;transform:scale(var(--cs,1))}
.cake{position:relative;width:230px;height:190px;transform-style:preserve-3d;animation:cakeBob 5s ease-in-out infinite}
@keyframes cakeBob{0%,100%{transform:translateY(0) rotateX(6deg)}50%{transform:translateY(-6px) rotateX(8deg)}}
.plate{position:absolute;left:50%;bottom:-6px;width:250px;height:36px;margin-left:-125px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.55),rgba(255,255,255,.18) 55%,rgba(255,255,255,0) 72%);box-shadow:0 22px 40px rgba(0,0,0,.6)}
.tier{position:absolute;left:50%;transform:translateX(-50%);border-radius:48%/22%;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 28%,rgba(255,255,255,.22) 48%,rgba(0,0,0,0) 68%,rgba(0,0,0,.4)),var(--col,#8b5a3c);box-shadow:0 14px 22px rgba(0,0,0,.45)}
.tier::before{content:"";position:absolute;left:0;right:0;top:-12px;height:28px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#fff,var(--frost,#fff0f5) 60%,rgba(0,0,0,.08) 100%),var(--frost,#fff0f5);box-shadow:0 3px 0 rgba(0,0,0,.08)}
.tier::after{content:"";position:absolute;left:4%;right:4%;top:8px;height:16px;background:radial-gradient(circle at 10% 0,var(--frost,#fff0f5) 0 7px,transparent 8px) 0 0/20% 100% repeat-x;opacity:.95}
.t1{bottom:8px;width:226px;height:66px}
.t2{bottom:66px;width:172px;height:58px}
.t3{bottom:118px;width:118px;height:50px}
.spr{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,#ff5fa2 0 1.5px,transparent 2px) 6px 9px/23px 11px,radial-gradient(circle,#5ee7ff 0 1.5px,transparent 2px) 14px 4px/27px 13px,radial-gradient(circle,#ffd35c 0 1.5px,transparent 2px) 3px 2px/19px 9px;opacity:0;transition:opacity .4s;mix-blend-mode:normal;pointer-events:none}
.cake.sprinkles .spr{opacity:.9}
.candle{position:absolute;bottom:160px;width:9px;height:30px;border-radius:4px;background:repeating-linear-gradient(135deg,#fff 0 4px,#ff5fa2 4px 8px);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.flame{position:absolute;left:50%;top:-20px;width:14px;height:22px;margin-left:-7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 75%,#fff9d6,#ffd35c 40%,#ff8a2b 75%,rgba(255,138,43,0) 100%);box-shadow:0 0 18px 6px rgba(255,211,92,.55);animation:flick .9s ease-in-out infinite alternate;transform-origin:50% 100%;transition:opacity .4s,transform .4s}
.flame::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(255,211,92,.45),transparent 70%)}
@keyframes flick{0%{transform:scaleY(1) rotate(-3deg)}100%{transform:scaleY(.82) rotate(3deg) translateY(2px)}}
.cake.out .flame{opacity:0;transform:scaleY(.1)}
.smoke{position:absolute;left:50%;top:-14px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:rgba(255,255,255,.7);opacity:0;pointer-events:none}
.cake.out .smoke{animation:smoke 1.6s ease-out forwards}
@keyframes smoke{0%{opacity:.8;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(4)}}
.badge{position:absolute;right:0;top:36px;padding:6px 10px;border-radius:999px;background:#0a0620;color:var(--gold);font:900 12px var(--b);border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.4);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wishLine{font:400 clamp(14px,4vw,18px)/1.25 var(--d);color:#fff;text-align:center;min-height:34px;display:grid;place-items:center;padding:0 4px}
.cakeBtns{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px}
/* ---------- wish ---------- */
#sWish .ui{text-align:center}
.sum{font:400 clamp(15px,4.2vw,19px)/1.35 var(--d);color:#fff;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px dashed var(--line)}
.sig{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;opacity:.9}
.sig img{height:30px;width:auto;filter:brightness(0) invert(1) opacity(.9)}
/* ---------- dock ---------- */
.dock{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(16,8,40,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2);z-index:30}
.dock button{width:64px;height:56px;border:0;border-radius:999px;background:transparent;color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;font:900 10.5px var(--b);letter-spacing:.04em}
.dock button i{font-style:normal;font-size:20px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.dock button[aria-current="step"]{background:linear-gradient(180deg,rgba(255,211,92,.35),rgba(255,211,92,.12));box-shadow:inset 0 0 0 1px var(--gold),0 0 18px rgba(255,211,92,.4);color:#fff}
.dock button:disabled{opacity:.4;cursor:default}
/* ---------- sheets ---------- */
.sheet{position:absolute;inset:0;z-index:40;display:grid;grid-template-rows:minmax(0,1fr);place-items:end center;padding:var(--top) 10px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(5,2,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet .panel{width:100%;max-width:560px;max-height:100%;display:flex;flex-direction:column;gap:10px;transform:translateY(24px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sheet.on .panel{transform:none}
.sheet .body{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;font-size:13.5px;line-height:1.45}
.sheet .body p{margin:0 0 8px}
.sheet .body ul,.sheet .body ol{margin:0 0 8px;padding-left:20px}
.sheet .body li{margin:0 0 3px}
.sheet .head{display:flex;align-items:center;gap:10px}
.sheet .head h2{flex:1}
.x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);font-size:18px;cursor:pointer;flex:none}
.note{padding:8px 10px;border-radius:12px;background:rgba(255,211,92,.1);border:1px dashed var(--line);font-size:12.5px}
/* ---------- responsive ---------- */
@media (min-width:900px){:root{--top:64px}.scene{justify-content:center;align-items:flex-end;padding-right:5vw}.ui{max-width:600px}#sArrive{align-items:center;padding-right:12px}#sArrive .ui{max-width:640px}.top .crest img{height:46px}.top .ttl b{font-size:22px}.pads{grid-template-columns:repeat(6,1fr)}.pad{min-height:70px}.agreeBox{max-height:38dvh}.cakeStage{min-height:200px}}
@media (min-width:700px) and (max-width:899px){.ui{max-width:620px}.pads{grid-template-columns:repeat(6,1fr)}.cakeStage{min-height:220px}}
@media (max-height:560px){.ui⟩.glass{overflow:auto;-webkit-overflow-scrolling:touch}.ui⟩.glass⟩*{flex:none}#gate .agreeBox{min-height:120px}#sArrive .hero{display:none}.cakeStage{min-height:120px}}
@media (orientation:landscape) and (max-height:500px){:root{--dock:68px;--top:50px}.dock{bottom:4px;transform:translateX(-50%) scale(.85);transform-origin:50% 100%}.top .crest img{height:34px}}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media print{body{position:static;overflow:visible;background:#fff;color:#000}#stage{display:none!important}#printCard{display:block!important;padding:20px;font:600 15px/1.5 Georgia,serif;color:#111}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.bg{transform:none}}
⟨/style⟩
⟨/head⟩
⟨body⟩
⟨div id="stage"⟩
⟨div class="bgs" aria-hidden="true"⟩
⟨div class="bg" id="bgArrive" style="background-image:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/bacci-birthday-mix-golden-gateway.png?v=1792914204&width=1024);background-position:50% 40%"⟩⟨video muted playsinline loop preload="none" data-src="https://baccikid.b-cdn.net/01%20Background%20Cinamatic%20Location%20Scenes/A%20hyper-realistic%2C%20award-winning%20cinematic%20masterpiece%20video%20featuring%20the%20characters%20from%20the%20image_%20a%20boy%20in%20a%20leopard-print%20superhero%20suit%20with%20a%20cape%2C%20a%20spotted%20leopard%20cub%2C%20and%20a%20white%20Maine%20Coon%20cat.%20They%20(2).mp4"⟩⟨/video⟩⟨/div⟩
⟨div class="bg" id="bgMix" style="background-image:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/bacci-birthday-mix-golden-street.jpg?v=1792914203&width=1600);background-position:12% 36%"⟩⟨video muted playsinline loop preload="none" data-src="https://baccikid.b-cdn.net/01%20Background%20Cinamatic%20Location%20Scenes/A%20hyper-realistic%2C%20award-winning%20cinematic%20masterpiece%20video.%20The%20exact%20characters%20from%20the%20reference%20image%E2%80%94the%20boy%20in%20the%20leopard-print%20superhero%20suit%20with%20cape%20and%20mask%2C%20the%20spotted%20leopard%20cub%20with%20big%20blue%20%20(1).mp4"⟩⟨/video⟩⟨/div⟩
⟨div class="bg" id="bgCake" style="background-position:50% 30%"⟩⟨video muted playsinline loop preload="none" data-src="https://baccikid.b-cdn.net/01%20Background%20Cinamatic%20Location%20Scenes/A%20hyper-realistic%2C%20cinematic%20wide-shot%20video%20bringing%20the%20Solar%20Bloom%20Innovation%20Garden%20to%20life.%20The%20camera%20sweeps%20through%20the%20enchanted%2C%20futuristic%20garden%20with%2016_9%20widescreen%20framing%2C%20blending%20golden%20hour%20war%20(1).mp4"⟩⟨/video⟩⟨/div⟩
⟨div class="bg" id="bgWish" style="background-position:50% 40%"⟩⟨video muted playsinline loop preload="none" data-src="https://baccikid.b-cdn.net/01%20Background%20Cinamatic%20Location%20Scenes/Absolutely%20breathtaking%20Oscar-winning%20cinematic%20masterpiece%20in%20ultra-pristine%2016_9%20widescreen.%20Epic%20transformation%20sequence%20in%20the%20Floating%20Cloud%20Kingdom%20Atrium%20with%20maximum%20photorealistic%20fidelity%20and%20zero%20pixelat.mp4"⟩⟨/video⟩⟨/div⟩
⟨div class="rays"⟩⟨/div⟩
⟨/div⟩
⟨canvas id="fx" aria-hidden="true"⟩⟨/canvas⟩
⟨header class="top"⟩
⟨a class="crest" href="https://baccikid.com/pages/kpot-main-hub" aria-label="Bacci Kid home"⟩⟨img src="https://cdn.shopify.com/s/files/1/0500/7307/5871/files/Bacci-Atelier-Gold-Crest.png?width=160" alt=""⟩⟨/a⟩
⟨div class="ttl"⟩⟨b⟩Birthday Mix and Cake⟨/b⟩⟨small⟩Bacci Kid · free play⟨/small⟩⟨/div⟩
⟨button class="icon" id="cineBtn" type="button" aria-pressed="false" aria-label="Cinema backdrops on or off" title="Cinema backdrops"⟩🎬⟨/button⟩
⟨button class="icon" id="sndBtn" type="button" aria-pressed="true" aria-label="Bacci sounds on or off"⟩🔊⟨/button⟩
⟨/header⟩
⟨!-- ===== ARRIVAL + MUSIC AGREEMENT ===== --⟩
⟨section class="scene on" id="sArrive" aria-label="Welcome and music agreement"⟩
⟨div class="chr" style="--d:2.4;width:min(34vw,170px);left:2%;bottom:46%"⟩⟨img src="https://cdn.shopify.com/s/files/1/0500/7307/5871/files/bacci-birthday-mix-bacci-hero.png?v=1792914178&width=600" alt=""⟩⟨/div⟩
⟨div class="chr" style="--d:1.6;width:min(22vw,120px);right:3%;bottom:44%"⟩⟨img src="https://cdn.shopify.com/s/files/1/0500/7307/5871/files/bacci-birthday-mix-spotted-kitten.png?v=1792914206&width=500" alt="" style="animation-delay:-2s"⟩⟨/div⟩
⟨div class="ui"⟩
⟨div class="hero"⟩
⟨img class="crestBig" src="https://cdn.shopify.com/s/files/1/0500/7307/5871/files/Bacci-Atelier-Gold-Crest.png?width=300&v=1792914205&c=100" alt=""⟩
⟨h1⟩Bacci's ⟨span class="g"⟩Birthday Mix⟨/span⟩ and Cake⟨/h1⟩
⟨p class="sub"⟩Make your own birthday music, design your dream cake, then make a wish with DandiWish.⟨/p⟩
⟨/div⟩
⟨div class="glass" id="gate"⟩
⟨div class="eyebrow"⟩Before you play · the music agreement⟨/div⟩
⟨h2 style="margin:0"⟩This music belongs to Bacci Kid⟨/h2⟩
⟨div class="agreeBox" id="agreeText"⟩
⟨p⟩Every song, recording, voice, lyric and sound on this page is the original work of Dr. Jamie Karia and Bacci Kid. Bacci Kid is letting you play with it here, for fun, at your table. A grown-up reads this with you, then you both tap agree.⟨/p⟩
⟨p⟩⟨b⟩Ownership.⟨/b⟩ All music, songs, sound recordings, lyrics, vocals, sounds, artwork, characters, names, words and code on this page are original works owned by Dr. Jamie Karia and Bacci Kid. Copyright 2026 Bacci Kid. All rights reserved. Nothing here is in the public domain and nothing is licensed for reuse.⟨/p⟩
⟨p⟩⟨b⟩What you may do.⟨/b⟩ You may listen to and play with this music on this page, on your own device, for personal, family, non-commercial fun. A mix you make here is a pattern of taps saved onl