{ "id": "v1-bg-7331", "long_id": "v1.bento-grids.docs.s07.p03.t03.u01", "name": "Documentation hub 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": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A documentation home page laid out as a bento: the ways into the docs (a quickstart, the reference, the libraries, the guides, the status, what is new) are rounded cells of unequal width in a grid of five tracks, with the largest cell asking the reader where to start. Cells are cream on sage paper and every one is drawn with a 2px ink outline and no shadow, a few of them filled flat with lime, butter or clay, and the header is the two-row bar of a documentation site with a search field in its middle. The form was common for developer documentation, help centres and product handbooks from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-7331", "preview_url": "https://chrono.skin/s/v1-bg-7331/specimen.html", "files": { "STYLE.md": "# Documentation hub bento, 2025\n\n## Summary\n\nA documentation home page laid out as a bento: the ways into the docs (a quickstart, the reference, the libraries, the guides, the status, what is new) are rounded cells of unequal width in a grid of five tracks, with the largest cell asking the reader where to start. Cells are cream on sage paper and every one is drawn with a 2px ink outline and no shadow, a few of them filled flat with lime, butter or clay, and the header is the two-row bar of a documentation site with a search field in its middle. The form was common for developer documentation, help centres and product handbooks from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1240px, designed at a 1440px viewport, padded by `--space-5` (20px) at the sides. The header's and the footer's rules run the full width; everything else stays in the column.\n- `.ds-nav` is sticky and has two rows. The first, `--size-nav` (56px) tall, holds the `.ds-brand`, a version badge, the search field `.ds-nav__search` (at most `--size-search`, 400px, centred) and at the right one small button and the account `.ds-avatar` with its `.ds-menu`. Under a faint rule the second row, `--size-subnav` (44px), holds the sections as plain text links; the current one is underlined with `--border-width-strong` in `--color-link`, and one of them opens a `.ds-menu`. A status line sits at the right end of the second row.\n- `.ds-grid` has five equal tracks (about 237px). A cell takes one track by default, two with `--w2`, three with `--w3`, all five with `--full`, and two rows with `--tall`. A cell is at least `--size-row` (212px) tall; inside `.ds-grid--auto`, in the rail and with `--flush` it follows its content.\n- The home page is one grid. Rows one and two: the `.ds-hero` cell, three tracks by two rows, with a two-track code cell over two one-track cells beside it. Row three: a two-track list, a one-track status cell, a two-track `.ds-carousel`. Row four: the `.ds-stats` strip in a `--full --flush` cell. Row five: a two-track cell, a one-track cell and the two-track `--accent` cell. No two neighbouring rows split the same way.\n- Cells never touch: the gap is `--space-gap` (14px) in both directions, the padding inside a cell `--space-cell` (24px), in the hero `--space-7` (40px).\n- Spacing scale: `--space-1` 4px (pill padding, title to caption), `--space-2` 8px (button gap, label to control, chips), `--space-3` 12px (control padding, table cell padding, cell head to body), `--space-4` 16px (stack gap inside a cell, form gap, list row padding), `--space-5` 20px (page gutter, tab gap, under the page header), `--space-6` 28px (above the first cell, footer padding), `--space-7` 40px (hero padding, above a section label), `--space-8` 56px (under the last cell, dialog stage), `--space-9` 88px (textarea height).\n- Controls are `--size-control` (36px) tall, `--size-control-large` (46px) in the hero, 28px with `--small`; icon tiles are `--size-icon` (36px) with a `--size-glyph` (18px) line icon; an avatar is `--size-avatar` (32px).\n- Inner pages (a list of guides, one guide, a reference page, a settings page) have no hero. A view starts `--space-6` under the bar with the `.ds-breadcrumb`, then the `.ds-page-header` on the bare page: title at `--text-h1` with an optional badge beside it, one line of text, buttons at the right, and a rule under it. Below, `.ds-layout` splits the column into `.ds-layout__main` and a `.ds-layout__rail` of `--size-rail` (252px) at the right, sticky under the bar. The main column starts with an optional `.ds-toolbar` holding the `.ds-tabs` and continues with a `.ds-grid--auto` of the same five tracks, in which cells pair as three and two or take the full width. The rail is a stack of small cells: a `.ds-sidebar`, a progress cell, a legend. A guide has no page header: its `.ds-prose` starts with the h1 in the first cell.\n- Views: `home` is the hub (hero, quickstart sample, reference, libraries, starter guides, status, what is new, the figures, the forum, change notes, the call for a key); `guides` is the list (tabs, the list with pagination, two reading paths in panels, the empty state for migration guides, topics and authors in the rail); `guide` is one guide (prose, code, notices, links, questions as an accordion, the page's contents and its author in the rail); `reference` is one resource (the endpoint table, parameters as an accordion, a sample answer, usage and the label legend in the rail); `keys` is the account page (the form for a key with its buttons, the dialog that revokes one, the table of keys, safety switches and a notice in the rail). The second row marks Overview, Guides, API reference or Keys; a guide marks Guides.\n- Below 1080px the grid drops to two tracks, `--w3` and the hero take both, and the rail moves under the main column as two columns. Below 640px everything is one column, the search field takes the room between brand and avatar, the version badge, the header button, the key hint and the status line hide, the links of the second row wrap, the stats strip becomes two by two, a table hides its `.ds-table__extra` columns and scrolls inside `.ds-table__scroll`, a drop-down in the second row opens as a full row inset by `--space-4`, and 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- A neutral graphite ramp without any blue in it: `--color-page`, `--color-canvas` and `--color-bar` `#1c1c1c`; cells `--color-surface` `#232323`; panels, the dialog and current navigation items `--color-surface-alt` `#2e2e2e`; current tab, neutral badges, chart bars and inline code `--color-surface-strong` `#3e3e3e`. `--color-bar-alt` and `--color-input` are the darker `#161616` (table head strip, tab row, form controls).\n- Text: `--color-bar-text` `#ffffff` (brand and hovered navigation), `--color-heading` `#ededed`, `--color-text` and `--color-heading-alt` `#dddddd`, `--color-text-muted`, `--color-link-quiet` and `--color-bar-alt-text` `#a0a0a0`, `--color-disabled-text` `#707070`.\n- Green leads. `--color-button` and `--color-accent` are the deeper green `#37996b` with white text: primary button, accent badge, highlighted chart bar, call-to-action cell. `--color-link`, `--color-focus` and `--color-success` are the brighter `#3ecf8e`: links, icons, the accent phrase of the hero title.\n- `--color-accent-alt` `#569cd6` is a quiet blue for \"new\" markers, passed checks, switched-on toggles and code keys, so that green stays the brand colour and the status colour only.\n- Borders are solid greys, not translucent white: `--color-border` `#343434`, `--color-border-strong` and `--color-input-border` `#505050`, `--color-border-muted` `#2e2e2e`.\n- Feature cells are barely tinted: `--color-fill-1` `#002533` (teal), `--color-fill-2` `#28302c` (green-grey), `--color-fill-3` `#0c0f24` (navy), `--color-fill-4` `#2e2e2e`.\n- Status: `--color-warning` `#f7be2b`, `--color-danger` `#fa1f41` on `--color-danger-surface` `#201818`; the notice is `--color-notice` `#002533` with `--color-notice-text` `#dddddd`. `--color-inverse` `#ededed` with `--color-inverse-text` `#1c1c1c` is the button on the accent cell.\n- One neutral grotesque, Inter first with the system sans behind it, for `--font-body`, `--font-heading` and `--font-ui`; `--font-mono` is the system mono.\n- Heavy headings: `--weight-display` 800 on the hero title and stat figures, `--weight-heading` and `--weight-bold` 700 on every title, `--weight-ui` 600 on buttons, navigation, tabs and labels, `--weight-body` 400.\n- Sizes are a step up from the usual: `--text-display` 56px at `--line-display` 1.06, `--text-h1` 46px, `--text-h2` 32px, `--text-h3` 22px at `--line-heading` 1.15; `--text-large` 20px for the lead and cell titles.\n- `--text-base` and `--text-ui` are both 16px (`--line-body` 1.5), so buttons, navigation and form controls read as large as the body; `--text-small` 14px is for captions, tables and lists.\n- Links in running text are underlined at rest and on hover (`--link-decoration`, `--link-decoration-hover` underline); quiet links in navigation, sidebar and footer are not (`--link-decoration-quiet` none). No tracking, no transforms.\n- Medium corners: `--radius-page` 20px on cells, `--radius-panel` 16px on panels, tables, notices and the dialog, `--radius-control` 11px on buttons, inputs and icon tiles, `--radius-pill` for badges, tabs and switches.\n- Cells are lit, not dropped: `--shadow-panel` is a 1px inset line of `--color-heading` at 5% on the top edge plus a 20px halo of `--color-accent` at 32%, so every cell stands in a glow of the accent colour that fills the gaps of the grid; the dialog has the same halo at 36%.\n- `--fill-panel` is a vertical gradient from 2% to 6% of `--color-text` laid into `--color-surface`: the cell is a touch stronger at the bottom than at the top.\n- Buttons are lit from above: `--fill-button` runs from the button colour mixed 15% with white down to the plain colour, `--shadow-control` adds an inset top line of `--color-heading` at 10% and a 2px drop of `--color-shadow` at 28%; hover deepens the drop to 4px at 25% and `--fill-button-hover` moves 15% toward the button's text colour.\n- `--fill-bar` is `--color-bar` at 80% so the page shows through the floating navigation pill. `--border-width` is 1px, `--border-width-strong` 2px for the focus ring. `--transition` is a 0.2s fade of colours and shadow.\n- The smallest text is 12px, written as `calc(var(--text-small) * 0.857)` because the vocabulary has no token for it: badges, hints, list meta, stat notes, the footer strip. Code in a cell is `calc(var(--text-small) * 0.886)`.\n- Which text sits on which fill: `--color-bar-text` on the navigation pill (current item on `--color-surface-alt`); `--color-heading`, `--color-text` and `--color-text-muted` on cells, including the hero cell, the footer cell and the `--color-fill-*` cells; `--color-accent-text` on the accent cell; `--color-bar-alt-text` on the table head strip and the tab row; `--color-inverse-text` only on the `--inverse` button. Table rows have no fill of their own and take `--color-text` on the cell.\n- Fills 1 to 3 are the corner of a diagonal gradient that fades to `--color-surface`; fill 4 is flat. At most half the cells of a grid are tinted.\n- The hero glow and the `--glow` cell are a radial fade from `--color-fill-2` to transparent, so a glow is always the palette's own tint (green-grey 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% with a 30% hairline), the danger button's hairline (danger at 45%) and hover fill, notice borders.\n\n## Components\n\n- `.ds-page` on ``: sage page, family and 15px text. `.ds-page__inner` is the 1240px column of a view.\n- `.ds-nav`: the two-row header. `.ds-nav__inner` (brand, badge, `.ds-nav__search` with `.ds-nav__glass`, `.ds-nav__field` and `.ds-nav__key`, `.ds-nav__actions` with `.ds-nav__account`), `.ds-nav__rule`, then `.ds-nav__sub` with `.ds-nav__links` of `.ds-nav__entry` holding a `.ds-nav__link` (`is-current` by hand) and `.ds-nav__meta` with a `.ds-nav__dot`. `.ds-nav__extra` marks what hides on a phone.\n- `.ds-brand`: the site's mark and name at the left of the first row. `.ds-brand__mark` is a 26px tile dressed like the primary button (`--fill-button`, `--color-button-text`, outline, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading family at 17px. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-hero`: the largest cell of the home grid, always together with `.ds-grid__cell--w3` and `--tall`. A badge, `.ds-hero__title`, `.ds-hero__lead` at the top; `.ds-hero__actions` with two large buttons and `.ds-hero__note` with a row of badge links at the bottom.\n- `.ds-grid`: the bento. `.ds-grid__cell` with spans `--w2`, `--w3`, `--full`, `--tall`; `--stack` (16px between children), `--row` (children side by side), `--flush` (no padding, clipped, for the stats strip and the dialog stage), fills `--fill-1` to `--fill-4`, `--accent` (the closing call), `--bare` (outline only). Inside: `.ds-grid__head` (title left, badge right), `.ds-grid__icon` with `.ds-grid__glyph`, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__copy`, `.ds-grid__visual` and `.ds-grid__actions` (both pushed to the bottom), `.ds-grid__more` (the cell's one link). `.ds-grid--auto` is for cells that hold components.\n- `.ds-layout`: main column and rail of an inner page, `.ds-layout__main` and `.ds-layout__rail`. `.ds-section__label` with `.ds-section__title` is a small heading on the bare page above a further run of cells.\n- `.ds-page-header`: the head of an inner page, on the bare page with a rule under it. `.ds-page-header__copy` holds `.ds-page-header__title` (an h1, optionally with a badge) and `.ds-page-header__text`; `.ds-page-header__actions` sits at the right. Put a `.ds-breadcrumb` above it; never use it with a `.ds-hero`.\n- `.ds-stat`: one figure: `.ds-stat__label` over `.ds-stat__value` (36px, with an optional `.ds-stat__unit`) over a 12px `.ds-stat__note` (`--success`, `--warning`, `--danger`). `.ds-stats` is the row: four figures in one `--full --flush` cell, parted by upright rules. `.ds-stat--display` raises a single figure to the display size.\n- `.ds-prose`: long text in a full-width cell; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: underlined inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for grey links without underline. `.ds-links` lays several out in a row.\n- `.ds-button`: green primary with an ink lip. `--secondary` cream with an ink outline, `--danger` red text on `--color-danger-surface` (never a solid red block), `--inverse` ink for the accent cell, `--large`, `--small`; states `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px pill with an outline. `--accent`, `--new`, `--count` (a number in a sidebar row), optional `.ds-badge__dot`; status labels `--success` (stable, live), `--warning` (beta, unused), `--danger` (leaving, failed). `.ds-chips` wraps several.\n- `.ds-endpoint`: a method in `.ds-endpoint__verb` and a path, in mono; used in tables and cell heads.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full`) with `.ds-form__label`, `.ds-form__control` (`--area`; `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 14px-rounded box with a `--fill-bar-alt` head and faint row rules, inside `.ds-table__scroll`; `.ds-table__link` on a row's first cell, `.ds-table__num`, `.ds-table__muted`, `.ds-table__extra` (hidden on a phone), `tr.is-current`.\n- `.ds-list`: rule-separated `.ds-list__item` with `.ds-list__title`, `.ds-list__text`, `.ds-list__meta`; `.ds-list__row` puts a badge beside the title. `.ds-rows` with `.ds-rows__item` is the plain label-and-control list used for switches.\n- `.ds-panel`: the small 14px card inside a cell, `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__meta`; `.ds-panels` puts two side by side.\n- `.ds-tabs`: text labels on a rule, `.ds-tabs__tab`, the current one (`is-current`) underlined in `--color-link`. `.ds-toolbar` holds it above the main column's grid.\n- `.ds-sidebar`: a rail cell with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled): topics of a list, the contents of a page.\n- `.ds-notice`: information box with `.ds-notice__title` and `.ds-notice__text`; `--error` for the red variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items; `is-current` outlined, `is-disabled` greyed.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` parted by slashes, the last `is-current`; the first thing of an inner view.\n- `.ds-dialog`: 460px box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close` with `.ds-dialog__glyph`), `.ds-dialog__body`, `.ds-dialog__actions`, shown on a `.ds-stage` filled with `--color-overlay` inside a `--flush` cell.\n- `.ds-empty`: centred `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `--bare` cell.\n- `.ds-code`: a mono sample in a cell, with `.ds-code__key` and `.ds-code__str`. `.ds-checks` with `.ds-checks__item` and `.ds-checks__mark` is a ticked list; `.ds-chart` with `.ds-chart__bar` a small bar chart.\n- `.ds-menu`: a drop-down under its trigger, 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. Used under Libraries and under the account avatar.\n- `.ds-accordion`: `
` as `.ds-accordion__item` with a `.ds-accordion__head` summary and `.ds-accordion__body`; questions under a guide, parameters of an endpoint.\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`. For one sentence of explanation, never for an action.\n- `.ds-carousel`: `.ds-carousel__track` of `.ds-carousel__slide` with scroll snap, one showing; `.ds-carousel__foot` holds `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__arrows` of `.ds-carousel__arrow` with a `.ds-carousel__glyph`. Used for what is new.\n- `.ds-switch`: a label around `.ds-switch__input` (a checkbox) and `.ds-switch__track`; on is `--color-accent-alt` with an ink knob.\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). Uptime, quota, place in a reading path.\n- `.ds-avatar`: initials on a disc, `--accent`, `--large`; `.ds-avatars` overlaps several; `.ds-person` puts one beside `.ds-person__copy` with `.ds-person__name` and `.ds-person__meta`.\n- `.ds-footer`: one line under a rule: `.ds-footer__inner` with `.ds-footer__brand`, a `.ds-footer__list` of `.ds-footer__link` and `.ds-footer__text`.\n\n## Never\n\n- `block-gap <= 40px`: cells sit 14px apart and nothing stands further than 40px from its neighbour.\n- `content-width <= 1240px`: content stays in the centred column.\n- `palette-colours <= 36`: graphite greys, two greens and one blue; no purple, no second brand colour.\n- `font-weight <= 800`: 800 is the hero weight; nothing is heavier.\n- `font-size <= 56px`: the hero heading tops out at 56px; weight carries the emphasis, not size.\n- `font-size >= 12px`: the smallest text is 12px.\n- `font-families <= 2`: one sans for everything plus the mono for code.\n- `line-height <= 1.6`: body text sits at 1.5.\n- `uppercase-text <= 1%`: nothing is set in capitals.\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 way into the docs is a `.ds-grid__cell` whose span keeps its row uneven, with a title, one caption and either a `.ds-grid__more` link or one small visual; a new box inside a cell is a `.ds-panel`; a new label is a `.ds-badge`; anything that belongs beside the working column goes in the rail as a small cell. Use tokens only: fills are `--fill-panel`, a `--color-surface*` or a flat `--color-fill-*`, outlines are `--border-width` in `--color-border`, corners `--radius-page` for cells, `--radius-panel` inside them and `--radius-control` for controls, spacing from the `--space-*` scale. Keep one subject per cell, part cells with the gap and never with a rule, and do not add a blurred shadow, a gradient fill or a second accent.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1240px;\n --size-measure: 660px;\n --size-nav: 56px;\n --size-subnav: 44px;\n --size-rail: 252px;\n --size-search: 400px;\n --size-control: 36px;\n --size-control-large: 46px;\n --size-row: 212px;\n --size-icon: 36px;\n --size-glyph: 18px;\n --size-check: 16px;\n --size-dot: 8px;\n --size-chart: 96px;\n --size-switch: 34px;\n --size-knob: 14px;\n --size-avatar: 32px;\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: 28px;\n --space-7: 40px;\n --space-8: 56px;\n --space-9: 88px;\n --space-gap: 14px;\n --space-cell: 24px;\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: var(--space-6) var(--space-5) var(--space-8);\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: a documentation header of two rows. Brand, search and account above; the sections below */\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}\n.ds-nav__inner,\n.ds-nav__sub {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__inner {\n min-height: var(--size-nav);\n}\n.ds-nav__sub {\n min-height: var(--size-subnav);\n justify-content: space-between;\n}\n.ds-nav__rule {\n height: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-nav__search {\n position: relative;\n display: flex;\n flex: 0 1 var(--size-search);\n align-items: center;\n margin: 0 auto;\n color: var(--color-input-text);\n}\n.ds-nav__glass {\n position: absolute;\n left: var(--space-3);\n width: var(--size-check);\n height: var(--size-check);\n opacity: 0.6;\n pointer-events: none;\n}\n.ds-nav__field {\n width: 100%;\n min-height: var(--size-control);\n padding: 0 var(--space-7) 0 calc(var(--space-6) + var(--space-2));\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-nav__field::placeholder {\n color: var(--color-disabled-text);\n}\n.ds-nav__field:focus-visible,\n.ds-nav__field.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-nav__key {\n position: absolute;\n right: var(--space-2);\n padding: 0 var(--space-2);\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: calc(var(--text-small) * 0.857);\n line-height: 1.7;\n}\n.ds-nav__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-nav__account {\n display: flex;\n padding: 0;\n background: transparent;\n border: 0;\n border-radius: var(--radius-pill);\n cursor: pointer;\n}\n.ds-nav__account:focus-visible,\n.ds-nav__account.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n gap: 0 var(--space-5);\n min-height: var(--size-subnav);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__entry {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n min-height: var(--size-subnav);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\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 section; one guide belongs to Guides */\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(#guides:target) .ds-nav__link[href=\"#guides\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guides\"],\n.ds-page:has(#reference:target) .ds-nav__link[href=\"#reference\"],\n.ds-page:has(#keys:target) .ds-nav__link[href=\"#keys\"] {\n color: var(--color-bar-text);\n border-bottom-color: var(--color-link);\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 flex: none;\n align-items: center;\n gap: var(--space-2);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-link-quiet);\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/* hero: the largest cell of the hub. A question, a lead and the two ways in */\n.ds-grid .ds-hero {\n justify-content: space-between;\n gap: var(--space-6);\n padding: var(--space-7);\n background: radial-gradient(circle at 100% 0, var(--color-fill-1), transparent 58%), var(--fill-panel);\n}\n.ds-hero__title {\n max-width: 15ch;\n margin: var(--space-4) 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: 46ch;\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n line-height: 1.5;\n color: var(--color-text-muted);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-hero__note {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* section label: a small heading on the bare page above a run of cells */\n.ds-section__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin: var(--space-7) 0 var(--space-4);\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\n/* inner page: the trail, then the page header on the bare page with a rule under it */\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-5);\n padding-bottom: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 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-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* layout of an inner page: the working column and a narrow rail at the right */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-rail);\n align-items: start;\n gap: var(--space-gap);\n}\n.ds-layout__main {\n min-width: 0;\n}\n.ds-layout__rail {\n position: sticky;\n top: calc(var(--size-nav) + var(--size-subnav) + var(--space-4));\n display: grid;\n gap: var(--space-gap);\n min-width: 0;\n}\n\n/* grid: the bento. Five tracks; a cell takes one, two, three or all of them */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n grid-auto-flow: dense;\n gap: var(--space-gap);\n}\n.ds-grid--auto .ds-grid__cell {\n min-height: 0;\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: var(--size-row);\n padding: var(--space-cell);\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--w3 {\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--stack {\n gap: var(--space-4);\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--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n.ds-grid__cell--flush {\n min-height: 0;\n padding: 0;\n overflow: hidden;\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-3);\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__head .ds-grid__icon {\n margin-bottom: 0;\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.25;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n text-decoration: none;\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 max-width: 52ch;\n margin-top: var(--space-2);\n font-size: var(--text-base);\n color: var(--color-accent-text);\n opacity: 0.85;\n}\n.ds-grid__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-4);\n}\n.ds-grid__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-4);\n}\n.ds-grid__more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n margin-top: auto;\n padding-top: var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover,\n.ds-grid__more.is-hover {\n color: var(--color-link-hover);\n}\n\n/* stats: one cell cut into figures by upright rules */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n padding: var(--space-cell) 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n padding: 0 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\n/* tabs: a row of labels on a rule; the current one is underlined */\n.ds-tabs {\n display: flex;\n align-items: stretch;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) 0 var(--space-3);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\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 color: var(--color-text-muted);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-link);\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: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-4);\n margin-bottom: var(--space-gap);\n}\n.ds-toolbar .ds-tabs {\n flex: 1;\n}\n\n/* endpoint: a method label and a path in mono */\n.ds-endpoint {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.928);\n color: var(--color-text);\n}\n.ds-endpoint__verb {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-radius: calc(var(--radius-control) / 2);\n font-weight: var(--weight-bold);\n line-height: 1.7;\n}\n\n/* footer: one quiet line under a rule */\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: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-6) 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-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-footer__text {\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n}\n.ds-footer__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-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/* 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/* 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.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--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.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-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\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/* 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/* switch: an on/off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n flex: none;\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n display: block;\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 transition: var(--transition);\n}\n.ds-switch__track::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__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: var(--color-accent-alt);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n left: auto;\n right: calc(var(--space-1) / 2);\n background: var(--color-inverse);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n\n/* menu: a drop-down under its trigger, opened by hover or keyboard focus */\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.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-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/* carousel: one slide showing, the rest a swipe away, dots under it */\n.ds-carousel {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-link);\n border-color: transparent;\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-2);\n}\n.ds-carousel__arrow {\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: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-carousel__glyph {\n width: var(--size-check);\n height: var(--size-check);\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.ds-progress__fill--3 {\n width: 62%;\n}\n.ds-progress__fill--4 {\n width: 81%;\n}\n.ds-progress__fill--5 {\n width: 96%;\n}\n.ds-progress__fill--success {\n background: var(--color-success);\n}\n.ds-progress__fill--warning {\n background: var(--color-warning);\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: var(--size-avatar);\n height: var(--size-avatar);\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.ds-person {\n display: flex;\n color: inherit;\n text-decoration: none;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__copy {\n display: grid;\n min-width: 0;\n}\n.ds-person__name {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.3;\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-person__meta {\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n.ds-person:hover .ds-person__name,\n.ds-person.is-hover .ds-person__name {\n color: var(--color-link);\n}\n\n/* this layout's own turns on the shared components */\n.ds-brand__mark {\n width: calc(var(--size-glyph) + var(--space-2));\n height: calc(var(--size-glyph) + var(--space-2));\n}\n.ds-layout__rail .ds-grid__cell {\n min-height: 0;\n}\n.ds-table td {\n background: transparent;\n}\n.ds-table tr.is-current td {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__title {\n margin-bottom: var(--space-2);\n}\n.ds-code {\n overflow-x: auto;\n}\n.ds-dialog {\n margin: 0 auto;\n}\n.ds-stage {\n flex: 1;\n border-radius: calc(var(--radius-page) - var(--border-width));\n}\n.ds-list__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n\n@media (max-width: 1080px) {\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 .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-auto-rows: auto;\n }\n .ds-grid__cell--w3,\n .ds-hero {\n grid-column: 1 / -1;\n }\n .ds-grid__cell--tall {\n grid-row: auto;\n }\n .ds-layout {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-layout__rail {\n position: static;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n}\n@media (max-width: 640px) {\n .ds-grid,\n .ds-form,\n .ds-panels,\n .ds-layout__rail {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell--w2 {\n grid-column: auto;\n }\n .ds-grid__cell,\n .ds-hero {\n padding: var(--space-5);\n }\n .ds-grid__cell--flush {\n padding: 0;\n }\n .ds-page__inner {\n padding: var(--space-5) var(--space-4) var(--space-7);\n }\n .ds-nav__inner,\n .ds-nav__sub,\n .ds-footer__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__inner {\n gap: var(--space-3);\n }\n .ds-nav__search {\n flex: 1;\n min-width: 0;\n }\n .ds-nav__extra,\n .ds-nav__key,\n .ds-nav__meta,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-nav__field {\n padding-right: var(--space-3);\n }\n .ds-nav__links {\n gap: 0 var(--space-4);\n }\n .ds-menu__list {\n min-width: 20ch;\n }\n .ds-hero__title,\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h3);\n }\n .ds-stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5) 0;\n padding: var(--space-5) 0;\n }\n .ds-stats .ds-stat {\n padding: 0 var(--space-5);\n }\n .ds-stats .ds-stat:nth-child(odd) {\n border-left: 0;\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-pagination,\n .ds-form__actions,\n .ds-dialog__actions {\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}\n\n/* phone: the drop-down in the second row takes that row's width and stays inside the window */\n@media (max-width: 640px) {\n .ds-nav__sub {\n position: relative;\n }\n .ds-nav__sub .ds-menu {\n position: static;\n }\n .ds-nav__sub .ds-menu__list {\n left: var(--space-4);\n right: var(--space-4);\n min-width: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin docs, documentation hub specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n Docs v4.2\n \n
\n Get a key\n
\n \n \n
\n
\n
\n
\n
\n \n All systems normal\n
\n
\n\n
\n
\n
\n
\n
\n
\n Version 4.2 adds recurring holds\n

