{ "id": "v1-mp-2452", "long_id": "v1.modern-product.shop.s02.p04.t05.u02", "name": "Modern hardware product page", "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": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "This is the product page of a hardware maker between 2020 and 2026: a cinematic hero on the page colour, here black, with a thin, very large headline and the device drawn huge and centred in SVG over one drifting light; then full-bleed sections that alternate black, warm off-white and one orange. Two thin translucent bars stay at the top of the window, the site row and a product row with the buy pill; specifications are told as large numbers on rounded tiles of unequal size, labels are small uppercase monospace, and everything is parted by hairlines instead of shadows. It was the common look of phone, watch, audio and vehicle makers' pages in the first half of the 2020s.", "url": "https://chrono.skin/s/v1-mp-2452", "preview_url": "https://chrono.skin/s/v1-mp-2452/specimen.html", "files": { "STYLE.md": "# Modern hardware product page\n\n## Summary\n\nThis is the product page of a hardware maker between 2020 and 2026: a cinematic hero on the page colour, here black, with a thin, very large headline and the device drawn huge and centred in SVG over one drifting light; then full-bleed sections that alternate black, warm off-white and one orange. Two thin translucent bars stay at the top of the window, the site row and a product row with the buy pill; specifications are told as large numbers on rounded tiles of unequal size, labels are small uppercase monospace, and everything is parted by hairlines instead of shadows. It was the common look of phone, watch, audio and vehicle makers' pages 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` (1120px) wide with `--space-5` side padding; sections are full bleed and pad themselves with `--space-9` (160px), `--tight` with `--space-8`.\n- Navigation is `.ds-nav`, `position: sticky` at the top: a site row `--size-nav` (48px) tall (brand, four links, centred) and under a hairline the product row `--size-subnav` (56px) tall (the product name at the left, the links of the product's pages and one small primary button, the buy pill, at the right). Both are translucent and blur what passes under them. The current page is underlined.\n- The home view stacks: `.ds-hero`, full bleed and centred, the device cut off by its lower edge; a `.ds-statement`; `.ds-grid`, five specification tiles on a six-column grid (one four columns wide, the rest two); a full-bleed inverse section with a `.ds-story`, whose title stays in place while three steps scroll past; a full-bleed accent section with the `.ds-stat` figures; a section with a `.ds-rail` of strap tiles; and a `.ds-tone--alt` section with the `.ds-cta`.\n- Inner pages have no hero. Inside `.ds-wrap` they open with `.ds-page-header` (breadcrumb, a large thin title, one line of text, at most one button at the right) on the page colour; then the working components. Tabs are a pill switch at the left in `.ds-tabsrow`. Content is `.ds-cols--side` with the `.ds-sidebar` at the left (tech specs), three `.ds-models` columns over a full-width table (compare), or `.ds-cols` 7 to 5 (order).\n- Views. The specimen is the page of a wristwatch. `home` is the overview. `specs` has the sections of the page and related links at the left, the text on battery and charging, a panel listing case and glass, and the pagination. `compare` has the switch, two model cards and an empty third slot, the comparison table and the badge key. `order` has the form with its notices and buttons beside the bag and the open confirm dialog.\n- Below 900px the columns, the story and the model cards stack, the story title stops sticking and tiles stand two across; below 640px tiles stack, the product row keeps only its `.ds-nav__links` (they scroll sideways, the current one keeps `is-current`) and the buy pill while `.ds-nav__product` and the site links marked `.ds-nav__extra` are hidden, and a wide table scrolls inside `.ds-table__wrap`. The rail always scrolls inside itself. 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), `--space-2` 8px (icon to text), `--space-3` 12px (gap between tiles, between buttons), `--space-4` 20px (form rows, list rows), `--space-5` 28px (panel and tile padding, page gutter), `--space-6` 40px (story steps, hero to device), `--space-7` 64px (section head to content, rise of the scroll animation), `--space-8` 96px (tight sections, top of the hero), `--space-9` 160px (sections).\n- Other sizes: `--size-mark` 24px, `--size-icon` 44px, `--size-control` 36px, `--size-device` 460px, `--size-tile` 240px (least height of a tile, least width in the rail), `--size-watch` 120px, `--size-dialog` 440px.\n- Motion, in CSS only. (1) Scroll: an element with `.ds-reveal` fades in and rises by `--space-7` as it enters the window (`@keyframes ds-rise`, `animation-timeline: view()`, `animation-range: entry 0% entry 80%`); `.ds-reveal--2` and `.ds-reveal--3` start later, for the second and third item of a row; `.ds-reveal--zoom` also grows from 94%. Put it on section heads, tiles, cards, figures and feature columns, never on the navigation, the hero copy, a whole full-bleed section or the footer. (2) Hover and press: buttons rise by 2px and shrink to 97% when pressed; tiles rise by 4 to 8px; all through `--transition`. (3) Ambient: one `.ds-glow` drifting behind the device (16s, alternating) and the accent hand of the device turning once a minute. Every animation is declared inside `@media (prefers-reduced-motion: no-preference)`, the scroll ones also inside `@supports (animation-timeline: view())`. The keyframes state only the start (`from`), so the resting state of every rule is the finished, visible page: without support, or with reduced motion, nothing is hidden. Lengths in keyframes are `--space-*` tokens.\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; titles, kickers, leads and figures inside inherit it.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) 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-section`: a full-width block; `--tight` with less padding, `--flush` without top padding. `.ds-section__head` centres a `.ds-section__kicker`, a `.ds-section__title` and a `.ds-section__lead`; `--left` aligns it left.\n- `.ds-reveal`: the scroll animation described under Layout; `--2`, `--3`, `--zoom`.\n- `.ds-glow`: one soft round light in `currentColor` behind a product, drifting slowly; give its parent `position: relative` and `overflow: hidden`.\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, on the baseline of the text.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3 for a sidebar; `--even` two equal columns. `.ds-stack` stacks blocks one `--space-5` apart.\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 button, in `--font-ui`. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` (inverse blocks), `--onaccent` (accent blocks), `--ghost` (both), `--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, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap` so that it scrolls sideways on a phone; `.ds-table__foot` is a last strip for a count and the pagination.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge or figure at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the large 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 pill switch: `.ds-tabs__tab` on a capsule of `--color-surface-strong`, the current one (`is-current`) raised on `--fill-panel`. `.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 with `--color-surface-strong`.\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`. It sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a panel in `--shadow-dialog`: `.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` (a circle of `--color-fill-1`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-wrap`: the centred content column.\n- `.ds-nav`: the two sticky bars. `.ds-nav__inner` is the site row (brand, `.ds-nav__links`); `.ds-nav__sub` the product row (`.ds-nav__product`, `.ds-nav__links`, one `.ds-button--small`); a `.ds-nav__rule` hairline closes each. `.ds-nav__link` is dimmed until hovered; the current one (`is-current`) is underlined. `.ds-nav__extra` marks site links that are dropped on a phone. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the full-bleed opening of the home view, centred on the page colour: `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one primary button and one `.ds-link--more`) and `.ds-hero__stage` with the `.ds-device`. A `.ds-glow` in the accent colour drifts behind, and the lower edge of the hero fades into `--color-page`. One per site.\n- `.ds-device`: the product as inline SVG, painted only with `currentColor` at several opacities; `.ds-device__hand` is a second SVG in the accent colour laid over it, which turns once a minute.\n- `.ds-statement`: one very large centred sentence; `.ds-statement__dim` greys its second half.\n- `.ds-grid`: the specification tiles on a six-column grid. A `.ds-grid__cell` spans two columns, `--wide` four; `--accent` puts one on the accent fill. Inside: `.ds-grid__kicker`, then at the bottom a `.ds-grid__figure` (a number in display size) or a `.ds-grid__title`, and `.ds-grid__text`. `.ds-bars` with `.ds-bars__bar` (`--low`, `--mid`) is a small level drawing in the corner.\n- `.ds-story`: two columns; `.ds-story__head` holds a kicker and a section title and is `position: sticky` under the bars while the `.ds-story__step` blocks (`.ds-story__num`, `.ds-story__title`, `.ds-story__text`) scroll past. It takes the colours of its block.\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`. Here it stands on the accent block.\n- `.ds-rail`: a row of `.ds-rail__tile` panels that scrolls sideways inside the page with scroll snapping; each holds a drawing, a `.ds-rail__name` and `.ds-rail__meta`.\n- `.ds-watch`: the small drawing of the product from boxes, a round case with a strap in `currentColor`: `--2` accent, `--3` second accent, `--4` grey; `--small`. Wrap it in `.ds-watch__wrap`.\n- `.ds-cta`: the closing block: a section title, a lead and a centred button row. `.ds-price` is a small uppercase price line.\n- `.ds-models`: three columns of `.ds-panel.ds-model` cards (title, drawing, a line of text, one small button); an `.ds-empty` fills a free slot.\n- `.ds-total`: the sum line under a list of order lines.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.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- `.ds-menu`: a navigation item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is the panel under it, shown on hover, on focus or with `is-open`, with a `.ds-menu__title` and a `.ds-menu__list` of `.ds-menu__link` per column. Below 1000px the panel is not shown and the item is a plain link.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `
` with a `.ds-accordion__head` summary and a `.ds-accordion__body`. Use it for the questions under a price or a product, never for navigation.\n- `.ds-tooltip`: a dotted-underlined term holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`. Use it for one term that needs a sentence.\n- `.ds-switch`: an on and off control drawn over ``. `.ds-toggle` is the label that holds it with its words, beside the tabs of a price or filter row.\n- `.ds-progress`: a thin bar; `.ds-progress__bar` with `--20`, `--40`, `--60`, `--70`, `--80`, `--100` sets how far; `.ds-progress__label` above it has a bold name and a quiet remark. Use it for a step of a flow or a share used.\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 product page is a `.ds-section`, with a tone class when it is not on the page colour; a new specification is another `.ds-grid__cell` with a figure; a new chapter is a `.ds-story` or a `.ds-rail`; anything that holds data is a `.ds-panel`. Draw the product as inline SVG in `currentColor` and colour it from a token on its wrapper. Give new tiles and cards `.ds-reveal`, staggered with `--2` and `--3` along a row, and a hover state through `--transition`; add no animation that leaves an element hidden when it does not run. 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: 1120px;\n --size-nav: 48px;\n --size-subnav: 56px;\n --size-mark: 24px;\n --size-icon: 44px;\n --size-control: 36px;\n --size-dialog: 440px;\n --size-menu: 660px;\n --size-avatar: 40px;\n --size-tip: 240px;\n --size-device: 460px;\n --size-tile: 240px;\n --size-watch: 120px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 20px;\n --space-5: 28px;\n --space-6: 40px;\n --space-7: 64px;\n --space-8: 96px;\n --space-9: 160px;\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@keyframes ds-drift {\n from {\n transform: translate(calc(var(--space-8) * -1), 0) scale(1);\n }\n to {\n transform: translate(var(--space-8), var(--space-6)) scale(1.15);\n }\n}\n@keyframes ds-marquee {\n to {\n transform: translateX(-50%);\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 .ds-reveal--zoom {\n animation-name: ds-zoom;\n }\n }\n .ds-glow {\n animation: ds-drift 16s ease-in-out infinite alternate;\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__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\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--flush {\n padding-top: 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\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/* glow: one soft light behind a product, drifting slowly */\n.ds-glow {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 60%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: radial-gradient(closest-side, currentColor, transparent);\n opacity: 0.28;\n pointer-events: none;\n}\n\n/* marquee: a row of names set as text, sliding slowly */\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 .ds-section--flush {\n padding-top: 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--flush {\n padding-top: 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__dot.is-current {\n width: var(--space-5);\n opacity: 1;\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--20 { width: 20%; }\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\n/* voice: what a customer says, the slide of a carousel that shows two and a bit */\n/* toggle: a switch with its label, beside the tabs of a pricing or filter row */\n.ds-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n cursor: pointer;\n}\n.ds-tabsrow:has(.ds-toggle) {\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-5);\n}\n.ds-progress--gap {\n margin: var(--space-3) 0 var(--space-5);\n}\n@media (max-width: 1000px) {\n .ds-menu__panel {\n display: none;\n }\n .ds-menu__toggle::after {\n display: none;\n }\n}\n\n/* ---- layout: hardware product page ---- */\n\n/* nav: two thin translucent rows that stay at the top of the window, the\n site row and under it the product row with the buy pill */\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 font-family: var(--font-ui);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(1.8);\n backdrop-filter: blur(var(--backdrop-blur)) saturate(1.8);\n}\n.ds-nav__inner,\n.ds-nav__sub {\n display: flex;\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__sub {\n min-height: var(--size-subnav);\n}\n.ds-nav__rule {\n height: var(--border-width);\n background: color-mix(in srgb, var(--color-bar-text) 16%, transparent);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n justify-content: center;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__sub .ds-nav__links {\n justify-content: flex-end;\n gap: var(--space-5);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) 0;\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n opacity: 0.66;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__sub .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__sub .ds-nav__link[href=\"#home\"],\n.ds-page:has(#specs:target) .ds-nav__sub .ds-nav__link[href=\"#specs\"],\n.ds-page:has(#compare:target) .ds-nav__sub .ds-nav__link[href=\"#compare\"],\n.ds-page:has(#order:target) .ds-nav__sub .ds-nav__link[href=\"#order\"] {\n opacity: 1;\n border-bottom-color: currentColor;\n}\n.ds-nav__product {\n color: inherit;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n\n/* hero: full bleed on the page colour, everything centred, the device\n drawn large under the copy with one drifting light behind it */\n.ds-hero {\n position: relative;\n padding: var(--space-8) var(--space-5) 0;\n color: var(--color-heading);\n text-align: center;\n overflow: hidden;\n}\n.ds-hero__kicker {\n position: relative;\n margin: 0 0 var(--space-4);\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-hero__title {\n position: relative;\n margin: 0 auto;\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 12vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n position: relative;\n max-width: 36ch;\n margin: var(--space-4) auto 0;\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-hero__actions {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-3) var(--space-5);\n margin-top: var(--space-5);\n}\n.ds-hero__stage {\n position: relative;\n display: flex;\n justify-content: center;\n margin: var(--space-6) auto calc(var(--space-8) * -1);\n}\n.ds-hero .ds-glow {\n top: 30%;\n color: var(--color-accent);\n opacity: 0.4;\n}\n\n/* device: the product as inline SVG in currentColor. A second drawing in\n the accent colour lies over it and turns once a minute */\n.ds-device {\n position: relative;\n width: var(--size-device);\n max-width: 86%;\n color: var(--color-heading);\n}\n.ds-device svg {\n display: block;\n width: 100%;\n height: auto;\n}\n.ds-device__hand {\n position: absolute;\n inset: 0;\n color: var(--color-accent);\n}\n@keyframes ds-turn {\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n .ds-device__hand {\n animation: ds-turn 60s linear infinite;\n }\n}\n\n/* statement: one very large sentence */\n.ds-statement {\n max-width: 20ch;\n margin: 0 auto;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 7vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-align: center;\n text-wrap: balance;\n}\n.ds-statement__dim {\n color: var(--color-text-muted);\n}\n\n/* grid: specification tiles of unequal size on the four fills */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n grid-column: span 2;\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 overflow: hidden;\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 border-color: var(--color-border-strong);\n transform: scale(1.015);\n}\n.ds-grid__cell--wide {\n grid-column: span 4;\n}\n.ds-grid__cell--accent,\n.ds-grid__cell--accent:nth-child(n) {\n border-color: transparent;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-grid__cell--accent .ds-grid__kicker,\n.ds-grid__cell--accent .ds-grid__figure,\n.ds-grid__cell--accent .ds-grid__title {\n color: inherit;\n}\n.ds-grid__kicker {\n margin: 0;\n color: var(--color-text-muted);\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-grid__figure {\n margin: auto 0 0;\n padding-top: var(--space-5);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h1), 8vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-grid__title {\n margin: auto 0 0;\n padding-top: var(--space-5);\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}\n.ds-grid__text {\n max-width: 34ch;\n margin: var(--space-2) 0 0;\n}\n.ds-bars {\n position: absolute;\n top: var(--space-5);\n right: var(--space-5);\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n height: var(--space-7);\n color: var(--color-accent);\n}\n.ds-bars__bar {\n width: var(--space-2);\n height: 100%;\n border-radius: var(--radius-pill);\n background: currentColor;\n}\n.ds-bars__bar--low {\n height: 40%;\n opacity: 0.35;\n}\n.ds-bars__bar--mid {\n height: 70%;\n opacity: 0.6;\n}\n\n/* story: the title stays in place while the steps scroll past it */\n.ds-story {\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);\n align-items: start;\n gap: var(--space-8);\n}\n.ds-story__head {\n position: sticky;\n top: calc(var(--size-nav) + var(--size-subnav) + var(--space-7));\n}\n.ds-story__step {\n padding: var(--space-6) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 22%, transparent);\n}\n.ds-story__num {\n margin: 0 0 var(--space-3);\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 opacity: 0.6;\n}\n.ds-story__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-story__text {\n max-width: 44ch;\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n opacity: 0.72;\n}\n\n/* rail: a row of rounded tiles that scrolls sideways inside the page */\n.ds-rail {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(var(--size-tile), 1fr);\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-3);\n list-style: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n}\n.ds-rail__tile {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\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 text-decoration: none;\n scroll-snap-align: start;\n transition: var(--transition);\n}\n.ds-rail__tile:hover,\n.ds-rail__tile.is-hover {\n border-color: var(--color-border-strong);\n transform: scale(1.015);\n}\n.ds-rail__name {\n margin-top: var(--space-5);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-rail__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* watch: the small drawing of the product, made of boxes */\n.ds-watch {\n position: relative;\n display: block;\n width: var(--size-watch);\n aspect-ratio: 1;\n margin: var(--space-5) auto;\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-inverse);\n}\n.ds-watch::before,\n.ds-watch::after {\n content: \"\";\n position: absolute;\n left: 30%;\n width: 40%;\n height: 34%;\n border-radius: var(--radius-pill);\n background: currentColor;\n z-index: -1;\n}\n.ds-watch::before { bottom: 92%; }\n.ds-watch::after { top: 92%; }\n.ds-watch--2 { color: var(--color-accent); }\n.ds-watch--3 { color: var(--color-accent-alt); }\n.ds-watch--4 { color: var(--color-border-strong); }\n.ds-watch--small {\n width: calc(var(--size-watch) * 0.7);\n}\n.ds-watch__wrap {\n position: relative;\n z-index: 0;\n padding: var(--space-5) 0;\n}\n\n/* closing call to action */\n.ds-cta {\n text-align: center;\n}\n.ds-cta .ds-buttonrow {\n justify-content: center;\n margin-top: var(--space-5);\n}\n.ds-price {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n\n/* inner pages */\n.ds-models {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n align-items: stretch;\n gap: var(--space-3);\n}\n.ds-model {\n text-align: center;\n}\n.ds-model .ds-buttonrow {\n justify-content: center;\n}\n.ds-tabsrow {\n display: flex;\n margin-bottom: var(--space-5);\n}\n.ds-total {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n\n@media (max-width: 900px) {\n .ds-grid__cell,\n .ds-grid__cell--wide {\n grid-column: span 3;\n }\n .ds-grid__cell--wide {\n grid-column: span 6;\n }\n .ds-story {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n }\n .ds-story__head {\n position: static;\n }\n .ds-models {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-rail {\n grid-auto-columns: 62%;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner,\n .ds-nav__sub {\n gap: var(--space-4);\n padding: 0 var(--space-4);\n }\n .ds-nav__inner .ds-nav__links {\n justify-content: flex-end;\n gap: var(--space-4);\n }\n .ds-nav__sub .ds-nav__links {\n justify-content: flex-start;\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-nav__product,\n .ds-nav__extra {\n display: none;\n }\n .ds-hero {\n padding: var(--space-7) var(--space-4) 0;\n }\n .ds-hero::after {\n height: var(--space-6);\n }\n .ds-hero__stage {\n margin-bottom: calc(var(--space-6) * -1);\n }\n .ds-hero__title,\n .ds-grid__figure,\n .ds-stat__figure {\n letter-spacing: var(--heading-tracking);\n }\n .ds-grid__cell,\n .ds-grid__cell--wide {\n grid-column: span 6;\n min-height: 0;\n }\n .ds-rail {\n grid-auto-columns: 78%;\n }\n}\n.ds-hero::after {\n content: \"\";\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: var(--space-9);\n background: linear-gradient(transparent, var(--color-page));\n pointer-events: none;\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", "specimen.html": "\n\n\n\n\nchronoskin: modern hardware product page specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n
\n The watch\n \n Buy\n
\n
\n
\n\n
\n
\n \n

New. The chronoskin watch

\n

Time, lightly.

\n

Eighteen days on one charge, in a case that weighs less than a letter.

\n
\n Buy from 249\n Read the tech specs\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n\n
\n
\n

A watch that asks for nothing. No nightly charging, no notifications you did not choose, no screen that shouts.

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

Battery

\n \n

18 days

\n

A full charge in 55 minutes, then nearly three weeks of wear.

\n
\n
\n

Weight

\n

29 g

\n

Titanium case, without the strap.

\n
\n
\n

Water

\n

100 m

\n

Swim, dive and shower with it.

\n
\n
\n

Glass

\n

Sapphire, domed, and hard to scratch.

\n
\n
\n

Display

\n

Always on. Readable in full sun.

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

A day with it

\n

Quiet until it matters.

\n
\n
\n
\n

07:10

\n

It wakes you with a tap, not a tune.

\n

A soft pulse on the wrist in the lightest part of your sleep.

\n
\n
\n

13:40

\n

It counts the walk you did not plan.

\n

Steps, pace and heart rate, kept on the watch until you want them.

\n
\n
\n

22:30

\n

It goes dark when you do.

\n

The display dims with the room and stays out of your evening.

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

9.8 mm

thin, so it slides under a cuff

\n

55 min

from empty to a full charge

\n

5 yrs

of software updates, promised

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

Straps

\n

Make it yours.

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

From 249, strap included.

\n

Free delivery in two days. Thirty days to change your mind.

\n
\n Buy the watch\n Compare sizes\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. The watch
    3. \n
  3. Tech specs
    4. \n
\n

Tech specs

\n

Every number behind the watch, measured the way you would use it.

\n
\n
\n Buy from 249\n
\n
\n
\n
\n \n \n
\n
\n
\n

Battery and charging

\n

Eighteen days is the figure for ordinary wear: the display on, sleep tracking each night and an hour of exercise a day.

\n

How we measure

\n

A new watch is charged to full and worn until it switches itself off. With position trackingSatellite positioning, switched on only while a workout runs. on for every workout the figure is nearer eleven days. Low power mode, set with Settings › Battery, stretches it to forty.

\n

Charging

\n
    \n
  • Magnetic puck, any 5 W supply.
    • \n
  • Ten minutes of charge gives about three days.
    • \n
  • The cell keeps 80% of its capacity after 1,000 full cycles.
    • \n
\n
\n
\n

After ten minutes on the puckabout 3 of 18 days

\n\n
\n
\nCan I swim with it?\n

Yes, to 100 metres. Rinse it in fresh water after the sea.

\n
\n
\nDoes it work with my phone?\n

With any phone from the last six years, through the app.

\n
\n
\nWhat happens to the battery after years?\n

It keeps 80% after 1,000 full cycles, and the workshop can change it.

\n
\n
\n
\n
\n

Case and glass

Both sizes
\n
\n
    \n
  • Grade 5 titaniumCase

    Bead-blasted, 9.8 mm thin

    • \n
  • Domed sapphireGlass

    Anti-reflective coating on the inside

    • \n
  • 100 mWater resistance

    Tested to 10 bar; not for hot springs

    • \n
\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. The watch
    3. \n
  3. Compare
    4. \n
\n

Which one is yours?

\n

Two sizes, the same insides. Pick by wrist, not by features.

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

40 mm

New
\n
\n \n

For wrists up to 170 mm. 29 grams.

\n
Buy for 249
\n
\n
\n
\n

44 mm

Longer battery
\n
\n \n

For wrists from 150 mm. 34 grams.

\n
Buy for 279
\n
\n
\n
\n \n

Nothing in the third slot

\n

Add the watch you wear now to see what changes.

\n Add a model\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
Measure40 mm44 mmNote
Battery, days1822Best in 44
Weight, grams2934Best in 40
Thickness, mm9.89.8Same
Display, mm30.434.1By size
Delivery, days2944 is short
Steel finish00Sold out
\n
\n
\n New\n Longer battery\n Same\n In stock\n Few left\n Sold out\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Compare
    3. \n
  3. Order
    4. \n
\n

Build your watch.

\n

Choose a size and a strap. It ships in two days.

\n
\n
\n
\n
\n

Your choices

Help me choose
\n
\n
\n
\n

Engraving is free. It adds one day to delivery.

\n

Not ordered yet. The engraving below is too long.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n 33 characters. The case back holds 24.\n
\n
\n \n \n
\n
\n \n \n Optional.\n
\n \n
\n \n Back to compare\n \n \n
\n
\n
\n
\n
\n
\n

In your bag

In stock
\n
\n
    \n
  • The watch, 40 mm249

    Titanium, woven strap in bone

    • \n
  • Two years of cover29

    Accidents and battery

    • \n
  • Delivery0

    Two working days, signed for

    • \n
\n

Total278

\n
\n
\n
\n
\n

Place this order?

×
\n

We will charge 278 to the card ending 4821 and send the watch within two days.

\n
\n Confirm and pay\n Not yet\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.modern-product.shop.s02.p04.t05.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"modern-product\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"shop\",\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-2452\",\n \"short\": \"v1-mp-2452\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0b1437;\n --color-canvas: #0b1437;\n --color-surface: #16224f;\n --color-surface-alt: #101b45;\n --color-surface-strong: #24326b;\n --color-bar: #0b1437;\n --color-bar-text: #eef2ff;\n --color-bar-alt: #070d27;\n --color-bar-alt-text: #9aa6cf;\n --color-inverse: #e6f8f0;\n --color-inverse-text: #0b1437;\n --color-text: #c5cdea;\n --color-text-muted: #8e9ac4;\n --color-heading: #ffffff;\n --color-heading-alt: #4fe3b0;\n --color-link: #4fe3b0;\n --color-link-quiet: #c5cdea;\n --color-link-visited: #9fd0c0;\n --color-link-hover: #92f2cf;\n --color-link-active: #2fc492;\n --color-border: #2c3a73;\n --color-border-strong: #5565a3;\n --color-border-muted: #1e2a5a;\n --color-accent: #ff6b57;\n --color-accent-text: #0b1437;\n --color-accent-alt: #7cc4ff;\n --color-fill-1: #15305c;\n --color-fill-2: #3a2046;\n --color-fill-3: #123c47;\n --color-fill-4: #1c2658;\n --color-button: #4fe3b0;\n --color-button-text: #06122e;\n --color-button-hover-text: #06122e;\n --color-button-secondary: #0b1437;\n --color-button-secondary-text: #eef2ff;\n --color-input: #101b45;\n --color-input-text: #ffffff;\n --color-input-border: #35447f;\n --color-disabled: #1a2552;\n --color-disabled-text: #5b689c;\n --color-danger: #ff4f7b;\n --color-danger-surface: #3a1233;\n --color-success: #2fd08f;\n --color-warning: #ffc857;\n --color-notice: #16305c;\n --color-notice-text: #cfe6ff;\n --color-focus: #4fe3b0;\n --color-shadow: rgb(2 6 23 / 0.5);\n --color-overlay: rgb(3 8 28 / 0.7);\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" } }