html, body { margin: 0; height: 100%; overflow: hidden; background: #161433; }
body { font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: rgba(255, 236, 214, .72); -webkit-font-smoothing: antialiased; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.hud { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2; }
#gb { display: flex; align-items: center; gap: 6px; opacity: .55; transition: opacity .4s; }
#gb:hover, #gb:focus-within { opacity: 1; }
#word { width: 12.5em; background: rgba(10, 6, 20, .25); border: 0; border-bottom: 1px solid rgba(255, 236, 214, .35); color: #ffecd6; font: inherit; font-size: 16px; padding: 4px 6px; border-radius: 3px 3px 0 0; outline: none; }
#word::placeholder { color: rgba(255, 236, 214, .45); font-style: italic; }
#word:focus { border-bottom-color: rgba(255, 214, 170, .9); background: rgba(10, 6, 20, .4); }
button { background: none; border: 1px solid rgba(255, 236, 214, .3); color: rgba(255, 236, 214, .8); font: inherit; padding: 4px 9px; border-radius: 12px; cursor: pointer; }
button:hover, button:focus-visible { border-color: rgba(255, 214, 170, .9); color: #ffecd6; outline: none; }
button:disabled { opacity: .4; cursor: default; }
#meta { margin-top: 5px; font-size: 11px; opacity: .6; min-height: 1.4em; }
#status { margin-left: .6em; transition: opacity .6s; }
footer { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2; font-size: 11px; opacity: .42; pointer-events: none; letter-spacing: .02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ns { position: fixed; top: 40%; width: 100%; text-align: center; }
@media (max-width: 560px) {
  footer { left: 16px; right: auto; bottom: auto; top: max(12px, env(safe-area-inset-top)); }
  #word { width: 10.5em; }
}