{
  "id": "v1-dd-4356",
  "long_id": "v1.dev-dark.blog.s04.p03.t05.u06",
  "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-4356",
  "preview_url": "https://chrono.skin/s/v1-dd-4356/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` sit on the page, on `--fill-panel`, `--color-surface-alt` (a hovered row, the current sidebar row, the dialog) and `--color-surface-strong` (the current tab, key caps, quiet badges). `--color-bar-text` sits on `--fill-bar` (both rows of the bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (table heads, the sidebar title, code heads, the footer), with `--color-heading` for the brand there. `--color-input-text` sits on `--fill-input` (form controls and code). `--color-inverse-text` sits on `--fill-inverse`, used once per view, for `.ds-callout`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They colour the sparkline of a tile and the lines of the chart (78% or 82% of the fill mixed into `--color-heading`), rule the top of a region cell at full strength and tint it at 13%; `--color-fill-1` is the glow in the corner of the banner.\n- `--color-accent` marks the current section and fills the default badge through `--fill-accent`. `--color-accent-alt` is a line and text colour: the mono label of the banner, the rule of the page header, the line under the current tab, keywords in code.\n- `--color-success`, `--color-warning` and `--color-danger` carry the meaning of the page and are used at full strength only for things without text on them: the daily bars, dots, meters, the knob of a switch. With text they are a 12% tint with a 32% hairline and the colour as text. The destructive button is a tint too.\n- Borders: `--color-border` on boxes, bars and between cells, `--color-border-strong` on the banner, secondary buttons, grid lines of the chart and the dialog, `--color-border-muted` between rows inside a box. All `--border-width`; `--border-width-strong` is the line of the current section and tab, the top of a region cell and the rule of the page header.\n- Type. `--font-mono` for every figure, date, id and label; body, headings and controls use their own tokens. `--text-base` 14px at `--line-body` 1.7; `--text-ui` 13px for navigation, buttons, forms, tables, rows and rules; `--text-small` 12px for badges, mono labels, facts and legends; `--text-large` 15px for the banner's lead. `--text-display` 44px is the verdict only; `--text-h1` 26px page titles and tile figures; `--text-h2` 18px section heads and region figures; `--text-h3` 13px panel and cell titles. Headings take `--heading-transform` and `--heading-tracking`.\n- Uppercase comes from `--heading-transform` on headings and from mono labels (`.ds-stat__label`, table heads, sidebar titles, region codes), tracked by 6% of the font size. Links in running text and tables follow `--link-decoration`; quiet links are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` for buttons, inputs and the tabs, `--radius-panel` for panels, tiles, the list, notices and the callout, `--radius-page` for the banner, region cells and the dialog box, `--radius-pill` for badges, meters and switches. `--shadow-panel` is on panels, tiles, cells and the list, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the banner and the dialog.\n- One-off values written with `calc()` and `color-mix()`: the banner glow (20% of a fill), region tints (13%), line colours (78% and 82%), status tints (12%, 14%, 22%, 32%, 40%, 55%), the wash of the current section (9%), the notice border (22% and 40%), the corners of a daily bar (30% of `--radius-control`), the gap between bars (half of `--space-1`), mono label tracking. Navigation cells are at `opacity` 0.6 until current, daily bars at 0.86, callout text at 0.78. 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 >= 12px`: badges, mono labels and facts are the smallest text.\n- `font-size <= 44px`: the verdict of the banner is the largest text.\n- `font-weight <= 700`: headings are bold; nothing is heavier.\n- `font-families <= 1`: one monospace family for everything.\n- `line-height <= 1.7`: body text is set at 1.7.\n- `uppercase-text <= 15%`: headings and mono labels are uppercase, running text never.\n- `letter-spacing <= 1px`: labels are spaced by 6% of their size, headings by 0.4px.\n- `border-width <= 2px`: rules and outlines are 1px hairlines; 2px is the rule of the recommended plan and the ring of a slider thumb.\n- `border-radius <= 28px`: 14px on controls, 20px on panels, 28px on the largest boxes; pills are shapes.\n- `box-shadow-blur <= 60px`: only the box of plans and the dialog cast a wide shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block 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.p03.t05.u06\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"dev-dark\",\n    \"years\": [\n      2019,\n      2026\n    ]\n  },\n  \"archetype\": \"blog\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-dd-4356\",\n  \"short\": \"v1-dd-4356\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #151312;\n  --color-canvas: #151312;\n  --color-surface: #1c1a18;\n  --color-surface-alt: #24211e;\n  --color-surface-strong: #302c28;\n  --color-bar: #151312;\n  --color-bar-text: #e8e2da;\n  --color-bar-alt: #1a1816;\n  --color-bar-alt-text: #a39b90;\n  --color-inverse: #f2ede6;\n  --color-inverse-text: #151312;\n  --color-text: #cfc8be;\n  --color-text-muted: #91897e;\n  --color-heading: #f6f1ea;\n  --color-heading-alt: #e8e2da;\n  --color-link: #ff8a4c;\n  --color-link-quiet: #a39b90;\n  --color-link-visited: #cf9373;\n  --color-link-hover: #ffb38a;\n  --color-link-active: #f35815;\n  --color-border: rgb(255 240 220 / 0.1);\n  --color-border-strong: rgb(255 240 220 / 0.2);\n  --color-border-muted: rgb(255 240 220 / 0.06);\n  --color-accent: #f35815;\n  --color-accent-text: #170a03;\n  --color-accent-alt: #ffd166;\n  --color-fill-1: #f35815;\n  --color-fill-2: #a05fcf;\n  --color-fill-3: #ffd166;\n  --color-fill-4: #6e665c;\n  --color-button: #f35815;\n  --color-button-text: #170a03;\n  --color-button-hover-text: #170a03;\n  --color-button-secondary: #24211e;\n  --color-button-secondary-text: #f6f1ea;\n  --color-input: #100e0d;\n  --color-input-text: #f6f1ea;\n  --color-input-border: rgb(255 240 220 / 0.14);\n  --color-disabled: #24211e;\n  --color-disabled-text: #6e665c;\n  --color-danger: #f2557c;\n  --color-danger-surface: #25141a;\n  --color-success: #7ccf8a;\n  --color-warning: #ffd166;\n  --color-notice: #271c12;\n  --color-notice-text: #ffcfa8;\n  --color-focus: #ff8a4c;\n  --color-shadow: rgb(0 0 0 / 0.45);\n  --color-overlay: rgb(12 10 9 / 0.7);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --font-heading: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --font-ui: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --font-mono: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 14px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 15px;\n  --text-display: 44px;\n  --text-h1: 26px;\n  --text-h2: 18px;\n  --text-h3: 13px;\n  --line-body: 1.7;\n  --line-heading: 1.35;\n  --line-display: 1.2;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.4px;\n  --display-tracking: -0.8px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 14px;\n  --radius-panel: 20px;\n  --radius-pill: 9999px;\n  --radius-page: 28px;\n  --shadow-panel: 0 1px 2px var(--color-shadow), 0 12px 28px -10px var(--color-shadow);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 2px 6px var(--color-shadow);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 6px 16px var(--color-shadow);\n  --shadow-control-pressed: inset 0 3px 6px var(--color-shadow);\n  --shadow-dialog: 0 2px 6px var(--color-shadow), 0 24px 60px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: radial-gradient(ellipse 60% 420px at 88% -40px, color-mix(in srgb, var(--color-fill-1) 8%, transparent), transparent) no-repeat, radial-gradient(ellipse 50% 380px at 0 0, color-mix(in srgb, var(--color-fill-2) 7%, transparent), transparent) no-repeat, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 86%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 55%, transparent);\n  --transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}
