:root { --fg:#1b1b1b; --muted:#666; --line:#ddd; --accent:#0b5fff; --bad:#b00020; --good:#0a7a3d; --bg:#fff; --code-bg:#f5f6f8; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e8; --muted:#a0a0a0; --line:#333; --accent:#6ea0ff; --bad:#ff6b6b; --good:#54d18b; --bg:#141414; --code-bg:#1d1f23; }
}
* { 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; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
         padding:1rem 1.5rem; border-bottom:1px solid var(--line); }
.brand { font-weight:600; text-decoration:none; color:var(--fg); }
.brand span { color:var(--muted); font-weight:400; }
nav { display:flex; align-items:center; gap:1rem; }
.who { color:var(--muted); }
main { max-width:52rem; margin:0 auto; padding:1.5rem; }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; margin-top:2rem; }
hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }
label { display:block; margin:.75rem 0; }
input[type=text], input[type=email], input[type=password] {
  display:block; width:100%; max-width:26rem; padding:.5rem; margin-top:.25rem;
  border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--fg); }
button, .button { display:inline-block; padding:.5rem 1rem; border:1px solid var(--line);
  border-radius:4px; background:transparent; color:var(--fg); cursor:pointer; text-decoration:none; font:inherit; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.link { border:0; padding:0; color:var(--accent); text-decoration:underline; }
form.inline { display:inline; }
.hint { color:var(--muted); font-size:.9rem; }
.error { color:var(--bad); border:1px solid var(--bad); border-radius:4px; padding:.6rem .8rem; }
.notice { color:var(--good); border:1px solid var(--good); border-radius:4px; padding:.6rem .8rem; }
table { width:100%; border-collapse:collapse; margin-top:1rem; }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); }
code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.secret { display:block; padding:.75rem; border:1px dashed var(--accent); border-radius:4px;
          word-break:break-all; margin:1rem 0; }
.meter { height:.6rem; background:var(--line); border-radius:999px; overflow:hidden; max-width:26rem; }
.meter > span { display:block; height:100%; background:var(--accent); }
.meter.exhausted > span { background:var(--bad); }
pre { overflow-x:auto; padding:.75rem; background:var(--code-bg); border:1px solid var(--line);
      border-radius:4px; line-height:1.4; }
pre.copyable { position:relative; padding-right:4.5rem; }
pre .copy { position:absolute; top:.4rem; right:.4rem; font-size:.8rem; padding:.15rem .55rem;
            background:var(--bg); }
.guide h2 { margin-top:2.25rem; }