:root{color-scheme:light;background:#f5f3ee;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;overscroll-behavior:none}
main{display:grid;place-items:center;padding:48px}
button{position:relative;width:min(65vw,380px);aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(ellipse at 34% 22%,#ff7564 0%,#f64a3b 24%,#e12b22 58%,#be1815 100%);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;transform:scaleY(.91);box-shadow:inset 0 3px 3px #ffd2bc99,inset 3px 0 7px #ff9a7b55,inset -5px -9px 15px #840c0b66,0 2px 0 #b3241c,0 6px 0 #b0221b,0 12px 0 #a01a15,0 18px 0 #8e1411,0 24px 0 #78120f,0 26px 2px #540b0b,0 31px 0 8px #c4beb5,0 35px 0 8px #a9a39a,0 38px 3px 9px #fdfaf5,0 46px 22px 3px #4d211c30,0 66px 58px -5px #4d211c38;transition:transform .12s,box-shadow .12s}
button:before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid #ff9b7e55;box-shadow:inset 0 1px 1px #ffc5ac44;pointer-events:none}
button:active,button.pressed{transform:translateY(18px) scaleY(.91);box-shadow:inset 0 2px 3px #ffd2bc77,inset -4px -6px 12px #840c0b66,0 2px 0 #a01a15,0 6px 0 #78120f,0 8px 2px #540b0b,0 13px 0 8px #c4beb5,0 17px 0 8px #a9a39a,0 20px 3px 9px #fdfaf5,0 28px 22px 3px #4d211c30,0 40px 40px -5px #4d211c30}
button:focus-visible{outline:3px solid #1e1e1e;outline-offset:24px}
#status{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));margin:0;padding:0 20px;text-align:center;color:#706963;font-size:14px}
@media(prefers-reduced-motion:reduce){button{transition:none}}