Put time on your side of the API

\n

chronoskin turns calendars, time zones and opening hours into one bookable schedule. Start with a guide, or go straight to the endpoint you need.

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

First request in a minute

\n curl\n
\n 
curl api.chronoskin.example/v4/slots \\\n  -H \"Authorization: Bearer ck_test_...\" \\\n  -d calendar=\"studio\" \\\n  -d day=\"2025-03-14\"
\n Follow the quickstart\n
\n\n
\n \n

API reference

\n

42 endpoints, each with a request you can copy.

\n Open the reference\n
\n\n
\n \n

Libraries

\n

Typed clients for four languages.

\n
\n TSPyGoRb\n
\n
\n\n \n\n
\n
\n

Status

\n

The last 30 days, measured at the edge?Timed from six regions every minute, not from inside our own network.

\n
\n
\n Slots API 99.98%\n \n
\n
\n Webhooks 99.2%\n \n
\n
\n\n
\n
\n
    \n
  • \n New in 4.2\n

    Recurring holds

    \n

    Reserve the same hour every week with one call, and release the whole series with another.

    \n
    • \n
  • \n New in 4.1\n

    Signed webhooks

    \n

    Every delivery now carries a signature you can check in three lines.

    \n
    • \n
  • \n New in 4.0\n

    One clock for every zone

    \n

    Times are sent as instants and shown in the calendar's own zone.

    \n
    • \n
\n
\n \n \n \n \n \n
\n
\n
\n\n
\n
    \n
  • Endpoints42Across six resources
    • \n
  • Median response38 ms4 ms faster than in 4.1
    • \n
  • Requests a minute600On a live key; 60 on a test key
    • \n
  • Guides283 being rewritten for 4.2
    • \n
\n
\n\n
\n

Ask the people who wrote it

\n

The forum is answered by the same six people who maintain the API, usually within a working day.

\n
\n IKTMLORS+2\n Open the forum\n
\n
\n\n
\n

Change notes

\n

Choose what reaches your inbox.

\n
\n
    \n
  • Breaking changes
    • \n
  • New endpoints
    • \n
  • Monthly digest
    • \n
\n
\n
\n\n
\n

Start with a test key

\n

Free, rate limited, and it cannot touch a real calendar.

\n
\n Create a key\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Docs
    2. \n
  2. Guides
    3. \n
  3. All guides
    4. \n
\n
\n
\n

Guides

\n

Twenty-eight worked examples, each one task from the first request to the last check.

\n
\n
\n Reference\n Start with the quickstart\n
\n
\n
\n
\n
\n \n
\n
\n
\n
    \n
  • \n
    Hold a slot, then confirm itUpdated for 4.2
    \n

    Reserve a time for ten minutes while your customer pays, and confirm or release it afterwards.

    \n Bookings, 8 minutes, by Ines Kovar\n
    • \n
  • \n
    Opening hours across time zonesCalendars
    \n

    Describe a week once and let the API answer in the zone of whoever is asking.

    \n Calendars, 12 minutes, by Tomas Meier\n
    • \n
  • \n
    Receive and verify webhooksWebhooks
    \n

    Check the signature, answer within five seconds and handle a delivery that arrives twice.

    \n Webhooks, 6 minutes, by Lena Okafor\n
    • \n
  • \n
    Page through a long calendarGetting started
    \n

    Cursors, page sizes and why the last page can be empty.

    \n Getting started, 5 minutes, by Ravi Sen\n
    • \n
\n
\n \n
\n
\n
\n

Two ways through

\n
\n
\n

If you take bookings

\n

Quickstart, holding a slot, payments in between, then webhooks.

\n 4 guides, about 30 minutes\n
\n
\n

If you show availability

\n

Quickstart, opening hours, time zones, then caching the answers.

\n 4 guides, about 35 minutes\n
\n
\n
\n
\n
\n

No migration guides yet

\n

Version 4 has not removed anything, so there is nothing to migrate from.

\n Show all guides\n
\n
\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Docs
    2. \n
  2. Guides
    3. \n
  3. Hold a slot
    4. \n
\n
\n
\n
\n
\n
\n

Hold a slot, then confirm it

\n

A hold reserves a time for a short while without booking it. Use one whenever something has to happen between choosing a time and committing to it, such as a payment.

\n

Create the hold

\n

Send the calendar and the instant you want to POST /v4/holds. The answer carries an id and the moment the hold runs out, ten minutes later unless you ask for less.

\n
\n 
const hold = await chronoskin.holds.create({\n  calendar: \"studio\",\n  start: \"2025-03-14T09:30:00Z\",\n  minutes: 45,\n});
\n
\n

What can go wrong

\n
    \n
  • The time was taken a moment ago: the answer is 409 with the next free slot.
    • \n
  • The calendar is closed that day: the answer is 422.
    • \n
  • A test key can hold at most five slots at once.
    • \n
\n

Confirm or release

\n

When the payment succeeds, confirm the hold and it becomes a booking. If it fails, release it at once so the time is free again; do not wait for it to run out. The holds reference lists every field.

\n
\n
\n
\n
\n
A hold is not a booking

It is not sent to the customer's calendar and no webhook fires until you confirm it.

\n
Do not extend a hold in a loop

A hold can be extended once. A second attempt answers 409 and the slot is released.

\n
\n
\n
\n

Keep reading

\n
\n

\n Take a payment in between\n Quickstart, read\n Webhooks, hovered\n Holds reference, pressed\n

\n
\n
\n
\n

Questions about holds

\n
\n
\n
\n How long can a hold last?\n

Between one and thirty minutes. Ten is the default, and one extension of the same length is allowed.

\n
\n
\n Does a hold count against my rate limit?\n

Creating one is a request like any other. Holding it costs nothing.

\n
\n
\n Can two holds overlap?\n

Only when the calendar allows more than one booking at a time, such as a class with twelve places.

\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Docs
    2. \n
  2. API reference
    3. \n
  3. Holds
    4. \n
\n
\n
\n

Holds Stable

\n

Reserve a time for a few minutes before it becomes a booking. Six endpoints, all under /v4/holds.

\n
\n
\n Read the guide\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
EndpointWhat it doesStateA minute
POST/holdsCreate a holdStable600
GET/holds/:idRead one holdStable1,200
POST/holds/:id/confirmTurn it into a bookingStable600
POST/holds/:id/extendAdd time, onceBeta120
DELETE/holds/:idRelease itStable600
PUT/holds/:idReplace a holdLeaves in 5.060
\n
\n
\n
\n
\n

Parameters of a new hold

\n POST/holds\n
\n
\n
\n calendar, required\n

The calendar's short name or id. The key must have the bookings scope for it.

\n
\n
\n start, required\n

An instant in UTC. A local time without a zone is refused.

\n
\n
\n minutes\n

Length of the slot. Defaults to the calendar's own slot length.

\n
\n
\n expires_in\n

How long the hold lasts, in minutes, from 1 to 30.

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

Answer

\n 201\n
\n 
{\n  \"id\": \"hold_8fq2\",\n  \"calendar\": \"studio\",\n  \"minutes\": 45,\n  \"expires_at\": \"09:40:00Z\"\n}
\n
\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Docs
    2. \n
  2. Account
    3. \n
  3. API keys
    4. \n
\n
\n
\n

API keys

\n

A key is shown once, when it is made. Keep it out of the browser and out of your repository.

\n
\n
\n How keys work\n
\n
\n
\n
\n
\n
\n

New key

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Give the full address, starting with https.\n
\n
\n \n \n Shown beside the key in this list, never sent with a request.\n
\n \n
\n
\n \n Cancel\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Revoke this key?

\n \n
\n

Requests signed with the key named Old checkout will fail at once. This cannot be undone.

\n
\n Keep it\n \n
\n
\n
\n
\n
\n
\n

Your keys

\n Last used?Rounded to the hour, in your own time zone.\n
\n
\n \n \n \n \n \n \n \n \n \n \n
NameKindLast usedRequests today
Booking pageLiveToday, 14:008,412
Back officeLiveToday, 13:001,096
Old checkoutLive, unused41 days ago0
LaptopTestYesterday, 18:0037
\n
\n
\n
\n
\n \n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.docs.s07.p03.t03.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bento-grids\",\n \"years\": [\n 2022,\n 2026\n ]\n },\n \"archetype\": \"docs\",\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-7331\",\n \"short\": \"v1-bg-7331\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #1c1c1c;\n --color-canvas: #1c1c1c;\n --color-surface: #232323;\n --color-surface-alt: #2e2e2e;\n --color-surface-strong: #3e3e3e;\n --color-bar: #1c1c1c;\n --color-bar-text: #ffffff;\n --color-bar-alt: #161616;\n --color-bar-alt-text: #a0a0a0;\n --color-inverse: #ededed;\n --color-inverse-text: #1c1c1c;\n --color-text: #dddddd;\n --color-text-muted: #a0a0a0;\n --color-heading: #ededed;\n --color-heading-alt: #dddddd;\n --color-link: #3ecf8e;\n --color-link-quiet: #a0a0a0;\n --color-link-visited: #85e0b7;\n --color-link-hover: #ededed;\n --color-link-active: #37996b;\n --color-border: #343434;\n --color-border-strong: #505050;\n --color-border-muted: #2e2e2e;\n --color-accent: #37996b;\n --color-accent-text: #ffffff;\n --color-accent-alt: #569cd6;\n --color-fill-1: #002533;\n --color-fill-2: #28302c;\n --color-fill-3: #0c0f24;\n --color-fill-4: #2e2e2e;\n --color-button: #37996b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #2e2e2e;\n --color-button-secondary-text: #ededed;\n --color-input: #161616;\n --color-input-text: #dddddd;\n --color-input-border: #505050;\n --color-disabled: #2e2e2e;\n --color-disabled-text: #707070;\n --color-danger: #fa1f41;\n --color-danger-surface: #201818;\n --color-success: #3ecf8e;\n --color-warning: #f7be2b;\n --color-notice: #002533;\n --color-notice-text: #dddddd;\n --color-focus: #3ecf8e;\n --color-shadow: #000000;\n --color-overlay: rgb(22 22 22 / 0.8);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-heading: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-ui: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 56px;\n --text-h1: 46px;\n --text-h2: 32px;\n --text-h3: 22px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\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: 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" } }