:root { --bg:#f7f7f8; --fg:#16181d; --muted:#5d6370; --card:#fff; --line:#e3e5e9; --acc:#2f5bea; --acc-fg:#fff; --err:#b42318; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111317; --fg:#eceef2; --muted:#a0a6b3; --card:#1a1d23; --line:#2a2e36; --acc:#6b8cff; --acc-fg:#0d0f13; --err:#ff8a80; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:720px; margin:0 auto; padding:0 16px; }
.top { display:flex; justify-content:space-between; align-items:center; padding-top:20px; padding-bottom:20px; }
.top a, .foot a { color:var(--muted); text-decoration:none; }
.logo { font-weight:700; font-size:20px; color:var(--fg) !important; }
.hero { padding:32px 0; }
.hero h1 { font-size:40px; margin:0 0 8px; }
.lead { color:var(--muted); font-size:18px; margin:0 0 20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin:0 0 16px; overflow-wrap:anywhere; }
.card h2 { margin-top:0; font-size:20px; }
.btn { display:inline-block; background:var(--acc); color:var(--acc-fg); border:0; border-radius:10px; padding:12px 18px; margin:4px 8px 4px 0; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--acc); border:1px solid var(--line); }
input[name=key], .copy input { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); font:inherit; margin:0 0 8px; }
.copy { margin:12px 0; }
.opts { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; }
.err { color:var(--err); }
.foot { display:flex; flex-wrap:wrap; gap:16px; padding-top:24px; padding-bottom:32px; font-size:14px; }