{ "id": "v1-dd-3684", "long_id": "v1.dev-dark.docs.s03.p06.t08.u04", "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-3684", "preview_url": "https://chrono.skin/s/v1-dd-3684/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 pack; this layout keeps to them and assumes neither a light nor a dark palette.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` sit on `--color-page`, `--fill-panel`, `--color-surface-alt` and `--color-surface-strong`. `--color-bar-text` sits on `--fill-bar` (the masthead). `--color-bar-alt-text` sits on `--fill-bar-alt` (the strip, a table head, the title strip of a code block, the footer). `--color-inverse-text` sits on `--fill-inverse`, used for the call to action and the tooltip. `--color-button-text` sits on `--fill-button`, `--color-accent-text` on `--fill-accent`, `--color-input-text` on `--fill-input`, `--color-notice-text` on `--color-notice`.\n- `--color-fill-1` to `--color-fill-4` never carry text at full strength. They are flat tints of 16% to 18% behind text in the ordinary text colours (the plate and the block of a story cell), and 22% in an avatar. Nothing glows.\n- `--color-accent-alt` is a text and line colour: numbered labels, the line of the current navigation link and tab, the rule of a pull quote, the numbers of the list, the filled part of a meter, the knob of a switch that is on, the unit after the plate's figure.\n- `--color-success`, `--color-warning` and `--color-danger` appear as a dot, as text, or as a 12% tint with a 32% hairline; the destructive button is built the same way.\n- Borders: `--color-border` on rows, boxes and between cells; `--color-border-strong` on secondary buttons, the dialog, avatars, the dashed empty state and, at `--border-width-strong`, the rule over a figure, a result and a story's meta row; `--color-border-muted` between rows inside a box. Crop marks are `--color-text-muted`.\n- Type. A heavy grotesque for headings, a plainer one for text and controls, one monospace for labels and data. `--text-base` 16px at `--line-body` 1.55; `--text-ui` 14px for controls, tables and card text; `--text-small` 12px for mono labels, badges and dates; `--text-large` 21px for leads. `--text-display` 76px is the lead headline, and the plate's figure is one and a half times that; `--text-h1` 46px page titles, figures and quotes; `--text-h2` 28px the pull quote and the brand in the masthead; `--text-h3` 18px cell and panel titles.\n- Uppercase is for mono labels only (`.ds-eyebrow`, the strip, table heads, form labels, the breadcrumb, footer titles), tracked by 8% of their size; `--ui-transform` applies to buttons, tabs, badges and navigation.\n- Links are `--color-link` with `--link-decoration`; quiet links in the breadcrumb, sidebar, table and footer are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` on buttons, inputs, the brand tile and carousel arrows; `--radius-panel` on panels, notices, code blocks, the block of a story cell, the menu and the empty state; `--radius-page` on the plate, the box of story cells and the dialog; `--radius-pill` on badges, avatars, dots, meters and switches. `--shadow-panel` is on panels and the box of story cells, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the plate, the dialog and the menu. `--backdrop-blur` blurs what scrolls under the masthead.\n- One-off values written with `calc()` and `color-mix()` because the vocabulary has no token: the tints named above with a 40% hairline around the plate, navigation links at `opacity` 0.68 until current, the text of the inverted block at 0.72 and footer titles at 0.7, the hovered destructive button (22%), the hovered inverse button (82%), the notice border (24% and 40%), key cap and inline code corners (half of `--radius-control`), mono label tracking, the headline capped at 10vw and the plate's figure at 22vw so that they shrink on a narrow window.\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`: mono labels, badges and dates are the smallest text.\n- `font-size <= 114px`: the figure on the plate is the largest text, the headline is 76px.\n- `font-weight <= 700`: headings are bold; nothing is black.\n- `font-families <= 3`: a heavy grotesque, a text grotesque and one monospace.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `uppercase-text <= 10%`: only mono labels are uppercase.\n- `letter-spacing <= 4px`: only the headline and the plate's figure are pulled together, by 3.2px.\n- `border-width <= 2px`: rules and outlines are 1px hairlines; 2px is the line under the current link.\n- `border-radius <= 18px`: 8px on controls, 12px on panels, 18px on the largest boxes.\n- `box-shadow-blur <= 70px`: only the release card and the dialog cast a wide shadow.\n- `text-shadow = none`: text is flat on every fill.\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.p06.t08.u04\",\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-3684\",\n \"short\": \"v1-dd-3684\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #101412;\n --color-canvas: #101412;\n --color-surface: #161c19;\n --color-surface-alt: #1c2420;\n --color-surface-strong: #27312b;\n --color-bar: #171e1a;\n --color-bar-text: #e3ebe5;\n --color-bar-alt: #131816;\n --color-bar-alt-text: #9fada4;\n --color-inverse: #f3efe2;\n --color-inverse-text: #161c19;\n --color-text: #c2cdc5;\n --color-text-muted: #85938a;\n --color-heading: #f1f6f2;\n --color-heading-alt: #dfe8e1;\n --color-link: #f2b544;\n --color-link-quiet: #9fada4;\n --color-link-visited: #c9a86a;\n --color-link-hover: #ffd27a;\n --color-link-active: #d99a1c;\n --color-border: rgb(210 240 220 / 0.09);\n --color-border-strong: rgb(210 240 220 / 0.2);\n --color-border-muted: rgb(210 240 220 / 0.055);\n --color-accent: #f2b544;\n --color-accent-text: #1c1403;\n --color-accent-alt: #a1c181;\n --color-fill-1: #f2b544;\n --color-fill-2: #a1c181;\n --color-fill-3: #6fb7c9;\n --color-fill-4: #5d6b62;\n --color-button: #f2b544;\n --color-button-text: #1c1403;\n --color-button-hover-text: #1c1403;\n --color-button-secondary: #1c2420;\n --color-button-secondary-text: #f1f6f2;\n --color-input: #0c100e;\n --color-input-text: #f1f6f2;\n --color-input-border: rgb(210 240 220 / 0.16);\n --color-disabled: #1c2420;\n --color-disabled-text: #5d6b62;\n --color-danger: #f0705a;\n --color-danger-surface: #251512;\n --color-success: #6fcf8e;\n --color-warning: #ff9a52;\n --color-notice: #1b2219;\n --color-notice-text: #cfe3c4;\n --color-focus: #ffd27a;\n --color-shadow: rgb(0 0 0 / 0.38);\n --color-overlay: rgb(8 11 9 / 0.66);\n}\n\n/* @part type */\n:root {\n --font-body: \"Instrument Sans\", \"Schibsted Grotesk\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Archivo, \"Schibsted Grotesk\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Instrument Sans\", \"Schibsted Grotesk\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: \"Red Hat Mono\", \"Fira Code\", ui-monospace, Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 76px;\n --text-h1: 46px;\n --text-h2: 28px;\n --text-h3: 18px;\n --line-body: 1.55;\n --line-heading: 1.08;\n --line-display: 0.96;\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.9px;\n --display-tracking: -3.2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 12px;\n --radius-pill: 4px;\n --radius-page: 18px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 14px 36px -14px var(--color-shadow);\n --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 14%, transparent), 0 4px 14px color-mix(in srgb, var(--color-button) 26%, transparent);\n --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 24%, transparent), 0 6px 26px color-mix(in srgb, var(--color-button) 46%, transparent);\n --shadow-control-pressed: inset 0 2px 6px var(--color-shadow);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 6%, transparent), 0 28px 70px var(--color-shadow);\n --shadow-text: none;\n --fill-page: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 80%, transparent), transparent 720px) no-repeat, var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt) 88%, var(--color-fill-2)), var(--color-bar-alt));\n --fill-inverse: linear-gradient(135deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 78%, var(--color-accent)));\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(160deg, color-mix(in srgb, var(--color-surface) 93%, white), var(--color-surface) 55%);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 78%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: color 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;\n --backdrop-blur: 0px;\n}\n" } }