:root{--bg:#080a12;--panel:#111520;--panel2:#181d2a;--line:#2a3245;--text:#f5f7ff;--muted:#a0a9bd;--accent:#9b7cff;--green:#55dfa0;--amber:#ffc66d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 5%,rgba(139,92,246,.14),transparent 30%),var(--bg);color:var(--text)}a{color:inherit}.shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.toc{position:sticky;top:0;height:100vh;padding:24px 18px;border-right:1px solid var(--line);background:rgba(17,21,32,.95);overflow:auto}.brand{display:flex;gap:10px;align-items:center;margin-bottom:22px}.brand b{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#4fd8ff)}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:11px;margin-top:3px}.toc nav{display:grid;gap:4px}.toc a{padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--muted);font-size:12px}.toc a:hover{background:var(--panel2);color:var(--text)}.toc .back{margin-top:20px;border:1px solid var(--line);text-align:center}.content{width:min(1040px,calc(100% - 48px));margin:0 auto;padding:58px 0 100px}.hero{padding:48px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,var(--panel),rgba(139,92,246,.09));box-shadow:0 28px 80px rgba(0,0,0,.3)}.eyebrow{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-weight:900}.hero h1{font-size:clamp(48px,8vw,92px);line-height:.92;letter-spacing:-.07em;margin:18px 0}.hero p{max-width:780px;color:var(--muted);font-size:18px;line-height:1.7}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.hero-grid div{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.hero-grid strong,.hero-grid span{display:block}.hero-grid strong{font-size:23px}.hero-grid span{color:var(--muted);font-size:11px;margin-top:5px}.chapter{margin-top:26px;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.chapter h2{font-size:33px;letter-spacing:-.04em;margin:8px 0 16px}.chapter h3{font-size:20px;margin:28px 0 10px}.chapter p,.chapter li{color:var(--muted);line-height:1.72;font-size:14px}.chapter ul,.chapter ol{padding-left:22px}.callout{margin:18px 0;padding:16px 18px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--panel2)}.callout.good{border-color:var(--green)}.callout.warn{border-color:var(--amber)}.callout strong{display:block;margin-bottom:5px}.steps{display:grid;gap:9px;counter-reset:steps}.steps>div{position:relative;padding:17px 17px 17px 58px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.steps>div:before{counter-increment:steps;content:counter(steps);position:absolute;left:15px;top:15px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#2b2445;color:#cbbcff;font-weight:900}.steps strong{display:block;margin-bottom:5px}.code{white-space:pre-wrap;padding:16px;border:1px solid var(--line);border-radius:13px;background:#06080d;color:#dce4f7;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}.table{width:100%;border-collapse:collapse;margin-top:12px}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.table th{color:var(--text)}.table td{color:var(--muted)}.footer{margin-top:28px;text-align:center;color:var(--muted);font-size:12px}@media(max-width:850px){.shell{display:block}.toc{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}.toc nav{grid-template-columns:repeat(2,1fr)}.content{width:min(100% - 24px,1040px);padding-top:24px}.hero{padding:28px 20px}.hero-grid{grid-template-columns:1fr}.chapter{padding:22px 18px}}@media print{.toc{display:none}.shell{display:block}.content{width:100%;padding:0}.hero,.chapter{box-shadow:none;break-inside:avoid}.chapter{break-before:page}body{background:#fff;color:#111}.hero,.chapter,.hero-grid div,.steps>div,.callout{background:#fff;border-color:#ddd}.hero p,.chapter p,.chapter li,.table td,.footer{color:#444}.code{background:#f4f4f4;color:#111}}
