:root{--ink:#1b1f24;--muted:#5b6570;--line:#e3e7eb;--bg:#fbfcfd;--panel:#fff;--accent:#0b6b5f;--accent-soft:#e6f2f0;--code:#f4f6f8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.topbar{border-bottom:1px solid var(--line);background:var(--panel)}
.topbar .in{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px}
.brand{font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.brand span{color:var(--accent)}
.brand em{font-style:normal;font-weight:500;color:var(--muted);margin-left:8px;font-size:13px;border-left:1px solid var(--line);padding-left:8px}
.topbar nav{margin-left:auto;display:flex;gap:20px;font-size:14px}
.topbar nav a{color:var(--muted)}
.shell{max-width:1120px;margin:0 auto;padding:32px 24px 72px;display:grid;grid-template-columns:210px 1fr;gap:44px}
aside h5{margin:22px 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
aside a{display:block;padding:5px 0;font-size:14px;color:var(--ink)}
aside a.on{color:var(--accent);font-weight:600}
h1{font-size:30px;line-height:1.25;margin:0 0 10px;letter-spacing:-.4px}
h2{font-size:19px;margin:34px 0 10px;letter-spacing:-.2px}
h3{font-size:15px;margin:22px 0 6px}
.lead{color:var(--muted);margin:0 0 26px;font-size:16px}
pre{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow:auto;font-size:13px;line-height:1.6}
pre .c{color:#7c8791}
pre .k{color:var(--accent);font-weight:600}
pre .s{color:#9a5b2b}
table{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
td code{background:var(--code);padding:1px 5px;border-radius:4px;font-size:12.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:22px 0}
.card{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--panel)}
.card b{display:block;margin-bottom:4px}
.card p{margin:0;color:var(--muted);font-size:14px}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);padding:12px 16px;border-radius:0 8px 8px 0;margin:18px 0;font-size:14px}
.tag{display:inline-block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.ok{color:#0b6b5f;font-weight:600}
.deg{color:#a5741b;font-weight:600}
footer{border-top:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:13px}
footer .in{max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted)}
.player{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0e1418;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#7c8791;font-size:14px}
@media(max-width:820px){.shell{grid-template-columns:1fr;gap:24px}aside{order:2}}