{ "id": "v1-dd-8316", "long_id": "v1.dev-dark.blog.s08.p03.t01.u06", "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-8316", "preview_url": "https://chrono.skin/s/v1-dd-8316/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\nThese are the conventions of the era. Every layout and every token set of dev-dark keeps to them.\n\n- Which text sits on which fill. `--color-text`, `--color-heading` and `--color-text-muted` sit on `--color-page`, `--color-canvas`, `--fill-panel`, `--color-surface-alt` and `--color-surface-strong`. `--color-bar-text` sits on `--fill-bar` (the top bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (a side rail, the title strip of a code block, a table head, the footer); a heading on that fill may use `--color-heading`. `--color-inverse-text` sits on `--fill-inverse`, which is used for exactly one block per view. `--color-button-text` sits on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary`, `--color-accent-text` on `--fill-accent`, `--color-input-text` on `--fill-input` (form controls and code blocks), `--color-notice-text` on `--color-notice`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They are glows and tints: mixed with `transparent` at 12% to 34% behind text in the ordinary text colours, and at full strength or mixed 72% into `--color-heading` only for drawings, bars, cells and icons. `--color-fill-1` is the palette's glow colour: the hero, the page header, the featured plan. A palette may make any fill light or dark.\n- `--color-accent-alt` is a text and line colour, not a fill: mono labels, keywords in code, the marker of the current item, the \"new\" badge. It must read on the page and on a panel.\n- `--color-success`, `--color-warning` and `--color-danger` are used as a dot, as text, or as a 12% tint with a 32% hairline and the colour itself as text. Nothing is ever filled solid with them, so they need no text colour of their own. The destructive button is built the same way.\n- Borders: `--color-border` on every box and bar, `--color-border-strong` on secondary buttons, the dialog, the product window and the dashed empty state, `--color-border-muted` between rows inside a box and between bands. All `--border-width`; `--border-width-strong` is the focus offset and the ring around a status dot.\n- Type. One sans family for body, headings and controls, with `--font-mono` for data. `--text-base` 15px at `--line-body` 1.6; `--text-ui` 13px for navigation, buttons, forms, tables and card text; `--text-small` 12px for badges, mono labels, dates and table heads; `--text-large` 17px for the hero lead. `--text-display` 56px is the hero title only; `--text-h1` 36px page titles, section statements, figures and prices; `--text-h2` 24px column heads; `--text-h3` 15px panel and card titles in `--weight-bold`. Headings are `--weight-heading` 500 with slight negative tracking.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, table heads, sidebar and footer titles), tracked by 6% of the font size; `--ui-transform` applies to buttons, tabs and navigation.\n- Links are `--color-link` without underline and gain one on hover; quiet links in breadcrumbs, the sidebar and the footer are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 6px for buttons, inputs and the brand tile, `--radius-panel` 8px for panels, code blocks, notices and the empty state, `--radius-page` 12px for the product window, grid cards, plans, the dialog and the inverted block, `--radius-pill` for badges and the announcement pill. `--shadow-panel` is on panels and cards, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the dialog and the product window. `--shadow-text` reaches navigation links and buttons.\n- One-off values written with `calc()` and `color-mix()` because the vocabulary has no token: the glows (a fill at 18% to 34% over transparent), the drawing colour (72% of a fill in `--color-heading`), the wash behind the current navigation link (`--color-bar-text` at 9%), status tints (12% and 32%), the hovered destructive button (22%), the hovered inverse button (82% of `--color-inverse-text` in `--color-inverse`), the notice border (22% and 40%), key cap and inline code corners (half of `--radius-control`), the segmented control's corner (`--radius-control` plus `--space-1`), mono label tracking. Navigation links are at `opacity` 0.66 until current, customer names at 0.82, the text of the inverted block 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 >= 12px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-weight <= 600`: headings are medium, labels semibold; nothing is bold or black.\n- `font-families <= 2`: one sans-serif family and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\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 <= 3px`: only the mono customer names are spaced out, by 2px.\n- `border-width <= 2px`: rules and outlines are 1px hairlines; 2px is the rule of the recommended plan and the ring of a slider thumb.\n- `border-radius <= 28px`: 14px on controls, 20px on panels, 28px on the largest boxes; pills are shapes.\n- `box-shadow-blur <= 60px`: only the box of plans and the dialog cast a wide shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new 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.p03.t01.u06\",\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-8316\",\n \"short\": \"v1-dd-8316\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #151312;\n --color-canvas: #151312;\n --color-surface: #1c1a18;\n --color-surface-alt: #24211e;\n --color-surface-strong: #302c28;\n --color-bar: #151312;\n --color-bar-text: #e8e2da;\n --color-bar-alt: #1a1816;\n --color-bar-alt-text: #a39b90;\n --color-inverse: #f2ede6;\n --color-inverse-text: #151312;\n --color-text: #cfc8be;\n --color-text-muted: #91897e;\n --color-heading: #f6f1ea;\n --color-heading-alt: #e8e2da;\n --color-link: #ff8a4c;\n --color-link-quiet: #a39b90;\n --color-link-visited: #cf9373;\n --color-link-hover: #ffb38a;\n --color-link-active: #f35815;\n --color-border: rgb(255 240 220 / 0.1);\n --color-border-strong: rgb(255 240 220 / 0.2);\n --color-border-muted: rgb(255 240 220 / 0.06);\n --color-accent: #f35815;\n --color-accent-text: #170a03;\n --color-accent-alt: #ffd166;\n --color-fill-1: #f35815;\n --color-fill-2: #a05fcf;\n --color-fill-3: #ffd166;\n --color-fill-4: #6e665c;\n --color-button: #f35815;\n --color-button-text: #170a03;\n --color-button-hover-text: #170a03;\n --color-button-secondary: #24211e;\n --color-button-secondary-text: #f6f1ea;\n --color-input: #100e0d;\n --color-input-text: #f6f1ea;\n --color-input-border: rgb(255 240 220 / 0.14);\n --color-disabled: #24211e;\n --color-disabled-text: #6e665c;\n --color-danger: #f2557c;\n --color-danger-surface: #25141a;\n --color-success: #7ccf8a;\n --color-warning: #ffd166;\n --color-notice: #271c12;\n --color-notice-text: #ffcfa8;\n --color-focus: #ff8a4c;\n --color-shadow: rgb(0 0 0 / 0.45);\n --color-overlay: rgb(12 10 9 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 24px;\n --text-h3: 15px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -1.6px;\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: 14px;\n --radius-panel: 20px;\n --radius-pill: 9999px;\n --radius-page: 28px;\n --shadow-panel: 0 1px 2px var(--color-shadow), 0 12px 28px -10px var(--color-shadow);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 2px 6px var(--color-shadow);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 6px 16px var(--color-shadow);\n --shadow-control-pressed: inset 0 3px 6px var(--color-shadow);\n --shadow-dialog: 0 2px 6px var(--color-shadow), 0 24px 60px var(--color-shadow);\n --shadow-text: none;\n --fill-page: radial-gradient(ellipse 60% 420px at 88% -40px, color-mix(in srgb, var(--color-fill-1) 8%, transparent), transparent) no-repeat, radial-gradient(ellipse 50% 380px at 0 0, color-mix(in srgb, var(--color-fill-2) 7%, transparent), transparent) no-repeat, 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) 86%, white);\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) 55%, transparent);\n --transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n --backdrop-blur: 0px;\n}\n" } }