{ "id": "v1-dd-3148", "long_id": "v1.dev-dark.docs.s03.p01.t04.u08", "name": "Dark developer tools documentation", "era": { "slug": "dev-dark", "code": "dd", "name": "Dark developer tools", "years": [ 2019, 2026 ], "description": "Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the documentation site of a developer product from 2019 to 2026: a dark page in three columns, with the tree of pages at the left, the text in the middle and the headings of the page along a rule at the right. Code blocks with a title strip, mono parameter names, method badges and status dots carry most of the content, and a split page puts a reference table beside its request and response. In this set the page is a warm charcoal, headings are a serif, corners are generous and the one accent is an orange that also glows behind the opening of the first page.", "url": "https://chrono.skin/s/v1-dd-3148", "preview_url": "https://chrono.skin/s/v1-dd-3148/specimen.html", "files": { "STYLE.md": "# Dark developer tools documentation\n\n## Summary\n\nThis is the documentation site of a developer product from 2019 to 2026: a dark page in three columns, with the tree of pages at the left, the text in the middle and the headings of the page along a rule at the right. Code blocks with a title strip, mono parameter names, method badges and status dots carry most of the content, and a split page puts a reference table beside its request and response. In this set the page is a warm charcoal, headings are a serif, corners are generous and the one accent is an orange that also glows behind the opening of the first page.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. `.ds-page` is a grid: `.ds-nav`, the top bar (`--size-top` 56px, sticky, on `--fill-bar`), across both columns; below it `.ds-tree` (`--size-tree` 264px, sticky, on `--fill-bar-alt`) at the left and the showing view beside it, with the footer line under the view. `.ds-content` is centred, at most `--size-page` (1100px) wide, padded by `--space-6` and `--space-7`, and stacks its children `--space-6` (32px) apart.\n- Navigation is double. The top bar holds the brand with a mono `docs` tag, four section links (the current one underlined in `--color-accent-alt`), the search field with its key cap and one small button. The tree lists every page in groups under mono titles; the current page sits on a 12% wash.\n- `.ds-doc` is the page body: the main column and a `--size-toc` (208px) `.ds-doc__aside` that stays in view while the text scrolls. `.ds-doc--split` is two equal columns for a reference or console page, explanation at the left and code at the right.\n- The home view stacks: `.ds-hero` (label, title, lead and two large buttons at the left, a first request as a code block at the right, over the glow); `.ds-stat`, four figures between two rules; then `.ds-doc` with the `.ds-grid` of six guide cards, a panel of install commands and the `.ds-list` of updated pages, beside the \"on this page\" sidebar and the inverted `.ds-next` card.\n- Inner pages have no hero. `.ds-content` opens with `.ds-page-header`: breadcrumb, a `--text-h1` title (with a method badge on a reference page), one line at `--text-large`, one secondary button at the right, and a rule below. Tabs are an underlined row directly over the code block they switch (`.ds-tabbed`). A guide ends with its notices and the pagination.\n- Views. The specimen documents an e-mail API in four views. `overview` is the home view described above. `guide` is a how-to: tabbed code, prose, an information and an error notice, pagination, and the page's headings and related links at the right. `reference` is one endpoint: the parameter table and the label key at the left, request, response and the list of status codes at the right. `console` is a form that sends a test request, beside the empty response, the open dialog that revokes a key and the list of keys.\n- Spacing scale: `--space-1` 4px (tree link vertical padding, inside key caps), `--space-2` 8px (button vertical padding, gaps between buttons and badges), `--space-3` 12px (panel head and table cell vertical padding, between tabs and code), `--space-4` 16px (panel, card and code padding, between cards), `--space-5` 24px (between stacked blocks, tree padding), `--space-6` 32px (between the sections of a view, split columns), `--space-7` 48px (content side padding, the gap to the right column).\n- Other sizes: `--size-search` 280px, `--size-tile` 36px (the icon tile of a card), `--size-icon` 16px, `--size-mark` 24px, `--size-dot` 8px, `--size-glow` 380px, `--size-dialog` 440px.\n- Below 1180px the right column goes under the text and split pages stack. Below 860px the tree becomes one row of links under the bar that scrolls sideways, the section links take a second row of the bar, cards stack, and a wide table scrolls inside `.ds-table__wrap`.\n- On a phone (860px and below) the bar wraps: `.ds-nav__brand` and `.ds-nav__actions` stay on the first row, `.ds-nav__links` take a second row that scrolls sideways, and the tree shows only the `.ds-tree__list` that holds the current view. At 640px and below the mono badge of `.ds-nav__brand` and the `.ds-menu__label` are not shown, so the `.ds-menu` keeps only its avatar and still lists every view, the current one with the accent line; the links share the width equally and a tooltip in a panel title opens under its line.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThe conventions for which text sits on which fill are those of the era's first layout and are kept here.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` sit on the page, on `--fill-panel`, `--color-surface-alt` (the stat band, a hovered row, the dialog) and `--color-surface-strong` (the current chip, key caps, quiet badges, empty tally cells). `--color-bar-text` sits on `--fill-bar` (the top bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (the ticker, the head of the release card, code heads, table heads, the footer), with `--color-heading` for a link or the brand on that fill. `--color-input-text` sits on `--fill-input` (form controls and every code block). `--color-inverse-text` sits on `--fill-inverse`, used once per view, for `.ds-callout`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They tint the cover of a card (a gradient from 30% to 6% of the fill over transparent) and colour its drawing (70% of the fill mixed into `--color-heading`); `--color-fill-1` is the hero glow.\n- `--color-accent` marks the current link of the bar and fills the default badge through `--fill-accent`. `--color-accent-alt` is a line and text colour: the mono label of the hero, the node of each timeline entry, the dot of the current sidebar row, the \"changed\" cells of a tally, keywords in code.\n- `--color-success`, `--color-warning` and `--color-danger` are a dot, text, the lit cells of a tally, or a 12% tint with a 32% hairline and the colour as text. Added and removed lines of a diff are a 13% tint with text mixed 55% into `--color-input-text`. Nothing else is filled with them; the destructive button is a tint too.\n- Borders: `--color-border` on boxes and bars, `--color-border-strong` on the release card, secondary buttons, the timeline rule, the current chip and the dialog, `--color-border-muted` between rows inside a box. All `--border-width`; `--border-width-strong` is the line under the current link and the focus offset.\n- Type. One family for body, headings and controls, `--font-mono` for versions, dates, counts, the ticker and code. `--text-base` 15px at `--line-body` 1.5; `--text-ui` 14px for navigation, buttons, forms, tables and card text; `--text-small` 12px for badges, mono labels and dates; `--text-large` 18px for the hero lead and timeline titles. `--text-display` 64px is the hero title only; `--text-h1` 38px page titles, figures and the version on the release card; `--text-h2` 26px column heads and the lead card; `--text-h3` 16px panel and card titles. Headings are `--weight-heading` 700 with negative tracking.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, table heads, sidebar titles), tracked by 6% of the font size. Links are `--color-link` without underline and gain one on hover; quiet links are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 8px for buttons, inputs and the brand tile, `--radius-panel` 12px for panels, code, notices, the callout and the pager, `--radius-page` 18px for the release card, grid cards and the dialog box, `--radius-pill` 4px for badges and chips. `--shadow-panel` is on panels and grid cards, `--shadow-control` (a glow in the button colour) on buttons and the brand tile, `--shadow-dialog` on the release card and the dialog.\n- One-off values written with `calc()` and `color-mix()`: the glow (24% of a fill), cover tints (30% and 6%), drawing colours (70%), status tints (12% and 32%), diff lines (13% and 55%), the notice border (22% and 40%), key cap corners (half of `--radius-control`), tally cell corners (half of `--radius-pill`), mono label tracking, the left column of `.ds-cols--menu` (72% of `--size-side`). Navigation links are at `opacity` 0.62 until current, callout text at 0.78. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill and makes the grid; `.ds-nav`, `.ds-tree`, the views and `.ds-footer` are its direct children.\n- `.ds-content`, `.ds-doc` (`--split`), `.ds-doc__aside`, `.ds-stack`: the padded column of a view, the page body, its right column and a vertical stack. `.ds-panel--grow` fills spare height in a split page.\n- `.ds-brand`: the mark on a 24px tile dressed like the primary button, and the name. Placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar: `.ds-nav__brand` (brand and a mono tag), `.ds-nav__links` of `.ds-nav__link` (`is-current`), `.ds-nav__actions` with `.ds-search` (`.ds-search__icon`, `.ds-search__text`, a `.ds-kbd`) and one small button.\n- `.ds-tree`: the page tree: `.ds-tree__title` over `.ds-tree__list` of `.ds-tree__link` (`is-current`; `--view` marks the links the specimen highlights by view). A link may end in a badge or a mono method.\n- `.ds-hero`: home view only: `.ds-hero__copy` with a `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`; `.ds-hero__art` holds one `.ds-code`.\n- `.ds-page-header`: `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions`.\n- `.ds-prose`: h1, h2, h3, p, lists, inline `code`, `strong`; `.ds-prose__lead`. It stands directly on the page, not in a panel.\n- `.ds-code`: the code block: `.ds-code__head` with an optional dot, `.ds-code__name` and a note or key cap; `.ds-code__body` (a `pre`) with the spans `__k`, `__s`, `__c`, `__n`.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot` (`--success`, `--warning`, `--danger`, `--accent`, `--ring`), `.ds-avatar`: the small parts.\n- `.ds-link`: `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more`. `.ds-linkrow`.\n- `.ds-button`: `--secondary`, `--danger`, `--inverse` (on `.ds-next` only), `--small`, `--large`; `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow`.\n- `.ds-form`: `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono` for keys and addresses), `.ds-form__select`, `.ds-form__textarea` (`--mono`), `is-error` with `.ds-form__error`, `.ds-form__hint`, `.ds-form__check`, `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: the reference table in a panel: mono uppercase head, hairline rows, `.ds-table__name` for a mono parameter name, `.ds-table__num`, `.ds-table__state`. `.ds-table__wrap`, `.ds-table__foot`.\n- `.ds-list`: updated pages between rules: `.ds-list__item` is a `.ds-list__body` (`.ds-list__title`, `.ds-list__text`) and a mono `.ds-list__meta` date.\n- `.ds-panel`: `.ds-panel__head`, `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__rows` of `.ds-panel__row` with `.ds-panel__key`.\n- `.ds-stat`: four `.ds-stat__item` between two rules, each a `.ds-stat__figure` over a mono `.ds-stat__label` behind a 2px left rule.\n- `.ds-grid`: guide cards, three across. `.ds-grid__cell` is a link: `.ds-grid__tile` (`--2`, `--3`, `--4`) with a 16px stroke icon, `.ds-grid__title`, `.ds-grid__text`. `.ds-colhead` with `.ds-colhead__title` names a section of the home view.\n- `.ds-tabs`: underlined `.ds-tabs__tab` row; `is-current`. `.ds-tabbed` joins it to the code block below.\n- `.ds-badge`: `--quiet`, `--outline`, `--new`, `--mono` (methods); status `--success`, `--warning`, `--danger`. `.ds-badgerow`.\n- `.ds-sidebar`: \"on this page\": a mono `.ds-sidebar__title` over `.ds-sidebar__list` along a rule; `.ds-sidebar__item` (`--sub` indented), current with `is-current`.\n- `.ds-next`: the inverted card: `.ds-next__title`, `.ds-next__text`, one `.ds-button--inverse`.\n- `.ds-notice`: `--error`, `.ds-notice__title`, `.ds-noticerow`.\n- `.ds-pagination`: previous, the numbered steps of a guide, next: `.ds-pagination__link`, `is-current`, `is-disabled`.\n- `.ds-breadcrumb`: `.ds-breadcrumb__item`, `.ds-breadcrumb__current`.\n- `.ds-dialog`: `.ds-dialog__box`, `.ds-dialog__head`, `.ds-dialog__title`, `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button, in a dashed box.\n- `.ds-footer`: one line on `--fill-bar-alt` under the view: the copyright and `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-menu`: a drop-down behind a button in the bar (`.ds-menu__button`, `.ds-menu__list`); it lists every view, so on a phone it is the full navigation.\n- `.ds-menu__item`: one link of the drop-down; the current view carries the accent line and the stronger fill.\n- `.ds-menu__item--view`: an item of the menu that names a view of the site; the current view's item is marked by one `:has()` rule per view, like the bar links, so the menu is a second way to every view on a phone.\n- `.ds-menu__title`: a small mono label over a group of links in the drop-down.\n- `.ds-avatar`: initials in a circle for a person, in the account menu, quotes and lists.\n- `.ds-tooltip`: a small question mark beside a title; `.ds-tooltip__tip` opens on hover or focus, never by default.\n- `.ds-accordion`: questions as `details` items (`.ds-accordion__item`, `.ds-accordion__summary`, `.ds-accordion__body`); the first is open.\n- `.ds-switch`: an on or off setting that takes effect at once, drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`).\n- `.ds-progress`: a thin bar for a build, a rollout or a quota, with a mono line above (`.ds-progress__head`, `.ds-progress__value`, `.ds-progress__bar`).\n\n## Never\n\n- `block-gap <= 48px`: sections of a view are 32px apart, blocks inside them 24px.\n- `font-size >= 12px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-weight <= 700`: headings are bold; nothing is heavier.\n- `font-families <= 2`: one grotesque and one monospace.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 5%`: only mono labels are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 3px`: the hero title is pulled together by 2.4px; nothing is spaced wider than that.\n- `border-width <= 3px`: rules are 1px hairlines; 3px is the strong rule over a figure and under the current link.\n- `border-radius <= 3px`: boxes are square and controls eased by 3px; pills and circles are shapes.\n- `box-shadow-blur <= 48px`: only the plate and the dialog cast a soft shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 3%`: the dot grid of the page is the only gradient; no box is filled with one.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new page is a link in `.ds-tree` and a view that opens with `.ds-page-header`; text goes straight on the page as `.ds-prose`, anything boxed is a `.ds-panel`, every example is a `.ds-code` with a head that names it, and names of parameters, methods, keys and codes are set in `--font-mono`. Keep to the era's conventions for which text sits on which fill, tint with the fills and the status colours instead of filling with them, and use one glow and one inverted card per view. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-page: 1100px;\n --size-tree: 264px;\n --size-toc: 208px;\n --size-top: 56px;\n --size-search: 280px;\n --size-mark: 24px;\n --size-dot: 8px;\n --size-icon: 16px;\n --size-tile: 36px;\n --size-dialog: 440px;\n --size-glow: 380px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n}\n\n/* shell: a bar across the top, the tree of pages at the left, the page beside it */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-tree) minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-view {\n grid-column: 2;\n grid-row: 2;\n min-width: 0;\n}\n.ds-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-6) var(--space-7) var(--space-7);\n}\n.ds-doc {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-toc);\n gap: var(--space-7);\n align-items: start;\n}\n.ds-doc--split {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: stretch;\n}\n.ds-doc__aside {\n position: sticky;\n top: calc(var(--size-top) + var(--space-5));\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack > .ds-panel--grow {\n flex: 1 0 auto;\n}\n\n/* nav: the top bar; brand and section links at the left, search and the dashboard at the right */\n.ds-nav {\n grid-column: 1 / -1;\n grid-row: 1;\n position: sticky;\n top: 0;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n min-width: 0;\n min-height: var(--size-top);\n padding: 0 var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__brand {\n display: flex;\n align-items: center;\n flex: 0 0 calc(var(--size-tree) - var(--space-5) - var(--space-5));\n gap: var(--space-2);\n}\n.ds-nav__links {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n gap: var(--space-5);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n height: 100%;\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n border-top: var(--border-width-strong) var(--border-style) transparent;\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.66;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__link.is-current {\n border-bottom-color: var(--color-accent-alt);\n opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-nav__link[href=\"#reference\"],\n.ds-page:has(#console:target) .ds-nav__link[href=\"#console\"] {\n border-bottom-color: var(--color-accent-alt);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-3);\n}\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n width: var(--size-search);\n min-width: 0;\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);\n background: var(--fill-input);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n line-height: var(--line-body);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-search:hover,\n.ds-search.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-search:focus-visible,\n.ds-search.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-search__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-search__text {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* tree: every page of the documentation, in groups, on the secondary bar */\n.ds-tree {\n grid-column: 1;\n grid-row: 2 / span 2;\n position: sticky;\n top: var(--size-top);\n align-self: start;\n min-width: 0;\n height: calc(100vh - var(--size-top));\n padding: var(--space-5) var(--space-3) var(--space-5) var(--space-5);\n overflow-y: auto;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tree__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n opacity: 0.75;\n}\n.ds-tree__list {\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-tree__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n margin-left: calc(var(--space-3) * -1);\n padding: var(--space-1) var(--space-3);\n color: inherit;\n border-radius: var(--radius-control);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-tree__link:hover,\n.ds-tree__link.is-hover {\n color: var(--color-heading);\n}\n.ds-tree__link.is-current {\n background: color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent);\n color: var(--color-heading);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-tree__link--view[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-tree__link--view[href=\"#overview\"],\n.ds-page:has(#guide:target) .ds-tree__link--view[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-tree__link--view[href=\"#reference\"],\n.ds-page:has(#console:target) .ds-tree__link--view[href=\"#console\"] {\n background: color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent);\n color: var(--color-heading);\n}\n\n/* hero: the opening of the documentation; the claim at the left, a first request at the right */\n.ds-hero {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-6) 0 var(--space-2);\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-6) * -1);\n left: calc(var(--space-7) * -1);\n right: 0;\n height: var(--size-glow);\n background: radial-gradient(ellipse 38% 80% at 40% 0, color-mix(in srgb, var(--color-fill-1) 28%, transparent), transparent 72%);\n pointer-events: none;\n}\n.ds-hero__copy {\n position: relative;\n min-width: 0;\n}\n.ds-hero__title {\n margin: var(--space-3) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: calc(var(--text-display) * 0.78);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 48ch;\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-hero__art {\n position: relative;\n min-width: 0;\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__art .ds-code {\n border-color: var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n\n/* page header: breadcrumb, title and one line; the action at the right; a rule below */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n padding-bottom: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 64ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: figures side by side, each over a mono caption, parted by rules */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-5) 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n min-width: 0;\n padding-left: var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left-color: var(--color-accent-alt);\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* grid: guide cards; an icon on a tile tinted with one of the fills, a title, a line */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: block;\n min-width: 0;\n padding: var(--space-4);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n background: var(--color-surface-alt);\n border-color: var(--color-border-strong);\n}\n.ds-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-tile);\n height: var(--size-tile);\n margin-bottom: var(--space-4);\n background: color-mix(in srgb, var(--color-fill-1) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-1) 75%, var(--color-heading));\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 35%, transparent);\n border-radius: var(--radius-control);\n}\n.ds-grid__tile--2 {\n background: color-mix(in srgb, var(--color-fill-2) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-2) 75%, var(--color-heading));\n border-color: color-mix(in srgb, var(--color-fill-2) 35%, transparent);\n}\n.ds-grid__tile--3 {\n background: color-mix(in srgb, var(--color-fill-3) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-3) 75%, var(--color-heading));\n border-color: color-mix(in srgb, var(--color-fill-3) 35%, transparent);\n}\n.ds-grid__tile--4 {\n background: color-mix(in srgb, var(--color-fill-4) 16%, transparent);\n color: color-mix(in srgb, var(--color-fill-4) 75%, var(--color-heading));\n border-color: color-mix(in srgb, var(--color-fill-4) 35%, transparent);\n}\n.ds-grid__tile svg {\n display: block;\n width: 50%;\n height: 50%;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-colhead {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-3) 0 calc(var(--space-2) * -1);\n}\n.ds-colhead:first-child {\n margin-top: 0;\n}\n.ds-colhead__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* list: pages that changed, a title and a line at the left, the date at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-list__meta {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* tabs: an underlined row, here over a code block */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) 0;\n color: var(--color-text-muted);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent-alt);\n}\n.ds-tabbed {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* sidebar: the headings of this page along a rule at the right */\n.ds-sidebar {\n font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item {\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-1) 0 var(--space-1) var(--space-4);\n border-left: var(--border-width) var(--border-style) transparent;\n}\n.ds-sidebar__item--sub {\n padding-left: var(--space-6);\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n border-left-color: var(--color-accent-alt);\n}\n\n/* next: the inverted card that closes a page */\n.ds-next {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n}\n.ds-next__title {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-next__text {\n display: block;\n font-size: var(--text-ui);\n opacity: 0.72;\n}\n\n/* footer: one line under the page */\n.ds-footer {\n grid-column: 2;\n grid-row: 3;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n min-width: 0;\n padding: var(--space-4) var(--space-7);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n justify-content: flex-end;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-heading);\n}\n\n/* brand: the mark on a tile dressed like the primary button, the name beside it */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* small parts used everywhere: the mono label, the key cap, the status dot, the avatar */\n.ds-eyebrow {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n color: var(--color-accent-alt);\n}\n.ds-kbd {\n display: inline-block;\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-text-muted);\n border-radius: 50%;\n}\n.ds-dot--success {\n background: var(--color-success);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-success) 22%, transparent);\n}\n.ds-dot--warning {\n background: var(--color-warning);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-warning) 22%, transparent);\n}\n.ds-dot--danger {\n background: var(--color-danger);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-danger) 22%, transparent);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n}\n.ds-mono {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-text-muted);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n\n/* code block: a title strip on the secondary bar, lines in the mono font on the input fill */\n.ds-code {\n min-width: 0;\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-code__head {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-code__name {\n flex: 1 1 auto;\n min-width: 0;\n}\n.ds-code__body {\n display: block;\n margin: 0;\n padding: var(--space-4);\n overflow-x: auto;\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n white-space: pre;\n}\n.ds-code__k {\n color: var(--color-accent-alt);\n}\n.ds-code__s {\n color: var(--color-success);\n}\n.ds-code__c {\n color: var(--color-text-muted);\n}\n.ds-code__n {\n color: var(--color-link);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n content: \" \\2192\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n border-color: var(--color-text-muted);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 22%, transparent);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 82%, var(--color-inverse));\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border-muted);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input--mono,\n.ds-form__textarea--mono {\n font-family: var(--font-mono);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) * 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:hover,\n.ds-form__select:hover,\n.ds-form__textarea:hover {\n border-color: var(--color-border-strong);\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n outline-offset: 0;\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* badge: a small label; the status variants are a tint of their colour with a hairline */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-color: var(--color-border);\n}\n.ds-badge--outline {\n background: transparent;\n color: var(--color-text-muted);\n border-color: var(--color-border-strong);\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 32%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 12%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 32%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 12%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);\n}\n.ds-badge--mono {\n font-family: var(--font-mono);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* table: hairline rows; the head is a strip of small mono labels on the secondary bar */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.04);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr:hover th,\n.ds-table tbody tr.is-hover td,\n.ds-table tbody tr.is-hover th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n}\n.ds-table__state {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* panel: a hairline box on the surface fill */\n.ds-panel {\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel > .ds-code {\n border: 0;\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n}\n.ds-panel__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-panel__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__key {\n color: var(--color-text-muted);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 22%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--space-6) - var(--space-1));\n padding: var(--space-1) var(--space-2);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n font-variant-numeric: tabular-nums;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-heading);\n border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* dialog: a dimmed block with the box in its middle */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-4) 0;\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-base) * 0.75);\n height: calc(var(--text-base) * 0.75);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__body > .ds-linkrow {\n margin-top: var(--space-4);\n}\n.ds-panel__body > .ds-badgerow + p {\n margin-top: var(--space-3);\n}\n\n/* a parameter name in a reference table */\n.ds-table__name {\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-weight: var(--weight-body);\n}\n\n/* medium windows: the list of headings goes under the page, split pages stack */\n@media (max-width: 1180px) {\n .ds-doc,\n .ds-doc--split {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-doc__aside {\n position: static;\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n/* narrow windows: the tree becomes one row of links under the bar */\n@media (max-width: 860px) {\n .ds-page {\n display: block;\n min-height: 0;\n }\n .ds-nav {\n flex-wrap: wrap;\n gap: 0 var(--space-3);\n padding: var(--space-2) var(--space-4) 0;\n }\n .ds-nav__brand {\n flex: 1 1 auto;\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-nav__link {\n padding: var(--space-2) 0;\n }\n .ds-search {\n display: none;\n }\n .ds-tree {\n position: static;\n display: flex;\n gap: var(--space-5);\n height: auto;\n padding: var(--space-2) var(--space-4);\n overflow-x: auto;\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-tree__title {\n display: none;\n }\n .ds-tree__list {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n }\n .ds-tree__link {\n margin-left: 0;\n white-space: nowrap;\n }\n .ds-tree__link .ds-badge {\n display: none;\n }\n .ds-content {\n gap: var(--space-5);\n padding: var(--space-5) var(--space-4) var(--space-6);\n }\n .ds-hero {\n padding-top: var(--space-2);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-hero__lead,\n .ds-page-header__text {\n font-size: var(--text-base);\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-tabs {\n overflow-x: auto;\n }\n .ds-table {\n min-width: 60ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer {\n padding: var(--space-4);\n }\n .ds-footer__links {\n justify-content: flex-start;\n }\n}\n\n/* menu: a drop-down behind a button in the bar; on a phone it is the way to every view */\n.ds-menu {\n position: relative;\n display: inline-block;\n flex: 0 0 auto;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button::after {\n content: \"\";\n width: var(--space-1);\n height: var(--space-1);\n margin-left: var(--space-1);\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n}\n.ds-menu__button .ds-avatar {\n margin: calc(var(--space-1) * -1) 0;\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu[open] > .ds-menu__button {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 30;\n min-width: calc(var(--size-mark) * 9);\n margin: var(--space-1) 0 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu__title {\n padding: var(--space-2) var(--space-2) var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-menu__title--rule {\n margin-top: var(--space-1);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-1) var(--space-2);\n color: var(--color-text);\n border-left: var(--border-width-strong) var(--border-style) var(--color-surface);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-left-color: var(--color-surface-strong);\n}\n.ds-menu__hint {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* tooltip: a hint that opens on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--space-4);\n height: var(--space-4);\n margin-left: var(--space-1);\n vertical-align: middle;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: calc(var(--size-mark) * 10);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n display: block;\n}\n\n/* accordion: questions that open one by one */\n.ds-accordion {\n display: block;\n min-width: 0;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n\n/* switch: an on and off setting drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2 + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n bottom: var(--border-width-strong);\n left: var(--border-width-strong);\n width: 40%;\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background: var(--color-accent);\n border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n left: auto;\n right: var(--border-width-strong);\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__label {\n font-size: var(--text-ui);\n}\n\n/* progress: a thin bar for a build, a rollout or a quota */\n.ds-progress {\n display: block;\n min-width: 0;\n}\n.ds-progress__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-progress__value {\n color: var(--color-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-dot);\n overflow: hidden;\n appearance: none;\n -webkit-appearance: none;\n background: var(--color-surface-strong);\n color: var(--color-accent);\n border: 0;\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-menu__item--view[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-menu__item--view[href=\"#overview\"],\n.ds-page:has(#guide:target) .ds-menu__item--view[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-menu__item--view[href=\"#reference\"],\n.ds-page:has(#console:target) .ds-menu__item--view[href=\"#console\"] {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-left-color: var(--color-accent);\n font-weight: var(--weight-bold);\n}\n@media (max-width: 640px) {\n .ds-menu__label {\n display: none;\n }\n}\n/* narrow windows: the tree shows only the section of the current view */\n@media (max-width: 860px) {\n .ds-tree__list {\n display: none;\n }\n .ds-page:not(:has(.ds-view:target)) .ds-tree__list:has(.ds-tree__link--view[href=\"#overview\"]),\n .ds-page:has(#overview:target) .ds-tree__list:has(.ds-tree__link--view[href=\"#overview\"]),\n .ds-page:has(#guide:target) .ds-tree__list:has(.ds-tree__link--view[href=\"#guide\"]),\n .ds-page:has(#reference:target) .ds-tree__list:has(.ds-tree__link--view[href=\"#reference\"]),\n .ds-page:has(#console:target) .ds-tree__list:has(.ds-tree__link--view[href=\"#console\"]) {\n display: flex;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__brand .ds-badge {\n display: none;\n }\n}\n\n/* phones: the tooltip stays inside the window; the links are tabs that share the bar */\n@media (max-width: 640px) {\n .ds-panel__title {\n position: relative;\n }\n .ds-panel__title .ds-tooltip {\n position: static;\n }\n .ds-panel__title .ds-tooltip__tip {\n max-width: min(calc(var(--size-mark) * 10), calc(100vw - var(--space-4) * 4));\n }\n .ds-nav__links {\n gap: 0;\n }\n .ds-nav__links > li {\n flex: 1 1 auto;\n }\n .ds-nav__link {\n justify-content: center;\n padding-right: var(--space-2);\n padding-left: var(--space-2);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: dark developer tools documentation specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n docs\n
\n \n
\n \n \n Search the docs\n Ctrl K\n \n Dashboard\n
AONorthwind
\n
\n
\n\n\n\n
\n
\n
\n
\n Documentation / v2\n

Send e-mail from your code

\n

chronoskin is one HTTP endpoint for transactional e-mail. These pages take you from an API key to a delivered message.

\n
\n Quickstart\n API reference\n
\n
\n
\n
\n
POST /v2/emails202 in 84 ms
\n
curl api.chronoskin.dev/v2/emails \\\n  -H \"Authorization: Bearer $KEY\" \\\n  -d from=\"hello@harbour.dev\" \\\n  -d to=\"ada@example.org\" \\\n  -d subject=\"Your receipt\"\n\n{ \"id\": \"em_41f9c2\", \"status\": \"queued\" }
\n
\n
\n
\n\n \n\n
\n
\n

Guides

All guides
\n
\n \n \n

Send an e-mail

\n

One request, with HTML, text or a template.

\n \n \n \n

Verify a domain

\n

Three DNS records so mail arrives as you.

\n \n \n \n

Templates

\n

Store a layout once, fill it per message.

\n \n \n \n

Webhooks

\n

Be told when a message is delivered or opened.

\n \n \n \n

Bounces

\n

What comes back, and what to stop sending.

\n \n \n \n

API reference

\n

Every endpoint, parameter and error code.

\n \n
\n\n
\n

Install a library ?All four libraries follow the API version. 2.4 is current.

all at version 2.4
\n
\n
    \n
  • Node.jsnpm install chronoskin
    • \n
  • Pythonpip install chronoskin
    • \n
  • Gogo get chronoskin.dev/go/v2
    • \n
  • Rubygem install chronoskin
    • \n
\n
\n
Which runtimes are supported?

Node.js 18, Python 3.9, Go 1.21 and Ruby 3.1, and every later version.

Is there a library for another language?

Not yet. The API is plain HTTP and JSON, so any client works.

How do I pin a version?

Pin the library as usual. Each one sends the API version it was built for.

\n
\n\n

Recently updated

March 2025
\n
    \n
  • Templates New

    Variables, partials and a preview endpoint.

    12 Mar 2025
    • \n
  • Send e-mail

    The scheduled_at parameter accepts a time zone.

    4 Mar 2025
    • \n
  • Bounces and complaints

    A table of the codes each large provider returns.

    26 Feb 2025
    • \n
\n
\n\n
\n \n
\n No key yet?Make one in the console and send a test.\n Open the console\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Docs
    2. \n
  2. Guides
    3. \n
  3. Send an e-mail
    4. \n
\n

Send an e-mail

\n

From an API key to a message in an inbox, in about five minutes.

\n
\n
\n Try it in the console\n
\n
\n\n
\n
\n
\n \n
\n
send.jsCopy
\n
import { Chronoskin } from \"chronoskin\";\n\nconst mail = new Chronoskin(process.env.CHRONOSKIN_KEY);\n\nconst { id } = await mail.emails.send({\n  from: \"Harbour <hello@harbour.dev>\",\n  to: [\"ada@example.org\"],\n  subject: \"Your receipt\",\n  html: \"<p>Thanks for your order.</p>\",\n});  // em_41f9c2
\n
\n
\n\n
\n

Before you send

\n

You need an API key and a sender address on a domain you have verified.

\n

Until a domain is verified you can only send to your own address. That is enough to try everything on this page.

\n

What the call returns

\n
    \n
  • An id you can use to look the message up later
    • \n
  • The status queued, which becomes delivered or bounced
    • \n
  • Nothing else: delivery itself is reported by webhook
    • \n
\n

Sending to several people

\n

Pass up to 50 addresses in to. Each recipient gets a separate message and never sees the others.

\n
\n\n
\n

Keys are shown once. Store the key in an environment variable, never in the repository.

\n

403 domain_not_verified. The sender address is on a domain without valid DNS records.

\n
\n\n \n
\n\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Docs
    2. \n
  2. API reference
    3. \n
  3. Send e-mail
    4. \n
\n

Send e-mail POST

\n

Queues one message for each recipient and returns its id.

\n
\n
\n Run in the console\n
\n
\n\n
\n
\n
\n

Body parameters

application/json
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
NameTypeNeededMax
fromstringrequired320
tostring[]required50
subjectstringrequired998
htmlstringoptional5,000,000
scheduled_atdatetimeoptional30
tagsobject[]beta10
\n
\n
Max is characters, entries, or days ahead for scheduled_at.
\n
\n
\n

Labels used in this reference

\n
\n
\n v2\n GET\n POST\n beta\n required\n optional\n
\n

A parameter marked beta may change its name or type without a new API version.

\n
\n
\n
\n\n
\n
\n
RequestCopy
\n
POST /v2/emails\nAuthorization: Bearer ck_live_...\n\n{\n  \"from\": \"hello@harbour.dev\",\n  \"to\": [\"ada@example.org\"],\n  \"subject\": \"Your receipt\",\n  \"html\": \"<p>Thanks.</p>\"\n}
\n
\n
\n
Response, 20284 ms
\n
{\n  \"id\": \"em_41f9c2\",\n  \"status\": \"queued\"\n}
\n
\n
\n

Responses

\n
\n
    \n
  • 202 Queuedthe id is returned
    • \n
  • 429 Too many requestsretry after 1 s
    • \n
  • 403 Domain not verifiedcheck DNS
    • \n
  • 422 Invalid parametersee the message
    • \n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Docs
    2. \n
  2. API console
    3. \n
\n

API console

\n

Send a real request with a test key and read what comes back.

\n
\n
\n Read the reference\n
\n
\n\n
\n
\n
\n

Test keys never deliver. Messages are accepted, logged and dropped.

\n
\n
\n

Request

POST /v2/emails
\n
\n
\n \n
\n \n \n
\n \n \n \n
\n \n Copy as cURL\n \n Revoke key\n
\n
\n
\n
\n
\n\n
\n
\n

Response

waiting
\n
\n
\n \n

No requests yet

\n

Fill in the form and send. The status, headers and body appear here.

\n Follow the quickstart\n
\n
\n
\n
\n
\n
\n

Revoke this key?

\n \n
\n
\n

Requests signed with ck_test_9d2 start failing with 401 at once. A new key has a new value.

\n
\n
\n Keep the key\n Revoke key\n
\n
\n
\n
\n

Your keys

New key
\n
\n
    \n
  • ck_live_...a7c1used 2 minutes ago
    • \n
  • ck_test_...9d2never used
    • \n
\n
\n
Free e-mails, March1,240 / 3,000
41%
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.dev-dark.docs.s03.p01.t04.u08\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"dev-dark\",\n \"years\": [\n 2019,\n 2026\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-dd-3148\",\n \"short\": \"v1-dd-3148\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #08090a;\n --color-canvas: #08090a;\n --color-surface: #0f1011;\n --color-surface-alt: #151617;\n --color-surface-strong: #1f2023;\n --color-bar: #08090a;\n --color-bar-text: #d0d6e0;\n --color-bar-alt: #0c0d0e;\n --color-bar-alt-text: #8a8f98;\n --color-inverse: #e5e5e6;\n --color-inverse-text: #08090a;\n --color-text: #d0d6e0;\n --color-text-muted: #8a8f98;\n --color-heading: #f7f8f8;\n --color-heading-alt: #e5e5e6;\n --color-link: #8c97ff;\n --color-link-quiet: #8a8f98;\n --color-link-visited: #a69fd8;\n --color-link-hover: #f7f8f8;\n --color-link-active: #5e6ad2;\n --color-border: rgb(255 255 255 / 0.08);\n --color-border-strong: rgb(255 255 255 / 0.16);\n --color-border-muted: rgb(255 255 255 / 0.05);\n --color-accent: #5e6ad2;\n --color-accent-text: #ffffff;\n --color-accent-alt: #e4f222;\n --color-fill-1: #5e6ad2;\n --color-fill-2: #52a8ff;\n --color-fill-3: #62c073;\n --color-fill-4: #8a8f98;\n --color-button: #e5e5e6;\n --color-button-text: #08090a;\n --color-button-hover-text: #08090a;\n --color-button-secondary: rgb(255 255 255 / 0.05);\n --color-button-secondary-text: #f7f8f8;\n --color-input: #0c0d0e;\n --color-input-text: #f7f8f8;\n --color-input-border: rgb(255 255 255 / 0.12);\n --color-disabled: #1f2023;\n --color-disabled-text: #62666d;\n --color-danger: #f34e52;\n --color-danger-surface: #1d1011;\n --color-success: #62c073;\n --color-warning: #ffd60a;\n --color-notice: #11132a;\n --color-notice-text: #c3c8ff;\n --color-focus: #8c97ff;\n --color-shadow: rgb(0 0 0 / 0.5);\n --color-overlay: rgb(0 0 0 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: \"Space Grotesk\", \"Familjen Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Space Grotesk\", \"Familjen Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: \"Space Grotesk\", \"Familjen Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Space Mono\", \"Fira Code\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 64px;\n --text-h1: 38px;\n --text-h2: 26px;\n --text-h3: 16px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.6px;\n --display-tracking: -2.4px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 0;\n --radius-pill: 9999px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: 0 1px 0 var(--color-border-strong);\n --shadow-control-hover: 0 2px 0 var(--color-border-strong);\n --shadow-control-pressed: inset 0 2px 0 var(--color-border-strong);\n --shadow-dialog: 0 0 0 1px var(--color-border), 0 24px 48px -16px var(--color-shadow);\n --shadow-text: none;\n --fill-page: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 80%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 84%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;\n --backdrop-blur: 0px;\n}\n" } }