:root { --paper: #ebeae6; --ink: #111; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --paper: #161718; --ink: #e8e6e1; color-scheme: dark; } }
html, body { margin: 0; height: 100%; background: var(--paper); overscroll-behavior: none; }
.field { min-height: 100%; display: grid; place-items: center; }
.k { width: 88px; height: 88px; margin-top: -9vh; padding: 0; border: 3px solid var(--ink); background: var(--ink);
     border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: opacity .2s; }
.k.new { background: transparent; }
.k.wait { opacity: .35; }
.k.no { background: transparent; border-style: dashed; }
.k:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .k { transition: none; } }