*{box-sizing:border-box}
:root{--nav:272px;--toc:210px;--blue:#1d4ed8;--ink:#161a20;--dim:#667085;--line:#e4e7ec}
body{margin:0;font:15px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff}
a{color:var(--blue)}
code{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f2f4f7;padding:1px 5px;border-radius:4px;color:#243b53}
pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:8px;overflow:auto}
pre code{background:none;color:inherit;padding:0}
/* nav */
#nav{position:fixed;top:0;left:0;width:var(--nav);height:100vh;background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;z-index:20}
.brand{display:block;padding:18px 18px 10px;color:#fff;font-weight:700;font-size:15.5px;text-decoration:none}
.brand span{color:#60a5fa}.brand em{display:block;font-style:normal;font-size:11px;color:#64748b;margin-top:2px}
#q{margin:0 14px 8px;padding:8px 10px;border-radius:6px;border:1px solid #1e293b;background:#1e293b;color:#e2e8f0;font-size:13px}
#q::placeholder{color:#64748b}
#qr{margin:0 14px;max-height:260px;overflow:auto}
#qr a{display:block;padding:6px 8px;color:#cbd5e1;text-decoration:none;font-size:13px;border-radius:5px}
#qr a:hover,#qr a.sel{background:#1e293b;color:#fff}
#qr .rt{color:#94a3b8;font-size:11px;display:block}
.nscroll{overflow-y:auto;flex:1;padding-bottom:36px}
.ng{margin-bottom:12px}
.nh{padding:8px 18px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#64748b}
#nav a:not(.brand){display:block;padding:5px 18px;color:#cbd5e1;text-decoration:none;font-size:13.5px}
#nav a:not(.brand):hover{background:#1e293b;color:#fff}
#nav a.on{background:#1e293b;color:#fff;box-shadow:inset 3px 0 0 var(--blue)}
/* layout */
main{margin-left:var(--nav);margin-right:var(--toc);padding:34px 52px 90px;max-width:900px}
#toc{position:fixed;right:0;top:0;width:var(--toc);height:100vh;padding:34px 18px;overflow:auto;border-left:1px solid var(--line)}
#toc .th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);margin-bottom:8px}
#toc a{display:block;padding:3px 0;font-size:12.5px;color:var(--dim);text-decoration:none}
#toc a:hover{color:var(--blue)}
.crumb{font-size:12.5px;color:var(--dim);margin-bottom:14px}
.crumb a{color:var(--dim)}
h1{font-size:31px;margin:0 0 14px;letter-spacing:-.5px;line-height:1.2}
h2{font-size:22px;margin:40px 0 12px;letter-spacing:-.2px;padding-bottom:6px;border-bottom:1px solid var(--line)}
h3{font-size:17px;margin:26px 0 8px}
h3.fold{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);border:0;margin:26px 0 8px}
p{margin:0 0 14px}ul,ol{margin:0 0 14px;padding-left:22px}li{margin-bottom:5px}
.lede{font-size:17px;color:#475467;line-height:1.6}
.dim{color:var(--dim)}
footer{margin-top:60px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);
 display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:baseline}
footer .flinks{display:flex;gap:16px}
footer .flinks a{color:var(--dim);text-decoration:none}
footer .flinks a:hover{color:var(--accent);text-decoration:underline}
.tosite{display:block;font-size:11.5px;color:var(--dim);text-decoration:none;padding:2px 0 10px}
.tosite:hover{color:var(--accent)}
/* plugin head */
.phead{margin-bottom:20px}
.badge{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:20px;background:#eef2ff;color:#3730a3;margin-bottom:10px}
.b-modules{background:#ecfdf5;color:#065f46}.b-assets{background:#fef3c7;color:#92400e}
.b-utilities{background:#f3e8ff;color:#6b21a8}.b-enviroments{background:#e0f2fe;color:#075985}
.glance{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin:22px 0}
.glance>div{background:#f9fafb;border:1px solid var(--line);border-radius:9px;padding:13px 15px}
.glance h4{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.glance p{margin:0}.glance ul{margin:0;padding-left:17px;font-size:13.5px}
.glance .sub{margin-top:7px;font-size:12px;color:var(--dim)}
.chip{display:inline-block;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:2px 7px;margin:0 3px 4px 0;text-decoration:none;color:#344054}
a.chip:hover{border-color:var(--blue);color:var(--blue)}
.pstats{display:flex;gap:16px;font-size:12.5px;color:var(--dim);margin-bottom:8px}
/* callouts */
.cal{display:flex;gap:12px;border-radius:8px;padding:12px 15px;margin:0 0 16px;background:#f8fafc;border-left:3px solid #94a3b8}
.cal-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:#475569;flex:0 0 78px;padding-top:2px}
.cal>div>p:last-child{margin-bottom:0}
.cal-tip{background:#f0fdf4;border-color:#22c55e}.cal-tip .cal-l{color:#15803d}
.cal-warning{background:#fffbeb;border-color:#f59e0b}.cal-warning .cal-l{color:#b45309}
.cal-net{background:#eff6ff;border-color:#3b82f6}.cal-net .cal-l{color:#1d4ed8}
.cal-perf{background:#fdf4ff;border-color:#a855f7}.cal-perf .cal-l{color:#7e22ce}
/* figures */
/* Figures break out of the prose measure.
   796px is the right line length for text and far too narrow for a screenshot of
   an editor panel: a 1600px capture of the Content Browser lands at 50% there and
   its labels are unreadable. Prose stays at the measure; only figures widen, up to
   1600px, which is also what sets the export widths in config.py — a 1600px
   capture then lands at exactly 1:1 on an ordinary display.
   The floor is 796px so a figure never overflows the column on a narrow window. */
.fig{margin:20px 0;padding:0;width:clamp(796px,calc(100vw - 586px),1600px);max-width:none}
@media(max-width:1180px){.fig{width:clamp(796px,calc(100vw - 376px),1600px)}}
.fig .figzoom{display:block;cursor:zoom-in;text-decoration:none}
.fig .figzoom:hover img{border-color:var(--blue)}
.fig img,.fig video{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;display:block}
.fig picture{display:block}
.fig .ph{display:none}
.fig.missing img,.fig.missing video,.fig.missing picture{display:none}
.fig.missing .ph{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
 min-height:150px;border:2px dashed #cbd5e1;border-radius:8px;background:repeating-linear-gradient(45deg,#fbfcfe,#fbfcfe 10px,#f5f7fa 10px,#f5f7fa 20px)}
.phn{font:12px ui-monospace,Menlo,monospace;color:#475569;background:#fff;padding:2px 8px;border-radius:4px;border:1px solid var(--line)}
.phc{font-size:12.5px;color:var(--dim);max-width:80%;text-align:center}
.fig figcaption{font-size:12.5px;color:var(--dim);margin-top:7px}
.fig.missing figcaption{display:none}
/* tables */
table.grid,table.members{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:16px}
table.grid th,table.members th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);border-bottom:1px solid var(--line);padding:7px 8px}
table.grid td,table.members td{border-bottom:1px solid #f2f4f7;padding:7px 8px;vertical-align:top}
td.k{width:52px;font-size:10.5px;font-weight:700;text-transform:uppercase}
.k-variable{color:#b45309}.k-function{color:var(--blue)}.k-event{color:#7c3aed}.k-macro{color:#0f766e}
td.n{width:210px}td.s{width:250px;color:#475467}
td.s code{background:none;padding:0;font-size:12px;color:#475467}
.cat{display:block;font-size:10.5px;color:#98a2b3;margin-top:2px}
td.todo{color:#cbd5e1}
details.asset{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:9px}
details.asset summary{cursor:pointer;font-size:14px}
details.asset summary b{font-weight:600}
.amem{float:right;font-size:11.5px;color:var(--dim)}
.ameta{font-size:12px;color:var(--dim);margin:8px 0}
/* landing */
.hero{margin-bottom:30px}
.stats{display:flex;gap:12px;margin:22px 0}
.stats div{flex:1;background:#f9fafb;border:1px solid var(--line);border-radius:9px;padding:14px}
.stats b{display:block;font-size:24px;color:var(--blue)}
.stats span{font-size:12px;color:var(--dim)}
.gcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gcard{border:1px solid var(--line);border-radius:9px;padding:15px}
.gcard h3{margin:0 0 5px;font-size:15px}
.gcard h3 span{color:var(--dim);font-weight:400;font-size:13px}
.gcard p{font-size:13px;color:var(--dim)}
@media(max-width:1180px){#toc{display:none}main{margin-right:0}}
@media print{#nav,#toc{display:none}main{margin:0}}