{
  "id": "v1-fa-5271",
  "long_id": "v1.frutiger-aero.shop.s05.p02.t07.u01",
  "name": "Frutiger Aero gadget shop",
  "era": {
    "slug": "frutiger-aero",
    "code": "fa",
    "name": "Frutiger Aero",
    "years": [
      2004,
      2010
    ],
    "description": "The glossy optimism of 2004 to 2010: sky blue and grass green, glass panels with a bright top highlight, bubbles and soft glows, rounded corners, humanist sans type and reflections under everything."
  },
  "archetype": "shop",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": false
  },
  "summary": "A fixed-width online shop for small electronics in the warm variety of the Frutiger Aero look: an orange and plum sunrise behind one thick-rimmed sheet of clear glass, a magenta glass category bar with a diagonal sheen, and gadgets drawn standing on their own reflections. Shops of this kind were common from about 2005 to 2010, when music players, camera phones and picture frames were sold as bright, glossy objects on dark glowing banners. Everything pressable is candy: buttons with a soft dome of light and a glow at the foot, round signs, capsule labels; corners are generously rounded, and the type pairs a small Trebuchet body with geometric headings and bold Arial controls.",
  "url": "https://chrono.skin/s/v1-fa-5271",
  "preview_url": "https://chrono.skin/s/v1-fa-5271/specimen.html",
  "files": {
    "STYLE.md": "# Frutiger Aero gadget shop\n\n## Summary\n\nA fixed-width online shop for small electronics in the warm variety of the Frutiger Aero look: an orange and plum sunrise behind one thick-rimmed sheet of clear glass, a magenta glass category bar with a diagonal sheen, and gadgets drawn standing on their own reflections. Shops of this kind were common from about 2005 to 2010, when music players, camera phones and picture frames were sold as bright, glossy objects on dark glowing banners. Everything pressable is candy: buttons with a soft dome of light and a glow at the foot, round signs, capsule labels; corners are generously rounded, and the type pairs a small Trebuchet body with geometric headings and bold Arial controls.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 980px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- Everything sits in `.ds-page__wrap` (980px): `.ds-page__sheet`, the glass sheet (86% `--color-canvas`, a 2px clear rim, `--radius-page` corners), which holds the header and the showing view, and 14px under it the footer strip.\n- The header is two rows inside the sheet: `.ds-nav__top` (name, search, basket) and the category bar `.ds-nav__bar` (`--size-nav` 40px, set in by 14px, rounded).\n- All content sits in `.ds-page__body` (22px padding, 34px at the bottom). The home page is four bands: the category list (`--size-cats` 200px) beside the offer banner, at equal height; the promise strip; the row of four product tiles; then reviews beside the basket panel.\n- Columns in `.ds-page__columns`, `--space-5` (22px) apart: `.ds-page__main` beside a left `.ds-page__cats` (200px, category or filter lists) or a right `.ds-page__aside` of `--size-side` (270px, panels). `.ds-page__columns--stretch` makes both the same height.\n- Spacing scale: `--space-1` 3px (hairline gaps), `--space-2` 6px (inside controls, list row padding), `--space-3` 10px (gaps between buttons, cell and tile padding), `--space-4` 14px (panel padding, gaps between tiles, form rows), `--space-5` 22px (gutter, body padding, gap between stacked blocks), `--space-6` 34px (banner padding, gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 28px tall, large buttons `--size-control-large` 40px, the brand tile `--size-mark` 34px, a gadget on a tile `--size-device` 74px wide (1.5 times that on the banner, 1.9 times on the product page, 0.36 times in the basket), round signs `--size-orb` 38px, the dialog `--size-dialog` 440px.\n- Inner pages drop the banner and the promise strip. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the full width, then on basket and checkout the `.ds-steps` bar, then the columns. `.ds-tabs` stand directly above what they switch: over the product grid in a category, across the full width under the `.ds-product` block on a product page. Notices sit above the form; a dialog follows the columns across the full width on its dimmed strip. Further blocks are `.ds-section` blocks 34px apart with a `.ds-section__title`.\n- Views: the specimen is one shop of five screens, each a `.ds-view` inside the sheet, with the header and the footer written once around them. `home` is the shop front (categories, the offer, promises, new products, reviews, the basket panel). `shop` is one category (filters, sorting tabs, six product tiles, pagination and the key to the labels). `product` is one gadget (the stage and buying box, tabs, the description, onward links, facts and accessories at the side). `basket` is the basket (steps, the table, the order summary, an empty saved list, the dialog that removes an item). `checkout` is the address form (steps, notices, the form with its buttons, the order and help at the side). Links are plain `href=\"#name\"`; the bar segment of the showing view is pressed in by a `.ds-page:has(#name:target)` rule, the Home segment also when no view is named.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two families and a monospace: `--font-body` and `--font-ui` are Calibri (Carlito, Geneva), `--font-heading` is Corbel (Skia, Lucida Sans): the humanist faces that came with the period's desktops, with free or system stand-ins. `--font-mono` (Consolas) sets code, which a guide has a lot of.\n- `--text-base` 13px at `--line-body` 1.5. `--text-small` 11px for meta lines, hints, labels, code and the footer. `--text-ui` 12px for buttons, fields, tabs and sub-links; controls are bold (`--weight-ui` 700).\n- Headings are regular weight and wide: `--text-display` 32px hero title, `--text-h1` 25px page titles and figures, `--text-h2` 19px section titles, the brand name and the kit version, `--text-h3` 14px (bold) list, cell, panel and sidebar titles and rail links. `--text-large` 16px hero lead and the large button. Nothing is uppercased or tracked.\n- Links are not underlined at rest and underline on hover; titles are bold (`.ds-link--title`), object names are bold monospace (`.ds-link--code`).\n- `--color-page` #5a3fb0 with `--fill-page`: violet, darker at the top, with an orchid glow at the upper left and a lilac one at the right, fading to pale lavender below.\n- `--color-bar` #5a3d9e with `--fill-bar` (a smooth gel: bright top, darkest at two thirds, lighter at the foot) and white `--color-bar-text` under `--shadow-text`: the rail's name bar, the current rail link, table heads, dialog titles, the second topic tile.\n- `--color-bar-alt` #ddd3f6 with `--fill-bar-alt`: the figures, the tab strip, the code window's caption, the foot of the rail.\n- `--color-inverse` #2b1a66 with `--fill-inverse` (deep indigo with two soft glows): the hero and the footer band.\n- `--color-heading` #40288a titles and figures; `--color-heading-alt` #1585a6 (teal) panel and sidebar titles, prose h2, breadcrumb marks. `--color-text` #2f2b3a, `--color-text-muted` #6a6578.\n- `--color-link` #5a2fc2, `--color-link-quiet` #5f5a80, visited #8a4a8f, hover #1a9fc8, active #c2338f.\n- `--color-button` #1392c4 with `--fill-button` (aqua gel): the primary button, the brand tile, the first topic tile, the current page number. `--color-button-secondary` #e2dcf0 with `--fill-button-secondary`: every other button, pagination keys.\n- `--color-accent` #b455d8 with `--fill-accent`: labels, list dots, the mark of the current sidebar item. `--color-accent-alt` #ff8a1f: the New marker and the fourth tile.\n- `--color-fill-1` to `--color-fill-4` (lavender, ice, rose, cream): the right end of each topic cell's fade; never text or borders.\n- Borders are 1px solid, 2px (`--border-width-strong`) under the page header, beside sidebar lists and around the dialog. `--color-border` #c9bdea, `--color-border-muted` #e4dcf5 inside a box, `--color-border-strong` #7a5fc0 for the sheet, the rail, the dialog and the current tab.\n- `--color-notice` #e8f6fb for notices; `--color-danger` #c7283a on `--color-danger-surface` #fde8ea for errors; `--color-success` #3a9c3a and `--color-warning` #eda400 fill the status labels.\n- Surface: `--radius-control` 8px, `--radius-panel` 12px, `--radius-pill` 14px, `--radius-page` 20px. `--shadow-panel` is a white upper edge, a faint lower one and a soft 18px drop; a hovered button gains a halo in `--color-focus`; `--shadow-dialog` is the 36px shadow of a floating window. `--fill-panel` is translucent and `--backdrop-blur` 12px blurs what lies behind it. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of gels (the fill's colour mixed with `--color-shadow`), the sheet and the rail (90% and 84% `--color-canvas`), the code window (88% `--color-canvas` under `--fill-panel`), the notice border (`--color-notice-text` into `--color-notice`), gloss on danger, success and warning fills (mixed with `--color-button-text`). Half radii are `calc()` over `--radius-control`.\n- The era's conventions for which text sits on which fill are kept: body, heading and link colours on canvas, surfaces, `--fill-panel` and the four tints; `--color-bar-text` only on `--fill-bar`, `--color-bar-alt-text` only on `--fill-bar-alt`, `--color-inverse-text` only on `--fill-inverse`; `--color-button-text` on `--fill-button` and on fills made from `--color-danger`, `--color-success` or `--color-accent-alt`; `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-notice-text` on `--color-notice`. No text is set directly on the page.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill, base font and colour. `.ds-page__wrap` is the 980px column; `.ds-page__sheet` the glass sheet; `.ds-page__body` the padded content area of a view; `.ds-page__columns` (`--stretch` for equal heights) holds `.ds-page__main` with `.ds-page__cats` or `.ds-page__aside`. `.ds-section` with a `.ds-section__title` (18px over a 2px rule, an optional small `.ds-section__more` link at its right end) separates blocks by 34px. `.ds-view` is one screen of the example site (`.ds-view--home` the first).\n- `.ds-nav`: the header. `.ds-nav__top` holds the `.ds-brand`, the `.ds-nav__search` form (a `.ds-nav__input` and a secondary button) and `.ds-nav__basket`, a small glass box linking to the basket (`.ds-nav__basket-icon`, `.ds-nav__basket-text` with `.ds-nav__basket-name` and `.ds-nav__basket-sum`). `.ds-nav__bar` is the category bar: `.ds-nav__links` of `.ds-nav__item` segments, each a `.ds-nav__link` (current: `is-current`, pressed in and darker; hover: `is-hover`), and a small `.ds-nav__note` at the right end. Six segments at most.\n- `.ds-brand`: the site's mark and name at the left of the header, linking home; one per page. `.ds-brand__mark` is a tile dressed like the primary button (`--fill-button`, a darker outline, `--radius-panel`, `--shadow-control`) with the mark in `--color-button-text`; `.ds-brand__name` is the name at `--text-h1` in `--color-heading`, because it stands on the sheet. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the offer banner, on the home page only: `--fill-inverse` with `--radius-page` corners and up to three `.ds-hero__glow` lights (`--2`, `--3`). `.ds-hero__main` holds a `.ds-hero__kicker` label, `.ds-hero__title` (36px), `.ds-hero__lead` (14px), `.ds-hero__price` (with the old price in `.ds-hero__was`) and `.ds-hero__action` (a `.ds-button--large` and a secondary one). `.ds-hero__product` on the right holds one to three mirrored gadgets, each in a `.ds-hero__device` (`--back` for the smaller ones beside the main one).\n- `.ds-device`: a gadget drawn from the palette, as wide as its wrapper: by default a music player with a screen and a wheel; `.ds-device--phone` a touch phone, `.ds-device--camera` a pocket camera, `.ds-device--frame` a picture frame. The body is pale glass, or `.ds-device--b` (`--fill-button`), `--c` (`--fill-accent`), `--d` (`--fill-bar`). `.ds-device--mirror` adds the fading mirror image under it (leave 60% of its height free below). An installing project replaces these with product photographs on the same plates.\n- `.ds-price`: a price in `--color-heading-alt`; `.ds-price--large` on the product page; `.ds-price__was` the old price, struck through.\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (`--text-h1`, the page's h1) and one grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right with one or two buttons or a status badge; a hairline under the whole. One per inner page, directly under the breadcrumb.\n- `.ds-stat`: one promise or figure; three or four sit in a `.ds-stats` row, one peach glass strip, divided by hairlines (first: `is-first`). Each is a round `.ds-stat__orb` sign in `--fill-accent` beside `.ds-stat__text`: an 18px bold `.ds-stat__number` over an 11px `.ds-stat__label`.\n- `.ds-grid`: a row of four product tiles 14px apart; `.ds-grid--3` three to a row beside a filter column. `.ds-grid__cell` (`--1` to `--4` choose the tint of its plate) is a glass tile holding `.ds-grid__stage` (the plate, a link, with the gadget in `.ds-grid__device` or `.ds-grid__device--wide`), an optional `.ds-grid__flag` label on the plate's corner, a bold `.ds-grid__title`, a grey `.ds-grid__text` line and `.ds-grid__buy`: the `.ds-price` and a round add button over a hairline.\n- `.ds-product`: the head of a product page: `.ds-product__stage` (a large tinted plate with the gadget in `.ds-product__device` and its other colours in `.ds-product__device--back`) beside `.ds-product__buy`, a panel with `.ds-product__price`, facts and the large button.\n- `.ds-prose`: long text: h1, h2 (in `--color-heading-alt`), h3 (bold), p, ul, ol, code, strong and links inside it are styled.\n- `.ds-link`: any link on the sheet. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` is bold, for titles; `.ds-link--quiet` for minor links and tools. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: a glossy key in `--fill-button`, bold `--text-ui`, `--size-control` tall, `--radius-control` corners; may start with a `.ds-button__icon`. Variants: `.ds-button--secondary` (the usual button, `--fill-button-secondary`), `.ds-button--danger` (red gel, only for an action that removes or cancels), `.ds-button--large` (`--size-control-large`, the hero and the main action of a panel), `.ds-button--round` (a circle holding only an icon). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row. One primary button per form, panel or dialog.\n- `.ds-form`: the checkout form: `.ds-form__grid` is two columns of `.ds-form__row` fields (`.ds-form__row--wide` spans both), grouped under `.ds-form__legend` headings; each row is a bold `.ds-form__label` above `.ds-form__input` (`--short` for half width), `.ds-form__select` or `.ds-form__textarea`; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus` (a glow), `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` is the pale tray that holds the buttons.\n- `.ds-steps`: the stages of an order on one cream glass bar: `.ds-steps__step` with a bold `.ds-steps__number`, the current one `is-current` (orange candy).\n- `.ds-table`: the basket table in a rounded 1px border with the panel shadow: `.ds-table__head` cells form a peach glass strip; `.ds-table__row` with `is-alt` on alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns, `is-total` is bold; `.ds-table__cell--thumb` holds a small gadget in `.ds-table__device` (`--wide`); `.ds-table__note` is a second grey line in a cell. `.ds-table__foot` is the row under a table or grid with the pagination at the left and the key to the labels at the right.\n- `.ds-list`: reviews. Each `.ds-list__item` (first: `is-first`) is a `.ds-list__score` tile on peach glass (the score over a small `.ds-list__of`) beside `.ds-list__body`: a bold `.ds-list__title`, a `.ds-list__text` line and a grey `.ds-list__meta`. Rows are divided by hairlines, never boxed.\n- `.ds-panel`: a glass box in the side column (`is-last` on the last block of a column): a bold `.ds-panel__title` on a peach glass strip, `.ds-panel__body` with `.ds-panel__text`, a `.ds-panel__facts` list of `.ds-panel__fact` rows (name in `.ds-panel__fact-name`, value at the right; the sum row is `is-total` over a 2px rule) and `.ds-panel__actions`.\n- `.ds-tabs`: glossy tabs with rounded tops standing on a 2px rule in `--color-accent`: `.ds-tabs__tab`, the current one `is-current` (pink gel, a little taller). Two to five tabs.\n- `.ds-badge`: a small glossy label in `--fill-accent` with `--radius-pill` corners. `.ds-badge--count` (flat, a number), `.ds-badge--new` (in `--color-accent-alt`). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, one per row or tile. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: a category or filter list (`is-last` on the last of a column): `.ds-sidebar__title` on magenta glass, `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines, each behind an orange guillemet (current: `is-current`), with an optional right-aligned `.ds-sidebar__count`.\n- `.ds-notice`: a rounded one-line message with a round `.ds-notice__sign`, `.ds-notice__text` and a bold `.ds-notice__title`. Variant `.ds-notice--error`. Notices sit directly above the form or list they report on.\n- `.ds-pagination`: a row of small glossy keys: `.ds-pagination__link`, `is-current` (in `--fill-button`), `is-disabled`, `.ds-pagination__gap` for an ellipsis. It shares the `.ds-table__foot` row under a table or grid with the key to the badges.\n- `.ds-breadcrumb`: `--text-small` trail of `.ds-link` items with `.ds-breadcrumb__sep` marks in `--color-heading-alt` and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small sheet with a 2px clear rim and `--radius-page` corners: a centred `.ds-dialog__title`, `.ds-dialog__text` and `.ds-dialog__actions` with the buttons in the middle. It casts `--shadow-dialog` and sits on `.ds-dialog__backdrop`, a dimmed rounded strip in the page flow.\n- `.ds-empty`: a pale well with a round glass `.ds-empty__orb` icon, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-meter`: a small progress bar; `.ds-meter__bar` with `--full`, `--most`, `--half` or `--some`; `.ds-meter--spaced` when a list follows.\n- `.ds-footer`: a peach glass strip under the sheet: a `.ds-footer__list` of bold `.ds-footer__link` items at the left, the `.ds-footer__legal` line at the right.\n- `.ds-menu`: a glass drop-down under a navigation item (`.ds-menu__list` of `.ds-menu__link`), opened on hover or focus, never forced open.\n- `.ds-progress`: the glossy accent progress bar, a native `<progress>` in a `.ds-progress__row` with label and value; for downloads, installs and storage.\n- `.ds-carousel`: a picture viewer with previous and next orbs and dots (`.ds-carousel__stage`, `__track`, `__slide`, `__dots`); static, dots are not links.\n- `.ds-tooltip`: a round `?` hint that opens a pale balloon (`__trigger`, `__text`) on hover or focus, beside a label or title.\n- `.ds-avatar`: the framed account picture drawn as initials, beside a name in `.ds-person`; `--small` for tight places.\n\n## Never\n\n- `row-gap <= 24px`: rows are divided by a hairline, not by space.\n- `block-gap <= 34px`: sections are at most 34px apart.\n- `content-width <= 980px`: text stays inside the sheet.\n- `palette-colours <= 46`: night blues, cyan, violet, a green, amber, red and greys.\n- `font-size <= 32px`: the hero title is the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight; headings are regular.\n- `font-families <= 3`: a body sans, a heading sans, a monospace for code.\n- `line-height <= 1.5`: body text is 13px on about 19px.\n- `underlined-links <= 10%`: links underline on hover only.\n- `letter-spacing = 0px`: no tracking.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 10px`: corners are 4, 7 or 10px; only orbs, bullets and pills are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 24px`: shadows are soft but short; only the floating window reaches 24px.\n- `gradient-fills <= 25%`: gloss belongs to bars, buttons, orbs, pills and cells; text areas stay plain.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new bar is `--fill-bar`, a pale strip `--fill-bar-alt`, a dark band `--fill-inverse`; anything round and pressable is dressed like `.ds-button--round`. Keep to the conventions above for which text token sits on which fill, give glossy fills an outline mixed from their colour and `--color-shadow`, take highlights from the surface tokens instead of drawing new ones, put a `--fill-*` token last in a layered background, and make any extra shade with `color-mix()` over existing tokens. A new product picture is a `.ds-device` or a photograph on a `.ds-grid__stage` plate; a new list of categories is a `.ds-sidebar`; a new sum is a `.ds-panel__fact` row with `is-total`.\n",
    "components.css": ":root {\n  --size-page: 980px;\n  --size-side: 270px;\n  --size-cats: 200px;\n  --size-nav: 40px;\n  --size-search: 280px;\n  --size-mark: 34px;\n  --size-device: 74px;\n  --size-orb: 38px;\n  --size-control: 28px;\n  --size-control-large: 40px;\n  --size-icon: 16px;\n  --size-meter: 8px;\n  --size-glow: 8px;\n  --size-textarea: 64px;\n  --size-dialog: 440px;\n  --space-1: 3px;\n  --space-2: 6px;\n  --space-3: 10px;\n  --space-4: 14px;\n  --space-5: 22px;\n  --space-6: 34px;\n}\n\n/* shell: one thick-rimmed glass sheet on the sunrise, the shop's header inside it, a pale glass strip under it */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) 0 var(--space-6);\n}\n.ds-page__sheet {\n  border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-canvas) 60%, transparent);\n  border-radius: var(--radius-page);\n  background: color-mix(in srgb, var(--color-canvas) 86%, transparent);\n  -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n  backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n  box-shadow: var(--shadow-panel);\n}\n.ds-page__body { padding: var(--space-5) var(--space-5) var(--space-6); }\n.ds-page__columns {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-5);\n}\n.ds-page__columns--stretch { align-items: stretch; }\n.ds-page__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page__aside {\n  flex: 0 0 var(--size-side);\n  width: var(--size-side);\n}\n.ds-page__cats {\n  display: flex;\n  flex: 0 0 var(--size-cats);\n  flex-direction: column;\n  width: var(--size-cats);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-4);\n  padding: 0 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-section__more {\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n/* nav: a top row on the sheet (name, search, basket) and under it the glass category bar */\n.ds-nav { padding: 0 0 var(--space-1); }\n.ds-nav__top {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-4) var(--space-5);\n}\n.ds-nav__search {\n  display: flex;\n  flex: 1 1 0;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-nav__input {\n  width: var(--size-search);\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 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-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus {\n  outline: var(--focus-ring);\n  box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-nav__basket {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  text-decoration: none;\n}\n.ds-nav__basket:hover,\n.ds-nav__basket.is-hover { border-color: var(--color-border-strong); }\n.ds-nav__basket-icon {\n  display: block;\n  width: calc(var(--size-icon) * 1.4);\n  height: calc(var(--size-icon) * 1.4);\n  color: var(--color-heading-alt);\n}\n.ds-nav__basket-text { line-height: var(--line-heading); }\n.ds-nav__basket-name {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-nav__basket-sum {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-nav__bar {\n  display: flex;\n  align-items: stretch;\n  height: var(--size-nav);\n  margin: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 62%, var(--color-shadow));\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar);\n  box-shadow: var(--shadow-control);\n  color: var(--color-bar-text);\n  overflow: hidden;\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1 1 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__item { display: flex; }\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--space-5);\n  border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 26%, transparent);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { background: color-mix(in srgb, var(--color-bar-text) 18%, transparent); }\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#shop:target) .ds-nav__link[href=\"#shop\"],\n.ds-page:has(#product:target) .ds-nav__link[href=\"#product\"],\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"],\n.ds-page:has(#checkout:target) .ds-nav__link[href=\"#checkout\"] {\n  background: color-mix(in srgb, var(--color-shadow) 40%, transparent);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__note {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  margin: 0;\n  padding: 0 var(--space-5);\n  font-size: var(--text-small);\n  text-shadow: var(--shadow-text);\n}\n\n/* brand: the mark on a glossy tile dressed like the primary button, the name on the sheet */\n.ds-brand {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-3);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n  border-radius: var(--radius-panel);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 66%;\n  height: 66%;\n}\n.ds-brand__name {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n}\n\n/* device: a gadget drawn from the palette. The body is a glass slab, ::before draws screen, wheel or lens, ::after is its mirror image */\n.ds-device {\n  position: relative;\n  display: block;\n  width: 100%;\n  aspect-ratio: 0.62;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 55%, var(--color-shadow));\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar-alt);\n  box-shadow: var(--shadow-control);\n}\n.ds-device::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background: linear-gradient(135deg, color-mix(in srgb, var(--color-button-text) 50%, transparent) 0, transparent 40%) 50% 9% / 80% 40% no-repeat, linear-gradient(to bottom, var(--color-accent-alt) 0, var(--color-inverse) 100%) 50% 9% / 80% 40% no-repeat, radial-gradient(circle closest-side, var(--color-surface-alt) 0, var(--color-surface-alt) 30%, color-mix(in srgb, var(--color-shadow) 35%, var(--color-surface-strong)) 32%, var(--color-surface) 36%, var(--color-surface-strong) 94%, color-mix(in srgb, var(--color-shadow) 40%, transparent) 97%, transparent 100%) 50% 88% / 64% 39.7% no-repeat;\n}\n.ds-device--mirror::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin-top: var(--space-1);\n  border-radius: inherit;\n  background: inherit;\n  opacity: 0.4;\n  transform: scaleY(-1);\n  -webkit-mask-image: linear-gradient(to bottom, transparent 62%, currentColor 100%);\n  mask-image: linear-gradient(to bottom, transparent 62%, currentColor 100%);\n  pointer-events: none;\n}\n.ds-device--b {\n  border-color: color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n  background: var(--fill-button);\n}\n.ds-device--c {\n  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-shadow));\n  background: var(--fill-accent);\n}\n.ds-device--d {\n  border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n  background: var(--fill-bar);\n}\n.ds-device--phone::before { background: linear-gradient(135deg, color-mix(in srgb, var(--color-button-text) 45%, transparent) 0, transparent 38%) 50% 42% / 84% 74% no-repeat, radial-gradient(circle at 26% 22%, var(--color-accent) 0, var(--color-accent) 9%, transparent 10%) 50% 42% / 84% 74% no-repeat, radial-gradient(circle at 74% 22%, var(--color-warning) 0, var(--color-warning) 9%, transparent 10%) 50% 42% / 84% 74% no-repeat, radial-gradient(circle at 26% 50%, var(--color-success) 0, var(--color-success) 9%, transparent 10%) 50% 42% / 84% 74% no-repeat, radial-gradient(circle at 74% 50%, var(--color-button) 0, var(--color-button) 9%, transparent 10%) 50% 42% / 84% 74% no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), var(--color-accent-alt) 45%) 0, var(--color-inverse) 100%) 50% 42% / 84% 74% no-repeat, radial-gradient(circle closest-side, var(--color-surface-strong) 0, var(--color-surface) 70%, color-mix(in srgb, var(--color-shadow) 40%, transparent) 90%, transparent 100%) 50% 97% / 18% 11% no-repeat; }\n.ds-device--camera { aspect-ratio: 1.5; }\n.ds-device--camera::before { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 55%) 0, var(--color-accent-alt) 14%, var(--color-inverse) 30%, var(--color-inverse) 52%, var(--color-surface-strong) 55%, var(--color-surface) 66%, color-mix(in srgb, var(--color-shadow) 55%, var(--color-surface-strong)) 70%, var(--color-inverse) 73%, var(--color-inverse) 90%, color-mix(in srgb, var(--color-shadow) 40%, transparent) 94%, transparent 100%) 60% 50% / 52% 78% no-repeat, linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-strong) 100%) 10% 16% / 16% 14% no-repeat, linear-gradient(to right, color-mix(in srgb, var(--color-shadow) 28%, transparent) 0, transparent 100%) 0 0 / 9% 100% no-repeat; }\n.ds-device--frame { aspect-ratio: 1.34; }\n.ds-device--frame::before { background: linear-gradient(135deg, color-mix(in srgb, var(--color-button-text) 45%, transparent) 0, transparent 40%) 50% 44% / 86% 72% no-repeat, radial-gradient(circle at 70% 30%, var(--color-button-text) 0, var(--color-button-text) 6%, transparent 7%) 50% 44% / 86% 72% no-repeat, linear-gradient(to bottom, var(--color-warning) 0, color-mix(in srgb, var(--color-warning), var(--color-button-text) 55%) 62%, var(--color-success) 62%, color-mix(in srgb, var(--color-success), var(--color-shadow) 35%) 100%) 50% 44% / 86% 72% no-repeat; }\n\n/* price */\n.ds-price {\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n}\n.ds-price--large { font-size: var(--text-display); line-height: var(--line-display); }\n.ds-price__was {\n  margin-left: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  text-decoration: line-through;\n}\n\n/* hero: the offer of the week on a dark glowing banner, the gadget standing on its reflection */\n.ds-hero {\n  position: relative;\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-5) var(--space-6);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 70%, var(--color-shadow));\n  border-radius: var(--radius-page);\n  background: var(--fill-inverse);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-inverse-text);\n  overflow: hidden;\n}\n.ds-hero__glow {\n  position: absolute;\n  top: 8%;\n  left: 52%;\n  width: calc(var(--size-device) * 0.9);\n  height: calc(var(--size-device) * 0.9);\n  border-radius: 50%;\n  background: radial-gradient(circle, color-mix(in srgb, var(--color-inverse-text) 34%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 10%, transparent) 62%, transparent 66%);\n}\n.ds-hero__glow--2 {\n  top: 62%;\n  left: 46%;\n  width: calc(var(--size-device) * 0.5);\n  height: calc(var(--size-device) * 0.5);\n}\n.ds-hero__glow--3 {\n  top: 4%;\n  left: 88%;\n  width: calc(var(--size-device) * 1.5);\n  height: calc(var(--size-device) * 1.5);\n  opacity: 0.6;\n}\n.ds-hero__main {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-hero__kicker { margin: 0 0 var(--space-3); }\n.ds-hero__title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-inverse-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-hero__price {\n  margin: 0 0 var(--space-4);\n  color: var(--color-inverse-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-hero__was {\n  margin-left: var(--space-3);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  text-decoration: line-through;\n  opacity: 0.75;\n}\n.ds-hero__action {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-hero__product {\n  position: relative;\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: var(--space-4);\n  padding: 0 var(--space-4) calc(var(--size-device) * 0.9);\n}\n.ds-hero__device { display: block; width: calc(var(--size-device) * 1.5); }\n.ds-hero__device--back { width: calc(var(--size-device) * 1.05); }\n\n/* sidebar: the category list; a glass title, hairlines between rows, a guillemet before each */\n.ds-sidebar {\n  flex: 1 1 auto;\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-1) var(--space-4) var(--space-2);\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item:first-child { border-top: 0; }\n.ds-sidebar__item::before {\n  content: \"\\00BB\";\n  flex: 0 0 auto;\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__count {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* stats: the shop's promises, each behind a round glossy sign, on one pale glass strip */\n.ds-stats {\n  display: flex;\n  margin: var(--space-5) 0 0;\n  padding: var(--space-3) 0;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar-alt);\n  box-shadow: var(--shadow-control);\n  color: var(--color-bar-alt-text);\n  list-style: none;\n}\n.ds-stat {\n  display: flex;\n  flex: 1 1 0;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: 0 var(--space-4);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n}\n.ds-stat.is-first { border-left: 0; }\n.ds-stat__orb {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-orb);\n  height: var(--size-orb);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 62%, var(--color-shadow));\n  border-radius: 50%;\n  background: var(--fill-accent);\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n}\n.ds-stat__orb svg {\n  display: block;\n  width: 52%;\n  height: 52%;\n}\n.ds-stat__text { min-width: 0; line-height: var(--line-heading); }\n.ds-stat__number {\n  display: block;\n  white-space: nowrap;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n}\n.ds-stat__label { display: block; font-size: var(--text-small); }\n\n/* grid: product tiles; each gadget stands on a tinted plate over its reflection */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-grid--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--space-5); }\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__stage {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  height: calc(var(--size-device) * 2.45);\n  margin: 0 0 var(--space-3);\n  padding: 0 0 calc(var(--size-device) * 0.62);\n  border-radius: var(--radius-control);\n  background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface) 100%);\n  overflow: hidden;\n}\n.ds-grid__cell--1 .ds-grid__stage { background: linear-gradient(to bottom, var(--color-fill-1) 0, var(--color-surface) 100%); }\n.ds-grid__cell--2 .ds-grid__stage { background: linear-gradient(to bottom, var(--color-fill-2) 0, var(--color-surface) 100%); }\n.ds-grid__cell--3 .ds-grid__stage { background: linear-gradient(to bottom, var(--color-fill-3) 0, var(--color-surface) 100%); }\n.ds-grid__cell--4 .ds-grid__stage { background: linear-gradient(to bottom, var(--color-fill-4) 0, var(--color-surface) 100%); }\n.ds-grid__device { display: block; flex: 0 0 auto; width: var(--size-device); }\n.ds-grid__device--wide { width: calc(var(--size-device) * 1.5); }\n.ds-grid__flag {\n  position: absolute;\n  top: var(--space-4);\n  left: var(--space-4);\n}\n.ds-grid__title {\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-body);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-grid__text {\n  flex: 1 1 auto;\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-grid__buy {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-2) 0 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* list: what buyers say, a glossy score tile before each */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { padding-top: 0; border-top: 0; }\n.ds-list__score {\n  display: flex;\n  flex: 0 0 var(--size-orb);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-orb);\n  height: var(--size-orb);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-bar-alt);\n  box-shadow: var(--shadow-control);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n}\n.ds-list__of {\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-body);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-list__text { margin: 0 0 var(--space-1); }\n.ds-list__meta {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel: a glass box under a pale glass title */\n.ds-panel {\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-panel.is-last { margin-bottom: 0; }\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body { padding: var(--space-4); }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__text.is-last { margin-bottom: 0; }\n.ds-panel__facts {\n  margin: 0 0 var(--space-3);\n  padding: 0;\n  list-style: none;\n}\n.ds-panel__facts.is-last { margin-bottom: 0; }\n.ds-panel__fact {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__fact.is-first { padding-top: 0; border-top: 0; }\n.ds-panel__fact.is-total {\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-panel__fact-name { color: var(--color-text-muted); }\n.ds-panel__fact.is-total .ds-panel__fact-name { color: var(--color-heading); }\n.ds-panel__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n\n/* product: the gadget on a large plate beside its buying box */\n.ds-product {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-5);\n  margin: 0 0 var(--space-5);\n}\n.ds-product__stage {\n  display: flex;\n  flex: 1 1 0;\n  align-items: flex-end;\n  justify-content: center;\n  gap: var(--space-5);\n  min-width: 0;\n  padding: var(--space-5) var(--space-5) calc(var(--size-device) * 1.25);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  background: radial-gradient(ellipse 60% 30% at 50% 100%, color-mix(in srgb, var(--color-surface) 90%, transparent) 0, transparent 100%), linear-gradient(to bottom, var(--color-fill-1) 0, var(--color-fill-2) 100%);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-product__device { display: block; flex: 0 0 auto; width: calc(var(--size-device) * 1.9); }\n.ds-product__device--back { width: calc(var(--size-device) * 1.2); }\n.ds-product__buy {\n  flex: 0 0 calc(var(--size-side) + var(--space-6));\n  width: calc(var(--size-side) + var(--space-6));\n}\n.ds-product__price { margin: 0 0 var(--space-3); }\n\n/* tabs: glossy tabs standing on a thick rule in the accent colour */\n.ds-tabs {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-1);\n  margin: 0 0 var(--space-4);\n  padding: 0 var(--space-3);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent);\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n  border-bottom: 0;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-tabs__tab.is-current {\n  padding-top: var(--space-3);\n  border-color: color-mix(in srgb, var(--color-accent) 62%, var(--color-shadow));\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-weight: var(--weight-bold);\n}\n\n/* steps: the four stages of an order on one glass bar */\n.ds-steps {\n  display: flex;\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n  border-radius: var(--radius-pill);\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  list-style: none;\n  overflow: hidden;\n}\n.ds-steps__step {\n  display: flex;\n  flex: 1 1 0;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary-text) 24%, transparent);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-steps__step:first-child { border-left: 0; }\n.ds-steps__number { font-weight: var(--weight-bold); }\n.ds-steps__step.is-current {\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n\n/* table: the basket; pale glass head, hairlines between rows */\n.ds-table {\n  width: 100%;\n  margin: 0 0 var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-collapse: separate;\n  border-spacing: 0;\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n  overflow: hidden;\n}\n.ds-table__head {\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table__cell {\n  padding: var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface);\n  color: var(--color-text);\n  vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ds-table__cell.is-total { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-table__cell--thumb { width: calc(var(--size-device) * 0.8); padding-right: 0; }\n.ds-table__device { display: block; width: calc(var(--size-device) * 0.36); margin: 0 auto; }\n.ds-table__device--wide { width: calc(var(--size-device) * 0.6); }\n.ds-table__note {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-table__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: 0;\n}\n\n/* form: checkout; labels above the fields, two fields to a row, the buttons on a tray */\n.ds-form__grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-4) var(--space-5);\n}\n.ds-form__row { min-width: 0; }\n.ds-form__row--wide { grid-column: 1 / -1; }\n.ds-form__legend {\n  grid-column: 1 / -1;\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-form__label {\n  display: block;\n  margin: 0 0 var(--space-1);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: var(--space-5) 0 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n}\n\n/* dialog: a small glass sheet with a thick clear rim, in the page flow on a dimmed strip */\n.ds-dialog__backdrop {\n  display: flex;\n  justify-content: center;\n  margin: var(--space-5) 0 0;\n  padding: var(--space-6) var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--color-overlay);\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  padding: var(--space-5);\n  border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-surface) 55%, transparent);\n  border-radius: var(--radius-page);\n  background: var(--color-surface);\n  background-clip: padding-box;\n  box-shadow: var(--shadow-dialog);\n  text-align: center;\n}\n.ds-dialog__title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-dialog__text { margin: 0 0 var(--space-4); }\n.ds-dialog__actions {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-3);\n}\n\n/* footer: a pale glass strip under the sheet */\n.ds-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  margin: var(--space-4) 0 0;\n  padding: var(--space-3) var(--space-5);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar-alt);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n}\n.ds-footer__list {\n  display: flex;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-footer__legal { margin: 0 0 0 auto; }\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/* typography: long text on the sheet */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-3);\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 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n  padding: 0 var(--space-2);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-alt);\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\n/* links */\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n}\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link-hover); }\n\n/* buttons: glossy keys; the outline is the fill's colour darkened with the shadow colour */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--color-button);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button__icon {\n  display: block;\n  flex: 0 0 auto;\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-button--large {\n  height: var(--size-control-large);\n  padding: 0 var(--space-5);\n  font-size: var(--text-large);\n}\n.ds-button--round {\n  flex: 0 0 auto;\n  width: var(--size-control);\n  padding: 0;\n  border-radius: 50%;\n}\n.ds-button--round.ds-button--large { width: var(--size-control-large); }\n.ds-button--secondary {\n  border-color: color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-ui);\n  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n  border-color: color-mix(in srgb, var(--color-danger) 66%, var(--color-shadow));\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 48%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 12%) 50%, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 18%) 100%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 60%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 22%) 50%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 8%) 50%, var(--color-danger) 100%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  cursor: default;\n}\n\n/* form controls */\n.ds-form { margin: 0; }\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\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-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); padding-top: 0; padding-bottom: 0; }\n.ds-form__select { width: auto; max-width: 100%; }\n.ds-form__input--short { width: 50%; }\n.ds-form__textarea {\n  display: block;\n  height: var(--size-textarea);\n  border-radius: var(--radius-panel);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n  outline: var(--focus-ring);\n  border-color: var(--color-focus);\n  box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-error,\n.ds-form__textarea.is-error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n}\n.ds-form__error {\n  margin: var(--space-2) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  margin: var(--space-2) 0 0;\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-3);\n  font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n\n/* badge: a small glossy label */\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-bold);\n  line-height: calc(var(--text-small) + var(--space-3));\n  text-decoration: none;\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n.ds-badge--count {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-body);\n}\n.ds-badge--new {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 32%) 0, var(--color-accent-alt) 60%);\n  color: var(--color-button-text);\n}\n.ds-badge--success {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 32%) 0, var(--color-success) 60%);\n  color: var(--color-button-text);\n}\n.ds-badge--warning {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning), var(--color-button-text) 42%) 0, var(--color-warning) 60%);\n  color: var(--color-accent-text);\n}\n.ds-badge--danger {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 32%) 0, var(--color-danger) 60%);\n  color: var(--color-button-text);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n\n/* notice: one line behind a round sign */\n.ds-notice {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-warning) 50%, var(--color-notice));\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-notice__sign {\n  display: block;\n  flex: 0 0 auto;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  border-radius: 50%;\n  background: var(--color-warning);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  align-content: center;\n  text-align: center;\n  text-box: trim-both cap alphabetic;\n}\n.ds-notice__text { margin: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__sign {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n\n/* pagination: small glossy keys */\n.ds-pagination {\n  display: flex;\n  align-items: center;\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-ui);\n  line-height: 1;\n}\n.ds-pagination__link {\n  display: 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: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n  border-color: color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n}\n.ds-pagination__gap { padding: 0 var(--space-2); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-heading-alt); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* page header: head of an inner page, action on the right */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: 0 0 var(--space-5);\n  padding: 0 0 var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\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-page-header__text {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* meter: a small progress bar */\n.ds-meter {\n  display: block;\n  height: var(--size-meter);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n}\n.ds-meter__bar {\n  display: block;\n  height: 100%;\n  background: var(--fill-accent);\n}\n.ds-meter--spaced { margin-bottom: var(--space-3); }\n.ds-meter__bar--full { width: 100%; }\n\n/* empty state: a pale well around a round glass sign */\n.ds-empty {\n  padding: var(--space-5) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n  text-align: center;\n}\n.ds-empty__orb {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  margin: 0 auto var(--space-3);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n  border-radius: 50%;\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n}\n.ds-empty__orb svg {\n  display: block;\n  width: 55%;\n  height: 55%;\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* Components of the period: menu, progress, carousel, accordion, tooltip, avatar */\n:root {\n  --size-progress: 14px;\n  --size-orb: 24px;\n  --size-slide: 96px;\n  --size-avatar: 44px;\n  --size-avatar-small: 28px;\n  --size-menu: 200px;\n  --size-tip: 220px;\n  --size-dot: 8px;\n}\n.ds-nav:has(.ds-menu),\n.ds-nav:has(.ds-menu) .ds-nav__bar { overflow: visible; }\n.ds-menu { position: relative; }\n.ds-menu > .ds-nav__link::after {\n  content: \"\";\n  display: inline-block;\n  flex: none;\n  width: 0;\n  height: 0;\n  border-left: var(--space-2) solid transparent;\n  border-right: var(--space-2) solid transparent;\n  border-top: var(--space-2) solid currentColor;\n  vertical-align: calc(var(--space-2) / 2);\n  margin-left: var(--space-2);\n}\n.ds-menu__list {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  min-width: var(--size-menu);\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list { display: block; }\n.ds-menu__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-control);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-shadow: none;\n  text-transform: none;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n\n.ds-progress__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-2);\n  font-size: var(--text-small);\n}\n.ds-progress__note { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); }\n.ds-progress {\n  -webkit-appearance: none;\n  appearance: none;\n  display: block;\n  flex: 1 1 0;\n  width: 100%;\n  height: var(--size-progress);\n  margin: 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-progress::-moz-progress-bar { background: var(--fill-accent); border-radius: var(--radius-pill); }\n\n.ds-carousel { margin: 0 0 var(--space-3); }\n.ds-carousel__stage { display: flex; align-items: center; gap: var(--space-2); }\n.ds-carousel__orb {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-orb);\n  height: var(--size-orb);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n  border-radius: var(--radius-pill);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  line-height: 1;\n}\n.ds-carousel__orb::before {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-large) * 0.4);\n  height: calc(var(--text-large) * 0.4);\n  border-left: calc(var(--space-3) / 4) solid currentColor;\n  border-bottom: calc(var(--space-3) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n}\n.ds-carousel__orb ~ .ds-carousel__orb::before {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-carousel__track {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n}\n.ds-carousel__slide {\n  display: flex;\n  flex: 0 0 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  min-height: var(--size-slide);\n  margin: 0;\n  padding: var(--space-3);\n  scroll-snap-align: start;\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-control);\n  background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%);\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-carousel__slide--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-carousel__slide--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-carousel__title { margin: 0; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); }\n.ds-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }\n.ds-carousel__dot {\n  display: block;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface);\n}\n.ds-carousel__dot.is-current { background: var(--color-accent); }\n\n.ds-tooltip { position: relative; display: inline-block; vertical-align: middle; }\n.ds-tooltip__trigger {\n  display: inline-block;\n  width: var(--size-orb);\n  height: var(--size-orb);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n  border-radius: var(--radius-pill);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  cursor: help;\n  text-transform: none;\n  align-content: center;\n  text-align: center;\n  text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__text {\n  display: none;\n  position: absolute;\n  top: calc(100% + var(--space-1));\n  left: 0;\n  z-index: 20;\n  width: max-content;\n  max-width: var(--size-tip);\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  background: var(--color-notice);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-notice-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-align: left;\n  text-transform: none;\n  text-shadow: none;\n}\n/* In a panel title the tip hangs under the title bar at the panel's own\n   width, so the panel that clips its corners does not cut it. */\n.ds-panel__title { position: relative; }\n.ds-panel__title > .ds-tooltip { position: static; }\n.ds-panel__title .ds-tooltip__text {\n  top: 100%;\n  left: var(--space-3);\n  box-sizing: border-box;\n  max-width: calc(100% - 2 * var(--space-3));\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text { display: block; }\n\n.ds-avatar {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  border: var(--border-width-strong) var(--border-style) var(--color-surface);\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control), 0 0 0 var(--border-width) var(--color-border-strong);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n  text-transform: uppercase;\n}\n.ds-person { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }\n.ds-person__name { margin: 0; color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-person__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin: Frutiger Aero gadget shop 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<div class=\"ds-page__wrap\">\n<div class=\"ds-page__sheet\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__top\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\"><span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M12 2.5a9.5 9.5 0 1 0 0 19a9.5 9.5 0 1 0 0-19zM12 4.6a5.6 3 0 1 0 0 6a5.6 3 0 1 0 0-6z\"/></svg></span><span class=\"ds-brand__name\">chronoskin</span></a>\n    <form class=\"ds-nav__search\" action=\"#\">\n      <input class=\"ds-nav__input\" type=\"text\" placeholder=\"Search 2,400 gadgets\" aria-label=\"Search the shop\">\n      <button class=\"ds-button ds-button--secondary\" type=\"button\">Search</button>\n    </form>\n    <a class=\"ds-nav__basket\" href=\"#basket\">\n      <svg class=\"ds-nav__basket-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 4h3l2.5 11h9.5l2-8H7\"/><circle cx=\"10\" cy=\"19\" r=\"1.4\"/><circle cx=\"17\" cy=\"19\" r=\"1.4\"/></svg>\n      <span class=\"ds-nav__basket-text\"><span class=\"ds-nav__basket-name\">Your basket <span class=\"ds-badge\">4</span></span><span class=\"ds-nav__basket-sum\">4 gadgets, 305.00</span></span>\n    </a>\n  </div>\n  <div class=\"ds-nav__bar\">\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-nav__item ds-menu\"><a class=\"ds-nav__link\" href=\"#shop\">Music players</a><ul class=\"ds-menu__list\"><li><a class=\"ds-menu__link\" href=\"#shop\">All music players</a></li><li><a class=\"ds-menu__link\" href=\"#shop\">Memory 4 GB</a></li><li><a class=\"ds-menu__link\" href=\"#shop\">Memory 8 GB</a></li><li><a class=\"ds-menu__link\" href=\"#shop\">Accessories</a></li></ul></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#product\">Gadget of the week</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#basket\">Basket</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#checkout\">Checkout</a></li>\n    </ul>\n    <p class=\"ds-nav__note\">Free delivery over 50.00</p>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-page__body\">\n\n    <div class=\"ds-page__columns ds-page__columns--stretch\">\n      <aside class=\"ds-page__cats\">\n        <div class=\"ds-sidebar is-last\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Shop by kind</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link\" href=\"#shop\">Music players</a><span class=\"ds-sidebar__count\">38</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Phones</a><span class=\"ds-sidebar__count\">61</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Cameras</a><span class=\"ds-sidebar__count\">44</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Picture frames</a><span class=\"ds-sidebar__count\">17</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Headphones</a><span class=\"ds-sidebar__count\">52</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Memory cards</a><span class=\"ds-sidebar__count\">29</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Cases and docks</a><span class=\"ds-sidebar__count\">120</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">On offer</a><span class=\"ds-sidebar__count\">23</span></li>\n          </ul>\n        </div>\n      </aside>\n      <div class=\"ds-hero\" data-component=\"hero\">\n        <span class=\"ds-hero__glow\" aria-hidden=\"true\"></span>\n        <span class=\"ds-hero__glow ds-hero__glow--2\" aria-hidden=\"true\"></span>\n        <span class=\"ds-hero__glow ds-hero__glow--3\" aria-hidden=\"true\"></span>\n        <div class=\"ds-hero__main\">\n          <p class=\"ds-hero__kicker\"><span class=\"ds-badge\">Gadget of the week</span></p>\n          <h1 class=\"ds-hero__title\">A thousand songs in a shirt pocket</h1>\n          <p class=\"ds-hero__lead\">The Pebble 8 GB player in five colours, with a click wheel, a bright screen and 24 hours of music on one charge.</p>\n          <p class=\"ds-hero__price\">79.00 <span class=\"ds-hero__was\">99.00</span></p>\n          <p class=\"ds-hero__action\">\n            <a class=\"ds-button ds-button--large\" href=\"#basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 4h3l2.5 11h9.5l2-8H7\"/><circle cx=\"10\" cy=\"19\" r=\"1.4\"/><circle cx=\"17\" cy=\"19\" r=\"1.4\"/></svg> Add to basket</a>\n            <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#product\">See the details</a>\n          </p>\n        </div>\n        <div class=\"ds-hero__product\">\n          <span class=\"ds-hero__device ds-hero__device--back\"><span class=\"ds-device ds-device--c ds-device--mirror\" aria-hidden=\"true\"></span></span>\n          <span class=\"ds-hero__device\"><span class=\"ds-device ds-device--b ds-device--mirror\" aria-hidden=\"true\"></span></span>\n          <span class=\"ds-hero__device ds-hero__device--back\"><span class=\"ds-device ds-device--mirror\" aria-hidden=\"true\"></span></span>\n        </div>\n      </div>\n    </div>\n\n    <ul class=\"ds-stats\" data-component=\"stats\">\n      <li class=\"ds-stat is-first\"><span class=\"ds-stat__orb\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 7h11v9H3zM14 10h4l3 3v3h-7\"/><circle cx=\"7\" cy=\"17.5\" r=\"1.6\"/><circle cx=\"17\" cy=\"17.5\" r=\"1.6\"/></svg></span><span class=\"ds-stat__text\"><span class=\"ds-stat__number\">24 hours</span><span class=\"ds-stat__label\">from order to your door</span></span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__orb\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 9a8 8 0 1 1 2 8M4 4v5h5\"/></svg></span><span class=\"ds-stat__text\"><span class=\"ds-stat__number\">30 days</span><span class=\"ds-stat__label\">to send anything back</span></span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__orb\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z\"/><path d=\"M8.5 12l2.5 2.5 4.5-5\"/></svg></span><span class=\"ds-stat__text\"><span class=\"ds-stat__number\">2 years</span><span class=\"ds-stat__label\">guarantee on every gadget</span></span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__orb\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l2.7 5.6 6.1.8-4.5 4.2 1.1 6-5.4-3-5.4 3 1.1-6L3.200 9.400l6.100-.8z\"/></svg></span><span class=\"ds-stat__text\"><span class=\"ds-stat__number\">4.7 of 5</span><span class=\"ds-stat__label\">from 9,310 buyers</span></span></li>\n    </ul>\n\n    <div class=\"ds-section\">\n      <h2 class=\"ds-section__title\">New this week <a class=\"ds-link ds-section__more\" href=\"#shop\">See all 38 music players</a></h2>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <div class=\"ds-grid__cell ds-grid__cell--1\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Pebble 8 GB\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--b ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge\">Offer</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Pebble 8 GB</a></h3>\n          <p class=\"ds-grid__text\">Click wheel, 24 hours of music</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">79.00<span class=\"ds-price__was\">99.00</span></span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Pebble 8 GB to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Slate touch phone\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--phone ds-device--d ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--new\">New</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Slate touch phone</a></h3>\n          <p class=\"ds-grid__text\">3.2 inch screen, 5 megapixel camera</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">189.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Slate touch phone to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--3\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Finch pocket camera\"><span class=\"ds-grid__device ds-grid__device--wide\"><span class=\"ds-device ds-device--camera ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Finch pocket camera</a></h3>\n          <p class=\"ds-grid__text\">10 megapixels, 4 times zoom</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">129.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Finch pocket camera to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--4\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Hearth picture frame\"><span class=\"ds-grid__device ds-grid__device--wide\"><span class=\"ds-device ds-device--frame ds-device--d ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--new\">New</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Hearth picture frame</a></h3>\n          <p class=\"ds-grid__text\">8 inch, plays from a memory card</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">64.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Hearth picture frame to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ds-section\">\n      <div class=\"ds-page__columns\">\n        <main class=\"ds-page__main\">\n          <h2 class=\"ds-section__title\">What buyers say</h2>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item is-first\">\n              <span class=\"ds-list__score\">4.5<span class=\"ds-list__of\">of 5</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Small enough to forget it is there</a></h3>\n                <p class=\"ds-list__text\">The wheel takes a day to get used to. After that I stopped carrying anything else on the train.</p>\n                <p class=\"ds-list__meta\">Ilse Varkonyi on the Pebble 8 GB, 14 March</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__score\">5.0<span class=\"ds-list__of\">of 5</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Arrived the next morning, charged</a></h3>\n                <p class=\"ds-list__text\">Ordered at four in the afternoon and it was on the mat before breakfast.</p>\n                <p class=\"ds-list__meta\">Bram Oyelaran on the Finch pocket camera, 11 March</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__score\">3.5<span class=\"ds-list__of\">of 5</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#product\">Good frame, short power lead</a></h3>\n                <p class=\"ds-list__text\">The picture is bright and sharp. Plan for a socket within a metre of the shelf.</p>\n                <p class=\"ds-list__meta\">Tilde Marchetti on the Hearth picture frame, 6 March</p>\n              </div>\n            </li>\n          </ul>\n        </main>\n        <aside class=\"ds-page__aside\">\n<div class=\"ds-panel\">\n<h2 class=\"ds-panel__title\">Buyer of the week</h2>\n<div class=\"ds-panel__body\">\n<p class=\"ds-person\"><span class=\"ds-avatar\" aria-hidden=\"true\">MK</span><span><span class=\"ds-person__name\">Mira K.</span><br><span class=\"ds-person__meta\">Pebble 8 GB, 5 stars</span></span></p>\n<p class=\"ds-progress__note\">It fits in the pocket of my shirt and never gets in the way.</p>\n</div>\n</div>\n\n          <div class=\"ds-panel is-last\" data-component=\"panel\">\n            <h2 class=\"ds-panel__title\">In your basket</h2>\n            <div class=\"ds-panel__body\">\n              <ul class=\"ds-panel__facts\">\n                <li class=\"ds-panel__fact is-first\"><span class=\"ds-panel__fact-name\">Pebble 8 GB, orange</span><span>79.00</span></li>\n                <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Finch pocket camera</span><span>129.00</span></li>\n                <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Two more gadgets</span><span>97.00</span></li>\n                <li class=\"ds-panel__fact is-total\"><span class=\"ds-panel__fact-name\">Total with delivery</span><span>305.00</span></li>\n              </ul>\n              <p class=\"ds-panel__actions\"><a class=\"ds-button\" href=\"#checkout\">Go to checkout</a><a class=\"ds-link\" href=\"#basket\">Open the basket</a></p>\n            </div>\n          </div>\n        </aside>\n      </div>\n    </div>\n\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"shop\">\n  <div class=\"ds-page__body\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li><a class=\"ds-link\" href=\"#shop\">All gadgets</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Music players</li>\n    </ol>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Music players</h1>\n        <p class=\"ds-page-header__text\">38 players from 2 GB to 120 GB, every one in stock unless marked.</p>\n      </div>\n      <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 4h3l2.5 11h9.5l2-8H7\"/><circle cx=\"10\" cy=\"19\" r=\"1.4\"/><circle cx=\"17\" cy=\"19\" r=\"1.4\"/></svg> Open the basket</a></div>\n    </div>\n    <div class=\"ds-page__columns\">\n      <aside class=\"ds-page__cats\">\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Memory</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">2 to 4 GB</a><span class=\"ds-sidebar__count\">9</span></li>\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link\" href=\"#shop\">8 to 16 GB</a><span class=\"ds-sidebar__count\">17</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">32 GB and more</a><span class=\"ds-sidebar__count\">12</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Price</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Under 50.00</a><span class=\"ds-sidebar__count\">8</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">50.00 to 100.00</a><span class=\"ds-sidebar__count\">19</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Over 100.00</a><span class=\"ds-sidebar__count\">11</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar is-last\">\n          <h2 class=\"ds-sidebar__title\">Goes with a player</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Headphones</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Docks and speakers</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Cases</a></li>\n          </ul>\n        </div>\n      </aside>\n      <main class=\"ds-page__main\">\n        <ul class=\"ds-tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#shop\">Best sellers</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#shop\">Lowest price</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#shop\">Newest</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#shop\">Top rated</a></li>\n        </ul>\n        <div class=\"ds-grid ds-grid--3\">\n        <div class=\"ds-grid__cell ds-grid__cell--1\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Pebble 8 GB\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--b ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge\">Offer</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Pebble 8 GB</a></h3>\n          <p class=\"ds-grid__text\">Click wheel, 24 hours of music</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">79.00<span class=\"ds-price__was\">99.00</span></span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Pebble 8 GB to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Pebble 16 GB\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--c ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--success\">In stock</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Pebble 16 GB</a></h3>\n          <p class=\"ds-grid__text\">The same player with room for 4,000 songs</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">109.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Pebble 16 GB to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--3\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Tide video player\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--phone ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--warning\">3 left</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Tide video player</a></h3>\n          <p class=\"ds-grid__text\">3 inch screen, plays films for 6 hours</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">139.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Tide video player to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--4\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Flint 4 GB\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--d ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--success\">In stock</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Flint 4 GB</a></h3>\n          <p class=\"ds-grid__text\">A clip, a wheel and nothing else</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">39.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Flint 4 GB to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--1\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Tide touch 32 GB\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--phone ds-device--d ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--new\">New</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Tide touch 32 GB</a></h3>\n          <p class=\"ds-grid__text\">Touch screen, wireless, 32 GB</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">219.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Tide touch 32 GB to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <a class=\"ds-grid__stage\" href=\"#product\" aria-label=\"Pebble 8 GB, silver\"><span class=\"ds-grid__device\"><span class=\"ds-device ds-device--mirror\" aria-hidden=\"true\"></span></span></a>\n          <span class=\"ds-grid__flag\"><span class=\"ds-badge ds-badge--danger\">Sold out</span></span>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#product\">Pebble 8 GB, silver</a></h3>\n          <p class=\"ds-grid__text\">Last of the first series</p>\n          <p class=\"ds-grid__buy\"><span class=\"ds-price\">69.00</span><a class=\"ds-button ds-button--round\" href=\"#basket\" aria-label=\"Add Pebble 8 GB, silver to the basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></a></p>\n        </div>\n        </div>\n        <div class=\"ds-table__foot\">\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#shop\">Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#shop\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#shop\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#shop\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#shop\">Next</a></li>\n          </ul>\n          <p class=\"ds-badges\" data-component=\"badge\">\n            <span class=\"ds-badge\">Offer</span>\n            <span class=\"ds-badge ds-badge--count\">38</span>\n            <span class=\"ds-badge ds-badge--new\">New</span>\n            <span class=\"ds-badge ds-badge--success\">In stock</span>\n            <span class=\"ds-badge ds-badge--warning\">3 left</span>\n            <span class=\"ds-badge ds-badge--danger\">Sold out</span>\n          </p>\n        </div>\n      </main>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"product\">\n  <div class=\"ds-page__body\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li><a class=\"ds-link\" href=\"#shop\">Music players</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Pebble 8 GB</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Pebble 8 GB music player</h1>\n        <p class=\"ds-page-header__text\">2,000 songs, a click wheel and a day of music on one charge.</p>\n      </div>\n      <div class=\"ds-page-header__actions\"><span class=\"ds-badge ds-badge--success\">In stock</span><a class=\"ds-link\" href=\"#home\">214 reviews, 4.5 of 5</a></div>\n    </div>\n    <div class=\"ds-product\">\n      <div class=\"ds-product__stage\">\n        <span class=\"ds-product__device ds-product__device--back\"><span class=\"ds-device ds-device--c ds-device--mirror\" aria-hidden=\"true\"></span></span>\n        <span class=\"ds-product__device\"><span class=\"ds-device ds-device--b ds-device--mirror\" aria-hidden=\"true\"></span></span>\n        <span class=\"ds-product__device ds-product__device--back\"><span class=\"ds-device ds-device--d ds-device--mirror\" aria-hidden=\"true\"></span></span>\n        <span class=\"ds-product__device ds-product__device--back\"><span class=\"ds-device ds-device--mirror\" aria-hidden=\"true\"></span></span>\n      </div>\n      <div class=\"ds-product__buy\">\n        <div class=\"ds-panel is-last\">\n          <h2 class=\"ds-panel__title\">Buy the Pebble 8 GB</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-product__price\"><span class=\"ds-price ds-price--large\">79.00</span><span class=\"ds-price__was\">99.00</span></p>\n            <ul class=\"ds-panel__facts\">\n              <li class=\"ds-panel__fact is-first\"><span class=\"ds-panel__fact-name\">Colour</span><span><select class=\"ds-form__select\" aria-label=\"Colour\"><option>Orange</option><option>Pink</option><option>Graphite</option><option>Silver</option></select></span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Delivery</span><span>Tomorrow, free</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Guarantee</span><span>2 years</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Offer ends</span><span>Sunday at midnight</span></li>\n            </ul>\n            <p class=\"ds-panel__actions\"><a class=\"ds-button ds-button--large\" href=\"#basket\"><svg class=\"ds-button__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 4h3l2.5 11h9.5l2-8H7\"/><circle cx=\"10\" cy=\"19\" r=\"1.4\"/><circle cx=\"17\" cy=\"19\" r=\"1.4\"/></svg> Add to basket</a><a class=\"ds-link\" href=\"#shop\">Compare players</a></p>\n          </div>\n        </div>\n      </div>\n    </div>\n<div class=\"ds-carousel\">\n<div class=\"ds-carousel__stage\"><span class=\"ds-carousel__orb\" aria-hidden=\"true\"></span><div class=\"ds-carousel__track\"><figure class=\"ds-carousel__slide\"><figcaption class=\"ds-carousel__title\">Pebble 8 GB, front</figcaption></figure><figure class=\"ds-carousel__slide ds-carousel__slide--2\"><figcaption class=\"ds-carousel__title\">Pebble 8 GB, side</figcaption></figure><figure class=\"ds-carousel__slide ds-carousel__slide--3\"><figcaption class=\"ds-carousel__title\">In the box</figcaption></figure></div><span class=\"ds-carousel__orb\" aria-hidden=\"true\"></span></div>\n<ul class=\"ds-carousel__dots\" aria-hidden=\"true\"><li class=\"ds-carousel__dot is-current\"></li><li class=\"ds-carousel__dot\"></li><li class=\"ds-carousel__dot\"></li></ul>\n</div>\n    <ul class=\"ds-tabs\" data-component=\"tabs\">\n      <li><a class=\"ds-tabs__tab is-current\" href=\"#product\">Description</a></li>\n      <li><a class=\"ds-tabs__tab\" href=\"#product\">Specification</a></li>\n      <li><a class=\"ds-tabs__tab\" href=\"#product\">Reviews (214)</a></li>\n      <li><a class=\"ds-tabs__tab\" href=\"#product\">Accessories</a></li>\n    </ul>\n    <div class=\"ds-page__columns\">\n      <main class=\"ds-page__main\">\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>All your music, none of the weight</h1>\n          <p>The Pebble holds about 2,000 songs and weighs less than a bar of chocolate. Turn the wheel to find a song, press the middle to play it. There is nothing else to learn.</p>\n          <h2>What it plays</h2>\n          <p>Songs, spoken books and radio shows you have saved. Plug it into any computer and it appears as a disk, so you can drag files across without installing anything.</p>\n          <ul>\n            <li>Plays for <strong>24 hours</strong> on a charge of two hours</li>\n            <li>Reads files ending in <code>.mp3</code>, <code>.ogg</code> and <code>.wav</code></li>\n            <li>Screen of 1.8 inches with album covers</li>\n          </ul>\n          <h3>In the box</h3>\n          <p>The player, earphones, a short cable for charging and a printed guide of eight pages.</p>\n        </article>\n        <div class=\"ds-section\">\n          <h2 class=\"ds-section__title\">People also looked at</h2>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#product\">Pebble 16 GB</a>\n            <a class=\"ds-link is-visited\" href=\"#product\">Flint 4 GB</a>\n            <a class=\"ds-link is-hover\" href=\"#shop\">Docks and speakers</a>\n            <a class=\"ds-link is-active\" href=\"#shop\">All music players</a>\n          </p>\n        </div>\n      </main>\n      <aside class=\"ds-page__aside\">\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">At a glance</h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__facts is-last\">\n              <li class=\"ds-panel__fact is-first\"><span class=\"ds-panel__fact-name\">Memory</span><span>8 GB</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Battery</span><span>24 hours</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Weight</span><span>41 g</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Size</span><span>90 by 41 by 7 mm</span></li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-sidebar is-last\">\n          <h2 class=\"ds-sidebar__title\">Goes well with</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Soft case, 9.00</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Bedside dock, 34.00</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#shop\">Sport earphones, 19.00</a></li>\n          </ul>\n        </div>\n      </aside>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"basket\">\n  <div class=\"ds-page__body\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Your basket</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Your basket</h1>\n        <p class=\"ds-page-header__text\">Four gadgets. Order before 4 in the afternoon and they leave today.</p>\n      </div>\n      <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#shop\">Keep shopping</a><a class=\"ds-button\" href=\"#checkout\">Go to checkout</a></div>\n    </div>\n    <ol class=\"ds-steps\"><li class=\"ds-steps__step is-current\"><span class=\"ds-steps__number\">1</span> Basket</li><li class=\"ds-steps__step\"><span class=\"ds-steps__number\">2</span> Your details</li><li class=\"ds-steps__step\"><span class=\"ds-steps__number\">3</span> Payment</li><li class=\"ds-steps__step\"><span class=\"ds-steps__number\">4</span> Done</li></ol>\n    <div class=\"ds-page__columns\">\n      <main class=\"ds-page__main\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th class=\"ds-table__head\" colspan=\"2\">Gadget</th><th class=\"ds-table__head\">Stock</th><th class=\"ds-table__head is-numeric\">Each</th><th class=\"ds-table__head\">How many</th><th class=\"ds-table__head is-numeric\">Total</th><th class=\"ds-table__head\"></th></tr>\n          </thead>\n          <tbody>\n          <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--thumb\"><span class=\"ds-table__device\"><span class=\"ds-device ds-device--b\" aria-hidden=\"true\"></span></span></td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#product\">Pebble 8 GB</a><span class=\"ds-table__note\">Orange, offer price</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">In stock</span></td><td class=\"ds-table__cell is-numeric\">79.00</td><td class=\"ds-table__cell\"><select class=\"ds-form__select\" aria-label=\"Quantity of Pebble 8 GB\"><option selected>1</option><option>2</option><option>3</option></select></td><td class=\"ds-table__cell is-numeric is-total\">79.00</td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--quiet\" href=\"#basket\">Remove</a></td></tr>\n          <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--thumb\"><span class=\"ds-table__device ds-table__device--wide\"><span class=\"ds-device ds-device--camera\" aria-hidden=\"true\"></span></span></td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#product\">Finch pocket camera</a><span class=\"ds-table__note\">Silver, with a 2 GB card</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">In stock</span></td><td class=\"ds-table__cell is-numeric\">129.00</td><td class=\"ds-table__cell\"><select class=\"ds-form__select\" aria-label=\"Quantity of Finch pocket camera\"><option selected>1</option><option>2</option><option>3</option></select></td><td class=\"ds-table__cell is-numeric is-total\">129.00</td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--quiet\" href=\"#basket\">Remove</a></td></tr>\n          <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--thumb\"><span class=\"ds-table__device ds-table__device--wide\"><span class=\"ds-device ds-device--frame ds-device--d\" aria-hidden=\"true\"></span></span></td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#product\">Hearth picture frame</a><span class=\"ds-table__note\">8 inch, black</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">3 left</span></td><td class=\"ds-table__cell is-numeric\">64.00</td><td class=\"ds-table__cell\"><select class=\"ds-form__select\" aria-label=\"Quantity of Hearth picture frame\"><option selected>1</option><option>2</option><option>3</option></select></td><td class=\"ds-table__cell is-numeric is-total\">64.00</td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--quiet\" href=\"#basket\">Remove</a></td></tr>\n          <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--thumb\"><span class=\"ds-table__device\"><span class=\"ds-device\" aria-hidden=\"true\"></span></span></td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#product\">Soft case for the Pebble</a><span class=\"ds-table__note\">Grey felt</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">In stock</span></td><td class=\"ds-table__cell is-numeric\">9.00</td><td class=\"ds-table__cell\"><select class=\"ds-form__select\" aria-label=\"Quantity of Soft case for the Pebble\"><option>1</option><option>2</option><option selected>3</option></select></td><td class=\"ds-table__cell is-numeric is-total\">27.00</td><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--quiet\" href=\"#basket\">Remove</a></td></tr>\n          </tbody>\n        </table>\n        <div class=\"ds-section\">\n          <h2 class=\"ds-section__title\">Saved for later</h2>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <span class=\"ds-empty__orb\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 4h12v17l-6-4-6 4z\"/></svg></span>\n            <h3 class=\"ds-empty__title\">Nothing saved for later</h3>\n            <p class=\"ds-empty__text\">Move a gadget here if you are not ready to buy it. We keep it for 90 days.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#shop\">Look around the shop</a>\n          </div>\n        </div>\n      </main>\n      <aside class=\"ds-page__aside\">\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Order summary</h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__facts\">\n              <li class=\"ds-panel__fact is-first\"><span class=\"ds-panel__fact-name\">Four gadgets</span><span>299.00</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Delivery, next day</span><span>6.00</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Gift wrapping</span><span>0.00</span></li>\n              <li class=\"ds-panel__fact is-total\"><span class=\"ds-panel__fact-name\">Total to pay</span><span>305.00</span></li>\n            </ul>\n            <p class=\"ds-panel__actions\"><a class=\"ds-button ds-button--large\" href=\"#checkout\">Go to checkout</a></p>\n          </div>\n        </div>\n        <div class=\"ds-panel is-last\">\n          <h2 class=\"ds-panel__title\">Free delivery <span class=\"ds-tooltip\"><span class=\"ds-tooltip__trigger\" tabindex=\"0\">?</span><span class=\"ds-tooltip__text\" role=\"tooltip\">Orders over 50 pounds ship free, 2 to 3 days.</span></span></h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Standard delivery is free on this order. It takes two more days.</p>\n            <span class=\"ds-meter\"><span class=\"ds-meter__bar ds-meter__bar--full\"></span></span>\n          </div>\n        </div>\n      </aside>\n    </div>\n    <div class=\"ds-dialog__backdrop\">\n      <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"bk-dialog-title\">\n        <h2 class=\"ds-dialog__title\" id=\"bk-dialog-title\">Take the picture frame out?</h2>\n        <p class=\"ds-dialog__text\">Only three are left at this price. You can move it to Saved for later instead and decide another day.</p>\n        <div class=\"ds-dialog__actions\">\n          <a class=\"ds-button ds-button--danger\" href=\"#basket\">Remove it</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Save for later</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"checkout\">\n  <div class=\"ds-page__body\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li><a class=\"ds-link\" href=\"#basket\">Your basket</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Checkout</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Checkout</h1>\n        <p class=\"ds-page-header__text\">Tell us where the parcel goes. You pay on the next page.</p>\n      </div>\n      <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back to the basket</a></div>\n    </div>\n    <ol class=\"ds-steps\"><li class=\"ds-steps__step\"><span class=\"ds-steps__number\">1</span> Basket</li><li class=\"ds-steps__step is-current\"><span class=\"ds-steps__number\">2</span> Your details</li><li class=\"ds-steps__step\"><span class=\"ds-steps__number\">3</span> Payment</li><li class=\"ds-steps__step\"><span class=\"ds-steps__number\">4</span> Done</li></ol>\n    <div class=\"ds-page__columns\">\n      <main class=\"ds-page__main\">\n        <div data-component=\"notice\">\n          <div class=\"ds-notice\"><span class=\"ds-notice__sign\" aria-hidden=\"true\">i</span><p class=\"ds-notice__text\"><span class=\"ds-notice__title\">Ordering as a guest.</span> You can make an account after paying and keep this address for next time.</p></div>\n          <div class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__sign\" aria-hidden=\"true\">!</span><p class=\"ds-notice__text\"><span class=\"ds-notice__title\">One field needs another look.</span> The postcode does not match the town.</p></div>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#\">\n          <div class=\"ds-form__grid\">\n            <h2 class=\"ds-form__legend\">Deliver to</h2>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"co-name\">Full name</label>\n              <input class=\"ds-form__input\" id=\"co-name\" type=\"text\" value=\"Ilse Varkonyi\">\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"co-mail\">Mail address</label>\n              <input class=\"ds-form__input is-focus\" id=\"co-mail\" type=\"text\" value=\"ilse.varkonyi@harbourpost.example\">\n            </div>\n            <div class=\"ds-form__row ds-form__row--wide\">\n              <label class=\"ds-form__label\" for=\"co-street\">Street and number</label>\n              <input class=\"ds-form__input\" id=\"co-street\" type=\"text\" value=\"14 Quay Street\">\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"co-town\">Town</label>\n              <input class=\"ds-form__input\" id=\"co-town\" type=\"text\" value=\"Port Ansel\">\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"co-post\">Postcode</label>\n              <input class=\"ds-form__input ds-form__input--short is-error\" id=\"co-post\" type=\"text\" value=\"PA4\">\n              <p class=\"ds-form__error\">A postcode here has five characters, for example PA4 2QS.</p>\n            </div>\n            <h2 class=\"ds-form__legend\">Delivery</h2>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"co-speed\">How fast</label>\n              <select class=\"ds-form__select\" id=\"co-speed\"><option>Next day, 6.00</option><option>Standard, three days, free</option><option>Collect from the depot, free</option></select>\n              <p class=\"ds-form__hint\">Order before 4 in the afternoon for next day.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <span class=\"ds-form__label\">Extras</span>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Wrap it as a gift, no charge</label>\n            </div>\n            <div class=\"ds-form__row ds-form__row--wide\">\n              <label class=\"ds-form__label\" for=\"co-note\">Note for the driver</label>\n              <textarea class=\"ds-form__textarea\" id=\"co-note\">Blue door at the side. The bell is slow, please knock.</textarea>\n            </div>\n          </div>\n          <div class=\"ds-form__actions\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"button\">Continue to payment</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back</a>\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Empty the basket</button>\n            <button class=\"ds-button is-disabled\" type=\"button\" disabled>Pay by invoice</button>\n          </div>\n        </form>\n      </main>\n      <aside class=\"ds-page__aside\">\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Your order</h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__facts is-last\">\n              <li class=\"ds-panel__fact is-first\"><span class=\"ds-panel__fact-name\">Pebble 8 GB, orange</span><span>79.00</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Finch pocket camera</span><span>129.00</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Hearth picture frame</span><span>64.00</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Soft case, 3</span><span>27.00</span></li>\n              <li class=\"ds-panel__fact\"><span class=\"ds-panel__fact-name\">Delivery</span><span>6.00</span></li>\n              <li class=\"ds-panel__fact is-total\"><span class=\"ds-panel__fact-name\">Total to pay</span><span>305.00</span></li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-sidebar is-last\">\n          <h2 class=\"ds-sidebar__title\">Help with your order</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#home\">Ways to pay</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#home\">Sending something back</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#home\">Delivery to an island</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#home\">Call us, 8 to 6</a></li>\n          </ul>\n        </div>\n      </aside>\n    </div>\n  </div>\n</section>\n\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <ul class=\"ds-footer__list\">\n    <li><a class=\"ds-footer__link\" href=\"#shop\">All gadgets</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#home\">Delivery</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#home\">Returns</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#home\">Privacy</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#home\">Terms of sale</a></li>\n  </ul>\n  <p class=\"ds-footer__legal\">chronoskin Gadgets is a placeholder shop in a design specimen. Names and prices are invented.</p>\n</footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.frutiger-aero.shop.s05.p02.t07.u01\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"frutiger-aero\",\n    \"years\": [\n      2004,\n      2010\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-fa-5271\",\n  \"short\": \"v1-fa-5271\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #060c1a;\n  --color-canvas: #0b1526;\n  --color-surface: #101c33;\n  --color-surface-alt: #162740;\n  --color-surface-strong: #203552;\n  --color-bar: #181818;\n  --color-bar-text: #eef6ff;\n  --color-bar-alt: #1b3d6b;\n  --color-bar-alt-text: #d4e9ff;\n  --color-inverse: #123c8f;\n  --color-inverse-text: #ffffff;\n  --color-text: #c9d6e6;\n  --color-text-muted: #989898;\n  --color-heading: #ffffff;\n  --color-heading-alt: #62d8ff;\n  --color-link: #62c8ff;\n  --color-link-quiet: #a3b8cf;\n  --color-link-visited: #b59cff;\n  --color-link-hover: #a8ecff;\n  --color-link-active: #ffffff;\n  --color-border: #2a4466;\n  --color-border-strong: #4d7fb3;\n  --color-border-muted: #1c2f4a;\n  --color-accent: #19c2f0;\n  --color-accent-text: #03131f;\n  --color-accent-alt: #c86bff;\n  --color-fill-1: #10305e;\n  --color-fill-2: #0d3a55;\n  --color-fill-3: #2a1d5c;\n  --color-fill-4: #123f3a;\n  --color-button: #0f8fd0;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #26374f;\n  --color-button-secondary-text: #dcecff;\n  --color-input: #060d1a;\n  --color-input-text: #e6f1ff;\n  --color-input-border: #35557d;\n  --color-disabled: #1a2434;\n  --color-disabled-text: #5d6d82;\n  --color-danger: #e0483c;\n  --color-danger-surface: #3a1418;\n  --color-success: #2fa84a;\n  --color-warning: #f2b31c;\n  --color-notice: #132c4a;\n  --color-notice-text: #d4e9ff;\n  --color-focus: #5fe6ff;\n  --color-shadow: #000000;\n  --color-overlay: rgba(0, 0, 0, 0.6);\n}\n\n/* @part type */\n:root {\n  --font-body: Calibri, Carlito, Geneva, \"DejaVu Sans\", sans-serif;\n  --font-heading: Corbel, Skia, \"Lucida Sans\", \"DejaVu Sans\", sans-serif;\n  --font-ui: Calibri, Carlito, Geneva, \"DejaVu Sans\", sans-serif;\n  --font-mono: Consolas, \"DejaVu Sans Mono\", Monaco, monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 12px;\n  --text-large: 16px;\n  --text-display: 32px;\n  --text-h1: 25px;\n  --text-h2: 19px;\n  --text-h3: 14px;\n  --line-body: 1.5;\n  --line-heading: 1.2;\n  --line-display: 1.12;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\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: 4px;\n  --radius-panel: 7px;\n  --radius-pill: 10px;\n  --radius-page: 10px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 22%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 55%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 0 6px color-mix(in srgb, var(--color-focus) 90%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n  --shadow-control-pressed: inset 0 2px 4px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n  --shadow-dialog: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 0 0 1px color-mix(in srgb, white 35%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n  --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n  --fill-page: radial-gradient(ellipse 55% 220px at 50% 0, color-mix(in srgb, white 60%, transparent) 0, transparent 100%) 0 0 / 100% 220px no-repeat, radial-gradient(ellipse 60% 260px at 62% 0, color-mix(in srgb, var(--color-accent) 55%, transparent) 0, transparent 100%) 0 0 / 100% 260px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 22%) 0, var(--color-page) 300px, color-mix(in srgb, var(--color-page), white 62%) 900px) 0 0 / 100% 900px no-repeat, color-mix(in srgb, var(--color-page), white 62%);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 48%) 0, color-mix(in srgb, var(--color-bar), white 18%) 49%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 20%) 100%);\n  --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 88%) 0, color-mix(in srgb, var(--color-bar-alt), white 45%) 49%, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), white 35%) 100%);\n  --fill-inverse: radial-gradient(ellipse 60% 90% at 72% 0, color-mix(in srgb, white 38%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 20%) 0, var(--color-inverse) 42%, color-mix(in srgb, var(--color-inverse), white 42%) 100%);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 50%) 0, color-mix(in srgb, var(--color-accent), white 15%) 49%, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 10%) 100%);\n  --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 90%, transparent) 0, color-mix(in srgb, var(--color-surface-alt) 82%, transparent) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 60%) 0, color-mix(in srgb, var(--color-button), white 22%) 48%, var(--color-button) 52%, color-mix(in srgb, var(--color-button), white 24%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 72%) 0, color-mix(in srgb, var(--color-button), white 34%) 48%, color-mix(in srgb, var(--color-button), white 10%) 52%, color-mix(in srgb, var(--color-button), white 38%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 90%) 0, color-mix(in srgb, var(--color-button-secondary), white 45%) 49%, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), white 40%) 100%);\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 8%) 0, var(--color-input) 5px);\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 6px;\n}\n"
  }
}