html { color-scheme: dark; background: #0a1917; color: #f4f0e7; font: 16px/1.55 system-ui, sans-serif; }
body { min-height: 100vh; margin: 0; display: grid; align-items: center; padding: 20px; box-sizing: border-box; background: radial-gradient(ellipse at 22% 0%, #25504a, transparent 58%); }
main { max-width: 660px; width: 100%; margin-inline: auto; box-sizing: border-box; padding: clamp(26px, 6vw, 68px); border: 1px solid #5a766b; border-radius: 32px; background: linear-gradient(140deg, #2d484375, #0c201dd9); box-shadow: 0 28px 100px #05100e80, inset 0 1px #afdad135; }
a { color: #cadbd1; }
.eyebrow { color: #dcc89e; letter-spacing: .14em; font-size: .76rem; font-weight: 700; margin: 32px 0 4px; }
h1 { margin: 0; font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1; letter-spacing: -.06em; }
button { background: #ddc9a2; color: #112320; font: inherit; font-weight: 700; padding: 13px 22px; border: 0; border-radius: 999px; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #9ddcc9; outline-offset: 5px; }
button:disabled { opacity: .7; cursor: wait; }
.note { color: #b9cbc2; font-size: .88rem; }
#status { color: #ffd9a1; margin-bottom: 0; }
@media (prefers-color-scheme: light) { html { color-scheme: light; background: #f4f1e7; color: #143b35; } body { background: radial-gradient(ellipse at 22% 0%, #badbd0, transparent 65%); } main { background: #fbfcf1cf; border-color: #a5c8bb; box-shadow: 0 20px 75px #365e4b26; } a, .eyebrow, .note, #status { color: #345e53; } }