*{box-sizing:border-box}body{margin:0;background:#102a25;color:#fff3dc;font-family:Georgia,serif;min-height:100vh;display:flex;align-items:center;justify-content:center;gap:48px;padding:24px}.film{position:relative;width:min(100%,440px);aspect-ratio:9/16;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#38705b,#1e493d 65%,#173e35);box-shadow:0 25px 90px #0006;border-radius:22px;isolation:isolate;display:flex;flex-direction:column}.grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none;z-index:10}header,footer{display:flex;justify-content:space-between;align-items:center;letter-spacing:.18em;font:10px/1.5 Arial,sans-serif;padding:26px 28px}header i{color:#efacac;font-style:normal}.intro{text-align:center;padding:5px 22px 0;z-index:2}.eyebrow{font:8px Arial,sans-serif;letter-spacing:.18em;color:#d1c8a1}h1{font-size:clamp(32px,8vw,48px);line-height:1.04;font-weight:normal;margin:16px 0}#caption{font-size:14px;color:#e3dfc4;min-height:34px;margin:0}.stage{position:relative;flex:1;min-height:220px}.halo{position:absolute;inset:4% 9% 5%;border:1px solid #e5cf8d30;border-radius:50%}.halo:after{content:'✦';position:absolute;top:8%;right:4%;color:#ebd797;font-size:24px}#family{position:absolute;inset:0 7% 12%;display:flex;align-items:flex-end;justify-content:center;gap:0}.person{width:27%;height:96%;position:relative;transform-origin:50% 100%;filter:drop-shadow(0 7px 5px #112a2570);transition:transform 1s,filter 1s}.person svg{width:100%;height:100%;overflow:visible}.person[data-person=older]{height:86%}.person[data-person=younger]{height:76%}.person[data-person=son]{height:66%}.mouth{transform-box:fill-box;transform-origin:center;transform:scaleY(var(--mouth,.15))}.table{position:absolute;bottom:0;left:-10%;width:120%;height:18%;background:#bb875e;border-radius:50% 50% 0 0;box-shadow:0 -8px 0 #d8ac7e}#cake{position:absolute;width:80%;left:10%;bottom:-2%;height:76%;overflow:visible;opacity:0;transform:translateY(80px) scale(.7);transition:1.2s;z-index:3}.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .7s infinite alternate;transition:opacity .5s}.out .flame{opacity:0}.controls{text-align:center;padding:14px 26px 0;z-index:5;min-height:170px}#instruction{font:13px/1.5 Arial,sans-serif;margin:0 0 14px;min-height:20px}button{display:block;border:0;border-radius:100px;padding:15px 18px;width:100%;background:#efd5a1;color:#183e35;font:600 13px Arial,sans-serif;cursor:pointer;min-height:46px}button span{margin-left:15px}button:hover{filter:brightness(1.06)}button:focus-visible{outline:3px solid white;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}.secondary{margin-top:8px;background:#ffffff10;color:#fff3dc;border:1px solid #fff3dc50;font-size:12px}.quiet{background:none;color:#ddd4b9;font-size:11px;min-height:32px;padding:8px}.note{font:10px Arial,sans-serif;color:#c3c7a7;margin:12px 0 0}footer{padding:18px 26px;font-size:8px;margin-top:auto}.production{font:14px/1.6 Arial,sans-serif;color:#bccac1;max-width:290px}.production strong{color:#efd5a1}#blowMeter{height:5px;background:#ffffff30;border-radius:10px;overflow:hidden;margin-bottom:12px}#meterFill{height:100%;width:0;background:#efd5a1}.film[data-scene=sing] .person{animation:sway 1.5s infinite alternate ease-in-out}.film[data-scene=sing] .person:nth-child(even){animation-delay:-.7s}.film[data-scene=speech] .person[data-person=older]{transform:translateY(10%) scale(1.16);z-index:2;filter:drop-shadow(0 12px 9px #102a2570)}.film[data-scene=blow] #cake,.film[data-scene=cheer] #cake,.film[data-scene=end] #cake{opacity:1;transform:none}.film[data-scene=blow] #family,.film[data-scene=cheer] #family,.film[data-scene=end] #family{transform:translateY(-16%) scale(.85);transition:1s}.film[data-scene=cheer] .person{animation:jump .45s infinite alternate}.film[data-scene=cheer] .arm{transform:rotate(-30deg);transform-origin:center}.confetto{position:absolute;top:-40%;width:7px;height:13px;z-index:8;animation:fall 3s ease-in forwards}#confetti{position:absolute;inset:0;pointer-events:none;z-index:6}[hidden]{display:none!important}@keyframes flicker{to{transform:scale(.82,1.15) rotate(8deg)}}@keyframes sway{to{transform:rotate(3deg) translateY(-3px)}}@keyframes jump{to{transform:translateY(-13px) rotate(-3deg)}}@keyframes fall{to{transform:translate(25px,550px) rotate(540deg);opacity:0}}@media(max-width:760px){body{padding:0;display:block}.film{margin:auto;border-radius:0;width:min(100%,480px);min-height:100svh;aspect-ratio:9/16}.production{margin:24px auto;padding:0 22px;max-width:480px}.controls{min-height:170px}.stage{min-height:210px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}