body.keytsumo-game { --accent: #78966c; --bg: #f8faf6; min-width: 0; min-height: 100svh; display: flex; flex-direction: column; }
.keytsumo-game .game-hero { background: linear-gradient(120deg, #f7faf3, #e7efe2, #f4f8ee); }
.keytsumo-game .hero-content, .keytsumo-game .game-footer a { position: relative; z-index: 2; }
.keytsumo-game h1 { color: #394c36; }
#pile { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#pile canvas { display: block; }
.keytsumo-game:has(#pile[data-count]) { cursor: grab; }
.keytsumo-game.is-orbiting { cursor: grabbing; }
.typing-panel { position: relative; z-index: 2; flex: 1; width: min(620px, calc(100% - 36px)); margin: 0 auto; padding: clamp(24px, 8svh, 72px) 0 24px; }
#typing { width: 100%; padding: 16px 20px; border: 1px solid #c7cbc0; border-radius: 7px; background: #fffdf9f5; color: #394535; font: 500 21px ui-monospace, Consolas, monospace; caret-color: transparent; }
#typing:focus { outline: 2px solid #8caa7480; outline-offset: 2px; }
#typing.invalid { border-color: #c98c78; background: #fff0ec; color: #a25741; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }