{ "id": "v1-dd-8568", "long_id": "v1.dev-dark.blog.s08.p05.t06.u08", "name": "Dark developer tools customer stories", "era": { "slug": "dev-dark", "code": "dd", "name": "Dark developer tools", "years": [ 2019, 2026 ], "description": "Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the customer stories section of a developer product in the \"technical grid\" strand of 2022 to 2026, shown light as that look often is: off-white paper with a faint dot grid, dark hairlines ruled across the whole window and one hot colour used sparingly. A masthead with the brand in its middle stands over a mono strip of facts, the lead story sets a very large bold headline beside a flat tinted plate that carries its one figure, and the other stories are cells that share their borders, each with its own number. In this set headings are a heavy tight grotesque, labels are small monospace capitals, corners are square with pill tags, and the accent is a vermilion.", "url": "https://chrono.skin/s/v1-dd-8568", "preview_url": "https://chrono.skin/s/v1-dd-8568/specimen.html", "files": { "STYLE.md": "# Dark developer tools customer stories\n\n## Summary\n\nThis is the customer stories section of a developer product in the \"technical grid\" strand of 2022 to 2026, shown light as that look often is: off-white paper with a faint dot grid, dark hairlines ruled across the whole window and one hot colour used sparingly. A masthead with the brand in its middle stands over a mono strip of facts, the lead story sets a very large bold headline beside a flat tinted plate that carries its one figure, and the other stories are cells that share their borders, each with its own number. In this set headings are a heavy tight grotesque, labels are small monospace capitals, corners are square with pill tags, and the accent is a vermilion.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. Content sits in `.ds-wrap`, at most `--size-page` (1320px) wide with `--space-6` (36px) of side padding and no frame lines. `.ds-band` is a row: a hairline across the whole window above it and `--space-7` (56px) of padding; `--flush` has none (its columns pad themselves), `--last` leaves `--space-8` above the footer.\n- Navigation is `.ds-nav`, which stays at the top of the window. Its first row, `.ds-nav__inner` (`--size-top` 68px) on `--fill-bar`, has four links at the left (the first drops a `.ds-menu`), the brand centred at `--text-h2`, and a secondary and a primary small button at the right; the current link carries a `--border-width-strong` line in `--color-accent-alt` along the bottom of the row. Under it `.ds-nav__strip`, a mono strip on `--fill-bar-alt` between two hairlines, spreads four facts across the width. There is no rail.\n- The home view stacks: `.ds-hero`, two columns 7 to 5 (label, the `--text-display` headline, lead, two large buttons and the byline at the left; `.ds-plate` with the story's figure and two meters at the right of a hairline); a row with `.ds-stat`, four figures each under a strong rule; a row with a `.ds-colhead` and `.ds-grid`, six story cells in one bordered box; a flush row with `.ds-split`, the quote `.ds-carousel` beside the numbered `.ds-list`; and `.ds-cta`, the one inverted block, a band across the whole window.\n- Inner pages have no hero. They open with `.ds-page-header`: the breadcrumb, then a `--text-h1` title and one line at `--text-large` at the left with at most two buttons at the right; a story adds `.ds-page-header__meta`, a row of byline, date and tag under a strong rule. Below it one row holds the work: `.ds-article` (facts `--size-facts` 264px, text, results `--size-side` 304px), `.ds-cols--menu` (a 264px column of sidebars at the left) or `.ds-cols` (a 304px column at the right). Tabs sit on the rule of a `.ds-toolbar` directly over the table they filter; the pagination is in the `.ds-table__foot`.\n- Views. The specimen is the customer stories of chronoskin in four views. `stories` is the home view described above. `story` is one case study: the panel of facts and a row of links at the left, the text as prose with a pull quote in the middle, four results with meters and a tooltip at the right. `index` lists every story: the sidebars and the key of state labels at the left; tabs with a switch, the table with pagination and an empty state at the right. `submit` has two notices, the form with a switch and the questions as an accordion at the left; the draft with its meter and buttons, the open dialog that discards it and the editor at the right.\n- Spacing scale: `--space-1` 4px (small button vertical padding, sidebar rows, between carousel marks), `--space-2` 8px (button and input vertical padding, between adjacent buttons and badges, strip padding), `--space-3` 12px (table cell and list row vertical padding, above a figure's label), `--space-4` 16px (panel and story cell padding, between form rows), `--space-5` 24px (between stacked blocks, between figures, plate padding), `--space-6` 36px (side padding, under a column head, between the columns of a split), `--space-7` 56px (row padding, between main and side column), `--space-8` 88px (above the footer).\n- Other sizes: `--size-plate` 148px (the tinted block of a story cell), `--size-index` 56px (the number column of the list), `--size-tick` 10px (crop marks), `--size-mark` 28px, `--size-dot` 8px, `--size-dialog` 460px, `--size-narrow` 660px.\n- Below 1080px the brand moves to the left of the masthead, every column pair stacks, the results of a story go under its text and cells and figures stand two across. Below 900px the strip keeps two facts (`.ds-nav__fact--wide` is not shown). Below 640px everything is one column, the links take a second row of the masthead, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n- On a phone (640px and below) the masthead is two columns: the brand and `.ds-nav__actions` on the first row and `.ds-nav__links` on a second row spread across it; the strip keeps the two facts it has had since 900px. The drop-down of a link that has a `.ds-menu` opens as a list `70vw` wide whose items may wrap onto several lines.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThe conventions for which text sits on which fill are those of the era's first layout and are kept here.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` sit on the page, on `--fill-panel` (panels, plans, cells, the page header, the menu), `--color-surface-alt` (the stat strip, the segmented control, a hovered row, the dialog) and `--color-surface-strong` (slider tracks, the current menu row, key caps, quiet badges). `--color-bar-text` sits on `--fill-bar` (the floating bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (table heads, code heads, the footer), with `--color-heading` for the brand there. `--color-button-text` sits on `--fill-button`, which also dresses the current segment of the tabs and the thumb of a slider. `--color-accent-text` sits on `--fill-accent` (the default badge, the disc of the current step). `--color-inverse-text` sits on `--fill-inverse`, used once per view, for `.ds-estimate`.\n- `--color-fill-1` to `--color-fill-4` never carry text. Each tints one corner of a grid cell at 20% and colours its drawing (72% of the fill mixed into `--color-heading`); `--color-fill-1` is also the glow behind the hero, the tint of the recommended plan (17%) and of the page header (14%).\n- `--color-accent` rules the top of the recommended plan and fills the used part of a slider through `--fill-accent`. `--color-accent-alt` is a text colour: the mono label of a section, the plus before each plan feature, keywords in code.\n- `--color-success`, `--color-warning` and `--color-danger` are a tick, a dot, or a 12% tint with a 32% hairline and the colour as text. Nothing is filled solid with them; the destructive button is a tint too.\n- Borders: `--color-border` on boxes and between plans, `--color-border-strong` on the bar, the box of plans, secondary buttons, step discs and their rule, the total and the dialog, `--color-border-muted` between rows inside a box. All `--border-width`; `--border-width-strong` is the rule of the recommended plan, the ring of a slider thumb and the focus offset.\n- Type. `--font-body` for text and controls, `--font-heading` for titles, prices and figures, `--font-mono` for units, dates, counts and code. `--text-base` 15px at `--line-body` 1.5; `--text-ui` 14px for navigation, buttons, forms, tables, plan features and cell text; `--text-small` 13px for badges, mono labels and scales; `--text-large` 19px for the hero lead. `--text-display` 52px is the hero title and the estimate's figure; `--text-h1` 34px section and page titles, prices and stat figures; `--text-h2` 22px the total; `--text-h3` 16px panel, plan, cell and question titles. Headings are `--weight-heading` 600.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, `.ds-estimate__label`, table heads, the menu title), tracked by 6% of the font size. Links are `--color-link` without underline and gain one on hover; quiet links are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 14px for buttons, inputs, menu rows and tab segments, `--radius-panel` 20px for panels, code, notices and the menu, `--radius-page` 28px for the bar, the box of plans, cells, the stat strip, the page header, the estimate, the dialog box and the top of the footer, `--radius-pill` for badges, navigation links and slider tracks. `--shadow-panel` is on the bar, panels, cells, the page header and the menu, `--shadow-control` on buttons, the brand tile, the slider thumb and the current segment, `--shadow-dialog` on the box of plans and the dialog.\n- One-off values written with `calc()` and `color-mix()`: the glow (20% of a fill), plan, cell and header tints (17%, 20%, 14%), drawing colours (72%), status tints (12%, 32%, 45%), the outline of the current link (36% of the bar's text colour), rules inside the estimate (16% of its text colour), the notice border (22% and 40%), the corner of the segmented control (`--radius-control` plus `--space-1`), mono label tracking, the width of the bar (`--size-page` less two `--space-5`). Navigation links are at `opacity` 0.64 until current, secondary text of the estimate at 0.7. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and `--fill-page`. `.ds-nav`, the views and `.ds-footer` are its direct children.\n- `.ds-wrap`, `.ds-band`, `.ds-stack`, `.ds-cols`, `.ds-split`, `.ds-colhead`: the centred column, a ruled row (`--flush`, `--last`), a vertical stack 24px apart, the column pairs (`--menu`, `--even`), two columns of a flush row with a hairline between (`.ds-split__cell`), and the head of a block (`.ds-colhead__title` under a `.ds-eyebrow`, a link at the right).\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 28px tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the masthead. `.ds-nav__inner` holds `.ds-nav__links` of `.ds-nav__link` (current: `is-current`), the brand and `.ds-nav__actions`; `.ds-nav__strip` holds `.ds-nav__facts` of `.ds-nav__fact` (`--wide` is dropped on a narrow window). In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current`.\n- `.ds-menu`: on the list item of a navigation link; its `.ds-menu__list` of `.ds-menu__item` drops under the link while it is hovered or focused (`is-open` shows it statically). No script.\n- `.ds-hero`: home view only. `.ds-hero__inner` is two columns: `.ds-hero__copy` with a `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` and the byline `.ds-hero__by`; `.ds-hero__side` with the plate.\n- `.ds-plate`: a flat tinted block with crop marks in two corners: a label and `.ds-plate__text`, the large `.ds-plate__figure` (its `small` is the unit) and `.ds-plate__bars` for meters.\n- `.ds-page-header`: head of an inner page: the breadcrumb, `.ds-page-header__inner` with `.ds-page-header__copy` (`.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions`, then an optional `.ds-page-header__meta`.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`; `.ds-prose__lead` for the first paragraph. `.ds-quote` is a pull quote inside it.\n- `.ds-article`: the three columns of a story. `.ds-result` is one result in its right column: `.ds-result__label`, `.ds-result__figure` and a meter.\n- `.ds-code`: a code block on `--fill-input`: optional `.ds-code__head` with `.ds-code__name`, then `.ds-code__body` (a `pre`). Spans `.ds-code__k`, `__s`, `__c`, `__n` colour keywords, strings, comments and names.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot`: the mono label (`--accent`), mono data text, a key cap and a status dot (`--success`, `--warning`, `--danger`, `--accent`).\n- `.ds-avatar`: initials on a tile shaped by `--radius-pill`; `--2` and `--3` tint it, `--large` doubles it, `.ds-avatars` overlaps several. `.ds-person` puts one beside `.ds-person__name` and `.ds-person__role`.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more` (appends an arrow). `.ds-linkrow` lays links in a row.\n- `.ds-button`: 14px medium text. `--secondary` (strong hairline), `--danger` (tint, hairline and text in the danger colour), `--inverse` (on the inverted block only), `--small`, `--large`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces them 8px apart.\n- `.ds-form`: mono labels above fields. `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono`), `.ds-form__select`, `.ds-form__textarea`, `is-error` plus `.ds-form__error`, `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-switch`: a label holding `.ds-switch__input` (a real checkbox, invisible over the whole control), `.ds-switch__track` and an optional `.ds-switch__label`. `is-on` and `is-focus` show the states statically.\n- `.ds-progress`: a meter: `.ds-progress__head` (name and `.ds-progress__value`) over `.ds-progress__bar`, a native `progress` element painted flat; `--quiet` fills it in the muted colour.\n- `.ds-tooltip`: a small ringed trigger whose `.ds-tooltip__tip` shows under it on hover or focus (`is-open` statically), on `--fill-inverse`.\n- `.ds-accordion`: ruled `details` elements: `.ds-accordion__item`, `.ds-accordion__summary` with a plus that becomes a minus, `.ds-accordion__body`.\n- `.ds-carousel`: `.ds-carousel__track` is a row of `.ds-carousel__slide` items that snaps to one slide (`.ds-carousel__quote` over a `.ds-person`); `.ds-carousel__nav` holds `.ds-carousel__dots` of `.ds-carousel__dot` (`is-current`), a count and two `.ds-carousel__arrow` marks (`is-disabled`). It moves by scrolling, without script.\n- `.ds-table`: inside a panel, edge to edge: a mono uppercase head on `--fill-bar-alt`, hairline rows, `is-hover` rows on `--color-surface-alt`, `.ds-table__num` for right-aligned mono numbers, `.ds-table__state` for a dot with a word; `--ruled`, `.ds-table__yes` and `.ds-table__no` for a matrix. Wrap in `.ds-table__wrap`; `.ds-table__foot` closes the panel.\n- `.ds-list`: numbered rows under a rule: `.ds-list__item` is `.ds-list__no` beside a `.ds-list__title` link and a mono `.ds-list__meta`.\n- `.ds-panel`: hairline box on `--fill-panel`: `.ds-panel__head` with `.ds-panel__title`, `.ds-panel__body`; `.ds-panel__rows` of `.ds-panel__row` (`.ds-panel__key`) for facts.\n- `.ds-stat`: the row of figures. Each `.ds-stat__item` is a mono `.ds-stat__label` under a strong rule, a `.ds-stat__figure` and a muted `.ds-stat__text`.\n- `.ds-grid`: story cells in one bordered box. `.ds-grid__cell` (a link) holds `.ds-grid__plate` (`--2`, `--3`, `--4` for the other fills) with `.ds-grid__figure` and `.ds-grid__unit`, then `.ds-grid__meta`, `.ds-grid__title` and `.ds-grid__text`. Keep the number of cells a multiple of the columns.\n- `.ds-cta`: the inverted band: `.ds-cta__inner` with `.ds-cta__title`, `.ds-cta__text` and one `.ds-button--inverse`.\n- `.ds-tabs`: words on a rule, `.ds-tabs__tab` with an optional `.ds-tabs__count`; the current one (`is-current`) has a strong line under it. `.ds-toolbar` is the ruled row that holds it and a control at the right.\n- `.ds-badge`: small mono pill on `--fill-accent`. `--quiet`, `--outline`. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a ruled mono `.ds-sidebar__title` over `.ds-sidebar__list`; `.ds-sidebar__item`, current with `is-current` and a strong line at its left.\n- `.ds-notice`: message strip on `--color-notice` with a strong line at its left; `--error` in the danger colours. `.ds-notice__title`; `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined mono cells, `.ds-pagination__link`; `is-current` on `--color-surface-strong`, `is-disabled` grey.\n- `.ds-breadcrumb`: mono capitals, `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block in `--color-overlay` centring `.ds-dialog__box` with `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dashed box: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-footer`: on `--fill-bar-alt`: `.ds-footer__inner` with `.ds-footer__brand` (`.ds-footer__about`) and three columns of `.ds-footer__title` and `.ds-footer__links` of `.ds-footer__link`; `.ds-footer__line` is the mono last line with `.ds-footer__status`.\n\n## Never\n\n- `block-gap <= 88px`: rows are padded by 56px, the footer stands 88px below the last.\n- `font-size >= 13px`: badges, mono labels and scales are the smallest text.\n- `font-size <= 52px`: the hero title and the estimate are the largest text.\n- `font-weight <= 600`: headings and controls are semibold; nothing is bold or black.\n- `font-families <= 3`: a sans for text, a sans for headings and one monospace.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 5%`: only mono labels are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 1px`: only mono labels are spaced out, by 6% of their size.\n- `border-width <= 3px`: rules are 1px hairlines; 3px is the strong rule over a figure and under the current link.\n- `border-radius <= 3px`: boxes are square and controls eased by 3px; pills and circles are shapes.\n- `box-shadow-blur <= 48px`: only the plate and the dialog cast a soft shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 3%`: the dot grid of the page is the only gradient; no box is filled with one.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block of the page is a `.ds-band` with a `.ds-wrap`, opened by a `.ds-colhead` with a numbered mono label; a result or a claim gets its number first, large, under a strong rule or on a tinted plate, and the words after it. Several like things become cells of one bordered box in the manner of `.ds-grid`, not separate cards with space between. Labels are mono capitals tracked by 8%, data is mono. Keep to the conventions above for which text sits on which fill: never put text on a full-strength `--color-fill-*` or status colour, tint it instead. Use the accent for one thing per block and `--fill-inverse` for one band per view. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-page: 1320px;\n --size-narrow: 660px;\n --size-top: 68px;\n --size-side: 304px;\n --size-facts: 264px;\n --size-index: 56px;\n --size-mark: 28px;\n --size-dot: 8px;\n --size-tick: 10px;\n --size-plate: 148px;\n --size-dialog: 460px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 36px;\n --space-7: 56px;\n --space-8: 88px;\n}\n\n/* shell: a masthead, then rows ruled across the whole window; content sits in one wide column */\n.ds-page {\n min-height: 100vh;\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-wrap {\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-6);\n}\n.ds-band {\n padding: var(--space-7) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-band--flush {\n padding: 0;\n}\n.ds-band--last {\n padding-bottom: var(--space-8);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-7);\n align-items: start;\n}\n.ds-cols--menu {\n grid-template-columns: var(--size-facts) minmax(0, 1fr);\n}\n.ds-colhead {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin: 0 0 var(--space-6);\n}\n.ds-colhead__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* nav: a masthead with the brand in the middle, links at the left, actions at the right, and a mono strip under it */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 5;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\n gap: var(--space-5);\n max-width: var(--size-page);\n min-height: var(--size-top);\n margin: 0 auto;\n padding: 0 var(--space-6);\n}\n.ds-nav__inner > .ds-brand {\n justify-self: center;\n}\n.ds-nav__inner > .ds-brand .ds-brand__name {\n font-size: var(--text-h2);\n}\n.ds-nav__links {\n display: flex;\n align-self: stretch;\n gap: var(--space-5);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links > li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n color: var(--color-bar-text);\n border-top: var(--border-width-strong) var(--border-style) transparent;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.68;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__link.is-current {\n border-bottom-color: var(--color-accent-alt);\n opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#stories\"],\n.ds-page:has(#stories:target) .ds-nav__link[href=\"#stories\"],\n.ds-page:has(#story:target) .ds-nav__link[href=\"#story\"],\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"] {\n border-bottom-color: var(--color-accent-alt);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n.ds-nav__strip {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-nav__facts {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-2) var(--space-6);\n list-style: none;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.ds-nav__fact {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* hero: the lead story; the claim at the left, its result on a tinted plate in the column at the right */\n.ds-hero {\n position: relative;\n}\n.ds-hero__inner {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n padding: var(--space-7) var(--space-6) var(--space-7) 0;\n}\n.ds-hero__title {\n max-width: 15ch;\n margin: var(--space-5) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: min(var(--text-display), 10vw);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 48ch;\n margin: 0 0 var(--space-6);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-6);\n}\n.ds-hero__by {\n margin-top: auto;\n}\n.ds-hero__side {\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-6) 0 var(--space-6) var(--space-6);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* plate: a flat tinted block with crop marks in two corners; it carries one large figure */\n.ds-plate {\n position: relative;\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-5);\n min-width: 0;\n padding: var(--space-5);\n background: color-mix(in srgb, var(--color-fill-1) 16%, transparent);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 40%, transparent);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-plate::before,\n.ds-plate::after,\n.ds-grid__plate::before,\n.ds-grid__plate::after {\n content: \"\";\n position: absolute;\n width: var(--size-tick);\n height: var(--size-tick);\n pointer-events: none;\n}\n.ds-plate::before,\n.ds-grid__plate::before {\n top: var(--space-2);\n right: var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-text-muted);\n border-right: var(--border-width) var(--border-style) var(--color-text-muted);\n}\n.ds-plate::after {\n bottom: var(--space-2);\n left: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-text-muted);\n border-left: var(--border-width) var(--border-style) var(--color-text-muted);\n}\n.ds-grid__plate::after {\n top: var(--space-2);\n left: var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-text-muted);\n border-left: var(--border-width) var(--border-style) var(--color-text-muted);\n}\n.ds-plate__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: min(calc(var(--text-display) * 1.5), 22vw);\n font-weight: var(--weight-display);\n line-height: 0.9;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-plate__figure small {\n color: var(--color-accent-alt);\n font-size: 50%;\n letter-spacing: 0;\n}\n.ds-plate__text {\n max-width: 34ch;\n margin: var(--space-3) 0 0;\n font-size: var(--text-ui);\n}\n.ds-plate__bars {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* stats: figures under a strong rule each */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n min-width: 0;\n padding-top: var(--space-3);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-stat__figure {\n display: block;\n margin: var(--space-4) 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__text {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* grid: story cells that share their borders; a tinted plate with the story's figure, then its title */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--border-width);\n overflow: hidden;\n background: var(--color-border);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-4);\n background: var(--fill-panel);\n color: inherit;\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-grid__plate {\n position: relative;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3);\n height: var(--size-plate);\n padding: var(--space-4);\n background: color-mix(in srgb, var(--color-fill-1) 16%, transparent);\n color: var(--color-heading);\n border-radius: var(--radius-panel);\n}\n.ds-grid__plate--2 {\n background: color-mix(in srgb, var(--color-fill-2) 16%, transparent);\n}\n.ds-grid__plate--3 {\n background: color-mix(in srgb, var(--color-fill-3) 18%, transparent);\n}\n.ds-grid__plate--4 {\n background: color-mix(in srgb, var(--color-fill-4) 18%, transparent);\n}\n.ds-grid__figure {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-grid__unit {\n max-width: 14ch;\n color: var(--color-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n text-align: right;\n}\n.ds-grid__meta {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: var(--space-4) 0 var(--space-2);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* split: two columns of a row with a line between them */\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-split__cell {\n min-width: 0;\n padding: var(--space-7) var(--space-6) var(--space-7) 0;\n}\n.ds-split__cell + .ds-split__cell {\n padding: var(--space-7) 0 var(--space-7) var(--space-6);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* carousel: quotes in a row that snaps; one shows, dots and a count say where it stands */\n.ds-carousel {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n height: 100%;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1 1 auto;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n overflow-x: auto;\n list-style: none;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-5);\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__quote {\n max-width: 26ch;\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}\n.ds-carousel__nav {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-carousel__dots {\n display: flex;\n flex: 1 1 auto;\n gap: var(--space-1);\n}\n.ds-carousel__dot {\n width: var(--space-5);\n height: var(--border-width-strong);\n background: var(--color-border-strong);\n}\n.ds-carousel__dot.is-current {\n background: var(--color-accent-alt);\n}\n.ds-carousel__arrow {\n display: inline-grid;\n place-items: center;\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: 1;\n}\n/* An arrow drawn from a shaft and a head, both laid on the middle of the box. */\n.ds-carousel__arrow::before,\n.ds-carousel__arrow::after {\n content: \"\";\n grid-area: 1 / 1;\n}\n.ds-carousel__arrow::before {\n width: var(--space-4);\n height: calc(var(--space-2) / 4);\n background: currentColor;\n}\n.ds-carousel__arrow::after {\n width: var(--space-2);\n height: var(--space-2);\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: calc(var(--space-1) * -0.6) 0;\n}\n.ds-carousel__arrow + .ds-carousel__arrow::after {\n rotate: -135deg;\n translate: calc(var(--space-1) * 0.6) 0;\n}\n.ds-carousel__arrow.is-disabled {\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n}\n\n/* list: numbered rows under a rule */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-index) minmax(0, 1fr);\n gap: var(--space-2);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__no {\n color: var(--color-accent-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: calc(var(--line-body) * 1.3);\n}\n.ds-list__title {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* call to action: the one inverted block, a band across the whole window */\n.ds-cta {\n padding: var(--space-7) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-cta__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-cta__title {\n max-width: 22ch;\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-cta__text {\n margin: var(--space-3) 0 0;\n opacity: 0.72;\n}\n\n/* page header: breadcrumb, a large title and one line; the action at the right; a row of mono facts below */\n.ds-page-header {\n padding: var(--space-6) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__inner {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n max-width: 22ch;\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 max-width: 60ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-page-header__meta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-6);\n padding: var(--space-3) 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n\n/* article: facts at the left, the text in the middle, the results at the right */\n.ds-article {\n display: grid;\n grid-template-columns: var(--size-facts) minmax(0, 1fr) var(--size-side);\n gap: var(--space-7);\n align-items: start;\n}\n.ds-quote {\n margin: var(--space-6) 0;\n padding: var(--space-2) 0 var(--space-2) var(--space-5);\n color: var(--color-heading);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-result {\n padding: var(--space-3) 0 var(--space-5);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-result__label {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-result__figure {\n display: block;\n margin: var(--space-3) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n}\n\n/* tabs: words on a rule; a strong line in the second highlight colour marks the current one */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n color: var(--color-text-muted);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent-alt);\n}\n.ds-tabs__count {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* sidebar: a mono title over links; a strong line at the left marks the current one */\n.ds-sidebar {\n font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding-bottom: var(--space-2);\n color: var(--color-text-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-1) 0 var(--space-1) var(--space-3);\n border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n border-left-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* footer: the brand and three link columns on the secondary bar, a mono line under them */\n.ds-footer {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-7) var(--space-6) var(--space-6);\n}\n.ds-footer__about {\n max-width: 36ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n opacity: 0.7;\n}\n.ds-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n display: inline-block;\n padding: var(--space-1) 0;\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-heading);\n}\n.ds-footer__line {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n width: calc(100% - var(--space-6) * 2);\n max-width: calc(var(--size-page) - var(--space-6) * 2);\n margin: 0 auto;\n padding: var(--space-3) 0 var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-footer__status {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* brand: the mark on a tile dressed like the primary button, the name beside it */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* small parts: the mono label, mono data, the key cap, the status dot */\n.ds-eyebrow {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n color: var(--color-accent-alt);\n}\n.ds-mono {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.ds-kbd {\n display: inline-block;\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-dot--success {\n background: var(--color-success);\n}\n.ds-dot--accent {\n background: var(--color-accent-alt);\n}\n\n/* avatar: initials on a tile; the pill radius decides whether it is a disc or a square */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: calc(var(--size-mark) + var(--space-1));\n height: calc(var(--size-mark) + var(--space-1));\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n.ds-avatar--2 {\n background: color-mix(in srgb, var(--color-fill-1) 22%, var(--color-surface));\n}\n.ds-avatar--3 {\n background: color-mix(in srgb, var(--color-fill-3) 22%, var(--color-surface));\n}\n.ds-avatar--large {\n width: calc(var(--size-mark) * 2);\n height: calc(var(--size-mark) * 2);\n font-size: var(--text-ui);\n}\n.ds-avatars {\n display: inline-flex;\n align-items: center;\n}\n.ds-avatars > .ds-avatar + .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__name {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-person__role {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-accent-alt);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n\n/* code block: a mono title strip on the secondary bar, lines on the input fill */\n.ds-code {\n min-width: 0;\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-code__head {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-code__name {\n flex: 1 1 auto;\n min-width: 0;\n}\n.ds-code__body {\n display: block;\n margin: 0;\n padding: var(--space-4);\n overflow-x: auto;\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n white-space: pre;\n}\n.ds-code__k {\n color: var(--color-accent-alt);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n content: \" \\2192\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n border-color: var(--color-text-muted);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n box-shadow: none;\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 22%, transparent);\n color: var(--color-danger);\n border-color: var(--color-danger);\n box-shadow: none;\n}\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 82%, var(--color-inverse));\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border-muted);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form: labels above fields */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-body);\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--mono {\n font-family: var(--font-mono);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) * 2);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:hover,\n.ds-form__select:hover,\n.ds-form__textarea:hover {\n border-color: var(--color-border-strong);\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n outline-offset: 0;\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* switch: a track and a knob drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2 + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n bottom: var(--border-width-strong);\n left: var(--border-width-strong);\n width: 40%;\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: color-mix(in srgb, var(--color-accent-alt) 20%, transparent);\n border-color: var(--color-accent-alt);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n left: auto;\n right: var(--border-width-strong);\n background: var(--color-accent-alt);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-switch__label {\n font-size: var(--text-ui);\n}\n\n/* progress: a flat bar; the filled part is the second highlight colour */\n.ds-progress {\n display: block;\n min-width: 0;\n}\n.ds-progress__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-progress__value {\n color: var(--color-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-dot);\n overflow: hidden;\n appearance: none;\n -webkit-appearance: none;\n background: var(--color-surface-strong);\n color: var(--color-accent-alt);\n border: 0;\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent-alt);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent-alt);\n}\n.ds-progress--quiet .ds-progress__bar {\n color: var(--color-text-muted);\n}\n.ds-progress--quiet .ds-progress__bar::-webkit-progress-value {\n background: var(--color-text-muted);\n}\n.ds-progress--quiet .ds-progress__bar::-moz-progress-bar {\n background: var(--color-text-muted);\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--space-4);\n height: var(--space-4);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: 1;\n letter-spacing: 0;\n text-transform: none;\n vertical-align: middle;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n top: calc(100% + var(--space-2));\n left: calc(var(--space-3) * -1);\n z-index: 4;\n display: none;\n width: max-content;\n max-width: min(30ch, 56vw);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-body);\n font-size: var(--text-small);\n line-height: var(--line-body);\n text-align: left;\n white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* accordion: ruled sections that open and close */\n.ds-accordion {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n color: var(--color-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-accent-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-accordion__body {\n max-width: 68ch;\n padding: 0 0 var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* menu: a list that drops under a navigation item while it is hovered or focused */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 6;\n display: none;\n min-width: 26ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-control);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n text-decoration: none;\n text-transform: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n\n/* badge: a small mono label; the status variants are a tint of their colour with a hairline */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--outline {\n background: transparent;\n color: var(--color-text-muted);\n border-color: var(--color-border-strong);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 12%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 32%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 12%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* breadcrumb: mono, parted by slashes */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* table: hairline rows and column lines; the head is a strip of mono labels on the secondary bar */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr:hover th,\n.ds-table tbody tr.is-hover td,\n.ds-table tbody tr.is-hover th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n}\n.ds-table__yes {\n color: var(--color-accent-alt);\n font-family: var(--font-mono);\n}\n.ds-table__no {\n color: var(--color-disabled-text);\n font-family: var(--font-mono);\n}\n.ds-table__state {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* panel: a hairline box on the panel fill */\n.ds-panel {\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__body > .ds-progress + .ds-progress,\n.ds-panel__body > .ds-progress + .ds-buttonrow,\n.ds-panel__body > .ds-badgerow + p,\n.ds-panel__body > .ds-linkrow,\n.ds-panel__body > .ds-person + p {\n margin-top: var(--space-4);\n}\n.ds-panel > .ds-code {\n border: 0;\n border-radius: 0;\n}\n.ds-panel__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-panel__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__key {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n}\n\n/* notice: a strip with a strong line at its left */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 24%, transparent);\n border-left: var(--border-width-strong) var(--border-style) var(--color-notice-text);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n border-left-color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination: joined mono cells */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-pagination__link {\n display: block;\n min-width: var(--space-6);\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-1) var(--space-2);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) var(--color-border);\n line-height: var(--line-body);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n font-variant-numeric: tabular-nums;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n position: relative;\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* dialog: a dimmed block with the box in its middle */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state: a dashed box */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* medium windows: the side columns go under, cells stand two across */\n@media (max-width: 1080px) {\n .ds-nav__inner {\n grid-template-columns: auto minmax(0, 1fr) auto;\n }\n .ds-nav__inner > .ds-brand {\n order: -1;\n justify-self: start;\n }\n .ds-hero__inner,\n .ds-split,\n .ds-cols,\n .ds-cols--menu,\n .ds-cols--even {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__copy,\n .ds-split__cell {\n padding-right: 0;\n }\n .ds-hero__side,\n .ds-split__cell + .ds-split__cell {\n padding-left: 0;\n border-left: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-hero__side {\n padding-bottom: var(--space-7);\n }\n .ds-article {\n grid-template-columns: var(--size-facts) minmax(0, 1fr);\n }\n .ds-article > :last-child {\n grid-column: 1 / -1;\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-footer__inner {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .ds-footer__brand {\n grid-column: 1 / -1;\n }\n}\n\n/* tablets: the strip keeps its first and last fact */\n@media (max-width: 900px) {\n .ds-nav__fact--wide {\n display: none;\n }\n}\n\n/* narrow windows: one column; the links of the masthead move to a second row */\n@media (max-width: 640px) {\n .ds-wrap,\n .ds-nav__facts {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-band {\n padding: var(--space-6) 0;\n }\n .ds-band--flush {\n padding: 0;\n }\n .ds-nav__inner {\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0 var(--space-3);\n min-height: 0;\n padding: var(--space-2) var(--space-4) 0;\n }\n .ds-nav__inner > .ds-brand .ds-brand__name {\n font-size: var(--text-large);\n }\n .ds-nav__links {\n order: 3;\n grid-column: 1 / -1;\n gap: var(--space-4);\n margin-top: var(--space-1);\n }\n .ds-nav__link {\n padding: var(--space-1) 0;\n }\n .ds-nav__fact--wide {\n display: none;\n }\n .ds-menu__list {\n min-width: 0;\n width: 70vw;\n }\n .ds-menu__item {\n white-space: normal;\n }\n .ds-hero__copy {\n padding: var(--space-6) 0;\n }\n .ds-hero__lead,\n .ds-page-header__text {\n font-size: var(--text-base);\n }\n .ds-hero__side {\n padding: var(--space-5) 0 var(--space-6);\n }\n .ds-split__cell,\n .ds-split__cell + .ds-split__cell {\n padding-top: var(--space-6);\n padding-bottom: var(--space-6);\n }\n .ds-stat {\n gap: var(--space-5) var(--space-4);\n }\n .ds-stat__figure,\n .ds-result__figure,\n .ds-grid__figure {\n font-size: var(--text-h2);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__plate {\n height: calc(var(--size-plate) * 0.7);\n }\n .ds-colhead {\n margin-bottom: var(--space-5);\n }\n .ds-colhead__title,\n .ds-carousel__quote,\n .ds-cta__title,\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-cta {\n padding: var(--space-6) 0;\n }\n .ds-page-header {\n padding-top: var(--space-5);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-4) 0 var(--space-5);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-article {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-6);\n }\n .ds-quote {\n font-size: var(--text-large);\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-table {\n min-width: 60ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n padding: var(--space-6) var(--space-4) var(--space-5);\n }\n .ds-footer__line {\n width: calc(100% - var(--space-4) * 2);\n }\n}\n\n/* phones: the links spread across the bar */\n@media (max-width: 640px) {\n .ds-nav__links {\n justify-content: space-between;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: dark developer tools customer stories specimen\n\n\n\n\n\n
\n
\n \n \n \n chronoskin\n \n
\n Log in\n Talk to us\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n Story 042 / Logistics\n

How a parcel carrier ships software every hour

\n

Forty engineers, nine depots and one release train a fortnight. A year on chronoskin later, the train is gone.

\n
\n Read the story\n All 42 stories\n
\n
ihIngrid HalvorsenHead of platform, parcel carrier
\n
\n
\n
\n
\n Fig. 1 / Releases a week\n

From one release every two weeks to one an hour during the working day.

\n
\n 61×\n
\n
\n
Before0.5 a week
\n 2%\n
\n
\n
After 12 months30.5 a week
\n 88%\n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  • Stories told42from teams of 3 to 900
    • \n
  • Median build time-58%across all published stories
    • \n
  • Industries11logistics and media lead
    • \n
  • Checked by the customer100%every figure is theirs
    • \n
\n
\n
\n\n
\n
\n
\n
\n 01 / Selected\n

Six teams, six numbers

\n
\n Open the index\n
\n
\n \n
61×releases a week
\n
No. 042Logistics
\n

A parcel carrier ships every hour

\n

Nine depots, one pipeline and no release train.

\n \n \n
4 minfrom commit to preview
\n
No. 041Finance
\n

A regional bank reviews in the open

\n

Every change gets an address the auditors can read.

\n \n \n
0nights on call for deploys
\n
No. 040Media
\n

A newsroom stops deploying at night

\n

Rollbacks in a click made the late shift quiet.

\n \n \n
-72%build minutes
\n
No. 039Health
\n

A clinic network halves its bill

\n

Cached builds for forty small services.

\n \n \n
3 → 1tools to learn
\n
No. 038Education
\n

A course platform hires faster

\n

New engineers ship on their first afternoon.

\n \n \n
99.98%uptime in the sale week
\n
No. 037Retail
\n

A furniture shop survives its sale

\n

Twelve times the usual traffic, no change freeze.

\n \n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  • \n
    We stopped planning releases. Now we only plan what to build.
    \n
    ihIngrid HalvorsenHead of platform, parcel carrier
    \n
    • \n
  • \n
    The auditors read the same preview address as the engineers.
    \n
    tbTomas BrandtEngineering lead, regional bank
    \n
    • \n
  • \n
    Nobody has been woken by a deploy since March.
    \n
    anAsha NwosuSite reliability, newsroom
    \n
    • \n
\n
\n \n 01 / 03\n \n \n
\n
\n
\n
\n
\n
\n 02 / Recently published\n
\n Index\n
\n \n
\n
\n
\n\n
\n
\n
\n

Your team has a number too

\n

Tell us what changed. We write it up, you check every figure.

\n
\n Submit a story\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Stories
    2. \n
  2. Logistics
    3. \n
  3. No. 042
    4. \n
\n
\n
\n

How a parcel carrier ships software every hour

\n

Forty engineers, nine depots, and the end of the fortnightly release train.

\n
\n
All storiesTalk to us
\n
\n
\n
ihIngrid Halvorsen, head of platform
\n 06 Oct 2026\n 8 min read\n Logistics\n
\n
\n
\n\n
\n
\n \n
\n

The train that left every other Thursday

\n

For six years a change waited up to two weeks for its seat. Missing the train meant waiting for the next one.

\n

The carrier sorts parcels in nine depots, and each depot ran its own copy of the software. A release meant a night shift, a checklist of 140 lines and a room of people watching one screen.

\n

One pipeline for nine depots

\n

The team moved one service a week. Each got a preview address per branch and a build that reused what had not changed. The file release-checklist.md shrank until it was deleted.

\n
We stopped planning releases. Now we only plan what to build.
\n

What they changed, in order

\n
    \n
  • Previews for every branch, so that depot managers could try a change.
    • \n
  • Rollback as a button, tested weekly on a real service.
    • \n
  • The night shift for releases, ended in the fourth month.
    • \n
\n

A year later the median change reaches all nine depots 52 minutes after it is merged. The other logistics stories show the same curve.

\n
\n \n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Stories
    2. \n
  2. Index
    3. \n
  3. All industries
    4. \n
\n
\n
\n

Index of stories

\n

Every published story with its one number, newest first.

\n
\n
Submit a story
\n
\n
\n
\n\n
\n
\n
\n \n
\n

Key

\n
\n
\n New\n Checked\n In review\n Withdrawn\n
\n

A story is checked when the customer has signed off every figure in it.

\n
\n
\n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
No.StoryIndustryStateEngineersFigure
042A parcel carrier ships every hourLogisticsNew4061×
041A regional bank reviews in the openFinanceChecked1204 min
040A newsroom stops deploying at nightMediaChecked260
039A clinic network halves its billHealthChecked18-72%
038A course platform hires fasterEducationChecked93 → 1
037A furniture shop survives its saleRetailChecked3399.98%
\n
\n
\n 1 to 6 of 42\n \n
\n
\n
\n \n

No public sector stories yet

\n

If your agency runs on chronoskin, yours could be the first in this list.

\n Submit a story\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Stories
    2. \n
  2. Submit
    3. \n
  3. Draft
    4. \n
\n
\n
\n

Submit a story

\n

Four questions. We turn the answers into a draft and send it back for your check.

\n
\n
See an example
\n
\n
\n
\n\n
\n
\n
\n
\n

Nothing is published without you. A draft stays private until you approve it.

\n

The draft was not saved. The figure needs a unit, such as minutes or percent.

\n
\n
\n
\n
\n
\n
\n
\n
Add a unit to the figure.
\n
Short enough for a card.
\n
\n
\n \n \n
Cancel
\n
\n
\n
\n Who writes the story?\n

We do, from your answers and one call of half an hour. You change whatever is wrong.

\n
\n
\n Can a story be withdrawn later?\n

At any time. It leaves the index the same day.

\n
\n
\n Do we have to be named?\n

No. Most stories describe the organisation without naming it.

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

Your draft

In review
\n
\n
Questions answered3 / 4
75%
\n
\n Save\n Preview\n Discard\n Publish\n
\n
\n
\n
\n
\n

Discard this draft?

Close
\n

Three answers will be deleted. This cannot be undone.

\n
KeepDiscard
\n
\n
\n
\n

Your editor

\n
\n
lmLena MarchettiAnswers in two days
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.dev-dark.blog.s08.p05.t06.u08\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"dev-dark\",\n \"years\": [\n 2019,\n 2026\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-dd-8568\",\n \"short\": \"v1-dd-8568\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #000000;\n --color-surface: #0a0a0a;\n --color-surface-alt: #111111;\n --color-surface-strong: #1c1c1c;\n --color-bar: #000000;\n --color-bar-text: #ededed;\n --color-bar-alt: #0a0a0a;\n --color-bar-alt-text: #a1a1a1;\n --color-inverse: #ffffff;\n --color-inverse-text: #000000;\n --color-text: #e1e1e1;\n --color-text-muted: #8f8f8f;\n --color-heading: #ffffff;\n --color-heading-alt: #ededed;\n --color-link: #ff4d9d;\n --color-link-quiet: #a1a1a1;\n --color-link-visited: #c97aa6;\n --color-link-hover: #ff8fc2;\n --color-link-active: #e0126f;\n --color-border: #2e2e2e;\n --color-border-strong: #616161;\n --color-border-muted: #1c1c1c;\n --color-accent: #ff2e88;\n --color-accent-text: #000000;\n --color-accent-alt: #ffd84d;\n --color-fill-1: #ff2e88;\n --color-fill-2: #ffd84d;\n --color-fill-3: #6ee7ff;\n --color-fill-4: #616161;\n --color-button: #ff2e88;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #0a0a0a;\n --color-button-secondary-text: #ffffff;\n --color-input: #000000;\n --color-input-text: #ffffff;\n --color-input-border: #616161;\n --color-disabled: #111111;\n --color-disabled-text: #5a5a5a;\n --color-danger: #ff5247;\n --color-danger-surface: #1f0b09;\n --color-success: #3ddc84;\n --color-warning: #ff9b3d;\n --color-notice: #111111;\n --color-notice-text: #ededed;\n --color-focus: #ff8fc2;\n --color-shadow: rgb(0 0 0 / 0.8);\n --color-overlay: rgb(0 0 0 / 0.8);\n}\n\n/* @part type */\n:root {\n --font-body: \"Hanken Grotesk\", \"Avenir Next\", \"Segoe UI\", system-ui, sans-serif;\n --font-heading: Manrope, \"Avenir Next\", \"Segoe UI\", system-ui, sans-serif;\n --font-ui: \"Hanken Grotesk\", \"Avenir Next\", \"Segoe UI\", system-ui, sans-serif;\n --font-mono: \"Source Code Pro\", \"Fira Mono\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 52px;\n --text-h1: 34px;\n --text-h2: 22px;\n --text-h3: 16px;\n --line-body: 1.5;\n --line-heading: 1.22;\n --line-display: 1.12;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.1px;\n --display-tracking: -0.8px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 0;\n --radius-pill: 9999px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: 0 1px 0 var(--color-border-strong);\n --shadow-control-hover: 0 2px 0 var(--color-border-strong);\n --shadow-control-pressed: inset 0 2px 0 var(--color-border-strong);\n --shadow-dialog: 0 0 0 1px var(--color-border), 0 24px 48px -16px var(--color-shadow);\n --shadow-text: none;\n --fill-page: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 80%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 84%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;\n --backdrop-blur: 0px;\n}\n" } }