:root { color-scheme: dark; background: #172629; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body { display: grid; place-items: center; min-height: 100vh; font-family: system-ui, sans-serif; background: radial-gradient(circle at 50% 20%, #35564e, #132023 68%); }
main { width: min(100vw, 432px); text-align: center; }
canvas { display: block; width: 100%; aspect-ratio: 432 / 960; background: #a9d970; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.5); touch-action: none; }
p { margin: 10px 8px 18px; color: #cce1d8; font-size: 13px; }
@media (max-width: 500px) { body { display: block; } main { width: 100vw; } canvas { width: 100vw; height: 100vh; border-radius: 0; } p { display: none; } }