:root { --bg:#07090f; --bg-2:#0d111b; --card:#111725; --line:#1d2638; --text:#eef2f8; --muted:#a3aec2; --dim:#6b778d; --blue:#2f6bff; --blue-2:#5b8cff; --lime:#c6ff3d; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--blue-2); }
nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: rgba(7,9,15,.8); border-bottom: 1px solid var(--line); }
nav .in { width: min(900px, 92vw); margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font: 700 18px Sora, Inter, sans-serif; color: var(--text); text-decoration: none; white-space: nowrap; }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; background: conic-gradient(from 210deg, var(--blue), var(--lime), var(--blue)); display: grid; place-items: center; }
.logo-mark::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); }
.lang { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang button { background: none; border: 0; color: var(--dim); font: 600 12px Inter; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.lang button.on { background: var(--card); color: var(--text); }
main { width: min(900px, 92vw); margin: 0 auto; padding: 56px 0 90px; }
h1 { font: 700 clamp(30px, 4vw, 42px)/1.15 Sora, Inter, sans-serif; letter-spacing: -0.02em; margin-bottom: 10px; }
.meta { color: var(--dim); font-size: 14px; margin-bottom: 26px; }
.note { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 12px; padding: 14px 18px; color: var(--muted); font-size: 14px; margin-bottom: 34px; }
.toc { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 40px; columns: 2; column-gap: 28px; font-size: 14px; }
.toc a { color: var(--muted); text-decoration: none; display: block; padding: 3px 0; break-inside: avoid; }
.toc a:hover { color: var(--text); }
h2 { font: 600 22px/1.3 Sora, Inter, sans-serif; margin: 44px 0 12px; scroll-margin-top: 80px; }
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { color: var(--muted); font-size: 15.5px; }
p { margin: 10px 0; }
ul { margin: 10px 0 10px 22px; }
li { margin: 6px 0; }
strong { color: var(--text); font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
th { color: var(--text); font-weight: 600; background: var(--bg-2); }
.ph { color: var(--lime); }
footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--dim); font-size: 13px; }
footer .in { width: min(900px, 92vw); margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--muted); text-decoration: none; margin-right: 16px; }
[data-lang-block] { display: none; }
[data-lang-block].on { display: block; }
@media (max-width: 640px) { .toc { columns: 1; } table { font-size: 13px; } th, td { padding: 8px; } }