@font-face { font-family: Oxanium; src: url('/oxanium.ttf') format('truetype'); font-weight: 800; font-display: swap; }
:root { color-scheme: dark; background: #080916; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: radial-gradient(ellipse at 50% 40%, #241a3a 0, #100d26 48%, #080916 100%); display: grid; place-items: center; }
#stage { position: relative; display: flex; flex-direction: column; align-items: center; outline: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
#screen { position: relative; }
#stage:focus-visible #play { outline: 2px solid #83dcec; outline-offset: 4px; }
canvas { display: block; image-rendering: pixelated; }
#play { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7); }
#mute { position: absolute; left: 0; bottom: 0; appearance: none; background: none; border: 0; padding: 0; margin: 0; color: transparent; font-size: 0; outline: none; cursor: pointer; }
#stage:focus-visible #mute, #mute:focus-visible { outline: 2px solid #83dcec; outline-offset: -2px; }
#pad { position: relative; }
#pad[hidden] { display: none; }
#controls { position: absolute; inset: 0; display: flex; }
#controls button { flex: 1; appearance: none; background: none; border: 0; padding: 0; margin: 0; color: transparent; font-size: 0; outline: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
/* The wordmark above the screen, as it always was: Oxanium, skewed, two hard shadows. */
h1 { margin: 0 0 14px; font-family: Oxanium, sans-serif; font-size: clamp(36px, 5.4vw, 84px); font-weight: 800; letter-spacing: -0.065em; line-height: 1; color: #e7ded6; transform: skew(-7deg); text-shadow: 3px 4px 0 #8c3242, 6px 8px 0 #20152e; user-select: none; }
/* The controls, one line under the screen. */
#keys { margin: 12px 0 0; font-family: Oxanium, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; line-height: 1.4; color: #a39dbd; text-align: center; max-width: 88ch; }
#fallback { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
#fallback[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: #dc4b44; color: #080916; }
/* Phones: wordmark, the picture, the controls line, then the pad at the bottom under the thumbs. */
@media (max-width: 699px) { #stage { height: 100%; height: 100svh; padding: calc(env(safe-area-inset-top) + 8px) 0 env(safe-area-inset-bottom); } h1 { margin-bottom: 8px; font-size: 9vw; } #play { box-shadow: none; } #keys { margin: 6px 0 0; font-size: 12px; } #pad { margin-top: auto; } }