{ "id": "v1-bs-1322", "long_id": "v1.bootstrap-era.landing.s01.p03.t02.u02", "name": "Framework default marketing page", "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": "landing", "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. A bar is fixed across the top, a big grey hero block opens the page, content sits in rows of three columns inside a fixed centred container, and wells, bordered panels, coloured status buttons and labels do the rest. This pack is the 2012 form of it, as a product marketing site: a glossy dark bar, gradient buttons with a one-pixel text shadow, 4px corners and small 13px Helvetica.", "url": "https://chrono.skin/s/v1-bs-1322", "preview_url": "https://chrono.skin/s/v1-bs-1322/specimen.html", "files": { "STYLE.md": "# Framework default marketing page\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. A bar is fixed across the top, a big grey hero block opens the page, content sits in rows of three columns inside a fixed centred container, and wells, bordered panels, coloured status buttons and labels do the rest. This pack is the 2012 form of it, as a product marketing site: a glossy dark bar, gradient buttons with a one-pixel text shadow, 4px corners and small 13px Helvetica.\n\n## Layout\n\n- Fixed width: one centred `.ds-container` of `--size-page` (940px) on a 1280px viewport; the page background runs to the edges and only the top bar and the footer strip span the window.\n- The top bar is `--size-nav` (42px) tall and fixed (`position: sticky`); its inner row is `--size-bar` (970px) wide: brand, links, then a line of text and a small button at the right.\n- Home page, top to bottom inside `.ds-main`: the grey hero block, a row of three columns each ending in a \"View details\" button, the inverted stats block, two featurette rows with the picture on alternating sides and a rule between them, a row of four thumbnails, then a panel beside a well. Blocks are `--space-5` apart.\n- Inner pages have no hero. They start with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one grey line, an action at the right, a rule under it), then the work in the same container: `.ds-tabs` directly under the page header where a page has sections, a `--size-sidebar` (220px) side column with the `.ds-sidebar` well at the left of running text, or a wide main column with a stacked side column of panels at the right for lists and forms.\n- Views. The specimen is a staff rota product with five views. `home` is the marketing page described above. `tour` is a tabbed feature page: the section list in a well beside the running text, a placeholder picture and a row of links. `pricing` has three plan panels, the comparison table with its legend of labels, and three short answers in a row. `news` is the post list with pagination beside a category list and an empty box for webinars. `signup` is the account form in a panel under two alerts, with the open confirmation modal below it and panels at the side.\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. A drop-down such as Tour is not shown on the phone: only its own link is in the list. Below 760px every row of columns stacks, the stats fold to two by two, thumbnails to two columns, plan 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` (4px) and `--space-control-x` (12px).\n- Other sizes: `--size-tile` 110px (thumbnail colour block, placeholder picture), `--size-icon` 40px, `--size-mark` 24px, `--size-dialog` 560px, `--size-search` 200px.\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: Helvetica Neue, then Helvetica, then Arial. `--font-mono` (Menlo, Monaco, Consolas) is for code.\n- Body is `--text-base` 14px at `--line-body` 1.43 (20px) in `--color-text` #333333. Headings are medium weight (`--weight-heading` 500): `--text-h1` 36px, `--text-h2` 30px, `--text-h3` 24px. `--text-display` 63px is the masthead title only. `--text-large` 21px is lead text and large buttons; `--text-small` 12px is meta, labels and code blocks.\n- Surfaces: white page; `--color-surface-alt` #f9f9f9 for stripes, wells, code blocks and the breadcrumb; `--color-surface-strong` #eeeeee for panel heading strips and the icon plates. Borders are 1px `--color-border` #dddddd.\n- The bar is off-white (`--color-bar` #f8f8f8) with grey `--color-bar-text` #777777. Purple is the brand colour: `--color-link` #563d7c for links and small titles, `--color-button` #6f5499 for the primary button and the default label. `--color-fill-1` (sky blue #5fb0e4) is the masthead and the page-header band, with `--color-accent-text` white on it.\n- Flat: every `--fill-*` token is a single colour, `--shadow-text` is `none`, buttons have no shadow. Panels keep a hairline 1px shadow; inputs fade their border on focus (`--transition`) and get a soft 3px focus ring. Labels are fully rounded (`--radius-pill` 10px).\n\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, so that the same text reads on each;\n - on the top bar (`--fill-bar`): `--color-bar-text` only, for the name, the links and plain text. 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 is `.ds-link` or 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 (buttons, labels, tiles, the masthead, the current list item): `--color-accent-text`. A token set keeps all of these dark or saturated enough for it;\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` (green), `--color-warning` (amber), `--color-danger` (red) and `--color-accent-alt` (the light blue \"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. The status buttons reuse it with `background-color` set to their own colour, so a token set must not bake an opaque gradient into `--fill-button` or `--fill-button-hover`.\n- Inputs, wells and the current bar item take `--shadow-control-pressed` (the inset shadow); buttons and the brand tile take `--shadow-control`. Button and brand tile borders are `--color-shadow`, a translucent dark edge on any fill.\n- Links are never underlined at rest (`--link-decoration: none`) and underline on hover. `--color-link-visited` equals the link colour.\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 hover and current 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 big grey block inside the container: `--color-surface-strong`, `--radius-page`, `--space-7` padding, left-aligned. `.ds-hero__title` (60px bold), `.ds-hero__lead` (18px), `.ds-hero__actions` with an optional large `.ds-hero__field` input, one large primary button and one large `--secondary`, and a small grey `.ds-hero__note`. One per site, on the home page.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` (30px bold) and one grey `.ds-page-header__text` line at 18px, `.ds-page-header__actions` at the right on the baseline, and a faint rule under it all. Place it directly after the breadcrumb. `.ds-main` is the container with `--space-5` above its first block.\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, here an inverted block (`--fill-inverse`, `--radius-page`) across the container. `.ds-stat` is the row; each `.ds-stat__item` is a centred `.ds-stat__figure` (30px bold) over a `.ds-stat__label`, divided from the next by a faint vertical rule. Four across. `.ds-featurette` is the row that follows it on a marketing page: `.ds-featurette__copy` with a `.ds-featurette__title` (its second sentence in a grey `span`) and a `.ds-lead`, beside `.ds-featurette__art` holding a picture; `--reverse` swaps the sides.\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`: a well holding a list of section links: small bold grey `.ds-sidebar__title` headings, each over a `.ds-sidebar__list` of `.ds-sidebar__link` rows that fill the width; `is-current` is filled with `--fill-accent`. `.ds-sidebar__count` is a small grey number at the right of a row.\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; `.ds-footer__inner` is the container width with `.ds-footer__text` at the left and `.ds-footer__links` of underlined `.ds-footer__link` at the right.\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-carousel`: a block on the inverse fill with one `.ds-carousel__slide` showing, round `.ds-carousel__arrow` labels at the sides (`--prev`, `--next`) and `.ds-carousel__dots` below. It works without script: one hidden radio button `.ds-carousel__pick` per slide comes first, and the arrows and each `.ds-carousel__dot` are labels for them. Up to three slides; a slide holds a `.ds-carousel__title`, a `.ds-carousel__text` and, for a quotation, a `.ds-carousel__by` line.\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 <= 940px`: content stays in the fixed centred container.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `font-size >= 12px`: meta text, labels and code blocks are the smallest.\n- `font-size <= 63px`: the masthead title is the largest text.\n- `font-weight <= 700`: headings are medium (500); bold is the heaviest.\n- `letter-spacing = 0`: text is not tracked.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 20%`: links are underlined only on hover 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: 940px;\n --size-bar: 970px;\n --size-nav: 42px;\n --size-mark: 24px;\n --size-search: 200px;\n --size-sidebar: 220px;\n --size-tile: 110px;\n --size-icon: 40px;\n --size-dialog: 560px;\n --space-control-y: 4px;\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.ds-figure--tall {\n min-height: calc(var(--size-tile) * 2);\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--success {\n background: var(--fill-button);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--info {\n background: var(--fill-button);\n background-color: var(--color-accent-alt);\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--flush {\n gap: 0;\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--bordered {\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table--bordered th,\n.ds-table--bordered td {\n border-left: var(--border-width) var(--border-style) var(--color-border);\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--primary {\n border-color: var(--color-button);\n}\n.ds-panel--primary > .ds-panel__title {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border-bottom-color: var(--color-button);\n text-shadow: var(--shadow-text);\n}\n.ds-panel--success {\n border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel--success > .ds-panel__title {\n background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\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, 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, 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__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.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(#tour:target) .ds-nav__link[href=\"#tour\"],\n.ds-page:has(#tour:target) .ds-menu--nav .ds-menu__item[href=\"#tour\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#pricing:target) .ds-menu--nav .ds-menu__item[href=\"#pricing\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#news:target) .ds-menu--nav .ds-menu__item[href=\"#news\"] {\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 the bar */\n.ds-main {\n padding-top: var(--space-5);\n}\n\n/* hero: the big grey block inside the column */\n.ds-hero {\n margin-bottom: var(--space-5);\n padding: var(--space-7);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: var(--radius-page);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\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 margin: 0 0 var(--space-5);\n max-width: 62ch;\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 align-items: center;\n gap: var(--space-2);\n}\n.ds-hero__field {\n flex: 0 1 var(--size-sidebar);\n}\n.ds-hero__field .ds-form__input {\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-page);\n font-size: var(--text-large);\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* page header: title with a rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding-bottom: var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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 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 margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* stats: figures in a row on the inverted block */\n.ds-stat {\n display: flex;\n margin: 0 0 var(--space-5);\n padding: var(--space-4) 0;\n list-style: none;\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 20%, transparent);\n text-align: center;\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__figure {\n display: block;\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 font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-base);\n opacity: 0.7;\n}\n\n/* featurette: a wide text column beside a picture, sides alternating */\n.ds-featurette {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n}\n.ds-featurette--reverse {\n flex-direction: row-reverse;\n}\n.ds-featurette__copy {\n flex: 7 1 0;\n min-width: 0;\n}\n.ds-featurette__art {\n flex: 5 1 0;\n min-width: 0;\n}\n.ds-featurette__title {\n margin: 0 0 var(--space-3);\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-featurette__title span {\n color: var(--color-text-muted);\n}\n\n/* sidebar: a well holding a list of links */\n.ds-sidebar {\n padding: var(--space-2) 0;\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-sidebar__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n color: var(--color-text-muted);\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;\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-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-sidebar__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__count {\n float: right;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* footer: a grey strip across the page */\n.ds-footer {\n margin-top: var(--space-6);\n padding: var(--space-5) 0;\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}\n.ds-footer__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\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/* carousel: one slide showing on an inverted block, arrows at the sides, dots below; radio buttons keep the place */\n.ds-carousel {\n position: relative;\n margin: 0 0 var(--space-5);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-carousel__pick {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n}\n.ds-carousel__slide {\n display: none;\n min-height: calc(var(--size-icon) * 4);\n padding: var(--space-5) calc(var(--size-icon) + var(--space-5)) var(--space-6);\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__slide:nth-of-type(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__slide:nth-of-type(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__slide:nth-of-type(3) {\n display: block;\n}\n.ds-carousel__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\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-carousel__text {\n margin: 0 0 var(--space-3);\n max-width: 64ch;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-carousel__by {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: var(--text-base);\n}\n.ds-carousel__arrow {\n position: absolute;\n top: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n color: var(--color-inverse-text);\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n cursor: pointer;\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-carousel__arrow::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-h3) * 0.4);\n height: calc(var(--text-h3) * 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}\n.ds-carousel__arrow--next::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n}\n.ds-carousel__arrow--prev {\n left: var(--space-3);\n}\n.ds-carousel__arrow--next {\n right: var(--space-3);\n}\n.ds-carousel__dots {\n position: absolute;\n right: 0;\n bottom: var(--space-3);\n left: 0;\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n}\n.ds-carousel__dot {\n width: var(--space-2);\n height: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-inverse-text);\n border-radius: 50%;\n cursor: pointer;\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(3) {\n background: var(--color-inverse-text);\n}\n.ds-carousel__pick:focus-visible ~ .ds-carousel__dots {\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--40 {\n width: 40%;\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-avatar--round {\n border-radius: 50%;\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, wide tables scroll in their own box */\n@media (max-width: 760px) {\n .ds-nav__text {\n display: none;\n }\n .ds-carousel__slide {\n padding: var(--space-4) var(--space-4) calc(var(--size-icon) + var(--space-5));\n }\n .ds-carousel__arrow {\n top: auto;\n bottom: var(--space-2);\n transform: none;\n }\n .ds-main {\n padding-top: var(--space-3);\n }\n .ds-row,\n .ds-featurette,\n .ds-featurette--reverse {\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 .ds-featurette__copy,\n .ds-featurette__art {\n flex: 0 0 auto;\n }\n .ds-hero {\n padding: var(--space-5) var(--space-4);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n letter-spacing: 0;\n }\n .ds-hero__field {\n flex: 1 1 100%;\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\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 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: 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: 60ch;\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 marketing specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n 30 days free\n Sign up\n
\n
\n \n \n
\n
\n
\n\n
\n\n
\n
\n

Staff rotas, sorted.

\n

chronoskin plans the week for cafes, shops and clinics. Build a rota in minutes, let the team swap shifts among themselves, and send the hours straight to payroll.

\n
\n \n Start a free trial\n Take the tour\n
\n

Free for 30 days. No card needed.

\n
\n\n
\n
\n

Plan the week

\n

Drag shifts onto a grid of people and days. chronoskin warns you about clashes, short rests and anyone who is over their contracted hours.

\n View details »\n
\n
\n

Swap shifts New

\n

Staff offer a shift from their phone and a colleague picks it up. A manager approves the swap with one click, or sets rules that approve it for them.

\n View details »\n
\n
\n

Run payroll

\n

Worked hours, breaks and holiday are totalled per person at the end of the period and exported in the layout your payroll package already reads.

\n View details »\n
\n
\n\n
    \n
  • 4,200teams on a rota
    • \n
  • 61,000shifts planned a week
    • \n
  • 9 minto build a typical week
    • \n
  • 99.9%uptime this year
    • \n
\n\n
\n
\n

The whole week on one screen. No more printouts.

\n

Everyone sees the same rota, on the wall screen in the back office and on the phone in their pocket. Change a shift and the people it affects get a message.

\n
\n
400 x 220
\n
\n
\n
\n
\n

Holiday that books itself. Almost.

\n

Requests land in one list with the cover already worked out, so saying yes takes a second and saying no comes with a reason.

\n
\n
400 x 220
\n
\n
\n\n
\n \n \n \n
\n

\"Friday afternoons are mine again.\"

\n

The rota used to take two hours and a pencil. Now it is a template, three changes and a button.

\n

C The owner of a cafe with twelve staff

\n \n \n
\n
\n

\"Swaps stopped being my problem.\"

\n

Two people agree between themselves and I get one message to approve. Most weeks I do not even get that.

\n

S The manager of a shop on the high street

\n \n \n
\n
\n

\"Payroll takes ten minutes now.\"

\n

The hours come out in the layout our package reads. Nobody retypes a timesheet any more.

\n

P The practice manager of a dental clinic

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

Who uses it four kinds of team, one rota

\n
\n
\n
\n
\n

Cafes

\n

Early, late and split shifts across the week.

\n See a cafe rota\n
\n
\n
\n
\n
\n

Shops

\n

Weekend cover and seasonal staff in one plan.

\n See a shop rota\n
\n
\n
\n
\n
\n

Clinics

\n

On-call lists and rest rules checked for you.

\n See a clinic rota\n
\n
\n
\n
\n
\n

Workshops

\n

Jobs, benches and people on the same grid.

\n See a workshop rota\n
\n
\n
\n\n
\n
\n
\n

From the news page

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

Try it with your own team

\n

Import last week's rota from a spreadsheet and have next week planned before lunch.

\n Start a free trial\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Tour
    3. \n
  3. Planning
    4. \n
\n
\n
\n

Tour

\n

What a week with chronoskin looks like, one screen at a time.

\n
\n
\n Start a free trial\n
\n
\n\n \n\n
\n
\n \n
\n

Need a hand?

\n
\n

We will import your first rota for you. Send the spreadsheet and it is ready the next working day.

\n Ask for an import\n
\n
\n
\n
\n
\n

Planning the week

\n

A rota is a grid: people down the side, days across the top.

\n

Pick a shift from the palette and drop it on a cell. A shift keeps its start, end and break, so the hours add up as you go and the total for each person sits at the end of the row.

\n

Start from a template

\n

Most weeks look like the one before. Save any week as a template and the next one starts filled in.

\n
    \n
  • One template per site, or one per season
    • \n
  • Named shifts with their own colour
    • \n
  • Open shiftsA shift with no name on it yet. It shows on everyone's phone. that anyone qualified may claim
    • \n
\n

Importing an old rota

\n

Export the old sheet as rota.csv with one row per shift. The importer matches people by email address and tells you which rows it could not place.

\n
\n
620 x 110
\n
\n
\n\n

\n Read next:\n Swapping a shift\n Booking holiday\n What it costs\n What changed this month\n Back to the start\n

\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Pricing
    3. \n
\n
\n
\n

Pricing

\n

Pay per site, not per person. Every plan starts with 30 days free.

\n
\n
\n Start a free trial\n
\n
\n\n
\n
\n

Corner

\n
\n $12\n

a month for one site and up to 15 people. Rotas, swaps and holiday.

\n Choose Corner\n
\n
\n
\n

High street Most chosen

\n
\n $29\n

a month for three sites and up to 60 people. Adds payroll export.

\n Choose High street\n
\n
\n
\n

Chain

\n
\n $79\n

a month for twenty sites and up to 400 people. Adds roles and reports.

\n Choose Chain\n
\n
\n
\n\n

Compare the plans

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
Prices in US dollars, billed monthly. Tax is added where it applies.
What you getCornerHigh streetChain
Sites1320
People on the rota1560400
Months of history kept31236
Text messages a month504002,500
Payroll export Add-on$5.00$0.00$0.00
\n
\n
\n
\n In the tables:\n Included\n Add-onNot in the plan, but you can add it for the price shown.\n New\n Most chosen\n Ending soon\n 3\n
\n Read about the last price change\n
\n\n

Questions about the plans

\n
\n
\n Can I change plan later?\n

At any time, up or down. The new price starts with your next bill.

\n
\n
\n What counts as a site?\n

One address with its own rota. A stall and its kitchen are one site.

\n
\n
\n Is there a contract?\n

No. Plans run month to month and stop on the day you cancel.

\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. News
    3. \n
\n
\n
\n

News

\n

Releases, customer stories and the odd note from the team.

\n
\n
\n Get news by email\n
\n
\n\n
\n
\n
    \n
  • \n Shift swaps are out of beta\n

    Swaps now work across sites, and a manager can set rules that approve the simple ones without being asked.

    \n 14 March 2013 by Ines Hartog in Releases, 6 comments\n
    • \n
  • \n Payroll export for three more packages\n

    The export screen has three new layouts and remembers the one you used last time.

    \n 2 March 2013 by Tom Reyes in Releases, 2 comments\n
    • \n
  • \n How a bakery with four sites plans its week\n

    One planner, four ovens and forty people: a short interview about templates and early starts.

    \n 19 February 2013 by Ines Hartog in Customers, 11 comments\n
    • \n
  • \n Holiday requests on the phone\n

    Ask for a day off from the mobile page and see straight away who else is away that week.

    \n 4 February 2013 by Tom Reyes in Releases, 4 comments\n
    • \n
  • \n A quieter January, and what we fixed\n

    Forty small repairs, the largest of them to printing a rota on one sheet.

    \n 21 January 2013 by Ines Hartog in Notes, 1 comment\n
    • \n
\n \n
\n
\n \n
\n \n

No webinars planned

\n

The next live walk-through has no date yet. Leave your address and we will tell you first.

\n Tell me when\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Sign up
    3. \n
\n
\n
\n

Sign up

\n

Thirty days free, with every feature switched on.

\n
\n
\n See the plans\n
\n
\n\n
\n
\n

Step 1 of 3: your accountNext: your team

\n
\n
\n

Heads up. You can invite the rest of the team once the first rota is published.

\n

That did not work. Check the email address and send the form again.

\n
\n
\n

Your account

\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n \n
\n
\n \n Use a demo team\n Clear the form\n \n
\n
\n
\n
\n
\n
\n

Clear the form?

\n \n
\n
\n

Everything you have typed on this page will be removed. Nothing has been sent yet.

\n
\n
\n Keep editing\n Clear it\n
\n
\n
\n
\n
\n
\n

In the trial

\n
\n

Every feature of the Chain plan, for one site and as many people as you like.

\n Compare the plans\n
\n
\n
\n

After 30 days

\n
\n

Choose a plan or do nothing. Rotas you have published stay readable for a year.

\n
\n
\n
\n

Bringing a rota with you?

\n
\n

Send last week's spreadsheet after you sign up and we will load it for you, people and shifts included.

\n How importing works\n
\n
\n
\n

Teams that joined this week

\n
\n
    \n
  • BA bakery with four sites38 people, joined on Monday
    • \n
  • DA dental practice11 people, joined on Tuesday
    • \n
  • WA bicycle workshop6 people, joined on Thursday
    • \n
\n
\n
\n
\n

Rather talk first?

\n

Book a twenty minute call and we will build your first week together.

\n Book a call\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bootstrap-era.landing.s01.p03.t02.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"landing\",\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-1322\",\n \"short\": \"v1-bs-1322\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #111111;\n --color-canvas: #111111;\n --color-surface: #1b1b1b;\n --color-surface-alt: #222222;\n --color-surface-strong: #333333;\n --color-bar: #1fa67a;\n --color-bar-text: #d2ebe3;\n --color-bar-alt: #252525;\n --color-bar-alt-text: #999999;\n --color-inverse: #eeeeee;\n --color-inverse-text: #333333;\n --color-text: #cccccc;\n --color-text-muted: #999999;\n --color-heading: #ffffff;\n --color-heading-alt: #a5d8c7;\n --color-link: #21b384;\n --color-link-quiet: #999999;\n --color-link-visited: #21b384;\n --color-link-hover: #a5d8c7;\n --color-link-active: #1b926c;\n --color-border: #333333;\n --color-border-strong: #5a5a5a;\n --color-border-muted: #252525;\n --color-accent: #1b926c;\n --color-accent-text: #ffffff;\n --color-accent-alt: #5fb0e4;\n --color-fill-1: #1b926c;\n --color-fill-2: #6d3353;\n --color-fill-3: #006dcc;\n --color-fill-4: #c09853;\n --color-button: #1fa67a;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #333333;\n --color-button-secondary-text: #ffffff;\n --color-input: #222222;\n --color-input-text: #cccccc;\n --color-input-border: #5a5a5a;\n --color-disabled: #252525;\n --color-disabled-text: #5a5a5a;\n --color-danger: #da4f49;\n --color-danger-surface: #2d1a1a;\n --color-success: #62c462;\n --color-warning: #f89406;\n --color-notice: #333333;\n --color-notice-text: #d2ebe3;\n --color-focus: #a5d8c7;\n --color-shadow: rgb(0 0 0 / 0.5);\n --color-overlay: rgb(0 0 0 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 63px;\n --text-h1: 36px;\n --text-h2: 30px;\n --text-h3: 24px;\n --line-body: 1.43;\n --line-heading: 1.1;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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" } }