:root{--ink:#17304b;--night:#102450;--teal:#39c9b8;--gold:#ffe36f;--coral:#ff7189;--paper:#fbfaf2}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:1080px;min-height:100vh;overflow:hidden;background:#e7eee9;color:var(--ink);font-family:ui-rounded,"Avenir Next",system-ui,sans-serif}button{font:inherit}button:focus-visible{outline:4px solid #ffe36f;outline-offset:4px}.shell{width:min(1280px,calc(100vw - 54px));height:min(824px,calc(100vh - 34px));margin:17px auto;display:grid;grid-template-rows:50px minmax(0,1fr) 58px 145px;gap:12px}.topline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px}.topline>div:first-child{display:flex;flex-direction:column}.topline span,.decision span{font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:#32706f}.topline strong{font-size:16px}.topline button{justify-self:end;min-height:44px;padding:0 16px;border:0;border-radius:14px;background:#dce9e2;color:var(--ink);font-weight:850;cursor:pointer}.pips{display:flex;gap:8px}.pips i{width:38px;height:7px;border-radius:99px;background:#c7d6ce}.pips i.on{background:#eabf38}.pips i.done{background:#259e8e}.meadow{position:relative;overflow:hidden;border-radius:34px;background:radial-gradient(circle at 50% 18%,#694b76 0,transparent 23%),linear-gradient(#102450 0 57%,#164a4f 58%,#0d3437);box-shadow:0 20px 55px rgba(16,36,80,.22);isolation:isolate}.moon{position:absolute;right:11%;top:9%;width:70px;height:70px;border-radius:50%;background:#fff0a1;box-shadow:0 0 38px #ffe888}.moon::after{content:"";position:absolute;left:18px;top:-5px;width:68px;height:68px;border-radius:50%;background:#203060}.tree{position:absolute;bottom:-90px;width:290px;height:430px;border-radius:48% 48% 0 0;background:#0a2b36}.tree::before,.tree::after{content:"";position:absolute;border-radius:50%;background:#144a49}.tree::before{width:260px;height:190px;top:-35px}.tree::after{width:220px;height:190px;top:80px}.tree.left{left:-145px;transform:rotate(8deg)}.tree.right{right:-145px;transform:rotate(-8deg)}.flowers{position:absolute;inset:auto 0 0;height:90px;background:radial-gradient(circle at 12% 62%,#ff7189 0 7px,transparent 8px),radial-gradient(circle at 78% 78%,#ffe36f 0 7px,transparent 8px),radial-gradient(circle at 56% 68%,#60d9bb 0 6px,transparent 7px);background-size:130px 80px}.owl{position:absolute;left:4%;bottom:18%;z-index:4;width:92px;height:80px;display:grid;place-items:center;border-radius:48% 48% 42% 42%;background:#f1dba1;color:#17304b;font-size:23px;font-weight:900;box-shadow:0 10px 20px rgba(0,0,0,.2)}.pitch-haze{position:absolute;left:12%;right:8%;top:10%;bottom:12%;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 14.28%);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.ribbons{position:absolute;left:12%;right:8%;top:10%;bottom:12%;width:80%;height:78%;overflow:visible}.ribbons path{fill:none;stroke-linecap:round;stroke-linejoin:round}.melody{stroke:var(--gold);stroke-width:12;filter:drop-shadow(0 0 10px rgba(255,227,111,.8));transition:d .12s ease-out}.ghost{stroke:rgba(255,255,255,.45);stroke-width:7;stroke-dasharray:14 16}.source{stroke:rgba(255,113,137,.65);stroke-width:6;stroke-dasharray:6 13}.ribbons circle{fill:#fff6a8;stroke:#ffb84f;stroke-width:5;filter:drop-shadow(0 0 12px #ffe36f);opacity:0}.ribbons.playing circle{opacity:1}.notes{position:absolute;left:12%;right:8%;top:10%;bottom:12%;z-index:5}.firefly{position:absolute;width:74px;height:74px;margin:-37px 0 0 -37px;border:0;border-radius:50%;background:radial-gradient(circle,#fff8bd 0 28%,#f2be3e 29% 45%,#477857 46% 67%,#1a4d45 68%);box-shadow:0 0 25px 9px rgba(255,224,99,.35);cursor:grab;touch-action:none;transition:left .12s,top .12s,transform .12s}.firefly::before,.firefly::after{content:"";position:absolute;top:15px;width:28px;height:35px;border-radius:70% 30%;background:rgba(217,255,243,.72);border:1px solid rgba(255,255,255,.65)}.firefly::before{left:-14px;transform:rotate(-25deg)}.firefly::after{right:-14px;transform:scaleX(-1) rotate(-25deg)}.firefly:hover,.firefly:focus-visible{transform:scale(1.1)}.firefly.is-playing{transform:scale(1.18);box-shadow:0 0 36px 15px rgba(255,224,99,.72)}.firefly span{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);color:#17304b;font-size:13px;font-weight:1000}.moonbeam{position:absolute;z-index:4;top:0;bottom:0;width:90px;opacity:0;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,244,174,.18),transparent);pointer-events:none}.meadow.playing .moonbeam{opacity:1;animation:beam 2.4s linear}.playbar{display:flex;align-items:center;justify-content:center;gap:25px}.play{min-height:52px;padding:0 26px;border:0;border-radius:17px;background:#186f70;color:#fff;box-shadow:0 6px 0 #0c4d52;font-weight:950;cursor:pointer}.legend{display:flex;align-items:center;gap:10px;color:#58706e;font-size:13px;font-weight:800}.legend i{width:34px;height:7px;border-radius:99px;background:var(--gold);box-shadow:0 0 10px var(--gold)}.decision{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:30px;padding:20px 28px;border-radius:27px;background:var(--paper);box-shadow:0 12px 32px rgba(23,58,48,.11)}.decision h1{margin:4px 0 3px;font-size:27px;line-height:1.08;letter-spacing:-.03em}.decision p{margin:0;color:#637572;font-size:14px;font-weight:650}.actions{display:flex;justify-content:flex-end;gap:10px}.actions button,.finale button{min-height:56px;padding:12px 20px;border:0;border-radius:17px;background:#dfeae3;color:var(--ink);font-weight:900;cursor:pointer}.actions .primary,.finale button{background:#187d76;color:#fff;box-shadow:0 6px 0 #0b5a55}.actions button:hover{transform:translateY(-2px)}.finale{position:absolute;inset:17px 27px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:34px;background:rgba(13,29,74,.97);color:#fff}.finale span{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#8be5d4}.finale strong{margin:12px 0 25px;font-size:42px}.is-pointed{animation:point .7s ease-out 2}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes beam{from{left:12%}to{left:92%}}@keyframes point{50%{filter:brightness(1.5);transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}