:root { color-scheme: light dark; --bg: #faf9f5; --surface: #fff; --key: #efece3; --border: #e3e1d7; --text: #1f1e1d; --muted: #5e5d59; --accent: #c96442; --ink: #fff; --danger: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg: #262624; --surface: #30302e; --key: #3a3a37; --border: #43423f; --text: #f5f4ef; --muted: #c3c2b7; --accent: #d97757; --ink: #1f1e1d; --danger: #f2837b; } }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
main { max-width: 320px; margin: 0 auto; padding: calc(10vh + env(safe-area-inset-top)) 16px 24px; display: flex; flex-direction: column; align-items: center; }
img { border-radius: 14px; }
h1 { font: 500 1.6rem ui-serif, "New York", Georgia, serif; margin: 6px 0 14px; }
section, form { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hint { margin: 0 0 14px; color: var(--muted); }
.small { margin: -6px 0 14px; color: var(--muted); font-size: .88rem; text-align: center; }
code { background: var(--key); padding: 1px 5px; border-radius: 5px; }
.dots { display: flex; gap: 16px; height: 18px; margin-bottom: 28px; }
.dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.dots span.on { background: var(--text); border-color: var(--text); }
.dots.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 26px; }
.pad button { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--key); color: var(--text); font-size: 1.8rem; font-weight: 400; cursor: pointer; }
.pad button:active { background: var(--border); }
.pad button.blank { visibility: hidden; }
.pad button.del { background: transparent; font-size: 1.5rem; }
input, form button { width: 100%; font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-sizing: border-box; margin-bottom: 12px; }
input { text-align: center; letter-spacing: .15em; text-transform: uppercase; }
form button { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 600; }
#err { color: var(--danger); min-height: 1.3em; margin: 18px 0 0; text-align: center; }
[hidden] { display: none !important; }
/* No double-tap zoom: fast repeated taps on the keypad (3-3-3-3) must each count. */
html, body, button, input { touch-action: manipulation; }
body { -webkit-user-select: none; user-select: none; }
input { -webkit-user-select: text; user-select: text; }

* { touch-action: manipulation; }