:root { --bg: #efefe8; --s2: #d2d4c8; --ink: #1d231f; --pm: #3a2a52; --bad: #b2466f; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; position: fixed; inset: 0; width: 100%; }
body { background: var(--bg); color: var(--ink); font-family: Georgia, "Times New Roman", serif; display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); -webkit-user-select: none; user-select: none; }
.lock { display: grid; gap: 36px; justify-items: center; }
.dots { display: flex; gap: 14px; height: 14px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--s2); display: block; transition: background .15s; }
.dots i.f { background: var(--pm); }
.dots.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 18px; }
.pad button { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--s2); background: transparent; color: var(--ink); font: 26px Georgia, serif; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pad button:active { background: var(--s2); }
.pad button[data-k="del"] { border: 0; font-size: 20px; }
.pad button.ok { border: 0; font-size: 24px; color: var(--pm); opacity: .35; }
.pad button.ok.ready { opacity: 1; }
.msg { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--bad); font-family: system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg: #15161a; --s2: #2c2e36; --ink: #ecebe4; --pm: #c9b6e8; } }