{ "id": "v1-mp-7652", "long_id": "v1.modern-product.docs.s07.p06.t05.u02", "name": "Modern product support hub", "era": { "slug": "modern-product", "code": "mp", "name": "Modern product", "years": [ 2020, 2026 ], "description": "The big-brand product page of 2020 to 2026: very large tight headlines, full-bleed sections that alternate black, white and one saturated colour, generous rounded cards and pill buttons, product shown huge and centred, and motion on scroll: sections that fade and slide in, sticky stories, numbers that reveal." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "This is the support and help site of a big consumer brand between 2020 and 2026, here a maker of home audio: a full-bleed block of one hot pink with a very large, light serif question and one big search field, a row of rounded product tiles that overlaps its lower edge, and then sections that alternate blush white, pale pink and a deep wine. The bar across the top carries the brand in its middle and a wide drop-down of products, guides are read one step at a time beside a list of steps, and the products themselves are drawn in CSS. It was the common look of the help centres of device, audio and finance brands in the first half of the 2020s.", "url": "https://chrono.skin/s/v1-mp-7652", "preview_url": "https://chrono.skin/s/v1-mp-7652/specimen.html", "files": { "STYLE.md": "# Modern product support hub\n\n## Summary\n\nThis is the support and help site of a big consumer brand between 2020 and 2026, here a maker of home audio: a full-bleed block of one hot pink with a very large, light serif question and one big search field, a row of rounded product tiles that overlaps its lower edge, and then sections that alternate blush white, pale pink and a deep wine. The bar across the top carries the brand in its middle and a wide drop-down of products, guides are read one step at a time beside a list of steps, and the products themselves are drawn in CSS. It was the common look of the help centres of device, audio and finance brands in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1240px) wide with `--space-5` side padding; sections are full bleed and pad themselves with `--space-9` (112px), `--tight` with `--space-8`.\n- Navigation is `.ds-nav`, a bar `--size-nav` (68px) tall that stays at the top of the window, translucent, with a hairline under it. It has three columns: the sections at the left (one of them a `.ds-menu` that opens a wide panel of products), the brand in the middle, a contact link and the signed-in person's `.ds-avatar` at the right.\n- The home view stacks: `.ds-hero`, the full-bleed accent block, flush under the bar and rounded by `--radius-page` only at its lower corners, everything centred, with the `.ds-search` field and a row of small ghost buttons; `.ds-picker`, which pulls the `.ds-grid` of four product tiles up over the hero's lower edge; a section with the `.ds-carousel` of quick fixes; a `.ds-tone--alt` section with the `.ds-accordion` of questions beside two panels (a list of guides and the service status with a `.ds-progress`); a full-bleed inverse section of `.ds-stat` figures; and a section of three `.ds-way` cards with people. The footer is a dark band with rounded upper corners.\n- Inner pages have no hero. Inside `.ds-wrap` they open with `.ds-page-header` (breadcrumb, a large title, one line of text, at most two buttons at the right) on the page colour, then the working components. Tabs are a row of underlined words in `.ds-tabsrow`, with the badge key at its right. Content is `.ds-cols` (7 to 5), `.ds-cols--even`, or `.ds-cols--side` with the `.ds-sidebar` at the left in a `.ds-side` column that stays in place while the text scrolls.\n- Views. The specimen is the support site of a maker of speakers. `home` is the hub. `guide` is one step of a guide: the steps and an empty saved-guides box at the left, the step with its progress bar, text, notice and pagination, a \"did this work\" strip and related links. `repairs` has the tabs and badge key, the table of registered products, a repair in progress with its bar and stages, the open cancel dialog and three switches for updates. `contact` is the message form with its notices and buttons, the people who answer, questions as an accordion and a call-back block.\n- Below 1000px the bar becomes two rows (brand and account, then one strip that scrolls sideways from edge to edge and fades at the right: the sections, then the first link of each group of the product menu, whose panel is not shown), tiles go two by two, the contact cards and all columns stack. Below 640px the hero and the largest blocks take `--radius-panel`, the slide of the carousel stacks, tabs scroll sideways, the first name beside the `.ds-avatar` of `.ds-nav__me` is hidden and a wide table scrolls inside `.ds-table__wrap`. Below 640px a `.ds-tooltip__tip` takes the width of its paragraph, so it never leaves the window. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps, pagination), `--space-2` 8px (icon to text, progress bar height), `--space-3` 12px (between buttons, list details), `--space-4` 16px (form rows, list rows, tile gap), `--space-5` 24px (panel and tile padding, page gutter), `--space-6` 32px (hero to search, contact card padding), `--space-7` 48px (section head to content, slide padding), `--space-8` 72px (tight sections, top of the hero), `--space-9` 112px (sections, the overlap of the tiles).\n- Other sizes: `--size-mark` 30px, `--size-icon` 52px, `--size-control` 42px, `--size-search` 720px, `--size-tile` 280px, `--size-device` 112px (height of a drawn product), `--size-menu` 660px, `--size-avatar` 40px, `--size-tip` 240px, `--size-dialog` 480px.\n- Motion, in CSS only. An element with `.ds-reveal` fades in and rises by `--space-7` as it enters the window (`animation-timeline: view()`; `--2` and `--3` start later along a row). Buttons rise a little on hover and shrink to 97% when pressed, tiles rise by `--space-2`, the menu panel and tooltips fade and slide in, all through `--transition`. Animations are declared inside `@media (prefers-reduced-motion: no-preference)` and state only their start, so nothing is hidden where they do not run.\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\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of four grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. An inverse block (`--fill-inverse`, class `.ds-tone--inverse`) carries only `--color-inverse-text`. An accent block (`--fill-accent`, class `.ds-tone--accent`) carries only `--color-accent-text`. The navigation (`--fill-bar`) carries `--color-bar-text`; the footer (`--fill-bar-alt`) carries `--color-bar-alt-text`.\n- A palette may be light or dark. Nothing assumes that the page is light: the inverse block is black on a white palette and off-white on a black one, and full-bleed sections alternate page, inverse, accent and `--color-surface-alt`.\n- `--color-fill-1` to `--color-fill-4` are tile grounds that carry running text in `--color-text` and `--color-heading`: tints on a light palette, deep tones on a dark one. They never carry `--color-inverse-text`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On an inverse block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. On an accent block only `.ds-button--onaccent` (fill `--color-accent-text`, text `--color-accent`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on.\n- `--color-inverse` is also the body of a drawn device and `--color-accent` the face of a drawn payment card, so a device is drawn on the page, a fill or the accent, never on an inverse block.\n- `--fill-bar` is translucent (the bar colour mixed with `transparent` in the surface part) and the navigation blurs what scrolls under it by `--backdrop-blur`.\n- `--color-heading-alt` is the kicker above a title, the sidebar title and h3 in prose. On inverse and accent blocks the kicker inherits the block's text colour.\n- `--fill-accent` with `--color-accent-text` is the default badge. `.ds-badge--alt` and the status badges are tints: the colour mixed at 16 to 24% into `--color-surface`, the text mixed from the colour and `--color-heading`, so they hold on light and dark palettes.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface`. The destructive button is `--color-danger` with `--color-button-text`.\n- Borders are hairlines: `--border-width` in `--color-border-muted` around panels and between rows, `--color-border` under a table head, `--color-input-border` around fields. `--border-width-strong` in `--color-border` frames the empty state.\n- Radii: `--radius-control` for buttons, fields, tabs and the current row of a sidebar; `--radius-panel` for panels, the dialog and the empty state (half of it for notices and the textarea); `--radius-page` for the largest blocks (hero, tiles, stages); `--radius-pill` for badges and meters.\n- Shadows: `--shadow-panel` on panels, `--shadow-control` on buttons and the current tab, `--shadow-control-hover` on a hovered button or tile, `--shadow-dialog` on the dialog and on drawn products.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: washes of `currentColor` or a text token at 7 to 22% for hover grounds, hairlines and stages on coloured blocks; tinted badges; the error notice's edge (`--color-danger` at 35%); the footer rule (`--color-bar-alt-text` at 25%). Opacity 0.6 to 0.8 dims secondary text on inverse and accent blocks.\n- Here: `--color-page` silicon grey `#f5f5f7` with white panels, `--color-inverse` graphite `#1c1c1e`, and one blue: `--color-link` `#0066cc`, `--color-accent` and `--color-button` `#0071e3`. Kickers (`--color-heading-alt`) are grey; `--color-accent-alt`, a burnt orange, is only the word \"New\" and the far end of a drawn screen. The four fills are a cool grey-blue, white, a warm silver and a mid grey.\n- One neutral system family for everything (`--font-body`: the system UI font, then Segoe UI, Roboto, Helvetica Neue; `--font-heading` asks for its display cut), `--font-mono` for code. `--text-base` 17px at `--line-body` 1.47; `--text-ui` 14px (buttons, kickers); `--text-small` 12px (navigation, meta, badges, the strip, the footer); `--text-large` 19px (leads, list titles); `--text-display` 72px (the hero's product name, scaled down with `clamp()` and `vw` to `--text-h2` on a phone); `--text-h1` 48px (tile, section and page titles, figures); `--text-h2` 28px (titles of half-width tiles); `--text-h3` 21px (panel, option and product titles).\n- Weights are moderate: `--weight-display` 600, `--weight-heading` 500, `--weight-ui` 400, with `--display-tracking` -1px and `--heading-tracking` -0.2px. Nothing is uppercase; links are not underlined until hovered.\n- Surface: `--radius-control` 10px (buttons and fields are softly squared), `--radius-panel` 18px, `--radius-page` 24px for tiles and stages, pills for badges and finish chips. Panels rest on a faint offset shadow (`--shadow-panel`, 2px 4px 12px); a hovered button or card gets `--shadow-control-hover`; devices, the price bar and the dialog carry `--shadow-dialog`, a hairline ring and a 48px blur. Fills are flat. `--transition` is 0.18s; `--backdrop-blur` 24px.\n- A drawn screen runs from `--color-accent` to `--color-accent-alt`; this is the only gradient besides the drifting light.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-tone--inverse`, `.ds-tone--accent`, `.ds-tone--alt`: put a block on the inverse fill, the accent fill or `--color-surface-alt` and set its text colour.\n- `.ds-brand`: the site's mark and name, in the middle of the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-wrap`: the centred content column. `.ds-section`: a full-width block (`--tight`, `--flush`) with a `.ds-section__head` of `.ds-section__kicker`, `.ds-section__title` and `.ds-section__lead`; `--left` aligns it left.\n- `.ds-nav`: the bar. `.ds-nav__inner` lays out `.ds-nav__links` of `.ds-nav__link` (the current one on a wash, `is-current`), the brand, and `.ds-nav__actions` with a link and `.ds-nav__me` (avatar and first name).\n- `.ds-menu`: a navigation item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is a wide panel of three columns under it, shown on hover, on focus or with `is-open`; each column has a `.ds-menu__title` and a `.ds-menu__list` of `.ds-menu__link` (a name over a small line). `--end` aligns the panel to the item's right edge. Do not show it open over other content.\n- `.ds-hero`: the accent block of the home view: `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, the `.ds-search` and `.ds-hero__actions`, a row of `--ghost --small` buttons for popular searches. One per site.\n- `.ds-search`: one large field (`.ds-search__input`) with a primary button inside its right end.\n- `.ds-picker`: wraps the grid that overlaps the hero.\n- `.ds-grid`: four rounded tiles on the four fills. Each `.ds-grid__cell` is a link with a `.ds-grid__art` holding a drawn product, a `.ds-grid__title` and a `.ds-grid__text`; it rises on hover.\n- `.ds-device`: a product drawn with boxes: `--speaker`, `--bar`, `--phones`, `--app`; `--large` for a slide.\n- `.ds-carousel`: slides of which one shows. `.ds-carousel__track` scrolls sideways with scroll snapping and holds `.ds-carousel__slide` items on the fills; `.ds-carousel__bar` under it has `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__hint`, a small line that says to swipe. Here a slide holds a `.ds-fix`: a badge, `.ds-fix__title`, `.ds-fix__text`, buttons, and a `.ds-fix__art` with the product.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `
` with a `.ds-accordion__head` summary (a plus that becomes a filled minus when open) and a `.ds-accordion__body`.\n- `.ds-tooltip`: a dotted-underlined trigger holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`.\n- `.ds-switch`: an on and off control drawn over ``; on when checked or `is-on`.\n- `.ds-progress`: a bar; `.ds-progress__bar` with `--20`, `--40`, `--60`, `--70`, `--80`, `--100` sets how far; `--large` is thicker. `.ds-progress__label` above it has a bold name and a quiet remark. `.ds-steps` under it names four stages (`.ds-steps__step`, `is-done`, `is-current`).\n- `.ds-avatar`: initials in a circle on a fill (`--2`, `--3`, `--large`). `.ds-person` puts it beside a `.ds-person__name` and `.ds-person__meta`.\n- `.ds-status`: rows of a service and its badge (`.ds-status__row`).\n- `.ds-stat`: the row of three figures; each `.ds-stat__item` is a `.ds-stat__figure` in display size over a `.ds-stat__label`.\n- `.ds-ways`: three `.ds-panel.ds-way` cards, each a person, a `.ds-way__title`, a `.ds-way__text` and one button; `.ds-way--inverse` stands on the inverse fill and takes the `--inverse` button.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds the breadcrumb, the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3 for a sidebar; `--even` two equal columns; `--fill` stretches both to one height. `.ds-stack` stacks blocks one `--space-5` apart; `.ds-side` keeps a column in place under the bar.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends a small arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the pill button. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse`, `--onaccent`, `--ghost`, `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table without fills: a small quiet head, hairlines between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link; `.ds-table__code` sets a serial number in the monospace font. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is a last strip for a count and a link or the pagination.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title`, an optional `.ds-list__text` and `.ds-list__meta`; `.ds-list__row` puts a `.ds-list__grow` block and a badge or switch on one line.\n- `.ds-panel`: the rounded card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link; `.ds-panel__body` is padded; `.ds-panel__text` is a paragraph.\n- `.ds-tabs`: a row of words on a hairline; the current `.ds-tabs__tab` (`is-current`) is underlined in the accent. `.ds-tabsrow` places it above what it changes.\n- `.ds-badge`: small label on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is filled.\n- `.ds-notice`: tinted rounded message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` pills; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by small arrows; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`: `.ds-dialog__head` (`.ds-dialog__title`, a round `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a centred message in a frame of `--border-width-strong`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-helpful`: a strip on `--color-surface-alt` asking whether a step worked, with two small buttons. `.ds-callout`: a rounded block used with a tone class: `.ds-callout__title`, `.ds-callout__text` and one button.\n- `.ds-reveal`: the scroll animation described under Layout; `--2`, `--3`, `--zoom`.\n- `.ds-footer`: the closing band on `--fill-bar-alt` with rounded upper corners: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then four columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n\n## Never\n\n- `font-weight <= 600`: nothing is heavier than semibold.\n- `font-weight >= 400`: nothing is set light.\n- `font-size >= 12px`: navigation, meta and the footer are the smallest text.\n- `font-size <= 72px`: the product name in the hero is the largest text.\n- `font-families <= 2`: the system sans-serif, plus monospace for code.\n- `line-height <= 1.5`: body text is set at 1.47.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 5%`: the one blue marks a link; only a hovered link is underlined.\n- `text-shadow = none`: text is flat on every ground.\n- `border-width <= 1px`: every border is a hairline.\n- `border-radius <= 28px`: panels are 20px and the largest blocks 28px; only pills and circles are rounder.\n- `box-shadow-blur <= 120px`: only the dialog casts a shadow, and it ends at 120px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; inverse; accent) and take the text token and the buttons of that ground; do not put a primary button on an inverse or accent block, or `--color-inverse-text` on a fill. A new block of the hub is a `.ds-section`, with a tone class when it is not on the page colour, and a `.ds-section__head`; anything that holds data is a `.ds-panel`; a new product is another `.ds-device` variant drawn from `--color-inverse`, `--color-inverse-text` and one spot of `--color-accent`. Things that float (a menu, a tooltip, a popover) take `--shadow-dialog` and stay hidden until hover or focus. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, type sizes on the `--text-*` tokens (large titles through `clamp()` between two of them), and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-page: 1240px;\n --size-nav: 68px;\n --size-mark: 30px;\n --size-icon: 52px;\n --size-control: 42px;\n --size-dialog: 480px;\n --size-search: 720px;\n --size-tile: 280px;\n --size-device: 112px;\n --size-menu: 660px;\n --size-avatar: 40px;\n --size-tip: 240px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 72px;\n --space-9: 112px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n margin: 0;\n padding: 0;\n min-height: 100vh;\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 overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-wrap {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* tones: the three grounds a block can stand on besides the page.\n Each sets its own text colour; headings inside inherit it. */\n.ds-tone--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-tone--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-tone--alt {\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n.ds-tone--inverse .ds-section__title,\n.ds-tone--accent .ds-section__title,\n.ds-tone--inverse .ds-section__kicker,\n.ds-tone--accent .ds-section__kicker,\n.ds-tone--inverse .ds-section__lead,\n.ds-tone--accent .ds-section__lead,\n.ds-tone--inverse .ds-feature__title,\n.ds-tone--accent .ds-feature__title,\n.ds-tone--inverse .ds-feature__text,\n.ds-tone--accent .ds-feature__text,\n.ds-tone--inverse .ds-stat__figure,\n.ds-tone--accent .ds-stat__figure,\n.ds-tone--inverse .ds-stat__label,\n.ds-tone--accent .ds-stat__label {\n color: inherit;\n}\n\n/* motion. The resting state of every rule is the finished page; the\n animations below only run where scroll-driven timelines exist and\n the visitor has not asked for less motion. */\n@keyframes ds-rise {\n from {\n opacity: 0;\n transform: translateY(var(--space-7));\n }\n}\n@keyframes ds-zoom {\n from {\n opacity: 0;\n transform: translateY(var(--space-6)) scale(0.94);\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: view()) {\n .ds-reveal {\n animation: ds-rise linear both;\n animation-timeline: view();\n animation-range: entry 0% entry 80%;\n }\n .ds-reveal--2 {\n animation-range: entry 15% entry 95%;\n }\n .ds-reveal--3 {\n animation-range: entry 30% entry 110%;\n }\n }\n}\n\n/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\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-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n max-width: 68ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h2);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h3);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n}\n.ds-prose p {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\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}\n.ds-link--more::after {\n content: \" \\203A\";\n}\n.ds-linkrow {\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 font-size: var(--text-ui);\n}\n\n/* buttons: pills whose shadow grows on hover and that shrink a little when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97);\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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--onaccent,\n.ds-button--onaccent:hover,\n.ds-button--onaccent.is-hover {\n background: var(--color-accent-text);\n color: var(--color-accent);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: currentColor;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n border-color: transparent;\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: var(--space-9);\n border-radius: calc(var(--radius-panel) / 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-size: var(--text-base);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--space-4);\n height: var(--space-4);\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n}\n\n/* table: no fills, hairlines between rows, a small quiet head */\n.ds-table__wrap {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: the large rounded card */\n.ds-panel {\n min-width: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.8;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 24%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 40%, var(--color-heading));\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\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-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"\\203A\";\n margin-left: var(--space-2);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* page header: the head of an inner page */\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-5);\n padding: var(--space-7) 0 var(--space-6);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 56ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-7) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-3) 0 var(--space-5);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-7) var(--space-5);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n color: var(--color-heading);\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}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* tabs: a pill switch */\n.ds-tabs {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1);\n border-radius: var(--radius-control);\n background: var(--color-surface-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\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 background: var(--fill-panel);\n color: var(--color-heading);\n box-shadow: var(--shadow-control);\n}\n\n/* sections and their heads */\n.ds-section {\n padding: var(--space-9) 0;\n}\n.ds-section--tight {\n padding: var(--space-8) 0;\n}\n.ds-section__head {\n max-width: 90ch;\n margin: 0 auto var(--space-7);\n text-align: center;\n}\n.ds-section__head--left {\n margin-left: 0;\n text-align: left;\n}\n.ds-section__kicker {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-section__lead {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n gap: var(--space-7);\n}\n.ds-cols--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n/* stats: big numbers. .ds-stat is the row, .ds-stat__item one figure */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-stat__item {\n min-width: 0;\n}\n.ds-stat__figure {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h1), 7vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n max-width: 24ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* footer: small grey link columns */\n.ds-footer {\n padding: var(--space-8) 0 var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-footer__about {\n max-width: 30ch;\n margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.8;\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n opacity: 1;\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__legal {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-7) 0 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n opacity: 0.8;\n}\n\n@media (max-width: 900px) {\n .ds-cols,\n .ds-cols--side,\n .ds-cols--even {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n }\n .ds-footer__cols {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-section {\n padding: var(--space-8) 0;\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-section,\n .ds-section--tight {\n padding: var(--space-7) 0;\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table {\n font-size: var(--text-small);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-page-header {\n padding: var(--space-6) 0 var(--space-5);\n }\n}\n.ds-view > .ds-wrap:last-child {\n padding-bottom: var(--space-8);\n}\n\n/* ---- components of the period beyond the checklist ---- */\n\n/* menu: a wide drop-down under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: var(--space-2);\n border-right: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n transform: translateY(-35%) rotate(45deg);\n opacity: 0.6;\n}\n.ds-menu__panel {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n width: var(--size-menu);\n max-width: 92vw;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n text-transform: none;\n box-shadow: var(--shadow-dialog);\n opacity: 0;\n visibility: hidden;\n transform: translateY(calc(var(--space-2) * -1));\n transition: var(--transition);\n}\n.ds-menu:hover .ds-menu__panel,\n.ds-menu:focus-within .ds-menu__panel,\n.ds-menu.is-open .ds-menu__panel {\n opacity: 1;\n visibility: visible;\n transform: none;\n}\n.ds-menu__title {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-menu__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: normal;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-menu__link small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: questions that open and close, built on details */\n.ds-accordion {\n min-width: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n display: block;\n flex: none;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) round(var(--space-6) * 0.4, var(--space-1)) no-repeat,\n var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] .ds-accordion__head::after,\n.ds-accordion__item.is-open .ds-accordion__head::after {\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link-hover);\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: 62ch;\n padding: 0 0 var(--space-5);\n color: var(--color-text);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: inherit;\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: var(--size-tip);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-panel) / 2.5);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n opacity: 0;\n visibility: hidden;\n transform: translate(-50%, var(--space-1));\n transition: var(--transition);\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, 0);\n}\n\n/* carousel: a row of slides, one showing, moved by scroll snapping */\n.ds-carousel {\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-page);\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n flex: none;\n width: 100%;\n min-width: 0;\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n color: var(--color-text);\n scroll-snap-align: start;\n}\n.ds-carousel__slide:nth-child(3n + 2) { background: var(--color-fill-3); }\n.ds-carousel__slide:nth-child(3n + 3) { background: var(--color-fill-2); }\n.ds-carousel__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin-top: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n}\n.ds-carousel__dot {\n width: var(--space-2);\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: currentColor;\n opacity: 0.25;\n transition: var(--transition);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n opacity: 1;\n}\n.ds-carousel__hint {\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n\n/* switch: an on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--space-7);\n height: calc(var(--space-5) + var(--space-1));\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--space-5) - var(--space-2));\n height: calc(var(--space-5) - var(--space-2));\n border-radius: 50%;\n background: var(--color-heading);\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-switch:checked,\n.ds-switch.is-on {\n border-color: transparent;\n background: var(--fill-button);\n}\n.ds-switch:checked::after,\n.ds-switch.is-on::after {\n left: calc(100% - var(--space-5));\n background: var(--color-button-text);\n}\n.ds-switch:focus-visible,\n.ds-switch.is-focus {\n outline: var(--focus-ring);\n}\n.ds-switch:disabled,\n.ds-switch.is-disabled {\n background: var(--color-disabled);\n cursor: default;\n}\n\n/* progress: a bar that shows how far something is */\n.ds-progress {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n}\n.ds-progress__bar--40 { width: 40%; }\n.ds-progress__bar--70 { width: 70%; }\n.ds-progress__bar--80 { width: 80%; }\n.ds-progress--large {\n height: var(--space-3);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-progress__label strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* avatar: a person drawn as initials in a circle, alone or beside a name */\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 border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-decoration: none;\n}\n.ds-avatar--2 { background: var(--color-fill-1); }\n.ds-avatar--3 { background: var(--color-fill-4); }\n.ds-avatar--large {\n width: var(--size-icon);\n height: var(--size-icon);\n font-size: var(--text-ui);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-person__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* rows inside lists: a title block and something at the right */\n.ds-list__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-list__grow {\n flex: 1;\n min-width: 0;\n}\n.ds-table td.ds-table__code {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* ---- layout: support and help hub of a maker of home audio ---- */\n\n/* nav: a bar across the window with the brand in its middle, the\n sections at the left and the account at the right */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\n gap: var(--space-5);\n max-width: var(--size-page);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0 0 0 calc(var(--space-3) * -1);\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 color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 8%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#guide:target) .ds-nav__links .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#repairs:target) .ds-nav__links .ds-nav__link[href=\"#repairs\"],\n.ds-page:has(#contact:target) .ds-nav__actions .ds-nav__link[href=\"#contact\"] {\n background: color-mix(in srgb, var(--color-bar-text) 13%, transparent);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-nav__me {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n}\n\n/* hero: a full-bleed block of the accent colour under the bar, rounded\n only at its lower corners; a very large question and the search */\n.ds-hero {\n padding: var(--space-8) var(--space-5) calc(var(--space-9) + var(--space-8));\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-align: center;\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-hero__title {\n max-width: 14ch;\n margin: 0 auto;\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 9vw, 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 text-wrap: balance;\n}\n.ds-hero__lead {\n max-width: 44ch;\n margin: var(--space-5) auto 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin-top: var(--space-5);\n font-size: var(--text-small);\n}\n\n/* search: one large field with its button inside */\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n width: 100%;\n max-width: var(--size-search);\n margin: var(--space-6) auto 0;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n box-shadow: var(--shadow-dialog);\n transition: var(--transition);\n}\n.ds-search:focus-within,\n.ds-search.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-search__input {\n flex: 1;\n min-width: 0;\n margin: 0;\n padding: var(--space-2) 0;\n border: 0;\n outline: 0;\n background: transparent;\n color: inherit;\n font-family: var(--font-body);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n}\n\n/* picker: the row of product tiles that overlaps the hero's lower edge */\n.ds-picker {\n position: relative;\n margin-top: calc((var(--space-9) + var(--space-5)) * -1);\n}\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-height: var(--size-tile);\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n color: var(--color-text);\n text-decoration: none;\n box-shadow: var(--shadow-panel);\n transition: var(--transition);\n}\n.ds-grid__cell:nth-child(4n + 2) { background: var(--color-fill-2); }\n.ds-grid__cell:nth-child(4n + 3) { background: var(--color-fill-3); }\n.ds-grid__cell:nth-child(4n + 4) { background: var(--color-fill-4); }\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n transform: scale(1.015);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__art {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-height: calc(var(--size-device) + var(--space-5));\n}\n.ds-grid__title {\n margin: var(--space-4) 0 0;\n color: var(--color-heading);\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}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-ui);\n}\n\n/* devices: the products, drawn with boxes in the inverse colour */\n.ds-device {\n position: relative;\n flex: none;\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n}\n.ds-device::before,\n.ds-device::after {\n content: \"\";\n position: absolute;\n}\n.ds-device--speaker {\n width: calc(var(--size-device) * 0.68);\n height: var(--size-device);\n border-radius: calc(var(--radius-panel) / 1.4);\n}\n.ds-device--speaker::before {\n top: 34%;\n left: 18%;\n width: 64%;\n aspect-ratio: 1;\n border: var(--border-width-strong) var(--border-style) currentColor;\n border-radius: 50%;\n opacity: 0.5;\n}\n.ds-device--speaker::after {\n top: 12%;\n left: 42%;\n width: 16%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: var(--color-accent);\n}\n.ds-device--bar {\n width: calc(var(--size-device) * 1.7);\n max-width: 100%;\n height: calc(var(--size-device) * 0.26);\n border-radius: var(--radius-pill);\n}\n.ds-device--bar::before {\n top: 50%;\n left: 12%;\n width: 76%;\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n opacity: 0.5;\n}\n.ds-device--bar::after {\n top: 38%;\n right: 6%;\n width: 4%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: var(--color-accent);\n}\n.ds-device--phones {\n width: calc(var(--size-device) * 0.86);\n height: calc(var(--size-device) * 0.8);\n border: var(--space-2) var(--border-style) var(--color-inverse);\n border-bottom: 0;\n border-radius: 50% 50% 0 0 / 70% 70% 0 0;\n background: transparent;\n}\n.ds-device--phones::before,\n.ds-device--phones::after {\n bottom: calc(var(--space-3) * -1);\n width: var(--space-5);\n height: var(--space-7);\n border-radius: var(--space-3);\n background: var(--color-inverse);\n}\n.ds-device--phones::before {\n left: calc(var(--space-4) * -1);\n}\n.ds-device--phones::after {\n right: calc(var(--space-4) * -1);\n}\n.ds-device--app {\n width: calc(var(--size-device) * 0.56);\n height: var(--size-device);\n border-radius: calc(var(--radius-panel) / 1.6);\n}\n.ds-device--app::before {\n inset: var(--space-1);\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-surface);\n}\n.ds-device--app::after {\n top: 42%;\n left: 30%;\n width: 40%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: var(--color-accent);\n}\n.ds-device--large {\n transform: scale(1.5);\n}\n\n/* quick fixes: the slide of the carousel, copy beside a drawn product */\n.ds-fix {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n align-items: center;\n gap: var(--space-6);\n min-height: calc(var(--size-tile) + var(--space-7));\n padding: var(--space-7);\n}\n.ds-fix__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h3), 4vw, var(--text-h2));\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-fix__text {\n max-width: 46ch;\n margin: var(--space-3) 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-fix__art {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(var(--size-device) * 1.8);\n}\n\n/* status rows: a service, its state and how far a rollout is */\n.ds-status {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-status__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* contact cards: three ways to reach a person */\n.ds-ways {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-way {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-6);\n border-radius: var(--radius-page);\n}\n.ds-way__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-way__text {\n flex: 1;\n margin: 0;\n}\n.ds-way--inverse {\n border-color: transparent;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-way--inverse .ds-way__title,\n.ds-way--inverse .ds-person__name,\n.ds-way--inverse .ds-person__meta {\n color: inherit;\n}\n.ds-way--inverse .ds-person__meta {\n opacity: 0.75;\n}\n\n/* tabs here are a row of underlined words, not a pill switch */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0;\n background: transparent;\n}\n.ds-tabs__tab {\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n border-radius: 0;\n color: var(--color-text-muted);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-accent);\n background: transparent;\n box-shadow: none;\n}\n.ds-tabsrow {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-5);\n}\n.ds-tabsrow .ds-tabs {\n flex: 1;\n}\n\n/* inner pages */\n.ds-side {\n position: sticky;\n top: calc(var(--size-nav) + var(--space-5));\n}\n.ds-steps {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-2);\n margin: var(--space-3) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-steps__step.is-done {\n color: var(--color-text);\n}\n.ds-steps__step.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-helpful {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-callout {\n padding: var(--space-6);\n border-radius: var(--radius-panel);\n}\n.ds-callout__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-callout__text {\n margin: 0 0 var(--space-4);\n opacity: 0.8;\n}\n\n/* footer: here a dark band with rounded upper corners */\n.ds-footer {\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-footer .ds-brand__name {\n color: inherit;\n}\n\n@media (max-width: 1000px) {\n .ds-nav__inner {\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-areas: \"brand actions\" \"links links\";\n gap: 0 var(--space-4);\n padding: var(--space-2) var(--space-4);\n }\n .ds-nav__inner > .ds-brand {\n grid-area: brand;\n }\n .ds-nav__actions {\n grid-area: actions;\n }\n .ds-nav__links {\n grid-area: links;\n margin-left: calc(var(--space-2) * -1);\n overflow-x: auto;\n scrollbar-width: none;\n }\n .ds-menu__panel {\n display: none;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-ways {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-side {\n position: static;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__link {\n padding: var(--space-2);\n }\n .ds-nav__me span:not(.ds-avatar) {\n display: none;\n }\n .ds-hero {\n padding: var(--space-7) var(--space-4) calc(var(--space-9) + var(--space-6));\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n }\n .ds-hero__title {\n letter-spacing: var(--heading-tracking);\n }\n .ds-search {\n padding-left: var(--space-4);\n }\n .ds-search__input {\n font-size: var(--text-base);\n }\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-grid__cell {\n min-height: 0;\n padding: var(--space-4);\n border-radius: var(--radius-panel);\n }\n .ds-grid__title {\n font-size: var(--text-large);\n }\n .ds-device {\n transform: scale(0.8);\n }\n .ds-device--large {\n transform: none;\n }\n .ds-fix {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-5);\n }\n .ds-fix__art {\n order: -1;\n min-height: calc(var(--size-device) * 1.3);\n }\n .ds-carousel__track,\n .ds-carousel__slide {\n border-radius: var(--radius-panel);\n }\n .ds-tabs {\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-table__wrap .ds-table {\n min-width: 66ch;\n }\n .ds-tabs__tab {\n padding: var(--space-3) 0;\n }\n .ds-way {\n padding: var(--space-5);\n }\n .ds-stat__figure {\n letter-spacing: var(--heading-tracking);\n }\n .ds-footer {\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n }\n}\n.ds-footer .ds-brand__mark {\n border-color: color-mix(in srgb, currentColor 35%, transparent);\n}\n\n/* phone: a tooltip takes the width of its paragraph, so it never leaves the window */\n@media (max-width: 640px) {\n .ds-page :has(> .ds-tooltip) {\n position: relative;\n }\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n right: 0;\n left: 0;\n width: auto;\n max-width: none;\n transform: translateY(var(--space-1));\n }\n .ds-tooltip:hover .ds-tooltip__tip,\n .ds-tooltip:focus .ds-tooltip__tip,\n .ds-tooltip:focus-within .ds-tooltip__tip,\n .ds-tooltip.is-open .ds-tooltip__tip {\n transform: none;\n }\n}\n\n/* phone navigation: one strip that scrolls sideways from edge to edge and\n fades at the right; the product menu gives its first links to the strip */\n@media (max-width: 1000px) {\n .ds-nav__links {\n margin: 0 calc(var(--space-4) * -1);\n padding: 0 var(--space-7) 0 var(--space-3);\n -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-7)), transparent);\n mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-7)), transparent);\n }\n .ds-nav__links > li {\n flex: none;\n }\n .ds-nav__links .ds-menu,\n .ds-nav__links .ds-menu__panel,\n .ds-nav__links .ds-menu__panel > div,\n .ds-nav__links .ds-menu__list,\n .ds-nav__links .ds-menu__list > li:first-child {\n display: contents;\n }\n .ds-nav__links .ds-menu__panel {\n visibility: visible;\n }\n .ds-nav__links .ds-menu__toggle,\n .ds-nav__links .ds-menu__title,\n .ds-nav__links .ds-menu__list > li:not(:first-child),\n .ds-nav__links .ds-menu__link small {\n display: none;\n }\n .ds-nav__links .ds-menu__link {\n flex: none;\n order: 1;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: inherit;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n }\n .ds-nav__links .ds-menu__link:hover {\n background: color-mix(in srgb, var(--color-bar-text) 8%, transparent);\n color: inherit;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__links .ds-menu__link {\n padding: var(--space-2);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: modern product support hub specimen\n\n\n\n\n\n
\n
\n \n \n \n chronoskin\n \n
\n Contact\n MOMara\n
\n
\n
\n\n
\n
\n

chronoskin support

\n

How can we help?

\n

Search 1,200 guides for speakers, soundbars and headphones, or pick your product below.

\n
\n \n \n
\n
\n Popular:\n Set up a speaker\n Wi-Fi keeps dropping\n Track a repair\n
\n
\n\n
\n
\n
\n \n \n

Room speakers

\n

Set up, pair and place. 86 guides

\n \n \n \n

Soundbars

\n

Television, remote, surround. 54 guides

\n \n \n \n

Headphones

\n

Fit, battery, noise control. 41 guides

\n \n \n \n

The app

\n

Rooms, groups and alarms. 63 guides

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

Quick fixes

\n

Most problems take two minutes.

\n
\n
\n
    \n
  • \n
    \n
    \n 2 minutes\n

    A speaker is missing from the app

    \n

    Nine times in ten the speaker and the phone are on different networks. Check that first, then restart the speaker.

    \n
    \n Show me how\n It did not help\n
    \n
    \n
    \n
    \n
    • \n
  • \n
    \n
    \n 3 minutes\n

    No sound from the television

    \n

    Set the television to send sound out through the cable, not its own speakers.

    \n
    Show me how
    \n
    \n
    \n
    \n
    • \n
  • \n
    \n
    \n 1 minute\n

    Headphones will not pair

    \n

    Hold the button for five seconds until the light blinks, then choose them on your phone.

    \n
    Show me how
    \n
    \n
    \n
    \n
    • \n
\n
\n
\n

Swipe for more

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

Top questions

\n

Asked this week.

\n
\n
\n
\n Why does the music stop after a few minutes?\n

Usually the router moves the speaker between two bands. Give both bands the same name, or keep the speaker within one room of the router.

\n
\n
\n Can two people control the same speaker?\n

Yes. Anyone on the same network with the app can play, pause and queue.

\n
\n
\n How long is the warranty?\n

Two years from the day of purchase, three for headphones registered within a month.

\n
\n
\n Does the speaker work without Wi-Fi?\n

Portable speakers play over Bluetooth. Room speakers need the network.

\n
\n
\n Where do I find the serial number?\n

Under the speaker, and in the app under the name of the room.

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

Popular this week

All guides
\n
\n \n
\n
\n
\n

Service status

All working
\n
\n
\n
Streaming and radioWorking
\n
Voice controlSlower than usual
\n
\n

Software 16.2Reached 80% of speakers

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

2 min

Median time from a search to an answer.

\n

94%

Of problems solved without a call.

\n

1,200

Guides, each one checked every quarter.

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

Still stuck?

\n

Talk to a person.

\n

Real people in three time zones, every day of the week.

\n
\n
\n
\n
INInes and the chat teamOnline now
\n

Chat

\n

The fastest way. Typical waitMeasured over the last hour, updated every five minutes. is 3 minutes.

\n Start a chat\n
\n
\n
TBTomas and the phone team8:00 to 20:00
\n

We call you

\n

Pick a time and keep your day. We ring within the quarter hour you choose.

\n Request a call\n
\n
\n
RWRin and the workshopRepairs in 5 working days
\n

Repair

\n

Send it in with a free label. You can follow every step from your account.

\n Book a repair\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Support
    2. \n
  2. Room speakers
    3. \n
  3. Set up
    4. \n
\n

Set up a room speaker

\n

Five steps, about ten minutes. You need the app and your Wi-Fi password.

\n
\n
\n Save guide\n Ask a person\n
\n
\n
\n
\n \n
\n \n

No saved guides

\n

Guides you save are kept here and in the app.

\n Browse guides\n
\n
\n
\n
\n
\n

Step 2 of 5About 8 minutes left

\n \n
\n
\n
\n

Add the speaker in the app

\n

The app finds a new speaker by itself. All you do is confirm that the one it found is yours.

\n

Before you start

\n

Stand within three metres of the speaker with your phone on the home network. The light on top should blink green; if the app asks for a code, it is the eight characters printed as CS-XXXX-XX under the speaker.

\n
    \n
  • Open the app and choose Add a product.
    • \n
  • Wait for the chime, then tap This is mine.
    • \n
  • Name the room. You can change it later.
    • \n
\n

If the light stays orange

\n

The speaker is still starting. Give it a minute. If nothing changes, unplug it for ten seconds and begin this step again.

\n
\n
\n
\n

Using a guest network? Speakers and phone must share one network, so switch the phone first.

\n
\n
\n Step 2 of 5\n \n
\n
\n
\n Did this step work?\n
\n Yes, next step\n No, I need help\n
\n
\n
\n

Related guides

\n
\n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Support
    2. \n
  2. Mara Okafor
    3. \n
  3. Repairs
    4. \n
\n

Repairs and warranty

\n

Every product registered to you, what is covered and where a repair stands.

\n
\n
\n Start a repair\n
\n
\n
\n \n
\n 5 products\n Covered\n Ends soon\n Expired\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
ProductSerialBoughtWarrantyMonths left
Speaker, living roomCS-4F2A-07Mar 2025Covered17
Speaker, kitchenCS-4F2A-11Mar 2025Covered17
SoundbarCS-9B10-52Dec 2023Ends soon2
HeadphonesCS-77C3-90Jun 2024Covered20
SubwooferCS-12D8-03May 2022Expired0
\n
\n
5 products registeredRegister another
\n
\n
\n

Repair R-20418, headphones

In the workshop
\n
\n

Step 3 of 4Back with you by Friday

\n \n
    \n
  1. Received
    2. \n
  2. Diagnosed
    3. \n
  3. Repairing
    4. \n
  4. Sent back
    5. \n
\n
\n
\n

The left hinge is being replaced under warranty. There is nothing to pay.

\n
\n Print the label again\n Cancel repair\n
\n
\n
\n
\n
\n
\n
\n

Cancel this repair?

×
\n

We stop work and send the headphones back as they are. That takes three working days.

\n
\n Cancel repair\n Keep it going\n
\n
\n
\n
\n

Repair updates

\n
\n
    \n
    • \n
    • \n
    • \n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Support
    2. \n
  2. Contact
    3. \n
\n

Write to us

\n

Tell us what happened and which product it is. We answer within a day.

\n
\n
\n Search the guides first\n
\n
\n
\n
\n

Your message

\n
\n
\n
\n

We answer within a day. Chat is faster during opening hours.

\n

Not sent. Check the email address.

\n
\n
\n
\n \n \n
\n
\n \n \n This address is missing its ending.\n
\n
\n
\n \n \n
\n
\n \n \n Say what the light on the product is doing, if you can.\n
\n \n
\n \n Save draft\n \n \n
\n
\n
\n
\n
\n
\n

Who answers

\n
\n
    \n
  • INInes VargaSpeakers and the app
    Online
    • \n
  • TBTomas BrandtSoundbars and televisions
    Online
    • \n
  • RWRin WatanabeRepairs and parts
    From 9:00
    • \n
\n
\n
\n
\n
\n What should I have ready?\n

The serial number, and the email address the product is registered to.

\n
\n
\n Can I send a photo or a recording?\n

Yes, up to five files once the first message is sent.

\n
\n
\n Which languages do you answer in?\n

English, German, French and Spanish.

\n
\n
\n
\n

Prefer to talk?

\n

Choose a quarter hour and we ring you. Every day from 8:00 to 20:00.

\n Request a call\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.modern-product.docs.s07.p06.t05.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"modern-product\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-mp-7652\",\n \"short\": \"v1-mp-7652\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fffbe6;\n --color-canvas: #fffbe6;\n --color-surface: #ffffff;\n --color-surface-alt: #fff1b8;\n --color-surface-strong: #f0e4a6;\n --color-bar: #ffd60a;\n --color-bar-text: #0a0a0a;\n --color-bar-alt: #0a0a0a;\n --color-bar-alt-text: #d9d2b0;\n --color-inverse: #0a0a0a;\n --color-inverse-text: #ffd60a;\n --color-text: #1f1d14;\n --color-text-muted: #6b6648;\n --color-heading: #0a0a0a;\n --color-heading-alt: #7a5c00;\n --color-link: #0a0a0a;\n --color-link-quiet: #3d3a2a;\n --color-link-visited: #5c4a00;\n --color-link-hover: #7a5c00;\n --color-link-active: #000000;\n --color-border: #e0d9b0;\n --color-border-strong: #0a0a0a;\n --color-border-muted: #efe9c8;\n --color-accent: #ffd60a;\n --color-accent-text: #0a0a0a;\n --color-accent-alt: #ff5a1f;\n --color-fill-1: #ffe45c;\n --color-fill-2: #efeadb;\n --color-fill-3: #fff3bf;\n --color-fill-4: #e2dcc6;\n --color-button: #0a0a0a;\n --color-button-text: #fffbe6;\n --color-button-hover-text: #ffd60a;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #0a0a0a;\n --color-input: #ffffff;\n --color-input-text: #0a0a0a;\n --color-input-border: #0a0a0a;\n --color-disabled: #ece7d0;\n --color-disabled-text: #a39d80;\n --color-danger: #d92d0f;\n --color-danger-surface: #ffe8e0;\n --color-success: #1d7a3a;\n --color-warning: #b86e00;\n --color-notice: #fff1b8;\n --color-notice-text: #3d2f00;\n --color-focus: #0a0a0a;\n --color-shadow: rgb(10 10 10 / 0.16);\n --color-overlay: rgb(10 10 10 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-heading: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-ui: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 17px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 72px;\n --text-h1: 48px;\n --text-h2: 28px;\n --text-h3: 21px;\n --line-body: 1.47;\n --line-heading: 1.14;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 600;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 999px;\n --radius-panel: 20px;\n --radius-pill: 6px;\n --radius-page: 28px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 0 1px var(--color-border-strong), 0 40px 120px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 64%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(180deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 90%, black));\n --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 88%, white), 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) 80%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n --backdrop-blur: 12px;\n}\n" } }