:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0b1220; color: #e5edf8; }
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; }
main { max-width: 600px; margin: auto; padding: 32px; border: 1px solid #334155; border-radius: 18px; background: #111c2f; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.2rem; }
p, li { line-height: 1.6; } li { margin-bottom: 8px; }
.eyebrow, .muted { color: #b1bfd2; } .eyebrow { font-size: .75rem; letter-spacing: .08em; }
label { display: block; margin: 16px 0 8px; }
input:not([type=checkbox]) { display: block; width: 100%; padding: 12px; background: #0b1220; color: #e5edf8; border: 1px solid #64748b; border-radius: 8px; font: inherit; }
button { padding: 12px 18px; margin: 16px 0; background: #2563eb; color: white; border: 1px solid transparent; border-radius: 8px; font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; } button.secondary { background: #1e293b; border-color: #64748b; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; } .choice { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.choice input { margin-top: 6px; } a { color: #93c5fd; display: inline-block; margin-top: 24px; }
#feedback { color: #fcd34d; } #feedback:empty { display: none; }
.connection { border-top: 1px solid #334155; padding: 16px 0; } [hidden] { display: none !important; }
@media(max-width: 480px) { main { padding: 20px; } }