:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px 16px}main{width:min(100%,390px);text-align:center}h1{font-size:2rem;margin:10px 0}p{line-height:1.5}.brand{color:#94a3b8;font-size:.85rem;letter-spacing:.05em}#grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));aspect-ratio:1;width:min(100%,320px,60svh);margin:28px auto 20px;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #475569;border-radius:12px;overflow:hidden;background:#172236}.cell{aspect-ratio:1 / 1;min-width:0;min-height:0;border:1px solid #475569;border-radius:0;background:transparent;padding:0;touch-action:none}.cell[aria-pressed=true]{background:#38bdf8;box-shadow:inset 0 0 0 3px #0e7490}.cell:focus-visible{outline:3px solid #fbbf24;outline-offset:-5px}button,a{font:inherit}button{color:inherit;border:1px solid #64748b;background:#1e293b;border-radius:8px;padding:10px 18px;min-height:44px;cursor:pointer}button:hover{background:#334155}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}.actions{display:flex;justify-content:center;gap:12px}.muted{color:#94a3b8;font-size:.8rem}#status{min-height:3em;color:#bae6fd}a{color:#7dd3fc}#session:not([hidden]){display:flex;gap:16px;align-items:center;justify-content:center}@media(max-width:350px){body{padding:16px}#grid{margin-top:20px}}

#grid.unlocked{animation:unlock .55s ease-out;border-color:#34d399;box-shadow:0 0 24px #34d39940}#grid.unlocked .cell[aria-pressed=true]{background:#34d399;box-shadow:inset 0 0 0 3px #047857}@keyframes unlock{50%{box-shadow:0 0 32px #34d39970}}@media(prefers-reduced-motion:reduce){#grid.unlocked{animation:none}}
