:root { color-scheme: light dark; --fg:#1a1d24; --bg:#fafbfc; --acc:#0078d4; --mute:#5e6772; --line:#e4e7ec; }
@media (prefers-color-scheme: dark) { :root { --fg:#f0f3f7; --bg:#0f1115; --acc:#5aa1ff; --mute:#9aa3ad; --line:#222730; } }
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; color:var(--fg); background:var(--bg); line-height:1.5; }
header { padding:24px 40px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
header h1 { margin:0; font-size:22px; }
nav { padding:8px 40px; border-bottom:1px solid var(--line); display:flex; gap:18px; font-size:14px; }
nav a { color:var(--mute); text-decoration:none; padding:6px 0; }
nav a:hover, nav a.active { color:var(--acc); border-bottom:2px solid var(--acc); }
main { padding:40px; max-width:1100px; }
h2 { margin-top:0; font-size:28px; }
h3 { margin-top:32px; font-size:18px; }
button { background:var(--acc); color:white; border:0; padding:10px 16px; border-radius:8px; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.1); }
pre { background:rgba(0,0,0,0.05); padding:14px; border-radius:8px; overflow-x:auto; font-size:13px; white-space:pre-wrap; }
@media (prefers-color-scheme: dark) { pre { background:rgba(255,255,255,0.05); } }
.m { display:inline-block; min-width:60px; padding:2px 6px; border-radius:4px; color:white; font-size:11px; margin-right:6px; }
.m-get { background:#0a8043; } .m-post { background:#0078d4; } .m-delete { background:#a4262c; } .m-put { background:#8764b8; }
.op { padding:6px 0; }
section { margin-bottom:18px; border:1px solid var(--line); border-radius:8px; padding:14px; }