{ "id": "v1-fa-5753", "long_id": "v1.frutiger-aero.shop.s05.p07.t05.u03", "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-5753", "preview_url": "https://chrono.skin/s/v1-fa-5753/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- Three families, system and open faces only: `--font-body` is \"Trebuchet MS\", \"Lucida Sans Unicode\", \"DejaVu Sans\"; `--font-heading` is \"Century Gothic\", \"URW Gothic\", Futura, \"Trebuchet MS\", a geometric sans standing in for the commercial display faces shops of the time used on their banners; `--font-ui` is Arial, Helvetica, \"Liberation Sans\". `--font-mono` (\"Lucida Console\") is for inline code.\n- `--text-base` 12px at `--line-body` 1.4. `--text-small` 11px for meta lines, hints, counts, the footer. `--text-ui` 12px bold for buttons, tabs, labels and table heads (`--weight-ui` 700).\n- Headings are regular weight (`--weight-heading`, `--weight-display` 400): `--text-display` 36px the banner title and the large price, `--text-h1` 24px page titles and the brand name, `--text-h2` 18px section titles, prices, promise figures, `--text-h3` 13px (bold) product names, navigation, list titles. `--text-large` 14px (bold) panel titles, form legends, the banner lead and large buttons. Nothing is uppercased or tracked.\n- Links are not underlined at rest (`--link-decoration` none) and underline on hover; titles are bold (`.ds-link--title`).\n- `--color-page` #f28c28 with `--fill-page`: a sunrise, deep red at the top with a magenta glow at the left, orange behind the header, a white sun low in the middle, peach below.\n- `--color-bar` #c2185b with `--fill-bar` (magenta glass, lighter above, with two diagonal streaks of light near its left end) and white `--color-bar-text` under `--shadow-text`: the category bar, sidebar titles, the dark gadget body.\n- `--color-bar-alt` #ffd9a8 with `--fill-bar-alt` (peach glass with the same streaks): the promise strip, panel titles, table heads, score tiles, the footer strip, the pale gadget body.\n- `--color-inverse` #4a0f2e with `--fill-inverse` (plum, almost black at the top, with a pink glow and a white core rising from the foot): the offer banner only, with `--color-inverse-text` #fff3e0.\n- `--color-heading` #8a1244 page, section and dialog titles and the brand name; `--color-heading-alt` #d95a00 (orange) prices, form legends, prose h2, breadcrumb and list marks. `--color-text` #3a2a2a, `--color-text-muted` #7a6260.\n- `--color-link` #b3124f, `--color-link-quiet` #8a4a1a, visited #7a4a9a, hover #e86a00, active #8a1244.\n- `--color-button` #f57c00 with `--fill-button` (orange candy: a dome of light at the top, a glow at the foot): the primary button, the brand tile, the round add button, the current step and page number. `--color-button-secondary` #f3e0cf with `--fill-button-secondary` (cream candy): every other button, tabs at rest, the steps bar.\n- `--color-accent` #e0407f with `--fill-accent` (pink gel): labels, the round signs of the promises, the current tab and the rule the tabs stand on, meter bars. `--color-accent-alt` #7b3fb5 (violet): the New label and gadget screens.\n- `--color-fill-1` to `--color-fill-4` (apricot, rose, sun, lilac): the upper end of each product plate's fade and the product stage; never text or borders.\n- Borders are 1px solid, 2px (`--border-width-strong`) for the sheet's rim, the rule under section titles and tabs, the total line and the dialog's rim: `--color-border` #f2c9a0 for boxes, `--color-border-muted` #f8e3cf for rules inside a box, `--color-border-strong` #c96a3a for a hovered basket, `--color-input-border` #e0a878 for fields.\n- `--color-notice` #fff6c9 for notices; `--color-danger` #c21f1f on `--color-danger-surface` #fde8e4 for errors; `--color-success` #5a9a1a and `--color-warning` #f2b000 fill the stock labels and signs.\n- Surface: `--radius-control` 6px, `--radius-panel` 12px, `--radius-pill` 12px, `--radius-page` 18px. `--shadow-panel` is a clear inner rim plus a soft 12px plum shadow; `--shadow-control` the same rim on a button; a hovered button gains a halo in `--color-focus`; `--shadow-dialog` is the 28px shadow of a floating sheet. `--fill-panel` is translucent and `--backdrop-blur` 8px blurs what lies behind sheet, panels and tiles. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills, dividers on the bars, the sheet (86% `--color-canvas`) and its rim, the lights on the banner (`--color-inverse-text` with transparent), and every part of a `.ds-device` (screens from `--color-accent-alt` and `--color-inverse`, wheels and lenses from the surface colours).\n- The era's conventions for which text sits on which fill, kept by every layout and every token set of the era:\n - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours sit on `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong`, `--fill-panel` and the four `--color-fill-*` tints. A palette keeps canvas, surfaces and fills on one side (all light or all dark) so that these stay readable on every one of them.\n - `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`. Links on a bar or band take that bar's text colour, never `--color-link`.\n - `--color-button-text` on `--fill-button` and on any fill made from `--color-danger`, `--color-success` or `--color-accent-alt`; it is always the light colour and also supplies the gloss on those fills (mixed in with `color-mix()`).\n - `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-button-secondary-text` on `--fill-button-secondary`; `--color-notice-text` on `--color-notice`; `--color-danger` and `--color-success` as text on the surfaces and on their own pale mixes.\n - Nothing but decoration sits on `--fill-page`: no text is set directly on the page.\n - `--color-focus` is the glow colour: the focus ring, the halo of a focused field and of a hovered button. `--color-shadow` tints every shadow and darkens the outline of every glossy fill (the fill's colour mixed with `--color-shadow`).\n - A `--fill-*` token may end in a plain colour layer, so it is always the last layer of a `background`.\n\n## Components\n\n- `.ds-page`: on ``. 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 `` 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 <= 60`: violets and lavenders, aqua, orchid, teal, orange, green, amber and red for status.\n- `font-size <= 36px`: the banner title and the large price are the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 4`: body, heading and control faces, a monospace only for inline code.\n- `line-height <= 1.5`: body text is 12px on about 17px.\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 <= 9px`: corners are 3, 5 or 6px; only dots, round buttons and pills are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 12px`: shadows are short; the dialog's 12px is the deepest.\n- `gradient-fills <= 26%`: gloss belongs to the strips, tabs, buttons, pills and tiles; 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": "\n\n\n\nchronoskin: Frutiger Aero gadget shop specimen\n\n\n\n\n
\n
\n\n
\n
\n chronoskin\n
\n \n \n
\n \n \n Your basket 44 gadgets, 305.00\n \n
\n
\n \n

Free delivery over 50.00

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

Gadget of the week

\n

A thousand songs in a shirt pocket

\n

The Pebble 8 GB player in five colours, with a click wheel, a bright screen and 24 hours of music on one charge.

\n

79.00 99.00

\n

\n Add to basket\n See the details\n

\n
\n
\n \n \n \n
\n
\n
\n\n
    \n
  • 24 hoursfrom order to your door
    • \n
  • 30 daysto send anything back
    • \n
  • 2 yearsguarantee on every gadget
    • \n
  • 4.7 of 5from 9,310 buyers
    • \n
\n\n
\n

New this week See all 38 music players

\n
\n
\n \n Offer\n

Pebble 8 GB

\n

Click wheel, 24 hours of music

\n

79.0099.00

\n
\n
\n \n New\n

Slate touch phone

\n

3.2 inch screen, 5 megapixel camera

\n

189.00

\n
\n
\n \n

Finch pocket camera

\n

10 megapixels, 4 times zoom

\n

129.00

\n
\n
\n \n New\n

Hearth picture frame

\n

8 inch, plays from a memory card

\n

64.00

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

What buyers say

\n
    \n
  • \n 4.5of 5\n
    \n

    Small enough to forget it is there

    \n

    The wheel takes a day to get used to. After that I stopped carrying anything else on the train.

    \n

    Ilse Varkonyi on the Pebble 8 GB, 14 March

    \n
    \n
    • \n
  • \n 5.0of 5\n
    \n

    Arrived the next morning, charged

    \n

    Ordered at four in the afternoon and it was on the mat before breakfast.

    \n

    Bram Oyelaran on the Finch pocket camera, 11 March

    \n
    \n
    • \n
  • \n 3.5of 5\n
    \n

    Good frame, short power lead

    \n

    The picture is bright and sharp. Plan for a socket within a metre of the shelf.

    \n

    Tilde Marchetti on the Hearth picture frame, 6 March

    \n
    \n
    • \n
\n
\n \n
\n
\n\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. All gadgets
    4. \n
  4. »
    5. \n
  5. Music players
    6. \n
\n
\n
\n

Music players

\n

38 players from 2 GB to 120 GB, every one in stock unless marked.

\n
\n
Open the basket
\n
\n
\n \n
\n \n
\n
\n \n Offer\n

Pebble 8 GB

\n

Click wheel, 24 hours of music

\n

79.0099.00

\n
\n
\n \n In stock\n

Pebble 16 GB

\n

The same player with room for 4,000 songs

\n

109.00

\n
\n
\n \n 3 left\n

Tide video player

\n

3 inch screen, plays films for 6 hours

\n

139.00

\n
\n
\n \n In stock\n

Flint 4 GB

\n

A clip, a wheel and nothing else

\n

39.00

\n
\n
\n \n New\n

Tide touch 32 GB

\n

Touch screen, wireless, 32 GB

\n

219.00

\n
\n
\n \n Sold out\n

Pebble 8 GB, silver

\n

Last of the first series

\n

69.00

\n
\n
\n
\n \n

\n Offer\n 38\n New\n In stock\n 3 left\n Sold out\n

\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Music players
    4. \n
  4. »
    5. \n
  5. Pebble 8 GB
    6. \n
\n
\n
\n

Pebble 8 GB music player

\n

2,000 songs, a click wheel and a day of music on one charge.

\n
\n
In stock214 reviews, 4.5 of 5
\n
\n
\n
\n \n \n \n \n
\n
\n
\n

Buy the Pebble 8 GB

\n
\n

79.0099.00

\n
    \n
  • Colour
    • \n
  • DeliveryTomorrow, free
    • \n
  • Guarantee2 years
    • \n
  • Offer endsSunday at midnight
    • \n
\n

Add to basketCompare players

\n
\n
\n
\n
\n
\n
Pebble 8 GB, front
Pebble 8 GB, side
In the box
\n
\n
\n \n
\n
\n
\n

All your music, none of the weight

\n

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.

\n

What it plays

\n

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.

\n
    \n
  • Plays for 24 hours on a charge of two hours
    • \n
  • Reads files ending in .mp3, .ogg and .wav
    • \n
  • Screen of 1.8 inches with album covers
    • \n
\n

In the box

\n

The player, earphones, a short cable for charging and a printed guide of eight pages.

\n
\n
\n

People also looked at

\n

\n Pebble 16 GB\n Flint 4 GB\n Docks and speakers\n All music players\n

\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Your basket
    4. \n
\n
\n
\n

Your basket

\n

Four gadgets. Order before 4 in the afternoon and they leave today.

\n
\n
Keep shoppingGo to checkout
\n
\n
  1. 1 Basket
  2. 2 Your details
  3. 3 Payment
  4. 4 Done
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
GadgetStockEachHow manyTotal
Pebble 8 GBOrange, offer priceIn stock79.0079.00Remove
Finch pocket cameraSilver, with a 2 GB cardIn stock129.00129.00Remove
Hearth picture frame8 inch, black3 left64.0064.00Remove
Soft case for the PebbleGrey feltIn stock9.0027.00Remove
\n
\n

Saved for later

\n
\n \n

Nothing saved for later

\n

Move a gadget here if you are not ready to buy it. We keep it for 90 days.

\n Look around the shop\n
\n
\n
\n \n
\n
\n
\n

Take the picture frame out?

\n

Only three are left at this price. You can move it to Saved for later instead and decide another day.

\n
\n Remove it\n Save for later\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Your basket
    4. \n
  4. »
    5. \n
  5. Checkout
    6. \n
\n
\n
\n

Checkout

\n

Tell us where the parcel goes. You pay on the next page.

\n
\n
Back to the basket
\n
\n
  1. 1 Basket
  2. 2 Your details
  3. 3 Payment
  4. 4 Done
\n
\n
\n
\n
i

Ordering as a guest. You can make an account after paying and keep this address for next time.

\n
!

One field needs another look. The postcode does not match the town.

\n
\n
\n
\n

Deliver to

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

A postcode here has five characters, for example PA4 2QS.

\n
\n

Delivery

\n
\n \n \n

Order before 4 in the afternoon for next day.

\n
\n
\n Extras\n \n
\n
\n \n \n
\n
\n
\n \n Back\n \n \n
\n
\n
\n \n
\n
\n
\n\n
\n\n\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.shop.s05.p07.t05.u03\",\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-5753\",\n \"short\": \"v1-fa-5753\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #5a3fb0;\n --color-canvas: #fbfaff;\n --color-surface: #ffffff;\n --color-surface-alt: #f2eefc;\n --color-surface-strong: #dfd6f5;\n --color-bar: #5a3d9e;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ddd3f6;\n --color-bar-alt-text: #3a2578;\n --color-inverse: #2b1a66;\n --color-inverse-text: #f4efff;\n --color-text: #2f2b3a;\n --color-text-muted: #6a6578;\n --color-heading: #40288a;\n --color-heading-alt: #1585a6;\n --color-link: #5a2fc2;\n --color-link-quiet: #5f5a80;\n --color-link-visited: #8a4a8f;\n --color-link-hover: #1a9fc8;\n --color-link-active: #c2338f;\n --color-border: #c9bdea;\n --color-border-strong: #7a5fc0;\n --color-border-muted: #e4dcf5;\n --color-accent: #b455d8;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ff8a1f;\n --color-fill-1: #e4dcfa;\n --color-fill-2: #d8eef7;\n --color-fill-3: #f7dcf2;\n --color-fill-4: #fdf0c8;\n --color-button: #1392c4;\n --color-button-text: #ffffff;\n --color-button-hover-text: #f2fcff;\n --color-button-secondary: #e2dcf0;\n --color-button-secondary-text: #3a2578;\n --color-input: #ffffff;\n --color-input-text: #1f1b2a;\n --color-input-border: #a897d8;\n --color-disabled: #ebe8f0;\n --color-disabled-text: #a09bb0;\n --color-danger: #c7283a;\n --color-danger-surface: #fde8ea;\n --color-success: #3a9c3a;\n --color-warning: #eda400;\n --color-notice: #e8f6fb;\n --color-notice-text: #0e4f66;\n --color-focus: #c79bff;\n --color-shadow: #24124f;\n --color-overlay: rgba(36, 18, 79, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", \"Lucida Sans Unicode\", \"DejaVu Sans\", sans-serif;\n --font-heading: \"Century Gothic\", \"URW Gothic\", Futura, \"Trebuchet MS\", sans-serif;\n --font-ui: Arial, Helvetica, \"Liberation Sans\", sans-serif;\n --font-mono: \"Lucida Console\", Monaco, monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 14px;\n --text-display: 36px;\n --text-h1: 24px;\n --text-h2: 18px;\n --text-h3: 13px;\n --line-body: 1.4;\n --line-heading: 1.15;\n --line-display: 1.08;\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: 3px;\n --radius-panel: 5px;\n --radius-pill: 9px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-shadow) 20%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 1px 1px color-mix(in srgb, var(--color-shadow) 25%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), 0 1px 3px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control-pressed: inset 0 1px 3px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-dialog: 0 3px 12px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-text: 0 1px 0 color-mix(in srgb, white 35%, transparent);\n --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, white 20%, transparent) 0, color-mix(in srgb, white 20%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 3%, transparent) 2px, color-mix(in srgb, black 3%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-page), white 75%) 0, var(--color-page) 280px) 0 0 / 100% 280px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(90deg, color-mix(in srgb, white 22%, transparent) 0, color-mix(in srgb, white 22%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 4%, transparent) 2px, color-mix(in srgb, black 4%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 75%) 0, color-mix(in srgb, var(--color-bar), white 18%) 45%, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), white 42%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 65%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(circle at 12% 130%, color-mix(in srgb, white 32%, transparent) 0, transparent 46%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 30%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 16%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 70%, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 12%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 54%) 0, color-mix(in srgb, var(--color-button), white 24%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, color-mix(in srgb, var(--color-button-secondary), white 20%) 50%, color-mix(in srgb, var(--color-button-secondary), black 6%) 50%, color-mix(in srgb, var(--color-button-secondary), white 35%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }