:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #edf5f3; background: #070c15; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }
[hidden] { display: none !important; }
#canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#welcome, #rotate { position: fixed; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 70% 30%, #19283a, #070c15 75%); overflow-y: auto; }
#rotate { z-index: 5; }
.card { width: min(620px, 100%); padding: 28px; border: 1px solid #334554; border-radius: 12px; background: #0d1721; }
.eyebrow { font: 11px ui-monospace, monospace; letter-spacing: 2px; color: #7af5cf; }
h1 { margin: 14px 0; font-size: clamp(32px, 7vw, 58px); letter-spacing: -2px; }
h1 span { color: #7af5cf; }
h2 { font-size: 28px; }
p { line-height: 1.6; color: #a9bdc9; }
button { min-height: 44px; padding: 12px 20px; border: 1px solid #7af5cf; border-radius: 7px; background: #7af5cf; color: #09251f; font: 700 15px system-ui, sans-serif; cursor: pointer; }
button:focus-visible { outline: 3px solid #ad9cff; outline-offset: 3px; }
button:disabled { opacity: .5; cursor: default; }
#fullscreen { position: fixed; z-index: 2; bottom: max(5px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right)); min-height: 30px; padding: 5px 10px; font-size: 11px; background: #0d1721df; color: #c0d7d1; border-color: #344b54; }
progress { display: block; width: 100%; margin-top: 20px; accent-color: #ad9cff; }
.hint { font-size: 12px; color: #8c9ea9; }
#storage-warning { position: fixed; z-index: 3; bottom: 30px; left: 12px; right: 12px; padding: 10px; background: #3f2a17; color: #ffdab2; font-size: 13px; text-align: center; }
noscript { position: fixed; inset: 20%; padding: 30px; background: #0d1721; }
@media (max-height: 500px) and (orientation: landscape) { .card { padding: 18px 24px; } h1 { font-size: 36px; margin: 8px 0; } .hint { margin-bottom: 0; } }