{ "id": "v1-bg-1211", "long_id": "v1.bento-grids.landing.s01.p02.t01.u01", "name": "Bento grid landing, 2024", "era": { "slug": "bento-grids", "code": "bg", "name": "Bento grids", "years": [ 2022, 2026 ], "description": "Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A dark product landing page whose features are laid out as a bento: a grid of rounded cells of unequal column and row spans, each cell holding exactly one feature with a small piece of interface drawn inside it. The page is near-black, the cells are one step lighter with a 1px translucent white hairline and a faint top highlight, text is a neutral grotesque at 16px with 14px grey captions, and a single periwinkle accent carries buttons and links. The look was common on developer-tool, productivity and design-tool marketing sites from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-1211", "preview_url": "https://chrono.skin/s/v1-bg-1211/specimen.html", "files": { "STYLE.md": "# Bento grid landing, 2024\n\n## Summary\n\nA dark product landing page whose features are laid out as a bento: a grid of rounded cells of unequal column and row spans, each cell holding exactly one feature with a small piece of interface drawn inside it. The page is near-black, the cells are one step lighter with a 1px translucent white hairline and a faint top highlight, text is a neutral grotesque at 16px with 14px grey captions, and a single periwinkle accent carries buttons and links. The look was common on developer-tool, productivity and design-tool marketing sites from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1200px, designed at a 1440px viewport. The page background, the navigation bar hairline and the footer hairline run the full width; all content stays inside the column, padded by `--space-5` on narrow screens. Running text is capped at `--size-measure` (640px).\n- Order of a page: `.ds-nav` (sticky, `--size-nav` 64px tall) and `.ds-footer` are written once; between them sits one view at a time. The home view is the `.ds-hero` (centred, no box) and a `.ds-section` with a centred `.ds-section__head` over the feature `.ds-grid`, closed by the `--full` `--accent` cell.\n- The grid has four equal columns. Cells take 1 column by default, 2 with `--wide`, 3 with `--wider`, all 4 with `--full`, and two rows with `--tall`. A row must mix spans: 1-2-1, 2-1-1 or 1-1-2, never four equal cells in every row. Rows of a feature grid are at least `--size-row` (300px) tall; `.ds-grid--auto` lets rows follow their content.\n- Cells never touch. The gap between cells is `--space-gap` (16px) in both directions and the padding inside a cell is `--space-cell` (32px).\n- Spacing scale: `--space-1` 4px (pill padding, tab inset), `--space-2` 8px (icon to label, button gap, label to control), `--space-3` 12px (control padding, table cell padding, panel gap), `--space-4` 16px (form gap, list row padding, icon to title), `--space-5` 24px (page gutter, stack gap inside a cell, panel padding, title to lead in the hero), `--space-6` 32px (nav gap, hero lead to buttons), `--space-7` 48px (section head to grid), `--space-8` 64px (footer padding, dialog stage padding), `--space-9` 96px (space under each section and under the hero), `--space-10` 128px (space above the hero title).\n- Controls are `--size-control` (38px) tall, `--size-control-large` (48px) in the hero; icon tiles are `--size-icon` (40px) with a `--size-glyph` (20px) line icon.\n- Inner pages (everything below the home page: a list, a record, a form, a guide) have no hero and no centred section head. A `.ds-section--page` starts `--space-7` under the navigation bar with the `.ds-breadcrumb`; under it comes the left-aligned `.ds-page-header` (30px title, one grey line, buttons at the right on the title's baseline), `--space-6` above the content. Then, each optional and in this order: a `.ds-stats` row of four small cells; a `.ds-toolbar` with the `.ds-tabs` pill at the left and a badge or filter at the right, `--space-6` under the stats and `--space-gap` above the grid; and one `.ds-grid--auto` in the same four columns as the home page. There is no fixed side column on inner pages: the working table takes a `--wider` cell with a one-column cell (a list or a `.ds-sidebar`) beside it, forms take a `--wider` cell with a one-column note beside it, messages and an empty state take `--wide` cells in pairs, a dialog stage takes `--full`. Everything stays in the 1200px column and keeps the 16px gap.\n- Views: `home` is the landing page (hero, the eight feature cells, the call to action); `releases` is the week's list (stats, tabs, the table with pagination, the changelog list, notices and the empty state for next week); `room` is one release (its checks, the action buttons, the log, the confirmation dialog on its stage, the room's rules in panels and the closing actions); `open` is the form that opens a room, with a short note beside it; `docs` is the guide (section menu, prose, the label legend, links and a terminal sample). The navigation marks Product, Releases, Rooms or Docs; the form marks Releases.\n- Between 960px and 1240px the four columns are narrow, so the 60px figure of `.ds-stat--display` steps down to `--text-h1`.\n- Below 960px the grid and the stats row drop to two columns and the navigation links move to a second line of the bar, scrolling sideways if they must; below 600px the grid is one column, spans are ignored, a split cell stacks, cell padding drops to `--space-5`, the page header's buttons go under its text and the second navigation button (`.ds-nav__extra`) hides. Below 600px a table hides the columns marked `.ds-table__extra` and scrolls sideways inside `.ds-table__scroll` if it still does not fit; a row's first cell holds a `.ds-table__link` to its detail view.\n- On a phone (600px and below) `.ds-nav__links` and the second navigation button are not shown and `.ds-nav__fold` takes their place beside the `.ds-brand` and the primary button: a `
` that is also a `.ds-menu--end`, whose `.ds-nav__toggle` summary is a small secondary \"Menu\" button and whose list holds every view as a row, the current one on `--color-surface-strong` in bold with a `--color-link` dot. The Product drop-down is not shown on the bar and its items are not in the folded list; the list is never wider than the screen minus the page padding. Below 960px a tooltip opens as a full row under its 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\n- One sans family everywhere: `--font-body`, `--font-heading` and `--font-ui` are the same Inter-first stack. The references used Inter or commercial grotesques of the same shape (a geometric sans and a custom UI sans); Inter with system fallbacks is the substitute. `--font-mono` is only for code.\n- Sizes: `--text-base` 16px at `--line-body` 1.5; `--text-small` and `--text-ui` 14px (captions in cells, navigation, buttons, table, form); `--text-large` 18px (hero lead, cell titles); `--text-display` 60px at `--line-display` 1.13 (hero title, big stat number); `--text-h1` 40px, `--text-h2` 30px, `--text-h3` 20px at `--line-heading` 1.2. The smallest text is 12px, written as `calc(var(--text-small) * 0.857)` because the vocabulary has no token for it: badges, hints, meta, the eyebrow. Code in a cell is 12.4px, `calc(var(--text-small) * 0.886)`.\n- Weights: `--weight-body` 400, `--weight-ui` 500, `--weight-heading` and `--weight-bold` 600, `--weight-display` 700. No tracking on headings. The only uppercase text is the 12px `.ds-section__eyebrow`, tracked by `calc(var(--text-small) * 0.2)`.\n- `--color-page` and `--color-canvas` `#111113`: the page. `--color-surface` `#1d1c20`: cells, lit by `--fill-panel` (a 5% lighter to 12% darker vertical gradient). `--color-surface-alt` `#29292b`: panels, dialog, current nav and sidebar item, secondary button. `--color-surface-strong` `#323238`: current tab and page, neutral badges, chart bars, inline code.\n- `--color-text` `#e0e0e0` body; `--color-text-muted` `#a9a9a9` for every caption, lead and meta line; `--color-heading` white; `--color-heading-alt` `#eeeeee` for panel, sidebar and footer titles.\n- `--color-accent` / `--color-button` `#5e69d1` periwinkle: primary button, accent badge, the highlighted chart bar, the closing call-to-action cell. `--color-link` `#768cff` is its lighter step for links, icons, the eyebrow and focus. `--color-accent-alt` `#3ecf8e` green marks \"new\", passed checks and switched-on toggles only.\n- Status colours: `--color-success` `#3ecf8e` (the same green as `--color-accent-alt`, the only green measured in the references), `--color-warning` `#f7be2b` (the one amber measured) and `--color-danger` `#f24822`. They appear only as small text, a dot, or a 14% tint with a 30% hairline on a status badge, never as a filled block.\n- `--color-fill-1` to `--color-fill-4` are dark tints (navy, green, plum, grey) for feature cells. Fills 1 to 3 are used as the top of a gradient that fades to `--color-surface`; fill 4 is flat. At most half the cells of a grid are tinted.\n- Borders: `--color-border` (white at 8%) on every cell, panel and bar; `--color-border-strong` (white at 16%) on secondary buttons, the dialog and the empty cell; `--color-border-muted` `#2b292e` for rows inside a box. All are `--border-width` 1px; `--border-width-strong` 2px is the focus ring only.\n- Links have no underline (`--link-decoration: none`) and gain one on hover; quiet links (`--color-link-quiet`) in navigation, sidebar and footer turn white on hover and never underline.\n- Radii: `--radius-page` 24px for grid cells, `--radius-panel` 12px for panels, tables, notices, code blocks and the dialog, `--radius-control` 8px for buttons, inputs, icon tiles and nav items (chart bars and inline code take half of it), `--radius-pill` for badges, tabs and switches.\n- Shadows: `--shadow-panel` is a 1px inset white highlight on the top edge plus a soft 12px drop; `--shadow-dialog` is the same idea with a 25px blur. Buttons have a 1px lighter hairline and a 2px shadow. No text shadow.\n- The hero glow and the `--glow` cell are a radial fade from `--color-fill-1` to transparent, so a glow is always the palette's own tint (navy here) and a palette with neutral fills simply has none; the accent colour is never used for it.\n- One-off mixes written in `components.css` because no token exists: the button hairline (25% button text in the button colour), the `--new` and status badges (the colour at 14% and 30% over transparent), the danger button's hairline (danger at 45%) and hover fill (20% danger in `--color-danger-surface`), notice borders.\n- `--color-notice` `#1a3045` with `--color-notice-text` `#bae6fd` is the information notice; `--color-danger` `#f24822` on `--color-danger-surface` `#201818` is the error. `--color-inverse` white is used only for the button on the accent cell.\n- `--transition` is a 0.15s colour fade on links, buttons and inputs. Nothing moves or scales.\n\n## Components\n\n- `.ds-page` on ``: dark page, sets the family and 16px/1.5 text. `.ds-page__inner` is the 1200px column.\n- `.ds-nav`: sticky translucent bar with a bottom hairline. `.ds-nav__inner` holds the `.ds-brand`, `.ds-nav__links` of `.ds-nav__link` (the current view's link is a pill filled with `--color-surface-alt` at `--radius-control`; `is-current` does the same by hand) and `.ds-nav__actions` with two `.ds-button--small`.\n- `.ds-nav__fold`: on a phone the navigation links fold into a `
` that is also a `.ds-menu --end`; its `.ds-nav__toggle` summary is a small secondary button and the list names every view, the current one marked on `--color-surface-strong` with a `--color-link` dot. Use it only at 600px and below.\n- `.ds-brand`: the site's mark and name, at the left of the navigation bar. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, a 1px hairline, `--radius-control`, `--shadow-control`), so it takes on every palette and surface; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in the heading family at 18px, with the heading weight, tracking and transform, in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-hero`: centred introduction on the bare page with one glow. A `.ds-badge` announcement, `.ds-hero__title` (60px, one phrase in `.ds-hero__title-accent`), `.ds-hero__lead`, `.ds-hero__actions` with two large buttons, `.ds-hero__note`.\n- `.ds-section`: one stretch of page; `--page` is the body of an inner view (no centred head, `--space-7` above the breadcrumb); `.ds-section__head` centres `.ds-section__eyebrow`, `.ds-section__title` and `.ds-section__lead` above a grid.\n- `.ds-grid`: the bento. Children are `.ds-grid__cell` with span variants `--wide`, `--wider`, `--full`, `--tall`; alignment variants `--end` (copy at the bottom), `--center`, `--split` (copy left in `.ds-grid__copy`, visual right), `--stack` (24px between children); fill variants `--fill-1` to `--fill-4`, `--glow`, `--accent` (the call to action), `--bare` (outline only). Inside: `.ds-grid__icon` with a `.ds-grid__glyph`, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__visual` (pushed to the bottom; `--top` for the reverse) and `.ds-grid__actions`. `.ds-grid--auto` is for cells that hold components instead of features.\n- Cell visuals: `.ds-chart` of `.ds-chart__bar` (`--2` to `--5` set the height, `is-current` the accent), `.ds-code` with `.ds-code__key` and `.ds-code__str`, `.ds-checks` of `.ds-checks__item` with `.ds-checks__mark`, `.ds-chips` (a wrap of badges), `.ds-rows` of `.ds-rows__item` with a `.ds-switch` (`is-on`).\n- `.ds-page-header`: the head of an inner page, left-aligned on the bare page with no box. `.ds-page-header__copy` holds `.ds-page-header__title` (an `h1` at `--text-h2`, 30px) and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right with at most one primary and one secondary button. Put a `.ds-breadcrumb` above it. Never use it together with a `.ds-hero`.\n- `.ds-stat`: one summary figure: `.ds-stat__label` (14px grey) over `.ds-stat__value` (40px, weight 700, tabular figures, with an optional grey `.ds-stat__unit`) over an optional 12px `.ds-stat__note` (`--success`, `--warning`, `--danger` colour the note). `.ds-stats` is the row: a four-column grid with the 16px gap in which each `.ds-stat` becomes a small cell with the grid cell's fill, hairline, 24px corners and shadow and `--space-5` padding; use three or four. `.ds-stat--display` raises the value to 60px for a single figure inside a feature cell on the home page.\n- `.ds-prose`: long-form text in a wide cell; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for grey navigation links. `.ds-links` lays several out in a row.\n- `.ds-button`: periwinkle primary. `--secondary` is grey with a hairline, `--danger` is the destructive action (red text on `--color-danger-surface` with a red hairline; never a solid red block; one per box, beside a secondary button), `--inverse` is white for use on the accent cell, `--large` 48px, `--small` 32px. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px pill. `--accent` filled, `--new` green tint, `--count` a square-cornered number; optional `.ds-badge__dot`. Status labels are `--success` (shipped, paid, online), `--warning` (queued, pending, due soon) and `--danger` (failed, rolled back): coloured text on a 14% tint of the same colour with a 30% hairline, and the dot takes the text colour. Use them in a table's status column and nowhere decorative; `--new` stays for announcements.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full` spans both) with `.ds-form__label` and `.ds-form__control` (`--area` for a textarea; `is-invalid`, `is-focus`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`.\n- `.ds-table`: a 12px-rounded box with a grey head and hairline rows; `.ds-table__num` right-aligns numbers, `.ds-table__muted` greys a column, `tr.is-current` lifts a row. Put it in a `--wider` cell.\n- `.ds-list`: hairline-separated `.ds-list__item` with `.ds-list__title`, optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the small 12px card with `.ds-panel__title`, `.ds-panel__body` and `.ds-panel__meta`; it sits inside a cell. `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented pill of `.ds-tabs__tab`; `is-current` is the filled segment. `.ds-toolbar` puts tabs and a badge on one line; on an inner page it sits on the bare page between the page header or stats and the grid.\n- `.ds-sidebar`: a one-column cell with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled).\n- `.ds-notice`: navy information box with `.ds-notice__title` and `.ds-notice__text`; `--error` is the dark red variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items; `is-current` filled with a hairline, `is-disabled` greyed.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` separated by slashes; the last carries `is-current`. It is the first thing on an inner page, above the `.ds-page-header`.\n- `.ds-dialog`: 480px box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions`. Shown on a `.ds-stage`, a full-width cell filled with `--color-overlay`.\n- `.ds-empty`: centred icon tile, `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `.ds-grid__cell--bare`.\n- `.ds-footer`: hairline on top, `.ds-footer__inner` with `.ds-footer__brand`, `.ds-footer__text` and three columns of `.ds-footer__title` over a `.ds-footer__list` of `.ds-footer__link`, then `.ds-footer__strip`.\n- `.ds-menu`: a drop-down under a navigation item, opened by hover or keyboard focus (`is-open` by hand). `.ds-menu__list` of `.ds-menu__item` with an optional `.ds-menu__hint`, parted by `.ds-menu__rule`; `.ds-menu__caret` in the trigger; `--end` aligns it to the right edge. Use it under the one navigation item that has sub-pages.\n- `.ds-accordion`: `
` as `.ds-accordion__item` with a `.ds-accordion__head` summary and `.ds-accordion__body`. Use it for questions at the end of a guide or inside a tile.\n- `.ds-tooltip`: a focusable term with `.ds-tooltip__mark` and `.ds-tooltip__tip`, shown on hover or focus (`is-open` by hand) on `--fill-inverse`. Use it for one sentence of explanation, never for an action.\n- `.ds-progress`: `.ds-progress__label` with `.ds-progress__value` over `.ds-progress__bar` with `.ds-progress__fill` (`--1` to `--5` set the width; `--success`, `--warning` the colour). Use it inside a tile for a quota or a share used.\n- `.ds-avatar`: initials on a disc, `--accent` for a count; `.ds-avatars` overlaps several. Use it where a tile speaks of people.\n\n## Never\n\n- `block-gap <= 48px`: stacked blocks sit close: 16px between rows of cells and at most 48px from a section head to its grid; larger breathing room is padding inside a section, not a gap between blocks.\n- `content-width <= 1200px`: content stays in a centred column even though the background is full width.\n- `palette-colours <= 36`: one neutral ramp, one periwinkle, one green and four pale washes; no further hues.\n- `font-families <= 2`: one sans for everything plus the mono for code.\n- `font-size >= 12px`: the smallest measured text is 12px.\n- `font-size <= 72px`: the largest measured hero heading is 72px; this pack tops out at 60px.\n- `font-weight <= 700`: no black or heavy weights.\n- `underlined-links <= 1%`: links are told apart by colour; underline appears only on hover.\n- `uppercase-text <= 1%`: capitals are limited to a short eyebrow label.\n- `line-height <= 1.7`: body text sits between 1.5 and 1.7.\n- `border-width <= 2px`: every hairline is 1px; 2px exists only as the focus ring.\n- `border-radius >= 4px`: no box is square; the smallest measured radius is 4px.\n- `text-shadow = none`: no visible text shadows.\n- `box-shadow-blur <= 25px`: shadows are quiet; the largest measured blur is 25px.\n- `gradient-fills <= 30%`: gradients are faint cell lighting and glows, on at most about a third of boxes.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new feature is a `.ds-grid__cell` with a span that keeps its row uneven, a title, one 14px caption and one small visual; a new contained box inside a cell is a `.ds-panel`; a new chip is a `.ds-badge`. Use tokens only: fills are `--color-surface*` or a `--color-fill-*` tint, outlines are `--border-width` in `--color-border`, corners are `--radius-page` for cells, `--radius-panel` inside them and `--radius-control` for controls, and spacing comes from the `--space-*` scale. Keep one subject per cell, separate cells with the gap and never with a rule, and do not add a second accent colour, a light section or a hard shadow.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1200px;\n --size-measure: 640px;\n --size-nav: 64px;\n --size-control: 38px;\n --size-control-large: 48px;\n --size-row: 300px;\n --size-icon: 40px;\n --size-glyph: 20px;\n --size-check: 16px;\n --size-dot: 8px;\n --size-chart: 112px;\n --size-switch: 32px;\n --size-knob: 14px;\n --size-dialog: 480px;\n --size-blur: 12px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n --space-9: 96px;\n --space-10: 128px;\n --space-gap: 16px;\n --space-cell: 32px;\n}\n\n/* shell */\n.ds-page {\n margin: 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 -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5);\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/* nav: one translucent bar with a hairline under it */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n backdrop-filter: blur(var(--size-blur));\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n/* brand: the mark on a small tile dressed like the primary button, then the name */\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-glyph) + var(--space-1));\n height: calc(var(--size-glyph) + var(--space-1));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\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: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-link-quiet);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-bar-text);\n}\n/* the current view marks its navigation item; a room and the form to open one belong to Releases */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#releases:target) .ds-nav__link[href=\"#releases\"],\n.ds-page:has(#open:target) .ds-nav__link[href=\"#releases\"],\n.ds-page:has(#room:target) .ds-nav__link[href=\"#room\"],\n.ds-page:has(#docs:target) .ds-nav__link[href=\"#docs\"] {\n background: var(--color-surface-alt);\n color: var(--color-bar-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* hero: centred text on the bare page with one faint glow */\n.ds-hero {\n padding: var(--space-10) 0 var(--space-9);\n text-align: center;\n background: radial-gradient(ellipse at 50% 0, var(--color-fill-1), transparent 60%);\n}\n.ds-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-hero__title {\n max-width: 16ch;\n margin: var(--space-5) 0 0;\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 color: var(--color-heading);\n}\n.ds-hero__title-accent {\n color: var(--color-link);\n}\n.ds-hero__lead {\n max-width: var(--size-measure);\n margin: var(--space-5) 0 0;\n font-size: var(--text-large);\n line-height: 1.6;\n color: var(--color-text-muted);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n margin-top: var(--space-6);\n}\n.ds-hero__note {\n margin: var(--space-5) 0 0;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* section: a titled stretch of the page that holds one grid */\n.ds-section {\n padding: 0 0 var(--space-9);\n}\n.ds-section__head {\n max-width: var(--size-measure);\n margin: 0 auto var(--space-7);\n text-align: center;\n}\n.ds-section__eyebrow {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: calc(var(--text-small) * 0.2);\n text-transform: uppercase;\n color: var(--color-link);\n}\n.ds-section__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-section__lead {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n\n/* inner page: no hero, no centred head. The trail and the page header start the view under the bar */\n.ds-section--page {\n padding-top: var(--space-7);\n}\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0 0 var(--space-6);\n}\n.ds-page-header__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-page-header__text {\n max-width: var(--size-measure);\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-page-header + .ds-stats,\n.ds-stats + .ds-toolbar,\n.ds-page-header + .ds-toolbar {\n margin-bottom: var(--space-gap);\n}\n.ds-stats + .ds-toolbar {\n margin-top: var(--space-6);\n}\n\n/* grid: the bento. Four columns, rounded cells of unequal spans, one subject per cell */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-row), auto);\n grid-auto-flow: dense;\n gap: var(--space-gap);\n}\n.ds-grid--auto {\n grid-auto-rows: auto;\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-cell);\n overflow: hidden;\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}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__cell--wider {\n grid-column: span 3;\n}\n.ds-grid__cell--full {\n grid-column: 1 / -1;\n}\n.ds-grid__cell--tall {\n grid-row: span 2;\n}\n.ds-grid__cell--end {\n justify-content: flex-end;\n}\n.ds-grid__cell--center {\n align-items: center;\n text-align: center;\n}\n.ds-grid__cell--stack {\n gap: var(--space-5);\n}\n.ds-grid__cell--fill-1 {\n background: linear-gradient(180deg, var(--color-fill-1), var(--color-surface));\n}\n.ds-grid__cell--fill-2 {\n background: linear-gradient(180deg, var(--color-fill-2), var(--color-surface));\n}\n.ds-grid__cell--fill-3 {\n background: linear-gradient(180deg, var(--color-fill-3), var(--color-surface));\n}\n.ds-grid__cell--fill-4 {\n background: var(--color-fill-4);\n}\n.ds-grid__cell--glow {\n background: radial-gradient(circle at 30% 100%, var(--color-fill-1), transparent 60%), var(--fill-panel);\n}\n.ds-grid__cell--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-grid__cell--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-4);\n background: var(--color-page);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-grid__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1.3;\n color: var(--color-heading);\n}\n.ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h2);\n line-height: var(--line-heading);\n color: var(--color-accent-text);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: 1.5;\n color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-grid__text {\n margin-top: var(--space-3);\n font-size: var(--text-base);\n color: var(--color-accent-text);\n opacity: 0.85;\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-5);\n}\n.ds-grid__visual--top {\n margin-top: 0;\n margin-bottom: auto;\n padding-top: 0;\n padding-bottom: var(--space-5);\n}\n.ds-grid__cell--split {\n flex-direction: row;\n align-items: stretch;\n gap: var(--space-6);\n}\n.ds-grid__copy {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n}\n.ds-grid__cell--split .ds-grid__visual {\n flex: 1;\n align-self: center;\n min-width: 0;\n margin-top: 0;\n padding-top: 0;\n}\n.ds-grid__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-5);\n}\n\n/* small things that live inside cells */\n.ds-chart {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n height: var(--size-chart);\n}\n.ds-chart__bar {\n flex: 1;\n height: 30%;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-chart__bar--2 {\n height: 45%;\n}\n.ds-chart__bar--3 {\n height: 60%;\n}\n.ds-chart__bar--4 {\n height: 75%;\n}\n.ds-chart__bar--5 {\n height: 100%;\n}\n.ds-chart__bar.is-current {\n background: var(--fill-accent);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n margin: 0;\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-stat__value {\n margin: 0;\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(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__unit {\n font-size: var(--text-h3);\n color: var(--color-text-muted);\n}\n.ds-stat__note {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n}\n.ds-stat__note--success {\n color: var(--color-success);\n}\n.ds-stat__note--warning {\n color: var(--color-warning);\n}\n.ds-stat__note--danger {\n color: var(--color-danger);\n}\n.ds-stat--display .ds-stat__value {\n font-size: var(--text-display);\n}\n.ds-stat--display .ds-stat__unit {\n font-size: var(--text-h2);\n}\n\n/* stats: a row of small cells, one figure each. The bento at its smallest */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-gap);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-code {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--color-page);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.886);\n line-height: 1.6;\n white-space: pre;\n}\n.ds-code__key {\n color: var(--color-accent-alt);\n}\n.ds-code__str {\n color: var(--color-link);\n}\n.ds-checks {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-checks__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-checks__mark {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n color: var(--color-accent-alt);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-grid__cell--center .ds-chips {\n justify-content: center;\n}\n.ds-rows {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-rows__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: calc(var(--size-knob) + var(--space-1));\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: var(--size-knob);\n height: var(--size-knob);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch.is-on {\n background: var(--color-accent-alt);\n}\n.ds-switch.is-on::after {\n left: auto;\n right: calc(var(--space-1) / 2);\n background: var(--color-inverse);\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;\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 color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\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 font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: 87.5%;\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\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 border-radius: calc(var(--radius-control) / 2);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* buttons: small, 8px corners, a hairline one step lighter than the fill */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\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: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\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 background: color-mix(in srgb, var(--color-button) 85%, var(--color-shadow));\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: calc(var(--space-1) / 2);\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}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-surface);\n}\n.ds-button--danger {\n background: var(--color-danger-surface);\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) 20%, var(--color-danger-surface));\n color: var(--color-danger);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--color-danger-surface);\n}\n.ds-button--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse) 86%, var(--color-inverse-text));\n color: var(--color-inverse-text);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button--small {\n min-height: var(--space-6);\n padding: 0 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);\n box-shadow: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n line-height: 1.34;\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-badge--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 14%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 30%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 14%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 30%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 14%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 14%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);\n}\n.ds-badge--count {\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n font-weight: var(--weight-bold);\n}\n.ds-badge__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent-alt);\n border-radius: var(--radius-pill);\n}\n.ds-badge--success .ds-badge__dot,\n.ds-badge--warning .ds-badge__dot,\n.ds-badge--danger .ds-badge__dot {\n background: currentColor;\n}\n\n/* form */\n.ds-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--full {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-text);\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\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 box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1.4;\n transition: var(--transition);\n}\n.ds-form__control::placeholder {\n color: var(--color-disabled-text);\n}\n.ds-form__control--area {\n min-height: var(--space-9);\n resize: vertical;\n}\n.ds-form__control:focus-visible,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__hint {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-danger);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n grid-column: 1 / -1;\n}\n\n/* table: its own 12px box inside a cell, hairline rows */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n border-collapse: separate;\n border-spacing: 0;\n overflow: hidden;\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-page);\n color: var(--color-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table__scroll {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table .ds-table__link {\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-table .ds-table__link:hover,\n.ds-table .ds-table__link.is-hover {\n color: var(--color-link);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__muted {\n color: var(--color-text-muted);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* panel: the small card. 12px corners, sits inside a cell or in a row of its own */\n.ds-panel {\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.4;\n color: var(--color-heading-alt);\n}\n.ds-panel__body {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__meta {\n display: block;\n margin-top: var(--space-4);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-panels {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n}\n\n/* tabs: a segmented pill */\n.ds-tabs {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-bar-alt-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n\n/* sidebar */\n.ds-sidebar {\n font-size: var(--text-small);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0 calc(var(--space-3) * -1);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n\n/* notice */\n.ds-notice {\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) 20%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n opacity: 0.8;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--space-6);\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\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 color: var(--color-link-quiet);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n background: var(--color-surface-alt);\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 pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-disabled-text);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n}\n\n/* dialog: a lifted 12px box on a dimmed stage */\n.ds-dialog {\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-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n border: 0;\n border-radius: var(--radius-control);\n cursor: pointer;\n}\n.ds-dialog__glyph {\n width: var(--size-check);\n height: var(--size-check);\n}\n.ds-dialog__close:hover,\n.ds-dialog__close.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stage {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-8) var(--space-5);\n background: var(--color-overlay);\n}\n\n/* empty state: an empty cell with only an outline */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n text-align: center;\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n max-width: 36ch;\n margin: var(--space-1) 0 var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* footer */\n.ds-footer {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: var(--space-6);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-8) var(--space-5);\n}\n.ds-footer__brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-footer__text {\n max-width: 32ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\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-link-hover);\n}\n.ds-footer__strip {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-bar-alt-text);\n}\n\n/* four narrow columns: the display figure steps down so it stays inside a one-column cell */\n/* menu: a list that drops from a navigation item, on hover, focus or when opened */\n.ds-menu {\n position: relative;\n}\n.ds-menu__caret {\n width: var(--size-dot);\n height: var(--size-dot);\n margin-left: var(--space-1);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu--end .ds-menu__list {\n left: auto;\n right: 0;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list,\n.ds-menu[open] > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-3);\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: 1.3;\n color: var(--color-text);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__hint {\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-menu__rule {\n height: 0;\n margin: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* accordion: sections that open and close */\n.ds-accordion {\n display: grid;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n list-style: none;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.35;\n color: var(--color-heading);\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-link);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after,\n.ds-accordion__item.is-open > .ds-accordion__head::after {\n transform: rotate(45deg);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: var(--size-measure);\n margin: 0;\n padding: 0 0 var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* tooltip: a hint over its trigger, on hover or focus */\n.ds-grid__cell:has(.ds-tooltip) {\n position: relative;\n overflow: visible;\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n cursor: help;\n}\n.ds-tooltip__mark {\n display: inline-block;\n width: var(--size-check);\n height: var(--size-check);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n color: var(--color-text-muted);\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: 28ch;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n line-height: 1.4;\n text-align: left;\n text-transform: none;\n letter-spacing: 0;\n white-space: normal;\n transform: translateX(-50%);\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n\n/* progress: how far something is, as a bar */\n.ds-progress {\n display: grid;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-progress__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__value {\n font-size: calc(var(--text-small) * 0.857);\n font-variant-numeric: tabular-nums;\n color: var(--color-text-muted);\n}\n.ds-progress__bar {\n display: block;\n height: var(--space-2);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill--2 {\n width: 34%;\n}\n\n/* avatar: a person drawn as initials on a disc */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-check) * 2);\n height: calc(var(--size-check) * 2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n.ds-avatar--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-avatars {\n display: flex;\n align-items: center;\n padding-left: var(--space-2);\n}\n.ds-avatars .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n}\n\n/* room above a component that follows text inside a tile */\n.ds-grid__text + .ds-avatars,\n.ds-stat + .ds-progress {\n margin-top: var(--space-3);\n}\n\n@media (min-width: 961px) and (max-width: 1240px) {\n .ds-stat--display .ds-stat__value {\n font-size: var(--text-h1);\n }\n .ds-stat--display .ds-stat__unit {\n font-size: var(--text-h3);\n }\n}\n@media (max-width: 960px) {\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-grid__cell--wider {\n grid-column: span 2;\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 0 var(--space-4);\n }\n .ds-nav__links {\n order: 3;\n flex: none;\n width: 100%;\n padding-bottom: var(--space-2);\n overflow-x: auto;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-footer__inner,\n .ds-stats {\n grid-template-columns: 1fr 1fr;\n }\n}\n@media (max-width: 600px) {\n .ds-grid,\n .ds-form,\n .ds-panels {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-auto-rows: auto;\n }\n .ds-grid__cell--wide,\n .ds-grid__cell--wider,\n .ds-grid__cell--tall {\n grid-column: auto;\n grid-row: auto;\n }\n .ds-grid__cell {\n padding: var(--space-5);\n }\n .ds-grid__cell--split {\n flex-direction: column;\n }\n .ds-page__inner,\n .ds-nav__inner,\n .ds-hero__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__extra,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-hero {\n padding: var(--space-8) 0 var(--space-7);\n }\n .ds-section {\n padding-bottom: var(--space-7);\n }\n .ds-section--page {\n padding-top: var(--space-5);\n }\n .ds-section__title,\n .ds-page-header__title,\n .ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h3);\n }\n .ds-stat--display .ds-stat__value {\n font-size: var(--text-h1);\n }\n .ds-stats .ds-stat {\n padding: var(--space-4);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n white-space: nowrap;\n }\n .ds-pagination,\n .ds-form__actions,\n .ds-footer__strip {\n flex-wrap: wrap;\n }\n .ds-page-header__copy {\n flex-basis: 100%;\n }\n .ds-stage {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer__inner {\n padding: var(--space-7) var(--space-4);\n }\n}\n@media (max-width: 960px) {\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n bottom: auto;\n left: var(--space-4);\n right: var(--space-4);\n width: auto;\n max-width: none;\n margin-top: var(--space-6);\n transform: none;\n }\n}\n\n/* phone navigation: the links fold into a menu button that lists every view and marks the current one */\n.ds-nav__fold {\n display: none;\n}\n.ds-nav__toggle {\n list-style: none;\n cursor: pointer;\n}\n.ds-nav__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__fold .ds-menu__item[href=\"#home\"],\n.ds-page:has(#releases:target) .ds-nav__fold .ds-menu__item[href=\"#releases\"],\n.ds-page:has(#room:target) .ds-nav__fold .ds-menu__item[href=\"#room\"],\n.ds-page:has(#open:target) .ds-nav__fold .ds-menu__item[href=\"#open\"],\n.ds-page:has(#docs:target) .ds-nav__fold .ds-menu__item[href=\"#docs\"] {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold .ds-menu__item[href=\"#home\"]::after,\n.ds-page:has(#home:target) .ds-nav__fold .ds-menu__item[href=\"#home\"]::after,\n.ds-page:has(#releases:target) .ds-nav__fold .ds-menu__item[href=\"#releases\"]::after,\n.ds-page:has(#room:target) .ds-nav__fold .ds-menu__item[href=\"#room\"]::after,\n.ds-page:has(#open:target) .ds-nav__fold .ds-menu__item[href=\"#open\"]::after,\n.ds-page:has(#docs:target) .ds-nav__fold .ds-menu__item[href=\"#docs\"]::after {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-link);\n border-radius: var(--radius-pill);\n}\n@media (max-width: 960px) {\n .ds-nav__links {\n justify-content: center;\n overflow-x: visible;\n }\n}\n@media (max-width: 600px) {\n .ds-nav__inner {\n flex-wrap: nowrap;\n }\n .ds-nav__links {\n display: none;\n }\n .ds-nav__fold {\n display: block;\n }\n .ds-nav__fold .ds-menu__list {\n max-width: calc(100vw - 2 * var(--space-4));\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, bento grid landing specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Sign in\n Open a room\n
\n Menu\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n Release rooms are now in beta\n

Every release in one calm view

\n

chronoskin gathers deploys, checks and incidents for a small team into a single board, so shipping day reads like a checklist and not a group chat.

\n
\n Open a room\n Read the docs\n
\n

Free for teams of up to five. No card needed.

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

Features

\n

One board, eight small tools

\n

Each box does one job. Use the ones you need and ignore the rest.

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

Uptime

\n

Checked every thirty seconds from four regions?Two in Europe, one in each of the Americas and Asia..

\n
\n

99.98%

\n
\n Downtime allowance 9 of 43 min\n \n
\n
\n
\n\n
\n
\n \n

Release timeline

\n

Every deploy of the last two weeks on one axis, with the slow ones marked.

\n
\n 14 days\n 42 deploys\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n\n
\n

Alerts

\n

Route each kind of noise to the right place.

\n
\n
    \n
  • Failed deploy
    • \n
  • Slow check
    • \n
  • Weekly digest
    • \n
\n
\n
\n\n
\n
\n \n

Deploy checks

\n

A short list that has to be green before the button unlocks.

\n
\n
\n
    \n
  • Tests pass on the release branch
    • \n
  • Migration reviewed by a second person
    • \n
  • Rollback note written
    • \n
  • Status page draft ready
    • \n
\n
\n
\n\n
\n \n

Integrations

\n

Hooks for the tools already in your pipeline.

\n
\n
\n Git push\n Webhook\n Chat\n Pager\n Email\n
\n
\n
\n\n
\n \n

Command line

\n

Open a release room, tick the checks and ship without leaving the terminal.

\n
\n
$ chronoskin room open\n  room spring-12 ready\n\n$ chronoskin check --all\n  tests       ok\n  migration   ok\n  rollback    ok\n  status      ok\n\n$ chronoskin ship\n  deployed in 48s
\n
\n
\n\n
\n

Roles

\n

Owners ship, members prepare, guests watch.

\n IOTRML+4\n
\n\n
\n
\n
\n Shipped\n Rolled back\n Paused\n Queued\n
\n
\n

Audit trail

\n

Who pressed what and when, kept for a year and exportable as plain text.

\n
\n
\n

Ship your next release from one box

\n

Open a room in a few minutes and bring the team in when the first check turns green.

\n
\n Open your first room\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Releases
    3. \n
  3. Week 14
    4. \n
\n\n
\n
\n

Releases

\n

Every room opened this week, with its checks and how long the deploy took.

\n
\n
\n Export\n Open a room\n
\n
\n\n
    \n
  • \n Deploys this week\n 42\n 6 more than last week\n
    • \n
  • \n Median duration\n 54 s\n Fastest 41 s\n
    • \n
  • \n Checks passed\n 97%\n 2 rooms waiting on review\n
    • \n
  • \n Rolled back\n 1\n gateway, on Tuesday\n
    • \n
\n\n
\n \n Week 14\n
\n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
ReleaseServiceOwnerStatusChecksDuration
spring-13billingInes OkaforQueued2 / 4-
spring-12billingInes OkaforShipped4 / 448 s
spring-11searchTomas ReylShipped4 / 461 s
spring-10gatewayMara LindqvistRolled back3 / 4132 s
spring-09billingInes OkaforShipped4 / 452 s
\n
\n \n
\n\n
\n

Changelog

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

What the board tells you

\n

Messages stay inside the box they belong to.

\n
\n
\n
\n A room is open for spring-13\n

Two of four checks are green. Shipping unlocks when the rest pass.

\n
\n
\n The gateway deploy was rolled back\n

Health checks failed in one region after 132 seconds.

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

No rooms yet for week 15

\n

Rooms appear here when a release branch is cut. You can also open one by hand.

\n Open a room\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Releases
    3. \n
  3. spring-13
    4. \n
\n\n
\n
\n

spring-13

\n

A room for the billing service, opened by Ines Okafor this morning. Two of four checks are green.

\n
\n
\n Queued\n All releases\n
\n
\n\n
\n
\n
\n

Checks

\n

All four have to be green before the ship button unlocks for members.

\n
\n
    \n
  • Tests pass on the release branch Passed
    • \n
  • Migration reviewed by a second person Passed
    • \n
  • Rollback note written Waiting
    • \n
  • Status page draft ready Waiting
    • \n
\n
\n\n
\n
\n

Actions

\n

Owners can ship before every check is green. Red undoes the last deploy.

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

Room log

\n
    \n
  • \n Migration review passed\n 10:42 · Tomas Reyl\n
    • \n
  • \n Tests passed on the branch\n 10:17 · automatic\n
    • \n
  • \n Room opened from the template\n 09:58 · Ines Okafor\n
    • \n
\n
\n\n
\n
\n
\n

Ship spring-13 to production?

\n \n
\n
\n

Two checks are still waiting, so only an owner can ship now. The deploy takes about a minute and can be rolled back from this room.

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

Rules for this room

\n

Copied from the workspace template when the room opened.

\n
\n
\n
\n

Quiet hours

\n

No deploys between 18:00 and 08:00 unless an owner overrides.

\n Set by workspace owners\n
\n
\n

Freeze days

\n

Mark dates when the ship button stays locked for everyone.

\n Next freeze: 30 April\n
\n
\n
\n\n
\n
\n

Close this room

\n

Closing stops the checks and archives the log. The release itself is not rolled back.

\n
\n
    \n
  • Pause deploys for this room
    • \n
  • Close and archive the room
    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Releases
    3. \n
  3. Open a room
    4. \n
\n\n
\n
\n

Open a room

\n

Four fields and the room is live. Everything can be changed later from the room itself.

\n
\n
\n Back to releases\n
\n
\n\n
\n
\n
\n

Room details

\n

The name is usually the release branch.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Enter a full address, such as name@team.example.\n
\n
\n \n \n
\n
\n \n CancelOpen room\n
\n
\n
\n\n
\n
\n

What happens next

\n

A room is live as soon as it has a name and an owner.

\n
\n
    \n
  • The checklist is copied from the template
    • \n
  • The owner gets the first review request
    • \n
  • The team channel hears about it
    • \n
  • The ship button stays locked until checks pass
    • \n
\n
\n How a release room works\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Workspace
    2. \n
  2. Docs
    3. \n
  3. Release rooms
    4. \n
\n\n
\n
\n

Docs

\n

How a release room works, from the first branch to the confirmed deploy.

\n
\n
\n See this week\n
\n
\n\n
\n \n\n
\n
\n

Release rooms

\n

A room is a page that exists for one release. It opens when a branch is cut and closes when the deploy is confirmed healthy.

\n

Opening a room

\n

Run chronoskin room open or press the button on the board. The room copies the checklist from your workspace template.

\n

What a room holds

\n
    \n
  • The checks that must pass before shipping
    • \n
  • A running log of every deploy attempt
    • \n
  • The rollback note, written before it is needed
    • \n
\n

Closing a room

\n

When the deploy has been healthy for ten minutes the room closes by itself. The log stays readable from the releases page for a year.

\n

Questions

\n
\n
\n Can two rooms be open for one service?\n

No. A second branch waits in the queue until the first room closes.

\n
\n
\n Who can press the ship button?\n

Owners at any time, members once every check is green.

\n
\n
\n What happens to a room after a rollback?\n

It stays open with the rollback note pinned to the top of its log.

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

Labels

\n

Pills mark state, squares count. Green, amber and red are status only.

\n
\n Draft\n Beta\n New\n 12\n
\n
\n Shipped\n Queued\n Rolled back\n
\n
\n
\n\n
\n
\n

Further reading

\n

Shown as a link looks when new, visited, under the pointer and pressed.

\n
\n

\n Checklist templates\n Rollback notes\n This week\n Open a room\n

\n
\n\n
\n
\n

From the terminal

\n

The same room, without the board.

\n
\n
$ chronoskin room open\n  room spring-13 ready
\n
\n Open a room\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.landing.s01.p02.t01.u01\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"bento-grids\",\n \"years\": [\n 2022,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bg-1211\",\n \"short\": \"v1-bg-1211\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #f6f6f6;\n --color-surface-alt: #ececec;\n --color-surface-strong: #dddddd;\n --color-bar: #ffffff;\n --color-bar-text: #000000;\n --color-bar-alt: #f6f6f6;\n --color-bar-alt-text: #6f6f6f;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #6f6f6f;\n --color-heading: #000000;\n --color-heading-alt: #333333;\n --color-link: #5871ff;\n --color-link-quiet: #6f6f6f;\n --color-link-visited: #5468cc;\n --color-link-hover: #000000;\n --color-link-active: #5468cc;\n --color-border: rgb(0 0 0 / 0.06);\n --color-border-strong: rgb(0 0 0 / 0.1);\n --color-border-muted: rgb(0 0 0 / 0.04);\n --color-accent: #5871ff;\n --color-accent-text: #ffffff;\n --color-accent-alt: #37996b;\n --color-fill-1: #e8f8fc;\n --color-fill-2: #fcf4f0;\n --color-fill-3: #fcfcf0;\n --color-fill-4: #fcf0f0;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #aaaaaa;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #aaaaaa;\n --color-danger: #fc0000;\n --color-danger-surface: #fcf0f0;\n --color-success: #37996b;\n --color-warning: #fc6418;\n --color-notice: #e8f8fc;\n --color-notice-text: #005c7c;\n --color-focus: #5871ff;\n --color-shadow: #000000;\n --color-overlay: rgb(0 0 0 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: Inter, \"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: Inter, \"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Source Code Pro\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 60px;\n --text-h1: 40px;\n --text-h2: 30px;\n --text-h3: 20px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.13;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 12px;\n --radius-pill: 9999px;\n --radius-page: 24px;\n --shadow-panel: inset 0 1px 1px color-mix(in srgb, white 8%, transparent), 0 12px 12px color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 16%, transparent);\n --shadow-control-hover: 0 2px 4px color-mix(in srgb, var(--color-shadow) 16%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: inset 0 1px 2px color-mix(in srgb, white 12%, transparent), 0 20px 25px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 80%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 95%, white), color-mix(in srgb, var(--color-surface) 88%, black));\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }