:root {
  color-scheme: light; --bg: #f5f4f0; --key: rgba(120, 113, 98, .12); --key-press: rgba(120, 113, 98, .24); --text: #191816;
  --text-2: #6e6a63; --accent: #c25e3a; --accent-soft: rgba(194, 94, 58, .12); --danger: #d33b2e;
  --glow: rgba(194, 94, 58, .16);
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #0e0e0f; --key: rgba(235, 235, 245, .1); --key-press: rgba(235, 235, 245, .2); --text: #f4f4f5;
    --text-2: #a1a1aa; --accent: #e27a51; --accent-soft: rgba(226, 122, 81, .16); --danger: #ff5f52;
    --glow: rgba(226, 122, 81, .14); }
}
/* The lock screen never scrolls or zooms: every touch is a key press (see login.js). */
* { box-sizing: border-box; touch-action: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  --k: min(78px, 10.5vh); --k: min(78px, 10.5dvh); --gy: min(16px, 2vh); --gy: min(16px, 2dvh);
  background: radial-gradient(120% 60% at 50% -10%, var(--glow), transparent 70%) no-repeat, var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
/* Sized from the screen height so everything fits without scrolling, even on a small phone in Safari. */
main { height: 100%; max-width: 340px; margin: 0 auto; padding: calc(2vh + env(safe-area-inset-top)) 20px calc(2vh + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
header { text-align: center; margin-bottom: min(26px, 3vh); }
.logo { width: calc(var(--k) * .97); height: auto; border-radius: 20px; box-shadow: 0 12px 34px rgba(20, 15, 5, .18); }
h1 { margin: 14px 0 2px; font: 750 1.75rem/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; letter-spacing: -.025em; }
.hint { margin: 0; color: var(--text-2); font-size: .95rem; }
section { width: 100%; display: flex; flex-direction: column; align-items: center; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.dots { display: flex; gap: 18px; height: 16px; margin: 4px 0 min(34px, 4vh); }
.dots span { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--text-2); transition: background .12s, border-color .12s; }
.dots span.on { background: var(--text); border-color: var(--text); }
.dots.shake { animation: shake .38s; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pad { display: grid; grid-template-columns: repeat(3, var(--k)); gap: var(--gy) 24px; }
.pad button { width: var(--k); height: var(--k); border-radius: 50%; background: var(--key); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transition: background .15s; }
.pad button:active, .pad button.down { background: var(--key-press); transition: none; }
.pad .n { font-size: calc(var(--k) * .41); font-weight: 400; letter-spacing: 0; }
.pad .l { font-size: .58rem; font-weight: 700; letter-spacing: .16em; color: var(--text-2); margin-top: 3px; min-height: .6rem; }
.pad button.blank { visibility: hidden; }
.pad button.del { background: transparent; }
.pad button.del svg { width: 28px; height: 28px; }
#err { color: var(--danger); min-height: 1.3em; margin: min(20px, 2.5vh) 0 0; text-align: center; font-size: .94rem; }
[hidden] { display: none !important; }