#surprise:has(.coco-experience){background:#171b43;color:#fff1ce;border-color:#f4bd5a;box-shadow:6px 7px 0 #cb3b8d,0 20px 80px #070b2faa}
#surprise:has(.coco-experience) #surprise-title{color:#ffe491}#surprise:has(.coco-experience) #day-label{color:#f5aecc}
.coco-experience .scene-subtitle,.coco-experience .scene-status{color:#ded7e8}.coco-experience .scene-hud{background:#362958;color:#fff0ba}
.coco-experience{position:relative}
.coco-experience .play-scene{max-width:min(100%,calc(86dvh * .6));aspect-ratio:3/5;background-size:cover;border:0;border-radius:14px;box-shadow:none}
#surprise:has(.coco-experience){padding:0;border:1px solid #d7a665;background:#101b33;box-shadow:0 16px 70px #050f26cc;max-width:490px}
#surprise:has(.coco-experience):before,#surprise:has(.coco-experience):after{display:none}
#surprise:has(.coco-experience) :is(#surprise-title,#day-label){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.coco-experience .scene-subtitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
#surprise .coco-experience .scene-hud{position:absolute;top:5%;left:50%;translate:-50% 0;width:max-content;max-width:70%;z-index:2;background:#0c142bba;color:#ffe3a5;border:1px solid #d3a15e55;border-radius:20px;padding:7px 10px;font-size:11px;text-align:center}
.coco-experience .scene-actions{justify-content:center;margin:6px}.coco-experience .scene-ending{padding:16px;margin:0}
.dance-banner{position:absolute;top:15%;left:6%;right:6%;margin:0;color:#ffe796;text-shadow:0 2px 8px #041027;text-align:center;font:clamp(19px,4.8vw,27px)/1.15 'Lilita One',sans-serif;pointer-events:none}.dance-banner:before{content:attr(data-phase);display:block;font:700 10px/1.5 system-ui,sans-serif;letter-spacing:.2em;color:#f3daef;margin-bottom:5px}
.dance-progress{position:absolute;top:26%;left:10%;right:10%;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.dance-progress i{width:8px;height:8px;border-radius:50%;background:#777194}.dance-progress i.is-done{background:#ffcf70;box-shadow:0 0 5px #e8a43c77}
.dance-pads{position:absolute;left:4%;right:4%;bottom:3%;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.dance-pad{min-width:48px;min-height:56px;aspect-ratio:1;border:2px solid var(--pad);border-radius:18px;background:#282746;color:var(--pad);font:38px/1 'Lilita One',sans-serif;box-shadow:0 4px #080d26;padding:0;touch-action:manipulation;--pad:#71d4df}.dance-pad:nth-child(2){--pad:#f3a8cf}.dance-pad:nth-child(3){--pad:#ffe38a}.dance-pad:nth-child(4){--pad:#b9de8e}.dance-pad:disabled{opacity:1}.dance-pad.is-lit{background:var(--pad);color:#182046;box-shadow:0 0 18px #fff3b955,0 2px #080d26}.dance-pad:focus-visible{outline:3px solid white;outline-offset:3px}
.dance-timer{position:absolute;top:30%;left:22%;width:56%;height:6px;accent-color:#ffe28b}.dance-timer[hidden]{display:none}
.coco-experience[data-feedback='error'] .play-scene{border-color:#ff879c}.coco-experience[data-feedback='error'] .dance-banner{color:#ffb5bb}.coco-experience[data-feedback='success'] .dance-banner{color:#cbed9c}
.coco-experience .scene-ending{border-color:#d6a063}.coco-experience .scene-ending h3,.coco-experience .scene-ending p{color:#fff0c6}.coco-experience .scene-actions .scene-pause{color:#ffe6ad;background:#312853;border-color:#b593b5}
.coco-experience .dance-replay{display:block;min-height:48px;margin:14px auto 0;padding:8px 18px;border:1px solid #e8ac79;border-radius:24px;background:#5e2767;color:#fff3d4;font:700 15px system-ui,sans-serif;box-shadow:0 3px #371540;cursor:pointer}
.coco-experience .dance-replay[hidden]{display:none}
.coco-experience .scene-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}