:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #050506; color: #9a9aa4; }
body { display: flex; align-items: center; justify-content: center; font: 14px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
form { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mark { font-size: 13px; letter-spacing: 6px; color: #8a8a94; user-select: none; }
input { width: 220px; font: inherit; letter-spacing: 2px; padding: 8px 10px; background: #0e0e11; color: #e2e2e8; border: 1px solid #3a3a44; border-radius: 2px; outline: none; text-align: center; }
input:focus { border-color: #3a3a44; }
input.no { animation: no 0.3s ease; border-color: #5a2a2a; }
@keyframes no { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
button { position: absolute; left: -9999px; }
.closed { font-size: 11px; color: #7a7a84; letter-spacing: 1px; }