:root { color-scheme: light dark; --bg:#f6f7f9; --card:#fff; --fg:#1d2025; --muted:#6b7280; --line:#d9dde3; --accent:#2563eb; --code:#f0f2f5; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161a; --card:#1d2026; --fg:#e6e8eb; --muted:#9aa1ab; --line:#30343c; --accent:#60a5fa; --code:#262a31; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; gap:1rem; padding:.6rem 1rem; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:1; }
header h1 { font-size:1rem; margin:0; }
nav { display:flex; flex-wrap:wrap; gap:.3rem; flex:1; }
nav a { padding:.25rem .7rem; border-radius:999px; text-decoration:none; color:var(--fg); border:1px solid var(--line); font-size:.9rem; }
nav a.active { background:var(--accent); border-color:var(--accent); color:#fff; }
nav a .n { opacity:.7; margin-left:.3rem; }
main { max-width:960px; margin:0 auto; padding:1rem; }
article { background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:1rem; }
article > .head { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; padding:.6rem .9rem; border-bottom:1px solid var(--line); }
article > .head h2 { font-size:1.02rem; margin:0; flex:1; }
.meta { color:var(--muted); font-size:.82rem; }
.content { padding:.2rem .9rem .6rem; overflow-x:auto; }
.content pre { background:var(--code); padding:.7rem; border-radius:6px; overflow-x:auto; position:relative; }
.content code { background:var(--code); padding:.1rem .3rem; border-radius:4px; font-size:.9em; }
.content pre code { padding:0; background:none; }
.content table { border-collapse:collapse; }
.content th, .content td { border:1px solid var(--line); padding:.3rem .5rem; }
.content a { color:var(--accent); }
button, .btn { font:inherit; font-size:.82rem; padding:.2rem .6rem; border:1px solid var(--line); border-radius:5px; background:var(--card); color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--accent); }
button.copied { border-color:#16a34a; color:#16a34a; }
pre > .copy { position:absolute; top:.35rem; right:.35rem; }
form.inline { display:inline; margin:0; }
textarea.raw { display:none; }
.empty { color:var(--muted); text-align:center; padding:3rem; }
.login { max-width:320px; margin:15vh auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.4rem; }
.login input { width:100%; padding:.5rem; margin:.4rem 0 .9rem; font:inherit; border:1px solid var(--line); border-radius:5px; background:var(--bg); color:var(--fg); }
.login button { width:100%; padding:.5rem; font-size:1rem; }
.error { color:#dc2626; font-size:.9rem; }