:root{color:#f3e8d3;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f1013;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background-color:#0f1013;min-height:100vh}button{font:inherit}.app{background:radial-gradient(circle at 50% 12%,#ffffff14,#0000 18%),radial-gradient(circle at 50% 100%,#ff6f0014,#0000 26%),linear-gradient(#16181d 0%,#0f1013 48%,#07080a 100%);place-items:center;min-height:100vh;display:grid}.stage{place-items:center;padding:8rem 2rem 4rem;display:grid;position:relative}.sound-button{aspect-ratio:1/.78;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:min(78vw,360px);padding:0;transition:transform .18s,filter .18s;position:relative}.button-shadow,.button-base,.button-rim,.button-top,.button-glow,.button-gloss,.button-speckle{pointer-events:none;display:block;position:absolute}.button-shadow{filter:blur(10px);background:radial-gradient(circle,#552c1066 0%,#552c1000 72%);border-radius:50%;height:20%;inset:auto 8% 2%;transform:scaleY(.9)}.button-base{background:radial-gradient(circle at 50% 10%,#fffffff2,#0000 30%),radial-gradient(circle at 50% 90%,#8e8e8e7a,#0000 55%),linear-gradient(#fbfbfb 0%,#d6d6d6 48%,#c7c7c7 68%,#f6f6f6 100%);border-radius:50%;inset:44% 2% 0;box-shadow:inset 0 2px 2px #ffffffe6,inset 0 -10px 16px #7c7c7c4d,0 18px 24px #62452e29}.button-rim{background:linear-gradient(#ffffffe6,#e2e2e2b3 26%,#bfbfbfeb 68%,#f7f7f7f0),linear-gradient(90deg,#ffffffa6,#c1c1c1d9,#ffffffa6);border-radius:50%;inset:37% 10% 9%;box-shadow:inset 0 3px 4px #fffffff2,inset 0 -6px 10px #6161613d}.button-top{background:radial-gradient(circle at 50% 120%,#580000cc,#0000 34%),radial-gradient(circle at 26% 16%,#ff858580,#0000 18%),radial-gradient(circle at 80% 25%,#ffa6a638,#0000 22%),linear-gradient(#ff4b42 0%,#e31717 36%,#b90f12 72%,#7b0a0c 100%);border-radius:50%;transition:transform .12s,box-shadow .12s,filter .12s;inset:10% 15% 17%;overflow:hidden;transform:translateY(0);box-shadow:inset -18px -24px 28px #5c00006b,inset 14px 16px 18px #ffa0a02e,inset 0 -3px #57000073,0 16px 12px #6800003d}.button-top:before{content:"";opacity:.45;background:linear-gradient(#ffffff4d,#fff0);border-radius:50%;height:45%;position:absolute;inset:1.5% 2.5% auto}.button-glow{filter:blur(2px);opacity:.95;background:radial-gradient(at 28% 38%,#fffffffa 0%,#ffe5e5d1 26%,#fff0 56%),radial-gradient(at 84% 52%,#ffddddd1 0%,#fff0 52%);border-radius:50%;inset:8% 16% 48% 14%;transform:rotate(-9deg)}.button-gloss{mix-blend-mode:screen;background:radial-gradient(at 70% 42%,#ffffff52,#fff0 36%),radial-gradient(at 40% 92%,#4b000057,#4b000000 36%);border-radius:50%;inset:14% 8% 24%}.button-speckle{opacity:.3;background-image:radial-gradient(#ffffff14 .7px,#0000 .7px),radial-gradient(#64000014 .8px,#0000 .8px);background-position:0 0,8px 10px;background-size:14px 14px,18px 18px;border-radius:50%;inset:0}.sound-button:hover{filter:saturate(1.03);transform:translateY(-4px)scale(1.015)}.sound-button:hover .button-top{box-shadow:inset -18px -24px 28px #5c00006b,inset 14px 16px 18px #ffa0a02e,inset 0 -3px #57000073,0 22px 16px #68000047}.sound-button:active{transform:translateY(2px)scale(.995)}.sound-button:active .button-top{transform:translateY(10px);box-shadow:inset -16px -22px 26px #5c00006b,inset 12px 14px 16px #ffa0a029,inset 0 -2px #5700006b,0 7px 6px #68000033}.sound-button:focus-visible{outline-offset:8px;outline:4px solid #fffaf2fa}.comic-bubble{z-index:3;color:#130301;text-transform:uppercase;letter-spacing:.12em;text-shadow:-2px -2px #fff,2px 2px #fff,5px 5px #5f0000;white-space:nowrap;isolation:isolate;background:radial-gradient(circle at 30% 26%,#fffffff2,#fff7daf2 38%,#ffe2a3fa 100%);border:5px solid #120603;border-radius:24% 33% 22% 31%/22% 28% 26% 30%;padding:1.1rem 1.9rem 1rem;font-size:clamp(1.7rem,4.8vw,3rem);font-style:italic;font-weight:900;animation:1.8s forwards burst;position:absolute;bottom:calc(100% + .8rem);transform:rotate(-9deg);box-shadow:0 0 0 4px #ffffff3d,12px 12px #120603,0 22px 32px #00000057}.comic-bubble:before,.comic-bubble:after{content:"";z-index:-2;clip-path:polygon(50% 0%,57% 18%,75% 4%,71% 24%,94% 16%,79% 36%,100% 39%,80% 48%,98% 62%,76% 63%,88% 84%,68% 74%,68% 100%,51% 80%,36% 100%,34% 77%,14% 89%,23% 67%,0% 72%,18% 53%,2% 42%,23% 35%,7% 17%,29% 22%,25% 1%,43% 18%);background:conic-gradient(#fff 0deg 18deg,#0000 18deg 28deg,#fff 28deg 46deg,#0000 46deg 58deg,#fff 58deg 78deg,#0000 78deg 92deg,#fff 92deg 112deg,#0000 112deg 124deg,#fff 124deg 146deg,#0000 146deg 158deg,#fff 158deg 180deg,#0000 180deg 192deg,#fff 192deg 214deg,#0000 214deg 226deg,#fff 226deg 248deg,#0000 248deg 260deg,#fff 260deg 282deg,#0000 282deg 294deg,#fff 294deg 316deg,#0000 316deg 328deg,#fff 328deg 348deg,#0000 348deg 360deg);position:absolute;inset:-16px}.comic-bubble:before{filter:drop-shadow(0 0 #120603)drop-shadow(8px 10px #120603)}.comic-bubble:after{z-index:-3;clip-path:none;filter:blur(6px);background:radial-gradient(circle,#ffffff75 0%,#ffffff2e 32%,#fff0 68%);inset:-38px}@keyframes burst{0%{opacity:0;transform:translateY(24px)scale(.55)rotate(-16deg)}18%{opacity:1;transform:translateY(-4px)scale(1.16)rotate(-4deg)}38%{transform:translateY(1px)scale(.98)rotate(-11deg)}78%{opacity:1;transform:translateY(-6px)scale(1.03)rotate(-8deg)}to{opacity:0;transform:translateY(-22px)scale(.9)rotate(-4deg)}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}