:root { color-scheme: light dark; --fg: #1b1b1b; --bg: #fafafa; --accent: #0f6cbd; --muted: #616161; }
@media (prefers-color-scheme: dark) { :root { --fg: #f0f0f0; --bg: #1f1f1f; --accent: #479ef5; --muted: #adadad; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 26rem; margin: 12vh auto; padding: 0 16px; }
h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
label { display: block; font-weight: 600; margin: 1.5rem 0 0.25rem; }
input { width: 100%; padding: 0.6rem 0.75rem; font: inherit; border: 1px solid var(--muted); border-radius: 4px; background: transparent; color: inherit; }
button { margin-top: 1rem; padding: 0.6rem 1.25rem; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 4px; cursor: pointer; }
.note { padding: 0.75rem; border-left: 3px solid var(--accent); background: rgba(127, 127, 127, 0.1); }
.small { margin-top: 3rem; font-size: 0.85rem; color: var(--muted); }