{ "id": "v1-bs-2152", "long_id": "v1.bootstrap-era.docs.s02.p01.t05.u02", "name": "Framework default documentation site", "era": { "slug": "bootstrap-era", "code": "bs", "name": "Framework default", "years": [ 2011, 2014 ], "description": "The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar fixed across the top, a big hero block, rows of three columns, wells, bordered panels and coloured status buttons and labels. This pack is the flat 2013 form of it, as a documentation site: a pale bar with a hairline under it, a full-width colour masthead, solid buttons without gloss, and 14px Helvetica with medium-weight headings. It was the look of nearly every open-source project page and developer guide of those years.", "url": "https://chrono.skin/s/v1-bs-2152", "preview_url": "https://chrono.skin/s/v1-bs-2152/specimen.html", "files": { "STYLE.md": "# Framework default documentation site\n\n## Summary\n\nThe framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar fixed across the top, a big hero block, rows of three columns, wells, bordered panels and coloured status buttons and labels. This pack is the flat 2013 form of it, as a documentation site: a pale bar with a hairline under it, a full-width colour masthead, solid buttons without gloss, and 14px Helvetica with medium-weight headings. It was the look of nearly every open-source project page and developer guide of those years.\n\n## Layout\n\n- Fixed width: a centred `.ds-container` of `--size-page` (1140px) on a 1280px viewport. The top bar, the masthead, the page-header band, the grey strip and the footer span the window; everything else is in the container.\n- The top bar is `--size-nav` (50px) tall and fixed (`position: sticky`); its inner row is `--size-bar` (1170px) wide: brand, links, then a small search field and button at the right.\n- Home page: the centred masthead (`.ds-hero`) on `--color-fill-1`, the grey `.ds-strip` under it, then in `.ds-main` a centred `.ds-intro`, a centred row of three columns each with a round icon and a \"View details\" button, a rule, a wide column with two code blocks and the stats row beside a panel, a rule, a second intro and four thumbnails.\n- Inner pages have no masthead. Under the bar comes `.ds-page-header`, a shorter band of the same colour with the page title, one line and an outlined action at the right. Then the container (`.ds-main--inner`) starts with the `.ds-breadcrumb` strip and splits in two: the text in a wide left column and the `.ds-sidebar` side navigation in a `--size-sidebar` (230px) column at the right, which stays in view while the text scrolls. `.ds-tabs` sit inside the text column, above the block they switch. Pages without sections (downloads, keys) use full-width rows of panels and two columns instead of the side navigation.\n- Views. The specimen documents a scheduling API in five views. `home` is the overview described above. `guide` is a getting-started page: running text, a tabbed code sample, two callouts, and previous and next buttons, beside the side navigation. `reference` lists the addresses of one resource in a striped table with status labels, pagination and a legend, then one address in a panel with its answer, beside the side navigation. `libraries` is the download page: three panels with an install line and a download button each, then the changelog list beside two side blocks. `keys` is the form for a new key beside an empty list of keys and the open confirmation modal.\n- Responsive: this was the first responsive generation. Below 980px the links of the bar fold into the menu button at its right (`.ds-menu--nav`) and the bar stops being sticky. The fold is a `
` whose `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`); it opens the list of every view as a full row under the bar, and the current view's item has the same darker plate as a current bar link. Below 760px the search field keeps its place in the bar without its button, every row of columns stacks with the side navigation after the text, the stats fold to two by two, thumbnails to two columns, panels to one, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field), `--space-2` 10px (between adjacent controls, cell padding, alert padding), `--space-3` 15px (the column gutter half, panel padding, paragraph gap), `--space-4` 20px (between stacked blocks, well padding), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (around featurettes and above the footer), `--space-7` 60px (hero padding). Controls are padded by `--space-control-y` (6px) and `--space-control-x` (12px).\n- Other sizes: `--size-tile` 96px (thumbnail colour block), `--size-icon` 44px, `--size-mark` 26px, `--size-dialog` 560px, `--size-search` 180px.\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\n- One sans-serif family for everything (`--font-body`, `--font-heading`, `--font-ui`: Lato, then Source Sans Pro, Segoe UI). `--font-mono` is for code only.\n- Body is `--text-base` 15px at `--line-body` 1.55 in `--color-text`. Headings are light (`--weight-heading` 300): `--text-h1` 38px, `--text-h2` 28px, `--text-h3` 21px. `--text-display` 52px light with `--display-tracking` -1px is the carousel title only. Prices are bold (`--weight-bold`). `--text-large` 20px is lead text and large buttons; `--text-small` 13px is meta and labels. Buttons and navigation are bold (`--weight-ui` 700) at 15px.\n- Surfaces: white page and panels; `--color-surface-alt`, a faint green grey, for wells, stripes, the stat cells and the breadcrumb; `--color-surface-strong` for panel heading strips. Borders are 1px `--color-border`; `--border-width-strong` (4px) is the rule under a table head and above a total.\n- The bar is white with dark text, and `--fill-bar` draws a 4px stripe of `--color-accent` along its top. The promo strip and the footer are a pale green grey (`--color-bar-alt`) with dark text; the one dark block is `--color-inverse`. Bright green is the primary colour: `--color-button`, `--color-accent`, and a deeper `--color-link` for text. `--color-fill-1` to `--color-fill-4` (green, blue, amber, red) are the product pictures and basket swatches. The carousel slide is on `--fill-inverse`.\n- No gloss and no text shadow. Buttons and inputs stand on a 2px solid lip (`--shadow-control`), which grows on hover and turns inward when pressed; panels have a faint 3px shadow. Labels are pills (`--radius-pill` 12px).\n- Stars of a rating are text in `--color-warning`; the count after them is `--color-text-muted`.\n- Text on fills, the convention every layout and token set of this era keeps:\n - on `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt` and `--color-surface-strong`: body text `--color-text`, headings `--color-heading`, small titles (panel strip, sidebar heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`. A token set keeps these five fills on one side, all light or all dark;\n - on the top bar (`--fill-bar`): `--color-bar-text` only. Hover and current items get a plate of `--color-bar-text` mixed into transparent at 9% and 18%, never a second colour;\n - on the secondary bar (`--fill-bar-alt`): `--color-bar-alt-text`; a link there inherits and is underlined;\n - on `--fill-inverse`: `--color-inverse-text`, with `opacity` for the quieter line;\n - on `--color-fill-1` to `--color-fill-4`, `--fill-accent`, `--color-accent-alt`, `--color-success`, `--color-warning` and `--color-danger` used as a fill: `--color-accent-text`;\n - on `--fill-button`: `--color-button-text`; on `--fill-button-secondary`: `--color-button-secondary-text`;\n - on `--color-notice`: `--color-notice-text`; on `--color-danger-surface`: `--color-danger`;\n - the grey count label is `--color-text-muted` with `--color-canvas` text.\n- Status colours: `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` (info) fill buttons and labels; mixed at 20% into `--color-surface` they tint the heading strip of a contextual panel, whose text stays `--color-heading`.\n- `--fill-button` is either the flat `--color-button` or a translucent gloss laid over it; status buttons reuse it with `background-color` set to their own colour. Button and brand tile borders are `--color-shadow`. Inputs and wells take `--shadow-control-pressed`; buttons and the brand tile take `--shadow-control`.\n- Links are not underlined at rest and underline on hover; footer links are underlined.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's bottom edge (`--color-bar-text` at 22% over `--color-bar`), bar plates (9% and 18%), the hovered secondary button (its text colour at 12% into its fill), contextual panel strips (20%) and their borders (45% into `--color-border`), notice borders (the text colour at 25% into the notice fill).\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, the text colour and `--fill-page`.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side. `.ds-row` lays `.ds-col` columns side by side with a `--space-5` gutter: three plain columns are the era's standard row; `.ds-col--wide` takes two shares, `.ds-col--side` is `--size-sidebar` wide, `.ds-col--stack` stacks blocks `--space-4` apart and `.ds-grow` on its last block makes both columns end on one line (with `.ds-row--level`). `.ds-row--flush` drops the bottom margin. `.ds-col__title`, `.ds-col__text` and `.ds-col__icon` (a round grey plate) dress a column of a three-column row, which ends in a `.ds-button--secondary` reading \"View details\". `.ds-rule` is the faint horizontal rule between sections. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small` after it; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block.\n- `.ds-well`: the inset grey box (`--color-surface-alt`, faint border, inset shadow) for an aside or a call to action. `.ds-code` is a block of code in the same grey with a border; `.ds-code--inverse` sets it on `--fill-inverse` for a terminal line; `.ds-code__comment` and `.ds-code__key` colour parts of it. `.ds-figure` is a placeholder picture, a grey bordered block with its size written on it (`--tall` doubles the height); replace it with a real picture.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.ds-brand__mark` is a `--size-mark` tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-shadow` border, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-large` in `--color-bar-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the bar fixed across the top (`position: sticky`), on `--fill-bar` with a 1px bottom edge. `.ds-nav__inner` is `--size-bar` wide and `--size-nav` tall; it holds the `.ds-brand`, `.ds-nav__links` with full-height `.ds-nav__link` items (current: `is-current`, a darker plate with the inset shadow) and `.ds-nav__aside` on the right for `.ds-nav__text`, a small button or a `.ds-nav__search` field. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself. Below 980px the bar stops being fixed, the row of links is hidden and the `.ds-menu--nav` button at the right of the bar opens them as a stack.\n- `.ds-hero`: the masthead, a full-width band on `--color-fill-1` with centred `--color-accent-text` text: an optional outlined `.ds-hero__mark` tile holding the mark, `.ds-hero__title` (63px), `.ds-hero__lead` (21px), `.ds-hero__actions` with one large primary button and one large `.ds-button--outline` (transparent with a 1px border in the text colour, for use on a colour band only), and a faint `.ds-hero__note` for the version. `.ds-strip` is the grey secondary bar (`--fill-bar-alt`) directly under it, a centred row of short facts and links. `.ds-intro` (`.ds-intro__title`, `.ds-intro__lead`) is the centred heading that opens a section of the home page; `.ds-row--centred` centres the three columns under it.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: a full-width band on `--color-fill-1`. `.ds-page-header__inner` is the container width; `.ds-page-header__copy` holds `.ds-page-header__title` (36px) and one `.ds-page-header__text` line at 21px; `.ds-page-header__actions` sits at the right with one `.ds-button--outline`. The breadcrumb follows inside the container. `.ds-main` is the padding above the first block of a container (`--inner` for the smaller gap on inner pages).\n- `.ds-prose`: running text: h1, h2, h3 (in `--color-heading-alt`), p, lists, `strong`, and inline `code` in `--color-danger` on a faint grey chip. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover` (darker and underlined), `is-active`, `is-focus`. `--quiet` is grey for meta. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the primary button on `--fill-button` with a translucent dark border and `--radius-control`. Variants: `--secondary` (the pale default button, `--fill-button-secondary` with a `--color-border-strong` border; the usual choice), `--danger` (red, for destructive actions), `--success` (green), `--warning` (amber), `--info` (light blue), `--large` (hero actions), `--small` (table rows, the bar), `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-2` apart; `.ds-buttongroup` joins small buttons into one strip for the actions of a table row.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps a bold `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea` (`.ds-form__input--small` in bars). Error: `is-error` on the field and the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the grey strip that closes a form inside a panel; `--inline` sets a form in one row; `--flush` removes the gap when the form wraps a panel body and its action strip.\n- `.ds-table`: striped data table: a rule above every row, odd rows on `--color-surface-alt`, a `--border-width-strong` rule under the bold head, no fill on the head. `--bordered` adds the outer box and vertical rules. `.ds-table__num` right-aligns numbers; `.ds-table__actions` is the right-aligned cell for a `.ds-buttongroup`; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it with the pagination at the left and a legend at the right.\n- `.ds-list`: rows divided by faint rules. `.ds-list__item` holds a bold link `.ds-list__title`, `.ds-list__text` and small grey `.ds-list__meta`.\n- `.ds-panel`: bordered box with `--radius-panel` and `--shadow-panel`: a tinted `.ds-panel__title` strip (`--color-surface-strong`, `--color-heading-alt`, a label may float right in it), `.ds-panel__body`, optional grey `.ds-panel__foot`. `.ds-panel__figure` is a large figure (a price, a total). Contextual variants colour the strip and the border: `--primary` (the button fill), `--success`, `--warning`, `--danger`, `--info` (20% tints). `.ds-panels` sets three panels side by side.\n- `.ds-stat`: the row of summary figures, unboxed. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__figure` (30px, heading weight) over a small grey `.ds-stat__label`, divided from the next by a 1px vertical rule. `.ds-method` sets an HTTP verb or an address in the monospace font inside a table or a sentence.\n- `.ds-grid`: four bordered thumbnails in a row. Each `.ds-grid__cell` is a white box with `--space-1` padding holding a `.ds-grid__tile` (`--color-fill-1`; `--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` in `--color-accent-text`, then a `.ds-grid__caption` with `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides, `--color-canvas` behind it and body-coloured text. A count label may follow the text.\n- `.ds-badge`: the small bold label on `--fill-accent` with `--radius-pill`. Variants: `--info` (light blue), `--success` (green), `--warning` (amber), `--danger` (red), all with `--color-accent-text`; `--quiet` is the grey count. `.ds-badgerow` for several.\n- `.ds-sidebar`: the side navigation at the right of the text; it sticks below the bar while the page scrolls. A small `.ds-sidebar__title`, a `.ds-sidebar__list` of grey `.ds-sidebar__link` rows with a transparent left edge (`--sub` for the indented, smaller second level); `is-current` is bold in the link colour with a `--border-width-strong` left edge. `.ds-sidebar__foot` holds a quiet \"Back to top\" link over a rule.\n- `.ds-notice`: the alert: a tinted box (`--color-notice`, `--color-notice-text`) with a 1px border of the same hue; `--error` uses `--color-danger-surface` and `--color-danger`; `--callout` adds a `--space-1` left edge for a note inside documentation. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined bordered boxes of `.ds-pagination__link`; `is-current` is filled with `--fill-accent`, `is-disabled` is grey. The first and last box carry the `--radius-control` corners.\n- `.ds-breadcrumb`: a grey rounded strip (`--color-surface-alt`) of `.ds-breadcrumb__item` separated by slashes; the last item is `.ds-breadcrumb__current`, plain grey text.\n- `.ds-dialog`: the modal, shown open: a `--color-overlay` backdrop block centring `.ds-dialog__box` (bordered, `--radius-page`, `--shadow-dialog`) with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`) over a rule, `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the buttons at the right, the confirming one last.\n- `.ds-empty`: a centred message in a well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one `.ds-button--secondary`. It stands where a list would be.\n- `.ds-footer`: a full-width grey strip (`--fill-bar-alt`) with a top rule and centred text: `.ds-footer__text`, then `.ds-footer__links`, a row of underlined `.ds-footer__link` separated by middle dots.\n\n- `.ds-menu`: a drop-down under a navigation item. The list item carries `.ds-menu`, its link `.ds-nav__link.ds-menu__toggle` (which adds the small caret), and the list `.ds-menu__list` of `.ds-menu__item` links with `.ds-menu__divider` rules between groups; `.ds-menu--end` hangs the list from the right edge of its item. It opens on hover and on keyboard focus (`.is-open` shows it statically) as a sheet on `--fill-panel` hanging from the bar, with the accent fill on the hovered item. `.ds-menu--nav` is the same component as the bar's fold: a `
` whose `.ds-menu__toggle` is the bordered button with three `.ds-menu__bars`; below 980px the row of links is hidden and this button opens them as a stack inside the bar, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation. A `
` placed in the bar after the links; hidden above 980px, where `.ds-nav__links` shows. Its `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`), and the list opens in the flow as a full row under the bar, one `.ds-menu__item` per view (a divider and the call to action may follow), the current one on a darker plate.\n- `.ds-accordion`: stacked groups for questions and settings that open one at a time. Each group is a `
` with a `.ds-accordion__head` summary (the panel title strip with a small triangle) and a `.ds-accordion__body`. Give the groups one `name` so that opening one closes the others.\n- `.ds-tooltip`: a hint on hover or focus. The trigger carries `.ds-tooltip` and `tabindex=\"0\"` and holds a `.ds-tooltip__tip`: a small bubble in `--color-inverse` with `--color-inverse-text` and an arrow, above the trigger. `.ds-tooltip--start` aligns the bubble with the trigger's left edge and `.ds-tooltip--end` with its right edge (use them near the edges of a column, so that the bubble stays inside a narrow window), `.ds-tooltip--plain` drops the underline for a badge or button, `.is-open` shows it statically.\n- `.ds-switch`: the sliding on and off control of the period, drawn over a checkbox: a label holding `.ds-switch__input`, the `.ds-switch__track` (it writes ON on the primary button fill or OFF on the disabled fill beside a pale handle) and the `.ds-switch__label`. Use it for a setting that takes effect at once; keep `.ds-form__check` for a box that is sent with a form.\n- `.ds-progress`: a sunken track holding a `.ds-progress__bar` in the primary button fill. The bar's length is one of `--20`, `--40`, `--60`, `--80`, `--100`; `--success`, `--warning` and `--danger` recolour it; `.ds-progress--small` is the thin form inside a panel or a row. `.ds-progress__label` is the line of small text above it.\n- `.ds-avatar`: a person's or account's initial on a `--color-fill-1` square with `--color-accent-text` (`--2` to `--4` take the other fills, `--small` is the size of the mark, `--round` a circle). `.ds-person` sets one beside a `.ds-person__body` of name and meta text.\n\n## Never\n\n- `content-width <= 1140px`: content stays in the fixed centred container.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `font-size >= 13px`: meta text and labels are the smallest.\n- `font-size <= 52px`: the carousel title is the largest text.\n- `font-weight <= 700`: headings are light; bold is the heaviest.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 20%`: links are underlined only on hover, in the promo strip and in the footer.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills = 0%`: every background is one solid colour.\n- `border-width <= 5px`: borders are 1px; a callout has a 5px left edge.\n- `border-radius <= 10px`: labels are rounded to 10px; controls and boxes have 4px corners, the masthead tile and the modal 6px.\n- `box-shadow-blur <= 15px`: only the modal casts a soft shadow.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new box is a `.ds-panel` (border, heading strip, body) or a `.ds-well`; a new action is a `.ds-button`, pale `--secondary` unless it is the one main action of the view; a new status is one of the four status colours with `--color-accent-text` on it. Lay new content out in a `.ds-row` of `.ds-col` columns. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the hero and the dialog `--radius-page`. Spacing comes from the `--space-*` scale; any one-off shade is a `color-mix()` of tokens, noted next to the rule. Keep to the text-on-fill convention above, so that the component still reads with another palette of the era.\n", "components.css": ":root {\n --size-page: 1140px;\n --size-bar: 1170px;\n --size-nav: 50px;\n --size-mark: 26px;\n --size-search: 180px;\n --size-sidebar: 230px;\n --size-tile: 96px;\n --size-icon: 44px;\n --size-dialog: 560px;\n --space-control-y: 6px;\n --space-control-x: 12px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n}\n\n/* shell */\n.ds-page {\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\n/* container, rows and columns: the fixed centred column and its equal columns */\n.ds-container {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n}\n.ds-row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.ds-row--level {\n align-items: stretch;\n}\n.ds-row--flush {\n margin-bottom: 0;\n}\n.ds-col {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-col--wide {\n flex: 2 1 0;\n}\n.ds-col--side {\n flex: 0 0 var(--size-sidebar);\n}\n.ds-col--stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-col--stack > .ds-grow {\n flex: 1 0 auto;\n}\n.ds-col__title {\n margin: 0 0 var(--space-2);\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 text-transform: var(--heading-transform);\n}\n.ds-col__text {\n margin: 0 0 var(--space-3);\n}\n.ds-col__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-3);\n padding: var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n}\n.ds-col__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-rule {\n height: 0;\n margin: var(--space-5) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-title {\n margin: 0 0 var(--space-3);\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 text-transform: var(--heading-transform);\n}\n.ds-title--small {\n font-size: var(--text-h3);\n}\n.ds-title__small {\n color: var(--color-text-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n}\n.ds-lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-muted {\n color: var(--color-text-muted);\n}\n\n/* well: an inset grey box */\n.ds-well {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-well > :last-child {\n margin-bottom: 0;\n}\n\n/* code block */\n.ds-code {\n display: block;\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n overflow-x: auto;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n}\n.ds-code__comment {\n color: var(--color-text-muted);\n}\n.ds-code__key {\n color: var(--color-link);\n}\n.ds-code--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n\n/* placeholder picture: a grey block with its size written on it */\n.ds-figure {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-tile);\n padding: var(--space-3);\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: var(--radius-panel);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n}\n\n/* nav: the bar fixed across the top */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n max-width: var(--size-bar);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n align-items: stretch;\n gap: var(--space-3);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-right: var(--space-2);\n color: var(--color-bar-text);\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-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 76%;\n height: 76%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__links {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links > li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n padding: 0 var(--space-3);\n color: var(--color-bar-text);\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 transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n}\n.ds-nav__link.is-current {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n.ds-nav__text {\n color: var(--color-bar-text);\n}\n.ds-nav__search {\n width: var(--size-search);\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-2);\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 font-size: var(--text-h2);\n margin-top: var(--space-4);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n margin-top: var(--space-4);\n color: var(--color-heading-alt);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-2);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-2);\n padding-left: var(--space-4);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\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}\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-link-hover);\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\n\n/* buttons: the primary fill, a pale default, and four status colours */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\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-body);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n vertical-align: middle;\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 background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\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 text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)), color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)));\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: var(--fill-button);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success:hover,\n.ds-button--success.is-hover,\n.ds-button--success:active,\n.ds-button--success.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--warning:hover,\n.ds-button--warning.is-hover,\n.ds-button--warning:active,\n.ds-button--warning.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info:hover,\n.ds-button--info.is-hover,\n.ds-button--info:active,\n.ds-button--info.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-page);\n font-size: var(--text-large);\n}\n.ds-button--small {\n padding: calc(var(--space-control-y) / 3) var(--space-2);\n font-size: var(--text-small);\n}\n.ds-button--block {\n display: block;\n width: 100%;\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);\n box-shadow: none;\n text-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.ds-buttongroup {\n display: inline-flex;\n vertical-align: middle;\n}\n.ds-buttongroup > .ds-button {\n border-radius: 0;\n}\n.ds-buttongroup > .ds-button + .ds-button {\n margin-left: calc(var(--border-width) * -1);\n}\n.ds-buttongroup > .ds-button:first-child {\n border-top-left-radius: var(--radius-control);\n border-bottom-left-radius: var(--radius-control);\n}\n.ds-buttongroup > .ds-button:last-child {\n border-top-right-radius: var(--radius-control);\n border-bottom-right-radius: var(--radius-control);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\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-3);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\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 box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__input--small {\n padding: calc(var(--space-control-y) / 2) var(--space-2);\n}\n.ds-form__textarea {\n min-height: var(--space-7);\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: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}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__field.is-error .ds-form__label {\n 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: baseline;\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 margin-top: var(--space-1);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n\n/* table: striped rows, a rule above every row, a strong rule under the head */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2);\n text-align: left;\n vertical-align: middle;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n color: var(--color-heading);\n border-top: 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n vertical-align: bottom;\n}\n.ds-table tbody th {\n font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(odd) td,\n.ds-table tbody tr:nth-child(odd) th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__actions {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table__caption {\n caption-side: bottom;\n padding-top: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: left;\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 margin-top: var(--space-3);\n}\n\n/* list: media rows divided by faint rules */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n display: block;\n margin: 0;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a bordered box with a tinted heading strip */\n.ds-panel {\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__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-panel__title .ds-badge {\n float: right;\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__foot {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n font-size: var(--text-small);\n}\n.ds-panel__figure {\n display: block;\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}\n.ds-panel--info {\n border-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel--info > .ds-panel__title {\n background: color-mix(in srgb, var(--color-accent-alt) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel.ds-grow {\n display: flex;\n flex-direction: column;\n}\n.ds-panel.ds-grow > .ds-panel__body {\n flex: 1 0 auto;\n}\n.ds-panels {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n\n/* grid: bordered thumbnails, each a colour block over a caption */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n min-width: 0;\n padding: var(--space-1);\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-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-tile);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: calc(var(--radius-panel) / 2);\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__caption {\n padding: var(--space-2);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 var(--space-2);\n}\n\n/* tabs: boxed tabs standing on a rule */\n.ds-tabs {\n display: flex;\n gap: var(--border-width-strong);\n margin: 0 0 var(--space-4);\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) var(--space-3);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\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 background: var(--color-surface-strong);\n border-color: var(--color-surface-strong) var(--color-surface-strong) var(--color-border);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border) var(--color-border) var(--color-canvas);\n}\n.ds-tabs__tab .ds-badge {\n margin-left: var(--space-1);\n}\n\n/* badge: the small label; status colours and a count */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-1);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-text-muted);\n color: var(--color-canvas);\n text-shadow: none;\n}\n.ds-badge--info {\n background: var(--color-accent-alt);\n}\n.ds-badge--success {\n background: var(--color-success);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n}\n\n/* notice: the tinted alert box */\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-3);\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) 25%, var(--color-notice));\n border-radius: var(--radius-panel);\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) 25%, var(--color-danger-surface));\n}\n.ds-notice--callout {\n border-left: var(--space-1) var(--border-style) var(--color-notice-text);\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 margin-bottom: var(--space-4);\n}\n\n/* pagination: joined boxes */\n.ds-pagination {\n display: inline-flex;\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n/* The double arrows at the two ends are drawn, two angles each. */\n.ds-pagination > li:first-child .ds-pagination__link::before,\n.ds-pagination > li:first-child .ds-pagination__link::after,\n.ds-pagination > li:last-child .ds-pagination__link::before,\n.ds-pagination > li:last-child .ds-pagination__link::after {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-base) * 0.4);\n height: calc(var(--text-base) * 0.4);\n border-left: calc(var(--space-2) / 4) solid currentColor;\n border-bottom: calc(var(--space-2) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n vertical-align: calc(var(--text-base) * 0.12);\n}\n.ds-pagination > li:last-child .ds-pagination__link::before,\n.ds-pagination > li:last-child .ds-pagination__link::after {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-pagination > li:first-child .ds-pagination__link {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-pagination > li:last-child .ds-pagination__link {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a grey strip with slashes */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: var(--space-2) var(--space-3);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-radius: var(--radius-panel);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-1);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text-muted);\n}\n\n/* dialog: the modal, shown open on its backdrop */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-3);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--fill-panel);\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 padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-h3) * 0.6);\n height: calc(var(--text-h3) * 0.6);\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-3);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width));\n}\n\n/* empty state: a well with a message and one button */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-empty__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-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* spacing helper: a block that is followed by another */\n.ds-page .ds-spaced {\n margin-bottom: var(--space-4);\n}\n\n/* the current view marks its navigation item */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:not(:has(.ds-view:target)) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#guide:target) .ds-menu--nav .ds-menu__item[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-nav__link[href=\"#reference\"],\n.ds-page:has(#reference:target) .ds-menu--nav .ds-menu__item[href=\"#reference\"],\n.ds-page:has(#libraries:target) .ds-nav__link[href=\"#libraries\"],\n.ds-page:has(#libraries:target) .ds-menu--nav .ds-menu__item[href=\"#libraries\"],\n.ds-page:has(#keys:target) .ds-nav__link[href=\"#keys\"],\n.ds-page:has(#keys:target) .ds-menu--nav .ds-menu__item[href=\"#keys\"] {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* main: the centred column under a masthead or a page header */\n.ds-main {\n padding-top: var(--space-6);\n}\n\n/* hero: the masthead, a full-width colour band with centred text */\n.ds-hero {\n padding: var(--space-7) var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-hero__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-tile) + var(--space-3));\n height: calc(var(--size-tile) + var(--space-3));\n margin: 0 auto var(--space-4);\n border: var(--border-width) var(--border-style) currentColor;\n border-radius: var(--radius-page);\n}\n.ds-hero__mark svg {\n display: block;\n width: 64%;\n height: 64%;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__lead {\n max-width: 68ch;\n margin: 0 auto var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n font-size: var(--text-base);\n opacity: 0.75;\n}\n.ds-button--outline {\n background: transparent;\n color: var(--color-accent-text);\n border-color: currentColor;\n box-shadow: none;\n}\n.ds-button--outline:hover,\n.ds-button--outline.is-hover,\n.ds-button--outline:active,\n.ds-button--outline.is-active {\n background: color-mix(in srgb, var(--color-accent-text) 18%, transparent);\n color: var(--color-accent-text);\n box-shadow: none;\n}\n\n/* strip: the grey secondary bar under the masthead */\n.ds-strip {\n padding: var(--space-3);\n background-color: var(--color-bar-alt);\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-muted);\n}\n.ds-strip__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-1) var(--space-5);\n max-width: var(--size-bar);\n margin: 0 auto;\n}\n\n/* intro: a centred heading and lead above the three columns */\n.ds-intro {\n margin-bottom: var(--space-6);\n text-align: center;\n}\n.ds-intro__title {\n margin: 0 0 var(--space-2);\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}\n.ds-intro__lead {\n max-width: 76ch;\n margin: 0 auto;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-row--centred {\n text-align: center;\n}\n.ds-row--centred .ds-col__icon {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* page header: a colour band with the page title, in place of the masthead */\n.ds-page-header {\n padding: var(--space-5) var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n max-width: var(--size-page);\n margin: 0 auto;\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 margin: var(--space-2) 0 0;\n max-width: 70ch;\n font-size: var(--text-large);\n line-height: var(--line-body);\n opacity: 0.85;\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n.ds-main--inner {\n padding-top: var(--space-4);\n}\n\n/* stats: plain figures in a row, divided by rules */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-1) var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n padding-left: 0;\n border-left: 0;\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-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* sidebar: the side navigation that stays in view beside the text */\n.ds-sidebar {\n position: sticky;\n top: calc(var(--size-nav) + var(--space-4));\n padding: var(--space-2) 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-1);\n padding: 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-sidebar__list {\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: block;\n padding: calc(var(--space-1) - var(--border-width)) var(--space-3);\n color: var(--color-text-muted);\n border-left: var(--border-width-strong) var(--border-style) transparent;\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link--sub {\n padding-left: var(--space-5);\n font-size: var(--text-small);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link);\n border-left-color: var(--color-border-strong);\n}\n.ds-sidebar__link.is-current {\n color: var(--color-link);\n border-left-color: var(--color-link);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__foot {\n margin: 0;\n padding: var(--space-2) var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n\n/* method: the verb in front of an address in the reference */\n.ds-method {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* footer: a grey strip with centred lines */\n.ds-footer {\n margin-top: var(--space-7);\n padding: var(--space-6) var(--space-3);\n background-color: var(--color-bar-alt);\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-muted);\n text-align: center;\n}\n.ds-footer__text {\n margin: 0 0 var(--space-2);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-1) var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__links > li + li::before {\n content: \"\\00b7\";\n margin-right: var(--space-3);\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n\n/* menu: a drop-down under a navigation item, open on hover or keyboard focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-1) solid transparent;\n border-right: var(--space-1) solid transparent;\n border-top: var(--space-1) solid currentColor;\n vertical-align: calc(var(--space-1) / 2);\n margin-left: var(--space-1);\n opacity: 0.7;\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: calc(var(--size-icon) * 4);\n margin: 0;\n padding: var(--space-1) 0;\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:has(:focus-visible) > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu--end > .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-menu__divider {\n height: 0;\n margin: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* menu in the bar: on a narrow window the links fold away behind a button with three bars */\n.ds-menu--nav {\n display: none;\n position: static;\n}\n.ds-menu--nav > .ds-menu__toggle {\n position: absolute;\n top: var(--space-1);\n right: var(--space-3);\n display: flex;\n align-items: center;\n justify-content: center;\n height: calc(var(--size-nav) - var(--space-2));\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n border-radius: var(--radius-control);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu--nav > .ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu--nav > .ds-menu__toggle::after {\n content: none;\n}\n.ds-menu--nav > .ds-menu__toggle:hover,\n.ds-menu--nav[open] > .ds-menu__toggle {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-menu--nav > .ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__bars {\n display: block;\n width: var(--space-4);\n height: calc(var(--space-2) + var(--border-width-strong) * 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu__bars::before {\n content: \"\";\n display: block;\n margin-top: calc((var(--space-2) - var(--border-width-strong)) / 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu--nav > .ds-menu__list {\n display: block;\n position: static;\n min-width: 0;\n padding: var(--space-1) 0 var(--space-2);\n background: transparent;\n border: 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n border-radius: 0;\n box-shadow: none;\n}\n.ds-menu--nav .ds-menu__item {\n padding: var(--space-2) var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: normal;\n}\n.ds-menu--nav .ds-menu__item:hover,\n.ds-menu--nav .ds-menu__item.is-hover,\n.ds-menu--nav .ds-menu__item:focus-visible {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n color: var(--color-bar-text);\n}\n.ds-menu--nav .ds-menu__divider {\n border-top-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* accordion: stacked groups, each a heading that opens its body */\n.ds-accordion {\n margin: 0 0 var(--space-4);\n}\n.ds-accordion__item {\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-panel);\n}\n.ds-accordion__item + .ds-accordion__item {\n margin-top: var(--space-1);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: calc(var(--radius-panel) - var(--border-width));\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::before {\n content: \"\";\n display: inline-block;\n width: 0;\n height: 0;\n margin-right: calc(var(--space-3) - var(--space-1) * 1.2);\n border-top: var(--space-1) solid transparent;\n border-bottom: var(--space-1) solid transparent;\n border-left: calc(var(--space-1) * 1.2) solid currentColor;\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-accordion__item[open] > .ds-accordion__head::before {\n rotate: 90deg;\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n text-decoration: underline;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: var(--space-3);\n}\n.ds-accordion__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-accordion__body > :last-child {\n margin-bottom: 0;\n}\n\n/* tooltip: a small inverted bubble above its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip--plain {\n border-bottom: 0;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 30;\n width: max-content;\n max-width: var(--size-sidebar);\n padding: var(--space-1) var(--space-2);\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 letter-spacing: 0;\n text-align: center;\n text-shadow: none;\n text-transform: none;\n white-space: normal;\n transform: translateX(-50%);\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--space-2);\n height: var(--space-2);\n margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);\n background: var(--color-inverse);\n transform: rotate(45deg);\n}\n.ds-tooltip--start > .ds-tooltip__tip {\n left: 0;\n transform: none;\n}\n.ds-tooltip--start > .ds-tooltip__tip::after {\n left: var(--space-4);\n}\n.ds-tooltip--end > .ds-tooltip__tip {\n right: 0;\n left: auto;\n transform: none;\n}\n.ds-tooltip--end > .ds-tooltip__tip::after {\n right: var(--space-4);\n left: auto;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip,\n.ds-tooltip.is-open > .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n\n/* switch: the sliding on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-7) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"OFF\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50%;\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 50%;\n background: var(--fill-button-secondary);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: calc(var(--radius-control) - var(--border-width)) 0 0 calc(var(--radius-control) - var(--border-width));\n box-shadow: var(--shadow-control);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-switch__input:checked + .ds-switch__track::before {\n content: \"ON\";\n right: auto;\n left: 0;\n text-shadow: var(--shadow-text);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n right: 0;\n left: auto;\n border-right: 0;\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 calc(var(--radius-control) - var(--border-width)) calc(var(--radius-control) - var(--border-width)) 0;\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__input:disabled + .ds-switch__track {\n opacity: 0.6;\n}\n.ds-switch__label {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* progress: a sunken track with a filled bar; the bar's length is one of five steps */\n.ds-progress {\n height: var(--space-4);\n margin: 0 0 var(--space-3);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n overflow: hidden;\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background-color: var(--color-button);\n background: var(--fill-button);\n}\n.ds-progress__bar--60 {\n width: 60%;\n}\n.ds-progress--small {\n height: var(--space-2);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* avatar: a person's initial on a colour square */\n.ds-avatar {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-control);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-shadow: none;\n vertical-align: middle;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-avatar--2 {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 {\n background: var(--color-fill-4);\n}\n.ds-avatar--small {\n width: var(--size-mark);\n height: var(--size-mark);\n font-size: var(--text-small);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-person__body {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* medium windows: the links of the bar fold into the menu button */\n@media (max-width: 980px) {\n .ds-nav {\n position: static;\n }\n .ds-nav__inner {\n position: relative;\n flex-wrap: wrap;\n gap: 0 var(--space-2);\n }\n .ds-nav__links {\n display: none;\n }\n .ds-brand {\n min-height: var(--size-nav);\n }\n .ds-nav__aside {\n min-height: var(--size-nav);\n margin-right: calc(var(--space-6) + var(--space-3));\n }\n .ds-menu--nav {\n display: block;\n flex: 0 0 100%;\n order: 9;\n }\n}\n\n/* narrow windows: columns stack, the side navigation moves under the text */\n@media (max-width: 760px) {\n .ds-nav__aside {\n flex: 1 1 0;\n min-width: 0;\n justify-content: flex-end;\n }\n .ds-nav__aside > .ds-button {\n display: none;\n }\n .ds-nav__search {\n width: 100%;\n max-width: var(--size-search);\n }\n .ds-main {\n padding-top: var(--space-4);\n }\n .ds-row {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-col,\n .ds-col--wide,\n .ds-col--side {\n flex: 0 0 auto;\n }\n .ds-hero {\n padding: var(--space-6) var(--space-3);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-page-header__inner {\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-sidebar {\n position: static;\n }\n .ds-stat {\n flex-wrap: wrap;\n gap: var(--space-3) 0;\n }\n .ds-stat__item {\n flex: 0 0 50%;\n }\n .ds-stat__item:nth-child(odd) {\n padding-left: 0;\n border-left: 0;\n }\n .ds-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n }\n .ds-panels {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n }\n .ds-tabs {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ds-table {\n min-width: 96ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-2);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-pagination {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: framework default documentation specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n \n Go\n
\n
\n \n \n
\n
\n
\n\n
\n
\n
\n

The chronoskin API

\n

Rooms, people and bookings over plain HTTP. Add scheduling to your own application with a handful of calls and a library for the language you already write.

\n
\n Get started\n Download a library\n
\n

Currently version 2.4.1

\n
\n
\n
\n All systems normal UpNo incidents in the last 30 days.\n Released 9 September 2013\n Read the changelog\n Get an API key\n
\n
\n\n
\n
\n

Scheduling, without writing a calendar.

\n

chronoskin keeps the calendar and its rules. Your application asks what is free, books it, and hears about every change.

\n
\n\n
\n
\n
\n

Bookings

\n

Create, move and cancel a booking with one request each. Clashes are refused with a reason your code can read.

\n View details »\n
\n
\n
\n

Availability

\n

Ask for free slots by room, person or both. Opening hours, breaks and time zones are worked out on our side.

\n View details »\n
\n
\n
\n

Webhooks

\n

Name an address and we post to it whenever a booking is made, moved or cancelled, with retries for a day.

\n View details »\n
\n
\n
\n\n
\n
\n

Your first call from a terminal

\n 
$ curl api.chronoskin.example/v2/rooms/14/free \\\n    -u YOUR_KEY: \\\n    -d day=2013-09-16
\n 
{\n  \"room\": 14,\n  \"free\": [\"09:00\", \"09:30\", \"11:00\", \"14:30\"]\n}
\n
    \n
  • 38 msmedian responseMeasured at our edge over the last seven days.
    • \n
  • 99.98%uptime, last 90 days
    • \n
  • 2.1 mcalls a day
    • \n
  • 6official libraries
    • \n
\n
\n
\n
\n

Latest releases 2.4.1

\n
\n \n
\n
Version 1 is switched off on 1 March 2014.
\n
\n
\n
\n
\n\n
\n

A library for your language.

\n

Each one wraps the same calls and is released together with the API.

\n
\n
\n
\n
\n
\n

Ruby

\n

A gem for Ruby 1.9 and later.

\n Version 2.4.1\n
\n
\n
\n
\n
\n

Python

\n

A package for Python 2.6 and 2.7.

\n Version 2.4.1\n
\n
\n
\n
\n
\n

PHP

\n

A package for PHP 5.3 and later.

\n Version 2.4.0\n
\n
\n
\n
\n
\n

JavaScript

\n

For the server and for the browser.

\n Version 2.3.2\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Getting started

\n

From nothing to a confirmed booking in about ten minutes.

\n
\n
\n Get an API key\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. Getting started
    3. \n
  3. Your first booking
    4. \n
\n
\n
\n
\n

Your first booking

\n

Every call is an HTTPS request that answers in JSON.

\n

You need an API key, which you send as the user name of each request. Keys come in two kinds: a test key that books nothing real, and a live key.

\n

Find a free slot

\n

Ask a room for its free slots on a day. Times come back in the time zone of the room, in steps set by slot_minutes.

\n
\n \n 
# free slots in room 14 on 16 September\n$ curl api.chronoskin.example/v2/rooms/14/free \\\n    -u YOUR_KEY: \\\n    -d day=2013-09-16
\n
\n

Test keys are safe. A booking made with a test key is kept for an hour and never reaches a calendar.

\n

Do not ship a live key in a web page. Anyone who reads the page source can book with it. Call the API from your server.

\n
\n
\n

Book it

\n

Post the slot back with the name of whoever it is for. The answer carries the booking and its address.

\n
    \n
  • A slot that has gone answers 409 with the nearest free time
    • \n
  • A room that is closed answers 422 with the opening hours
    • \n
  • Too many calls answer 429; wait and send it again
    • \n
\n

What to read next

\n

Bookings can repeat, belong to several people and tell your server when they change. The reference has every field.

\n
\n
\n « Overview\n Reference »\n
\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n

Reference

\n

Every address, what it takes and what it answers.

\n
\n
\n Download a library\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. Reference
    3. \n
  3. Bookings
    4. \n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
Limits are calls a minute for one key. Addresses are relative to /v2.
MethodAddressWhat it doesStatusLimit
GET/bookingsLists bookings, newest firstStable120
POST/bookingsBooks a free slotStable60
PUT/bookings/:idMoves or renames a bookingStable60
POST/bookings/:id/repeatRepeats a booking on a patternBeta30
DELETE/bookings/:idCancels a bookingStable60
GET/reservationsThe version 1 name for the listGoing away10
\n
\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n
\n 2.4\n New\n Stable\n BetaMay change before 2.5. Tell us what breaks.\n Going away\n 16\n
\n
\n\n
\n

POST /bookings Stable

\n
\n

Books a free slot in one room. Send room, start and name; the length defaults to one slot.

\n 
{\n  \"id\": 90211,\n  \"room\": 14,\n  \"start\": \"2013-09-16T09:30:00+02:00\",\n  \"name\": \"Design review\"\n}
\n
\n
Answers 201 with the booking, or 409 when the slot has gone.
\n
\n

When it does not answer 201

\n
\n
\n 409: the slot has gone\n

Somebody else booked it first. The answer carries the nearest free time, so you can offer it straight away.

\n
\n
\n 422: the room is closed\n

The start lies outside the opening hours of the room. The answer lists them.

\n
\n
\n 429: too many calls\n

Wait for the number of seconds in the Retry-After header and send the call again.

\n
\n
\n

\n See also:\n Your first booking\n Errors\n Rate limits\n Libraries\n Overview\n

\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n

Libraries

\n

Official clients, released together with the API.

\n
\n
\n Read the guide\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. Libraries
    3. \n
\n
\n
\n

Ruby 2.4.1

\n
\n

For Ruby 1.9 and later. No dependencies beyond the standard library.

\n 
$ gem install chronoskin
\n Download the gem\n
\n
48 KB, released 9 September 2013
\n
\n
\n

Python 2.4.1

\n
\n

For Python 2.6 and 2.7. A build for Python 3 is in beta.

\n 
$ pip install chronoskin
\n Download the package\n
\n
36 KB, released 9 September 2013
\n
\n
\n

PHP 2.4.0

\n
\n

For PHP 5.3 and later. One release behind while 2.4.1 is tested.

\n 
$ composer require chronoskin/client
\n Download the archive\n
\n
61 KB, released 21 August 2013
\n
\n
\n\n
\n
\n

Changelog

\n
    \n
  • \n 2.4.1: recurring bookings\n

    A booking can repeat daily, weekly or on named weekdays. In beta, behind one new address.

    \n 9 September 2013, 14 changes, 3 contributors A K T\n
    • \n
  • \n 2.4.0: webhooks with retries\n

    A failed delivery is tried again for a day, at growing intervals, and listed in the dashboard.

    \n 21 August 2013, 22 changes, 5 contributors\n
    • \n
  • \n 2.3.2: faster availability\n

    Free slots for a whole week now come back in one call and in a third of the time.

    \n 30 July 2013, 9 changes, 2 contributors K M\n
    • \n
  • \n 2.3.0: people as well as rooms\n

    A booking can need a person, a room or both, and availability takes all of them into account.

    \n 2 July 2013, 31 changes, 6 contributors\n
    • \n
\n
\n
\n
\n

Other languages

\n
\n

JavaScript, Java and Go clients are kept by their own maintainers and follow a release or two behind.

\n See all six\n
\n
\n
\n

Written your own?

\n

Tell us and we will list it here, with a link to its source.

\n Send us a note\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

API keys

\n

One key for each application that calls the API.

\n
\n
\n How keys work\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. API keys
    3. \n
\n
\n
\n

Ask for a key

\n
\n
\n \n \n
\n \n \n \n \n \n
\n \n Cancel\n Revoke all keys\n \n
\n
\n
\n
\n
\n

Calls this month

\n

61,400 of 100,000 on the free planresets on 1 October

\n
\n
\n
\n

Your keys

\n
\n \n

No keys yet

\n

Keys you create are listed here with the date they were last used.

\n Read how keys work\n
\n
\n
\n
\n
\n

Revoke every key?

\n \n
\n
\n

Applications that use these keys stop working at once. This cannot be undone.

\n
\n
\n Keep them\n Revoke all\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bootstrap-era.docs.s02.p01.t05.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bs-2152\",\n \"short\": \"v1-bs-2152\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f5f5f5;\n --color-surface-strong: #eeeeee;\n --color-bar: #1b1b1b;\n --color-bar-text: #999999;\n --color-bar-alt: #f5f5f5;\n --color-bar-alt-text: #5a5a5a;\n --color-inverse: #252525;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #999999;\n --color-heading: #333333;\n --color-heading-alt: #5a5a5a;\n --color-link: #0088cc;\n --color-link-quiet: #999999;\n --color-link-visited: #0088cc;\n --color-link-hover: #005580;\n --color-link-active: #005580;\n --color-border: #dddddd;\n --color-border-strong: #cccccc;\n --color-border-muted: #e5e5e5;\n --color-accent: #0088cc;\n --color-accent-text: #ffffff;\n --color-accent-alt: #49afcd;\n --color-fill-1: #6d3353;\n --color-fill-2: #006dcc;\n --color-fill-3: #51a351;\n --color-fill-4: #f89406;\n --color-button: #006dcc;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f5f5f5;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #555555;\n --color-input-border: #cccccc;\n --color-disabled: #e6e6e6;\n --color-disabled-text: #999999;\n --color-danger: #bd362f;\n --color-danger-surface: #f2dede;\n --color-success: #51a351;\n --color-warning: #f89406;\n --color-notice: #fcf8e3;\n --color-notice-text: #c09853;\n --color-focus: #52a8ec;\n --color-shadow: rgb(0 0 0 / 0.25);\n --color-overlay: rgb(0 0 0 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Source Sans Pro\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: Lato, \"Source Sans Pro\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: Lato, \"Source Sans Pro\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Source Code Pro\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 52px;\n --text-h1: 38px;\n --text-h2: 28px;\n --text-h3: 21px;\n --line-body: 1.55;\n --line-heading: 1.15;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 4px;\n --radius-pill: 10px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 1px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 3px 5px var(--color-shadow);\n --shadow-dialog: 0 5px 15px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: linear-gradient(color-mix(in srgb, black 12%, transparent), color-mix(in srgb, black 12%, transparent)), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 45%, transparent);\n --transition: border-color 0.15s ease-in-out;\n --backdrop-blur: 0px;\n}\n" } }