{
  "id": "v1-dd-4235",
  "long_id": "v1.dev-dark.blog.s04.p02.t03.u05",
  "name": "Dark developer tools changelog and blog",
  "era": {
    "slug": "dev-dark",
    "code": "dd",
    "name": "Dark developer tools",
    "years": [
      2019,
      2026
    ],
    "description": "Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent."
  },
  "archetype": "blog",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": false,
    "responsive": true
  },
  "summary": "This is the changelog and engineering blog of a developer product from 2019 to 2026: a dark page with a plain bar, a mono ticker of the current versions under it, and one centred column that a dated rule runs down. Releases hang on that rule as entries with a version tag, featured posts sit in bordered cards under tinted line drawings, and a release page shows its configuration change as a diff with tinted lines. In this set the page is a deep navy, type is a tight bold grotesque, tags are squared and the one accent is a cyan that also glows behind the newest release.",
  "url": "https://chrono.skin/s/v1-dd-4235",
  "preview_url": "https://chrono.skin/s/v1-dd-4235/specimen.html",
  "files": {
    "STYLE.md": "# Dark developer tools changelog and blog\n\n## Summary\n\nThis is the changelog and engineering blog of a developer product from 2019 to 2026: a dark page with a plain bar, a mono ticker of the current versions under it, and one centred column that a dated rule runs down. Releases hang on that rule as entries with a version tag, featured posts sit in bordered cards under tinted line drawings, and a release page shows its configuration change as a diff with tinted lines. In this set the page is a deep navy, type is a tight bold grotesque, tags are squared and the one accent is a cyan that also glows behind the newest release.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. Content sits in `.ds-wrap`, at most `--size-page` (1120px) wide with `--space-5` (24px) of side padding. Running text stays under `--size-narrow` (700px).\n- Navigation is `.ds-nav`, a bar `--size-top` (60px) tall on `--fill-bar` that scrolls with the page: brand at the left, four links whose current one has a `--border-width-strong` line in `--color-accent` along the bottom of the bar, a secondary and a primary small button at the right. Directly under it `.ds-ticker`, a mono strip on `--fill-bar-alt` between two hairlines, names the release lines. There is no left rail.\n- The home view stacks: `.ds-hero` (label, title, lead and an inline subscribe field at the left; `.ds-release`, the newest version as a card, at the right, over the glow); a `.ds-colhead` and `.ds-grid`, one tall lead card beside four small ones; `.ds-statband`, a full-width band on `--color-surface-alt` holding `.ds-stat`; then `.ds-cols`, the timeline `.ds-list` beside a `--size-side` (296px) column with a panel, the inverted `.ds-callout` and a code block.\n- Inner pages have no hero. They open with `.ds-page-header`: breadcrumb, a `--text-h1` title, an optional row of labels (`.ds-page-header__meta`) and one muted line at the left, at most two buttons at the right, over a hairline. Below it `.ds-cols` (main and side), `.ds-cols--even` (halves) or `.ds-cols--menu` (a 213px column of sidebars at the left). Tabs are a row of chips in a `.ds-toolbar` directly over the table they filter; the pagination is in the `.ds-table__foot`.\n- Views. The specimen is the changelog of a query engine in four views. `latest` is the home view described above. `release` is one release: prose, the diff, the table of packages and the pager to the neighbouring releases in the main column; facts, the headings of the page, contributors with a row of links, an upgrade command and the inverted callout at the right. `archive` lists every release: sidebars by line and year and the label key at the left, chips, the table with pagination and an empty state at the right. `subscribe` has the e-mail form under its notices, beside the feed addresses, the state of the subscription with its buttons and the open dialog that unsubscribes.\n- Spacing scale: `--space-1` 4px (inside chips and key caps, between tally cells), `--space-2` 8px (button vertical padding, between adjacent buttons and badges, sidebar rows), `--space-3` 12px (panel head and table cell vertical padding), `--space-4` 16px (panel padding, between grid cards, between form rows), `--space-5` 24px (between stacked blocks, side padding, card body), `--space-6` 36px (between timeline entries, below a page header), `--space-7` 56px (between the sections of a view, between the main and the side column), `--space-8` 80px (hero top, above the footer).\n- Other sizes: `--size-rail` 124px (the date column of the timeline), `--size-cover` 128px (the drawing of a small card), `--size-glow` 460px, `--size-mark` 26px, `--size-dot` 8px, `--size-dialog` 440px.\n- Below 980px the side column goes under, the lead card spans the row and figures stand two across. Below 640px everything is one column, the links of the bar move to a second row that scrolls sideways, the date of an entry sits over it on the same rule, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n- On a phone (640px and below) `.ds-nav__inner` wraps: the brand and `.ds-nav__actions` stay on the first row, `.ds-nav__links` take a second row that scrolls sideways and spread across it, and the secondary button of the actions is not shown. The `.ds-menu` stays and lists every view, the current one with the accent line.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThe conventions for which text sits on which fill are those of the era's first layout and are kept here.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` on the page, on `--fill-panel`, `--color-surface-alt` (a hovered card, the dialog) and `--color-surface-strong` (key caps, inline code, quiet badges). `--color-bar-text` on `--fill-bar` (the top bar). `--color-bar-alt-text` on `--fill-bar-alt` (the tree, code heads, table heads, the footer), with `--color-heading` for the current page. `--color-input-text` on `--fill-input` (form controls, the search field and every code block). `--color-inverse-text` on `--fill-inverse`, used once per view, for `.ds-next`.\n- `--color-fill-1` to `--color-fill-4` never carry text: they tint the icon tile of a guide card (16% fill, 35% hairline, the icon in 75% of the fill mixed into `--color-heading`), and `--color-fill-1` is the hero glow.\n- `--color-accent-alt` is a line and text colour: the mono label of the hero, keywords in code, the underline of the current section and tab, the marker of the current heading in the sidebar, the first stat's rule.\n- In code, `.ds-code__k` is `--color-accent-alt`, `.ds-code__s` `--color-success`, `.ds-code__n` `--color-link`, `.ds-code__c` `--color-text-muted`. Status colours are a dot, text or a 12% tint, never a solid fill.\n- Type in this set: a grotesque for body and controls, a serif for headings at regular weight, a monospace for data. `--text-base` 16px at `--line-body` 1.65; `--text-ui` 14px (navigation, tree, buttons, forms, tables, code, card text); `--text-small` 13px (badges, mono labels, dates, footer); `--text-large` 18px (hero lead, page header line, prose lead). The hero title is 78% of `--text-display` (47px), because the text column is narrower than a landing page; `--text-h1` 40px page titles and prose h1; `--text-h2` 26px column heads, figures and prose h2; `--text-h3` 17px panel and card titles in `--weight-bold`.\n- Surface in this set: `--radius-control` 10px, `--radius-panel` 14px, `--radius-page` 20px (guide cards, the hero code block, the dialog), pills for badges. Panels and cards lie on `--fill-panel`, a faint top-lit gradient, under `--shadow-panel`; buttons are a short gradient with a lit top edge and glow in their own colour when hovered; the hero code block and the dialog cast `--shadow-dialog`. `--fill-page` adds a wide, very faint glow at the top of the page.\n- One-off values written with `calc()` and `color-mix()`: the hero title size, the hero glow (28% of `--color-fill-1`), tile tints, the wash behind the current tree link (12% of `--color-bar-alt-text`), status tints (12% and 32%), notice borders, key cap and inline code corners (half of `--radius-control`), mono label tracking. Section links are at `opacity` 0.66 until current. 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-section`, `.ds-stack`, `.ds-cols`, `.ds-colhead`: the centred column, a section 56px below the last, a vertical stack 24px apart, the column pairs (`--even`, `--menu`) and a section title with a link at its right (`.ds-colhead__title`).\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 26px tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`) and `.ds-nav__actions`; `.ds-ticker` with `.ds-ticker__inner`, `.ds-ticker__item` (`--end`) and `.ds-ticker__link` follows inside the same header. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current`.\n- `.ds-hero`: home view only. `.ds-hero__inner` is two columns: `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__form` (one input and the main action) and `.ds-hero__note`; then `.ds-release`. The glow is its `::before`.\n- `.ds-release`: the newest version as a card: `.ds-release__head`, `.ds-release__body` with `.ds-release__version`, `.ds-release__title` and `.ds-tally`, then `.ds-release__foot`.\n- `.ds-tally`: counts as rows of small cells: `.ds-tally__row` (`--add`, `--fix`) holds `.ds-tally__name`, `.ds-tally__cells` of `.ds-tally__cell` (`is-on`) and `.ds-tally__count`.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__inner` with `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__meta`, `.ds-page-header__text`) and `.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. For a diff every line is a `.ds-diff__line` (`--add`, `--del`, `--hunk`).\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot`, `.ds-avatar`: the mono label (`--accent`), mono data text, a key cap, a status dot (`--success`, `--warning`, `--danger`, `--accent`, `--ring`) and an initials disc; `.ds-avatars` rows them.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more` (appends an arrow). `.ds-linkrow` lays links in a row.\n- `.ds-button`: 14px medium text, 8px corners, a glow. `--secondary` (translucent fill, strong hairline), `--danger` (tint, hairline and text in the danger colour), `--inverse` (on the callout only), `--small`, `--large`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces them 8px apart.\n- `.ds-form`: labels above fields. `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono`), `.ds-form__select`, `.ds-form__textarea` (`--mono`), `is-error` plus `.ds-form__error`, `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: inside a panel, edge to edge: a mono uppercase head on `--fill-bar-alt`, hairline rows, `is-hover` rows on `--color-surface-alt`, `.ds-table__num` for right-aligned mono numbers. Wrap in `.ds-table__wrap`; `.ds-table__foot` closes the panel and holds the pagination.\n- `.ds-list`: the timeline. `.ds-list__item` is `.ds-list__meta` (mono date over a version badge, right-aligned) beside `.ds-list__body`, which draws the rule and the node and holds `.ds-list__title`, `.ds-list__text` and `.ds-list__tags`.\n- `.ds-panel`: hairline box on `--fill-panel`: `.ds-panel__head` with `.ds-panel__title`, `.ds-panel__body`; `.ds-panel__rows` of `.ds-panel__row` (`.ds-panel__key`) for facts.\n- `.ds-stat`: the row of figures inside `.ds-statband`. Each `.ds-stat__item` is a `.ds-stat__figure` beside a two-line `.ds-stat__label`, parted by vertical hairlines.\n- `.ds-grid`: featured posts. `.ds-grid__cell` (`--lead` for the tall one) is a link holding `.ds-grid__cover` (`--2`, `--3`, `--4` for the other fills) with one inline SVG drawn in strokes, and `.ds-grid__body` with `.ds-grid__kicker`, `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-callout`: the inverted block: `.ds-callout__title`, `.ds-callout__text` and one `.ds-button--inverse`.\n- `.ds-tabs`: a row of chips, `.ds-tabs__tab`; the current one (`is-current`) is on `--color-surface-strong`. `.ds-toolbar` puts it in a row with a `.ds-toolbar__note`.\n- `.ds-badge`: small squared label on `--fill-accent`. `--quiet`, `--outline`, `--new` (accent-alt tint), `--mono`. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a mono `.ds-sidebar__title` over `.ds-sidebar__list`; each `.ds-sidebar__item` is a row with a count at the right, the current one (`is-current`) bright behind a dot.\n- `.ds-pager`: two boxes, `.ds-pager__link` (`--next`) with a mono `.ds-pager__label`, to the older and the newer release.\n- `.ds-notice`: message strip on `--color-notice`; `--error` in the danger colours. `.ds-notice__title`; `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link`; `is-current` on `--color-surface-strong`, `is-disabled` grey.\n- `.ds-breadcrumb`: `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block in `--color-overlay` centring `.ds-dialog__box` with `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dashed box: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-footer`: on `--fill-bar-alt`: `.ds-footer__inner` with the brand, `.ds-footer__links` of `.ds-footer__link` and one small button; `.ds-footer__line` is the mono last line.\n- `.ds-menu`: a drop-down behind a button in the bar (`.ds-menu__button`, `.ds-menu__list`); it lists every view, so on a phone it is the full navigation.\n- `.ds-menu__item`: one link of the drop-down; the current view carries the accent line and the stronger fill.\n- `.ds-menu__item--view`: an item of the menu that names a view of the site; the current view's item is marked by one `:has()` rule per view, like the bar links, so the menu is a second way to every view on a phone.\n- `.ds-menu__title`: a small mono label over a group of links in the drop-down.\n- `.ds-tooltip`: a small question mark beside a title; `.ds-tooltip__tip` opens on hover or focus, never by default.\n- `.ds-switch`: an on or off setting that takes effect at once, drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`).\n- `.ds-progress`: a thin bar for a build, a rollout or a quota, with a mono line above (`.ds-progress__head`, `.ds-progress__value`, `.ds-progress__bar`).\n\n## Never\n\n- `block-gap <= 80px`: sections are 56px apart, the footer 80px below the last.\n- `font-size >= 13px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 47px`: the hero title is the largest text.\n- `font-weight <= 700`: serif headings are regular, small titles bold; nothing is black.\n- `font-families <= 3`: a sans-serif, a serif for headings and a monospace.\n- `line-height <= 1.7`: body text is set at 1.65.\n- `uppercase-text <= 5%`: only mono labels and table heads are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 1px`: only uppercase mono labels are tracked, by under 1px.\n- `border-width <= 2px`: rules and outlines are 1px hairlines; 2px marks the current section, the current tab and the top of a region cell.\n- `border-radius <= 0px`: every box is square; dots and the ringed dot are circles.\n- `box-shadow-blur <= 0px`: shadows are hard offsets or lines, never soft.\n- `text-shadow = none`: text is flat on every fill.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves by itself, not even the status dot.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block is a `.ds-panel` or a `.ds-grid__cell` with a 1px border in `--color-border`, placed in `.ds-wrap`; anything dated goes on the timeline as a `.ds-list__item` with its version as a mono badge; a change to a file is shown as a `.ds-code` of `.ds-diff__line` rows. 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 one glow and one inverted 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: 1120px;\n  --size-narrow: 700px;\n  --size-top: 60px;\n  --size-side: 296px;\n  --size-rail: 124px;\n  --size-mark: 26px;\n  --size-dot: 8px;\n  --size-dialog: 440px;\n  --size-cover: 128px;\n  --size-glow: 460px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 36px;\n  --space-7: 56px;\n  --space-8: 80px;\n}\n\n/* shell: a bar and a ticker strip, then one centred column that a dated rail runs down */\n.ds-page {\n  min-height: 100vh;\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-wrap {\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n.ds-section {\n  padding-top: var(--space-7);\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-side);\n  gap: var(--space-7);\n  align-items: start;\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-6);\n}\n.ds-cols--menu {\n  grid-template-columns: calc(var(--size-side) * 0.72) minmax(0, 1fr);\n  gap: var(--space-6);\n}\n.ds-colhead {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-5);\n}\n.ds-colhead__title {\n  margin: 0;\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\n/* nav: brand, section links marked by a line below, the feed and the subscribe button; a ticker under it */\n.ds-nav {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-6);\n  max-width: var(--size-page);\n  min-height: var(--size-top);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n.ds-nav__inner > .ds-brand {\n  align-self: center;\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1 1 auto;\n  gap: var(--space-5);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__links > li {\n  display: flex;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  border-top: var(--border-width-strong) var(--border-style) transparent;\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  opacity: 0.62;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link.is-current {\n  border-bottom-color: var(--color-accent);\n  opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#latest\"],\n.ds-page:has(#latest:target) .ds-nav__link[href=\"#latest\"],\n.ds-page:has(#release:target) .ds-nav__link[href=\"#release\"],\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-nav__link[href=\"#subscribe\"] {\n  border-bottom-color: var(--color-accent);\n  opacity: 1;\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  gap: var(--space-2);\n}\n.ds-ticker {\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-ticker__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1) var(--space-4);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-2) var(--space-5);\n}\n.ds-ticker__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-ticker__item--end {\n  margin-left: auto;\n}\n.ds-ticker__link {\n  color: var(--color-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-ticker__link:hover,\n.ds-ticker__link.is-hover {\n  text-decoration: underline;\n}\n\n/* hero: the title and a subscribe field at the left, the newest release as a card at the right, over one glow */\n.ds-hero {\n  position: relative;\n  padding: var(--space-8) 0 var(--space-7);\n  overflow: hidden;\n}\n.ds-hero::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 70%;\n  height: var(--size-glow);\n  background: radial-gradient(ellipse 58% 70% at 72% 34%, color-mix(in srgb, var(--color-fill-1) 24%, transparent), transparent 72%);\n  pointer-events: none;\n}\n.ds-hero__inner {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n  gap: var(--space-7);\n  align-items: center;\n}\n.ds-hero__title {\n  margin: var(--space-3) 0 var(--space-4);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  max-width: 46ch;\n  margin: 0 0 var(--space-5);\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n.ds-hero__form {\n  display: flex;\n  gap: var(--space-2);\n  max-width: 46ch;\n}\n.ds-hero__form .ds-form__input {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n}\n.ds-hero__note {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-4);\n  margin: var(--space-4) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* release card: the newest version, drawn as a window; the largest shadow and the page radius show here */\n.ds-release {\n  min-width: 0;\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-release__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}\n.ds-release__body {\n  padding: var(--space-5);\n}\n.ds-release__version {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n}\n.ds-release__title {\n  margin: var(--space-2) 0 var(--space-4);\n  color: var(--color-text);\n}\n.ds-release__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-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-ui);\n}\n.ds-tally {\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-tally__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-tally__name {\n  flex: 0 0 9ch;\n  color: var(--color-text-muted);\n}\n.ds-tally__cells {\n  display: flex;\n  flex: 1 1 auto;\n  gap: calc(var(--space-1) * 0.75);\n}\n.ds-tally__cell {\n  flex: 1 1 0;\n  max-width: var(--space-4);\n  height: var(--space-3);\n  background: var(--color-surface-strong);\n  border-radius: calc(var(--radius-pill) * 0.5);\n}\n.ds-tally__cell.is-on {\n  background: var(--color-accent-alt);\n}\n.ds-tally__row--add .ds-tally__cell.is-on {\n  background: var(--color-success);\n}\n.ds-tally__row--fix .ds-tally__cell.is-on {\n  background: var(--color-warning);\n}\n.ds-tally__count {\n  flex: 0 0 3ch;\n  color: var(--color-heading);\n  text-align: right;\n}\n\n/* grid: the featured posts; one tall lead card and four small ones, each under a tinted cover drawing */\n.ds-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) minmax(0, 5fr);\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  border-color: var(--color-border-strong);\n}\n.ds-grid__cell--lead {\n  grid-row: span 2;\n}\n.ds-grid__cover {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  height: var(--size-cover);\n  background: linear-gradient(135deg, color-mix(in srgb, var(--color-fill-1) 30%, transparent), color-mix(in srgb, var(--color-fill-1) 6%, transparent));\n  color: color-mix(in srgb, var(--color-fill-1) 70%, var(--color-heading));\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-grid__cell--lead .ds-grid__cover {\n  flex: 1 1 auto;\n  min-height: calc(var(--size-cover) * 1.7);\n}\n.ds-grid__cover--2 {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--color-fill-2) 30%, transparent), color-mix(in srgb, var(--color-fill-2) 6%, transparent));\n  color: color-mix(in srgb, var(--color-fill-2) 70%, var(--color-heading));\n}\n.ds-grid__cover--3 {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--color-fill-3) 30%, transparent), color-mix(in srgb, var(--color-fill-3) 6%, transparent));\n  color: color-mix(in srgb, var(--color-fill-3) 70%, var(--color-heading));\n}\n.ds-grid__cover--4 {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--color-fill-4) 30%, transparent), color-mix(in srgb, var(--color-fill-4) 6%, transparent));\n  color: color-mix(in srgb, var(--color-fill-4) 70%, var(--color-heading));\n}\n.ds-grid__cover svg {\n  display: block;\n  width: auto;\n  max-width: 80%;\n  height: 70%;\n}\n.ds-grid__body {\n  padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-grid__kicker {\n  display: block;\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-grid__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: 0;\n  text-transform: var(--heading-transform);\n}\n.ds-grid__cell--lead .ds-grid__title {\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* stats: a band on the alternate surface; each figure stands beside its two-line label */\n.ds-statband {\n  margin-top: var(--space-7);\n  background: var(--color-surface-alt);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: var(--space-5) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n  padding-left: 0;\n  border-left: 0;\n}\n.ds-stat__figure {\n  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__label {\n  max-width: 14ch;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n\n/* list: the timeline; date and version at the left of a rule, a node on the rule, the entry 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-rail) minmax(0, 1fr);\n}\n.ds-list__meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-5) 0 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n  text-align: right;\n}\n.ds-list__body {\n  position: relative;\n  min-width: 0;\n  padding: 0 0 var(--space-6) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-list__body::before {\n  content: \"\";\n  position: absolute;\n  top: var(--space-2);\n  left: calc((var(--size-dot) + var(--border-width)) * -0.5);\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n  border-radius: 50%;\n}\n.ds-list__item:last-child .ds-list__body {\n  padding-bottom: var(--space-2);\n}\n.ds-list__title {\n  display: inline-block;\n  color: var(--color-heading);\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  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  max-width: 62ch;\n  margin: var(--space-2) 0 var(--space-3);\n  color: var(--color-text);\n}\n.ds-list__tags {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* callout: the one inverted block of a view */\n.ds-callout {\n  padding: var(--space-5);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n}\n.ds-callout__title {\n  margin: 0;\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  text-transform: var(--heading-transform);\n}\n.ds-callout__text {\n  margin: var(--space-2) 0 var(--space-4);\n  font-size: var(--text-ui);\n  opacity: 0.78;\n}\n\n/* page header: breadcrumb, title, a line of labels and one line of text over a rule; actions at the right */\n.ds-page-header {\n  padding: var(--space-7) 0 0;\n}\n.ds-page-header__inner {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-5);\n  padding-bottom: var(--space-5);\n  border-bottom: 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: var(--space-4) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin-top: var(--space-3);\n}\n.ds-page-header__text {\n  max-width: 64ch;\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.ds-page-header + .ds-wrap {\n  padding-top: var(--space-6);\n}\n\n/* tabs: a row of chips; the current one is filled */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-3);\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\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:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n  border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border-color: var(--color-border-strong);\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);\n}\n.ds-toolbar__note {\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* sidebar: a titled list of rows with a count at the right; the current row carries a dot */\n.ds-sidebar {\n  font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\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.06);\n  text-transform: uppercase;\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\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.is-current {\n  justify-content: flex-start;\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n.ds-sidebar__item.is-current::before {\n  content: \"\";\n  flex: 0 0 auto;\n  align-self: center;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n  border-radius: 50%;\n}\n.ds-sidebar__item.is-current > .ds-mono {\n  margin-left: auto;\n}\n.ds-sidebar + .ds-sidebar {\n  margin-top: var(--space-2);\n}\n\n/* diff: a code block whose added and removed lines are tinted */\n.ds-diff__line {\n  display: block;\n  margin: 0 calc(var(--space-4) * -1);\n  padding: 0 var(--space-4);\n}\n.ds-diff__line--add {\n  background: color-mix(in srgb, var(--color-success) 13%, transparent);\n  color: color-mix(in srgb, var(--color-success) 55%, var(--color-input-text));\n}\n.ds-diff__line--del {\n  background: color-mix(in srgb, var(--color-danger) 13%, transparent);\n  color: color-mix(in srgb, var(--color-danger) 55%, var(--color-input-text));\n}\n.ds-diff__line--hunk {\n  color: var(--color-text-muted);\n}\n\n/* pager: the release before and the release after, as two boxes */\n.ds-pager {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-pager__link {\n  display: block;\n  padding: var(--space-4);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-pager__link:hover,\n.ds-pager__link.is-hover {\n  background: var(--color-surface-alt);\n  border-color: var(--color-border-strong);\n}\n.ds-pager__link--next {\n  text-align: right;\n}\n.ds-pager__label {\n  display: block;\n  margin-bottom: var(--space-1);\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}\n.ds-avatars {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n}\n\n/* footer: one row on the secondary bar, then a mono line */\n.ds-footer {\n  margin-top: var(--space-8);\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-ui);\n  font-size: var(--text-ui);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-6);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) var(--space-5);\n  color: var(--color-heading);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1 1 auto;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-footer__line {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-3) var(--space-5) var(--space-4);\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}\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-base);\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 used everywhere: the mono label, the key cap, the status dot, the avatar */\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.06);\n  text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n  color: var(--color-accent-alt);\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: 50%;\n}\n.ds-dot--success {\n  background: var(--color-success);\n  box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-success) 22%, transparent);\n}\n.ds-dot--warning {\n  background: var(--color-warning);\n  box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-warning) 22%, transparent);\n}\n.ds-avatar {\n  display: inline-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(--color-surface-strong);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 50%;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\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\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-text-muted);\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: var(--border-width) var(--border-style) var(--color-border-muted);\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}\n\n/* code block: a title strip on the secondary bar, lines in the mono font 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}\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\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-heading);\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}\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}\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: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 */\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-ui);\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-heading);\n  font-weight: var(--weight-ui);\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-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  transition: var(--transition);\n}\n.ds-form__input--mono,\n.ds-form__textarea--mono {\n  font-family: var(--font-mono);\n}\n.ds-form__textarea {\n  min-height: calc(var(--space-7) * 2);\n  line-height: var(--line-body);\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/* badge: a small 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-ui);\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--new {\n  background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n  color: var(--color-accent-alt);\n  border-color: color-mix(in srgb, var(--color-accent-alt) 32%, transparent);\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-badge--mono {\n  font-family: var(--font-mono);\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n/* breadcrumb */\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-ui);\n  font-size: var(--text-ui);\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; the head is a strip of small 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.04);\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__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-size: var(--text-small);\n}\n\n/* panel: a hairline box on the surface 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}\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 > .ds-code {\n  border: 0;\n  border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\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-2) 0;\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}\n\n/* notice */\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) 22%, transparent);\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}\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 */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-pagination__link {\n  display: block;\n  min-width: calc(var(--space-6) - var(--space-1));\n  padding: var(--space-1) var(--space-2);\n  color: var(--color-link-quiet);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  line-height: var(--line-heading);\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  color: var(--color-heading);\n  border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\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}\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-4) var(--space-4) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\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}\n.ds-dialog__close {\n  color: var(--color-text-muted);\n  text-decoration: none;\n}\n.ds-dialog__close::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-base) * 0.75);\n  height: calc(var(--text-base) * 0.75);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  rotate: 45deg;\n  vertical-align: middle;\n}\n.ds-dialog__body {\n  padding: var(--space-2) var(--space-4) 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 */\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.ds-panel__body > .ds-linkrow {\n  margin-top: var(--space-4);\n}\n.ds-panel__body > .ds-badgerow + p {\n  margin-top: var(--space-3);\n}\n\n/* medium windows: the side column goes under, cards stand two across */\n@media (max-width: 980px) {\n  .ds-cols,\n  .ds-cols--even,\n  .ds-cols--menu,\n  .ds-hero__inner {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-6);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-grid__cell--lead {\n    grid-column: 1 / -1;\n    grid-row: auto;\n  }\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item,\n  .ds-stat__item:first-child {\n    padding: var(--space-4) var(--space-4) var(--space-4) 0;\n    border-left: 0;\n  }\n}\n\n/* narrow windows: one column; the links of the bar take a second row that scrolls sideways, dates sit over their entry */\n@media (max-width: 640px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-section {\n    padding-top: var(--space-6);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    gap: 0 var(--space-3);\n    padding: var(--space-2) var(--space-4) 0;\n  }\n  .ds-nav__actions {\n    margin-left: auto;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 0 0 100%;\n    gap: var(--space-4);\n    overflow-x: auto;\n  }\n  .ds-nav__link {\n    padding: var(--space-2) 0;\n  }\n  .ds-ticker__inner {\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-ticker__item--end {\n    margin-left: 0;\n  }\n  .ds-hero {\n    padding: var(--space-7) 0 var(--space-6);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-hero__form {\n    flex-direction: column;\n  }\n  .ds-release__body,\n  .ds-release__head,\n  .ds-release__foot {\n    padding-left: var(--space-4);\n    padding-right: var(--space-4);\n  }\n  .ds-release__version,\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-statband {\n    margin-top: var(--space-6);\n  }\n  .ds-stat__figure {\n    font-size: var(--text-h2);\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-list__meta {\n    flex-direction: row;\n    align-items: center;\n    padding: 0 0 var(--space-2) var(--space-5);\n    border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n    text-align: left;\n  }\n  .ds-page-header {\n    padding-top: var(--space-6);\n  }\n  .ds-page-header__inner {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-4);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-tabs {\n    flex-wrap: nowrap;\n    max-width: 100%;\n    overflow-x: auto;\n  }\n  .ds-table {\n    min-width: 58ch;\n  }\n  .ds-form__row {\n    flex-direction: column;\n  }\n  .ds-pager {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-pager__link--next {\n    text-align: left;\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-footer {\n    margin-top: var(--space-7);\n  }\n  .ds-footer__inner,\n  .ds-footer__line {\n    padding-left: var(--space-4);\n    padding-right: var(--space-4);\n  }\n}\n\n/* menu: a drop-down behind a button in the bar; on a phone it is the way to every view */\n.ds-menu {\n  position: relative;\n  display: inline-block;\n  flex: 0 0 auto;\n}\n.ds-menu__button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__button::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__button::after {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  margin-left: var(--space-1);\n  border-right: var(--border-width) var(--border-style) currentColor;\n  border-bottom: var(--border-width) var(--border-style) currentColor;\n  transform: rotate(45deg);\n}\n.ds-menu__button .ds-avatar {\n  margin: calc(var(--space-1) * -1) 0;\n}\n.ds-menu__button:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-menu[open] > .ds-menu__button {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 30;\n  min-width: calc(var(--size-mark) * 9);\n  margin: var(--space-1) 0 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--color-surface);\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  text-align: left;\n}\n.ds-menu__title {\n  padding: var(--space-2) var(--space-2) var(--space-1);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  white-space: nowrap;\n}\n.ds-menu__title--rule {\n  margin-top: var(--space-1);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-1) var(--space-2);\n  color: var(--color-text);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-surface);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border-left-color: var(--color-surface-strong);\n}\n\n/* tooltip: a hint that opens 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  margin-left: var(--space-1);\n  vertical-align: middle;\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-ui);\n  line-height: 1;\n  letter-spacing: 0;\n  text-transform: none;\n  cursor: help;\n}\n.ds-tooltip:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  z-index: 20;\n  display: none;\n  width: max-content;\n  max-width: calc(var(--size-mark) * 10);\n  margin-bottom: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-align: left;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n  display: block;\n}\n\n/* switch: an on and off setting 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  background: var(--color-accent);\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n  left: auto;\n  right: var(--border-width-strong);\n  background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n}\n.ds-switch__label {\n  font-size: var(--text-ui);\n}\n\n/* progress: a thin bar for a build, a rollout or a quota */\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);\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);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-menu__item--view[href=\"#latest\"],\n.ds-page:has(#latest:target) .ds-menu__item--view[href=\"#latest\"],\n.ds-page:has(#release:target) .ds-menu__item--view[href=\"#release\"],\n.ds-page:has(#archive:target) .ds-menu__item--view[href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-menu__item--view[href=\"#subscribe\"] {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border-left-color: var(--color-accent);\n  font-weight: var(--weight-bold);\n}\n@media (max-width: 640px) {\n  .ds-nav__actions > .ds-button--secondary {\n    display: none;\n  }\n}\n\n/* phones: the links spread across the bar; the table keeps its title column readable and scrolls */\n@media (max-width: 640px) {\n  .ds-nav__links {\n    justify-content: space-between;\n  }\n  .ds-table {\n    min-width: 76ch;\n  }\n  .ds-table tbody th {\n    min-width: 22ch;\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 changelog 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=\"#latest\">\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><a class=\"ds-nav__link\" href=\"#latest\">Changelog</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#release\">Release notes</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#archive\">Archive</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#subscribe\">Subscribe</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <details class=\"ds-menu\"><summary class=\"ds-menu__button\">Docs</summary><ul class=\"ds-menu__list\"><li class=\"ds-menu__title\">Changelog</li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#latest\">Latest</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#release\">Release notes</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#archive\">Archive</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#subscribe\">Subscribe</a></li><li class=\"ds-menu__title ds-menu__title--rule\">Developers</li><li><a class=\"ds-menu__item\" href=\"#release\">Upgrade guide</a></li><li><a class=\"ds-menu__item\" href=\"#archive\">Security notices</a></li><li><a class=\"ds-menu__item\" href=\"#subscribe\">RSS feed</a></li></ul></details>\n      <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#subscribe\">RSS</a>\n      <a class=\"ds-button ds-button--small\" href=\"#subscribe\">Get updates</a>\n    </div>\n  </div>\n  <div class=\"ds-ticker\">\n    <div class=\"ds-ticker__inner\">\n      <span class=\"ds-ticker__item\"><span class=\"ds-dot ds-dot--success\"></span> stable 4.2.0</span>\n      <span class=\"ds-ticker__item\"><span class=\"ds-dot ds-dot--warning\"></span> next 4.3.0-rc.1</span>\n      <span class=\"ds-ticker__item\">lts 3.9.14</span>\n      <span class=\"ds-ticker__item ds-ticker__item--end\">Released 3 days ago <a class=\"ds-ticker__link\" href=\"#release\">read the notes &rarr;</a></span>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"latest\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-hero__inner\">\n        <div>\n          <span class=\"ds-eyebrow ds-eyebrow--accent\">Changelog and engineering notes</span>\n          <h1 class=\"ds-hero__title\">What shipped, and why</h1>\n          <p class=\"ds-hero__lead\">Every release of the chronoskin query engine, with the reasoning behind it. A new version most Thursdays.</p>\n          <div class=\"ds-hero__form\">\n            <input class=\"ds-form__input is-focus\" type=\"email\" placeholder=\"you@company.dev\" aria-label=\"E-mail address\">\n            <a class=\"ds-button\" href=\"#subscribe\">Subscribe</a>\n          </div>\n          <p class=\"ds-hero__note\"><span>One e-mail per release, no marketing.</span><a class=\"ds-link ds-link--more\" href=\"#subscribe\">Or take the feed</a></p>\n        </div>\n        <div class=\"ds-release\" aria-label=\"The newest release\">\n          <div class=\"ds-release__head\"><span>latest release</span><span>13 Mar 2025</span></div>\n          <div class=\"ds-release__body\">\n            <p class=\"ds-release__version\">v4.2.0 <span class=\"ds-badge\">Minor</span></p>\n            <p class=\"ds-release__title\">Streaming query plans, and a planner that no longer guesses.</p>\n            <ul class=\"ds-tally\">\n              <li class=\"ds-tally__row ds-tally__row--add\"><span class=\"ds-tally__name\">added</span><span class=\"ds-tally__cells\"><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i></span><span class=\"ds-tally__count\">14</span></li>\n              <li class=\"ds-tally__row\"><span class=\"ds-tally__name\">changed</span><span class=\"ds-tally__cells\"><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i><i class=\"ds-tally__cell\"></i></span><span class=\"ds-tally__count\">9</span></li>\n              <li class=\"ds-tally__row ds-tally__row--fix\"><span class=\"ds-tally__name\">fixed</span><span class=\"ds-tally__cells\"><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell is-on\"></i><i class=\"ds-tally__cell\"></i></span><span class=\"ds-tally__count\">23</span></li>\n            </ul>\n          </div>\n          <div class=\"ds-release__foot\">\n            <span class=\"ds-mono\">$ chronoskin upgrade 4.2.0</span>\n            <a class=\"ds-button ds-button--secondary ds-button--small is-hover\" href=\"#release\">Release notes</a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-colhead\"><h2 class=\"ds-colhead__title\">From the engineering notes</h2><a class=\"ds-link ds-link--more\" href=\"#archive\">All posts</a></div>\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <a class=\"ds-grid__cell ds-grid__cell--lead\" href=\"#release\">\n        <div class=\"ds-grid__cover\" aria-hidden=\"true\"><svg viewBox=\"0 0 320 180\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M20 150h280\"/><path d=\"M40 150V96h36v54 M100 150V60h36v90 M160 150V110h36v40 M220 150V36h36v114\"/><path d=\"M58 84l60-36 60 50 60-74\" stroke-dasharray=\"4 5\"/><circle cx=\"58\" cy=\"84\" r=\"4\" fill=\"currentColor\"/><circle cx=\"118\" cy=\"48\" r=\"4\" fill=\"currentColor\"/><circle cx=\"178\" cy=\"98\" r=\"4\" fill=\"currentColor\"/><circle cx=\"238\" cy=\"24\" r=\"4\" fill=\"currentColor\"/></svg></div>\n        <div class=\"ds-grid__body\">\n          <span class=\"ds-grid__kicker\">Engineering / 9 min read</span>\n          <h3 class=\"ds-grid__title\">How the planner learned to stop guessing row counts</h3>\n          <p class=\"ds-grid__text\">We replaced fixed selectivity constants with sampled histograms. The slowest one percent of queries got four times faster, and two got slower. Here is why.</p>\n        </div>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#release\">\n        <div class=\"ds-grid__cover ds-grid__cover--2\" aria-hidden=\"true\"><svg viewBox=\"0 0 200 110\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M20 30h160 M20 55h160 M20 80h160\"/><path d=\"M60 30v50 M140 30v50\" stroke-dasharray=\"3 4\"/><circle cx=\"60\" cy=\"30\" r=\"5\" fill=\"currentColor\"/><circle cx=\"140\" cy=\"55\" r=\"5\" fill=\"currentColor\"/><circle cx=\"100\" cy=\"80\" r=\"5\"/></svg></div>\n        <div class=\"ds-grid__body\">\n          <span class=\"ds-grid__kicker\">Release / v4.2</span>\n          <h3 class=\"ds-grid__title\">Streaming query plans</h3>\n        </div>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#release\">\n        <div class=\"ds-grid__cover ds-grid__cover--3\" aria-hidden=\"true\"><svg viewBox=\"0 0 200 110\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M30 20h140v70H30z\"/><path d=\"M30 42h140 M76 42v48 M122 42v48\"/><path d=\"M42 31h30\" stroke-width=\"3\"/></svg></div>\n        <div class=\"ds-grid__body\">\n          <span class=\"ds-grid__kicker\">Guide / 5 min read</span>\n          <h3 class=\"ds-grid__title\">Moving from 3.9 without downtime</h3>\n        </div>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#release\">\n        <div class=\"ds-grid__cover ds-grid__cover--4\" aria-hidden=\"true\"><svg viewBox=\"0 0 200 110\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"100\" cy=\"55\" r=\"34\"/><path d=\"M100 30v25l16 12\"/><path d=\"M52 20l-12 12 M148 20l12 12\"/></svg></div>\n        <div class=\"ds-grid__body\">\n          <span class=\"ds-grid__kicker\">Postmortem / 12 Feb</span>\n          <h3 class=\"ds-grid__title\">Forty minutes of slow writes</h3>\n        </div>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#release\">\n        <div class=\"ds-grid__cover\" aria-hidden=\"true\"><svg viewBox=\"0 0 200 110\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M40 86l40-62 M88 86l40-62 M136 86l24-38\"/><path d=\"M30 86h140\"/><circle cx=\"80\" cy=\"24\" r=\"4\" fill=\"currentColor\"/><circle cx=\"128\" cy=\"24\" r=\"4\" fill=\"currentColor\"/></svg></div>\n        <div class=\"ds-grid__body\">\n          <span class=\"ds-grid__kicker\">Engineering / 6 min read</span>\n          <h3 class=\"ds-grid__title\">Vectorised joins, measured</h3>\n        </div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"ds-statband\">\n    <div class=\"ds-wrap\">\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">41</span><span class=\"ds-stat__label\">releases in the last twelve months</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">612</span><span class=\"ds-stat__label\">fixes shipped since version 4.0</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">137</span><span class=\"ds-stat__label\">people with a merged change</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">0</span><span class=\"ds-stat__label\">breaking changes in the 4.x line</span></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap ds-section\">\n    <div class=\"ds-cols\">\n      <div>\n        <div class=\"ds-colhead\"><h2 class=\"ds-colhead__title\">Recent releases</h2><span class=\"ds-mono\">newest first</span></div>\n        <ol class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__meta\"><span>13 Mar 2025</span><span class=\"ds-badge ds-badge--mono\">v4.2.0</span></div>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#release\">Streaming query plans</a>\n              <p class=\"ds-list__text\">Plans are sent to the client while the query runs, so a slow step shows up before the result does. The planner now samples instead of assuming.</p>\n              <div class=\"ds-list__tags\"><span class=\"ds-badge ds-badge--new\">New</span><span class=\"ds-badge ds-badge--quiet\">Planner</span><span>14 added, 23 fixed</span></div>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__meta\"><span>27 Feb 2025</span><span class=\"ds-badge ds-badge--outline ds-badge--mono\">v4.1.3</span></div>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#release\">Connection pool fixes</a>\n              <p class=\"ds-list__text\">Idle connections are closed after the timeout you set, not the default. Fixes a leak seen under bursty load.</p>\n              <div class=\"ds-list__tags\"><span class=\"ds-badge ds-badge--success\">Fix</span><span class=\"ds-badge ds-badge--quiet\">Driver</span><span>6 fixed</span></div>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__meta\"><span>13 Feb 2025</span><span class=\"ds-badge ds-badge--outline ds-badge--mono\">v4.1.2</span></div>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#release\">Slow writes on large batches</a>\n              <p class=\"ds-list__text\">A lock was held across the whole batch. It is now taken per page. Read the postmortem for the forty minutes this cost us.</p>\n              <div class=\"ds-list__tags\"><span class=\"ds-badge ds-badge--success\">Fix</span><span class=\"ds-badge ds-badge--quiet\">Storage</span><span>2 fixed</span></div>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__meta\"><span>30 Jan 2025</span><span class=\"ds-badge ds-badge--outline ds-badge--mono\">v4.1.0</span></div>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#release\">Vectorised hash joins</a>\n              <p class=\"ds-list__text\">Joins on integer keys run in batches of 1,024 rows. The <span class=\"ds-kbd\">join_batch</span> setting from 4.0 is deprecated and will be removed in 5.0.</p>\n              <div class=\"ds-list__tags\"><span class=\"ds-badge ds-badge--new\">New</span><span class=\"ds-badge ds-badge--warning\">Deprecation</span><span>8 added, 11 fixed</span></div>\n            </div>\n          </li>\n        </ol>\n        <a class=\"ds-button ds-button--secondary\" href=\"#archive\">All 41 releases</a>\n      </div>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <div class=\"ds-panel__head\"><h3 class=\"ds-panel__title\">Release lines <span class=\"ds-tooltip\" tabindex=\"0\">?<span class=\"ds-tooltip__tip\" role=\"tooltip\">A line gets fixes until its end of life date.</span></span></h3><span class=\"ds-mono\">supported</span></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__rows\">\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Stable</span><span class=\"ds-mono\">4.2.0</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Next</span><span class=\"ds-mono\">4.3.0-rc.1</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Long term</span><span class=\"ds-mono\">3.9.14</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">End of life</span><span class=\"ds-mono\">3.8, 30 Jun</span></li>\n            </ul>\n          </div>\n        </section>\n        <div class=\"ds-callout\">\n          <h3 class=\"ds-callout__title\">Still on 3.9?</h3>\n          <p class=\"ds-callout__text\">The upgrade guide walks through the four settings that changed and the one that is gone.</p>\n          <a class=\"ds-button ds-button--inverse ds-button--small\" href=\"#release\">Read the guide</a>\n        </div>\n        <div class=\"ds-code\">\n          <div class=\"ds-code__head\"><span class=\"ds-code__name\">feed</span><span class=\"ds-kbd\">atom</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-code__c\"># every release, as it ships</span>\n<span class=\"ds-code__k\">GET</span> /changelog/feed.xml\n<span class=\"ds-code__s\">200</span>  41 entries</pre>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"release\">\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-page-header__inner\">\n        <div class=\"ds-page-header__copy\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#latest\">Changelog</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">4.x</a></li>\n            <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">v4.2.0</li>\n          </ol>\n          <h1 class=\"ds-page-header__title\">Streaming query plans</h1>\n          <div class=\"ds-page-header__meta\"><span class=\"ds-badge ds-badge--mono\">v4.2.0</span><span class=\"ds-badge ds-badge--new\">New</span><span class=\"ds-mono\">13 Mar 2025, 46 commits</span></div>\n          <p class=\"ds-page-header__text\">The plan arrives while the query runs, and the planner samples your data instead of assuming its shape.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#subscribe\">Follow releases</a>\n          <a class=\"ds-button\" href=\"#release\">Upgrade guide</a>\n        </div>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>What changed in 4.2</h1>\n          <p class=\"ds-prose__lead\">Until now a plan was something you asked for after a query had been slow. From this release it is a stream you can watch.</p>\n          <p>Set <code>plan.stream</code> on a session and every step reports its row count and timing as it finishes. The driver exposes it as an iterator, so <strong>no polling is needed</strong>.</p>\n          <h2>Added</h2>\n          <ul>\n            <li>Streaming plans over the wire protocol, version 7 and later</li>\n            <li>Sampled histograms for every indexed column, refreshed nightly</li>\n            <li>A <code>--explain-live</code> flag in the command line client</li>\n          </ul>\n          <h3>Changed defaults</h3>\n          <p>The sample rate defaults to 1 percent. Tables under 10,000 rows are read in full.</p>\n        </div>\n\n        <div class=\"ds-code\">\n          <div class=\"ds-code__head\"><span class=\"ds-code__name\">chronoskin.toml</span><span>3 lines changed</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-diff__line ds-diff__line--hunk\">@@ planner @@</span><span class=\"ds-diff__line\">  [planner]</span><span class=\"ds-diff__line ds-diff__line--del\">- selectivity = 0.1</span><span class=\"ds-diff__line ds-diff__line--del\">- join_batch  = 256</span><span class=\"ds-diff__line ds-diff__line--add\">+ statistics  = \"sampled\"</span><span class=\"ds-diff__line ds-diff__line--add\">+ sample_rate = 0.01</span><span class=\"ds-diff__line\">  timeout     = \"30s\"</span><span class=\"ds-diff__line ds-diff__line--hunk\">@@ session @@</span><span class=\"ds-diff__line\">  [session]</span><span class=\"ds-diff__line ds-diff__line--add\">+ plan.stream = true</span></pre>\n        </div>\n\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Packages in this release</h2><span class=\"ds-mono\">size in kB</span></div>\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th scope=\"col\">Package</th><th scope=\"col\">From</th><th scope=\"col\">To</th><th scope=\"col\" class=\"ds-table__num\">Size</th><th scope=\"col\" class=\"ds-table__num\">Change</th></tr>\n              </thead>\n              <tbody>\n                <tr><th scope=\"row\">chronoskin-server</th><td class=\"ds-mono\">4.1.3</td><td class=\"ds-mono\">4.2.0</td><td class=\"ds-table__num\">18,420</td><td class=\"ds-table__num\">+212</td></tr>\n                <tr class=\"is-hover\"><th scope=\"row\">chronoskin-planner</th><td class=\"ds-mono\">4.1.3</td><td class=\"ds-mono\">4.2.0</td><td class=\"ds-table__num\">3,904</td><td class=\"ds-table__num\">+388</td></tr>\n                <tr><th scope=\"row\">chronoskin-cli</th><td class=\"ds-mono\">4.1.0</td><td class=\"ds-mono\">4.2.0</td><td class=\"ds-table__num\">6,118</td><td class=\"ds-table__num\">+41</td></tr>\n                <tr><th scope=\"row\">driver-node</th><td class=\"ds-mono\">7.3.1</td><td class=\"ds-mono\">7.4.0</td><td class=\"ds-table__num\">212</td><td class=\"ds-table__num\">+9</td></tr>\n                <tr><th scope=\"row\">driver-go</th><td class=\"ds-mono\">2.8.0</td><td class=\"ds-mono\">2.9.0</td><td class=\"ds-table__num\">1,046</td><td class=\"ds-table__num\">-17</td></tr>\n              </tbody>\n            </table>\n          </div>\n          <div class=\"ds-table__foot\"><span>Checksums are in the release archive.</span><a class=\"ds-link ds-link--more\" href=\"#archive\">Earlier versions</a></div>\n        </section>\n\n        <div class=\"ds-pager\">\n          <a class=\"ds-pager__link\" href=\"#release\"><span class=\"ds-pager__label\">&larr; older, v4.1.3</span>Connection pool fixes</a>\n          <a class=\"ds-pager__link ds-pager__link--next is-hover\" href=\"#release\"><span class=\"ds-pager__label\">newer, v4.3.0-rc.1 &rarr;</span>Partial indexes, preview</a>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">This release</h2><span class=\"ds-badge ds-badge--success\">Stable</span></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__rows\">\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Released</span><span class=\"ds-mono\">13 Mar 2025</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Commits</span><span class=\"ds-mono\">46</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Protocol</span><span class=\"ds-mono\">7</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Supported until</span><span class=\"ds-mono\">Mar 2026</span></li>\n            </ul>\n          </div>\n          <div class=\"ds-panel__body\"><div class=\"ds-progress\"><div class=\"ds-progress__head\"><span>Projects already on 4.2</span><span class=\"ds-progress__value\">64%</span></div><progress class=\"ds-progress__bar\" value=\"64\" max=\"100\">64%</progress></div></div>\n        </section>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">On this page</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\">What changed in 4.2</li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#release\">Added</a> <span class=\"ds-mono\">14</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#release\">Changed defaults</a> <span class=\"ds-mono\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#release\">Packages</a> <span class=\"ds-mono\">5</span></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Contributors</h2><span class=\"ds-mono\">11</span></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-avatars\"><span class=\"ds-avatar\">AO</span><span class=\"ds-avatar\">IS</span><span class=\"ds-avatar\">MK</span><span class=\"ds-avatar\">TR</span><span class=\"ds-avatar\">LV</span><span class=\"ds-avatar\">+6</span></div>\n            <p class=\"ds-linkrow\" data-component=\"links\">\n              <a class=\"ds-link\" href=\"#release\">Source</a>\n              <a class=\"ds-link is-visited\" href=\"#release\">Milestone</a>\n              <a class=\"ds-link is-hover\" href=\"#release\">Compare with 4.1.3</a>\n              <a class=\"ds-link is-active\" href=\"#release\">Report a regression</a>\n            </p>\n          </div>\n        </section>\n        <div class=\"ds-code\">\n          <div class=\"ds-code__head\"><span class=\"ds-code__name\">upgrade</span><span class=\"ds-kbd\">zsh</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-code__k\">$</span> chronoskin upgrade 4.2.0\n<span class=\"ds-code__c\">checking 4 settings</span>\n<span class=\"ds-code__s\">ok</span>  no manual steps\n<span class=\"ds-code__k\">$</span> chronoskin restart --rolling</pre>\n        </div>\n        <div class=\"ds-callout\">\n          <h2 class=\"ds-callout__title\">Running a release candidate?</h2>\n          <p class=\"ds-callout__text\">4.3.0-rc.1 already has everything on this page, plus partial indexes behind a flag.</p>\n          <a class=\"ds-button ds-button--inverse ds-button--small\" href=\"#archive\">See the next line</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"archive\">\n  <header class=\"ds-page-header\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-page-header__inner\">\n        <div class=\"ds-page-header__copy\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#latest\">Changelog</a></li>\n            <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Archive</li>\n          </ol>\n          <h1 class=\"ds-page-header__title\">Every release</h1>\n          <p class=\"ds-page-header__text\">All 41 versions of the last twelve months, with what each one added, changed and fixed.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#subscribe\">Subscribe</a>\n        </div>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-cols ds-cols--menu\">\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Release lines</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\">4.x <span class=\"ds-mono\">18</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">3.9 long term</a> <span class=\"ds-mono\">14</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">3.8</a> <span class=\"ds-mono\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">Drivers</a> <span class=\"ds-mono\">27</span></li>\n          </ul>\n        </aside>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">By year</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">2025</a> <span class=\"ds-mono\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">2024</a> <span class=\"ds-mono\">38</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">2023</a> <span class=\"ds-mono\">31</span></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Labels</h2></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-badgerow\" data-component=\"badge\">\n              <span class=\"ds-badge\">Minor</span>\n              <span class=\"ds-badge ds-badge--new\">New</span>\n              <span class=\"ds-badge ds-badge--quiet\">Planner</span>\n              <span class=\"ds-badge ds-badge--success\">Fix</span>\n              <span class=\"ds-badge ds-badge--warning\">Deprecation</span>\n              <span class=\"ds-badge ds-badge--danger\">Breaking</span>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#archive\">All <span class=\"ds-mono\">18</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#archive\">Minor</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#archive\">Patch</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#archive\">Security</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#archive\">Posts</a></li>\n          </ul>\n          <span class=\"ds-toolbar__note\">Showing the 4.x line</span>\n        </div>\n        <section class=\"ds-panel\">\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\">\n              <thead>\n                <tr><th scope=\"col\">Version</th><th scope=\"col\">Title</th><th scope=\"col\">Kind</th><th scope=\"col\">Date</th><th scope=\"col\" class=\"ds-table__num\">Changes</th></tr>\n              </thead>\n              <tbody>\n                <tr><td class=\"ds-mono\">v4.2.0</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Streaming query plans</a></th><td><span class=\"ds-badge\">Minor</span></td><td class=\"ds-mono\">13 Mar 2025</td><td class=\"ds-table__num\">46</td></tr>\n                <tr><td class=\"ds-mono\">v4.1.3</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Connection pool fixes</a></th><td><span class=\"ds-badge ds-badge--success\">Fix</span></td><td class=\"ds-mono\">27 Feb 2025</td><td class=\"ds-table__num\">6</td></tr>\n                <tr class=\"is-hover\"><td class=\"ds-mono\">v4.1.2</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Slow writes on large batches</a></th><td><span class=\"ds-badge ds-badge--success\">Fix</span></td><td class=\"ds-mono\">13 Feb 2025</td><td class=\"ds-table__num\">2</td></tr>\n                <tr><td class=\"ds-mono\">v4.1.1</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Timezone names in exports</a></th><td><span class=\"ds-badge ds-badge--success\">Fix</span></td><td class=\"ds-mono\">6 Feb 2025</td><td class=\"ds-table__num\">4</td></tr>\n                <tr><td class=\"ds-mono\">v4.1.0</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Vectorised hash joins</a></th><td><span class=\"ds-badge\">Minor</span></td><td class=\"ds-mono\">30 Jan 2025</td><td class=\"ds-table__num\">31</td></tr>\n                <tr><td class=\"ds-mono\">v4.0.4</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Replica lag reporting</a></th><td><span class=\"ds-badge ds-badge--warning\">Deprecation</span></td><td class=\"ds-mono\">16 Jan 2025</td><td class=\"ds-table__num\">12</td></tr>\n                <tr><td class=\"ds-mono\">v4.0.3</td><th scope=\"row\"><a class=\"ds-link\" href=\"#release\">Index builds resume after restart</a></th><td><span class=\"ds-badge ds-badge--success\">Fix</span></td><td class=\"ds-mono\">9 Jan 2025</td><td class=\"ds-table__num\">7</td></tr>\n              </tbody>\n            </table>\n          </div>\n          <div class=\"ds-table__foot\">\n            <span>7 of 18 releases</span>\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li><a class=\"ds-pagination__link is-disabled\" href=\"#archive\">Newer</a></li>\n              <li><a class=\"ds-pagination__link is-current\" href=\"#archive\">1</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">2</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">3</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">Older</a></li>\n            </ul>\n          </div>\n        </section>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <svg class=\"ds-empty__icon\" viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M16 4l11 5v7c0 6-4.5 10-11 12C9.5 26 5 22 5 16V9z\"/><path d=\"M11 16l4 4 6-7\"/></svg>\n          <h2 class=\"ds-empty__title\">No security releases in the 4.x line</h2>\n          <p class=\"ds-empty__text\">When one ships it is listed here first and sent to every subscriber the same hour.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#subscribe\">Get security notices</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"subscribe\">\n  <header class=\"ds-page-header\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-page-header__inner\">\n        <div class=\"ds-page-header__copy\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#latest\">Changelog</a></li>\n            <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Subscribe</li>\n          </ol>\n          <h1 class=\"ds-page-header__title\">Follow the releases</h1>\n          <p class=\"ds-page-header__text\">By e-mail or by feed. Choose what you hear about and how often.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#archive\">Browse the archive</a>\n        </div>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-cols ds-cols--even\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Security releases are always sent.</span> They ignore the frequency you pick below.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">We could not confirm that address.</span> Check it and send the form again.</p>\n        </div>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">By e-mail</h2><span class=\"ds-mono\">one click to leave</span></div>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#subscribe\">\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__field\"><span class=\"ds-form__label\">Name</span><input class=\"ds-form__input\" type=\"text\" value=\"Ada Okonkwo\"></label>\n                <label class=\"ds-form__field\"><span class=\"ds-form__label\">E-mail</span><input class=\"ds-form__input is-error\" type=\"email\" value=\"ada@northwind\"><span class=\"ds-form__error\">This address has no top-level domain.</span></label>\n              </div>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">How often</span>\n                <select class=\"ds-form__select\"><option>Every release</option><option>Minor and major releases only</option><option>A digest on the first of the month</option></select>\n              </label>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Engineering notes and postmortems</span></label>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Release candidates of the next line</span></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Only when a release mentions</span><textarea class=\"ds-form__textarea ds-form__textarea--mono\" rows=\"3\" placeholder=\"planner&#10;driver-node\"></textarea><span class=\"ds-form__hint\">One word per line. Leave empty to hear about everything.</span></label>\n              <div class=\"ds-form__actions\">\n                <button class=\"ds-button\" type=\"submit\">Subscribe</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#latest\">Cancel</a>\n              </div>\n            </form>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-code\">\n          <div class=\"ds-code__head\"><span class=\"ds-code__name\">Feeds</span><span class=\"ds-kbd\">xml</span><span class=\"ds-kbd\">json</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-code__c\"># all releases</span>\n/changelog/feed.xml\n<span class=\"ds-code__c\"># one release line</span>\n/changelog/4.x/feed.xml\n<span class=\"ds-code__c\"># security releases only, as JSON</span>\n/changelog/security.json\n<span class=\"ds-code__k\">$</span> curl -s chronoskin.dev/changelog/latest <span class=\"ds-code__s\">| jq .version</span></pre>\n        </div>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Your subscription</h2><span class=\"ds-badge ds-badge--warning\">Unconfirmed</span></div>\n          <div class=\"ds-panel__body\">\n            <p>Every release and the engineering notes, to one address. The last e-mail was v4.2.0 on 13 March.</p>\n            <div class=\"ds-buttonrow\" data-component=\"buttons\">\n              <a class=\"ds-button\" href=\"#subscribe\">Send again</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#subscribe\">Preview an e-mail</a>\n              <button class=\"ds-button\" type=\"button\" disabled>Confirmed</button>\n              <a class=\"ds-button ds-button--danger\" href=\"#subscribe\">Unsubscribe</a>\n            </div>\n          </div>\n        </section>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"dialog-title\">\n            <div class=\"ds-dialog__head\">\n              <h2 class=\"ds-dialog__title\" id=\"dialog-title\">Unsubscribe from everything?</h2>\n              <a class=\"ds-dialog__close\" href=\"#subscribe\" aria-label=\"Close\"></a>\n            </div>\n            <div class=\"ds-dialog__body\">\n              <p>You will stop getting releases and notes. Security releases stop too.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#subscribe\">Keep me subscribed</a>\n              <a class=\"ds-button ds-button--danger\" href=\"#subscribe\">Unsubscribe</a>\n            </div>\n          </div>\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    <a class=\"ds-brand\" href=\"#latest\">\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-footer__links\">\n      <li><a class=\"ds-footer__link\" href=\"#latest\">Changelog</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#archive\">Archive</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#release\">Upgrade guide</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#subscribe\">Feeds</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#subscribe\">Security notices</a></li>\n    </ul>\n    <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#subscribe\">Subscribe</a>\n  </div>\n  <div class=\"ds-footer__line\">\n    <span>&copy; 2025 chronoskin</span>\n    <span>stable 4.2.0, built 13 Mar 2025</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.dev-dark.blog.s04.p02.t03.u05\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"dev-dark\",\n    \"years\": [\n      2019,\n      2026\n    ]\n  },\n  \"archetype\": \"blog\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-dd-4235\",\n  \"short\": \"v1-dd-4235\"\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: \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: \"IBM Plex Serif\", \"Source Serif 4\", Georgia, \"Times New Roman\", serif;\n  --font-ui: \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: \"IBM Plex Mono\", \"SF Mono\", Monaco, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 14px;\n  --text-large: 18px;\n  --text-display: 60px;\n  --text-h1: 40px;\n  --text-h2: 26px;\n  --text-h3: 17px;\n  --line-body: 1.65;\n  --line-heading: 1.2;\n  --line-display: 1.08;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 500;\n  --heading-transform: none;\n  --heading-tracking: -0.2px;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: 3px 3px 0 var(--color-border-strong);\n  --shadow-control-pressed: inset 0 0 0 2px var(--color-shadow);\n  --shadow-dialog: 10px 10px 0 var(--color-surface-strong);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--color-border) 40%, transparent) 9px 10px), 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) 70%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px dashed var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
