{
  "id": "v1-dd-7218",
  "long_id": "v1.dev-dark.landing.s07.p02.t01.u08",
  "name": "Dark developer tools technical grid product page",
  "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": "landing",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": false,
    "responsive": true
  },
  "summary": "This is the product page of a content platform in the \"technical grid\" strand of developer brands from 2022 to 2026: the page is drawn like a spec sheet, inside a frame of two vertical hairlines, with every section a row ruled across the window and a small cross where a row meets the frame. A very large, tight grotesque claim stands beside a sheet of mono facts, and below it cells share their borders instead of floating as cards: a query console, a strip of figures, six capabilities, a dated list. In this set the page is graphite, every label, button and navigation word is uppercase monospace, corners are square, nothing glows and the one hot accent is an acid lime.",
  "url": "https://chrono.skin/s/v1-dd-7218",
  "preview_url": "https://chrono.skin/s/v1-dd-7218/specimen.html",
  "files": {
    "STYLE.md": "# Dark developer tools technical grid product page\n\n## Summary\n\nThis is the product page of a content platform in the \"technical grid\" strand of developer brands from 2022 to 2026: the page is drawn like a spec sheet, inside a frame of two vertical hairlines, with every section a row ruled across the window and a small cross where a row meets the frame. A very large, tight grotesque claim stands beside a sheet of mono facts, and below it cells share their borders instead of floating as cards: a query console, a strip of figures, six capabilities, a dated list. In this set the page is graphite, every label, button and navigation word is uppercase monospace, corners are square, nothing glows and the one hot accent is an acid lime.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. The frame is `.ds-wrap`: `--size-page` (1248px) wide, centred, with a hairline down each side and no padding of its own; whatever sits in it pads itself by `--space-5` (24px) at the sides. `.ds-band` is a row: a hairline across the whole window above it, and the crosses (`--size-tick` 13px) drawn by the frame inside it.\n- Navigation is `.ds-nav`, a bar `--size-top` (56px) tall on `--fill-bar` that stays at the top of the window. Its `.ds-nav__inner` continues the frame and is a run of joined cells: the brand, four links (the first drops a `.ds-menu`), a mono readout pushed to the right (`.ds-nav__meta`) and a cell with a secondary and a primary small button. The current link has a square in `--color-accent-alt` before it and a 7% wash. There is no rail.\n- The label column. Below the hero every row is `.ds-section`: a `--size-gutter` (312px) column at the left holding a numbered mono label, a `--text-h2` title and one muted paragraph (`.ds-section__head`), and the work in `.ds-section__body` at the right of a hairline. The body is flush: tables, lists and toolbars run edge to edge, `.ds-split` halves it (`--wide` is 3 to 2) with a hairline between, and `.ds-cell` pads a half that holds free content.\n- The home view stacks: `.ds-hero` (label, the `--text-display` claim, lead, two large buttons and a mono line of facts at the left; `.ds-spec`, the sheet with its two meters, in a `--size-side` (372px) column at the right); a row with `.ds-console`; a row with `.ds-stat`, four joined cells; a section with `.ds-grid`, six joined cells; a section with the dated `.ds-list`; and `.ds-cta`, the one inverted block, filling its row.\n- Inner pages have no hero. They open with `.ds-page-header`, laid out like a section: the breadcrumb in the label column, and beside the hairline a `--text-h1` title with one muted line at the left and at most two buttons at the right. Sections follow. Tabs sit in a `.ds-toolbar` directly over the table they filter; the pagination is in the `.ds-table__foot`; a sidebar takes the label column of its section.\n- Views. The specimen is a content platform in four views. `home` is the product page described above. `matrix` is the feature matrix: tabs, the ruled table with a tooltip, then the questions as an accordion beside the panel of the current project with its meters and buttons. `model` is the content model: the sidebar of document types beside the table of fields with badges, a switch and pagination, then the modelling guide as prose beside the validation switches, the open dialog that deletes a field and an empty state. `contact` has the steps in the label column, the two notices and the form in the middle, and the engineer, a terminal block and a row of links at the right.\n- Spacing scale: `--space-1` 4px (small button vertical padding, inside key caps), `--space-2` 8px (button and input vertical padding, between adjacent buttons and badges, sidebar rows), `--space-3` 12px (table cell, toolbar and sheet row vertical padding, around the console), `--space-4` 16px (panel padding, list rows, between form rows), `--space-5` 24px (side padding of every cell, between stacked blocks, grid cell padding), `--space-6` 32px (top and bottom of a section head and a padded cell), `--space-7` 48px (page header top, inverted block padding), `--space-8` 72px (hero top, below the hero buttons).\n- Other sizes: `--size-key` 124px (the date column of the list), `--size-art` 56px (the tile of a grid cell), `--size-mark` 24px, `--size-dot` 8px, `--size-dialog` 440px, `--size-narrow` 680px (longest running text).\n- Joined cells and rounded sets. `.ds-stat`, `.ds-grid` and `.ds-cta` are inset by `--radius-page`: with square corners they touch the frame and their outline falls on its lines, with a rounded set they step in by their own radius and read as one rounded box of cells.\n- Below 1320px the frame lines and crosses go and rows stay ruled. Below 980px `.ds-nav__meta` is not shown and the links of the bar become a second row of four equal cells under a hairline, the label column goes over its work, the sheet goes under the claim, halves stack and cells stand two across. Below 640px everything is one column, the console's panes stack, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n- On a phone (640px and below) the bar keeps the form it takes at 980px: `.ds-nav__meta` is not shown, the brand and `.ds-nav__actions` fill the first row and `.ds-nav__links` are a second row of four equal cells under a hairline, each with centred `--text-small` text. The drop-down of a link that has a `.ds-menu` opens as a list `60vw` wide whose items may wrap onto several lines. The current link keeps its marker.\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 `<body>`. 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-section`, `.ds-split`, `.ds-cell`, `.ds-stack`: the frame, a ruled row with its crosses, the label column with its work (`.ds-section__head` with `.ds-section__title` and `.ds-section__text`, `.ds-section__body`), halves (`--wide`), a padded cell (`--roomy`) and a vertical stack 24px apart.\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 24px tile dressed like the primary button holding the mark as inline SVG with square caps; `.ds-brand__name` is the name. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`), `.ds-nav__meta` and `.ds-nav__actions`. 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 the claim beside the sheet; `.ds-hero__copy` holds a `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` and the mono `.ds-hero__meta`.\n- `.ds-spec`: the sheet of facts: `.ds-spec__head`, `.ds-spec__rows` of `.ds-spec__row` (`.ds-spec__key`, `.ds-spec__value`) and `.ds-spec__foot` for meters.\n- `.ds-console`: the product drawn as a window: `.ds-console__bar` (`.ds-console__path`, avatars, a badge) and `.ds-console__body` of two `.ds-console__pane` blocks, each a `pre` under a `.ds-console__label`.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__inner` with `.ds-page-header__lead` (the breadcrumb) and `.ds-page-header__main` (`.ds-page-header__copy` with `.ds-page-header__title` and `.ds-page-header__text`, then `.ds-page-header__actions`).\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`; `.ds-prose__lead` for the first paragraph.\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`: mono capitals in this set. `--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-table`: flush in its section: 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` adds column lines; `.ds-table__yes` and `.ds-table__no` are the marks of a matrix. Wrap in `.ds-table__wrap`; `.ds-table__foot` closes it.\n- `.ds-list`: dated rows: `.ds-list__item` is `.ds-list__meta` (mono date), a `.ds-list__title` link over `.ds-list__text`, and a badge at the right.\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. `.ds-rules` of `.ds-rules__item` (`.ds-rules__name`) lists settings with a switch each.\n- `.ds-stat`: the strip of figures as joined cells. Each `.ds-stat__item` is a mono `.ds-stat__label` (name and index) over a `.ds-stat__figure`, whose `small` is the unit.\n- `.ds-grid`: joined cells. `.ds-grid__cell` holds `.ds-grid__top` (an index and `.ds-grid__art`, with `--2`, `--3`, `--4` for the other fills, one inline SVG drawn in strokes), `.ds-grid__title` and `.ds-grid__text`. Keep the number of cells a multiple of the columns.\n- `.ds-cta`: the inverted block: `.ds-cta__label`, `.ds-cta__title` and one `.ds-button--inverse`.\n- `.ds-tabs`: mono words in a row, `.ds-tabs__tab`; the current one (`is-current`) stands in square brackets. `.ds-toolbar` puts it in a ruled row with `.ds-toolbar__title`, `.ds-toolbar__note` or `.ds-toolbar__tools`.\n- `.ds-badge`: small mono label on `--fill-accent`. `--quiet`, `--outline`. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a mono `.ds-sidebar__title` over the ruled `.ds-sidebar__list`; `.ds-sidebar__item`, current with `is-current` and a square.\n- `.ds-steps`: numbered `.ds-steps__item` rows with a `.ds-steps__title`.\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` continues the frame as four joined `.ds-footer__col` columns (`.ds-footer__about`, `.ds-footer__title`, `.ds-footer__links` of `.ds-footer__link`); `.ds-footer__line` is the mono last line with `.ds-footer__status`.\n\n## Never\n\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 <= 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` holding the frame, and in it a `.ds-section` with a numbered label at the left; put the work flush in `.ds-section__body`, split it with `.ds-split` and pad free content with `.ds-cell`. Several like things become joined cells in the manner of `.ds-grid` (a gap of `--border-width` over `--color-border`), not separate cards with space between. Data a developer would copy is set in `--font-mono`, labels in mono capitals tracked by 8%. 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 cell and `--fill-inverse` for one block 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: 1248px;\n  --size-narrow: 680px;\n  --size-top: 56px;\n  --size-gutter: 312px;\n  --size-side: 372px;\n  --size-key: 124px;\n  --size-mark: 24px;\n  --size-dot: 8px;\n  --size-tick: 13px;\n  --size-art: 56px;\n  --size-dialog: 440px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 72px;\n}\n\n/* shell: a frame of two vertical lines down the whole page; every section is a row ruled across the window */\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  position: relative;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-band {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n/* crosses where a row line meets the frame: two dashes across, two dashes down */\n.ds-band > .ds-wrap::before {\n  content: \"\";\n  position: absolute;\n  top: calc(var(--border-width) * -1);\n  left: calc(var(--size-tick) / -2);\n  right: calc(var(--size-tick) / -2);\n  height: var(--border-width);\n  background: linear-gradient(90deg, var(--color-text-muted) 0, var(--color-text-muted) var(--size-tick), transparent var(--size-tick), transparent calc(100% - var(--size-tick)), var(--color-text-muted) calc(100% - var(--size-tick)));\n  pointer-events: none;\n}\n.ds-band > .ds-wrap::after {\n  content: \"\";\n  position: absolute;\n  top: calc((var(--size-tick) + var(--border-width)) / -2);\n  left: calc(var(--border-width) * -1);\n  right: calc(var(--border-width) * -1);\n  height: var(--size-tick);\n  border-left: var(--border-width) var(--border-style) var(--color-text-muted);\n  border-right: var(--border-width) var(--border-style) var(--color-text-muted);\n  pointer-events: none;\n}\n.ds-cell {\n  min-width: 0;\n  padding: var(--space-6) var(--space-5);\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-split--wide {\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n}\n.ds-split > * + * {\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* nav: a bar of joined cells inside the frame; brand, links, a mono readout, the actions */\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  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: stretch;\n  max-width: var(--size-page);\n  min-height: var(--size-top);\n  margin: 0 auto;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__inner > .ds-brand {\n  padding: 0 var(--space-5);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 0 0 auto;\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  gap: var(--space-2);\n  padding: 0 var(--space-5);\n  color: color-mix(in srgb, var(--color-bar-text) 64%, transparent);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\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  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-bar-text);\n}\n.ds-nav__link.is-current {\n  background: color-mix(in srgb, var(--color-bar-text) 7%, transparent);\n  color: var(--color-bar-text);\n}\n.ds-nav__link.is-current::before {\n  content: \"\";\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#matrix:target) .ds-nav__link[href=\"#matrix\"],\n.ds-page:has(#model:target) .ds-nav__link[href=\"#model\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n  background: color-mix(in srgb, var(--color-bar-text) 7%, transparent);\n  color: var(--color-bar-text);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#matrix:target) .ds-nav__link[href=\"#matrix\"]::before,\n.ds-page:has(#model:target) .ds-nav__link[href=\"#model\"]::before,\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"]::before {\n  content: \"\";\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n}\n.ds-nav__meta {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  min-width: 0;\n  padding: 0 var(--space-5);\n  overflow: hidden;\n  color: color-mix(in srgb, var(--color-bar-text) 50%, transparent);\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  white-space: nowrap;\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  gap: var(--space-2);\n  padding: 0 var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* hero: a very large claim at the left of the frame, a sheet of facts 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, 1fr) var(--size-side);\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-8) var(--space-5) var(--space-5);\n}\n.ds-hero__title {\n  max-width: 15ch;\n  margin: var(--space-5) 0 var(--space-5);\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: 50ch;\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-8);\n}\n.ds-hero__meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-6);\n  width: 100%;\n  margin: auto 0 0;\n  padding: var(--space-4) 0 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  border-top: var(--border-width) var(--border-style) var(--color-border-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-hero__meta b {\n  color: var(--color-accent-alt);\n  font-weight: var(--weight-body);\n}\n\n/* spec: the sheet of facts; mono keys at the left, values at the right, a meter at the foot */\n.ds-spec {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-spec__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-5);\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  letter-spacing: calc(var(--text-small) * 0.08);\n  text-transform: uppercase;\n}\n.ds-spec__rows {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-spec__row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-spec__key {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  letter-spacing: calc(var(--text-small) * 0.08);\n  text-transform: uppercase;\n}\n.ds-spec__value {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-spec__foot {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  margin-top: auto;\n  padding: var(--space-5);\n}\n\n/* console: the product drawn as a window; the dialog shadow and the page radius show here */\n.ds-console {\n  margin: var(--space-3);\n  background: var(--fill-panel);\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-console__bar {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\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}\n.ds-console__path {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-console__body {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);\n}\n.ds-console__pane {\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  overflow: hidden;\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  line-height: 1.75;\n  white-space: pre;\n}\n.ds-console__pane + .ds-console__pane {\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-console__label {\n  display: block;\n  margin-bottom: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  letter-spacing: calc(var(--text-small) * 0.08);\n  text-transform: uppercase;\n}\n\n/* stats: figures as joined cells; a hairline of the border colour shows between them */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--border-width);\n  margin: var(--radius-page);\n  padding: 0;\n  list-style: none;\n  overflow: hidden;\n  background: var(--color-border);\n  border-radius: var(--radius-page);\n  outline: var(--border-width) var(--border-style) var(--color-border);\n  box-shadow: var(--shadow-panel);\n}\n.ds-stat__item {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-5);\n  background: var(--color-page);\n}\n.ds-stat__label {\n  display: flex;\n  justify-content: space-between;\n  gap: 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  letter-spacing: calc(var(--text-small) * 0.08);\n  text-transform: uppercase;\n}\n.ds-stat__figure {\n  display: block;\n  margin-top: var(--space-6);\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__figure small {\n  color: var(--color-accent-alt);\n  font-size: 50%;\n  letter-spacing: 0;\n}\n\n/* section: a label column at the left of the frame, the work in the wide column beside it */\n.ds-section {\n  display: grid;\n  grid-template-columns: var(--size-gutter) minmax(0, 1fr);\n}\n.ds-section__head {\n  min-width: 0;\n  padding: var(--space-6) var(--space-5);\n}\n.ds-section__title {\n  margin: var(--space-4) 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-section__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n.ds-section__body {\n  min-width: 0;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* grid: joined cells on the panel fill; an index, a small drawing on a tinted tile, a title and a line */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--border-width);\n  margin: var(--radius-page);\n  overflow: hidden;\n  background: var(--color-border);\n  border-radius: var(--radius-page);\n  outline: var(--border-width) var(--border-style) var(--color-border);\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-5);\n  background: var(--fill-panel);\n}\n.ds-grid__top {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-6);\n}\n.ds-grid__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--size-art);\n  height: var(--size-art);\n  background: color-mix(in srgb, var(--color-fill-1) 16%, transparent);\n  color: color-mix(in srgb, var(--color-fill-1) 72%, var(--color-heading));\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 34%, transparent);\n  border-radius: var(--radius-control);\n}\n.ds-grid__art--2 {\n  background: color-mix(in srgb, var(--color-fill-2) 16%, transparent);\n  color: color-mix(in srgb, var(--color-fill-2) 72%, var(--color-heading));\n  border-color: color-mix(in srgb, var(--color-fill-2) 34%, transparent);\n}\n.ds-grid__art--3 {\n  background: color-mix(in srgb, var(--color-fill-3) 16%, transparent);\n  color: color-mix(in srgb, var(--color-fill-3) 72%, var(--color-heading));\n  border-color: color-mix(in srgb, var(--color-fill-3) 34%, transparent);\n}\n.ds-grid__art--4 {\n  background: color-mix(in srgb, var(--color-fill-4) 16%, transparent);\n  color: color-mix(in srgb, var(--color-fill-4) 72%, var(--color-heading));\n  border-color: color-mix(in srgb, var(--color-fill-4) 34%, transparent);\n}\n.ds-grid__art svg {\n  display: block;\n  width: 58%;\n  height: 58%;\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/* list: ruled rows; a mono date, the title with a line under it, a label at the right */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-key) minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n  border-bottom: 0;\n}\n.ds-list__meta {\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-list__title {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link);\n}\n.ds-list__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* call to action: the one inverted block, filling its row of the frame */\n.ds-cta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: var(--radius-page);\n  padding: var(--space-7) var(--space-5);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-cta__label {\n  display: block;\n  margin-bottom: var(--space-4);\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  opacity: 0.7;\n}\n.ds-cta__title {\n  max-width: 18ch;\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\n/* page header: the label column holds the breadcrumb, the wide column the title and the action */\n.ds-page-header {\n  position: relative;\n}\n.ds-page-header__inner {\n  display: grid;\n  grid-template-columns: var(--size-gutter) minmax(0, 1fr);\n}\n.ds-page-header__lead {\n  min-width: 0;\n  padding: var(--space-6) var(--space-5);\n}\n.ds-page-header__main {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-5);\n  min-width: 0;\n  padding: var(--space-7) var(--space-5) var(--space-6);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  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}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* tabs: mono words in a row; the current one stands in square brackets */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: block;\n  color: var(--color-text-muted);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab::before,\n.ds-tabs__tab::after {\n  color: transparent;\n}\n.ds-tabs__tab::before {\n  content: \"[ \";\n}\n.ds-tabs__tab::after {\n  content: \" ]\";\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}\n.ds-tabs__tab.is-current::before,\n.ds-tabs__tab.is-current::after {\n  color: var(--color-accent-alt);\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  padding: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-toolbar__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n  font-weight: var(--weight-ui);\n}\n.ds-toolbar__note {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-toolbar__tools {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-5);\n}\n\n/* sidebar: a mono title over ruled links; a square marks the current one */\n.ds-sidebar {\n  font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.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  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item > .ds-mono {\n  margin-left: auto;\n}\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n}\n.ds-sidebar__item.is-current::before {\n  content: \"\";\n  flex: 0 0 auto;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n}\n\n/* steps: a numbered run of what happens next */\n.ds-steps {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  counter-reset: step;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-ui);\n}\n.ds-steps__item {\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3) 0;\n  color: var(--color-text-muted);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  counter-increment: step;\n}\n.ds-steps__item::before {\n  content: \"0\" counter(step);\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.15);\n}\n.ds-steps__title {\n  display: block;\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n\n/* rules: a setting per row, its switch at the right */\n.ds-rules {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-rules__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-ui);\n}\n.ds-rules__item:last-child {\n  border-bottom: 0;\n}\n.ds-rules__name {\n  display: block;\n  color: var(--color-heading);\n}\n.ds-rules__name .ds-mono {\n  display: block;\n  white-space: normal;\n}\n\n/* footer: the frame continues through joined columns on the secondary bar */\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, 2fr) repeat(3, minmax(0, 1fr));\n  max-width: var(--size-page);\n  margin: 0 auto;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__col {\n  min-width: 0;\n  padding: var(--space-6) var(--space-5);\n}\n.ds-footer__col + .ds-footer__col {\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__about {\n  max-width: 34ch;\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  gap: var(--space-2) var(--space-5);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-3) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: 0;\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  margin-left: auto;\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--warning {\n  background: var(--color-warning);\n}\n.ds-dot--danger {\n  background: var(--color-danger);\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.ds-code__s {\n  color: var(--color-success);\n}\n.ds-code__c {\n  color: var(--color-text-muted);\n}\n.ds-code__n {\n  color: var(--color-link);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n  content: \" \\2192\";\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  font-size: var(--text-ui);\n}\n\n/* buttons */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-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--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-color: var(--color-border);\n}\n.ds-badge--outline {\n  background: transparent;\n  color: var(--color-text-muted);\n  border-color: var(--color-border-strong);\n}\n.ds-badge--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--ruled th + th,\n.ds-table--ruled td + td,\n.ds-table--ruled th + td {\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\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/* windows narrower than the frame: the two frame lines and the crosses go, rows stay ruled */\n@media (max-width: 1320px) {\n  .ds-wrap,\n  .ds-nav__inner,\n  .ds-footer__inner {\n    border-left: 0;\n    border-right: 0;\n  }\n  .ds-footer__line {\n    border-left: 0;\n    border-right: 0;\n  }\n  .ds-band > .ds-wrap::before,\n  .ds-band > .ds-wrap::after {\n    display: none;\n  }\n}\n\n/* medium windows: the links of the bar become a second row of four equal cells, the label column goes over its work, column pairs stack */\n@media (max-width: 980px) {\n  .ds-nav__inner {\n    flex-wrap: wrap;\n  }\n  .ds-nav__inner > .ds-brand {\n    flex: 1 1 auto;\n    min-height: var(--size-top);\n    border-right: 0;\n  }\n  .ds-nav__meta {\n    display: none;\n  }\n  .ds-nav__actions {\n    border-left: 0;\n  }\n  .ds-nav__links {\n    order: 3;\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    flex: 0 0 100%;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-nav__links > li {\n    min-width: 0;\n  }\n  .ds-nav__link {\n    flex: 1 1 auto;\n    justify-content: center;\n    min-width: 0;\n    padding: var(--space-3) var(--space-2);\n  }\n  .ds-nav__links > li:last-child > .ds-nav__link {\n    border-right: 0;\n  }\n  .ds-hero__inner,\n  .ds-section,\n  .ds-page-header__inner,\n  .ds-split,\n  .ds-split--wide {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-spec,\n  .ds-section__body,\n  .ds-page-header__main,\n  .ds-split > * + * {\n    border-left: 0;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-page-header__lead {\n    padding-bottom: var(--space-4);\n  }\n  .ds-page-header__main {\n    padding-top: var(--space-5);\n  }\n  .ds-grid {\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__col:first-child {\n    grid-column: 1 / -1;\n    border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-footer__col:nth-child(2) {\n    border-left: 0;\n  }\n}\n\n/* narrow windows: one column; the cells of the bar tighten */\n@media (max-width: 640px) {\n  .ds-nav__inner > .ds-brand {\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__actions {\n    padding: 0 var(--space-4) 0 0;\n  }\n  .ds-nav__link {\n    gap: var(--space-1);\n    padding: var(--space-2) var(--space-1);\n    font-size: var(--text-small);\n  }\n  .ds-menu__list {\n    min-width: 0;\n    width: 60vw;\n  }\n  .ds-menu__item {\n    white-space: normal;\n  }\n  .ds-cell,\n  .ds-cell--roomy,\n  .ds-section__head,\n  .ds-page-header__lead {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-hero__copy {\n    padding: var(--space-7) var(--space-4) var(--space-4);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-hero__actions {\n    margin-bottom: var(--space-7);\n  }\n  .ds-spec__head,\n  .ds-spec__row,\n  .ds-spec__foot,\n  .ds-toolbar,\n  .ds-list__item {\n    padding-left: var(--space-4);\n    padding-right: var(--space-4);\n  }\n  .ds-console {\n    margin: var(--space-2);\n  }\n  .ds-console__body {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-console__pane + .ds-console__pane {\n    border-left: 0;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-console__pane {\n    padding: var(--space-4);\n    font-size: var(--text-small);\n  }\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item {\n    padding: var(--space-4);\n  }\n  .ds-stat__figure {\n    margin-top: var(--space-5);\n    font-size: var(--text-h2);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__top {\n    margin-bottom: var(--space-4);\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: var(--space-1) var(--space-3);\n  }\n  .ds-list__meta {\n    grid-column: 1 / -1;\n  }\n  .ds-cta {\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-cta__title,\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-page-header__main {\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 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  }\n  .ds-footer__col {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-footer__col:nth-child(4) {\n    grid-column: 1 / -1;\n    border-left: 0;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-footer__line {\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-footer__status {\n    margin-left: 0;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: dark developer tools technical grid product page specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"20,3 8,3 3,12 8,21 20,21 20,16.5 10.6,16.5 8.1,12 10.6,7.5 20,7.5\"/><polygon points=\"16,9.6 18.4,12 16,14.4 13.6,12\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-menu\">\n        <a class=\"ds-nav__link\" href=\"#home\">Platform</a>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#home\">Content store <span class=\"ds-mono\">01</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#home\">Query API <span class=\"ds-mono\">02</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#model\">Content model <span class=\"ds-mono\">03</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#matrix\">Plans and limits <span class=\"ds-mono\">04</span></a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#matrix\">Features</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#model\">Model</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#contact\">Contact</a></li>\n    </ul>\n    <span class=\"ds-nav__meta\"><span class=\"ds-dot ds-dot--success\"></span> API 4.2.0 / all regions up</span>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#contact\">Log in</a>\n      <a class=\"ds-button ds-button--small\" href=\"#contact\">Start</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-wrap ds-hero__inner\">\n      <div class=\"ds-hero__copy\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">00 / Content platform</span>\n        <h1 class=\"ds-hero__title\">Content as data, for every surface</h1>\n        <p class=\"ds-hero__lead\">chronoskin stores what you publish as structured documents and answers any question about them in one query, from the web site to the shop shelf.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#contact\">Start building</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large is-hover\" href=\"#matrix\">Compare plans</a>\n        </div>\n        <ul class=\"ds-hero__meta\">\n          <li><b>+</b> Typed schema</li>\n          <li><b>+</b> Live queries</li>\n          <li><b>+</b> Edge cache in 34 cities</li>\n          <li><b>+</b> History of every field</li>\n        </ul>\n      </div>\n      <aside class=\"ds-spec\">\n        <div class=\"ds-spec__head\"><span>Sheet 01 / Production</span><span>Rev 4.2.0</span></div>\n        <ul class=\"ds-spec__rows\">\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Status</span><span class=\"ds-spec__value\"><span class=\"ds-dot ds-dot--success\"></span> Operational</span></li>\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Query p50</span><span class=\"ds-spec__value\">38 ms</span></li>\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Query p99</span><span class=\"ds-spec__value\">142 ms</span></li>\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Regions</span><span class=\"ds-spec__value\">9</span></li>\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Documents</span><span class=\"ds-spec__value\">1,284,906</span></li>\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Schema</span><span class=\"ds-spec__value\">46 types</span></li>\n          <li class=\"ds-spec__row\"><span class=\"ds-spec__key\">Uptime 90 d</span><span class=\"ds-spec__value\">99.995%</span></li>\n        </ul>\n        <div class=\"ds-spec__foot\">\n          <div class=\"ds-progress\">\n            <div class=\"ds-progress__head\"><span>Dataset sync</span><span class=\"ds-progress__value\">72%</span></div>\n            <progress class=\"ds-progress__bar\" value=\"72\" max=\"100\">72%</progress>\n          </div>\n          <div class=\"ds-progress ds-progress--quiet\">\n            <div class=\"ds-progress__head\"><span>Cache warm</span><span class=\"ds-progress__value\">41%</span></div>\n            <progress class=\"ds-progress__bar\" value=\"41\" max=\"100\">41%</progress>\n          </div>\n        </div>\n      </aside>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-console\">\n        <div class=\"ds-console__bar\">\n          <span class=\"ds-console__path\">production / query / articles-by-topic</span>\n          <span class=\"ds-avatars\"><span class=\"ds-avatar\">mk</span><span class=\"ds-avatar ds-avatar--2\">jo</span><span class=\"ds-avatar ds-avatar--3\">ts</span></span>\n          <span class=\"ds-badge ds-badge--success\">3 editing</span>\n        </div>\n        <div class=\"ds-console__body\">\n<pre class=\"ds-console__pane\"><span class=\"ds-console__label\">Query</span><span class=\"ds-code__k\">from</span> article\n<span class=\"ds-code__k\">where</span> topic == <span class=\"ds-code__s\">\"field-notes\"</span>\n  <span class=\"ds-code__k\">and</span> published &lt; now()\n<span class=\"ds-code__k\">order</span> published <span class=\"ds-code__k\">desc</span>\n<span class=\"ds-code__k\">take</span> 2 {\n  title,\n  <span class=\"ds-code__s\">\"author\"</span>: author-&gt;name,\n  <span class=\"ds-code__s\">\"words\"</span>: count(body)\n}</pre>\n<pre class=\"ds-console__pane\"><span class=\"ds-console__label\">Result / 38 ms / 2 documents</span>[\n  { <span class=\"ds-code__n\">\"title\"</span>: <span class=\"ds-code__s\">\"Mapping a river in winter\"</span>,\n    <span class=\"ds-code__n\">\"author\"</span>: <span class=\"ds-code__s\">\"Mira Kovac\"</span>,\n    <span class=\"ds-code__n\">\"words\"</span>: 1840 },\n  { <span class=\"ds-code__n\">\"title\"</span>: <span class=\"ds-code__s\">\"What the tide tables leave out\"</span>,\n    <span class=\"ds-code__n\">\"author\"</span>: <span class=\"ds-code__s\">\"Jon Oyelaran\"</span>,\n    <span class=\"ds-code__n\">\"words\"</span>: 2212 }\n]\n<span class=\"ds-code__c\">// cached at the edge for 60 s</span></pre>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap\">\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\"><span>Queries a day</span><span>A1</span></span><span class=\"ds-stat__figure\">2.4<small>bn</small></span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\"><span>Median answer</span><span>A2</span></span><span class=\"ds-stat__figure\">38<small>ms</small></span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\"><span>Edge cities</span><span>A3</span></span><span class=\"ds-stat__figure\">34</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\"><span>Uptime, 12 months</span><span>A4</span></span><span class=\"ds-stat__figure\">99.99<small>%</small></span></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">01 / Capabilities</span>\n        <h2 class=\"ds-section__title\">Six parts, one store</h2>\n        <p class=\"ds-section__text\">Each part works alone and all of them read the same documents. Nothing is copied between systems.</p>\n        <a class=\"ds-link ds-link--more\" href=\"#matrix\">Full feature matrix</a>\n      </div>\n      <div class=\"ds-section__body\">\n        <div class=\"ds-grid\" data-component=\"grid\">\n          <article class=\"ds-grid__cell\">\n            <div class=\"ds-grid__top\"><span class=\"ds-eyebrow\">B1</span><span class=\"ds-grid__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M4 6h16M4 12h16M4 18h16M9 3v18\"/></svg></span></div>\n            <h3 class=\"ds-grid__title\">Typed schema</h3>\n            <p class=\"ds-grid__text\">Describe documents in code. Editors get a form, the API gets types.</p>\n          </article>\n          <article class=\"ds-grid__cell\">\n            <div class=\"ds-grid__top\"><span class=\"ds-eyebrow\">B2</span><span class=\"ds-grid__art ds-grid__art--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M4 5h10M4 10h16M4 15h7M15 15l5 4M15 19l5-4\"/></svg></span></div>\n            <h3 class=\"ds-grid__title\">Query language</h3>\n            <p class=\"ds-grid__text\">Filter, join and shape the answer in one request, however deep the references go.</p>\n          </article>\n          <article class=\"ds-grid__cell\">\n            <div class=\"ds-grid__top\"><span class=\"ds-eyebrow\">B3</span><span class=\"ds-grid__art ds-grid__art--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8\"/><path d=\"M4 12h16M12 4c3 3 3 13 0 16M12 4c-3 3-3 13 0 16\"/></svg></span></div>\n            <h3 class=\"ds-grid__title\">Edge delivery</h3>\n            <p class=\"ds-grid__text\">Answers are cached in 34 cities and dropped the moment a document changes.</p>\n          </article>\n          <article class=\"ds-grid__cell\">\n            <div class=\"ds-grid__top\"><span class=\"ds-eyebrow\">B4</span><span class=\"ds-grid__art ds-grid__art--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"9\" r=\"3\"/><circle cx=\"16\" cy=\"9\" r=\"3\"/><path d=\"M3 19c1-4 9-4 10 0M11 19c1-4 9-4 10 0\"/></svg></span></div>\n            <h3 class=\"ds-grid__title\">Editing together</h3>\n            <p class=\"ds-grid__text\">Everyone types in the same document. Each field shows who is in it.</p>\n          </article>\n          <article class=\"ds-grid__cell\">\n            <div class=\"ds-grid__top\"><span class=\"ds-eyebrow\">B5</span><span class=\"ds-grid__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M12 7v5l3 3\"/><path d=\"M5 5v4h4\"/><path d=\"M5 9a8 8 0 1 1-1 5\"/></svg></span></div>\n            <h3 class=\"ds-grid__title\">History</h3>\n            <p class=\"ds-grid__text\">Every change to every field is kept for a year and can be put back.</p>\n          </article>\n          <article class=\"ds-grid__cell\">\n            <div class=\"ds-grid__top\"><span class=\"ds-eyebrow\">B6</span><span class=\"ds-grid__art ds-grid__art--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M5 12h6M13 6h6M13 18h6M11 12l2-6M11 12l2 6\"/><circle cx=\"4\" cy=\"12\" r=\"1\"/></svg></span></div>\n            <h3 class=\"ds-grid__title\">Webhooks</h3>\n            <p class=\"ds-grid__text\">Tell a build, a search index or a shop when a matching document is published.</p>\n          </article>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">02 / Changes</span>\n        <h2 class=\"ds-section__title\">Shipped this month</h2>\n        <p class=\"ds-section__text\">The API is versioned by date. A query pinned to a version keeps its answer.</p>\n      </div>\n      <div class=\"ds-section__body\">\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\"><span class=\"ds-list__meta\">07 Oct 2026</span><div><a class=\"ds-list__title\" href=\"#model\">References can now be required in one direction only</a><p class=\"ds-list__text\">A product may demand a category without the category listing its products.</p></div><span class=\"ds-badge\">New</span></li>\n          <li class=\"ds-list__item\"><span class=\"ds-list__meta\">29 Sep 2026</span><div><a class=\"ds-list__title is-hover\" href=\"#matrix\">Edge cache reaches four more cities</a><p class=\"ds-list__text\">Median answer time in the southern regions fell from 61 to 40 ms.</p></div><span class=\"ds-badge ds-badge--outline\">Delivery</span></li>\n          <li class=\"ds-list__item\"><span class=\"ds-list__meta\">18 Sep 2026</span><div><a class=\"ds-list__title\" href=\"#model\">Field history is searchable</a><p class=\"ds-list__text\">Find who changed a price, and when, without opening the document.</p></div><span class=\"ds-badge ds-badge--outline\">Store</span></li>\n          <li class=\"ds-list__item\"><span class=\"ds-list__meta\">02 Sep 2026</span><div><a class=\"ds-list__title\" href=\"#matrix\">Query costs appear in the response head</a><p class=\"ds-list__text\">Each answer says how many documents it read and what it cost.</p></div><span class=\"ds-badge ds-badge--outline\">API</span></li>\n        </ul>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-cta\">\n        <div>\n          <span class=\"ds-cta__label\">03 / Start</span>\n          <h2 class=\"ds-cta__title\">A first query in five minutes, free up to 100,000 documents</h2>\n        </div>\n        <a class=\"ds-button ds-button--inverse ds-button--large\" href=\"#contact\">Create a project</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"matrix\">\n  <div class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-wrap ds-page-header__inner\">\n      <div class=\"ds-page-header__lead\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Platform</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#matrix\">Features</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Matrix</li>\n        </ol>\n      </div>\n      <div class=\"ds-page-header__main\">\n        <div class=\"ds-page-header__copy\">\n          <h1 class=\"ds-page-header__title\">Feature matrix</h1>\n          <p class=\"ds-page-header__text\">Every capability of chronoskin and the plan it starts in, line by line.</p>\n        </div>\n        <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#contact\">Talk to us</a></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">01 / Compare</span>\n        <h2 class=\"ds-section__title\">Three plans, one API</h2>\n        <p class=\"ds-section__text\">Limits are per project and reset on the first of the month. Prices are in euros, without tax.</p>\n      </div>\n      <div class=\"ds-section__body\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#matrix\">All</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#matrix\">Store</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#matrix\">Delivery</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#matrix\">Security</a></li>\n          </ul>\n          <span class=\"ds-toolbar__note\">8 of 31 lines</span>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table ds-table--ruled\" data-component=\"table\">\n            <thead>\n              <tr><th>Capability</th><th>Free</th><th>Team</th><th>Scale</th><th class=\"ds-table__num\">Included</th></tr>\n            </thead>\n            <tbody>\n              <tr><th>Documents</th><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">100,000</td></tr>\n              <tr class=\"is-hover\"><th>API requests a month <span class=\"ds-tooltip\" tabindex=\"0\">?<span class=\"ds-tooltip__tip\" role=\"tooltip\">Cached answers are not counted, only queries that reach the store.</span></span></th><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">250,000</td></tr>\n              <tr><th>Datasets</th><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">2</td></tr>\n              <tr><th>Field history, days</th><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">3</td></tr>\n              <tr><th>Scheduled publishing</th><td class=\"ds-table__no\">.</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">0</td></tr>\n              <tr><th>Roles per field</th><td class=\"ds-table__no\">.</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">0</td></tr>\n              <tr><th>Single sign-on</th><td class=\"ds-table__no\">.</td><td class=\"ds-table__no\">.</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">0</td></tr>\n              <tr><th>Private edge region</th><td class=\"ds-table__no\">.</td><td class=\"ds-table__no\">.</td><td class=\"ds-table__yes\">+</td><td class=\"ds-table__num\">0</td></tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">02 / Questions</span>\n        <h2 class=\"ds-section__title\">Limits, explained</h2>\n        <p class=\"ds-section__text\">What counts, what does not, and what happens at the edge of a plan.</p>\n      </div>\n      <div class=\"ds-section__body ds-split ds-split--wide\">\n        <div class=\"ds-cell\">\n          <div class=\"ds-accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__summary\">What happens when a project reaches a limit?</summary>\n              <div class=\"ds-accordion__body\"><p>Nothing stops. Reads keep working, you get a message at 80% and at 100%, and the plan is settled at the end of the month.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__summary\">Is a draft a document?</summary>\n              <div class=\"ds-accordion__body\"><p>A draft and its published version count as one document.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__summary\">Can a dataset be moved between regions?</summary>\n              <div class=\"ds-accordion__body\"><p>Yes, on Team and Scale. A move copies the dataset, then switches reads over.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__summary\">How long is history kept after a downgrade?</summary>\n              <div class=\"ds-accordion__body\"><p>For 30 days, so that a change of plan never deletes anything at once.</p></div>\n            </details>\n          </div>\n        </div>\n        <div class=\"ds-cell\">\n          <section class=\"ds-panel\" data-component=\"panel\">\n            <div class=\"ds-panel__head\"><h3 class=\"ds-panel__title\">Your project this month</h3><span class=\"ds-badge ds-badge--quiet\">Team</span></div>\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-progress\">\n                <div class=\"ds-progress__head\"><span>Documents</span><span class=\"ds-progress__value\">412,000 / 500,000</span></div>\n                <progress class=\"ds-progress__bar\" value=\"82\" max=\"100\">82%</progress>\n              </div>\n              <div class=\"ds-progress ds-progress--quiet\">\n                <div class=\"ds-progress__head\"><span>API requests</span><span class=\"ds-progress__value\">0.9 / 2.0 m</span></div>\n                <progress class=\"ds-progress__bar\" value=\"45\" max=\"100\">45%</progress>\n              </div>\n              <div class=\"ds-buttonrow\" data-component=\"buttons\">\n                <a class=\"ds-button ds-button--small\" href=\"#contact\">Upgrade</a>\n                <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#model\">Open project</a>\n                <a class=\"ds-button ds-button--danger ds-button--small\" href=\"#matrix\">Cancel plan</a>\n                <span class=\"ds-button ds-button--small is-disabled\">Export</span>\n              </div>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"model\">\n  <div class=\"ds-page-header\">\n    <div class=\"ds-wrap ds-page-header__inner\">\n      <div class=\"ds-page-header__lead\">\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Platform</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">Model</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">article</li>\n        </ol>\n      </div>\n      <div class=\"ds-page-header__main\">\n        <div class=\"ds-page-header__copy\">\n          <h1 class=\"ds-page-header__title\">Content model</h1>\n          <p class=\"ds-page-header__text\">The types of the production dataset and the fields each one holds.</p>\n        </div>\n        <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#model\">Export schema</a><a class=\"ds-button\" href=\"#model\">New field</a></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Document types</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\">article <span class=\"ds-mono\">18,204</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">author</a> <span class=\"ds-mono\">312</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">topic</a> <span class=\"ds-mono\">64</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">product</a> <span class=\"ds-mono\">9,870</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">page</a> <span class=\"ds-mono\">141</span></li>\n          </ul>\n          <h2 class=\"ds-sidebar__title\">Objects</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">figure</a> <span class=\"ds-mono\">7 uses</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#model\">price</a> <span class=\"ds-mono\">2 uses</span></li>\n          </ul>\n        </nav>\n      </div>\n      <div class=\"ds-section__body\">\n        <div class=\"ds-toolbar\">\n          <h2 class=\"ds-toolbar__title\">article</h2>\n          <div class=\"ds-toolbar__tools\">\n            <div class=\"ds-badgerow\" data-component=\"badge\">\n              <span class=\"ds-badge\">7 fields</span>\n              <span class=\"ds-badge ds-badge--success\">Live</span>\n              <span class=\"ds-badge ds-badge--warning\">Draft</span>\n              <span class=\"ds-badge ds-badge--danger\">Deprecated</span>\n            </div>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Show deprecated</span></label>\n          </div>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table ds-table--ruled\">\n            <thead>\n              <tr><th>Field</th><th>Type</th><th>State</th><th class=\"ds-table__num\">Filled</th></tr>\n            </thead>\n            <tbody>\n              <tr><th>title</th><td>string, required</td><td><span class=\"ds-table__state\"><span class=\"ds-dot ds-dot--success\"></span> Live</span></td><td class=\"ds-table__num\">100%</td></tr>\n              <tr><th>slug</th><td>slug, from title</td><td><span class=\"ds-table__state\"><span class=\"ds-dot ds-dot--success\"></span> Live</span></td><td class=\"ds-table__num\">100%</td></tr>\n              <tr><th>author</th><td>reference to author</td><td><span class=\"ds-table__state\"><span class=\"ds-dot ds-dot--success\"></span> Live</span></td><td class=\"ds-table__num\">98%</td></tr>\n              <tr><th>body</th><td>rich text with figure</td><td><span class=\"ds-table__state\"><span class=\"ds-dot ds-dot--success\"></span> Live</span></td><td class=\"ds-table__num\">97%</td></tr>\n              <tr><th>reading_time</th><td>number, computed</td><td><span class=\"ds-table__state\"><span class=\"ds-dot ds-dot--warning\"></span> Draft</span></td><td class=\"ds-table__num\">0%</td></tr>\n              <tr><th>subtitle</th><td>string</td><td><span class=\"ds-table__state\"><span class=\"ds-dot ds-dot--danger\"></span> Deprecated</span></td><td class=\"ds-table__num\">12%</td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span>Fields 1 to 6 of 7</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><span class=\"ds-pagination__link is-disabled\">Prev</span></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#model\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#model\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#model\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">02 / Rules</span>\n        <h2 class=\"ds-section__title\">What the store checks</h2>\n        <p class=\"ds-section__text\">Rules run when a document is published, never while it is typed.</p>\n      </div>\n      <div class=\"ds-section__body ds-split\">\n        <div class=\"ds-cell ds-stack\">\n          <article class=\"ds-prose\" data-component=\"typography\">\n            <h1>Modelling an article</h1>\n            <p class=\"ds-prose__lead\">A type lists what a document is, not how a page shows it.</p>\n            <h2>Start from the question</h2>\n            <p>Write the queries the site will ask before the fields. If nothing asks for <code>subtitle</code>, the field is a habit and can go.</p>\n            <h3>Three checks before publishing a type</h3>\n            <ul>\n              <li>Every reference names the type it points at.</li>\n              <li>A computed field such as <code>reading_time</code> has no form control.</li>\n              <li>A deprecated field stays readable until <strong>no document</strong> fills it.</li>\n            </ul>\n            <p>Changes to a type are a migration, and each one is kept in the <a href=\"#home\">history</a>.</p>\n          </article>\n          <div class=\"ds-code\">\n            <div class=\"ds-code__head\"><span class=\"ds-code__name\">schema / article</span><span class=\"ds-kbd\">ts</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-code__k\">type</span> <span class=\"ds-code__n\">article</span> = {\n  title: <span class=\"ds-code__s\">string</span>\n  author: <span class=\"ds-code__k\">ref</span>&lt;<span class=\"ds-code__n\">author</span>&gt;\n  body: <span class=\"ds-code__s\">text</span> <span class=\"ds-code__c\">// with figure</span>\n}</pre>\n          </div>\n        </div>\n        <div class=\"ds-cell ds-stack\">\n          <section class=\"ds-panel\">\n            <div class=\"ds-panel__head\"><h3 class=\"ds-panel__title\">Validation</h3><span class=\"ds-mono\">article</span></div>\n            <ul class=\"ds-rules\">\n              <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Title is unique <span class=\"ds-mono\">within the dataset</span></span><label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Title is unique\"><span class=\"ds-switch__track\"></span></label></li>\n              <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Author must be published <span class=\"ds-mono\">reference check</span></span><label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Author must be published\"><span class=\"ds-switch__track\"></span></label></li>\n              <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Body has a figure <span class=\"ds-mono\">warning only</span></span><label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" aria-label=\"Body has a figure\"><span class=\"ds-switch__track\"></span></label></li>\n            </ul>\n          </section>\n          <div class=\"ds-dialog\" data-component=\"dialog\">\n            <div class=\"ds-dialog__box\" role=\"dialog\" aria-label=\"Delete field\">\n              <div class=\"ds-dialog__head\"><h3 class=\"ds-dialog__title\">Delete the field subtitle?</h3><a class=\"ds-dialog__close\" href=\"#model\" aria-label=\"Close\">ESC</a></div>\n              <div class=\"ds-dialog__body\"><p>2,184 documents still fill it. Their values stay in the history for a year, then they are gone.</p></div>\n              <div class=\"ds-dialog__actions\"><a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#model\">Keep it</a><a class=\"ds-button ds-button--danger ds-button--small\" href=\"#model\">Delete field</a></div>\n            </div>\n          </div>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <svg class=\"ds-empty__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 4h16v16H4zM4 9h16M9 9v11\"/></svg>\n            <h3 class=\"ds-empty__title\">No migrations waiting</h3>\n            <p class=\"ds-empty__text\">A change to a type that touches stored documents will be listed here before it runs.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#model\">Plan a migration</a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"contact\">\n  <div class=\"ds-page-header\">\n    <div class=\"ds-wrap ds-page-header__inner\">\n      <div class=\"ds-page-header__lead\">\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Platform</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#contact\">Contact</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Project</li>\n        </ol>\n      </div>\n      <div class=\"ds-page-header__main\">\n        <div class=\"ds-page-header__copy\">\n          <h1 class=\"ds-page-header__title\">Start a project</h1>\n          <p class=\"ds-page-header__text\">Tell us what you publish and where it has to appear. An engineer answers within one working day.</p>\n        </div>\n        <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#matrix\">See the plans</a></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-section\">\n      <div class=\"ds-section__head\">\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">01 / What happens next</span>\n        <h2 class=\"ds-section__title\">From form to first query</h2>\n        <ol class=\"ds-steps\">\n          <li class=\"ds-steps__item\"><span><span class=\"ds-steps__title\">We read your note</span>and open an empty project in the region you chose.</span></li>\n          <li class=\"ds-steps__item\"><span><span class=\"ds-steps__title\">A call of 30 minutes</span>to sketch the first three types together.</span></li>\n          <li class=\"ds-steps__item\"><span><span class=\"ds-steps__title\">You import</span>a sample of real content and run a query.</span></li>\n        </ol>\n      </div>\n      <div class=\"ds-section__body ds-split ds-split--wide\">\n        <div class=\"ds-cell ds-stack\">\n          <div class=\"ds-noticerow\" data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__title\">Free projects need no call.</span> Leave the note empty and the project opens at once.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">The form was not sent.</span> Check the work e-mail address below.</p>\n          </div>\n          <form class=\"ds-form\" data-component=\"form\" action=\"#contact\">\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\"><label class=\"ds-form__label\" for=\"c-name\">Name</label><input class=\"ds-form__input\" id=\"c-name\" type=\"text\" value=\"Mira Kovac\"></div>\n              <div class=\"ds-form__field\"><label class=\"ds-form__label\" for=\"c-mail\">Work e-mail</label><input class=\"ds-form__input is-error\" id=\"c-mail\" type=\"text\" value=\"mira@studio\"><span class=\"ds-form__error\">This address has no domain ending.</span></div>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\"><label class=\"ds-form__label\" for=\"c-id\">Project id</label><input class=\"ds-form__input ds-form__input--mono\" id=\"c-id\" type=\"text\" value=\"field-notes-prod\"><span class=\"ds-form__hint\">Lowercase letters, digits and hyphens.</span></div>\n              <div class=\"ds-form__field\"><label class=\"ds-form__label\" for=\"c-region\">Region</label><select class=\"ds-form__select\" id=\"c-region\"><option>Europe, north</option><option>Europe, west</option><option>Americas, east</option></select></div>\n            </div>\n            <div class=\"ds-form__field\"><label class=\"ds-form__label\" for=\"c-note\">What do you publish?</label><textarea class=\"ds-form__textarea\" id=\"c-note\">A magazine of field notes, 18,000 articles, shown on the site, in the app and on two partner sites.</textarea></div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me the changes of the API once a month</label>\n            <div class=\"ds-form__actions\"><button class=\"ds-button\" type=\"button\">Send and open project</button><a class=\"ds-button ds-button--secondary\" href=\"#home\">Cancel</a></div>\n          </form>\n        </div>\n        <div class=\"ds-cell ds-stack\">\n          <section class=\"ds-panel\">\n            <div class=\"ds-panel__head\"><h3 class=\"ds-panel__title\">Who answers</h3><span class=\"ds-badge ds-badge--success\">Online</span></div>\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large ds-avatar--2\">jo</span><span><span class=\"ds-person__name\">Jon Oyelaran</span><span class=\"ds-person__role\">Solutions engineer</span></span></div>\n              <p>I moved a newsroom of 40 editors onto chronoskin last year. Bring the awkward content first.</p>\n            </div>\n          </section>\n          <div class=\"ds-code\">\n            <div class=\"ds-code__head\"><span class=\"ds-code__name\">Terminal</span><span class=\"ds-kbd\">sh</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-code__c\"># or start without us</span>\n<span class=\"ds-code__k\">npx</span> chronoskin init field-notes-prod\n<span class=\"ds-code__k\">npx</span> chronoskin import ./sample.ndjson</pre>\n          </div>\n          <p class=\"ds-linkrow\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#model\">Modelling guide</a>\n            <a class=\"ds-link is-visited\" href=\"#matrix\">Limits</a>\n            <a class=\"ds-link is-hover\" href=\"#home\">Query reference</a>\n            <a class=\"ds-link is-active\" href=\"#contact\">Status</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <div class=\"ds-footer__col\">\n      <a class=\"ds-brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"20,3 8,3 3,12 8,21 20,21 20,16.5 10.6,16.5 8.1,12 10.6,7.5 20,7.5\"/><polygon points=\"16,9.6 18.4,12 16,14.4 13.6,12\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <p class=\"ds-footer__about\">Structured content for teams that publish to more than one place.</p>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Platform</h2>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Overview</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#matrix\">Feature matrix</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#model\">Content model</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Developers</h2>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#model\">Modelling guide</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Query reference</a></li>\n        <li><a class=\"ds-footer__link is-hover\" href=\"#home\">Changes</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Company</h2>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Contact</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Security</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Terms</a></li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"ds-footer__line\">\n    <span>2026 chronoskin</span>\n    <span>Rev 4.2.0</span>\n    <span class=\"ds-footer__status\"><span class=\"ds-dot ds-dot--success\"></span> All systems normal</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.dev-dark.landing.s07.p02.t01.u08\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"dev-dark\",\n    \"years\": [\n      2019,\n      2026\n    ]\n  },\n  \"archetype\": \"landing\",\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-7218\",\n  \"short\": \"v1-dd-7218\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #0b0e14;\n  --color-canvas: #0b0e14;\n  --color-surface: #11141b;\n  --color-surface-alt: #171b24;\n  --color-surface-strong: #282c33;\n  --color-bar: #0b0e14;\n  --color-bar-text: #dce0e5;\n  --color-bar-alt: #11141b;\n  --color-bar-alt-text: #a9afbc;\n  --color-inverse: #dce0e5;\n  --color-inverse-text: #0b0e14;\n  --color-text: #b4bac6;\n  --color-text-muted: #7d8696;\n  --color-heading: #eef1f5;\n  --color-heading-alt: #dce0e5;\n  --color-link: #3ecf8e;\n  --color-link-quiet: #a9afbc;\n  --color-link-visited: #86c2a4;\n  --color-link-hover: #74e8b4;\n  --color-link-active: #2aa872;\n  --color-border: #232831;\n  --color-border-strong: #464b57;\n  --color-border-muted: #1a1e26;\n  --color-accent: #3ecf8e;\n  --color-accent-text: #06130d;\n  --color-accent-alt: #47b7f8;\n  --color-fill-1: #3ecf8e;\n  --color-fill-2: #47b7f8;\n  --color-fill-3: #fbca00;\n  --color-fill-4: #464b57;\n  --color-button: #3ecf8e;\n  --color-button-text: #06130d;\n  --color-button-hover-text: #06130d;\n  --color-button-secondary: #171b24;\n  --color-button-secondary-text: #dce0e5;\n  --color-input: #0b0e14;\n  --color-input-text: #dce0e5;\n  --color-input-border: #343a45;\n  --color-disabled: #171b24;\n  --color-disabled-text: #5c6370;\n  --color-danger: #ff6465;\n  --color-danger-surface: #1e1318;\n  --color-success: #3ecf8e;\n  --color-warning: #fbca00;\n  --color-notice: #0e1d2c;\n  --color-notice-text: #9cd4fb;\n  --color-focus: #47b7f8;\n  --color-shadow: rgb(0 0 0 / 0.4);\n  --color-overlay: rgb(5 7 10 / 0.72);\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: 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"
  }
}
