.showing-choir{overflow:hidden}.showing-choir .birthday{visibility:hidden}
.choir-dialog{--face:clamp(25px,8vw,33px);width:min(100%,1080px);height:min(880px,100svh);max-width:100%;max-height:100svh;margin:auto;padding:max(14px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));border:0;background:transparent;color:#64434c;overflow:hidden;isolation:isolate}.choir-dialog::backdrop{background:#e5eadc}.choir-dialog:before{content:"";position:absolute;inset:7px;z-index:-2;background:#fffaf0;border:1px solid #aeb795;border-radius:28px 28px 10px 10px;box-shadow:0 18px 55px #56614525,inset 0 0 0 7px #f6f0e2,inset 0 0 0 8px #c8c4a8}.choir-dialog:after{content:"";position:absolute;inset:16px;z-index:-1;opacity:.34;background:url('assets/choir-botanical.svg') left top/130px auto no-repeat,url('assets/choir-botanical.svg') right bottom/120px auto no-repeat,radial-gradient(circle at 1px 1px,#8f7f6710 1px,transparent 1.5px) 0 0/9px 9px;border-radius:20px;pointer-events:none}.choir-dialog[open]{animation:choir-in .3s ease-out}@keyframes choir-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.choir-exit{position:absolute;top:max(20px,env(safe-area-inset-top));right:22px;z-index:8;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #b98b94;border-radius:50%;background:#fff8edf2;color:#714853;font:400 30px/1 "DM Sans",sans-serif;box-shadow:0 4px 12px #6c514529;cursor:pointer;transition:background .2s,transform .2s}.choir-exit:hover{background:#f3d8dc}.choir-exit:active{transform:scale(.95)}.choir-exit:focus-visible{outline:3px solid #8aa07a;outline-offset:2px}
.paper-stage{display:grid;grid-template-rows:76px minmax(0,1fr);gap:4px;width:min(100%,980px);height:calc(100% - 70px);margin:auto}.caption-area{display:grid;place-items:center;padding:4px 14px;text-align:center}.lyric{max-width:850px;margin:0;color:#704752;font:600 clamp(26px,7vw,40px)/1.02 "Cormorant Garamond",Georgia,serif;text-wrap:balance}
.choir-grid{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));align-items:end;justify-items:center;gap:1px 3px;min-height:0;padding:15px 10px 11px;background:radial-gradient(ellipse at 50% 15%,#f7f1e4 0 8%,transparent 42%),linear-gradient(180deg,#e1e9dc,#edf0e4 58%,#f1dddf);border:1px solid #b8a28b;border-radius:18px;box-shadow:0 10px 26px #5e5a3f1d,inset 0 0 0 6px #fff8ed,inset 0 0 0 7px #c9b49d;overflow:hidden}.choir-member{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;transform-origin:center bottom}.person{display:block;width:var(--face);height:var(--face);font-size:var(--face);line-height:1;text-align:center;white-space:nowrap;transform-origin:50% 88%;filter:drop-shadow(0 2px 2px #77514a24)}.apple-emoji{font-family:"Apple Color Emoji"}.system-emoji{font-family:"Segoe UI Emoji","Segoe UI Symbol",sans-serif}.choir-back .person{scale:.78;opacity:.86}.choir-middle .person{scale:.92}.choir-front .person{scale:1.08}
.hands{position:absolute;right:0;bottom:0;z-index:2;width:calc(var(--face)*.62);height:calc(var(--face)*.62);font-size:calc(var(--face)*.62);line-height:1;opacity:0;pointer-events:none}.clapping{position:absolute;right:0;bottom:4px;left:0;z-index:4;display:flex;justify-content:center;gap:2px;opacity:0;pointer-events:none}.clap-sprite{width:clamp(20px,6vw,34px);height:clamp(20px,6vw,34px);font-size:clamp(20px,6vw,34px);line-height:1}.choir-controls{position:relative;z-index:5;display:flex;justify-content:center;gap:10px;width:min(100%,980px);margin:7px auto 0}.choir-controls button{min-width:120px;min-height:48px;padding:9px 22px;border:1px solid #b77f8b;background:#fff8ed;border-radius:8px;color:#714853;font:600 12px "DM Sans",sans-serif;letter-spacing:.14em;box-shadow:0 3px 8px #825b3a12;transition:background .2s,transform .2s}.choir-controls button:hover{background:#f3d8dc}.choir-controls button:active{transform:translateY(1px) scale(.98)}.choir-controls button:focus-visible{outline:3px solid #8aa07a;outline-offset:2px}.choir-controls button:disabled{opacity:.5;cursor:default}
[data-phase=singing] .person,[data-phase=finale] .person{animation:sway var(--tempo) ease-in-out infinite;animation-delay:calc(var(--i)*-.027s)}@keyframes sway{0%,100%{transform:translateY(1px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(4deg)}}[data-phase=singing] .motion-1 .person,[data-phase=finale] .motion-1 .person{animation-name:nod}@keyframes nod{50%{transform:translateY(3px) scale(.96)}}[data-phase=singing] .motion-2 .person,[data-phase=finale] .motion-2 .person{animation-name:belt}@keyframes belt{50%{transform:translateY(-5px) scale(1.09)}}[data-phase=singing] .motion-3 .person,[data-phase=finale] .motion-3 .person{animation-name:lean}@keyframes lean{50%{transform:translateX(3px) rotate(6deg)}}[data-phase=singing] .motion-4 .person,[data-phase=finale] .motion-4 .person{animation-name:shimmy}@keyframes shimmy{25%{transform:rotate(5deg)}75%{transform:rotate(-5deg) translateY(-2px)}}[data-phase=singing] .motion-5 .person,[data-phase=finale] .motion-5 .person{animation-name:hop}@keyframes hop{50%{transform:translateY(-6px)}}
[data-phase=applause] .choir-member{animation:hop .42s infinite;animation-delay:calc(var(--i)*-.018s)}[data-phase=applause] .hands{opacity:1;animation:clap .16s alternate infinite}[data-phase=applause] .clapping{opacity:1;animation:clap-row .22s alternate infinite}@keyframes clap{to{transform:scale(1.2) rotate(9deg)}}@keyframes clap-row{to{transform:translateY(-3px)}}[data-phase=alone] .straggler .hands{opacity:1;animation:clap .24s alternate infinite}[data-phase=alone] .choir-member:not(.straggler){opacity:.55;transition:opacity .45s}
@media(min-width:700px){.choir-dialog{--face:clamp(36px,4vw,48px);padding:16px 24px 9px}.paper-stage{grid-template-rows:82px minmax(0,1fr);height:calc(100% - 67px)}.choir-grid{gap:2px 5px;padding:18px 24px 14px}.choir-controls button{min-width:150px;font-size:13px}}@media(max-height:700px){.choir-dialog{--face:clamp(22px,6.8vw,29px)}.paper-stage{grid-template-rows:62px minmax(0,1fr);height:calc(100% - 60px)}.lyric{font-size:25px}.choir-grid{padding:9px}.choir-controls{margin-top:4px}.choir-controls button{min-height:40px}}@media(prefers-reduced-motion:reduce){.choir-dialog,.choir-dialog *{animation:none!important;transition:none!important}}