/* Shared documentation tokens. Keep the operations UI's separate palette in DESIGN.md. */
:root {
 color-scheme: light;
 --bg: #fff;
 --surface: #f7f9fa;
 --text: #26343b;
 --muted: #596871;
 --line: #e2e8eb;
 --accent: #087a74;
 --wash: #eaf5f3;
 --inline: #f0f3f5;
 --code: #24273a;
 --code-text: #cad3f5;
 --scroll-thumb: #a1afb7;
 --scroll-track: transparent;
 --scroll-hover: #72868f;
 --scroll-active: var(--accent);
 --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 --font-mono: "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
 --header-height: 76px;
 --radius: 7px;
}
[data-theme=dark] {
 color-scheme: dark;
 --bg: #101a20;
 --surface: #15232b;
 --text: #e3edf0;
 --muted: #a5b3bb;
 --line: #2a3a43;
 --accent: #73d6c9;
 --wash: #183337;
 --inline: #22323c;
 --scroll-thumb: #526a77;
 --scroll-hover: #92a9b4;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--bg); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }
html { scroll-padding-top: calc(var(--header-height) + 28px); scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.8 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; cursor: pointer; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
a:active { opacity: .8; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
button:active:not(:disabled) { background: var(--wash); }
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; } /* Native hidden must win over component layout. */
:where(.site-header, .nav-section, .drawer-heading, .search-field) svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; flex-shrink: 0; }
.site-header { height: var(--header-height); position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 28px; padding: 0 max(28px, calc((100vw - 1456px) / 2)); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font-size: 23px; font-weight: 650; letter-spacing: -.9px; min-width: 216px; }
.brand:hover { text-decoration: none; }
.brand-icon { width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent); color: var(--bg); border-radius: 8px; font: 700 23px/1 var(--font-mono); }
.header-label { color: var(--muted); font-size: 13px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.version { color: var(--muted); font: 12px/1.5 var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px; white-space: nowrap; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius); background: transparent; }
.icon-button:hover { background: var(--inline); }
#menu { display: none; align-items: center; gap: 6px; background: transparent; border: 0; padding: 8px; border-radius: var(--radius); font-size: 13px; }
#menu:hover { background: var(--inline); }
#search-open { display: flex; align-items: center; gap: 10px; width: min(420px, 34vw); padding: 10px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted); text-align: left; }
#search-open:hover { border-color: var(--accent); }
#search-open svg { width: 17px; height: 17px; }
#search-open kbd { margin-left: auto; }
kbd { font: 11px/1.5 var(--font-mono); white-space: nowrap; }
.layout { display: grid; grid-template-columns: 244px minmax(0, 760px) 208px; gap: clamp(28px, 3.5vw, 56px); max-width: 1536px; padding: 42px 40px 0 28px; margin: auto; }
#sidebar-slot, .page-outline { position: sticky; top: calc(var(--header-height) + 24px); align-self: start; max-height: calc(100dvh - var(--header-height) - 48px); }
#sidebar { max-height: inherit; overflow: auto; padding: 0 16px 24px 0; font-size: 14px; line-height: 1.5; overscroll-behavior: contain; }
.nav-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 16px; font-size: 11px; color: var(--muted); }
#nav-expand { padding: 3px; background: transparent; border: 0; color: var(--muted); font-size: 11px; }
#nav-expand:hover { color: var(--accent); text-decoration: underline; }
.nav-section { margin: 0 0 8px; }
.nav-section summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 10px; font-weight: 600; border-radius: 5px; }
.nav-section summary::-webkit-details-marker { display: none; }
.nav-section summary:hover { background: var(--surface); color: var(--accent); }
.nav-section summary:active { background: var(--wash); }
.nav-section summary svg { width: 12px; height: 12px; color: var(--muted); }
.nav-section[open] summary svg { transform: rotate(90deg); }
.nav-pages { margin: 3px 0 12px 10px; border-left: 1px solid var(--line); }
.nav-pages a { display: block; margin-left: -1px; padding: 8px 10px 8px 18px; border-left: 2px solid transparent; color: var(--muted); font-size: 13px; line-height: 1.55; }
.nav-pages a:hover { color: var(--accent); background: var(--surface); text-decoration: none; }
.nav-pages a.selected { color: var(--accent); border-left-color: var(--accent); background: var(--wash); font-weight: 600; border-radius: 0 4px 4px 0; }
.sidebar-reference { display: flex; justify-content: space-between; padding: 18px 10px 0; margin-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
main, article { min-width: 0; }
main:focus { outline: none; }
.breadcrumb { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 26px; line-height: 1.5; }
.breadcrumb a { color: var(--muted); }
h1 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -1.6px; font-weight: 650; margin: 0 0 24px; text-wrap: balance; }
h1 + p { color: var(--muted); font-size: 18px; line-height: 1.8; margin: 0 0 30px; }
h2 { font-size: 26px; line-height: 1.35; letter-spacing: -.6px; font-weight: 600; margin: 48px 0 18px; }
h3 { font-size: 20px; line-height: 1.5; letter-spacing: -.3px; font-weight: 600; margin: 32px 0 14px; }
p { margin: 16px 0; }
strong { font-weight: 600; }
article > ul, article > ol { padding-left: 24px; }
article li { padding-left: 3px; margin: 6px 0; }
article a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent), transparent 70%); }
article a:hover { text-decoration-color: currentColor; }
code { font-family: var(--font-mono); font-size: .84em; }
:where(p, li, td, th) code { background: var(--inline); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
pre { position: relative; margin: 24px 0; padding: 47px 22px 22px; background: var(--code); color: var(--code-text); border: 1px solid #363a4f; border-radius: var(--radius); line-height: 1.85; overflow: auto; }
pre code { font-size: 13px; display: block; tab-size: 4; background: transparent; padding: 0; }
pre:before { content: attr(data-language); position: absolute; top: 12px; left: 22px; color: #a5adcb; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }
.copy { position: absolute; top: 8px; right: 10px; min-width: 52px; border: 0; border-radius: 4px; background: transparent; color: #b8c0e0; font-size: 11px; padding: 5px 8px; }
.copy:hover { background: #ffffff15; color: #fff; }
.copy:active:not(:disabled) { background: #ffffff25; }
blockquote { margin: 24px 0; padding: 1px 20px; border-left: 3px solid var(--accent); background: var(--wash); border-radius: 0 5px 5px 0; font-size: 14px; }
blockquote p { margin: 14px 0; }
article table { display: block; overflow: auto; border-collapse: collapse; width: 100%; font-size: 14px; margin: 24px 0; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); }
td, th { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
td:first-child, th:first-child { padding-left: 0; }
.page-outline { display: flex; flex-direction: column; font-size: 12px; }
.toc-title { font-size: 12px; font-weight: 600; margin-bottom: 16px; }
#toc { min-height: 0; overflow: auto; border-left: 1px solid var(--line); overscroll-behavior: contain; }
#toc ol, .mobile-outline ol { list-style: none; margin: 0; padding: 0; }
#toc a { display: block; padding: 7px 12px 7px 15px; color: var(--muted); border-left: 2px solid transparent; line-height: 1.6; }
#toc .toc-level-3 a { padding-left: 27px; font-size: 11px; }
#toc a.active { color: var(--accent); border-left-color: var(--accent); background: var(--wash); }
#toc a:hover { color: var(--accent); text-decoration: none; }
.outline-footer { padding-top: 22px; font-size: 11px; }
.outline-footer span { display: block; color: var(--muted); margin-top: 10px; }
.source-link { display: inline-block; }
.heading-link { font-size: .7em; font-weight: 400; margin-left: .5em; color: var(--muted); opacity: 0; text-decoration: none; }
h2:hover .heading-link, h3:hover .heading-link, .heading-link:focus-visible { opacity: 1; }
.mobile-outline { display: none; border-block: 1px solid var(--line); margin: 0 0 26px; padding: 12px 0; font-size: 13px; }
.mobile-outline summary { font-weight: 600; color: var(--accent); }
.mobile-outline nav { max-height: 45vh; overflow: auto; margin-top: 12px; }
.mobile-outline a { display: block; padding: 6px 0; line-height: 1.5; }
.mobile-outline .toc-level-3 { padding-left: 16px; }
.page-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.page-navigation a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; font-size: 14px; line-height: 1.6; }
.page-navigation a:hover { background: var(--wash); border-color: var(--accent); text-decoration: none; }
.page-navigation a:last-child { text-align: right; }
.page-navigation small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 24px 0 40px; border-top: 1px solid var(--line); font-size: 12px; }
footer a { color: var(--muted); }
.skip { position: fixed; top: -100px; left: 12px; z-index: 100; background: var(--bg); padding: 12px 18px; border: 1px solid var(--accent); }
.skip:focus { top: 8px; }
/* Native dialogs own modality, focus trapping and background isolation. */
dialog { border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--bg); padding: 0; box-shadow: 0 20px 80px #0003; }
dialog::backdrop { background: #10182080; }
body:has(dialog[open]) { overflow: hidden; }
#search-dialog { width: min(680px, calc(100% - 32px)); height: min(720px, calc(100dvh - 80px)); max-height: calc(100dvh - 32px); margin: max(24px, 8vh) auto auto; }
#search-dialog[open] { display: flex; flex-direction: column; }
.search-heading, .search-field, #search-status, .search-footer { flex-shrink: 0; }
.search-heading { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px 10px; font-size: 13px; font-weight: 600; }
#search-close { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); padding: 3px 8px; font-size: 11px; }
#search-close:hover { color: var(--accent); border-color: var(--accent); }
.search-field { display: flex; align-items: center; gap: 10px; margin: 4px 24px 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.search-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#search-input { width: 100%; min-width: 0; border: 0; padding: 9px 0; outline: none; background: transparent; color: var(--text); font-size: 16px; }
#search-input::-webkit-search-cancel-button { display: none; } /* The explicit Clear button works across browsers. */
#search-input::placeholder { color: var(--muted); }
#search-clear { flex-shrink: 0; }
#search-status { padding: 12px 24px 8px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#search-results { flex: 1; list-style: none; overflow: auto; min-height: 0; margin: 0; padding: 0 12px 12px; overscroll-behavior: contain; }
#search-results li + li { border-top: 1px solid var(--line); }
#search-results a { display: block; padding: 12px; border-radius: 5px; color: var(--text); line-height: 1.6; }
#search-results a:hover, #search-results a:focus-visible { background: var(--wash); text-decoration: none; }
#search-results a:focus-visible { outline-offset: -2px; }
#search-results strong { font-size: 15px; }
#search-results small { display: block; font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.search-context { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
#search-results mark { background: var(--wash); color: var(--accent); font-weight: 600; }
.search-footer { display: flex; justify-content: space-between; gap: 20px; padding: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.search-footer kbd { padding: 1px 4px; background: var(--inline); border: 1px solid var(--line); border-radius: 3px; }
#navigation-dialog { width: min(360px, 90vw); height: 100dvh; max-height: 100dvh; max-width: none; margin: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
#navigation-dialog[open] { display: flex; flex-direction: column; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
#navigation-dialog #sidebar { padding: 20px 16px max(24px, env(safe-area-inset-bottom)); min-height: 0; max-height: none; flex: 1; }
html:not(.js) .js-only { display: none !important; } /* Hide enhancements when scripts are unavailable. */
@media (max-width: 1200px) {
 .layout { grid-template-columns: 230px minmax(0, 760px); gap: 36px; padding-right: 36px; }
 .page-outline { display: none; }
 .mobile-outline { display: block; }
 .brand { min-width: 218px; }
 .header-label { display: none; }
 #search-open { width: min(440px, 45vw); }
}
@media (max-width: 820px) {
 :root { --header-height: 64px; }
 .site-header { padding: 0 16px; gap: 12px; }
 .brand { min-width: 0; font-size: 21px; gap: 9px; }
 .brand-icon { width: 30px; height: 30px; font-size: 21px; }
 .header-actions { margin-left: 0; gap: 6px; }
 .version { display: none; }
 #search-open { margin-left: auto; width: 38px; height: 42px; padding: 10px; border: 0; background: transparent; }
 #search-open :where(.site-header, .nav-section, .drawer-heading, .search-field) svg { width: 20px; height: 20px; }
 #search-open span, #search-open kbd { display: none; }
 #search-open:hover { background: var(--inline); }
 #theme { width: 40px; height: 42px; }
 #menu { display: inline-flex; min-height: 42px; }
 .layout { display: block; padding: 28px 24px 0; }
 #sidebar-slot { display: none; }
 .breadcrumb { margin-bottom: 20px; }
 h1 { font-size: 36px; letter-spacing: -1.2px; }
 h1 + p { font-size: 17px; }
 h2 { font-size: 25px; margin-top: 40px; }
 pre { padding-inline: 16px; }
 pre:before { left: 16px; }
 td, th { padding: 12px 10px; }
 .heading-link { opacity: 1; }
 .page-navigation { gap: 12px; }
 .page-navigation a { padding: 14px; font-size: 13px; }
 #search-dialog { max-height: calc(100dvh - 32px); margin-top: 16px; }
 .search-heading { padding: 16px 16px 10px; }
 .search-field { margin-inline: 16px; }
 #search-status { padding-inline: 16px; }
 .search-footer { padding: 12px 16px; }
 .search-footer span:last-child { display: none; }
 #search-close, #search-clear, .icon-button, .copy { min-height: 36px; }
 html:not(.js) #sidebar-slot { display: block; position: static; max-height: none; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) {
 * { scrollbar-color: auto; }
 *::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
 .nav-pages a.selected, #toc a.active { border-color: Highlight; }
 :where(a, button, summary, input, [tabindex]):focus-visible { outline-color: Highlight; }
}
@media print {
 .site-header, #sidebar-slot, .page-outline, .mobile-outline, .heading-link, .copy, .page-navigation, .skip, footer { display: none; }
 .layout { display: block; padding: 0; }
 main { width: 100%; }
 pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 h2, h3 { break-after: avoid; }
}
.hljs{color:#cad3f5;background:transparent}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#c6a0f6}
.hljs-string,.hljs-regexp,.hljs-addition{color:#a6da95}
.hljs-title,.hljs-title.function_,.hljs-built_in{color:#8aadf4;font-style:italic}
.hljs-title.class_,.hljs-type,.hljs-attribute{color:#eed49f;font-style:italic}
.hljs-number,.hljs-symbol{color:#f5a97f}
.hljs-attr,.hljs-variable,.hljs-template-variable{color:#cad3f5}
.hljs-operator,.hljs-bullet{color:#8bd5ca}
.hljs-comment,.hljs-quote{color:#939ab7;font-style:italic}
.hljs-meta,.hljs-name,.hljs-deletion{color:#ed8796}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

/* Catppuccin Macchiato: Go syntax is classified at build time. */
pre code{font-family:"Fira Code","SFMono-Regular",Consolas,monospace;font-variant-ligatures:normal}
.go-keyword{color:#c6a0f6}.go-string{color:#a6da95}
.go-function{color:#8aadf4;font-style:italic}.go-type{color:#eed49f;font-style:italic}
.go-package{color:#eed49f}.go-parameter{color:#ee99a0;font-style:italic}
.go-builtin-type{color:#c6a0f6;font-style:italic}.go-number{color:#f5a97f}
.go-comment{color:#939ab7;font-style:italic}.go-operator{color:#8bd5ca}
.go-punctuation{color:#939ab7}.go-import-path{color:#a6da95;text-decoration:underline;text-underline-offset:3px}
.go-import-name{color:#eed49f;text-decoration:underline;text-underline-offset:3px}
.go-bracket-0{color:#ed8796}.go-bracket-1{color:#f5a97f}.go-bracket-2{color:#eed49f}
.go-bracket-3{color:#a6da95}.go-bracket-4{color:#7dc4e4}.go-bracket-5{color:#c6a0f6}
.go-callable{color:#cad3f5;font-style:italic}


.diagram,.walkthrough{margin:30px 0;border:1px solid var(--line);border-radius:9px;background:var(--bg);overflow:hidden;min-width:0}
.visual-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.visual-heading figcaption{font-size:14px;font-weight:650;line-height:1.5}
.visual-heading button,.walkthrough-controls button{border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--accent);font-size:12px;padding:7px 12px;min-height:36px;flex-shrink:0}
.visual-heading button:hover:not(:disabled),.walkthrough-controls button:hover:not(:disabled){background:var(--wash);border-color:var(--accent)}
.visual-heading button:active:not(:disabled),.walkthrough-controls button:active:not(:disabled){background:var(--inline)}
.visual-heading button:disabled,.walkthrough-controls button:disabled{color:var(--muted);opacity:.55;cursor:default}
.diagram-description{font-size:13px;color:var(--muted);line-height:1.7;margin:16px 20px 0}
.diagram-status{font-size:13px;padding:20px;margin:0;color:var(--muted)}
.diagram-viewport{overflow:auto;padding:24px 18px;min-width:0}
.diagram-viewport:empty{min-height:180px}
.diagram-viewport svg{display:block;width:100%;height:auto;margin:auto}
.diagram details{border-top:1px solid var(--line);padding:10px 20px;font-size:12px}
.diagram summary{cursor:pointer;color:var(--muted);width:fit-content}
.diagram summary:hover{color:var(--accent)}
.diagram details pre{margin:14px 0;max-height:380px}
.diagram details code{font-size:12px}
summary:focus-visible,.diagram-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.diagram-dialog{width:min(1200px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;margin:auto;border-radius:9px;overflow:hidden}
.diagram-dialog h2{font-size:18px;letter-spacing:0;line-height:1.5;margin:0}
.diagram-dialog .diagram-viewport{max-height:calc(100dvh - 140px);padding:28px}
body:has(.diagram-dialog[open]){overflow:hidden}
.walkthrough>h3{font-size:20px;margin:0;padding:20px 22px 8px;letter-spacing:-.3px}
.walkthrough>p{font-size:14px;margin:0;padding:0 22px 18px;color:var(--muted)}
.walkthrough>ol{padding:0 24px 8px 44px}
.walkthrough-nav{display:flex;gap:0;overflow:auto;border-block:1px solid var(--line);background:var(--bg)}
.walkthrough-nav button{flex:1;min-width:90px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-size:12px;line-height:1.5;padding:14px 10px;text-align:left;overflow-wrap:anywhere}
.walkthrough-nav button span{display:block;font:600 11px/1.8 monospace;margin-bottom:4px;color:var(--accent)}
.walkthrough-nav button:hover{background:var(--wash);color:var(--text)}
.walkthrough-nav button[aria-current]{border-bottom-color:var(--accent);color:var(--accent);background:var(--wash)}
.walkthrough-nav button:focus-visible{outline-offset:-3px}
.walkthrough[data-enhanced] .walkthrough-body{display:grid;list-style:none;padding:22px;margin:0;background:var(--wash)}
.walkthrough[data-enhanced] .walkthrough-body>li{grid-area:1/1;visibility:hidden;font-size:15px;line-height:1.8}
.walkthrough[data-enhanced] .walkthrough-body>li.current{visibility:visible}
.walkthrough-body p{margin:0 0 12px}
.walkthrough-body p:last-child{margin-bottom:0}
.walkthrough-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line)}
.walkthrough-controls [role=status]{font-size:12px;color:var(--muted);text-align:center;line-height:1.5}
@media(max-width:760px){.visual-heading{padding:12px 14px}.visual-heading button,.walkthrough-controls button{min-height:44px}.diagram-description{margin:14px 14px 0}.diagram-viewport{padding:18px 12px}.walkthrough-nav button{min-width:104px;padding:12px}.walkthrough>h3{font-size:18px;padding:18px 16px 8px}.walkthrough>p{padding-inline:16px}.walkthrough[data-enhanced] .walkthrough-body{padding:18px 16px}.walkthrough-controls{padding:12px}.diagram-dialog .diagram-viewport{padding:18px}}
@media(forced-colors:active){:root{scrollbar-color:auto}.walkthrough-nav button[aria-current]{border-color:Highlight}.diagram,.walkthrough{border-color:CanvasText}}
@media print{.visual-heading button,.walkthrough-nav,.walkthrough-controls,.diagram[data-rendered] details{display:none}.diagram-viewport{overflow:visible}.diagram-viewport svg{min-width:0!important}.walkthrough[data-enhanced] .walkthrough-body{display:block;list-style:decimal;padding-left:40px}.walkthrough[data-enhanced] .walkthrough-body>li{visibility:visible;margin-bottom:16px}.diagram,.walkthrough{break-inside:avoid}}
.diagram-hint{display:none;font-size:12px;color:var(--muted);margin:12px 14px 0}
@media(max-width:760px){.diagram-hint{display:block}.diagram-dialog .diagram-viewport{max-height:calc(100dvh - 190px)}}