/* Synedrix OS brand layer for the Lotus Docs theme.
*
* Values are the website's design tokens (synedrix-os-website
* src/design-system/tokens.css), mapped onto Lotus Docs' own CSS custom
* properties (assets/docs/scss/_variables.scss in the theme), so the theme's
* SCSS is not forked. Loaded last from the head partial. If tokens.css changes,
* this file needs a matching pass.
*
* paper #F6F5F1 / #EFEDE6 / #E6E3DA ink #0B0F14 / #2A3038 / #5B6470 / #8C95A1
* obsidian #0B0F14 / #11161D / #19202A bone #F2EFE6 / #C7C1B3 / #8A8676 / #5A584F
* signal #6FC3EE signal-ink #072530 signal-soft #E1F2FA signal-dark #123A4D
* signal-text #15668D (website globals.css: signal-coloured text on paper)
*
* Links follow the website: #15668D on paper (5.8:1; #6FC3EE is 1.8:1, under
* WCAG's 4.5:1), #6FC3EE on obsidian (9.8:1). Fills, borders, focus rings and
* the "OS" of the wordmark stay #6FC3EE on both.
*/
/* ---- Fonts (vendored, SIL OFL; nothing is requested from Google) -------- */
@font-face {
font-family: "Source Serif 4";
src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter Tight";
src: url("/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
:root {
/* One sans for body and headings, matched to the claude.dev blog (Figtree
stands in for the proprietary Anthropic Sans). Source Serif stays vendored. */
--sy-sans: "Figtree", "Inter Tight", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--sy-serif: var(--sy-sans);
--sy-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
/* ---- Light: paper / ink / signal ------------------------------------ */
--primary: #6fc3ee;
--primary-50: #e1f2fa;
--primary-100: #e1f2fa;
--primary-200: #6fc3ee;
--primary-300: #6fc3ee;
--primary-400: #6fc3ee;
--primary-800: #123a4d;
--primary-hsl: 201, 79%, 67%;
--primary-50-hsl: 200, 70%, 93%;
--primary-100-hsl: 200, 70%, 93%;
--primary-200-hsl: 201, 79%, 67%;
--primary-300-hsl: 201, 79%, 67%;
--primary-800-hsl: 200, 62%, 19%;
--body-bg: #f6f5f1;
--text-dark: #0b0f14;
--text-default: #0b0f14;
--text-muted: #5b6470;
--link-color: #15668d;
/* Link and active-nav TEXT on paper (the theme paints both with --primary,
* which also drives fills and borders, so --primary stays #6FC3EE). */
--sy-link-color: #15668d;
--sidebar-primary: #15668d;
--breadcrumb-item-color: #15668d;
--content-link-color: #15668d;
--btn-primary-color: #072530; /* signal-ink: text on signal */
--btn-soft-border: #e6e3da;
--card-bg: #efede6;
--card-border-color: #e6e3da;
--card-border-hover-color: #6fc3ee;
--sidebar-bg: #f6f5f1;
--top-header-bg: rgba(246, 245, 241, 0.85);
--sidebar-text-color: #2a3038;
--sidebar-border-color: #e6e3da;
--sidebar-dropdown-hover-bg: #e6e3da;
--sidebar-menu-active-bg: #efede6;
--sidebar-icon-bg: #efede6;
--sidebar-scrollbar-thumb-color: #e6e3da;
--footer-bg: #f6f5f1;
/* Code surface: paper-2 with a paper-3 hairline, as on the website. */
--sy-code-bg: #efede6;
--sy-code-fg: #0b0f14;
--sy-code-border: #e6e3da;
--sy-code-comment: #8c95a1;
--sy-code-key: #123a4d;
--sy-code-string: #5b6470;
--sy-code-keyword: #2a3038;
/* Tables use the code-panel surface (paper-2 + paper-3 hairline); chips one step in. */
--sy-table-bg: var(--sy-code-bg);
--sy-table-border: var(--sy-code-border);
--sy-table-code-bg: #e6e3da;
}
/* ---- Dark: obsidian / bone / signal ------------------------------------ */
[data-dark-mode] {
--link-color: #6fc3ee;
--sy-link-color: #6fc3ee;
--breadcrumb-item-color: #6fc3ee;
--content-link-color: #6fc3ee;
--body-bg: #0b0f14;
--text-default: #f2efe6;
--text-default-inv: #0b0f14;
--text-muted: #c7c1b3;
--btn-soft-color: #c7c1b3;
--btn-soft-border: #19202a;
--btn-primary-color: #6fc3ee;
--btn-primary-border: #123a4d;
--btn-default-hover-color: #6fc3ee;
--icon-color: #c7c1b3;
--card-bg: #11161d;
--card-border-color: #19202a;
--card-border-hover-color: #6fc3ee;
--sidebar-primary: #6fc3ee;
--sidebar-bg: #0b0f14;
--top-header-bg: rgba(11, 15, 20, 0.85);
--sidebar-text-color: #c7c1b3;
--sidebar-border-color: #19202a;
--sidebar-dropdown-hover-bg: #19202a;
--sidebar-menu-active-bg: #11161d;
--sidebar-icon-bg: #11161d;
--sidebar-scrollbar-thumb-color: #19202a;
--footer-bg: #0b0f14;
--sy-code-bg: #11161d;
--sy-code-fg: #f2efe6;
--sy-code-border: #19202a;
--sy-code-comment: #8a8676;
--sy-code-key: #6fc3ee;
--sy-code-string: #c7c1b3;
--sy-code-keyword: #f2efe6;
/* Same surface as code panels (obsidian-2); chips are obsidian-3. */
--sy-table-bg: var(--sy-code-bg);
--sy-table-border: var(--sy-code-border);
--sy-table-code-bg: #19202a;
}
/* The theme's `a { color: var(--primary) }`, with the text-safe colour. */
a { color: var(--sy-link-color); }
/* The header logo is an inline SVG drawn in currentColor inside a link: keep it
* on --primary, as before, rather than the link colour. */
a.logo-icon { color: var(--primary); }
/* The theme pins the logo to 26px high, which overrides the SVG's own size.
Sized to match the website's lockup (the wordmark is 200x32 in its viewBox, shown at 30px high). */
.page-wrapper .sidebar-wrapper .sidebar-brand > a svg,
.page-wrapper .page-content .top-header .header-bar .logo-icon .big svg { height: 30px; width: auto; }
/* ---- Typography: serif for editorial headings, sans for UI, mono for code */
body {
font-family: var(--sy-sans);
font-feature-settings: "ss01", "cv11", "tnum";
-webkit-font-smoothing: antialiased;
}
/* The theme forces weight 700 on content headings (.docs-content .main-content
h1..h6), so match its specificity. The website sets headings 1-3 at 400. */
.docs-content .content-title,
.docs-content .main-content h1,
.docs-content .main-content h2,
.docs-content .main-content h3 {
font-family: var(--sy-serif);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.15;
}
.docs-content .content-title,
.docs-content .main-content h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
.docs-content .main-content h2 { font-size: 1.75rem; }
.docs-content .main-content h3 { font-size: 1.375rem; }
.docs-content .main-content h4,
.docs-content .main-content h5,
.docs-content .main-content h6 {
font-family: var(--sy-sans);
font-weight: 600;
}
/* Reading rhythm matched to the claude.dev blog (1rem body, 1.65-1.7 leading,
660px measure, tight balanced headings). Sizes only: Anthropic Sans is
proprietary, so the families above stay. */
.docs-content .main-content { font-size: 1rem; }
.docs-content .main-content :is(p, ul, ol) { line-height: 1.7; }
.docs-content .main-content p { max-width: 660px; margin-bottom: 14px; }
.docs-content .main-content :is(ul, ol) > li + li { margin-top: 6px; }
.docs-content .main-content :is(h1, h2, h3, h4) { text-wrap: balance; }
.docs-content .main-content h2 { font-size: 2rem; }
.docs-content .main-content h3 { font-size: 1.75rem; }
.docs-content .main-content h4 { font-size: 1.125rem; line-height: 1.5; }
code, kbd, samp, pre {
font-family: var(--sy-mono);
font-feature-settings: "tnum", "zero", "ss01";
}
code { font-size: 0.92em; }
/* Body links: signal blue, underlined, as on the website. The "On this page"
list, breadcrumbs and section cards keep the theme's plain link style. */
.docs-content .main-content a:not(.btn) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* The website's sharp-cornered, hairline look. */
.card, .btn, code, pre { border-radius: 2px; }
/* ---- Code: gray surface, restrained syntax colours ---------------------- */
/* The theme paints the wrapper (div.highlight) navy and pads it, then the
inside navy again with !important. Put the surface on the wrapper and
make the
transparent. Selectors match the theme's specificity. */
.docs-content .main-content div.highlight {
background: var(--sy-code-bg);
border: 1px solid var(--sy-code-border);
border-radius: 3px;
padding: 0;
}
.docs-content .main-content div.highlight pre,
.docs-content .main-content pre.chroma {
background-color: transparent !important;
color: var(--sy-code-fg) !important;
border: 0;
border-radius: 0;
padding: 1.5rem 0 0;
}
.docs-content .main-content pre code {
background: transparent !important;
color: inherit !important;
border: 0;
padding: 0 2.5rem 1.5rem;
}
.docs-content .main-content :not(pre) > code {
background: var(--sy-code-bg);
color: var(--sy-code-fg);
border: 1px solid var(--sy-code-border);
padding: 0.1em 0.35em;
}
/* Token classes (Chroma). Comments quiet, keys in the signal family, the rest
in the text colour. */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs, .chroma .ch, .chroma .cp, .chroma .cpf { color: var(--sy-code-comment) !important; font-style: normal; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: var(--sy-code-keyword) !important; font-weight: 600; }
.chroma .nt, .chroma .na, .chroma .nb, .chroma .nf, .chroma .nc, .chroma .nn, .chroma .nl, .chroma .nv { color: var(--sy-code-key) !important; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx { color: var(--sy-code-string) !important; }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { color: var(--sy-code-keyword) !important; }
.chroma .o, .chroma .ow, .chroma .p { color: var(--sy-code-fg) !important; }
.chroma .err, .chroma .w, .chroma .line, .chroma .cl { color: inherit !important; background: transparent !important; }
/* ---- Spacing: the page title sat flush against the first heading --------- */
.docs-content .content-title {
margin-top: 1.5rem; /* room between the breadcrumb and the title */
margin-bottom: 1.25rem !important;
}
.docs-content .main-content h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.docs-content .main-content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
/* Declared after the h2/h3 rules above so it wins on equal specificity. */
/* The content sits one wrapper deep: .main-content > div > h2. */
.docs-content .main-content > div > :first-child { margin-top: 0; }
.docs-content .main-content > div > h2:first-child,
.docs-content .main-content > div > h3:first-child { margin-top: 0; }
/* ---- Previous / next page cards: the content-card surface, vertically centred -- */
#doc-nav .card {
background: #efede6; /* paper-2, as the content cards and tables */
border: 1px solid #e6e3da;
border-radius: 2px;
min-height: 4.25rem;
justify-content: center; /* centre the body in the card */
transition: border-color 0.15s;
}
[data-dark-mode] #doc-nav .card {
background: #11161d; /* obsidian-2: lifted off the page */
border-color: #19202a;
}
#doc-nav a:hover .card,
#doc-nav a:focus-visible .card { border-color: #6fc3ee; }
#doc-nav .card-body {
display: flex;
align-items: center; /* vertical centre */
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
#doc-nav .doc-prev .card-body { justify-content: flex-end; }
#doc-nav .card-title {
display: flex;
align-items: center;
gap: 0.375rem;
margin: 0 !important;
font-size: 1rem !important; /* the markup's fs-5 (1.25rem) was large for a page title */
color: #2a3038; /* ink-2 text on the light card */
}
#doc-nav .card-title .material-icons { font-size: 1.25em; line-height: 1; color: #3d7fa6; } /* the arrow scales with the text */
@media (max-width: 575.98px) {
#doc-nav .card-title { font-size: 0.9375rem !important; }
}
[data-dark-mode] #doc-nav .card-title,
[data-dark-mode] #doc-nav .card-title .material-icons { color: #6fc3ee; }
/* ---- Vertical rhythm: one gap after every block ------------------------- */
/* Bare
s had no bottom margin, so the next paragraph sat flush against
them. Every block element ends with the same 1rem as a paragraph does. */
.docs-content .main-content table,
.docs-content .main-content .highlight,
.docs-content .main-content blockquote,
.docs-content .main-content ul,
.docs-content .main-content ol,
.docs-content .main-content dl,
.docs-content .main-content figure,
.docs-content .main-content pre.mermaid {
margin-top: 0;
margin-bottom: 1rem;
}
.docs-content .main-content div.highlight { margin-top: 0; margin-bottom: 1rem; }
/* A list nested in a list item keeps the tighter nesting rhythm. */
.docs-content .main-content li > ul,
.docs-content .main-content li > ol { margin-bottom: 0; }
/* ---- Tables: a surface slightly off the page, in both modes ------------- */
.docs-content .main-content table {
background: var(--sy-table-bg);
border: 1px solid var(--sy-table-border);
border-radius: 3px;
border-collapse: separate; /* so the radius and border apply */
border-spacing: 0;
}
.docs-content .main-content table :not(pre) > code {
background: var(--sy-table-code-bg);
}
/* Inline code chip: hairline, 4px radius, as on the website; scaled in headings. */
.docs-content .main-content :not(pre) > code {
border-radius: 4px;
padding: 0.1em 0.4em;
}
.docs-content .main-content h1 code,
.docs-content .main-content h2 code,
.docs-content .main-content h3 code,
.docs-content .content-title code { font-size: 0.8em; }
/* ---- Copy button on code panels ------------------------------------------ */
.docs-content .main-content div.highlight { position: relative; }
.sy-copy {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: 0;
background: var(--sy-code-bg);
border: 1px solid var(--sy-code-border);
border-radius: 3px;
color: var(--sy-code-comment);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.docs-content .main-content div.highlight:hover .sy-copy,
.sy-copy:focus-visible,
.sy-copy[data-copied],
.sy-copy[data-failed] { opacity: 1; }
@media (hover: none) { .sy-copy { opacity: 1; } } /* touch: no hover to reveal it */
.sy-copy:hover { color: var(--sy-code-fg); border-color: #6fc3ee; }
.sy-copy:focus-visible { outline: 2px solid #6fc3ee; outline-offset: 1px; }
.sy-copy[data-copied] { color: #3ca17a; border-color: #3ca17a; } /* --allow */
.sy-copy[data-failed] { color: #b5443a; border-color: #b5443a; } /* --block */
/* ---- Copy-as-Markdown button on tables ---------------------------------- */
.sy-table { position: relative; margin-bottom: 1rem; }
.sy-table-scroll { overflow-x: auto; }
.sy-table-scroll > table { margin-bottom: 0; width: 100%; }
/* Sit in the header row, top-right; keep the last header cell clear of it. */
.sy-table > .sy-copy { top: 0.4rem; right: 0.5rem; }
.sy-table-scroll > table th:last-child { padding-right: 3rem; }
.sy-table:hover > .sy-copy { opacity: 1; }
/* Safety net: a
that is somehow not inside div.highlight (the render hook
in layouts/docs/_markup normally prevents it) still gets the panel, not navy.
Mermaid diagrams are
and are left alone. */
.docs-content .main-content :not(.highlight) > pre:not(.chroma):not(.mermaid) {
background-color: var(--sy-code-bg) !important;
color: var(--sy-code-fg) !important;
border: 1px solid var(--sy-code-border);
border-radius: 3px;
padding: 1.5rem 0 0;
margin: 0 0 1rem;
}
.docs-content .main-content :not(.highlight) > pre:not(.chroma):not(.mermaid) code {
background: transparent !important;
color: inherit !important;
border: 0;
padding: 0 2.5rem 1.5rem;
}
/* ---- Wrap-long-lines toggle on code panels ------------------------------- */
/* Sits left of the copy button (0.5rem gutter + 2rem button + 0.5rem gap). */
.sy-copy.sy-wrap { right: 3rem; }
.sy-copy.sy-wrap[aria-pressed="true"] {
opacity: 1;
color: #6fc3ee;
border-color: #6fc3ee;
}
.docs-content .main-content div.highlight.sy-wrapped pre,
.docs-content .main-content div.highlight.sy-wrapped pre code {
white-space: pre-wrap;
overflow-wrap: anywhere;
overflow-x: visible;
}
/* Keep the first line clear of the two buttons. */
.docs-content .main-content div.highlight pre code { padding-right: 6rem; }
/* ---- "Illustrative example" note under code blocks ------------------------- */
.sy-code-note {
display: flex;
align-items: center;
gap: 0.375rem;
margin: -0.5rem 0 1rem; /* tucked under the panel it describes */
font-size: 0.75rem;
line-height: 1.4;
color: var(--text-muted);
}
.sy-code-note svg { flex: 0 0 auto; }
/* ---- Sidebar icons ------------------------------------------------------- */
/* The theme draws each sidebar icon as a 36px tile, and its selectors carry
the .page-wrapper .sidebar-wrapper prefix, so these match that prefix to win.
Top-level tiles are smaller so the whole list fits on a laptop screen. Pages
inside a group show their own icon inline, with no tile, in place of the
theme's bullet glyph. */
.page-wrapper .sidebar-wrapper .sidebar-menu > li > a > i.material-icons,
.page-wrapper .sidebar-wrapper .sidebar-menu > li > button > i.material-icons {
min-width: 30px;
height: 30px;
font-size: 18px;
}
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-submenu i.material-icons {
min-width: 20px;
width: 20px;
height: auto;
margin-right: 0.5rem;
font-size: 16px;
background-color: transparent;
}
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:before,
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown.nested > button:before {
content: none;
}
/* ---- synedrix.io link in the top header ---------------------------------- */
/* The header's controls (logo, menu, search, this link, mode) do not wrap. On
narrow phones the link stays a visible, readable "synedrix.io" but smaller and
closer to search; below 280px (narrower than any current phone at 100% zoom)
even that overflows, so the link is dropped rather than left as a bare arrow. */
@media (max-width: 359.98px) {
.sy-site-link { margin-left: .5rem !important; font-size: .8125rem; }
}
@media (max-width: 279.98px) {
.sy-site-link { display: none; }
}
/* ---- Permalink at the end of the breadcrumb row ---------------------------- */
/* A link to the page's own address; copy-code.js turns it into a copy button.
Quiet at rest, like the other page chrome; the label drops out on phones. */
.sy-permalink {
display: inline-flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
margin-left: auto;
padding: 0.3rem 0.5rem;
border: 1px solid transparent;
border-radius: 3px;
font-size: 0.8125rem;
line-height: 1;
color: var(--text-muted);
text-decoration: none !important;
transition: color 0.12s, border-color 0.12s;
}
.sy-permalink:hover,
.sy-permalink:focus-visible { color: var(--sy-code-fg); border-color: #6fc3ee; }
.sy-permalink:focus-visible { outline: 2px solid #6fc3ee; outline-offset: 1px; }
.sy-permalink[data-copied] { color: #3ca17a; border-color: #3ca17a; } /* --allow */
.sy-permalink[data-failed] { color: #b5443a; border-color: #b5443a; } /* --block */
@media (max-width: 575.98px) { .sy-permalink-label { display: none; } }
/* Release stamp at the bottom of the sidebar menu. */
.sidebar-release { margin: 1.5rem 1rem 1rem; font-size: .8rem; opacity: .7; }
.sidebar-release code { color: inherit; background: none; padding: 0; }
/* Python / TypeScript tabs around an adjacent pair of code blocks (static/js/code-tabs.js). */
.sy-code-tabs { margin: 1rem 0; }
.sy-code-tabs-bar { display: inline-flex; border: 1px solid var(--bs-border-color, #cfe0f5); border-radius: 10px; padding: 3px; margin-bottom: .5rem; }
.sy-code-tabs-bar button { border: 0; background: none; color: inherit; opacity: .7; padding: .25rem .9rem; border-radius: 8px; font: inherit; cursor: pointer; }
.sy-code-tabs-bar button[aria-selected="true"] { opacity: 1; background: rgba(142, 193, 255, .45); }
.sy-code-tabs-pane[hidden] { display: none; }
/* Mermaid diagrams follow the theme. The theme starts Mermaid with its light default theme, so
its lilac fills are repainted here with the site palette: obsidian surfaces, bone text and
signal-blue accents in dark mode; paper, ink and the deeper signal blue in light mode. The
theme already colours lines and labels with --text-default. Flowchart nodes only name a class
(agent, term, check, warn in hugo/diagrams.yml); their colours are set here. */
.docs-content .main-content pre.mermaid {
--sy-d-surface: #ffffff;
--sy-d-surface-alt: #f3f1ea;
--sy-d-edge: #b9b4a6;
--sy-d-line: #5b6470;
--sy-d-label: #efede6;
--sy-d-agent: #e3f3fb; --sy-d-agent-line: #1f6f99;
--sy-d-term: #ffffff; --sy-d-term-line: #1f6f99;
--sy-d-check: #fbf1d4; --sy-d-check-line: #b8902a;
--sy-d-warn: #fbe3e3; --sy-d-warn-line: #c04a52;
border: 1px solid var(--sy-code-border);
border-radius: 6px;
padding: 1rem;
overflow-x: auto;
}
[data-dark-mode] .docs-content .main-content pre.mermaid {
--sy-d-surface: #11161d;
--sy-d-surface-alt: #151b23;
--sy-d-edge: #2a3038;
--sy-d-line: #8a8676;
--sy-d-label: #19202a;
--sy-d-agent: #123a4d; --sy-d-agent-line: #6fc3ee;
--sy-d-term: #0b0f14; --sy-d-term-line: #6fc3ee;
--sy-d-check: #0f1a22; --sy-d-check-line: #e0b84f;
--sy-d-warn: #2a1518; --sy-d-warn-line: #e06c75;
}
.docs-content .main-content pre.mermaid svg { max-width: 100%; height: auto; }
/* Flowchart node classes. */
.docs-content .main-content pre.mermaid g.node.agent > :is(rect, polygon, circle, path) { fill: var(--sy-d-agent) !important; stroke: var(--sy-d-agent-line) !important; }
.docs-content .main-content pre.mermaid g.node.term > :is(rect, polygon, circle, path) { fill: var(--sy-d-term) !important; stroke: var(--sy-d-term-line) !important; }
.docs-content .main-content pre.mermaid g.node.check > :is(rect, polygon, circle, path) { fill: var(--sy-d-check) !important; stroke: var(--sy-d-check-line) !important; }
.docs-content .main-content pre.mermaid g.node.warn > :is(rect, polygon, circle, path) { fill: var(--sy-d-warn) !important; stroke: var(--sy-d-warn-line) !important; }
/* Plain flowcharts (no node class: the :not()s keep this rule off the classified nodes, which it would out-rank): the same blue as `agent`; subgraphs one step in. Scoped by diagram
type so the ER rules below keep their own selectors. */
.docs-content .main-content pre.mermaid svg[aria-roledescription^="flowchart"] g.node:not(.agent):not(.term):not(.check):not(.warn) > :is(rect, polygon, circle, ellipse, path) { fill: var(--sy-d-agent) !important; stroke: var(--sy-d-agent-line) !important; }
.docs-content .main-content pre.mermaid svg[aria-roledescription^="flowchart"] .cluster rect { fill: var(--sy-d-surface-alt) !important; stroke: var(--sy-d-edge) !important; }
/* Sequence diagrams. */
.docs-content .main-content pre.mermaid svg[aria-roledescription="sequence"] rect.actor { fill: var(--sy-d-agent) !important; stroke: var(--sy-d-agent-line) !important; }
.docs-content .main-content pre.mermaid svg[aria-roledescription="sequence"] .actor-line { stroke: var(--sy-d-line) !important; }
.docs-content .main-content pre.mermaid svg[aria-roledescription="sequence"] rect.note { fill: var(--sy-d-check) !important; stroke: var(--sy-d-check-line) !important; }
.docs-content .main-content pre.mermaid svg[aria-roledescription="sequence"] .labelBox { fill: var(--sy-d-surface-alt) !important; stroke: var(--sy-d-edge) !important; }
.docs-content .main-content pre.mermaid svg[aria-roledescription="sequence"] .loopLine { stroke: var(--sy-d-line) !important; }
.docs-content .main-content pre.mermaid svg[aria-roledescription="sequence"] :is(.activation0, .activation1, .activation2) { fill: var(--sy-d-surface-alt) !important; stroke: var(--sy-d-line) !important; }
/* SVG text keeps Mermaid's own fills on : follow the theme. */
.docs-content .main-content pre.mermaid svg text tspan { fill: var(--text-default) !important; }
/* Entity-relationship diagrams. */
.docs-content .main-content pre.mermaid .entityBox { fill: var(--sy-d-surface) !important; stroke: var(--sy-d-edge) !important; }
.docs-content .main-content pre.mermaid .attributeBoxOdd { fill: var(--sy-d-surface) !important; stroke: var(--sy-d-edge) !important; }
.docs-content .main-content pre.mermaid .attributeBoxEven { fill: var(--sy-d-surface-alt) !important; stroke: var(--sy-d-edge) !important; }
.docs-content .main-content pre.mermaid .relationshipLine { stroke: var(--sy-d-line) !important; }
.docs-content .main-content pre.mermaid .relationshipLabelBox { fill: var(--sy-d-label) !important; opacity: 1 !important; }
.docs-content .main-content pre.mermaid .labelBkg,
.docs-content .main-content pre.mermaid .edgeLabel { background-color: var(--sy-d-label) !important; }
/* HTML labels (node, edge and relationship text) carry Mermaid's own #333. */
.docs-content .main-content pre.mermaid foreignObject,
.docs-content .main-content pre.mermaid foreignObject * { color: var(--text-default) !important; }
/* ---- View source on diagrams ---------------------------------------------- */
.sy-diagram { position: relative; margin-bottom: 1rem; }
.sy-diagram > pre.mermaid { margin-bottom: 0; }
.sy-diagram:hover .sy-copy { opacity: 1; }
.sy-copy.sy-source { right: 3rem; }
.sy-copy.sy-source[aria-pressed="true"] {
opacity: 1;
color: var(--sy-code-fg);
border-color: #6fc3ee;
}
.sy-diagram-source {
background: var(--sy-code-bg);
border: 1px solid var(--sy-code-border);
border-radius: 6px;
overflow-x: auto;
}
.sy-diagram-source[hidden] { display: none; }
.sy-diagram-source { scrollbar-color: var(--sy-code-comment) transparent; } /* no white track on the dark panel */
[data-dark-mode] .sy-diagram-source, [data-dark-mode] pre.mermaid { color-scheme: dark; }
.sy-diagram:not([data-view="source"]) .sy-wrap { display: none; }
.sy-diagram .sy-copy.sy-wrap { right: 5.5rem; } /* copy 0.5rem, view source 3rem, wrap 5.5rem */
.sy-diagram-source.sy-wrapped pre,
.sy-diagram-source.sy-wrapped pre code {
white-space: pre-wrap;
overflow-wrap: anywhere;
overflow-x: visible;
}
.docs-content .main-content .sy-diagram-source pre code { padding-right: 9rem; } /* clear of the three buttons */
.sy-diagram-source code { font-variant-ligatures: none; font-feature-settings: normal; } /* `-->` must read as typed */
.sy-diagram-source .sy-copy { display: none; }
.sy-diagram[data-view="source"] > pre.mermaid { display: none; }
.sy-diagram[data-view="source"] .sy-zoom { display: none; }
/* ---- Pan and zoom -------------------------------------------------------- */
.sy-copy.sy-zoom { right: auto; left: 0.5rem; }
.sy-copy.sy-zoom-out { left: 3rem; }
.sy-copy.sy-zoom-reset { left: 5.5rem; }
.sy-diagram:focus-visible { outline: 2px solid #6fc3ee; outline-offset: 2px; border-radius: 6px; }
.sy-diagram[data-pz] pre.mermaid svg { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sy-diagram[data-zoomed] pre.mermaid svg { touch-action: none; } /* touch drags the diagram only once it is zoomed */
.sy-diagram[data-dragging] pre.mermaid svg { cursor: grabbing; }
/* A zoomed drawing may use the whole panel, not just the SVG's own box. */
.sy-diagram[data-pz] pre.mermaid { overflow: hidden; }
.sy-diagram[data-pz] pre.mermaid svg { overflow: visible; }
/* ---- Line numbers on every code panel and on the Mermaid source ----------- */
/* CSS counters on the spans Chroma emits per line (copy-code.js adds them to the rest), so the
numbers are never selected or copied. A wrapped line keeps its indent under the number. */
.docs-content .main-content div.highlight pre code,
.docs-content .main-content .sy-diagram-source pre code { counter-reset: sy-ln; }
.docs-content .main-content div.highlight pre code .line,
.docs-content .main-content .sy-diagram-source pre code .line {
display: block;
position: relative;
padding-left: 2.75rem;
counter-increment: sy-ln;
}
.docs-content .main-content div.highlight pre code .line::before,
.docs-content .main-content .sy-diagram-source pre code .line::before {
content: counter(sy-ln);
position: absolute;
left: 0;
width: 1.75rem;
text-align: right;
color: var(--sy-code-comment);
opacity: 0.7;
user-select: none;
-webkit-user-select: none;
}
/* Dark scrollbars on every code panel (the default track is white on the dark surface). */
.docs-content .main-content div.highlight pre { scrollbar-color: var(--sy-code-comment) transparent; }
[data-dark-mode] .docs-content .main-content div.highlight pre { color-scheme: dark; }
/* HubSpot cookie banner (layouts/partials/google-tag.html). HubSpot injects the
* banner into this document with its own !important rules, whose selectors
* chain up to three IDs; these repeat each ID to outrank them. The same rules
* are in synedrix-os-website src/app/globals.css, so the two sites' banners match.
*
* A slim obsidian bar pinned to the bottom of the viewport: the text on the
* left, Decline (outlined) then Accept (signal) on the right, wrapping under
* the text on narrow screens. Both buttons have the same size, so rejecting
* is as easy to see and to hit as accepting (AEPD and EDPB consent guidance).
* The wording is HubSpot's banner text; keep it to one sentence there. */
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation {
height: auto !important;
min-height: 0 !important;
top: auto !important;
bottom: 16px !important;
left: 16px !important;
right: 16px !important;
transform: none !important;
width: auto !important;
max-width: 1200px !important;
max-height: calc(100vh - 32px) !important;
margin: 0 auto !important;
overflow-y: auto !important;
background: #11161d !important;
border: 1px solid rgba(242, 239, 230, 0.12) !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-auto-flow: row dense !important;
column-gap: 24px !important;
row-gap: 0 !important;
align-items: center !important;
align-content: start !important;
height: auto !important;
min-height: 0 !important;
max-width: none !important;
padding: 16px 24px !important;
background: transparent !important;
color: #c7c1b3 !important;
font-family: "Inter Tight", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
font-size: 15px !important;
line-height: 1.5 !important;
text-align: left !important;
}
/* HubSpot's banner is not one text element plus one button row: the policy
* wording, the "If you decline" disclaimer (#hs-eu-cookie-disclaimer) and the
* buttons are separate children of the inner element, and the buttons sit in a
* wrapper whose id varies by banner version. So the grid places by content:
* every child goes in the text column, and whichever child holds the Decline
* button goes in the right column, beside the first lines of text. Heights are
* reset because HubSpot sizes the banner, which stretched the rows apart. */
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner > * {
grid-column: 1 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
float: none !important;
color: inherit !important;
font: inherit !important;
text-align: left !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner > :has(#hs-eu-decline-button) {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 12px !important;
width: auto !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner > :not(:has(#hs-eu-decline-button)) + :not(:has(#hs-eu-decline-button)) {
margin-top: 4px !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer#hs-eu-cookie-disclaimer {
font-size: 13px !important;
color: #8a8676 !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner p {
max-width: none !important;
margin: 0 !important;
color: inherit !important;
font: inherit !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner p + p {
margin-top: 4px !important;
}
/* Any wrapper between that child and the buttons lines them up the same way. */
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner > :has(#hs-eu-decline-button) :has(#hs-eu-decline-button) {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 12px !important;
width: auto !important;
margin: 0 !important;
}
@media (max-width: 640px) {
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner {
grid-template-columns: minmax(0, 1fr) !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner > :has(#hs-eu-decline-button) {
grid-column: 1 !important;
grid-row: auto !important;
justify-content: flex-start !important;
margin-top: 12px !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner > :has(#hs-eu-decline-button) :has(#hs-eu-decline-button) {
justify-content: flex-start !important;
}
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-confirmation-button#hs-eu-confirmation-button,
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-decline-button#hs-eu-decline-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 96px !important;
min-height: 40px !important;
padding: 8px 18px !important;
margin: 0 !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-decoration: none !important;
text-shadow: none !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1) !important;
}
/* Decline first, Accept last, whatever order HubSpot renders them in. */
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-decline-button#hs-eu-decline-button {
order: 1 !important;
background: transparent !important;
border-color: rgba(242, 239, 230, 0.22) !important;
color: #f2efe6 !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-decline-button#hs-eu-decline-button:hover {
background: rgba(242, 239, 230, 0.06) !important;
border-color: rgba(242, 239, 230, 0.4) !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-confirmation-button#hs-eu-confirmation-button {
order: 2 !important;
background: #6fc3ee !important;
border-color: #6fc3ee !important;
color: #072530 !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-confirmation-button#hs-eu-confirmation-button:hover {
background: #8ed0f2 !important;
border-color: #8ed0f2 !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-settings-button#hs-eu-cookie-settings-button {
order: 0 !important;
color: #c7c1b3 !important;
font-family: inherit !important;
font-size: 14px !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* The Privacy Policy link: bone, underlined, signal on hover. */
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation a[data-sy-privacy],
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner #hs-eu-policy-wording a {
color: #f2efe6 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation a[data-sy-privacy]:hover,
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner#hs-eu-cookie-confirmation-inner #hs-eu-policy-wording a:hover {
color: #6fc3ee !important;
}
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-confirmation-button#hs-eu-confirmation-button:focus-visible,
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-decline-button#hs-eu-decline-button:focus-visible,
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation #hs-eu-cookie-settings-button#hs-eu-cookie-settings-button:focus-visible,
#hs-eu-cookie-confirmation#hs-eu-cookie-confirmation a[data-sy-privacy]:focus-visible {
outline: 2px solid #6fc3ee !important;
outline-offset: 2px !important;
}
/* Footer "Cookie settings": a