:root{--ground:#fbfaf8;--surface:#fff;--sunk:#f4f2ee;--ink:#1a1a1a;--muted:#565656;
--faint:#8a8a8a;--rule:#e2ded7;--pin:#8c4a2f;--link:#2f5d8c}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ground:#16161a;
--surface:#1c1c21;--sunk:#232329;--ink:#e8e6e3;--muted:#a8a5a0;--faint:#7d7a75;
--rule:#33333b;--pin:#d08a63;--link:#8ab4e8}}
:root[data-theme=dark]{--ground:#16161a;--surface:#1c1c21;--sunk:#232329;--ink:#e8e6e3;
--muted:#a8a5a0;--faint:#7d7a75;--rule:#33333b;--pin:#d08a63;--link:#8ab4e8}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;gap:40px;align-items:flex-start}
nav.side{width:250px;flex:0 0 250px;position:sticky;top:0;max-height:100vh;overflow-y:auto;
padding:28px 0 40px}
nav.side h2{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
margin:22px 0 8px}
nav.side a{display:block;padding:4px 10px;margin-left:-10px;border-radius:5px;
color:var(--muted);text-decoration:none;font-size:14px}
nav.side a:hover{background:var(--sunk);color:var(--ink)}
nav.side a.home{color:var(--pin);font-weight:600;margin-bottom:6px}
.src{color:var(--faint);font-size:14px}
nav.side a.on{background:var(--sunk);color:var(--ink);font-weight:600}
main{flex:1;min-width:0;padding:28px 0 96px}
h1{font-size:30px;line-height:1.25;margin:0 0 6px}
h2{font-size:22px;margin:34px 0 10px;padding-top:14px;border-top:1px solid var(--rule)}
h3{font-size:17px;margin:24px 0 8px}
.lede{color:var(--muted);font-size:17px;margin:0 0 26px}
a{color:var(--link)}
img{max-width:100%;height:auto;border:1px solid var(--rule);border-radius:7px;
display:block;margin:18px 0;background:var(--surface)}
code{background:var(--sunk);padding:1px 5px;border-radius:4px;font-size:.88em;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
pre{background:var(--sunk);border:1px solid var(--rule);border-radius:7px;padding:14px 16px;
overflow-x:auto}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14.5px;display:block;
overflow-x:auto}
th,td{border:1px solid var(--rule);padding:7px 10px;text-align:left;vertical-align:top}
th{background:var(--sunk);font-weight:600}
blockquote{margin:18px 0;padding:2px 18px;border-left:3px solid var(--pin);color:var(--muted)}
/* The Markdoc components, matching apps/console/app/templates/base.html.
   Same class names, same CSS-only tab mechanism -- these pages are rendered by
   the console's own markdoc.py, so if the stylesheet does not carry the rules
   the markup expects, every tab panel shows at once and the radio buttons sit
   there as decoration that does nothing. */
.mdtabs{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:7px;
background:var(--surface);margin:18px 0;overflow:hidden}
.mdtabs .tabradio{position:absolute;opacity:0;pointer-events:none}
.mdtabs .tablabel{order:0;padding:9px 15px;font-size:13px;font-weight:500;color:var(--muted);
cursor:pointer;background:var(--sunk);border-bottom:1px solid var(--rule);
border-right:1px solid var(--rule)}
.mdtabs .tablabel:hover{color:var(--ink)}
.mdtabs .tabpanel{order:1;flex:0 0 100%;display:none;padding:4px 16px 14px}
.mdtabs .tabradio:checked + .tablabel{color:var(--ink);background:var(--surface);
box-shadow:inset 0 -2px 0 var(--pin)}
/* CSS cannot count siblings by index, so each pairing is written out. Five is
   more than any tab group in these documents uses. */
.mdtabs .tabradio:nth-of-type(1):checked ~ .tabpanel:nth-of-type(1),
.mdtabs .tabradio:nth-of-type(2):checked ~ .tabpanel:nth-of-type(2),
.mdtabs .tabradio:nth-of-type(3):checked ~ .tabpanel:nth-of-type(3),
.mdtabs .tabradio:nth-of-type(4):checked ~ .tabpanel:nth-of-type(4),
.mdtabs .tabradio:nth-of-type(5):checked ~ .tabpanel:nth-of-type(5){display:block}
ol.mdsteps{list-style:none;margin:16px 0;padding:0}
li.mdstep{display:flex;gap:13px;padding:0 0 15px}
li.mdstep .stepno{flex:0 0 23px;height:23px;border-radius:50%;text-align:center;
font:600 12px/23px ui-monospace,monospace;background:var(--sunk);color:var(--pin);
border:1px solid var(--rule)}
li.mdstep .stepbody{flex:1 1 auto;min-width:0}
li.mdstep .steptitle{margin:2px 0 5px;font-weight:600}
.callout{margin:16px 0;padding:10px 14px;border-left:3px solid var(--rule);
background:var(--surface);border:1px solid var(--rule);border-left-width:3px;
border-radius:0 5px 5px 0}
.callout .calloutkind{display:block;font-size:10px;font-weight:600;text-transform:uppercase;
letter-spacing:.08em;margin-bottom:6px}
.callout p:last-child{margin-bottom:0}
.callout-note{border-left-color:var(--link)}
.callout-note .calloutkind{color:var(--link)}
.callout-warning{border-left-color:var(--pin)}
.callout-warning .calloutkind{color:var(--pin)}
.callout-caution{border-left-color:#b3261e}
.callout-caution .calloutkind{color:#b3261e}
.mdtry,.mdapi{margin:16px 0;padding:11px 14px;border:1px solid var(--rule);border-radius:7px;
background:var(--surface)}
.mdtry .trylink{font-weight:600}
.mdapi .apimethod{font-family:ui-monospace,monospace;font-weight:600;color:var(--pin);
margin-right:8px}
footer{border-top:1px solid var(--rule);margin-top:56px;padding-top:16px;color:var(--faint);
font-size:13px}
@media(max-width:900px){.wrap{display:block}nav.side{width:auto;position:static;max-height:none;
border-bottom:1px solid var(--rule);margin-bottom:18px}}
