@font-face { font-family:Inter; src:url(inter.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
[data-theme=dark] { --bg:#0e0d0c; --panel:#161513; --code:#1b1a17; --line:#2a2825; --ink:#f4f1ec; --muted:#9c978f; --accent:#d9a26a; --logo:#e07b3f; }
[data-theme=light] { --bg:#fbfaf7; --panel:#fff; --code:#f3f0ea; --line:#e6e2da; --ink:#1c1a17; --muted:#6c675f; --accent:#94632a; --logo:#c8622f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 Inter,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px; height:60px; padding:0 22px; background:var(--bg); border-bottom:1px solid var(--line); }
.logo { font-size:23px; font-weight:700; letter-spacing:-.05em; color:var(--logo); } .logo:hover { text-decoration:none; }
.logo span { margin-left:7px; font-size:13px; font-weight:500; letter-spacing:0; color:var(--muted); }
.search { position:relative; flex:1; max-width:440px; margin-left:auto; }
.search input { width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font:inherit; font-size:14.5px; }
#results { position:absolute; top:44px; left:0; right:0; max-height:70vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
#results a { display:block; padding:8px 10px; border-radius:8px; color:var(--ink); } #results a:hover { background:var(--code); text-decoration:none; }
#results b { display:block; font-weight:600; font-size:14.5px; } #results span,#results p { font-size:13px; color:var(--muted); margin:0; padding:0; }
.ext { font-size:14.5px; white-space:nowrap; }
#theme,#menu { background:none; border:1px solid var(--line); border-radius:9px; width:34px; height:34px; color:var(--ink); cursor:pointer; font-size:16px; }
#menu { display:none; }
.layout { display:grid; grid-template-columns:262px minmax(0,1fr) 220px; max-width:1420px; margin:0 auto; }
#side { position:sticky; top:60px; height:calc(100vh - 60px); overflow:auto; padding:22px 12px 40px 22px; border-right:1px solid var(--line); }
.group { margin-bottom:20px; } .group p { margin:0 0 6px; padding:0 10px; font-size:12.5px; font-weight:600; color:var(--muted); }
.group a { display:block; padding:5px 10px; border-radius:8px; color:var(--ink); font-size:14.5px; line-height:1.45; }
.group a:hover { background:var(--panel); text-decoration:none; } .group a.on { background:var(--code); color:var(--accent); font-weight:550; }
main { min-width:0; padding:36px clamp(20px,4vw,56px) 70px; }
h1 { margin:0; font-size:clamp(30px,3.4vw,40px); line-height:1.15; letter-spacing:-.03em; font-weight:700; }
.sub { margin:10px 0 28px; color:var(--muted); font-size:18px; line-height:1.5; }
h2 { margin:40px 0 12px; font-size:23px; letter-spacing:-.02em; font-weight:650; scroll-margin-top:80px; }
h3 { margin:26px 0 8px; font-size:17px; font-weight:650; }
p,li { max-width:74ch; } ul,ol { padding-left:22px; } li { margin:5px 0; }
code { font:.875em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--code); padding:2px 5px; border-radius:5px; word-break:break-word; }
pre { position:relative; margin:14px 0 20px; padding:15px 16px; background:var(--code); border:1px solid var(--line); border-radius:12px; overflow-x:auto; line-height:1.55; }
pre code { background:none; padding:0; font-size:13.5px; word-break:normal; white-space:pre; }
.copy { position:absolute; top:8px; right:8px; padding:3px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--muted); font:12px Inter,sans-serif; cursor:pointer; opacity:0; transition:opacity .12s; }
pre:hover .copy,.copy:focus-visible { opacity:1; } @media (hover:none) { .copy { opacity:1; } }
.tw { overflow-x:auto; margin:14px 0 22px; border:1px solid var(--line); border-radius:12px; }
table { border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.5; }
th { text-align:left; padding:9px 13px; font-weight:600; font-size:13px; color:var(--muted); background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; }
td:first-child code { white-space:nowrap; }
.note { margin:16px 0; padding:12px 15px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; font-size:15px; }
.note.warn { border-left-color:var(--logo); } .note b { font-weight:650; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:18px 0; }
.cards a { display:block; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:13px; color:var(--ink); } .cards a:hover { border-color:var(--accent); text-decoration:none; }
.cards b { display:block; font-weight:650; margin-bottom:3px; } .cards span { font-size:14px; color:var(--muted); line-height:1.45; display:block; }
.badge { display:inline-block; padding:0 7px; border-radius:6px; background:var(--code); border:1px solid var(--line); font-size:12px; color:var(--muted); white-space:nowrap; }
.pager { display:flex; justify-content:space-between; gap:12px; margin-top:50px; padding-top:20px; border-top:1px solid var(--line); }
.pager a { display:block; font-weight:600; } .pager small { display:block; color:var(--muted); font-weight:400; } .pager .next { text-align:right; }
.toc { position:sticky; top:60px; height:calc(100vh - 60px); overflow:auto; padding:36px 20px; font-size:13.5px; }
.toc p { margin:0 0 8px; font-weight:600; color:var(--muted); font-size:12.5px; } .toc a { display:block; padding:3px 0; color:var(--muted); line-height:1.4; } .toc a:hover { color:var(--ink); }
@media (max-width:1180px) { .layout { grid-template-columns:262px minmax(0,1fr); } .toc { display:none; } }
@media (max-width:820px) {
  .layout { grid-template-columns:minmax(0,1fr); } #menu { display:block; } .ext { display:none; }
  #side { position:fixed; top:60px; left:0; width:280px; z-index:9; background:var(--bg); transform:translateX(-100%); transition:transform .15s; }
  #side.open { transform:none; box-shadow:0 18px 50px rgba(0,0,0,.4); }
  .top { gap:10px; padding:0 12px; } .logo span { display:none; }
}