:root { color-scheme: dark; font-family: Inter, Arial, sans-serif; background: #101315; color: #f5f8f6; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(92vw, 430px); box-sizing: border-box; padding: 30px 22px; border: 1px solid #2c3732; border-radius: 24px; background: #17201c; box-shadow: 0 24px 80px #0008; }
.eyebrow { color: #8cffb1; font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0; }
h1 { margin: 8px 0; font-size: 28px; } p { color: #bac6be; line-height: 1.5; }
button, input { font: inherit; border-radius: 12px; padding: 13px; border: 0; box-sizing: border-box; }
button { width: 100%; background: #8cffb1; color: #102016; font-weight: 800; cursor: pointer; margin: 12px 0; }
form { display: flex; gap: 8px; } form input { width: 100%; background: #0e1511; color: white; border: 1px solid #3b4d43; } form button { width: auto; margin: 0; }
#reader { overflow: hidden; border-radius: 16px; margin: 14px 0; } #result { margin-top: 18px; padding: 16px; border-radius: 14px; background: #0e1511; line-height: 1.7; }
#result.valid { border: 1px solid #48bc70; } #result.used { border: 1px solid #f7c850; } #result.error { border: 1px solid #fa6868; }
code { color: #8cffb1; word-break: break-all; }