:root { color-scheme: dark; --ink: #06151b; --text: #b6cfc9; --accent: #a2ecce; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); }
body { color: var(--text); font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; }
::selection { background: #a2ecce; color: var(--ink); }
main { width: 100%; height: 100%; position: relative; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
canvas:focus-visible { outline: 1px solid var(--accent); outline-offset: -8px; }
footer { position: absolute; inset: auto 0 0; padding: 22px 28px; padding-bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
#hint { position: absolute; left: 50%; transform: translateX(-50%); letter-spacing: .035em; transition: opacity 1.8s ease-out; white-space: nowrap; }
#hint.dismissed { opacity: 0; }
button { pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); background: #06151bcc; border: 1px solid #789a954d; border-radius: 50%; cursor: pointer; transition: color .2s, border-color .2s; }
button:hover { color: var(--accent); border-color: #a2ecce99; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fallback { position: absolute; left: 24px; top: 40%; max-width: 32ch; font-size: 18px; }
@media (max-width: 600px) { footer { padding-left: 20px; padding-right: 20px; } #hint { left: 20px; bottom: 79px; transform: none; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #hint, button { transition: none; } }