/* * Baselyra documentation — the whole stylesheet. * * Palette and density are lifted from studio/src/styles.css so the docs and the * product read as one thing: one slate ramp, one accent used sparingly, 1px * borders instead of shadows, 5-6px radii, monospace for every identifier. * * Dark is the default. `data-theme="light"` on forces light, * `data-theme="dark"` forces dark, and with neither set the OS decides. * Every colour is a token defined in all three states — never define a colour * only inside a media query. */ /* ── tokens ──────────────────────────────────────────────────────────────── */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; --bg: #0a0b0d; --bg-subtle: #0f1114; --panel: #131619; --panel-2: #181c20; --panel-hover: #1d2226; --border: #23282e; --border-strong: #333b43; --text: #e6e9ec; --text-muted: #98a1a9; --text-faint: #6a737c; --accent: #4fd1c5; --accent-soft: #10312f; --primary-bg: #f0f2f4; --primary-fg: #0a0b0d; --danger: #f36d6d; --danger-soft: #2c1618; --warn: #e3a008; --warn-soft: #2a2008; --ok: #4ade80; --ok-soft: #0f2a1c; --shadow-pop: 0 10px 30px -10px rgb(0 0 0 / 0.7), 0 2px 8px -2px rgb(0 0 0 / 0.5); /* syntax — the same four kinds the Studio tokenizer emits */ --tok-keyword: #7dd3fc; --tok-string: #86e0a8; --tok-number: #f0b072; --tok-comment: #6a737c; --shell-top: 49px; --sidebar-w: 254px; --toc-w: 216px; --measure: 45rem; } :root[data-theme="light"] { --bg: #ffffff; --bg-subtle: #f7f8f9; --panel: #ffffff; --panel-2: #f2f4f5; --panel-hover: #edf0f2; --border: #e3e6e9; --border-strong: #cdd3d9; --text: #14171a; --text-muted: #5c656e; --text-faint: #8b949c; --accent: #0d9488; --accent-soft: #d6f2ee; --primary-bg: #14171a; --primary-fg: #ffffff; --danger: #d13d3d; --danger-soft: #fbe6e6; --warn: #a86200; --warn-soft: #fdf3e0; --ok: #197a4b; --ok-soft: #e2f3e9; --shadow-pop: 0 8px 24px -8px rgb(20 23 26 / 0.18), 0 2px 6px -2px rgb(20 23 26 / 0.1); --tok-keyword: #0b6fa4; --tok-string: #0f7040; --tok-number: #9a5300; --tok-comment: #8b949c; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #ffffff; --bg-subtle: #f7f8f9; --panel: #ffffff; --panel-2: #f2f4f5; --panel-hover: #edf0f2; --border: #e3e6e9; --border-strong: #cdd3d9; --text: #14171a; --text-muted: #5c656e; --text-faint: #8b949c; --accent: #0d9488; --accent-soft: #d6f2ee; --primary-bg: #14171a; --primary-fg: #ffffff; --danger: #d13d3d; --danger-soft: #fbe6e6; --warn: #a86200; --warn-soft: #fdf3e0; --ok: #197a4b; --ok-soft: #e2f3e9; --shadow-pop: 0 8px 24px -8px rgb(20 23 26 / 0.18), 0 2px 6px -2px rgb(20 23 26 / 0.1); --tok-keyword: #0b6fa4; --tok-string: #0f7040; --tok-number: #9a5300; --tok-comment: #8b949c; } } /* ── reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--shell-top) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-ligatures: none; } img, svg { max-width: 100%; } svg { display: block; } input, button, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--accent); color: var(--bg); } .tnum { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 5px; padding: 8px 12px; color: var(--text); transition: top 120ms ease; } .skip-link:focus { top: 8px; text-decoration: none; } /* ── top bar ─────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--shell-top); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(8px); } @supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } } .brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } .brand__mark { width: 18px; height: 18px; color: var(--accent); flex: none; } .brand__docs { color: var(--text-faint); font-weight: 450; border-left: 1px solid var(--border-strong); padding-left: 9px; margin-left: 2px; } .topbar__spacer { flex: 1 1 auto; } .topnav { display: flex; align-items: center; gap: 2px; } .topnav a { color: var(--text-muted); font-size: 13px; padding: 5px 9px; border-radius: 5px; } .topnav a:hover { color: var(--text); background: var(--panel-hover); text-decoration: none; } .topnav a[aria-current="true"] { color: var(--text); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 5px; color: var(--text-muted); border: 1px solid transparent; } .icon-btn:hover { color: var(--text); background: var(--panel-hover); } .icon-btn svg { width: 16px; height: 16px; } .search-btn { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 9px; min-width: 190px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); color: var(--text-faint); font-size: 13px; } .search-btn:hover { border-color: var(--border-strong); color: var(--text-muted); } .search-btn svg { width: 14px; height: 14px; flex: none; } .search-btn__label { flex: 1 1 auto; text-align: left; } kbd { font-family: var(--font-mono); font-size: 11px; line-height: 1; padding: 3px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--panel); color: var(--text-muted); white-space: nowrap; } .menu-btn { display: none; } /* ── shell grid ──────────────────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); gap: 0 40px; max-width: 1600px; margin: 0 auto; padding: 0 24px; } /* ── sidebar ─────────────────────────────────────────────────────────────── */ .sidebar { grid-column: 1; position: sticky; top: var(--shell-top); align-self: start; height: calc(100vh - var(--shell-top)); overflow-y: auto; overscroll-behavior: contain; padding: 24px 12px 48px 0; font-size: 13.5px; scrollbar-width: thin; } .sidebar__group + .sidebar__group { margin-top: 22px; } .sidebar__title { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 0 10px; margin-bottom: 6px; } .sidebar ul { list-style: none; padding: 0; } .sidebar a { display: block; padding: 5px 10px; border-radius: 5px; color: var(--text-muted); line-height: 1.45; border-left: 2px solid transparent; margin-left: -2px; } .sidebar a:hover { color: var(--text); background: var(--panel-hover); text-decoration: none; } .sidebar a[aria-current="page"] { color: var(--text); background: var(--panel-2); border-left-color: var(--accent); font-weight: 500; } .sidebar__meta { margin-top: 26px; padding: 14px 10px 0; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 12px; } .sidebar__meta a { display: inline; padding: 0; border: 0; margin: 0; color: var(--text-muted); } /* ── content ─────────────────────────────────────────────────────────────── */ .content { grid-column: 2; min-width: 0; padding: 32px 0 80px; max-width: var(--measure); } .breadcrumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; } .breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumb li + li::before { content: "/"; color: var(--border-strong); margin-right: 6px; } .breadcrumb a { color: var(--text-muted); } .article h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.022em; font-weight: 640; margin-bottom: 12px; } .article > .lede { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin-bottom: 30px; max-width: 40rem; } .article h2 { font-size: 21px; line-height: 1.3; letter-spacing: -0.014em; font-weight: 600; margin: 48px 0 14px; padding-top: 18px; border-top: 1px solid var(--border); } .article h3 { font-size: 16.5px; line-height: 1.4; letter-spacing: -0.008em; font-weight: 600; margin: 32px 0 10px; } .article h4 { font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; margin: 24px 0 8px; } .article p { margin: 0 0 16px; } .article ul, .article ol { margin: 0 0 16px; padding-left: 22px; } .article li { margin: 0 0 6px; } .article li > ul, .article li > ol { margin-top: 6px; } .article strong { font-weight: 620; color: var(--text); } .article hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; } .article blockquote { border-left: 2px solid var(--border-strong); padding-left: 16px; color: var(--text-muted); margin: 0 0 16px; } /* inline code, and every identifier */ .article :not(pre) > code, .code-inline { font-family: var(--font-mono); font-size: 0.86em; background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.34em; overflow-wrap: break-word; } .article a > code { color: inherit; } /* anchor links (injected by docs.js) */ .heading-anchor { color: var(--text-faint); font-weight: 400; margin-left: 0.4em; opacity: 0; transition: opacity 120ms ease; font-size: 0.8em; } h2:hover > .heading-anchor, h3:hover > .heading-anchor, h4:hover > .heading-anchor, .heading-anchor:focus-visible { opacity: 1; } .heading-anchor:hover { color: var(--accent); text-decoration: none; } :target { scroll-margin-top: calc(var(--shell-top) + 20px); } /* ── on-this-page rail ───────────────────────────────────────────────────── */ .toc { grid-column: 3; position: sticky; top: var(--shell-top); align-self: start; max-height: calc(100vh - var(--shell-top)); overflow-y: auto; padding: 34px 0 48px; font-size: 12.5px; scrollbar-width: thin; } .toc__title { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .toc ul { list-style: none; padding: 0; border-left: 1px solid var(--border); } .toc li a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-faint); line-height: 1.45; } .toc li a:hover { color: var(--text); text-decoration: none; } .toc li a.is-active { color: var(--accent); border-left-color: var(--accent); } .toc li.toc--h3 a { padding-left: 24px; } /* ── callouts ────────────────────────────────────────────────────────────── */ .callout { --callout-tone: var(--accent); --callout-soft: var(--accent-soft); border: 1px solid var(--border); border-left: 3px solid var(--callout-tone); border-radius: 0 6px 6px 0; background: var(--panel); padding: 13px 16px; margin: 0 0 20px; } .callout > :last-child { margin-bottom: 0; } .callout__title { font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--callout-tone); margin: 0 0 5px; } .callout--note { --callout-tone: var(--accent); --callout-soft: var(--accent-soft); } .callout--warning { --callout-tone: var(--warn); --callout-soft: var(--warn-soft); } .callout--danger { --callout-tone: var(--danger); --callout-soft: var(--danger-soft); background: var(--danger-soft); } /* ── code blocks ─────────────────────────────────────────────────────────── */ .code { position: relative; margin: 0 0 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; } /* the language label is CSS-only so it survives JavaScript being off */ .code[data-lang]::before { content: attr(data-lang); position: absolute; top: 0; left: 0; height: 29px; display: flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .code[data-lang] { padding-top: 29px; } .code[data-lang]::after { content: ""; position: absolute; top: 29px; left: 0; right: 0; border-top: 1px solid var(--border); } .code[data-file]::before { content: attr(data-file); text-transform: none; letter-spacing: 0; } .code pre { margin: 0; padding: 13px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.75px; line-height: 1.65; tab-size: 2; } .code code { font-family: inherit; } .tok-keyword { color: var(--tok-keyword); } .tok-string { color: var(--tok-string); } .tok-number { color: var(--tok-number); } .tok-comment { color: var(--tok-comment); font-style: italic; } .copy-btn { position: absolute; top: 4px; right: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 4px; border: 1px solid transparent; color: var(--text-faint); font-size: 11.5px; } .copy-btn svg { width: 13px; height: 13px; } .copy-btn:hover { color: var(--text); background: var(--panel-hover); border-color: var(--border); } .copy-btn.is-done { color: var(--ok); } /* ── tabbed code groups ──────────────────────────────────────────────────── */ .tabs { margin: 0 0 20px; } .tabs__list { display: none; gap: 2px; margin-bottom: -1px; position: relative; z-index: 1; } .tabs.is-ready .tabs__list { display: flex; flex-wrap: wrap; } .tabs__tab { padding: 5px 11px; border-radius: 5px 5px 0 0; border: 1px solid transparent; border-bottom: 0; color: var(--text-muted); font-size: 12.5px; } .tabs__tab:hover { color: var(--text); } .tabs__tab[aria-selected="true"] { color: var(--text); background: var(--panel); border-color: var(--border); font-weight: 500; } .tabs.is-ready .tabs__panel[hidden] { display: none; } .tabs.is-ready .tabs__panel .code { border-top-left-radius: 0; } /* ── tables ──────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--border); border-radius: 6px; } .article table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .article th, .article td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .article thead th { background: var(--panel-2); color: var(--text-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; } .article tbody tr:last-child td { border-bottom: 0; } .article tbody tr:hover td { background: var(--panel); } .article td code { white-space: nowrap; } /* ── steps ───────────────────────────────────────────────────────────────── */ .steps { list-style: none; padding: 0; counter-reset: step; margin: 0 0 20px; } .steps > li { counter-increment: step; position: relative; padding: 0 0 24px 34px; border-left: 1px solid var(--border); margin-left: 11px; } .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: -11px; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text-muted); font-family: var(--font-mono); font-size: 11.5px; line-height: 1; } .steps > li > :first-child { margin-top: -2px; } .steps__title { font-weight: 600; margin-bottom: 6px; } /* ── cards ───────────────────────────────────────────────────────────────── */ .cards { display: grid; gap: 12px; margin: 0 0 24px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .card { display: block; padding: 14px 15px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); transition: border-color 120ms ease, background 120ms ease; } .card:hover { border-color: var(--border-strong); background: var(--panel-2); text-decoration: none; } .card__title { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; margin-bottom: 4px; } .card__title svg { width: 15px; height: 15px; color: var(--accent); flex: none; } .card__body { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; } /* ── badges ──────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; vertical-align: 2px; white-space: nowrap; } .badge--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); } .badge--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); } .badge--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); } .badge--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); } /* "in progress", for anything the project is building but has not shipped */ .badge--soon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); } /* HTTP method chips for endpoint lists */ .method { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } .method--get { color: var(--ok); } .method--post { color: var(--accent); } .method--put, .method--patch { color: var(--warn); } .method--delete { color: var(--danger); } /* ── figures and diagrams ────────────────────────────────────────────────── */ .figure { margin: 0 0 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; } .figure > svg, .figure > .figure__body { display: block; width: 100%; background: var(--bg-subtle); } .figure > .figure__body { padding: 18px; overflow-x: auto; } .figure figcaption { padding: 9px 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; } .figure figcaption b { color: var(--text); font-weight: 600; } /* * Shared diagram primitives. Every diagram on the site uses these classes and * nothing else, so one hand appears to have drawn all of them. Geometry lives * in the page; colour, weight and type live here. */ .dg { font-family: var(--font-sans); } .dg-box { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 1; } .dg-box--accent { fill: var(--accent-soft); stroke: var(--accent); } .dg-box--muted { fill: none; stroke: var(--border); stroke-dasharray: 3 3; } .dg-cyl-body { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 1; } .dg-cyl-top { fill: var(--panel-hover); stroke: var(--border-strong); stroke-width: 1; } .dg-chrome { fill: var(--panel-hover); stroke: var(--border-strong); stroke-width: 1; } .dg-screen { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; } .dg-dot { fill: var(--border-strong); } .dg-line { fill: none; stroke: var(--border-strong); stroke-width: 1.25; } .dg-line--accent { stroke: var(--accent); } .dg-line--dashed { stroke-dasharray: 4 4; } .dg-arrow { fill: var(--border-strong); stroke: none; } .dg-arrow--accent { fill: var(--accent); } .dg-label { fill: var(--text); font-size: 12px; font-weight: 550; } .dg-sub { fill: var(--text-muted); font-size: 10.5px; } .dg-mono { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; } .dg-mono--accent { fill: var(--accent); } .dg-rule { stroke: var(--border); stroke-width: 1; } .dg-fill-panel { fill: var(--panel); } .dg-fill-subtle { fill: var(--bg-subtle); } /* an animated dash travelling along a .dg-line, for request-flow diagrams */ .dg-flow { stroke-dasharray: 5 9; animation: dg-flow 1.4s linear infinite; } @keyframes dg-flow { to { stroke-dashoffset: -14; } } @media (prefers-reduced-motion: reduce) { .dg-flow { animation: none; stroke-dasharray: none; } } /* ── prev / next ─────────────────────────────────────────────────────────── */ .pagenav { display: grid; gap: 12px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .pagenav a { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); } .pagenav a:hover { border-color: var(--border-strong); background: var(--panel); text-decoration: none; } .pagenav__dir { display: block; font-size: 11.5px; color: var(--text-faint); margin-bottom: 2px; } .pagenav__title { font-weight: 550; font-size: 14px; } .pagenav a.pagenav--prev { grid-column: 1; } .pagenav a.pagenav--next { text-align: right; grid-column: -2; } /* the pair keeps its sides even when a page has only one of them */ .page-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); } .page-meta a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; } .page-meta svg { width: 13px; height: 13px; } /* ── scroll reveal ───────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 420ms ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* never hide content that JavaScript may not un-hide */ .no-js .reveal { opacity: 1; transform: none; } /* ── search dialog ───────────────────────────────────────────────────────── */ dialog.search { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px)); padding: 0; margin-top: 12vh; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; } dialog.search::backdrop { background: rgb(0 0 0 / 0.55); } .search__head { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 46px; border-bottom: 1px solid var(--border); } .search__head svg { width: 16px; height: 16px; color: var(--text-faint); flex: none; } .search__input { flex: 1 1 auto; height: 100%; border: 0; background: none; outline: none; font-size: 15px; } .search__input::placeholder { color: var(--text-faint); } .search__results { overflow-y: auto; max-height: min(430px, calc(100vh - 200px)); padding: 6px; } .search__group { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 5px; } .search__hit { display: block; padding: 7px 10px; border-radius: 5px; color: var(--text); border: 1px solid transparent; } .search__hit:hover { text-decoration: none; background: var(--panel-hover); } .search__hit[aria-selected="true"] { background: var(--panel-hover); border-color: var(--border); } .search__hit-title { font-size: 13.5px; font-weight: 550; } .search__hit-title mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; padding: 0 1px; } .search__hit-path { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .search__hit-body { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; } .search__hit-body mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; padding: 0 1px; } .search__empty { padding: 26px 14px; text-align: center; color: var(--text-faint); font-size: 13px; } .search__foot { display: flex; gap: 14px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 11.5px; background: var(--panel-2); } .search__foot span { display: inline-flex; align-items: center; gap: 5px; } /* ── home page extras (index.html) ───────────────────────────────────────── */ .hero { padding: 8px 0 4px; } .hero h1 { font-size: 34px; } .hero__sub { font-size: 17px; color: var(--text-muted); max-width: 38rem; margin-bottom: 22px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 5px; border: 1px solid var(--border-strong); color: var(--text); font-size: 13.5px; font-weight: 500; } .btn:hover { background: var(--panel-2); text-decoration: none; } .btn--primary { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); } .btn--primary:hover { background: var(--primary-bg); opacity: 0.9; } .btn svg { width: 14px; height: 14px; } /* ── responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 0 32px; } .toc { display: none; } } @media (max-width: 900px) { .menu-btn { display: inline-flex; } .topnav { display: none; } .search-btn { min-width: 0; } .search-btn__label, .search-btn kbd { display: none; } .search-btn { width: 30px; justify-content: center; padding: 0; } .brand__docs { display: none; } .shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px; } .content { grid-column: 1; padding-top: 20px; } .sidebar { position: fixed; inset: var(--shell-top) auto 0 0; z-index: 45; width: min(300px, 84vw); height: auto; background: var(--panel); border-right: 1px solid var(--border); padding: 18px 14px 40px; transform: translateX(-100%); transition: transform 180ms ease; } .sidebar.is-open { transform: none; } .sidebar-scrim { position: fixed; inset: var(--shell-top) 0 0 0; z-index: 44; background: rgb(0 0 0 / 0.45); } .sidebar-scrim[hidden] { display: none; } /* without JavaScript the drawer is unreachable, so show it inline instead */ .no-js .sidebar { position: static; width: auto; transform: none; border-right: 0; border-bottom: 1px solid var(--border); background: none; } } @media (max-width: 520px) { body { font-size: 14.5px; } .article h1, .hero h1 { font-size: 27px; } .article h2 { font-size: 19px; } .code pre { font-size: 12px; } .topbar { padding: 0 12px; gap: 8px; } } /* ── print ───────────────────────────────────────────────────────────────── */ @media print { .topbar, .sidebar, .toc, .pagenav, .page-meta, .copy-btn, dialog.search { display: none !important; } .shell { display: block; padding: 0; } .content { max-width: none; } body { font-size: 11pt; } .code { break-inside: avoid; } }