:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #000; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); }
main { width: 100%; text-align: center; }
.housing { width: min(78vw, 330px, 64svh); aspect-ratio: 1; margin: 0 auto 42px; padding: 14px; border-radius: 50%; background: linear-gradient(145deg, #3a3a3a, #101010 55%, #262626); box-shadow: 0 2px 2px #7776 inset, 0 -2px 2px #000 inset, 0 16px 40px #000; }
button { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #ff7365; border-radius: 50%; color: #fff; background: radial-gradient(ellipse at 42% 12%, #ff7565 0%, #f33b2d 30%, #df1d16 64%, #aa0b09 100%); box-shadow: 0 5px 7px #ffbbb873 inset, 0 -7px 10px #75050088 inset, 0 9px 0 #790b08, 0 13px 10px #000b; transform: translateY(-5px); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: transform 65ms ease, box-shadow 65ms ease, filter 65ms ease; }
button span { font: 750 clamp(25px, 7vw, 38px)/1.12 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.035em; text-shadow: 0 2px 3px #81060080; pointer-events: none; }
button[data-held] { transform: translateY(3px); filter: brightness(.92); box-shadow: 0 3px 9px #79050066 inset, 0 -2px 5px #75050088 inset, 0 1px 0 #790b08, 0 3px 5px #000b; }
button:focus-visible { outline: 3px solid white; outline-offset: 9px; }
p { margin: 0; font-size: 14px; letter-spacing: .035em; color: #929292; }
#status { min-height: 1.5em; margin-top: 14px; font-size: 12px; color: #ccc; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }