{ "id": "v1-bg-41b2", "long_id": "v1.bento-grids.landing.s04.p01.t11.u02", "name": "Dashboard bento, 2025", "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 product page built like the dashboard it sells: one dense bento of twelve tracks on a fixed row unit, in which a tall introduction tile stands at the left and a staircase of small data tiles (a figure, a line chart, a ring, a short list, a heat grid) steps down beside it. Tiles sit 10px apart on warm paper, most of them off-white with a hard 2px lip under the bottom edge, a few filled with a soft butter, lilac, mint or sky tint, one of them dark; charts are drawn in CSS and inline SVG in a single amber accent. The form was common on analytics, finance and scheduling product sites from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-41b2", "preview_url": "https://chrono.skin/s/v1-bg-41b2/specimen.html", "files": { "STYLE.md": "# Dashboard bento, 2025\n\n## Summary\n\nA product page built like the dashboard it sells: one dense bento of twelve tracks on a fixed row unit, in which a tall introduction tile stands at the left and a staircase of small data tiles (a figure, a line chart, a ring, a short list, a heat grid) steps down beside it. Tiles sit 10px apart on warm paper, most of them off-white with a hard 2px lip under the bottom edge, a few filled with a soft butter, lilac, mint or sky tint, one of them dark; charts are drawn in CSS and inline SVG in a single amber accent. The form was common on analytics, finance and scheduling product sites from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1320px, designed at a 1440px viewport, padded by `--space-5` (20px) at the sides. Everything on the page is a tile in that column; there is no full-width bar or band.\n- The header is a row of separate tiles, not a bar: `.ds-nav` holds a brand tile, a growing tile with the links, a small status tile and a tile with two small buttons, each 60px tall with `--radius-panel` corners. It scrolls with the page.\n- `.ds-grid` has twelve equal tracks and rows of `--size-row` (92px) that grow only when content needs it. A tile states its size in tracks (`--w2` to `--w12`, three by default) and in rows (`--h2`, `--h3`, `--h4`, `--h6`, one by default). `.ds-grid--auto` drops the row unit for tiles that hold components.\n- The home page opens with the `.ds-hero` tile, six tracks by six rows, at the left. Beside it three pairs of two-row tiles form a staircase: 2 and 4 tracks, then 3 and 3, then 4 and 2, so the seam between each pair steps one track to the right on the way down. Under them runs the `.ds-stats` strip, twelve tracks by one row. Then a four-row band (a 3-track list, a 6-track chart tile, two stacked 3-track tiles) and a closing two-row pair: the 8-track `--accent` tile with its button at the right and a 4-track tinted tile. No two neighbouring rows use the same split.\n- Dense: the gap between tiles is `--space-gap` (10px) in both directions and the padding inside a tile is `--space-cell` (20px); the hero and the page header use `--space-6` (32px).\n- Spacing scale: `--space-1` 4px (pill padding, title to caption, heat grid gap), `--space-2` 8px (button gap, legend rows, row padding), `--space-3` 12px (nav tile padding, table cell padding, meter height, title to chart), `--space-4` 16px (stack gap inside a tile, form gap, meter rows, section title to grid), `--space-5` 20px (page gutter, split gap), `--space-6` 32px (hero padding, hero lead to buttons), `--space-7` 40px, `--space-8` 56px (above a section title, above the footer, dialog stage padding), `--space-9` 88px (textarea height).\n- Controls are `--size-control` (36px) tall, `--size-control-large` (46px) in the hero and the accent tile; icon tiles are `--size-icon` (36px) with a `--size-glyph` (18px) line icon. Charts: a ring is `--size-donut` (104px), a spark line `--size-spark` (48px) at least.\n- A further run of tiles is introduced by a `.ds-section__head`: a mono index, the title at `--text-h3`, one grey line, and a hairline that runs on to the right edge. `--space-8` above, `--space-4` below. It is never centred.\n- Inner pages have no hero and keep the twelve tracks. A view starts with a `.ds-section__head` that holds only the `.ds-breadcrumb` and the hairline, `--space-3` under the header tiles. The first tile is the `.ds-page-header`, nine tracks wide and filled with `--color-fill-2`, with a three-track tile beside it for the page's one key figure. Under them the working table takes an 8-track tile with the `.ds-tabs` strip in a `.ds-toolbar` at its top and the pagination at its bottom, and a 4-track tile of notices and a panel beside it; a dialog stage takes 8 tracks with a `--bare` empty tile of 4; a form takes 8 with a 4-track list of what is still due; a destructive zone takes 8 with a 4-track tile of switches.\n- Views: `home` is the board (hero tile, the staircase of data tiles, the stats strip, the budget meters and the call to action); `entries` is the month's list (tabs, the table with pagination, notices and the month-end panel, the dialog that closes the month and the empty state for next month); `budget` is one budget (weekly meters, its latest entries, the action buttons, who shares it, the remove zone and its nudges); `add` is the form for an entry; `guide` is the guide (prose, the section menu, labels and links). The navigation marks Overview, Entries, Budgets or Guide; the form marks Entries.\n- `.ds-footer` is a last row of tiles on the same twelve tracks: a four-track inverted brand tile and four two-track link tiles, then one line of small print.\n- Below 1000px the grid has six tracks, small tiles take three and the rest take all six, and the header tiles wrap with the links tile on a line of its own; below 600px every tile is full width, a split tile stacks, the status tile and the second button (`.ds-nav__extra`) hide, footer tiles pair up and the page header's buttons go under its text. 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) the header tiles keep the wrapped layout: the links tile (`.ds-nav__tile--grow`) is a row of links spread over the full width, the status tile (`.ds-nav__tile--extra`) and the second button (`.ds-nav__extra`) are not shown, and the Budgets drop-down opens as a full row under the links tile instead of under its own link. 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- Mono for everything that labels, sans for everything that reads: `--font-heading`, `--font-ui` and `--font-mono` are Geist Mono, then JetBrains Mono, IBM Plex Mono and the system mono; `--font-body` is Inter, then the system sans.\n- Headings and controls are capitals: `--heading-transform` and `--ui-transform` are `uppercase`. Tile titles, which do not take the transform, stay in lower case mono.\n- Medium, small and flat: `--weight-heading`, `--weight-display` and `--weight-ui` 500, `--weight-body` 400, `--weight-bold` 600. `--text-display` 44px at `--line-display` 1.1 with `--display-tracking` -1px; `--text-h1` 32px, `--text-h2` 24px, `--text-h3` 18px at `--line-heading` 1.25.\n- `--text-base` and `--text-small` 14px at `--line-body` 1.5; `--text-large` 16px; `--text-ui` 12px for navigation, buttons, tabs and form controls.\n- Links in running text are ink with an underline (`--link-decoration` underline); quiet links are grey without one.\n\n## Components\n\n- `.ds-page` on ``: paper background, family and 16px/1.5 text. `.ds-page__inner` is the 1320px column and wraps `
`.\n- `.ds-nav`: the header row of tiles. Each child is a `.ds-nav__tile` (`--grow` for the one that takes the free width); inside are the `.ds-brand`, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`, a filled 8px box), `.ds-nav__meta` with a `.ds-nav__dot`, and two `.ds-button--small`.\n- `.ds-brand`: the site's mark and name, alone in the first header tile. `.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-heading`, because the header tiles carry the tile fill. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-grid`: the bento. Children are `.ds-grid__cell` with track variants `--w2`, `--w4`, `--w5`, `--w6`, `--w7`, `--w8`, `--w9`, `--w12` and row variants `--h2`, `--h3`, `--h4`, `--h6`; arrangement variants `--between` (label at the top, figure at the bottom), `--stack` (16px between children), `--split` (visual and copy side by side); fill variants `--fill-1` to `--fill-4`, `--accent` (the call to action), `--inverse` (the one dark tile) and `--bare` (outline only). Inside: `.ds-grid__head` (title left, badge or legend right), `.ds-grid__label` (12px grey), `.ds-grid__title` (`--lead` at 18px), `.ds-grid__text`, `.ds-grid__icon` with a `.ds-grid__glyph`, `.ds-grid__copy`, `.ds-grid__visual` (pushed to the bottom) and `.ds-grid__actions`. `.ds-grid--auto` is for tiles that hold components.\n- `.ds-hero`: the six by six tile, on `--color-fill-1`. A `.ds-badge`, `.ds-hero__title` (52px), `.ds-hero__lead`, `.ds-hero__actions` with two large buttons, `.ds-hero__note`, and a `.ds-hero__chart`: an inline SVG area line in the accent colour that runs off the bottom edge, one row unit tall. One per site, on the home page only.\n- `.ds-section__head`: `.ds-section__index`, `.ds-section__title`, an optional `.ds-section__lead` or the breadcrumb, then the hairline.\n- `.ds-page-header`: the first tile of an inner page, on `--color-fill-2`. `.ds-page-header__copy` holds a badge, `.ds-page-header__title` (an `h1` at `--text-h1`) and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the bottom right with at most one primary and one secondary button. Never together with a `.ds-hero`.\n- `.ds-stat`: one figure: an optional `.ds-stat__label`, `.ds-stat__value` (36px, heading family, tabular figures, with an optional grey `.ds-stat__unit`) and a 12px `.ds-stat__note` (`--success`, `--warning`, `--danger`). Alone it sits at the bottom of a `--between` tile; `.ds-stat--row` puts the note beside the value. `.ds-stats` is the row: one twelve-track tile, a single row unit tall, holding four `.ds-stat` parted by hairlines, each with its label above, the value at 24px at the left and the note at the right.\n- Charts: `.ds-plot` holds a `.ds-plot__svg` (paths classed `.ds-plot__grid`, `.ds-plot__line`, `.ds-plot__line--alt`) and a `.ds-plot__axis` of labels; `.ds-spark` is a bare line; `.ds-donut` holds a `.ds-donut__svg` (`.ds-donut__ring`, `.ds-donut__arc`, `.ds-donut__arc--alt`) and a centred `.ds-donut__value`; `.ds-heat` is an 18-column grid of `.ds-heat__cell` (`--1` to `--3`); `.ds-meters` is a list of `.ds-meter` rows, each a name, a `.ds-meter__track` with a `.ds-meter__bar` (`--2` to `--5` set the length, `--alt` the second colour) and a `.ds-meter__value`. `.ds-legend` (`--inline` for one line) lists `.ds-legend__item` with a `.ds-legend__key` (`--alt`, `--mute`) and a `.ds-legend__value`. Every SVG paints with `currentColor`; the class sets the colour.\n- Other tile contents: `.ds-rows` of `.ds-rows__item` with a `.ds-rows__value`, a button or a `.ds-switch` (`is-on`); `.ds-avatars` of `.ds-avatar` (`--accent` for the count); `.ds-chips`, a wrap of badges.\n- `.ds-prose`: long-form text in a six-track tile; 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`: dark primary. `--secondary` is paper with a hairline, `--danger` is the destructive action (red text on `--color-danger-surface` with a red hairline; one per tile, beside a secondary button), `--inverse` is for the accent tile, `--large` 46px, `--small` 32px. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px pill. `--accent` filled, `--new` tinted with the second accent, `--count` a square-cornered number; optional `.ds-badge__dot`. Status labels are `--success`, `--warning` and `--danger`: coloured text on a 14% tint with a 30% hairline. Use them in a table's status column.\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 inside a tile 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.\n- `.ds-list`: hairline-separated `.ds-list__item` with `.ds-list__title`, optional `.ds-list__text` and `.ds-list__meta`; it fills a three-track tile four rows tall.\n- `.ds-panel`: the small 12px card inside a tile, with `.ds-panel__title`, `.ds-panel__body` and `.ds-panel__meta`. `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented strip of `.ds-tabs__tab` with 8px corners; `is-current` is the filled segment. `.ds-toolbar` puts tabs and a badge on one line at the top of the table tile.\n- `.ds-sidebar`: a three-track tile with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled).\n- `.ds-notice`: sky information box with `.ds-notice__title` and `.ds-notice__text`; `--error` is the pale 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 sits in the section head line above the `.ds-page-header`.\n- `.ds-dialog`: 460px box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions`. Shown on a `.ds-stage`, a tile 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`: the last row of tiles. `.ds-footer__tile` (`--brand` is the inverted four-track one with `.ds-footer__brand` and `.ds-footer__text`), each other tile a `.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 inside `.ds-avatars`, `--accent` for the count. Use it where a tile speaks of people.\n\n## Never\n\n- `block-gap <= 56px`: tiles sit 10px apart; the largest gap between stacked blocks is the 56px above a section title and the footer.\n- `content-width <= 1320px`: everything stays in the centred 1320px column.\n- `font-weight <= 600`: titles are medium; 600 is inline emphasis only.\n- `font-size <= 44px`: the hero heading is the largest text.\n- `font-size >= 12px`: the smallest text is 12px.\n- `font-families <= 2`: the mono and the sans.\n- `line-height <= 1.6`: body text sits at 1.5.\n- `border-radius <= 12px`: corners are tight; the largest box radius is the 12px cell.\n- `border-width <= 2px`: every hairline is 1px; 2px exists only as the focus ring.\n- `box-shadow-blur <= 15px`: shadows are rings and short blurs; the largest is the dialog's 15px.\n- `text-shadow = none`: no text shadows.\n- `animation = none`: nothing animates.\n- `gradient-fills <= 30%`: tiles are flat; no token of this pack is a gradient.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new tile is a `.ds-grid__cell` sized in tracks and rows so that its row keeps an uneven split, with one subject: a 12px label or a title, and one figure, chart or short list. A new chart is inline SVG painted with `currentColor`, coloured by a class that sets `color` to `--color-accent`, `--color-accent-alt` or `--color-surface-strong`, with its labels in HTML beside it. A contained box inside a tile is a `.ds-panel`; a chip is a `.ds-badge`. Use tokens only: fills are `--fill-panel`, a `--color-fill-*` tint, `--fill-accent` or `--fill-inverse` with their own text colours, outlines are `--border-width` in `--color-border`, corners are `--radius-page` for tiles, `--radius-panel` inside them and `--radius-control` for controls, and spacing comes from the `--space-*` scale. Separate tiles with the gap and never with a rule, keep the tints to a third of the grid, and do not add a third chart colour or a blurred shadow under a tile.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1320px;\n --size-measure: 560px;\n --size-row: 92px;\n --size-control: 36px;\n --size-control-large: 46px;\n --size-icon: 36px;\n --size-glyph: 18px;\n --size-check: 16px;\n --size-dot: 8px;\n --size-chart: 112px;\n --size-spark: 48px;\n --size-donut: 104px;\n --size-switch: 32px;\n --size-knob: 14px;\n --size-dialog: 460px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 20px;\n --space-6: 32px;\n --space-7: 40px;\n --space-8: 56px;\n --space-9: 88px;\n --space-gap: 10px;\n --space-cell: 20px;\n}\n\n/* shell: one centred column that holds the header tiles, the grids and the footer tiles */\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: the header is a row of separate tiles, not a bar */\n.ds-nav {\n display: flex;\n align-items: stretch;\n gap: var(--space-gap);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) var(--space-gap);\n}\n.ds-nav__tile {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n min-height: calc(var(--size-control) + var(--space-3) * 2);\n padding: 0 var(--space-3);\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-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-nav__tile--grow {\n flex: 1;\n min-width: 0;\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-2));\n height: calc(var(--size-glyph) + var(--space-2));\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-heading);\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-heading);\n}\n/* the current view marks its navigation item; the form for a new entry belongs to Entries */\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(#entries:target) .ds-nav__link[href=\"#entries\"],\n.ds-page:has(#add:target) .ds-nav__link[href=\"#entries\"],\n.ds-page:has(#budget:target) .ds-nav__link[href=\"#budget\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__meta {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: 0 var(--space-2);\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n white-space: nowrap;\n}\n.ds-nav__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-success);\n border-radius: var(--radius-pill);\n}\n\n/* grid: the bento. Twelve tracks and a fixed row unit; a tile is sized in tracks and in rows */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-row), auto);\n gap: var(--space-gap);\n}\n.ds-grid--auto {\n grid-auto-rows: auto;\n}\n.ds-grid + .ds-grid {\n margin-top: var(--space-gap);\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n grid-column: span 3;\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--w2 {\n grid-column: span 2;\n}\n.ds-grid__cell--w4 {\n grid-column: span 4;\n}\n.ds-grid__cell--w6 {\n grid-column: span 6;\n}\n.ds-grid__cell--w8 {\n grid-column: span 8;\n}\n.ds-grid__cell--w9 {\n grid-column: span 9;\n}\n.ds-grid__cell--w12 {\n grid-column: 1 / -1;\n}\n.ds-grid__cell--h2 {\n grid-row: span 2;\n}\n.ds-grid__cell--h4 {\n grid-row: span 4;\n}\n.ds-grid__cell--h6 {\n grid-row: span 6;\n}\n.ds-grid__cell--between {\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-grid__cell--stack {\n gap: var(--space-4);\n}\n.ds-grid__cell--split {\n flex-direction: row;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-grid__cell--fill-1 {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--fill-2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--fill-3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--fill-4 {\n background: var(--color-fill-4);\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--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: color-mix(in srgb, var(--color-inverse-text) 20%, var(--color-inverse));\n}\n.ds-grid__cell--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-grid__copy {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n}\n.ds-grid__label {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\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 color: var(--color-text-muted);\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-3);\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-base);\n font-weight: var(--weight-heading);\n line-height: 1.3;\n color: var(--color-heading);\n}\n.ds-grid__title--lead {\n font-size: var(--text-h3);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: 1.45;\n color: var(--color-text-muted);\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-3);\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-4);\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__cell--accent .ds-grid__text {\n font-size: var(--text-base);\n color: var(--color-accent-text);\n opacity: 0.85;\n}\n.ds-grid__cell--accent .ds-grid__actions {\n flex: none;\n margin-top: 0;\n padding-top: 0;\n}\n.ds-grid__cell--inverse .ds-grid__title,\n.ds-grid__cell--inverse .ds-grid__label,\n.ds-grid__cell--inverse .ds-grid__text,\n.ds-grid__cell--inverse .ds-stat__value,\n.ds-grid__cell--inverse .ds-stat__unit,\n.ds-grid__cell--inverse .ds-stat__note {\n color: var(--color-inverse-text);\n}\n.ds-grid__cell--inverse .ds-grid__label,\n.ds-grid__cell--inverse .ds-grid__text,\n.ds-grid__cell--inverse .ds-stat__unit,\n.ds-grid__cell--inverse .ds-stat__note {\n opacity: 0.7;\n}\n\n/* hero: the tallest tile, six tracks by six rows, with a chart running off its bottom edge */\n.ds-hero {\n justify-content: flex-start;\n padding: var(--space-6);\n padding-bottom: calc(var(--size-row) + var(--space-6));\n background: var(--color-fill-1);\n}\n.ds-hero__title {\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 text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-hero__lead {\n max-width: var(--size-measure);\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n line-height: 1.5;\n color: var(--color-text);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin-top: var(--space-6);\n}\n.ds-hero__note {\n margin: var(--space-4) 0 0;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-hero__chart {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--size-row);\n color: var(--color-accent);\n}\n\n/* section head: a short title with a hairline running to the right edge */\n.ds-section__head {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: var(--space-8) 0 var(--space-4);\n}\n.ds-section__head::after {\n content: \"\";\n flex: 1;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n/* on an inner page the head carries only the trail, close under the header tiles */\n.ds-view > .ds-section__head:first-child {\n margin-top: var(--space-3);\n}\n.ds-section__index {\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-section__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\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: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* page header: the coloured first tile of an inner page */\n.ds-page-header {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n padding: var(--space-6);\n background: var(--color-fill-2);\n}\n.ds-page-header__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-5) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\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);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stat: one figure. In the stats strip the figures share one flat tile and are parted by hairlines */\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n margin: 0;\n}\n.ds-stat__label {\n margin: 0;\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 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 letter-spacing: 0;\n color: var(--color-text-muted);\n}\n.ds-stat__note {\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--row {\n flex-direction: row;\n align-items: baseline;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: end;\n align-content: center;\n gap: var(--space-1) var(--space-3);\n padding: var(--space-4) var(--space-cell);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stats .ds-stat:first-child {\n border-left: 0;\n}\n.ds-stats .ds-stat__label {\n grid-column: 1 / -1;\n}\n.ds-stats .ds-stat__value {\n font-size: var(--text-h2);\n}\n.ds-stats .ds-stat__note {\n text-align: right;\n}\n\n/* charts and other small things that live inside tiles */\n.ds-spark {\n display: block;\n width: 100%;\n height: var(--size-spark);\n color: var(--color-accent);\n}\n.ds-plot {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-height: 0;\n margin-top: var(--space-3);\n}\n.ds-plot__svg {\n display: block;\n flex: 1 1 var(--size-spark);\n width: 100%;\n min-height: var(--size-spark);\n}\n.ds-plot__grid {\n color: var(--color-border-strong);\n}\n.ds-plot__line {\n color: var(--color-accent);\n}\n.ds-plot__line--alt {\n color: var(--color-accent-alt);\n}\n.ds-plot__axis {\n display: flex;\n justify-content: space-between;\n margin-top: var(--space-2);\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1;\n color: var(--color-text-muted);\n}\n.ds-legend {\n display: grid;\n flex: 1;\n gap: var(--space-2);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text);\n}\n.ds-legend--inline {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n.ds-legend__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-legend__key {\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent);\n border-radius: var(--radius-pill);\n}\n.ds-legend__key--alt {\n background: var(--color-accent-alt);\n}\n.ds-legend__key--mute {\n background: var(--color-surface-strong);\n}\n.ds-legend__value {\n margin-left: auto;\n font-variant-numeric: tabular-nums;\n color: var(--color-text-muted);\n}\n.ds-donut {\n position: relative;\n flex: none;\n width: var(--size-donut);\n height: var(--size-donut);\n}\n.ds-donut__svg {\n display: block;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n.ds-donut__ring {\n color: var(--color-surface-strong);\n}\n.ds-donut__arc {\n color: var(--color-accent);\n}\n.ds-donut__arc--alt {\n color: var(--color-accent-alt);\n}\n.ds-donut__value {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-display);\n line-height: 1;\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-heat {\n display: grid;\n grid-template-columns: repeat(18, minmax(0, 1fr));\n gap: var(--space-1);\n}\n.ds-heat__cell {\n aspect-ratio: 1;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-heat__cell--1 {\n background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface-strong));\n}\n.ds-heat__cell--2 {\n background: color-mix(in srgb, var(--color-accent) 65%, var(--color-surface-strong));\n}\n.ds-heat__cell--3 {\n background: var(--color-accent);\n}\n.ds-meters {\n display: grid;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-meter {\n display: grid;\n grid-template-columns: 14ch minmax(0, 1fr) 8ch;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-meter__track {\n height: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-meter__bar {\n display: block;\n width: 20%;\n height: 100%;\n background: var(--color-accent);\n border-radius: var(--radius-pill);\n}\n.ds-meter__bar--2 {\n width: 36%;\n}\n.ds-meter__bar--3 {\n width: 52%;\n}\n.ds-meter__bar--4 {\n width: 70%;\n}\n.ds-meter__bar--5 {\n width: 88%;\n}\n.ds-meter__bar--alt {\n background: var(--color-accent-alt);\n}\n.ds-meter__value {\n text-align: right;\n font-variant-numeric: tabular-nums;\n color: var(--color-text-muted);\n}\n.ds-avatars {\n display: flex;\n align-items: center;\n padding-left: var(--space-2);\n}\n.ds-avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-left: calc(var(--space-2) * -1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-surface);\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}\n.ds-avatar--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\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-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-rows__item:last-child {\n padding-bottom: 0;\n}\n.ds-rows__value {\n font-variant-numeric: tabular-nums;\n color: var(--color-text-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, 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 white-space: nowrap;\n text-decoration: none;\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 box inside a tile, 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 var(--border-width);\n overflow: hidden;\n background: var(--color-border-muted);\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}\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 inside a tile */\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 strip with soft corners */\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: calc(var(--radius-control) + var(--space-1));\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\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 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-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: var(--border-width) var(--border-style) 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;\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 box on a dimmed stage tile */\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 outlined tile with nothing in it */\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: a last row of tiles, then one line of small print */\n.ds-footer {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--space-gap);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: var(--space-8) auto 0;\n padding: 0 var(--space-5) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-footer__tile {\n grid-column: span 2;\n min-width: 0;\n padding: var(--space-cell);\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-footer__tile--brand {\n display: flex;\n flex-direction: column;\n grid-column: span 4;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: color-mix(in srgb, var(--color-inverse-text) 20%, var(--color-inverse));\n}\n.ds-footer__brand {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-inverse-text);\n}\n.ds-footer__text {\n max-width: 34ch;\n margin: var(--space-2) 0 0;\n color: var(--color-inverse-text);\n opacity: 0.7;\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-heading);\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 grid-column: 1 / -1;\n padding: var(--space-3) var(--space-2) 0;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\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: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/* room above a component that follows text inside a tile */\n.ds-rows + .ds-progress {\n margin-top: var(--space-3);\n}\n\n@media (max-width: 1000px) {\n .ds-grid,\n .ds-footer {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n .ds-grid__cell,\n .ds-footer__tile {\n grid-column: span 3;\n grid-row: auto;\n }\n .ds-grid__cell--w4,\n .ds-grid__cell--w5,\n .ds-grid__cell--w6,\n .ds-grid__cell--w7,\n .ds-grid__cell--w8,\n .ds-grid__cell--w9,\n .ds-footer__tile--brand {\n grid-column: 1 / -1;\n }\n .ds-stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-page-header + .ds-grid__cell {\n grid-column: 1 / -1;\n }\n .ds-nav {\n flex-wrap: wrap;\n }\n .ds-nav__tile--grow {\n order: 5;\n flex: none;\n width: 100%;\n overflow-x: auto;\n }\n .ds-nav__tile--extra {\n flex: 1;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n}\n@media (max-width: 600px) {\n .ds-page__inner {\n padding: 0 var(--space-3);\n }\n .ds-nav {\n justify-content: space-between;\n padding: var(--space-3) var(--space-3) var(--space-gap);\n }\n .ds-nav__tile--extra,\n .ds-nav__extra,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-grid__cell {\n grid-column: 1 / -1;\n }\n .ds-table .ds-table__link {\n white-space: normal;\n }\n .ds-table th,\n .ds-table td {\n padding-left: var(--space-2);\n padding-right: var(--space-2);\n }\n .ds-grid__cell--split {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-form,\n .ds-panels,\n .ds-stats {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stats .ds-stat {\n border-left: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n }\n .ds-stats .ds-stat:first-child {\n border-top: 0;\n }\n .ds-page-header {\n padding: var(--space-5);\n }\n .ds-page-header__copy {\n flex-basis: 100%;\n }\n .ds-hero__title,\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-tabs__tab {\n white-space: nowrap;\n }\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions,\n .ds-buttons,\n .ds-footer__strip {\n flex-wrap: wrap;\n }\n .ds-stage {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer {\n padding: 0 var(--space-3) var(--space-5);\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/* narrow navigation: the links tile never scrolls, so the drop-down can open; on a phone the four links\n spread evenly across the tile and the drop-down takes the tile's full width */\n@media (max-width: 1000px) {\n .ds-nav__tile--grow {\n overflow-x: visible;\n }\n}\n@media (max-width: 600px) {\n .ds-nav__tile--grow {\n position: relative;\n }\n .ds-nav__links {\n justify-content: space-between;\n }\n .ds-nav__tile--grow .ds-menu {\n position: static;\n }\n .ds-nav__tile--grow .ds-menu__list {\n left: 0;\n right: 0;\n min-width: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, dashboard bento specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
\n \n
\n Synced a minute ago\n
\n
\n Sign in\n Add entry\n
\n
\n\n
\n
\n
\n
\n \n

Know where the month went

\n

chronoskin keeps a small studio's spending on one board: every entry, every budget and the week ahead, each in a tile of its own.

\n
\n Start tracking\n See a live board\n
\n

Free for one budget. No card needed.

\n \n
\n\n
\n

Spent this week

\n

1,2848% under plan

\n
\n\n
\n
\n

Spend against plan

\n
    \n
  • Spent
    • \n
  • Plan
    • \n
\n
\n
\n \n
1 May8152231 May
\n
\n
\n\n
\n
\n \n 68%\n
\n
    \n
  • Studio46%
    • \n
  • Travel22%
    • \n
  • Left32%
    • \n
\n
\n\n
\n

Due this week

\n
\n
    \n
  • Studio rent 1,450.00
    • \n
  • Print run 312.80
    • \n
  • Type licence 96.00
    • \n
\n
\n
\n\n
\n
\n

Busy days

\n Last 18 weeks\n
\n
\n
\n
\n
\n\n
\n

Runway

\n

9 moat this month's pace

\n
\n\n
    \n
  • \n Entries this month\n 214\n 31 more than April\n
    • \n
  • \n Average entry\n 38.20\n Median 21.00\n
    • \n
  • \n Budgets on track\n 5 of 6\n Travel is close\n
    • \n
  • \n Unfiled receipts\n 3\n Oldest is 12 days\n
    • \n
\n\n \n\n
\n
\n
\n

Where it goes

\n

Five budgets, measured against what each was given for May.

\n
\n May\n
\n

3,325of 4,200 planned, with nine days left

\n
\n
    \n
  • Studio1,450
    • \n
  • Materials812
    • \n
  • Travel604
    • \n
  • Software318
    • \n
  • Post141
    • \n
\n
\n
\n\n
\n
\n

Everyone logs their own

\n

Four people, one ledger, no end of month chase?Unfiled receipts are listed for their owner every Friday..

\n
\n
\n IO\n TR\n ML\n +1\n
\n
\n\n
\n
\n

Comes in from

\n

Entries arrive without typing.

\n
\n
\n Bank feed\n Receipt photo\n Email\n CSV\n
\n
\n\n
\n
\n

Put this month on one board

\n

Add the first entry now and the tiles fill in around it.

\n
\n
\n Start tracking\n
\n
\n\n
\n

Nudges

\n
\n
    \n
  • Budget at 80%
    • \n
  • Receipt missing
    • \n
  • Friday summary
    • \n
\n
\n May budget used 3,325 of 9,600\n \n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Board
    2. \n
  2. Entries
    3. \n
  3. May
    4. \n
\n
\n\n
\n
\n
\n 214 entries\n

Entries

\n

Everything logged in May, with its budget and who added it.

\n
\n
\n Export\n Add entry\n
\n
\n\n
\n

Logged in May

\n

8,174of 9,600 planned

\n
\n\n
\n
\n \n Week 21\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
EntryBudgetLogged byStatusAmount
Studio rentStudioInes OkaforPending1,450.00
Paper stock, 40 sheetsMaterialsTomas ReylPaid64.00
Train to the print fairTravelMara LindqvistPaid118.40
Print run, spring zineMaterialsTomas ReylOverdue312.80
Font licence renewalSoftwareInes OkaforPaid96.00
\n
\n \n
\n\n
\n
\n

What the board tells you

\n

Messages stay inside the tile they belong to.

\n
\n
\n
\n Travel is at 86% of its budget\n

Two more trips this month would take it over.

\n
\n
\n The bank feed stopped on Tuesday\n

Sign in to the bank again to resume it.

\n
\n
\n
\n

Month end

\n

On the last day the board locks and a summary goes to everyone.

\n Next lock: 31 May\n
\n
\n\n
\n
\n
\n

Close the month of May?

\n \n
\n
\n

Closing locks all 214 entries and sends the summary. Three receipts are still unfiled.

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

No entries in June yet

\n

They appear here as they are logged.

\n Add entry\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Board
    2. \n
  2. Budgets
    3. \n
  3. Materials
    4. \n
\n
\n\n
\n
\n
\n Budget\n

Materials

\n

Paper, ink and print runs for May. Four people log against it.

\n
\n
\n See its entries\n Add entry\n
\n
\n\n
\n

Spent in May

\n

812of 1,000 planned

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

Spent by week

\n

Paper and print for the spring zine, against 250 a week.

\n
\n Close to plan\n
\n
    \n
  • Week 1896
    • \n
  • Week 19148
    • \n
  • Week 20312
    • \n
  • Week 21256
    • \n
\n
\n\n
\n

Latest in this budget

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

Actions

\n

One filled button per tile. Red undoes the last entry.

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

Shared with the studio

\n

Four people can add entries to Materials.

\n
\n
\n IO\n TR\n ML\n +1\n
\n
\n\n
\n
\n

Remove this budget

\n

Its entries stay in the ledger and move to Unsorted.

\n
\n
    \n
  • Pause the budget until next month
    • \n
  • Delete the budget for good
    • \n
\n
\n\n
\n

Nudges for this budget

\n
\n
    \n
  • Budget at 80%
    • \n
  • Receipt missing
    • \n
  • Friday summary
    • \n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Board
    2. \n
  2. Entries
    3. \n
  3. New
    4. \n
\n
\n\n
\n
\n
\n Week 21\n

Add an entry

\n

Four fields and it is on the board. A receipt can follow later.

\n
\n
\n Back to entries\n
\n
\n\n
\n

Unfiled receipts

\n

3oldest is 12 days

\n
\n\n
\n
\n

The entry

\n

The bank feed fills in the day and the payee when it can.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Enter a number, such as 23.50.\n
\n
\n \n \n
\n
\n \n CancelAdd entry\n
\n
\n
\n\n
\n

Still to log this week

\n

Planned payments that have no entry yet. Adding one ticks it off here.

\n
\n
    \n
  • Studio rent 1,450.00
    • \n
  • Print run 312.80
    • \n
  • Courier, two parcels 23.50
    • \n
  • Framing, six prints 180.00
    • \n
  • Type licence 96.00
    • \n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Board
    2. \n
  2. Guide
    3. \n
  3. Budgets
    4. \n
\n
\n\n
\n
\n
\n Guide\n

How a board is put together

\n

Budgets, entries and the small parts every tile is made of.

\n
\n
\n Add entry\n
\n
\n\n
\n \n
\n

One subject per tile

\n

If a tile needs a second title, it is two tiles.

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

Budgets

\n

A budget is a sum set aside for one purpose and one month. It is never topped up silently: moving money in leaves a line in the ledger.

\n

Adding an entry

\n

Type the amount and pick a budget, or run chronoskin add 64 materials from the terminal. The bank feed fills in the rest.

\n

What an entry keeps

\n
    \n
  • The amount, the day and who logged it
    • \n
  • The budget it was taken from
    • \n
  • A photo of the receipt, when there is one
    • \n
\n

Questions

\n
\n
\n Can an entry sit in two budgets?\n

No. Split it into two entries, one for each.

\n
\n
\n Who can close a month?\n

Whoever opened the board, and anyone they name.

\n
\n
\n What does the bank feed fill in?\n

The day, the amount and the payee. The budget is still yours to choose.

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

Labels

\n

Pills mark state, squares count.

\n
\n
\n Draft\n Beta\n New\n 12\n Paid\n Pending\n Overdue\n
\n
\n\n
\n
\n

Further reading

\n

A link when new, visited, under the pointer and pressed.

\n
\n

\n Month end\n Receipts\n Entries\n Add one\n

\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.landing.s04.p01.t11.u02\",\n \"library\": \"2026.10.09-1346\",\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-41b2\",\n \"short\": \"v1-bg-41b2\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #111113;\n --color-canvas: #111113;\n --color-surface: #1d1c20;\n --color-surface-alt: #29292b;\n --color-surface-strong: #323238;\n --color-bar: #111113;\n --color-bar-text: #ffffff;\n --color-bar-alt: #1b1b1e;\n --color-bar-alt-text: #a9a9a9;\n --color-inverse: #ffffff;\n --color-inverse-text: #111113;\n --color-text: #e0e0e0;\n --color-text-muted: #a9a9a9;\n --color-heading: #ffffff;\n --color-heading-alt: #eeeeee;\n --color-link: #768cff;\n --color-link-quiet: #a9a9a9;\n --color-link-visited: #9292af;\n --color-link-hover: #ffffff;\n --color-link-active: #5871ff;\n --color-border: rgb(255 255 255 / 0.08);\n --color-border-strong: rgb(255 255 255 / 0.16);\n --color-border-muted: #2b292e;\n --color-accent: #5e69d1;\n --color-accent-text: #ffffff;\n --color-accent-alt: #3ecf8e;\n --color-fill-1: #182030;\n --color-fill-2: #283830;\n --color-fill-3: #201820;\n --color-fill-4: #2b292e;\n --color-button: #5e69d1;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #29292b;\n --color-button-secondary-text: #ffffff;\n --color-input: #111113;\n --color-input-text: #e0e0e0;\n --color-input-border: #505051;\n --color-disabled: #29292b;\n --color-disabled-text: #838286;\n --color-danger: #f24822;\n --color-danger-surface: #201818;\n --color-success: #3ecf8e;\n --color-warning: #f7be2b;\n --color-notice: #1a3045;\n --color-notice-text: #bae6fd;\n --color-focus: #768cff;\n --color-shadow: #000000;\n --color-overlay: rgb(17 17 19 / 0.8);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Inter Variable\", system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n --font-heading: \"Geist Mono\", \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --font-ui: \"Geist Mono\", \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --font-mono: \"Geist Mono\", \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 14px;\n --text-small: 14px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 44px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 18px;\n --line-body: 1.5;\n --line-heading: 1.25;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 500;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\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: 6px;\n --radius-panel: 8px;\n --radius-pill: 9999px;\n --radius-page: 12px;\n --shadow-panel: 0 0 0 1px var(--color-border-strong), 0 1px 3px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 5%, transparent);\n --shadow-control-hover: 0 1px 3px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-control-pressed: inset 0 1px 2px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-dialog: 0 10px 15px -3px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-text: none;\n --fill-page: 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) 85%, var(--color-button-text));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n --transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;\n --backdrop-blur: 0px;\n}\n" } }