:root { --paper: #f4f1ea; --ink: #161513; --ink-2: #52514e; --rule: #c3c2b7; --accent: #c8461f; --field: #fcfcfb; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --paper: #0f0f0e; --ink: #f0efec; --ink-2: #c3c2b7; --rule: #383835; --accent: #ef6a3f; --field: #1a1a19; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "PingFang SC", sans-serif; }
main { width: min(100%, 22rem); }
h1 { font: 400 clamp(2.4rem, 8vw, 3.2rem)/1 Georgia, "Songti SC", serif; margin: 0 0 0.3rem; letter-spacing: -0.02em; }
h1 em { color: var(--accent); }
.kicker { margin: 0 0 2rem; font: 0.72rem ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
form { display: grid; gap: 0.6rem; }
label { font: 0.72rem ui-monospace, Menlo, monospace; text-transform: uppercase; color: var(--ink-2); }
input { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--field); color: var(--ink); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: 600 0.95rem system-ui, sans-serif; padding: 0.7rem; border: 0; border-radius: 8px; background: var(--ink); color: var(--paper); cursor: pointer; }
button:hover { background: var(--accent); }
.err { margin: 0; color: var(--accent); font-size: 0.85rem; }