:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #282f34; background: #f5f5f2; }
* { box-sizing: border-box; }
body { margin: 0; padding: 36px 18px; }
main { width: 100%; max-width: 580px; margin: 0 auto; padding: 32px; background: white; border: 1px solid #deded8; border-radius: 16px; }
.brand { color: #3c5146; text-decoration: none; font-weight: 650; }
h1 { font-size: 28px; letter-spacing: -.6px; margin: 28px 0 14px; }
p { line-height: 1.6; }
a { color: #265c47; }
label, dt { display: block; font-size: 14px; color: #606967; margin-bottom: 8px; }
.code-entry, .actions { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
input { min-width: 0; width: 190px; flex: 1; font-size: 20px; letter-spacing: 2px; padding: 12px; border: 1px solid #bfc7c2; border-radius: 8px; text-transform: uppercase; }
button, .button { display: inline-block; border: 1px solid #315e4b; border-radius: 8px; background: #315e4b; color: white; padding: 13px 18px; text-decoration: none; font-size: 15px; cursor: pointer; }
.secondary { background: white; color: #315e4b; }
button:disabled { opacity: .5; cursor: wait; }
.code { font-family: ui-monospace, monospace; font-size: 30px; letter-spacing: 3px; }
dd { margin: 0 0 16px; overflow-wrap: anywhere; }
.error { color: #9c302d; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media(max-width:420px) { body { padding: 16px 12px; } main { padding: 22px 18px; } h1 { font-size: 25px; } .code-entry { flex-direction: column; } .code-entry input, .code-entry button { width: 100%; } }