{
  "id": "v1-mp-5445-dr",
  "long_id": "v1.modern-product.shop.s05.p04.t04.u05.dr",
  "name": "Modern device store",
  "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
  },
  "density": "roomy",
  "summary": "This is the online store of a maker of a family of devices between 2020 and 2026: a calm page of pale silicon grey with graphite text in a neutral system sans, where every product gets a large rounded tile with its name, one line, a \"Learn more\" and a \"Buy\" button and the device itself drawn huge in CSS and cut off by the tile's lower edge. A strip of small line drawings under a thin translucent bar leads to each product, tiles alternate grey, graphite, white and one blue, and buying is a configuration page of option chips with a price bar that stays at the lower edge of the window. It was the common look of phone, computer, audio and wearable makers' stores in the first half of the 2020s.",
  "url": "https://chrono.skin/s/v1-mp-5445-dr",
  "preview_url": "https://chrono.skin/s/v1-mp-5445-dr/specimen.html",
  "files": {
    "STYLE.md": "# Modern device store\n\n## Summary\n\nThis is the online store of a maker of a family of devices between 2020 and 2026: a calm page of pale silicon grey with graphite text in a neutral system sans, where every product gets a large rounded tile with its name, one line, a \"Learn more\" and a \"Buy\" button and the device itself drawn huge in CSS and cut off by the tile's lower edge. A strip of small line drawings under a thin translucent bar leads to each product, tiles alternate grey, graphite, white and one blue, and buying is a configuration page of option chips with a price bar that stays at the lower edge of the window. It was the common look of phone, computer, audio and wearable makers' stores in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Tiles run almost full bleed, `--space-3` from the window edges and from each other; everything else sits in `.ds-wrap`, centred, at most `--size-page` (1240px) wide with `--space-5` side padding. Sections pad themselves with `--space-9` (96px), `--tight` with `--space-8`.\n- Navigation is `.ds-nav`, one thin bar `--size-nav` (48px) tall that is `position: sticky` at the top of the window, translucent, in `--text-small`: the brand at the left, three links centred, search and the bag with its count at the right. The current link is set in `--weight-bold`.\n- The home view stacks: `.ds-strip`, the family as seven small drawings with a name and a price or \"New\"; `.ds-hero`, the newest product's tile on `--color-surface-alt`, `--size-tile` (560px) tall, everything centred and two phones cut off by its lower edge; a `.ds-tile` on the inverse fill with the devices drawn as outlines; `.ds-grid`, four product tiles two to a row on the four fills; a section with the `.ds-stat` figures, centred; and a short `.ds-tile` on the accent fill.\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 one button at the right) on the page colour; then the working components. Tabs are a centred pill switch in `.ds-tabsrow`. Content is `.ds-config` (7 to 5: the device on a stage that stays in place, the options beside it), `.ds-cols--side` with the `.ds-sidebar` at the left and a `.ds-shelf` of product cards, or `.ds-cols` (7 to 5) with the summary column staying in place.\n- Views. The specimen is the store of a device maker. `home` is the store front. `phone` is the configuration page: the switch between models, finish and storage chips, a notice, what is in the box as running text, the table of models with its badge key, and the `.ds-buybar`. `accessories` has the categories at the left with an empty saved-items box and a row of links, six product cards and the pagination. `bag` has the items as a list, the delivery form with its notices and buttons, the summary, the open empty-the-bag dialog and three reassurances.\n- Below 900px tiles go one to a row, the configuration stacks, the shelf goes two to a row and the strip scrolls sideways; below 640px `.ds-nav__links` becomes a full-width second row under the brand and `.ds-nav__actions`, its `.ds-nav__link` items spread in equal cells (the current one keeps `is-current`), option chips and product cards stack 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, rise of a hovered card), `--space-2` 8px (icon to text, a device's bezel), `--space-3` 12px (between buttons, between tiles and from tiles to the window edge), `--space-4` 16px (form rows, list rows, chip padding, shelf gap), `--space-5` 20px (panel padding, page gutter, tile actions), `--space-6` 28px (between option groups, between two devices), `--space-7` 44px (section head to content, copy to device, rise of the scroll animation), `--space-8` 64px (top of a tile, tight sections, how far a device runs off the edge), `--space-9` 96px (sections).\n- Other sizes: `--size-mark` 22px, `--size-icon` 44px, `--size-control` 36px, `--size-device` 240px (width of a phone; other devices are multiples of it), `--size-tile` 560px, `--size-strip` 52px, `--size-art` 460px (least height of the configuration stage), `--size-thumb` 72px, `--size-dialog` 420px.\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 devices in the hero and on the configuration stage (16s, alternating). A device rises by 8px when its stage is hovered. 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` deep navy `#0b1437` with lighter navy panels, `--color-inverse` a mint white `#e6f8f0`, `--color-accent` coral `#ff6b57` with navy text, and `--color-button`, links and kickers mint `#4fe3b0`. The four fills are deep blue, plum, teal and indigo.\n- One soft geometric family for everything (`--font-body`: Poppins, Avenir Next; the references used commercial geometric and grotesque faces), `--font-mono` for code and the fields of a mock. `--text-base` 16px at `--line-body` 1.45; `--text-ui` 14px (buttons, navigation, kickers); `--text-small` 13px (meta, badges, labels, footer, the inside of a mock); `--text-large` 19px (leads, list titles, step text); `--text-display` 88px (hero title and figures, scaled down with `clamp()` and `vw` to `--text-h2` on a phone); `--text-h1` 56px (section and page titles, the rate); `--text-h2` 32px (step titles, sums); `--text-h3` 20px (panel and tile titles).\n- Headlines are semibold, not heavy: `--weight-display` and `--weight-heading` 600, with `--display-tracking` -2.5px and `--heading-tracking` -0.4px; `--weight-ui` 500. Nothing is uppercase; links are not underlined until hovered.\n- Surface: `--radius-control` 12px (buttons and fields are rounded rectangles, not pills), `--radius-panel` 24px, `--radius-page` 32px, pills only for badges, chips and tabs' capsule ends. Panels float on `--shadow-panel` (0 16px 32px); a hovered button or tile gets a 4px ring of its own colour (`--shadow-control-hover`); mocks, the reader and the dialog carry `--shadow-dialog`. `--fill-page` adds one faint light in the upper right corner and `--fill-accent` runs the accent towards a lighter tint at 135 degrees. `--transition` is 0.2s; `--backdrop-blur` 16px.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on `<body>`. 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 thin bar. `.ds-nav__inner` lays out the brand, `.ds-nav__links` of `.ds-nav__link` (the current one bold, `is-current`) and `.ds-nav__actions` with `.ds-nav__search` and the bag link, whose `.ds-nav__count` is a small pill in the button colours. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-strip`: the row of products under the navigation: each `.ds-strip__item` is a link with a line drawing as inline SVG, the name, and `.ds-strip__new` or `.ds-strip__none` (a price) under it.\n- `.ds-hero`: the first tile of the home view, on `--color-surface-alt`, centred: `.ds-hero__kicker`, `.ds-hero__title` (the product's name), `.ds-hero__lead`, `.ds-hero__actions` (a primary \"Learn more\" and a secondary \"Buy\") and `.ds-hero__stage` with one or two `.ds-device`. A `.ds-glow` drifts behind. One per site.\n- `.ds-tile`: a further product block, used with `.ds-tone--inverse` or `.ds-tone--accent`: `.ds-tile__kicker`, `.ds-tile__title`, `.ds-tile__text`, `.ds-tile__actions` (the buttons of its ground) and `.ds-tile__stage`. `--short` has no device and pads its lower edge.\n- `.ds-device`: the product drawn with boxes: a body in `--color-inverse` and a `.ds-device__screen`. Plain it is a phone; `--tablet`, `--laptop` (with a base), `--watch` (with a strap of `--color-surface-strong`) and `--speaker` (a dotted grille) change its proportions. `--line` draws it as an outline in the text colour, the only form allowed on an inverse block. In a stage it runs `--space-8` off the lower edge, except the laptop, the speaker and the watch, which stand inside it.\n- `.ds-grid`: product tiles two to a row on the four fills in turn. Each `.ds-grid__cell` is built like a `.ds-tile` (kicker, title, text, two small buttons, stage).\n- `.ds-stat`: the row of three figures, centred; each `.ds-stat__item` is a `.ds-stat__figure` in `--text-h1` over a `.ds-stat__label`.\n- `.ds-config`: the configuration page: `.ds-art`, the stage on `--color-fill-1` that is `position: sticky` under the navigation, and `.ds-config__options`, a column of `.ds-option` groups, each with an `.ds-option__title` (the question in grey inside a `span`).\n- `.ds-chips`: option chips, two to a row: each `.ds-chip` is a rounded box with the choice at the left and a `small` price at the right; `is-current` is ringed in `--color-focus`, `is-disabled` dashed. `--row` lays pill chips in a line, each with a `.ds-swatch` dot (`--2`, `--3`, `--4`).\n- `.ds-buybar`: the price bar, `position: sticky` at the lower edge of the window while its container shows: `.ds-buybar__name` with the configuration in a `small`, and `.ds-buybar__side` with `.ds-buybar__price` and one primary button. It is translucent like the navigation and takes its colours.\n- `.ds-tabsrow`: centres the tab switch above what it changes.\n- `.ds-shelf`: product cards three to a row: each `.ds-panel.ds-product` has `.ds-product__art` (a line drawing on a fill) and `.ds-product__body` with a badge, `.ds-product__name`, `.ds-product__price` and one small button.\n- `.ds-list--bag`: bag rows: a `.ds-thumb` (a line drawing on `--color-fill-1`), then `.ds-list__grow` holding the head, with `.ds-list__sum` at its right, and the meta line.\n- `.ds-sum`: the sums of an order as a `dl` of `.ds-sum__row`; `--total` is set in heading type over a rule. `.ds-side--sticky` keeps the summary column in place.\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 `<details>` 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-carousel`: `.ds-carousel__track` scrolls sideways with scroll snapping and holds `.ds-carousel__slide` items on the fills; `.ds-carousel__bar` has `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__hint`, a small line that says to swipe. `.ds-carousel--peek` shows two slides and the edge of a third; `.ds-voice` with `.ds-voice__text` is a slide that quotes a customer above a `.ds-person`.\n- `.ds-switch`: an on and off control drawn over `<input type=\"checkbox\">`. `.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- `.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\n## Never\n\n- `font-weight <= 600`: headlines are semibold, never heavy.\n- `font-weight >= 400`: nothing is set light.\n- `font-size >= 13px`: meta, badges and the footer are the smallest text.\n- `font-size <= 88px`: the hero title and the figures are the largest text.\n- `font-families <= 2`: one geometric sans-serif family, plus monospace for code and the fields of a mock.\n- `line-height <= 1.5`: body text is set at 1.45.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 5%`: links are told apart by colour and weight; 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 <= 30px`: controls are 10px, panels 18px, tiles 24px and a drawn watch a little more; only pills and circles are rounder.\n- `box-shadow-blur <= 48px`: panels rest on a 12px shadow; devices, the price bar and the dialog on one of 48px.\n- `gradient-fills <= 5%`: fills are flat; only drawn screens and the drifting light are gradients.\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 product on the store front is another `.ds-grid__cell`, or a `.ds-tile` with a tone class when it deserves the full width; draw its device from `.ds-device` and one proportion modifier, as an outline (`--line`) on an inverse block. A new choice on the configuration page is another `.ds-option` with `.ds-chips`; anything that holds data is a `.ds-panel`. 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: 1240px;\n  --size-nav: 48px;\n  --size-mark: 22px;\n  --size-icon: 44px;\n  --size-control: 36px;\n  --size-dialog: 420px;\n  --size-menu: 660px;\n  --size-avatar: 40px;\n  --size-tip: 240px;\n  --size-device: 240px;\n  --size-tile: 560px;\n  --size-strip: 52px;\n  --size-art: 460px;\n  --size-thumb: 72px;\n  --space-1: 5px;\n  --space-2: 10px;\n  --space-3: 15px;\n  --space-4: 20px;\n  --space-5: 25px;\n  --space-6: 35px;\n  --space-7: 55px;\n  --space-8: 80px;\n  --space-9: 120px;\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\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--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-body);\n  text-decoration: var(--link-decoration-quiet);\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--wide {\n  width: 100%;\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__head {\n  max-width: 90ch;\n  margin: 0 auto var(--space-7);\n  text-align: center;\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}\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__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-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/* voice: what a customer says, the slide of a carousel that shows two and a bit */\n.ds-carousel--peek {\n  margin-top: var(--space-7);\n}\n.ds-carousel--peek .ds-carousel__slide {\n  width: 46%;\n}\n.ds-voice {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-5);\n  height: 100%;\n  margin: 0;\n  padding: var(--space-6);\n}\n.ds-voice__text {\n  margin: 0;\n  color: inherit;\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-voice .ds-person__name,\n.ds-voice .ds-person__meta {\n  color: inherit;\n}\n.ds-voice .ds-avatar {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\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.ds-accordion--gap {\n  margin-top: 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@media (max-width: 640px) {\n  .ds-carousel--peek .ds-carousel__slide {\n    width: 88%;\n  }\n  .ds-voice {\n    padding: var(--space-5);\n  }\n}\n\n/* ---- layout: the store of a family of devices ---- */\n\n/* nav: one thin translucent bar at the top of the window: brand, the\n   store's pages in the middle, search and the bag at the right */\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  display: flex;\n  align-items: center;\n  justify-content: space-between;\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 .ds-brand {\n  font-size: var(--text-base);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  gap: var(--space-7);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  color: inherit;\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  opacity: 0.74;\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__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#phone:target) .ds-nav__links .ds-nav__link[href=\"#phone\"],\n.ds-page:has(#accessories:target) .ds-nav__links .ds-nav__link[href=\"#accessories\"],\n.ds-page:has(#bag:target) .ds-nav__actions .ds-nav__link[href=\"#bag\"] {\n  font-weight: var(--weight-bold);\n  opacity: 1;\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n}\n.ds-nav__link svg {\n  width: var(--space-4);\n  height: var(--space-4);\n}\n.ds-nav__count {\n  min-width: var(--space-4);\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-pill);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-align: center;\n}\n\n/* strip: the family as a row of small drawings, under the navigation */\n.ds-strip {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-7);\n  margin: 0;\n  padding: var(--space-5) var(--space-5) var(--space-6);\n  list-style: none;\n  overflow-x: auto;\n}\n.ds-strip__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-heading);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-strip__item svg {\n  width: var(--size-strip);\n  height: var(--size-strip);\n  margin-bottom: var(--space-1);\n}\n.ds-strip__item:hover,\n.ds-strip__item.is-hover {\n  color: var(--color-link);\n  transform: scale(1.015);\n}\n.ds-strip__new {\n  color: var(--color-accent-alt);\n  font-weight: var(--weight-body);\n}\n.ds-strip__none {\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n\n/* tile: a full-bleed or half-width block for one product: the name, a\n   line, two pills and the device, cut off by the lower edge */\n.ds-hero,\n.ds-tile,\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--space-8) var(--space-5) 0;\n  text-align: center;\n  overflow: hidden;\n}\n.ds-hero {\n  min-height: var(--size-tile);\n  margin: 0 var(--space-3);\n  border-radius: var(--radius-page);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n}\n.ds-tile {\n  min-height: var(--size-tile);\n  margin: var(--space-3) var(--space-3) 0;\n  border-radius: var(--radius-page);\n}\n.ds-tile--short {\n  min-height: 0;\n  margin-bottom: var(--space-8);\n  padding-bottom: var(--space-8);\n}\n.ds-hero__kicker,\n.ds-tile__kicker {\n  margin: 0 0 var(--space-2);\n  color: color-mix(in srgb, var(--color-accent-alt) 62%, var(--color-heading));\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-tone--inverse .ds-tile__kicker,\n.ds-tone--accent .ds-tile__kicker {\n  color: inherit;\n  opacity: 0.7;\n}\n.ds-hero__title {\n  position: relative;\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h2), 8vw, 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-tile__title {\n  position: relative;\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h2), 5vw, 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-tone--inverse .ds-tile__title,\n.ds-tone--accent .ds-tile__title {\n  color: inherit;\n}\n.ds-hero__lead,\n.ds-tile__text {\n  position: relative;\n  max-width: 34ch;\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n  text-wrap: balance;\n}\n.ds-hero__actions,\n.ds-tile__actions {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3);\n  margin-top: var(--space-5);\n}\n.ds-hero__stage,\n.ds-tile__stage {\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: flex-end;\n  align-self: stretch;\n  justify-content: center;\n  gap: var(--space-6);\n  margin-top: var(--space-7);\n}\n.ds-hero__stage,\n.ds-tile__stage,\n.ds-art {\n  isolation: isolate;\n}\n.ds-config__options {\n  min-width: 0;\n}\n.ds-hero__stage .ds-device,\n.ds-tile__stage .ds-device {\n  margin-bottom: calc(var(--space-8) * -1);\n}\n.ds-hero__stage .ds-device--laptop,\n.ds-tile__stage .ds-device--laptop,\n.ds-tile__stage .ds-device--speaker {\n  margin-bottom: var(--space-7);\n}\n.ds-tile__stage .ds-device--watch {\n  margin-top: calc(var(--size-device) * 0.5);\n  margin-bottom: var(--space-8);\n}\n\n/* device: the product drawn with boxes. The body is the inverse colour,\n   the screen the accent running into the second accent */\n.ds-device {\n  position: relative;\n  flex: none;\n  width: var(--size-device);\n  max-width: 100%;\n  aspect-ratio: 9 / 18;\n  padding: var(--space-2);\n  border-radius: var(--radius-page);\n  background: var(--color-inverse);\n  box-shadow: var(--shadow-dialog);\n  transition: var(--transition);\n}\n.ds-device__screen {\n  position: relative;\n  display: block;\n  height: 100%;\n  border-radius: calc(var(--radius-page) - var(--space-2));\n  background: linear-gradient(160deg, var(--color-accent), var(--color-accent-alt));\n  overflow: hidden;\n}\n.ds-device__screen::before {\n  content: \"\";\n  position: absolute;\n  top: var(--space-2);\n  left: 35%;\n  width: 30%;\n  height: var(--space-3);\n  border-radius: var(--radius-pill);\n  background: var(--color-inverse);\n}\n.ds-device--tablet {\n  width: calc(var(--size-device) * 1.5);\n  aspect-ratio: 4 / 3;\n}\n.ds-device--tablet .ds-device__screen::before,\n.ds-device--laptop .ds-device__screen::before,\n.ds-device--watch .ds-device__screen::before {\n  content: none;\n}\n.ds-device--laptop {\n  width: calc(var(--size-device) * 1.9);\n  aspect-ratio: 16 / 10;\n  border-radius: calc(var(--radius-panel) / 1.5) calc(var(--radius-panel) / 1.5) 0 0;\n}\n.ds-device--laptop .ds-device__screen {\n  border-radius: calc(var(--radius-panel) / 3);\n}\n.ds-device--laptop::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: -9%;\n  width: 118%;\n  height: var(--space-3);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: color-mix(in srgb, var(--color-inverse) 70%, var(--color-surface-strong));\n}\n.ds-device--watch {\n  width: calc(var(--size-device) * 0.7);\n  aspect-ratio: 5 / 6;\n  border-radius: calc(var(--radius-page) * 1.2);\n}\n.ds-device--watch::before {\n  content: \"\";\n  position: absolute;\n  top: -60%;\n  bottom: -60%;\n  left: 16%;\n  z-index: -1;\n  width: 68%;\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-strong);\n}\n.ds-device--speaker {\n  width: calc(var(--size-device) * 0.7);\n  aspect-ratio: 3 / 4;\n}\n.ds-device--speaker .ds-device__screen {\n  background: radial-gradient(circle, color-mix(in srgb, var(--color-inverse-text) 34%, transparent) 22%, transparent 26%) 0 0 / var(--space-2) var(--space-2);\n}\n.ds-device--speaker .ds-device__screen::before {\n  top: auto;\n  bottom: var(--space-3);\n  left: 44%;\n  width: 12%;\n  background: var(--color-accent);\n}\n/* a device on an inverse block is drawn as an outline */\n.ds-device--line {\n  border: var(--border-width-strong) var(--border-style) currentColor;\n  background: transparent;\n  box-shadow: none;\n}\n.ds-device--line .ds-device__screen {\n  background: color-mix(in srgb, currentColor 14%, transparent);\n}\n.ds-device--line .ds-device__screen::before {\n  background: currentColor;\n}\n.ds-device--line.ds-device--watch::before {\n  background: color-mix(in srgb, currentColor 14%, transparent);\n}\n.ds-tile__stage:hover .ds-device,\n.ds-hero__stage:hover .ds-device,\n.ds-device.is-hover {\n  transform: translateY(calc(var(--space-2) * -1));\n}\n\n/* grid: product tiles two to a row, on the four fills */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-3);\n  margin: var(--space-3) var(--space-3) 0;\n}\n.ds-grid__cell {\n  min-height: var(--size-tile);\n  padding-top: var(--space-7);\n  border-radius: var(--radius-page);\n  background: var(--color-fill-1);\n  color: var(--color-text);\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 .ds-tile__title {\n  font-size: var(--text-h2);\n}\n\n/* stats: figures centred under small icons */\n.ds-stat {\n  text-align: center;\n}\n.ds-stat__figure {\n  font-size: clamp(var(--text-h2), 5vw, var(--text-h1));\n  letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n  margin-right: auto;\n  margin-left: auto;\n}\n\n/* configure: the device stays in place at the left while the options\n   scroll at the right */\n.ds-config {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  align-items: start;\n  gap: var(--space-7);\n}\n.ds-art {\n  position: sticky;\n  top: calc(var(--size-nav) + var(--space-5));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-6);\n  min-height: var(--size-art);\n  padding: var(--space-7) var(--space-5);\n  border-radius: var(--radius-page);\n  background: var(--color-fill-1);\n  overflow: hidden;\n}\n.ds-option {\n  margin: 0 0 var(--space-6);\n}\n.ds-option__title {\n  margin: 0 0 var(--space-3);\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-option__title span {\n  color: var(--color-text-muted);\n}\n.ds-chips {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-chips--row {\n  display: flex;\n  flex-wrap: wrap;\n}\n.ds-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  height: 100%;\n  padding: var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-chip small {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  text-align: right;\n}\n.ds-chip:hover,\n.ds-chip.is-hover {\n  border-color: var(--color-heading);\n}\n.ds-chip.is-current {\n  border-color: var(--color-focus);\n  outline: var(--border-width-strong) var(--border-style) var(--color-focus);\n}\n.ds-chip.is-disabled {\n  border-style: dashed;\n  background: transparent;\n  color: var(--color-disabled-text);\n}\n.ds-chips--row .ds-chip {\n  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);\n  border-radius: var(--radius-pill);\n  font-size: var(--text-ui);\n}\n.ds-swatch {\n  display: inline-block;\n  flex: none;\n  width: var(--space-6);\n  height: var(--space-6);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  background: var(--color-inverse);\n}\n.ds-swatch--2 { background: var(--color-surface-strong); }\n.ds-swatch--3 { background: var(--color-accent); }\n.ds-swatch--4 { background: var(--color-accent-alt); }\n\n/* buy bar: the chosen configuration and its price, fixed to the lower\n   edge of the window while the product page shows */\n.ds-buybar {\n  position: sticky;\n  bottom: var(--space-3);\n  z-index: 5;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  margin: var(--space-7) 0 0;\n  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 14%, transparent);\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  box-shadow: var(--shadow-dialog);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(1.8);\n  backdrop-filter: blur(var(--backdrop-blur)) saturate(1.8);\n}\n.ds-buybar__name {\n  margin: 0;\n  font-weight: var(--weight-bold);\n}\n.ds-buybar__name small {\n  display: block;\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n.ds-buybar__side {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n}\n.ds-buybar__price {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-buybar__price small {\n  display: block;\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n.ds-tabsrow {\n  display: flex;\n  justify-content: center;\n  margin-bottom: var(--space-6);\n}\n\n/* shelf: small product cards, three to a row */\n.ds-shelf {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-product {\n  display: flex;\n  flex-direction: column;\n  transition: var(--transition);\n}\n.ds-product:hover,\n.ds-product.is-hover {\n  transform: scale(1.015);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-product__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 4 / 3;\n  margin: var(--space-3) var(--space-3) 0;\n  border-radius: calc(var(--radius-panel) - var(--space-1));\n  background: var(--color-fill-1);\n  color: var(--color-heading);\n}\n.ds-product:nth-child(4n + 2) .ds-product__art { background: var(--color-fill-3); }\n.ds-product:nth-child(4n + 3) .ds-product__art { background: var(--color-fill-4); }\n.ds-product:nth-child(4n + 4) .ds-product__art { background: var(--color-surface-alt); }\n.ds-product__art svg {\n  width: 44%;\n  height: 58%;\n}\n.ds-product__body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-1);\n  padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-product__name {\n  margin: var(--space-1) 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  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-product__price {\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n}\n.ds-product .ds-buttonrow {\n  margin-top: auto;\n}\n\n/* bag: rows with a small drawing, and the sums */\n.ds-thumb {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  border-radius: calc(var(--radius-panel) / 1.5);\n  background: var(--color-fill-1);\n  color: var(--color-heading);\n}\n.ds-thumb svg {\n  width: 60%;\n  height: 60%;\n}\n.ds-list--bag .ds-list__item {\n  display: flex;\n  gap: var(--space-4);\n}\n.ds-list__grow {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__sum {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.ds-sum {\n  margin: 0;\n}\n.ds-sum__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n}\n.ds-sum__row dt {\n  color: var(--color-text-muted);\n}\n.ds-sum__row dd {\n  margin: 0;\n  color: var(--color-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-sum__row--total {\n  margin-top: var(--space-2);\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-display);\n}\n.ds-sum__row--total dt {\n  color: var(--color-heading);\n}\n.ds-side--sticky {\n  position: sticky;\n  top: calc(var(--size-nav) + var(--space-5));\n}\n\n@media (max-width: 900px) {\n  .ds-nav__links {\n    gap: var(--space-5);\n  }\n  .ds-strip {\n    justify-content: flex-start;\n    gap: var(--space-6);\n  }\n  .ds-grid,\n  .ds-config {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-art,\n  .ds-side--sticky {\n    position: static;\n  }\n  .ds-shelf {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-hero,\n  .ds-tile,\n  .ds-grid__cell {\n    min-height: 0;\n  }\n}\n@media (max-width: 640px) {\n  .ds-nav__inner {\n    gap: var(--space-3);\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    justify-content: space-between;\n    row-gap: 0;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: none;\n    justify-content: flex-start;\n    gap: var(--space-5);\n    width: 100%;\n    padding-bottom: var(--space-3);\n  }\n  .ds-nav__search {\n    flex: none;\n  }\n  .ds-hero,\n  .ds-tile,\n  .ds-grid__cell {\n    padding: var(--space-7) var(--space-4) 0;\n  }\n  .ds-hero,\n  .ds-tile,\n  .ds-grid {\n    margin-right: var(--space-2);\n    margin-left: var(--space-2);\n  }\n  .ds-tile--short {\n    padding-bottom: var(--space-7);\n  }\n  .ds-hero__title {\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-hero__stage .ds-device + .ds-device,\n  .ds-tile__stage .ds-device + .ds-device,\n  .ds-art .ds-device + .ds-device {\n    display: none;\n  }\n  .ds-device--laptop {\n    width: 78%;\n  }\n  .ds-device--tablet {\n    width: 80%;\n  }\n  .ds-art {\n    min-height: 0;\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-chips {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-shelf {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-buybar {\n    padding: var(--space-3);\n  }\n  .ds-buybar__side {\n    flex: 1;\n    justify-content: space-between;\n  }\n  .ds-thumb {\n    width: var(--size-icon);\n    height: var(--size-icon);\n  }\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: the three departments spread across the bar in equal cells */\n@media (max-width: 640px) {\n  .ds-nav__links {\n    gap: 0;\n  }\n  .ds-nav__links > li {\n    flex: 1;\n    min-width: 0;\n    text-align: center;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: modern device store specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 0 1 9-9h9v9a9 9 0 0 1-18 0z\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-menu\" data-component=\"menu\">\n        <a class=\"ds-nav__link ds-menu__toggle\" href=\"#home\">Store</a>\n        <div class=\"ds-menu__panel\">\n          <div>\n            <p class=\"ds-menu__title\">Shop</p>\n            <ul class=\"ds-menu__list\">\n              <li><a class=\"ds-menu__link\" href=\"#phone\">Phone<small>From 799</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#home\">Tab and Book<small>From 449</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#home\">Watch and Sound<small>From 199</small></a></li>\n            </ul>\n          </div>\n          <div>\n            <p class=\"ds-menu__title\">Accessories</p>\n            <ul class=\"ds-menu__list\">\n              <li><a class=\"ds-menu__link\" href=\"#accessories\">Cases<small>For Phone and Tab</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#accessories\">Straps<small>Six colours</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#accessories\">Power and cables<small>Chargers, stands</small></a></li>\n            </ul>\n          </div>\n          <div>\n            <p class=\"ds-menu__title\">Your order</p>\n            <ul class=\"ds-menu__list\">\n              <li><a class=\"ds-menu__link\" href=\"#bag\">Bag<small>Three items</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#bag\">Delivery<small>A two-hour window</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#phone\">Trade in<small>Up to 420 back</small></a></li>\n            </ul>\n          </div>\n        </div>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#phone\">Phone</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#accessories\">Accessories</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-nav__link ds-nav__search\" href=\"#accessories\" aria-label=\"Search\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"18\" cy=\"18\" r=\"9\"/><path d=\"M25 25l8 8\"/></svg></a>\n      <a class=\"ds-nav__link\" href=\"#bag\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 14h22l-2 20H11z M15 14a5 5 0 0 1 10 0\"/></svg> Bag <span class=\"ds-nav__count\">3</span></a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <ul class=\"ds-strip\" aria-label=\"Products\"><li><a class=\"ds-strip__item\" href=\"#phone\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"13\" y=\"5\" width=\"14\" height=\"30\" rx=\"3.5\"/><path d=\"M18 8.5h4\"/></svg><span>Phone</span><span class=\"ds-strip__new\">New</span></a></li><li><a class=\"ds-strip__item\" href=\"#home\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"6\" width=\"24\" height=\"28\" rx=\"3\"/><path d=\"M18 30.5h4\"/></svg><span>Tab</span><span class=\"ds-strip__none\">From 99</span></a></li><li><a class=\"ds-strip__item\" href=\"#home\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"10\" width=\"24\" height=\"16\" rx=\"2\"/><path d=\"M4 30h32\"/></svg><span>Book</span><span class=\"ds-strip__none\">From 99</span></a></li><li><a class=\"ds-strip__item\" href=\"#home\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"13\" y=\"12\" width=\"14\" height=\"16\" rx=\"4.5\"/><path d=\"M16 12V6h8v6 M16 28v6h8v-6\"/></svg><span>Watch</span><span class=\"ds-strip__new\">New</span></a></li><li><a class=\"ds-strip__item\" href=\"#home\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"12\" y=\"6\" width=\"16\" height=\"28\" rx=\"5\"/><circle cx=\"20\" cy=\"24\" r=\"4\"/><circle cx=\"20\" cy=\"13\" r=\"1.5\"/></svg><span>Sound</span><span class=\"ds-strip__none\">From 99</span></a></li><li><a class=\"ds-strip__item\" href=\"#home\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 10a5 5 0 0 1 5 5v15a2 2 0 0 1-4 0V19a5 5 0 0 1-1-9z M29 10a5 5 0 0 0-5 5v15a2 2 0 0 0 4 0V19a5 5 0 0 0 1-9z\"/></svg><span>Buds</span><span class=\"ds-strip__none\">From 99</span></a></li><li><a class=\"ds-strip__item\" href=\"#accessories\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"11\" y=\"5\" width=\"18\" height=\"30\" rx=\"4\"/><rect x=\"14.5\" y=\"8.5\" width=\"7\" height=\"7\" rx=\"2\"/></svg><span>Accessories</span><span class=\"ds-strip__none\">From 99</span></a></li></ul>\n\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <span class=\"ds-glow\" aria-hidden=\"true\"></span>\n    <p class=\"ds-hero__kicker\">New</p>\n    <h1 class=\"ds-hero__title\">chronoskin Phone</h1>\n    <p class=\"ds-hero__lead\">Two days on one charge. A camera that sees in the dark.</p>\n    <div class=\"ds-hero__actions\">\n      <a class=\"ds-button\" href=\"#phone\">Learn more</a>\n      <a class=\"ds-button ds-button--secondary\" href=\"#phone\">Buy</a>\n    </div>\n    <div class=\"ds-hero__stage\" aria-hidden=\"true\"><div class=\"ds-device\"><span class=\"ds-device__screen\"></span></div><div class=\"ds-device ds-device--line\"><span class=\"ds-device__screen\"></span></div></div>\n  </div>\n\n  <div class=\"ds-tile ds-tone--inverse\">\n    <p class=\"ds-tile__kicker\">Watch</p>\n    <h2 class=\"ds-tile__title\">Knows when you need a rest.</h2>\n    <p class=\"ds-tile__text\">Sleep, pulse and training load, read from the wrist.</p>\n    <div class=\"ds-tile__actions\">\n      <a class=\"ds-button ds-button--inverse\" href=\"#phone\">Learn more</a>\n      <a class=\"ds-button ds-button--ghost\" href=\"#bag\">Buy</a>\n    </div>\n    <div class=\"ds-tile__stage ds-reveal ds-reveal--zoom\" aria-hidden=\"true\"><div class=\"ds-device ds-device--watch ds-device--line\"><span class=\"ds-device__screen\"></span></div><div class=\"ds-device ds-device--watch ds-device--line\"><span class=\"ds-device__screen\"></span></div></div>\n  </div>\n\n  <div class=\"ds-grid\" data-component=\"grid\">\n    <div class=\"ds-grid__cell ds-reveal\">\n      <p class=\"ds-tile__kicker\">From 1,099</p>\n      <h2 class=\"ds-tile__title\">Book</h2>\n      <p class=\"ds-tile__text\">Light work.</p>\n      <div class=\"ds-tile__actions\">\n        <a class=\"ds-button ds-button--small\" href=\"#phone\">Learn more</a>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#bag\">Buy</a>\n      </div>\n      <div class=\"ds-tile__stage\" aria-hidden=\"true\"><div class=\"ds-device ds-device--laptop\"><span class=\"ds-device__screen\"></span></div></div>\n    </div>\n    <div class=\"ds-grid__cell ds-reveal ds-reveal--2\">\n      <p class=\"ds-tile__kicker\">From 449</p>\n      <h2 class=\"ds-tile__title\">Tab</h2>\n      <p class=\"ds-tile__text\">Draw on everything.</p>\n      <div class=\"ds-tile__actions\">\n        <a class=\"ds-button ds-button--small\" href=\"#phone\">Learn more</a>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#bag\">Buy</a>\n      </div>\n      <div class=\"ds-tile__stage\" aria-hidden=\"true\"><div class=\"ds-device ds-device--tablet\"><span class=\"ds-device__screen\"></span></div></div>\n    </div>\n    <div class=\"ds-grid__cell ds-reveal\">\n      <p class=\"ds-tile__kicker\">From 199</p>\n      <h2 class=\"ds-tile__title\">Sound</h2>\n      <p class=\"ds-tile__text\">Fills the room, not the shelf.</p>\n      <div class=\"ds-tile__actions\">\n        <a class=\"ds-button ds-button--small\" href=\"#phone\">Learn more</a>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#bag\">Buy</a>\n      </div>\n      <div class=\"ds-tile__stage\" aria-hidden=\"true\"><div class=\"ds-device ds-device--speaker\"><span class=\"ds-device__screen\"></span></div></div>\n    </div>\n    <div class=\"ds-grid__cell ds-reveal ds-reveal--2\">\n      <p class=\"ds-tile__kicker\">From 279</p>\n      <h2 class=\"ds-tile__title\">Watch Sport</h2>\n      <p class=\"ds-tile__text\">Counts every length.</p>\n      <div class=\"ds-tile__actions\">\n        <a class=\"ds-button ds-button--small\" href=\"#phone\">Learn more</a>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#bag\">Buy</a>\n      </div>\n      <div class=\"ds-tile__stage\" aria-hidden=\"true\"><div class=\"ds-device ds-device--watch\"><span class=\"ds-device__screen\"></span></div></div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head ds-reveal\">\n        <h2 class=\"ds-section__title\">The store that comes to you.</h2>\n        <p class=\"ds-section__lead\">Order here, and we take care of the rest.</p>\n      </div>\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__item ds-reveal\"><p class=\"ds-stat__figure\">2 hours</p><p class=\"ds-stat__label\">is the delivery window you choose, free on every order</p></div>\n        <div class=\"ds-stat__item ds-reveal ds-reveal--2\"><p class=\"ds-stat__figure\">14 days</p><p class=\"ds-stat__label\">to send anything back, with the label in the box</p></div>\n        <div class=\"ds-stat__item ds-reveal ds-reveal--3\"><p class=\"ds-stat__figure\">24 months</p><p class=\"ds-stat__label\">to spread the price, at no interest</p></div>\n      </div>\n<div class=\"ds-carousel ds-carousel--peek\" data-component=\"carousel\">\n<ul class=\"ds-carousel__track\">\n<li class=\"ds-carousel__slide\"><figure class=\"ds-voice\"><blockquote class=\"ds-voice__text\">It came in the two hours I picked, and the courier took the old one away.</blockquote><figcaption><div class=\"ds-person\"><span class=\"ds-avatar\" data-component=\"avatar\">IV</span><span><span class=\"ds-person__name\">Ines Varga</span><span class=\"ds-person__meta\">Bought a Phone</span></span></div></figcaption></figure></li>\n<li class=\"ds-carousel__slide\"><figure class=\"ds-voice\"><blockquote class=\"ds-voice__text\">A specialist rang the next morning and moved everything across with me.</blockquote><figcaption><div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\">TB</span><span><span class=\"ds-person__name\">Tomas Brandt</span><span class=\"ds-person__meta\">Bought a Book</span></span></div></figcaption></figure></li>\n<li class=\"ds-carousel__slide\"><figure class=\"ds-voice\"><blockquote class=\"ds-voice__text\">The estimate held. The money was back before the new phone was set up.</blockquote><figcaption><div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--3\" data-component=\"avatar\">RW</span><span><span class=\"ds-person__name\">Rin Watanabe</span><span class=\"ds-person__meta\">Traded in a Phone</span></span></div></figcaption></figure></li>\n</ul>\n<div class=\"ds-carousel__bar\">\n<div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n<p class=\"ds-carousel__hint\">Swipe for more</p>\n</div>\n</div>\n    </div>\n  </div>\n\n  <div class=\"ds-tile ds-tile--short ds-tone--accent ds-reveal\">\n    <p class=\"ds-tile__kicker\">Trade in</p>\n    <h2 class=\"ds-tile__title\">Your old phone is worth up to 420.</h2>\n    <p class=\"ds-tile__text\">Answer four questions and see what it takes off the price.</p>\n    <div class=\"ds-tile__actions\">\n      <a class=\"ds-button ds-button--onaccent\" href=\"#phone\">Get an estimate</a>\n      <a class=\"ds-button ds-button--ghost\" href=\"#accessories\">How it works</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"phone\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Store</a></li>\n          <li class=\"ds-breadcrumb__current\">Phone</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Buy chronoskin Phone.</h1>\n        <p class=\"ds-page-header__text\">From 799, or 33.29 a month for 24 months.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#accessories\">Add accessories</a>\n      </div>\n    </div>\n\n    <div class=\"ds-tabsrow\">\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab\" href=\"#phone\">Phone Mini</a></li>\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#phone\">Phone</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#phone\">Phone Plus</a></li>\n      </ul>\n      <label class=\"ds-toggle\"><input class=\"ds-switch\" type=\"checkbox\" data-component=\"switch\"> Show monthly prices</label>\n    </div>\n\n    <div class=\"ds-config\">\n      <div class=\"ds-art\" aria-hidden=\"true\">\n        <span class=\"ds-glow\"></span>\n        <div class=\"ds-device\"><span class=\"ds-device__screen\"></span></div><div class=\"ds-device\"><span class=\"ds-device__screen\"></span></div>\n      </div>\n      <div class=\"ds-config__options\">\n        <div class=\"ds-option\">\n          <h2 class=\"ds-option__title\">Finish. <span>Which suits you?</span></h2>\n          <ul class=\"ds-chips ds-chips--row\">\n            <li><a class=\"ds-chip is-current\" href=\"#phone\"><span class=\"ds-swatch\"></span> Graphite</a></li>\n            <li><a class=\"ds-chip\" href=\"#phone\"><span class=\"ds-swatch ds-swatch--2\"></span> Silver</a></li>\n            <li><a class=\"ds-chip\" href=\"#phone\"><span class=\"ds-swatch ds-swatch--3\"></span> Tide</a></li>\n            <li><a class=\"ds-chip\" href=\"#phone\"><span class=\"ds-swatch ds-swatch--4\"></span> Ember</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-option\">\n          <h2 class=\"ds-option__title\">Storage. <span>How much room?</span></h2>\n          <ul class=\"ds-chips\">\n            <li><a class=\"ds-chip\" href=\"#phone\">128 GB <small>799</small></a></li>\n            <li><a class=\"ds-chip is-current\" href=\"#phone\">256 GB <small>899</small></a></li>\n            <li><a class=\"ds-chip\" href=\"#phone\">512 GB <small>1,099</small></a></li>\n            <li><a class=\"ds-chip is-disabled\" href=\"#phone\">1 TB <small>Sold out</small></a></li>\n          </ul>\n        </div>\n        <div class=\"ds-option\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Trading in?</span> A phone in good order takes up to 420 off this price.</p>\n        </div>\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>What you get</h1>\n          <p>The phone, a braided cable and a pin for the card tray. The model on this page is <code>CS-P24-256</code>.</p>\n          <h2>Cover that comes with it</h2>\n          <p>Two years of <span class=\"ds-tooltip\" tabindex=\"0\" data-component=\"tooltip\">cover for faults<span class=\"ds-tooltip__tip\" role=\"tooltip\">Things that stop working by themselves. Drops and water need the paid plan.</span></span>, and <strong>90 days</strong> of help by chat or phone.</p>\n          <h3>Not in the box</h3>\n          <ul>\n            <li>A charger: any 30 W charger with the right plug will do.</li>\n            <li>A case. The clear one is on the accessories page.</li>\n          </ul>\n        </article>\n        <div class=\"ds-accordion ds-accordion--gap\" data-component=\"accordion\">\n<details class=\"ds-accordion__item\" open>\n<summary class=\"ds-accordion__head\">Can I trade in a cracked phone?</summary>\n<div class=\"ds-accordion__body\"><p>Yes. The estimate is lower, and you see it before you send anything.</p></div>\n</details>\n<details class=\"ds-accordion__item\">\n<summary class=\"ds-accordion__head\">When will it arrive?</summary>\n<div class=\"ds-accordion__body\"><p>Tomorrow, in the two-hour window you choose at checkout.</p></div>\n</details>\n<details class=\"ds-accordion__item\">\n<summary class=\"ds-accordion__head\">Can I pay monthly?</summary>\n<div class=\"ds-accordion__body\"><p>Over 24 months at no interest, decided in a minute.</p></div>\n</details>\n</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-panel\" data-component=\"panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Which Phone is yours?</h2><a class=\"ds-link ds-link--more\" href=\"#phone\">Compare every detail</a></div>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th>Model</th><th class=\"ds-table__num\">Display, inches</th><th class=\"ds-table__num\">Battery, hours</th><th class=\"ds-table__num\">Weight, g</th><th class=\"ds-table__num\">From</th><th>Delivery</th></tr>\n              </thead>\n              <tbody>\n                <tr><td><a class=\"ds-table__title\" href=\"#phone\">Phone Mini</a></td><td class=\"ds-table__num\">5.6</td><td class=\"ds-table__num\">34</td><td class=\"ds-table__num\">148</td><td class=\"ds-table__num\">649</td><td><span class=\"ds-badge ds-badge--success\">Tomorrow</span></td></tr>\n                <tr class=\"is-hover\"><td><a class=\"ds-table__title\" href=\"#phone\">Phone</a></td><td class=\"ds-table__num\">6.2</td><td class=\"ds-table__num\">48</td><td class=\"ds-table__num\">172</td><td class=\"ds-table__num\">799</td><td><span class=\"ds-badge ds-badge--success\">Tomorrow</span></td></tr>\n                <tr><td><a class=\"ds-table__title\" href=\"#phone\">Phone Plus</a></td><td class=\"ds-table__num\">6.8</td><td class=\"ds-table__num\">56</td><td class=\"ds-table__num\">204</td><td class=\"ds-table__num\">949</td><td><span class=\"ds-badge ds-badge--warning\">In 2 weeks</span></td></tr>\n                <tr><td><a class=\"ds-table__title\" href=\"#phone\">Phone Fold</a></td><td class=\"ds-table__num\">7.9</td><td class=\"ds-table__num\">40</td><td class=\"ds-table__num\">236</td><td class=\"ds-table__num\">1,699</td><td><span class=\"ds-badge ds-badge--danger\">Sold out</span></td></tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span>Prices include tax.</span>\n          <div class=\"ds-badgerow\" data-component=\"badge\">\n            <span class=\"ds-badge\">New</span>\n            <span class=\"ds-badge ds-badge--alt\">Engraving</span>\n            <span class=\"ds-badge ds-badge--quiet\">In stock</span>\n            <span class=\"ds-badge ds-badge--success\">Tomorrow</span>\n            <span class=\"ds-badge ds-badge--warning\">In 2 weeks</span>\n            <span class=\"ds-badge ds-badge--danger\">Sold out</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-buybar\">\n        <p class=\"ds-buybar__name\">chronoskin Phone <small>Graphite, 256 GB</small></p>\n        <div class=\"ds-buybar__side\">\n          <p class=\"ds-buybar__price\">899.00 <small>or 37.46 a month</small></p>\n          <a class=\"ds-button\" href=\"#bag\">Add to bag</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"accessories\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Store</a></li>\n          <li class=\"ds-breadcrumb__current\">Accessories</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Accessories.</h1>\n        <p class=\"ds-page-header__text\">Cases, straps, cables and the things that go missing.</p>\n      </div>\n    </div>\n    <div class=\"ds-cols ds-cols--side\">\n      <div class=\"ds-stack\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Browse by product</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__item is-current\" href=\"#accessories\">All accessories <span class=\"ds-sidebar__count\">64</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#accessories\">For Phone <span class=\"ds-sidebar__count\">22</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#accessories\">For Tab <span class=\"ds-sidebar__count\">11</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#accessories\">For Book <span class=\"ds-sidebar__count\">9</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#accessories\">For Watch <span class=\"ds-sidebar__count\">16</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#accessories\">Power and cables <span class=\"ds-sidebar__count\">6</span></a></li>\n          </ul>\n        </nav>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 33S6 24 6 15a7 7 0 0 1 14-2 7 7 0 0 1 14 2c0 9-14 18-14 18z\"/></svg></span>\n          <h2 class=\"ds-empty__title\">Nothing saved yet</h2>\n          <p class=\"ds-empty__text\">Tap the heart on a product to keep it here for later.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#home\">Back to the store</a>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#phone\">Find the right case</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#bag\">Delivery and returns</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#phone\">Engraving</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#home\">Trade in</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-shelf\">\n          <div class=\"ds-panel ds-product\">\n            <div class=\"ds-product__art\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"11\" y=\"5\" width=\"18\" height=\"30\" rx=\"4\"/><rect x=\"14.5\" y=\"8.5\" width=\"7\" height=\"7\" rx=\"2\"/></svg></div>\n            <div class=\"ds-product__body\">\n              <span class=\"ds-badge ds-badge--alt\">New</span>\n              <a class=\"ds-product__name\" href=\"#accessories\">Clear case</a>\n              <p class=\"ds-product__price\">For Phone and Phone Plus. 39.00</p>\n              <div class=\"ds-buttonrow\"><a class=\"ds-button ds-button--small\" href=\"#bag\">Add to bag</a></div>\n            </div>\n          </div>\n          <div class=\"ds-panel ds-product\">\n            <div class=\"ds-product__art\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 8v8a5 5 0 0 0 10 0v-2a5 5 0 0 1 10 0v12\"/><rect x=\"7\" y=\"4\" width=\"6\" height=\"5\" rx=\"1\"/><rect x=\"27\" y=\"26\" width=\"6\" height=\"8\" rx=\"1\"/></svg></div>\n            <div class=\"ds-product__body\">\n              <span class=\"ds-badge ds-badge--quiet\">In stock</span>\n              <a class=\"ds-product__name\" href=\"#accessories\">Braided cable, 2 m</a>\n              <p class=\"ds-product__price\">Charges at 60 W. 25.00</p>\n              <div class=\"ds-buttonrow\"><a class=\"ds-button ds-button--small\" href=\"#bag\">Add to bag</a></div>\n            </div>\n          </div>\n          <div class=\"ds-panel ds-product\">\n            <div class=\"ds-product__art\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 4h10v10H15z M15 26h10v10H15z\"/><rect x=\"13\" y=\"14\" width=\"14\" height=\"12\" rx=\"4\"/></svg></div>\n            <div class=\"ds-product__body\">\n              <span class=\"ds-badge ds-badge--alt\">New</span>\n              <a class=\"ds-product__name\" href=\"#accessories\">Woven strap</a>\n              <p class=\"ds-product__price\">Six colours. 49.00</p>\n              <div class=\"ds-buttonrow\"><a class=\"ds-button ds-button--small\" href=\"#bag\">Add to bag</a></div>\n            </div>\n          </div>\n          <div class=\"ds-panel ds-product\">\n            <div class=\"ds-product__art\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 8v20 M12 32h16\"/><circle cx=\"20\" cy=\"12\" r=\"6\"/></svg></div>\n            <div class=\"ds-product__body\">\n              <span class=\"ds-badge ds-badge--quiet\">In stock</span>\n              <a class=\"ds-product__name\" href=\"#accessories\">Charging stand</a>\n              <p class=\"ds-product__price\">For Phone and Watch. 79.00</p>\n              <div class=\"ds-buttonrow\"><a class=\"ds-button ds-button--small\" href=\"#bag\">Add to bag</a></div>\n            </div>\n          </div>\n          <div class=\"ds-panel ds-product\">\n            <div class=\"ds-product__art\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M27 6l7 7-18 18-9 2 2-9z M24 9l7 7\"/></svg></div>\n            <div class=\"ds-product__body\">\n              <span class=\"ds-badge ds-badge--quiet\">In stock</span>\n              <a class=\"ds-product__name\" href=\"#accessories\">Pen for Tab</a>\n              <p class=\"ds-product__price\">Tilts and presses. 119.00</p>\n              <div class=\"ds-buttonrow\"><a class=\"ds-button ds-button--small\" href=\"#bag\">Add to bag</a></div>\n            </div>\n          </div>\n          <div class=\"ds-panel ds-product\">\n            <div class=\"ds-product__art\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 10a5 5 0 0 1 5 5v15a2 2 0 0 1-4 0V19a5 5 0 0 1-1-9z M29 10a5 5 0 0 0-5 5v15a2 2 0 0 0 4 0V19a5 5 0 0 0 1-9z\"/></svg></div>\n            <div class=\"ds-product__body\">\n              <span class=\"ds-badge ds-badge--quiet\">In stock</span>\n              <a class=\"ds-product__name\" href=\"#accessories\">Buds</a>\n              <p class=\"ds-product__price\">Six hours a charge. 149.00</p>\n              <div class=\"ds-buttonrow\"><a class=\"ds-button ds-button--small\" href=\"#bag\">Add to bag</a></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span>1 to 6 of 64 accessories</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#accessories\">Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#accessories\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#accessories\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#accessories\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#accessories\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"bag\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Store</a></li>\n          <li class=\"ds-breadcrumb__current\">Bag</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Your bag total is 987.00.</h1>\n        <p class=\"ds-page-header__text\">Free delivery and free returns on everything in it.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#bag\">Check out</a>\n      </div>\n    </div>\n    <div class=\"ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">In your bag</h2><span class=\"ds-badge ds-badge--success\">Arrives tomorrow</span></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-list ds-list--bag\" data-component=\"list\">\n              <li class=\"ds-list__item\">\n                <span class=\"ds-thumb\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"13\" y=\"5\" width=\"14\" height=\"30\" rx=\"3.5\"/><path d=\"M18 8.5h4\"/></svg></span>\n                <div class=\"ds-list__grow\">\n                  <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#phone\">chronoskin Phone</a><span class=\"ds-list__sum\">899.00</span></div>\n                  <p class=\"ds-list__meta\">Graphite, 256 GB. Quantity 1. <a class=\"ds-link ds-link--quiet\" href=\"#bag\">Remove</a></p>\n                </div>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-thumb\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"11\" y=\"5\" width=\"18\" height=\"30\" rx=\"4\"/><rect x=\"14.5\" y=\"8.5\" width=\"7\" height=\"7\" rx=\"2\"/></svg></span>\n                <div class=\"ds-list__grow\">\n                  <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#accessories\">Clear case</a><span class=\"ds-list__sum\">39.00</span></div>\n                  <p class=\"ds-list__meta\">For Phone. Quantity 1. <a class=\"ds-link ds-link--quiet\" href=\"#bag\">Remove</a></p>\n                </div>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-thumb\"><svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 4h10v10H15z M15 26h10v10H15z\"/><rect x=\"13\" y=\"14\" width=\"14\" height=\"12\" rx=\"4\"/></svg></span>\n                <div class=\"ds-list__grow\">\n                  <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#accessories\">Woven strap</a><span class=\"ds-list__sum\">49.00</span></div>\n                  <p class=\"ds-list__meta\">Moss, medium. Quantity 1. <a class=\"ds-link ds-link--quiet\" href=\"#bag\">Remove</a></p>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Where should it go?</h2></div>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#bag\">\n              <div class=\"ds-noticerow\" data-component=\"notice\">\n                <p class=\"ds-notice\"><span class=\"ds-notice__title\">Order by 17:00</span> and it leaves today.</p>\n                <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">We could not find that postcode.</span> Check it and try again.</p>\n              </div>\n              <div class=\"ds-form__row\">\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"b-name\">Full name</label>\n                  <input class=\"ds-form__input\" id=\"b-name\" type=\"text\" value=\"Mara Okafor\">\n                </div>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"b-post\">Postcode</label>\n                  <input class=\"ds-form__input is-error\" id=\"b-post\" type=\"text\" value=\"4O21\">\n                  <span class=\"ds-form__error\">A postcode has four digits.</span>\n                </div>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"b-slot\">Delivery</label>\n                <select class=\"ds-form__select\" id=\"b-slot\"><option>Tomorrow, 08:00 to 10:00</option><option>Tomorrow, 18:00 to 20:00</option><option>Collect from a shop</option></select>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"b-note\">Note for the courier</label>\n                <textarea class=\"ds-form__textarea\" id=\"b-note\" placeholder=\"For example: the bell on the left\"></textarea>\n                <span class=\"ds-form__hint\">Someone has to sign for a phone.</span>\n              </div>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Take my old phone away for trade-in</label>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"submit\">Continue to payment</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#home\">Keep shopping</a>\n                <button class=\"ds-button ds-button--danger\" type=\"reset\">Empty the bag</button>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Add a gift note</button>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-stack ds-side--sticky\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Summary</h2></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-progress__label\"><strong>Step 1 of 3</strong><span>Bag, then delivery and payment</span></p>\n<span class=\"ds-progress ds-progress--gap\" data-component=\"progress\"><span class=\"ds-progress__bar ds-progress__bar--40\"></span></span>\n            <dl class=\"ds-sum\">\n              <div class=\"ds-sum__row\"><dt>Three items</dt><dd>987.00</dd></div>\n              <div class=\"ds-sum__row\"><dt>Delivery</dt><dd>Free</dd></div>\n              <div class=\"ds-sum__row\"><dt>Trade-in estimate</dt><dd>-180.00</dd></div>\n              <div class=\"ds-sum__row ds-sum__row--total\"><dt>To pay</dt><dd>807.00</dd></div>\n            </dl>\n            <p class=\"ds-panel__text\">Or 33.63 a month for 24 months, at no interest.</p>\n            <a class=\"ds-button ds-button--wide\" href=\"#bag\">Check out</a>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"b-dialog\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"b-dialog\">Empty the bag?</h2><a class=\"ds-dialog__close\" href=\"#bag\" aria-label=\"Close\">&times;</a></div>\n            <div class=\"ds-dialog__body\"><p>All three items will be removed. Your trade-in estimate is kept for 14 days.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger ds-button--small\" href=\"#bag\">Empty it</a>\n              <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#bag\">Keep the bag</a>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Good to know</h2></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-list\">\n              <li class=\"ds-list__item\"><span class=\"ds-list__title\">Free delivery</span><p class=\"ds-list__meta\">In a two-hour window you choose</p></li>\n              <li class=\"ds-list__item\"><span class=\"ds-list__title\">14 days to return</span><p class=\"ds-list__meta\">The label is in the box</p></li>\n              <li class=\"ds-list__item\"><div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--3\" data-component=\"avatar\">RW</span><span><span class=\"ds-person__name\">Help setting up</span><span class=\"ds-person__meta\">A free call with Rin, a specialist</span></span></div></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-footer__cols\">\n      <div>\n        <a class=\"ds-brand\" href=\"#home\">\n          <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 0 1 9-9h9v9a9 9 0 0 1-18 0z\"/></svg></span>\n          <span class=\"ds-brand__name\">chronoskin</span>\n        </a>\n        <p class=\"ds-footer__about\">Phones, tablets, computers and watches, sold by the people who make them.</p>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Shop</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#phone\">Phone</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Tab</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Book</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Watch</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">More</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#accessories\">Accessories</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Trade in</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Pay monthly</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Your order</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#bag\">Bag</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#bag\">Delivery</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#bag\">Returns</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Company</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#home\">About</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Newsroom</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Careers</a></li>\n        </ul>\n      </div>\n    </div>\n    <p class=\"ds-footer__legal\"><span>chronoskin, 2025. Battery life depends on use. Prices include tax.</span><span>Privacy &middot; Terms &middot; Cookies</span></p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.modern-product.shop.s05.p04.t04.u05.dr\",\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-5445-dr\",\n  \"short\": \"v1-mp-5445-dr\",\n  \"density\": \"roomy\"\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: Poppins, \"Avenir Next\", Avenir, Montserrat, \"Century Gothic\", sans-serif;\n  --font-heading: Poppins, \"Avenir Next\", Avenir, Montserrat, \"Century Gothic\", sans-serif;\n  --font-ui: Poppins, \"Avenir Next\", Avenir, Montserrat, \"Century Gothic\", sans-serif;\n  --font-mono: \"DM Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 14px;\n  --text-large: 19px;\n  --text-display: 88px;\n  --text-h1: 56px;\n  --text-h2: 32px;\n  --text-h3: 20px;\n  --line-body: 1.45;\n  --line-heading: 1.15;\n  --line-display: 1.02;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 600;\n  --weight-display: 600;\n  --weight-ui: 500;\n  --heading-transform: none;\n  --heading-tracking: -0.4px;\n  --display-tracking: -2.5px;\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: 10px;\n  --radius-panel: 18px;\n  --radius-pill: 999px;\n  --radius-page: 24px;\n  --shadow-panel: 2px 4px 12px var(--color-shadow);\n  --shadow-control: none;\n  --shadow-control-hover: 0 4px 16px var(--color-shadow);\n  --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n  --shadow-dialog: 0 0 0 1px var(--color-border-muted), 0 12px 48px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: color-mix(in srgb, var(--color-bar) 80%, transparent);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 90%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 4px solid color-mix(in srgb, var(--color-focus) 30%, transparent);\n  --transition: color 0.18s ease-in-out, background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, opacity 0.18s ease-in-out, transform 0.18s ease-in-out, visibility 0.18s ease-in-out;\n  --backdrop-blur: 24px;\n}\n"
  }
}