:root{--ink:#171717;--body:#525252;--mute:#888;--canvas:#fff;--soft:#fafafa;--line:#e5e5e5}
@media(prefers-color-scheme:dark){:root{--ink:#fafafa;--body:#b8b8b8;--mute:#999;--canvas:#0a0a0a;--soft:#161616;--line:#333}}
*{box-sizing:border-box}html,body{margin:0;background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}main{max-width:760px;margin:0 auto;padding:48px 24px 96px}h1{font-size:32px;letter-spacing:-.5px;margin:0 0 8px}h2{font-size:20px;margin:38px 0 10px}p,li{color:var(--body);font-size:16px}li{margin-bottom:7px}a{color:var(--ink)}.meta{color:var(--mute);font-size:14px;margin:0 0 30px}.callout{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:24px 0}nav{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 36px;font-size:14px}footer{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
:root{--danger:#c0392b}
@media(prefers-color-scheme:dark){:root{--danger:#ff8080}}
.state{margin:0}
.state h2{margin-top:30px}
.field{margin:22px 0 0}
.field label{display:block;color:var(--mute);font-size:14px;margin-bottom:6px}
.field-row{display:flex;gap:8px;align-items:stretch}
.field input{width:100%;min-width:0;flex:1;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--canvas);color:var(--ink);font:inherit;font-size:16px}
.field input:focus{outline:none;border-color:var(--ink)}
.field-error{color:var(--danger);font-size:14px;margin:8px 0 0}
.state button{font:inherit;font-size:15px;border-radius:10px;cursor:pointer}
.field-row button{flex:0 0 auto;padding:0 14px;border:1px solid var(--line);background:var(--soft);color:var(--body)}
.state button.primary{display:block;width:100%;height:48px;margin-top:28px;border:0;background:var(--ink);color:var(--canvas);font-weight:600}
.state button.primary:disabled{opacity:.55;cursor:default}