{ "id": "v1-dd-3555", "long_id": "v1.dev-dark.docs.s03.p05.t05.u05", "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-3555", "preview_url": "https://chrono.skin/s/v1-dd-3555/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` (a hovered row, the current sidebar row, the dialog) and `--color-surface-strong` (the current tab, key caps, quiet badges). `--color-bar-text` sits on `--fill-bar` (both rows of the bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (table heads, the sidebar title, code heads, the footer), with `--color-heading` for the brand there. `--color-input-text` sits on `--fill-input` (form controls and code). `--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 colour the sparkline of a tile and the lines of the chart (78% or 82% of the fill mixed into `--color-heading`), rule the top of a region cell at full strength and tint it at 13%; `--color-fill-1` is the glow in the corner of the banner.\n- `--color-accent` marks the current section and fills the default badge through `--fill-accent`. `--color-accent-alt` is a line and text colour: the mono label of the banner, the rule of the page header, the line under the current tab, keywords in code.\n- `--color-success`, `--color-warning` and `--color-danger` carry the meaning of the page and are used at full strength only for things without text on them: the daily bars, dots, meters, the knob of a switch. With text they are a 12% tint with a 32% hairline and the colour as text. The destructive button is a tint too.\n- Borders: `--color-border` on boxes, bars and between cells, `--color-border-strong` on the banner, secondary buttons, grid lines of the chart and the dialog, `--color-border-muted` between rows inside a box. All `--border-width`; `--border-width-strong` is the line of the current section and tab, the top of a region cell and the rule of the page header.\n- Type. `--font-mono` for every figure, date, id and label; body, headings and controls use their own tokens. `--text-base` 14px at `--line-body` 1.7; `--text-ui` 13px for navigation, buttons, forms, tables, rows and rules; `--text-small` 12px for badges, mono labels, facts and legends; `--text-large` 15px for the banner's lead. `--text-display` 44px is the verdict only; `--text-h1` 26px page titles and tile figures; `--text-h2` 18px section heads and region figures; `--text-h3` 13px panel and cell titles. Headings take `--heading-transform` and `--heading-tracking`.\n- Uppercase comes from `--heading-transform` on headings and from mono labels (`.ds-stat__label`, table heads, sidebar titles, region codes), tracked by 6% of the font size. Links in running text and tables follow `--link-decoration`; quiet links are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` for buttons, inputs and the tabs, `--radius-panel` for panels, tiles, the list, notices and the callout, `--radius-page` for the banner, region cells and the dialog box, `--radius-pill` for badges, meters and switches. `--shadow-panel` is on panels, tiles, cells and the list, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the banner and the dialog.\n- One-off values written with `calc()` and `color-mix()`: the banner glow (20% of a fill), region tints (13%), line colours (78% and 82%), status tints (12%, 14%, 22%, 32%, 40%, 55%), the wash of the current section (9%), the notice border (22% and 40%), the corners of a daily bar (30% of `--radius-control`), the gap between bars (half of `--space-1`), mono label tracking. Navigation cells are at `opacity` 0.6 until current, daily bars at 0.86, 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 facts are the smallest text.\n- `font-size <= 44px`: the verdict of the banner is the largest text.\n- `font-weight <= 700`: headings are bold; nothing is heavier.\n- `font-families <= 1`: one monospace family for everything.\n- `line-height <= 1.7`: body text is set at 1.7.\n- `uppercase-text <= 15%`: headings and mono labels are uppercase, running text never.\n- `letter-spacing <= 1px`: labels are spaced by 6% of their size, headings by 0.4px.\n- `border-width <= 2px`: rules and outlines are 1px hairlines; 2px marks the current section, the current tab and the top of a region cell.\n- `border-radius <= 0px`: every box is square; dots and the ringed dot are circles.\n- `box-shadow-blur <= 0px`: shadows are hard offsets or lines, never soft.\n- `text-shadow = none`: text is flat on every fill.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves by itself, not even the status dot.\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.p05.t05.u05\",\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-3555\",\n \"short\": \"v1-dd-3555\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #000000;\n --color-surface: #0a0a0a;\n --color-surface-alt: #111111;\n --color-surface-strong: #1c1c1c;\n --color-bar: #000000;\n --color-bar-text: #ededed;\n --color-bar-alt: #0a0a0a;\n --color-bar-alt-text: #a1a1a1;\n --color-inverse: #ffffff;\n --color-inverse-text: #000000;\n --color-text: #e1e1e1;\n --color-text-muted: #8f8f8f;\n --color-heading: #ffffff;\n --color-heading-alt: #ededed;\n --color-link: #ff4d9d;\n --color-link-quiet: #a1a1a1;\n --color-link-visited: #c97aa6;\n --color-link-hover: #ff8fc2;\n --color-link-active: #e0126f;\n --color-border: #2e2e2e;\n --color-border-strong: #616161;\n --color-border-muted: #1c1c1c;\n --color-accent: #ff2e88;\n --color-accent-text: #000000;\n --color-accent-alt: #ffd84d;\n --color-fill-1: #ff2e88;\n --color-fill-2: #ffd84d;\n --color-fill-3: #6ee7ff;\n --color-fill-4: #616161;\n --color-button: #ff2e88;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #0a0a0a;\n --color-button-secondary-text: #ffffff;\n --color-input: #000000;\n --color-input-text: #ffffff;\n --color-input-border: #616161;\n --color-disabled: #111111;\n --color-disabled-text: #5a5a5a;\n --color-danger: #ff5247;\n --color-danger-surface: #1f0b09;\n --color-success: #3ddc84;\n --color-warning: #ff9b3d;\n --color-notice: #111111;\n --color-notice-text: #ededed;\n --color-focus: #ff8fc2;\n --color-shadow: rgb(0 0 0 / 0.8);\n --color-overlay: rgb(0 0 0 / 0.8);\n}\n\n/* @part type */\n:root {\n --font-body: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --font-heading: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --font-ui: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --font-mono: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 15px;\n --text-display: 44px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 13px;\n --line-body: 1.7;\n --line-heading: 1.35;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: uppercase;\n --heading-tracking: 0.4px;\n --display-tracking: -0.8px;\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: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 3px 3px 0 var(--color-border-strong);\n --shadow-control-pressed: inset 0 0 0 2px var(--color-shadow);\n --shadow-dialog: 10px 10px 0 var(--color-surface-strong);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--color-border) 40%, transparent) 9px 10px), 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) 70%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }