:root { color-scheme: dark; font: 100%/1.6 system-ui, sans-serif; color: #e9e6de; background: #11141b; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
main { box-sizing: border-box; width: min(32rem, 100% - 2rem); padding: clamp(1.25rem, 5vw, 3rem); background: #1a1f29; border: 1px solid #47505e; }
h1 { margin: 0; font: 700 clamp(2rem, 9vw, 4rem)/1.1 ui-monospace, monospace; }
dialog[open] { position: static; box-sizing: border-box; width: 100%; margin: 1.5rem 0; padding: 1rem; background: #11141b; color: inherit; border: 1px solid #69798a; }
dialog h2 { margin-block-start: 0; }
.eyebrow { color: #ffc27b; font: 700 .9rem ui-monospace, monospace; }
form { display: grid; gap: .8rem; margin-block-start: 1.5rem; }
input, button { display: block; box-sizing: border-box; width: 100%; min-height: 2.75rem; border: 1px solid #69798a; padding: .5rem .75rem; font: inherit; }
input { background: #11141b; color: inherit; }
button { background: #ffc27b; color: #11141b; font-weight: 700; cursor: pointer; }
button[value="no"] { background: #1a1f29; color: inherit; }
button:disabled { opacity: .6; }
:focus-visible { outline: 2px solid #88daf3; outline-offset: 3px; }
#error { min-height: 1.6em; color: #ffac98; }
footer { display: flex; flex-wrap: wrap; gap: .75rem; }
a { color: #a8d8ef; }