:root{--bg:#f1f3f7;--s1:#fff;--s2:#e7ebf2;--line:#d5dbe6;--tx:#101828;--mu:#566274;--pr:#2d4fff;--prt:#fff;--ok:#0f9d66;--er:#e5484d;--wr:#c47f00;--r:10px}
[data-theme=dark]{--bg:#0b1020;--s1:#121931;--s2:#1a2342;--line:#27315a;--tx:#e8ecf8;--mu:#97a2c4;--pr:#8aa0ff;--prt:#0b1020;--ok:#3ddc97;--wr:#f0b429}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:15px/1.65 'Figtree',system-ui,sans-serif;background:var(--bg);color:var(--tx);min-height:100dvh;overflow-x:hidden}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque','Figtree',sans-serif}
:focus-visible{outline:2px solid var(--pr);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.h-in{display:flex;align-items:center;gap:8px;height:56px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;letter-spacing:-.3px}
.logo i{display:flex;color:var(--pr)}
.h-r{margin-left:auto;display:flex;align-items:center;gap:2px}
.h-r a,.ib{font:500 14px 'Figtree',sans-serif;color:var(--mu);padding:7px 12px;background:none;border:none;cursor:pointer;border-radius:8px}
.h-r a:hover,.ib:hover,.h-r a.on{color:var(--tx);background:var(--s2)}
.btn{display:inline-flex;align-items:center;font:600 14.5px 'Figtree',sans-serif;padding:12px 22px;border:1px solid transparent;border-radius:var(--r);cursor:pointer}
.btn-p{background:var(--pr);color:var(--prt)}
.btn-p:hover{filter:brightness(1.08)}
.btn-g{background:var(--s1);color:var(--tx);border-color:var(--line)}
.btn-g:hover{border-color:var(--pr)}
.m{font:600 10.5px 'IBM Plex Mono',monospace;padding:3px 7px;border-radius:5px;text-transform:uppercase;flex-shrink:0;text-align:center;min-width:52px}
.m-get{background:#0f9d6618;color:var(--ok)}.m-post{background:#2d4fff18;color:var(--pr)}.m-put{background:#c47f0018;color:var(--wr)}.m-patch{background:#8b5cf618;color:#8b5cf6}.m-delete{background:#e5484d18;color:var(--er)}
footer{margin-top:80px;border-top:1px solid var(--line);padding:22px 0;font-size:13px;color:var(--mu)}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
footer a:hover{color:var(--tx)}
@media(max-width:720px){.h-r a.opt{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}