:root{--brand:#fc5130;--bg:#fff;--fg:#1f2329;--muted:#6b7280;--border:#e5e7eb;--sidebar:#fafafa;--code-bg:#f6f8fa;--link:#c7230b;--card:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#0d1117;--fg:#e6edf3;--muted:#9aa4b2;--border:#222a35;--sidebar:#0a0e14;--code-bg:#161b22;--link:#ff8b75;--card:#0f141b}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
header.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.75rem;height:3.5rem;padding:0 1rem;border-bottom:1px solid var(--border);background:var(--bg)}
header.top .brand{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--fg)}
header.top .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--brand)}
header.top .spacer{flex:1}
header.top .lang{display:flex;gap:.15rem;font-size:.78rem;border:1px solid var(--border);border-radius:.4rem;overflow:hidden}
header.top .lang a{padding:.2rem .5rem;color:var(--muted)}
header.top .lang a.on{background:var(--brand);color:#fff}
header.top a.app{font-size:.85rem;color:var(--muted)}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:.4rem;padding:.35rem .5rem;color:var(--fg);cursor:pointer}
.layout{display:grid;grid-template-columns:17rem minmax(0,1fr) 14rem;max-width:92rem;margin:0 auto}
nav.side{border-right:1px solid var(--border);background:var(--sidebar);padding:1.25rem 1rem;height:calc(100vh - 3.5rem);position:sticky;top:3.5rem;overflow-y:auto}
nav.side input{width:100%;padding:.4rem .6rem;margin-bottom:1rem;border:1px solid var(--border);border-radius:.4rem;background:var(--bg);color:var(--fg);font-size:.85rem}
nav.side ul{list-style:none;margin:0;padding:0}
nav.side li{margin:0}
nav.side a{display:flex;align-items:center;gap:.45rem;padding:.32rem .6rem;border-radius:.4rem;color:var(--fg);font-size:.9rem}
nav.side a:hover{background:rgba(252,81,48,.08);text-decoration:none}
nav.side a.active{background:rgba(252,81,48,.12);color:var(--brand);font-weight:600}
nav.side .lvl0>a{font-weight:600;margin-top:.9rem}
nav.side .lvl1 a{padding-left:1.4rem;font-size:.86rem}
nav.side .lvl2 a{padding-left:2.2rem;font-size:.84rem;color:var(--muted)}
nav.side .ico{font-size:.95em;width:1.1em;text-align:center;flex:none}
main{padding:2rem 2.5rem 5rem;min-width:0}
article{max-width:48rem}
article h1{font-size:2rem;line-height:1.2;margin:.2rem 0 1rem}
article h2{font-size:1.4rem;margin:2.2rem 0 .8rem;padding-top:.5rem;border-top:1px solid var(--border)}
article h3{font-size:1.1rem;margin:1.6rem 0 .5rem}
article a{font-weight:500}
article code{background:var(--code-bg);padding:.12em .4em;border-radius:.3rem;font-size:.86em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
article pre.doc-pre{background:var(--code-bg);border:1px solid var(--border);border-radius:.6rem;padding:1rem 1.1rem;overflow-x:auto;font-size:.85rem;line-height:1.5;margin:1.1rem 0}
article pre.doc-pre code{background:none;padding:0;font-size:inherit}
article blockquote{margin:1.2rem 0;padding:.6rem 1rem;border-left:3px solid var(--brand);background:rgba(252,81,48,.06);color:var(--muted)}
article ul,article ol{padding-left:1.4rem}
article img{max-width:100%;border-radius:.6rem;border:1px solid var(--border)}
.doc-table-wrap{overflow-x:auto;margin:1.2rem 0}
article table{border-collapse:collapse;width:100%;font-size:.9rem}
article th,article td{border:1px solid var(--border);padding:.5rem .7rem;text-align:left;vertical-align:top}
article th{background:var(--sidebar)}
article hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
.lead{color:var(--muted);font-size:1.12rem;margin-bottom:1.5rem}
/* Callouts */
.doc-callout{display:flex;gap:.6rem;margin:1.2rem 0;padding:.8rem 1rem;border-radius:.6rem;border:1px solid var(--border);background:var(--card)}
.doc-callout .doc-callout-icon{flex:none}
.doc-callout>div>:first-child{margin-top:0}.doc-callout>div>:last-child{margin-bottom:0}
.doc-callout-warning{border-color:#f59e0b55;background:#f59e0b14}
.doc-callout-tip{border-color:#8b5cf655;background:#8b5cf614}
.doc-callout-success{border-color:#10b98155;background:#10b98114}
.doc-callout-info{border-color:#3b82f655;background:#3b82f614}
/* Illustration breakouts — real UI in a framed card, optional blurry gradient backdrop */
figure.doc-illustration{margin:1.6rem 0;text-align:center}
figure.doc-illustration .doc-illu-frame{position:relative;border-radius:1rem;padding:1.5rem;overflow:hidden;border:1px solid var(--border);background:var(--card)}
figure.doc-illustration .doc-illu-frame svg{max-width:100%;height:auto;position:relative;z-index:1;border-radius:.6rem;filter:drop-shadow(0 10px 30px rgba(0,0,0,.12))}
figure.doc-illustration figcaption{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
.doc-illu-bg-aurora .doc-illu-frame::before,.doc-illu-bg-sunset .doc-illu-frame::before,.doc-illu-bg-ocean .doc-illu-frame::before,.doc-illu-bg-violet .doc-illu-frame::before{content:"";position:absolute;inset:-30%;z-index:0;filter:blur(60px);opacity:.55}
.doc-illu-bg-aurora .doc-illu-frame::before{background:radial-gradient(circle at 20% 30%,#fc5130,transparent 45%),radial-gradient(circle at 80% 70%,#8b5cf6,transparent 45%),radial-gradient(circle at 60% 20%,#22d3ee,transparent 40%)}
.doc-illu-bg-sunset .doc-illu-frame::before{background:radial-gradient(circle at 25% 25%,#fc5130,transparent 45%),radial-gradient(circle at 75% 75%,#f59e0b,transparent 45%)}
.doc-illu-bg-ocean .doc-illu-frame::before{background:radial-gradient(circle at 25% 30%,#22d3ee,transparent 45%),radial-gradient(circle at 80% 70%,#3b82f6,transparent 45%)}
.doc-illu-bg-violet .doc-illu-frame::before{background:radial-gradient(circle at 30% 30%,#8b5cf6,transparent 45%),radial-gradient(circle at 70% 70%,#ec4899,transparent 45%)}
/* prev/next + toc */
.prevnext{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.prevnext a{display:block;padding:.7rem 1rem;border:1px solid var(--border);border-radius:.5rem;font-size:.85rem;max-width:48%;color:var(--fg)}
.prevnext span{display:block;color:var(--muted);font-size:.72rem}
aside.toc{padding:2rem 1rem;height:calc(100vh - 3.5rem);position:sticky;top:3.5rem;overflow-y:auto;font-size:.82rem}
aside.toc .lbl{font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.7rem;margin-bottom:.6rem}
aside.toc a{display:block;padding:.2rem 0;color:var(--muted)}
aside.toc a:hover{color:var(--brand)}
aside.toc a.d3{padding-left:.8rem;font-size:.78rem}
@media(max-width:1024px){.layout{grid-template-columns:17rem minmax(0,1fr)}aside.toc{display:none}}
@media(max-width:768px){.layout{grid-template-columns:1fr}.menu-btn{display:block}nav.side{position:fixed;top:3.5rem;left:0;width:18rem;z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.2)}nav.side.open{transform:none}main{padding:1.5rem 1.25rem 4rem}}