{ "id": "v1-my-2622", "long_id": "v1.material-you.shop.s02.p06.t02.u02", "name": "Tonal lighting store, 2024", "era": { "slug": "material-you", "code": "my", "name": "Material You", "years": [ 2021, 2026 ], "description": "The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A product and store page in the tonal language of 2021 to 2026, here in its dark scheme: near-black green surfaces, a pale green primary on filled pill buttons, and a blue tertiary for contrast. The page is a stack of very round blocks: a large tonal hero card, a row of tall product tiles in container tones, feature cards on tinted surfaces and an inverted band, with no shadows at all. Headings are a geometric sans (Outfit) at medium weight up to 64px, over a humanist body face at 15px.", "url": "https://chrono.skin/s/v1-my-2622", "preview_url": "https://chrono.skin/s/v1-my-2622/specimen.html", "files": { "STYLE.md": "# Tonal lighting store, 2024\n\n## Summary\n\nA product and store page in the tonal language of 2021 to 2026, here in its dark scheme: near-black green surfaces, a pale green primary on filled pill buttons, and a blue tertiary for contrast. The page is a stack of very round blocks: a large tonal hero card, a row of tall product tiles in container tones, feature cards on tinted surfaces and an inverted band, with no shadows at all. Headings are a geometric sans (Outfit) at medium weight up to 64px, over a humanist body face at 15px.\n\n## Layout\n\n- Designed at 1440px and not fluid: `.ds-nav__inner`, `.ds-main` and `.ds-footer__inner` are capped at `--size-page` 1240px and centred; the bar and footer tones run the full window.\n- `.ds-nav` is one bar (`--size-bar` 72px) on `--fill-bar`: `.ds-brand` at the left, the links centred, each a pill, and `.ds-nav__tools` (search and the bag with its count) at the right.\n- Home view: `.ds-hero` (a two-column card in `--fill-accent`, copy at 6 parts and the product drawn on a `--color-canvas` disc at 5), the `.ds-strip` of three promises `--space-4` under it, then `.ds-section` blocks `--space-8` apart with centred titles: the `.ds-grid` of four product tiles with `.ds-stats` under it, the `.ds-features` (one wide tonal card at 7 parts beside a `.ds-stack` of two at 5), and the `.ds-band` on `--fill-inverse`. `.ds-footer` has four columns.\n- Spacing: `--space-1` 4px, `--space-2` 8px (between buttons), `--space-3` 12px, `--space-4` 16px (between tiles and cards, sheet to sheet), `--space-5` 24px (card padding, page gutter), `--space-6` 32px (sheet and feature card padding, hero column gap), `--space-7` 48px (band padding, footer), `--space-8` 72px (hero padding, between sections).\n- Heights: buttons and navigation pills `--size-control` 44px; large buttons and fields `--size-field` 56px; list rows `--size-row` 64px; table rows `--size-row-dense` 52px; product tiles at least `--size-tile` 340px with a `--size-glyph` 104px drawing. `--size-art` 340px caps the hero disc, `--size-measure` 640px running text, `--size-dialog` is 380px.\n- Inner pages (every view but the home view) have no hero. The bar stays; the view is one or two `.ds-sheet` blocks (`--color-canvas`, `--radius-page`, `--space-6` padding, `--space-4` apart) on the page. A sheet opens with `.ds-breadcrumb` where the view is below another, then `.ds-page-header`, then its content: `.ds-product` (picture at 5 parts, tabs and text at 6); `.ds-plans` (three plan cards); or `.ds-columns` with the form at 3 parts and a `.ds-stack` at 2.\n- Views: `store` (home). `product` is one lamp: breadcrumb, page header, picture with thumbnails, tabs, stock badges and the description, then a second sheet with the price table and the reviews list with pagination. `plans` is three care plans, a notice and questions. `order` is the delivery form with notices, beside the summary, the remove dialog and a help block. `bag` is shown empty beside the saved items.\n- Below 1000px the hero, features, product and columns become one column, the grid and footer two, the plans one, and the bar (`.ds-nav__inner`) wraps to a brand row and a full-width `.ds-nav__links` row of centred `.ds-nav__link` items that scrolls sideways if it must, the current one keeping `is-current`. Below 640px the links of that second row are spread across it; in `.ds-nav__tools` a menu shows only its icon (`.ds-menu__label` is hidden) and its list opens as a full row between the bar's side margins under the button; menu lists with `--end-wide` hang from the left and tooltips with `--start` open under their button; the strip stacks, tiles shrink and keep two columns, stats, form rows and the footer go to one column, and `.ds-table__extra` cells are hidden.\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: `--font-heading` is Outfit (then Lexend, Poppins, Avenir Next), a geometric sans standing in for the proprietary brand faces of the references; `--font-body` and `--font-ui` are DM Sans, then Noto Sans. `--font-mono` is JetBrains Mono.\n- Sizes: `--text-base` 15px at `--line-body` 1.6; `--text-small` 13px; `--text-ui` 15px; `--text-large` 20px (leads); `--text-display` 64px at `--line-display` 1.05 with `--display-tracking` -1px; `--text-h1` 40px, `--text-h2` 30px, `--text-h3` 20px at `--line-heading` 1.2 with `--heading-tracking` -0.2px.\n- Weights: headings and display 500; `--weight-ui` and `--weight-bold` 600. `--ui-transform` is `none`.\n- Links in running text are underlined (`--link-decoration` `underline`); navigation and titles are not.\n- The era's rule for text on fills, which every layout and every token set of this era keeps: on `--fill-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and on all four `--color-fill-*` blocks, text is `--color-text`, titles `--color-heading` and captions `--color-text-muted`; the fills are container tones, so the ordinary text colours stay readable on them in a light and in a dark scheme. On `--fill-bar` text is `--color-bar-text`; on `--fill-bar-alt` it is `--color-bar-alt-text`; on `--fill-inverse` it is `--color-inverse-text`; on `--fill-accent` it is `--color-accent-text`; on `--fill-button` it is `--color-button-text`; on `--fill-button-secondary` it is `--color-button-secondary-text`; on `--color-notice` it is `--color-notice-text`; on `--color-danger-surface` the body is `--color-text` and the title and icon are `--color-danger`. A solid block of `--color-danger`, `--color-success`, `--color-warning` or `--color-accent-alt` carries `--color-canvas` as its text colour, because the status colours are dark in a light scheme and pale in a dark one, always opposite to the canvas.\n- Tonal roles: `--color-page` is the surface container behind everything; the bar, rail or drawer and the table head are on `--fill-bar`, which the surface part sets to a neighbouring container tone, so each surface set shows there; `--color-canvas` is the plain surface of the rounded content sheet; `--color-surface` (container low) fills cards and list cards, `--color-surface-alt` (container high) stat tiles and dialogs, `--color-surface-strong` (container highest) tonal cards, inline code and hovered rows. `--color-accent` is the primary container: hero card, floating action button, default badge, the disc of an empty state. `--color-button-secondary` is the secondary container: tonal buttons and every pill indicator behind a current navigation item, chip or tab. `--color-accent-alt` is the tertiary colour, used solid for \"new\" markers. `--color-fill-1` to `--color-fill-4` are the primary, secondary and tertiary containers and the highest surface container.\n- `--color-link` is the primary colour: links, outlined and text button labels, the current tab, list markers. Visited links take the tertiary `--color-link-visited`. `--color-border` (outline variant) draws card outlines, chips and dividers, `--color-border-strong` (outline) the outlined button and the off switch, `--color-border-muted` the dividers inside lists and tables. `--color-input-border` outlines fields; `--color-focus` is the focus line.\n- Status badges are tonal: `--color-success`, `--color-warning` or `--color-danger` mixed at 22% into `--color-canvas`, with `--color-text` and a dot in the full status colour.\n- Shape: every button, badge, search bar, navigation indicator and pagination link uses `--radius-pill`; fields and chips use `--radius-control`; cards, notices, tables and the floating action button use `--radius-panel`; the content sheet, hero, grid tiles, dialogs and empty states use `--radius-page`.\n- Elevation is shown by tone, not shadow. `--shadow-panel` and `--shadow-control` sit on cards and buttons and are `none` or one faint layer; `--shadow-control-hover` is on hovered buttons and on the search bar, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs and the floating action button. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\n- One-off values built with `color-mix()` because the vocabulary has no token: an 8% or 10% wash of the label colour for hovered tonal, outlined, text and icon buttons, chips and navigation items; the 22% status tints; the danger colour mixed with 12% of `--color-text` for a hovered danger button.\n\n## Components\n\n- `.ds-page` on ``: the page on `--fill-page`.\n- `.ds-nav`: the top bar on `--fill-bar`. `.ds-nav__inner` centres it; `.ds-nav__links` holds pill-shaped `.ds-nav__link` items, the current one filled with `--fill-button-secondary`; `.ds-nav__tools` holds icon buttons and `.ds-nav__bag`, the bag link with a `.ds-badge--count`.\n- `.ds-main`: the centred column of a view. `.ds-sheet`: a rounded canvas block that holds an inner view. `.ds-section__head--center` centres a section title over `.ds-section__lead`.\n- `.ds-hero`: the large tonal card in `--fill-accent`. `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and large buttons; `.ds-hero__art` is the canvas disc with the product drawing and `.ds-hero__tag`, a small tonal label.\n- `.ds-strip`: a pill on `--fill-bar-alt` with `.ds-strip__item` promises.\n- `.ds-grid`: a row of four tall tiles. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a badge, `.ds-grid__art`, `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__price` with a button, which sits on `--color-canvas` here so that it shows on every fill.\n- `.ds-stat` here is outlined and centred, with `--radius-page` corners.\n- `.ds-features`: unequal tinted cards; `.ds-feature` is a panel with a `.ds-feature__icon` tile, `--wide` the large one. `.ds-band`: the inverted block with `.ds-band__title`, `.ds-band__text` and a `.ds-button--on-inverse`.\n- `.ds-tabs`: here a segmented row: a `--color-surface-alt` pill holding pill-shaped `.ds-tabs__tab`; `is-current` is on the secondary container.\n- `.ds-product` with `.ds-product__art`, `.ds-product__thumbs` and `.ds-product__thumb` (`--1`, `--3`, `is-current`): the product picture and its thumbnails. `.ds-plans` with `.ds-plan`, `.ds-plan__price` and `.ds-plan__list`: the plan cards. `.ds-summary` with `.ds-summary__row` (`--total`): the order summary.\n- `.ds-sidebar`: an outlined block beside the order form with `.ds-sidebar__title` and a `.ds-sidebar__list` of link-coloured `.ds-sidebar__link` rows with icons.\n- `.ds-footer`: a full-width band on `--fill-bar` with a top rule; `.ds-footer__inner` has four columns with `.ds-footer__title`, `.ds-footer__list`, `.ds-footer__link` and a `.ds-footer__legal` line.\n- `.ds-brand`: the site's mark and name, one link. `.ds-brand__mark` is a round tile dressed like the filled button (`--fill-button`, `--color-button-text`, `--radius-pill`, `--shadow-control`, a transparent `--border-width` border) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: the head of an inner view, unboxed on the sheet. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text` (one muted line); `.ds-page-header__actions` sits at the right with one filled button at most.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the larger opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured, `--more` carries a chevron. `.ds-links` lays several out in a row.\n- `.ds-button`: the filled pill button. `--secondary` is the tonal button, `--outlined` has a `--color-border-strong` outline and a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` it is a danger-coloured text button for dialogs), `--large` is the tall form for a hero or an order form, `--icon` is a round icon button, `--fab` is the floating action button, a rounded square in `--fill-accent`, and `--on-inverse` is the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. Never more than one filled button in a group.\n- `.ds-icon`: stroked inline SVG in the current text colour; `--small` inside buttons, chips and tabs.\n- `.ds-chip`: an outlined 32px chip; `is-current` fills it with the secondary container. Group with `.ds-chips`.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (56px, outlined, `--fill-input`; `--area` for a textarea; wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields side by side. `is-focus` shows the focus ring, `is-invalid` on the field plus `.ds-form__error` shows an error, `.ds-form__hint` is help text. `.ds-form__check` with `.ds-form__checkbox` is a checkbox row; `.ds-form__check--between` with `.ds-form__check-text` and a `.ds-switch` is a setting row. `.ds-form__actions` holds the buttons.\n- `.ds-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger and in `--color-button-text` on a `--fill-button` track when on.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; rows are divided by `--color-border-muted`; `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without; `tr.is-current` is tinted.\n- `.ds-list`: rows of `.ds-list__item`, each with an optional `.ds-list__icon` disc (`--1`, `--3`, `--4` pick the fill), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` or a button on the right. `--cards` turns every row into its own filled card, `--space-2` apart, and `is-current` puts the selected one on the secondary container.\n- `.ds-panel`: a filled card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__head` and `.ds-panel__actions`. `--outlined` is the outlined card on the canvas, `--tonal` the stronger tint, `--accent` the primary container. A card is filled or outlined, never both.\n- `.ds-stat`: one summary figure, a tile with `.ds-stat__value` and `.ds-stat__label`. Three or more sit in a `.ds-stats` row.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, and `--success`, `--warning`, `--danger` are the tonal status labels with a dot. Group with `.ds-badges`.\n- `.ds-notice`: a tonal card with a leading icon, `.ds-notice__body` and `.ds-notice__title`; `--error` is on `--color-danger-surface` with a danger-coloured title. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is filled like the primary button, `is-disabled` is grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: a muted trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a `--color-surface-alt` sheet with `--radius-page` corners, an optional `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned text buttons in `.ds-dialog__actions`. It sits on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark` (a rounded square in `--fill-accent` holding an icon), `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-search`: the search bar, one pill on `--fill-input` with an icon and `.ds-search__text`. `.ds-avatar`: a disc with initials. `.ds-snackbar`: a short message on `--fill-inverse` with `.ds-snackbar__action`. `.ds-shapes` with `.ds-shape--1` to `--4`: the circle, rounded square and pill drawn as artwork.\n- `.ds-section` with `.ds-section__head`, `.ds-section__title` and `.ds-section__label` titles a block; `.ds-columns` (`--even`) puts two blocks side by side and `.ds-stack` piles cards in one of them.\n- `.ds-menu`: a `
` drop-down. `.ds-menu__button` is its tonal pill (`--dense` at chip height; `.ds-menu__label` is the text); `.ds-menu__list` is a `--color-surface-alt` sheet of `.ds-menu__item` rows, the chosen one `is-current`. `.ds-menu--end` hangs the sheet from the right edge, `--end-wide` only above a phone. Use it for a choice of one among a few: sort order, version, speed.\n- `.ds-tooltip`: wraps an icon button; `.ds-tooltip__text` is a small label on `--fill-inverse` shown under it on hover or focus (`--start` hangs it from the left on a phone). Use it to name a button that has no text.\n- `.ds-accordion`: a group of `
`; each `.ds-accordion__item` is a tonal row with `.ds-accordion__summary` (a title, a `.ds-accordion__hint` line, a chevron) and `.ds-accordion__body`. Use it for questions and for details that most readers skip.\n- `.ds-progress`: a thick track in two parts with a gap, `.ds-progress__bar` in `--fill-button` and `.ds-progress__rest` with a stop dot at its end; `--25`, `--40`, `--60`, `--75` set the share. `.ds-progress__label` is the line above it and `.ds-progress-group` stacks several. Use it for a known share of a whole, never for waiting.\n- `.ds-avatar`: a disc with a person's initials; add it to a list's leading disc when the row is about a person.\n- `.ds-switch`: also used in the order form, in a `.ds-form__check--between` row, for a setting that takes effect at once.\n- `.ds-carousel`: `.ds-carousel__track` holds `.ds-carousel__slide` items, the `is-current` one wide on `--color-surface-alt` with `.ds-carousel__head`, `.ds-carousel__foot`, `.ds-carousel__title` and `.ds-carousel__text`, the others narrow tonal ends (`--3`, `--4`) with an icon and a `.ds-carousel__name`; `.ds-carousel__nav` holds `.ds-carousel__dots` and `.ds-carousel__arrows`. Use one on the home view for a few rooms or collections.\n\n## Never\n\n- `row-gap <= 8px`: rows touch or are 8px apart.\n- `block-gap <= 72px`: sections are at most 72px apart.\n- `content-width <= 86%`: content stops at 1240px of a 1440px window.\n- `uppercase-text = 0%`: labels are sentence case.\n- `font-weight <= 600`: semibold is the heaviest weight.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 13px`: the smallest labels are 13px.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-families <= 3`: a geometric heading face, a body face and the mono.\n- `line-height <= 1.7`: body text is 15px on a 24px line.\n- `underlined-links <= 25%`: only links in running text are underlined.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `box-shadow-blur <= 0px`: nothing casts a soft shadow; elevation is a lighter tone.\n- `border-width <= 3px`: outlines are 1px; thumbnails, the checkbox and the switch track are 2 to 3px.\n- `border-radius <= 24px`: containers stop at 24px; anything rounder is a full pill.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Anything that holds content is a `.ds-panel`: filled with a container tone, or outlined on the canvas, with `--radius-panel`. Anything pressed is a `.ds-button` variant and stays a full pill. A selected state is the secondary container (`--fill-button-secondary` with `--color-button-secondary-text`) on a pill or on the item itself. Raise something by moving it to the next surface tone, not by adding a shadow. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and follow the rule for text on fills in \"Typography and colour roles\". Never add a gradient, an uppercase label, a square corner on a container or a second filled button beside the first.\n", "components.css": ":root {\n --size-menu: 248px;\n --size-track: 16px;\n --size-slide: 296px;\n --size-page: 1240px;\n --size-bar: 72px;\n --size-measure: 640px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 40px;\n --size-control: 44px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-chip: 32px;\n --size-badge: 24px;\n --size-check: 18px;\n --size-switch: 52px;\n --size-thumb: 16px;\n --size-thumb-on: 24px;\n --size-row: 64px;\n --size-row-dense: 52px;\n --size-area: 112px;\n --size-dialog: 380px;\n --size-empty: 112px;\n --size-art: 340px;\n --size-glyph: 104px;\n --size-tile: 340px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 72px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* icons: stroked inline SVG in the current text colour */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-icon--small {\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n}\n\n/* brand: a round tile dressed like the filled button, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n line-height: var(--line-heading);\n}\n\n/* section titles on the canvas */\n.ds-section {\n margin-top: var(--space-7);\n}\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-section__label {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-columns--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-stack {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n}\n\n/* page header of an inner view */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-page-header__body {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: var(--space-2);\n}\n\n/* prose */\n.ds-prose {\n max-width: var(--size-measure);\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-3);\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 color: var(--color-heading);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p,\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-link);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\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 padding: 0;\n list-style: none;\n}\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-link:visited, .ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover, .ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active, .ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible, .ds-link.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n\n/* buttons: every button is a full pill */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover, .ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active, .ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible, .ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover, .ds-button--secondary.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n color: var(--color-button-secondary-text);\n}\n.ds-button--outlined {\n background: transparent;\n color: var(--color-link);\n border-color: var(--color-border-strong);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--text {\n padding: 0 var(--space-3);\n background: transparent;\n color: var(--color-link);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--outlined:hover, .ds-button--outlined.is-hover,\n.ds-button--text:hover, .ds-button--text.is-hover {\n background: color-mix(in srgb, var(--color-link) 10%, transparent);\n color: var(--color-link);\n box-shadow: none;\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-button--danger:hover, .ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));\n color: var(--color-canvas);\n}\n.ds-button--text.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n}\n.ds-button--text.ds-button--danger:hover, .ds-button--text.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 10%, transparent);\n color: var(--color-danger);\n}\n.ds-button--on-inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--on-inverse:hover, .ds-button--on-inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 88%, var(--color-inverse));\n color: var(--color-inverse);\n}\n.ds-button--large {\n min-height: var(--size-field);\n padding: 0 var(--space-6);\n font-size: var(--text-base);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--icon:hover, .ds-button--icon.is-hover {\n background: color-mix(in srgb, currentColor 10%, transparent);\n color: inherit;\n box-shadow: none;\n}\n.ds-button--fab:hover, .ds-button--fab.is-hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, var(--color-accent));\n color: var(--color-accent-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button:disabled, .ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n pointer-events: none;\n}\n\n/* chips and badges */\n.ds-chips,\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n background: transparent;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover, .ds-chip.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-chip.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: transparent;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n min-height: var(--size-badge);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n white-space: nowrap;\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-canvas);\n}\n.ds-badge--count {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n}\n.ds-badge--success { background: color-mix(in srgb, var(--color-success) 22%, var(--color-canvas)); }\n.ds-badge--warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas)); }\n.ds-badge--danger { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas)); }\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: currentColor;\n}\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* avatar: a tonal disc with initials */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n\n/* search: one pill */\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n flex: 1;\n min-width: 0;\n min-height: var(--size-field);\n padding: 0 var(--space-5);\n background: var(--fill-input);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-hover);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-decoration: none;\n}\n.ds-search__text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* form: fields with a label above */\n.ds-form {\n display: grid;\n gap: var(--space-5);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-form__control {\n display: block;\n width: 100%;\n min-height: var(--size-field);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n appearance: none;\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: var(--size-area);\n padding: var(--space-3) var(--space-4);\n resize: vertical;\n}\n.ds-form__control:focus, .ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width) * -1);\n border-color: var(--color-focus);\n}\n.ds-form__select {\n position: relative;\n display: block;\n}\n.ds-form__select::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: var(--space-5);\n width: var(--space-2);\n height: var(--space-2);\n border-right: var(--border-width-strong) solid var(--color-input-text);\n border-bottom: var(--border-width-strong) solid var(--color-input-text);\n transform: translateY(-75%) rotate(45deg);\n pointer-events: none;\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: var(--text-small);\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__control {\n border-color: var(--color-danger);\n outline: var(--border-width) solid var(--color-danger);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n color: var(--color-text);\n}\n.ds-form__check--between {\n justify-content: space-between;\n min-height: var(--size-row);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__check-text {\n display: grid;\n}\n.ds-form__check-text small {\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n background: transparent;\n border: var(--border-width-strong) solid var(--color-input-border);\n border-radius: calc(var(--size-check) / 6);\n cursor: pointer;\n}\n.ds-form__checkbox:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-form__checkbox:checked::after {\n content: \"\";\n position: absolute;\n left: 30%;\n top: 5%;\n width: 35%;\n height: 65%;\n border-right: var(--border-width-strong) solid var(--color-button-text);\n border-bottom: var(--border-width-strong) solid var(--color-button-text);\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* switch: the thumb grows when it is on */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: var(--size-chip);\n margin: 0;\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25%;\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-border-strong);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: var(--transition);\n}\n.ds-switch:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-switch:checked::before {\n left: 69%;\n width: var(--size-thumb-on);\n height: var(--size-thumb-on);\n background: var(--color-button-text);\n}\n.ds-switch:checked::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 69%;\n width: calc(var(--size-thumb) * 0.3);\n height: calc(var(--size-thumb) * 0.6);\n border-right: calc(var(--size-thumb) / 8) solid var(--color-button);\n border-bottom: calc(var(--size-thumb) / 8) solid var(--color-button);\n transform: translate(-50%, -60%) rotate(45deg);\n}\n.ds-switch:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n\n/* table: an outlined container, the head in the bar tone */\n.ds-table-wrap {\n overflow-x: auto;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-canvas);\n font-size: var(--text-ui);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n height: var(--size-row-dense);\n padding: var(--space-2) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__name {\n font-family: var(--font-mono);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table a {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:hover {\n color: var(--color-link-hover);\n}\n\n/* list: rows with a leading tonal disc */\n.ds-list {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-list__icon--1 { background: var(--color-fill-1); }\n.ds-list__icon--3 { background: var(--color-fill-3); }\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n.ds-list--cards .ds-list__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n box-shadow: none;\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__title,\n.ds-list--cards .ds-list__item.is-current .ds-list__text,\n.ds-list--cards .ds-list__item.is-current .ds-list__meta {\n color: var(--color-button-secondary-text);\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__icon {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* panel: a filled card; outlined and tonal variants */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel--outlined {\n background: var(--color-canvas);\n border-color: var(--color-border);\n box-shadow: none;\n}\n.ds-panel--tonal {\n background: var(--color-surface-strong);\n box-shadow: none;\n}\n.ds-panel--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: none;\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-panel--accent .ds-panel__title {\n color: var(--color-accent-text);\n}\n.ds-panel__body {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel--accent .ds-panel__body {\n color: var(--color-accent-text);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n margin-bottom: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-2);\n}\n\n/* stats: tonal tiles, one figure each */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\n margin: 0;\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 font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* tabs: primary tabs with a short rounded indicator */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n overflow-x: auto;\n}\n.ds-tabs__tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover, .ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-link);\n}\n.ds-tabs__tab.is-current::after {\n content: \"\";\n position: absolute;\n left: var(--space-4);\n right: var(--space-4);\n bottom: 0;\n height: var(--border-width-strong);\n background: var(--color-link);\n border-radius: var(--border-width-strong) var(--border-width-strong) 0 0;\n}\n\n/* notices: tonal cards with a leading icon */\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n}\n.ds-notice__body {\n margin: 0;\n min-width: 0;\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__title,\n.ds-notice--error .ds-icon {\n color: var(--color-danger);\n}\n\n/* pagination: round links, the current one filled */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover, .ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\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 color: var(--color-text-muted);\n}\n.ds-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-top: var(--border-width) solid currentColor;\n border-right: var(--border-width) solid currentColor;\n transform: rotate(45deg);\n}\n.ds-breadcrumb__link {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* dialog: a tinted sheet with the largest corners, on a scrim */\n.ds-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__icon {\n color: var(--color-link);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-empty__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-empty);\n height: var(--size-empty);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n max-width: 44ch;\n color: var(--color-text-muted);\n}\n\n/* snackbar: the inverted block */\n.ds-snackbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-row-dense);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-size: var(--text-ui);\n}\n.ds-snackbar__action {\n padding: var(--space-2) var(--space-3);\n color: var(--color-inverse-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* shapes: the soft geometric figures used as artwork */\n.ds-shapes {\n position: relative;\n flex: none;\n width: var(--size-art);\n height: var(--size-art);\n}\n.ds-shape--1 {\n inset: 0 40% 40% 0;\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: 50%;\n}\n.ds-hero__copy {\n min-width: 0;\n}\n\n/* shell: a top bar, then centred blocks stacked with wide gaps */\n.ds-page {\n min-height: 100vh;\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 overflow-x: clip;\n}\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n max-width: var(--size-page);\n min-height: var(--size-bar);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: inline-flex;\n align-items: center;\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover, .ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#store\"],\n.ds-page:has(#store:target) .ds-nav__link[href=\"#store\"],\n.ds-page:has(#product:target) .ds-nav__link[href=\"#product\"],\n.ds-page:has(#plans:target) .ds-nav__link[href=\"#plans\"],\n.ds-page:has(#order:target) .ds-nav__link[href=\"#order\"],\n.ds-page:has(#bag:target) .ds-nav__link[href=\"#bag\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n.ds-nav__bag {\n gap: var(--space-2);\n padding: 0 var(--space-3);\n}\n.ds-main {\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-3) var(--space-5) var(--space-8);\n}\n.ds-sheet {\n padding: var(--space-6);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-sheet + .ds-sheet {\n margin-top: var(--space-4);\n}\n.ds-main > .ds-section {\n margin-top: var(--space-8);\n}\n.ds-section__head--center {\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n margin-bottom: var(--space-6);\n text-align: center;\n}\n.ds-section__head--center .ds-section__title {\n font-size: var(--text-h1);\n}\n.ds-section__lead {\n max-width: 56ch;\n margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n\n/* hero: one large tonal card, the product drawn on a disc */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-8);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-hero__kicker {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__title {\n margin: 0;\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 max-width: 44ch;\n margin: var(--space-4) 0 var(--space-6);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero .ds-button--outlined {\n color: var(--color-accent-text);\n border-color: var(--color-accent-text);\n}\n.ds-hero .ds-button--outlined:hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, transparent);\n}\n.ds-hero__art {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n max-width: var(--size-art);\n aspect-ratio: 1;\n margin: 0 auto;\n background: var(--color-canvas);\n color: var(--color-link);\n border-radius: 50%;\n}\n.ds-hero__art .ds-icon {\n width: 50%;\n height: 50%;\n stroke-width: 1.2;\n}\n.ds-hero__tag {\n position: absolute;\n right: 0;\n bottom: 12%;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n}\n\n/* strip: the promises, on the secondary bar tone */\n.ds-strip {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n gap: var(--space-3) var(--space-5);\n margin: var(--space-4) 0 0;\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-pill);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-strip__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* grid: a row of tall rounded product tiles */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-height: var(--size-tile);\n padding: var(--space-5);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-page);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__art {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n color: var(--color-heading);\n}\n.ds-grid__art .ds-icon {\n width: var(--size-glyph);\n height: var(--size-glyph);\n stroke-width: 1.2;\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-grid__price {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: var(--space-3);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n}\n.ds-grid__cell .ds-button--secondary {\n background: var(--color-canvas);\n color: var(--color-text);\n}\n.ds-stats {\n margin-top: var(--space-4);\n}\n.ds-stat {\n align-items: center;\n padding: var(--space-5);\n background: transparent;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n text-align: center;\n}\n\n/* features: tinted cards of unequal size */\n.ds-features {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n gap: var(--space-4);\n}\n.ds-feature {\n gap: var(--space-3);\n padding: var(--space-6);\n border-radius: var(--radius-page);\n}\n.ds-feature__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-field);\n height: var(--size-field);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-panel);\n}\n.ds-feature--wide .ds-panel__title {\n font-size: var(--text-h2);\n}\n.ds-band {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n margin-top: var(--space-8);\n padding: var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-band__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-band__text {\n margin: var(--space-1) 0 0;\n}\n\n/* tabs here are a segmented row of pills */\n.ds-tabs {\n display: inline-flex;\n max-width: 100%;\n padding: var(--space-1);\n background: var(--color-surface-alt);\n border-bottom: 0;\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n min-height: var(--size-control);\n padding: 0 var(--space-5);\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current::after {\n content: none;\n}\n\n/* product view */\n.ds-product {\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-product__art {\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n background: var(--color-fill-2);\n color: var(--color-heading);\n border-radius: var(--radius-page);\n}\n.ds-product__art .ds-icon {\n width: 44%;\n height: 44%;\n stroke-width: 1.2;\n}\n.ds-product__thumbs {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n.ds-product__thumb {\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n background: var(--color-fill-4);\n color: var(--color-heading);\n border: var(--border-width-strong) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n}\n.ds-product__thumb--1 { background: var(--color-fill-1); }\n.ds-product__thumb--3 { background: var(--color-fill-3); }\n.ds-product__thumb.is-current {\n border-color: var(--color-link);\n}\n.ds-product .ds-badges {\n margin-bottom: var(--space-5);\n}\n\n/* plans */\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: stretch;\n}\n.ds-plan {\n gap: var(--space-4);\n padding: var(--space-6);\n border-radius: var(--radius-page);\n}\n.ds-plan__price {\n margin: 0;\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.ds-plan__price small {\n font-family: var(--font-body);\n font-size: var(--text-ui);\n letter-spacing: 0;\n}\n.ds-plan__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-plan__list li {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-summary {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-summary__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n color: var(--color-text-muted);\n}\n.ds-summary__row--total {\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-summary dt,\n.ds-summary dd {\n margin: 0;\n}\n\n/* sidebar: help links beside the order form */\n.ds-sidebar {\n display: grid;\n gap: var(--space-2);\n padding: var(--space-5);\n background: transparent;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-sidebar__list {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-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}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__link.is-current {\n color: var(--color-text);\n}\n\n/* footer: the bar tone again, four columns */\n.ds-footer {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-7) var(--space-5);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-text);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.8;\n}\n.ds-footer__link:hover {\n opacity: 1;\n text-decoration: underline;\n}\n.ds-footer__legal {\n max-width: 36ch;\n margin: var(--space-3) 0 0;\n font-size: var(--text-ui);\n opacity: 0.8;\n}\n\n@media (max-width: 1000px) {\n .ds-hero,\n .ds-features,\n .ds-product,\n .ds-columns,\n .ds-columns--even {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero {\n padding: var(--space-7);\n }\n .ds-grid,\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-plans {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: 0 var(--space-4);\n padding: var(--space-2) var(--space-5);\n }\n .ds-nav .ds-brand {\n flex: 1;\n }\n .ds-nav__links {\n order: 3;\n flex: none;\n width: 100%;\n min-width: 0;\n justify-content: safe center;\n overflow-x: auto;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n gap: 0 var(--space-3);\n padding: var(--space-2) var(--space-4);\n }\n .ds-nav__links {\n justify-content: space-between;\n }\n .ds-nav__link {\n padding: 0 var(--space-3);\n }\n .ds-main {\n padding: var(--space-2) var(--space-2) var(--space-7);\n }\n .ds-main > .ds-section,\n .ds-band {\n margin-top: var(--space-7);\n }\n .ds-hero,\n .ds-sheet,\n .ds-feature,\n .ds-plan,\n .ds-band {\n padding: var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead,\n .ds-section__lead {\n font-size: var(--text-base);\n }\n .ds-hero__art {\n max-width: 70%;\n }\n .ds-section__head--center .ds-section__title {\n font-size: var(--text-h2);\n }\n .ds-strip {\n flex-direction: column;\n border-radius: var(--radius-panel);\n }\n .ds-grid {\n gap: var(--space-2);\n }\n .ds-grid__cell {\n min-height: 0;\n padding: var(--space-4);\n }\n .ds-grid__art .ds-icon {\n width: var(--size-field);\n height: var(--size-field);\n margin: var(--space-4) 0;\n }\n .ds-grid__price {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n }\n .ds-stats,\n .ds-form__row,\n .ds-footer__inner {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-band,\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-tabs__tab {\n padding: 0 var(--space-3);\n }\n .ds-table__extra {\n display: none;\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n}\n\n/* menu, tooltip, accordion, progress: the same parts as the other layouts of the era */\n/* menu: a tonal sheet under its button */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-3) 0 var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button:hover, .ds-menu__button.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-menu[open] .ds-menu__button {\n border-radius: var(--radius-control);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 10;\n display: grid;\n gap: var(--space-1);\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-menu__item:hover, .ds-menu__item.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-menu__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* tooltip: a small inverted label under its trigger */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__text {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 10;\n margin-top: var(--space-1);\n padding: var(--space-1) var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-hover .ds-tooltip__text {\n opacity: 1;\n visibility: visible;\n}\n\n/* accordion: a group of tonal rows that open; only the group's outer corners are large */\n.ds-accordion {\n display: grid;\n gap: var(--space-1);\n}\n.ds-accordion__item {\n background: var(--fill-panel);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n box-shadow: var(--shadow-panel);\n}\n.ds-accordion__item:first-child {\n border-top-left-radius: var(--radius-panel);\n border-top-right-radius: var(--radius-panel);\n}\n.ds-accordion__item:last-child {\n border-bottom-left-radius: var(--radius-panel);\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: var(--space-2) var(--space-5);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: auto;\n border-right: var(--border-width-strong) solid currentColor;\n border-bottom: var(--border-width-strong) solid currentColor;\n transform: translateY(-25%) rotate(45deg);\n}\n.ds-accordion__item[open] .ds-accordion__summary::after {\n transform: translateY(25%) rotate(225deg);\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-accordion__hint {\n display: block;\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-4);\n color: var(--color-text-muted);\n}\n.ds-accordion__body p {\n margin: 0 0 var(--space-3);\n}\n\n/* progress: a thick track in two parts with a gap, and a stop dot at the end */\n.ds-progress {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n height: var(--size-track);\n}\n.ds-progress__bar {\n flex: 0 0 50%;\n height: 100%;\n background: var(--fill-button);\n border-radius: var(--radius-pill);\n}\n.ds-progress__rest {\n position: relative;\n flex: 1;\n height: 100%;\n background: var(--fill-button-secondary);\n border-radius: var(--radius-pill);\n}\n.ds-progress__rest::after {\n content: \"\";\n position: absolute;\n top: 25%;\n right: calc(var(--size-track) / 4);\n width: calc(var(--size-track) / 2);\n height: 50%;\n background: var(--color-button);\n border-radius: 50%;\n}\n.ds-progress--25 .ds-progress__bar { flex-basis: 25%; }\n.ds-progress--75 .ds-progress__bar { flex-basis: 75%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n align-items: center;\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-progress__label strong {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n.ds-menu__label {\n display: inline;\n}\n.ds-menu--end .ds-menu__list,\n.ds-menu--end-wide .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-progress-group {\n display: grid;\n gap: var(--space-4);\n margin: var(--space-4) 0;\n}\n/* carousel: one wide slide and the narrow ends of the next ones */\n.ds-carousel {\n display: grid;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-2);\n min-height: var(--size-slide);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 0 16%;\n min-width: 0;\n padding: var(--space-5) var(--space-4);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: var(--radius-page);\n overflow: hidden;\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-carousel__slide--3 { background: var(--color-fill-3); flex-basis: 9%; }\n.ds-carousel__slide--4 { background: var(--color-fill-4); }\n.ds-carousel__slide.is-current {\n flex: 1;\n padding: var(--space-5) var(--space-6);\n background: var(--color-surface-alt);\n}\n.ds-carousel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n width: 100%;\n}\n.ds-carousel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-carousel__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-carousel__foot {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n width: 100%;\n}\n.ds-carousel__name {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-carousel__nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n}\n.ds-carousel__dot {\n display: block;\n width: var(--space-2);\n height: var(--space-2);\n background: var(--color-border-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n background: var(--color-link);\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-1);\n}\n@media (max-width: 640px) {\n .ds-carousel__slide {\n flex-basis: 14%;\n padding: var(--space-4) var(--space-2);\n }\n .ds-carousel__slide--3 {\n display: none;\n }\n .ds-carousel__slide.is-current {\n padding: var(--space-4) var(--space-5);\n }\n .ds-carousel__name {\n display: none;\n }\n}\n.ds-accordion + .ds-section__label {\n margin-top: var(--space-5);\n}\n@media (max-width: 640px) {\n .ds-nav__tools .ds-menu__label {\n display: none;\n }\n .ds-nav__tools .ds-menu__button {\n padding: 0 var(--space-2);\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n position: relative;\n }\n .ds-nav__tools .ds-menu {\n position: static;\n }\n .ds-nav__tools .ds-menu__list {\n top: calc(var(--space-2) + var(--size-control));\n right: var(--space-4);\n left: var(--space-4);\n min-width: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal lighting store specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
EUR
\n Search the store\n 1\n
\n
\n
\n\n
\n
\n
\n
\n

NewThe Arc reading lamp

\n

Light that follows the page.

\n

A lamp that warms as the evening goes on and dims itself when you put the book down.

\n
\n Buy for 129\n See the lamp\n
\n
\n
\n \n 2700 K at dusk\n
\n
\n\n
    \n
  • Free delivery over 40
    • \n
  • Thirty days to change your mind
    • \n
  • Two years of cover on every lamp
    • \n
\n\n
\n
\n

Popular this month

\n

Four lights that go together, in the same warm white.

\n
\n
\n New

Arc reading lamp

Floor lamp, three finishes

129.00Buy\n In stock

Dome pendant

For a table or a hallway

89.00Buy\n Few left

Desk shade

Small, with a linen shade

64.00Buy\n Set of three

Dusk bulbs

Fit any standard holder

27.00Buy\n
\n
\n

4.8

Average of 2,140 reviews

\n

9 W

Used at full brightness

\n

25,000 h

Rated life of the light

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

Lamps by room

\n
\n
\n
    \n
  • \n
    Reading corner
    \n

    An armchair and one lamp

    The Arc lamp in oak with a Dusk bulb, from 156.00

    \n
    • \n
  • Hall
    • \n
  • Desk
    • \n
  • Bed
    • \n
\n
\n
\n \n
\n
\n
\n\n
\n
\n

Made for the evening

\n
\n
\n
\n \n

It follows the daylight

\n

The Arc starts the day cool and bright, then moves through four steps to a low amber by ten. You set the times once, in the app or with the dial on the stem.

\n
How it worksCare plans
\n
\n
\n
\n \n

One dial, no menus

\n

Turn for brightness, press to switch, hold to save.

\n
\n
\n \n

Parts you can replace

\n

Shade, stem and light unit come apart with one screw.

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

Trade in an old lamp

\n

Send back any working lamp and take 15 off a new one.

\n
\n Start a trade-in\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. Store
    2. \n
  2. Floor lamps
    3. \n
  3. Arc reading lamp
    4. \n
\n
\n
\n

Arc reading lamp

\n

Floor lamp with a dimming dial, in oak, ash or black steel.

\n
\n
\n Add a care plan\n Add to bag, 129.00\n
\n
\n
\n
\n
\n
\n \n \n \n \n
\n
\n
\n \n
\n Oak\n In stock\n Ash: few left\n Steel: sold out\n
\n
\n

A lamp for long evenings

\n

Bright enough to read by, quiet enough to forget.

\n

The shade turns through a half circle and the stem leans over a chair or a bed. The light unit is model CS-ARC-2 and is the same one used in the Dome pendant.

\n

In the box

\n
    \n
  • Stem, base and shade, in three parts
    • \n
  • Light unit and a two metre cable
    • \n
  • One hex key, which is all you need
    • \n
\n

Care

\n

Wipe the shade with a dry cloth. Do not use polish on the oak.

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

Sizes and prices

\n
\n \n \n \n \n \n \n \n \n
FinishHeightWeightPrice
Oak148 cm4.2 kg129.00
Ash148 cm4.0 kg129.00
Black steel152 cm5.6 kg149.00
Oak, short stem120 cm3.7 kg119.00
\n
\n
\n
\n

What buyers say

\n

Five of five82%

Four of five14%

\n \n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Care plans

\n

Every lamp has two years of cover. A plan adds repairs and spare parts.

\n
\n
\n Back to the store\n
\n
\n
\n
\n

Included

\n

0 with every lamp

\n
    \n
  • Two years of cover
    • \n
  • Thirty day returns
    • \n
  • Help by message
    • \n
\n
Keep this
\n
\n
\n

Care Most chosen

\n

3 a month for each lamp

\n
    \n
  • Five years of cover
    • \n
  • One free repair a year
    • \n
  • Spare shade at half price
    • \n
\n
Add Care
\n
\n
\n

Care for a home

\n

7 a month, up to six lamps

\n
    \n
  • Everything in Care
    • \n
  • Collection from your door
    • \n
  • A loan lamp during repairs
    • \n
\n
Add for a home
\n
\n
\n
\n

You can decide laterA plan can be added up to 30 days after the lamp arrives.

\n
\n

Questions people ask

\n
When does cover startThe day the lamp arrives

The two years that come with every lamp start on delivery, and a plan starts when they end.

Can a plan be sharedOne plan, one lamp

A home plan covers up to six lamps at one address.

How do repairs workWe collect, mend and return

Most repairs take a week. A loan lamp comes with the home plan.

\n

More answers

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

Your order

\n

One Arc reading lamp in oak, delivered in three to five days.

\n
\n
\n Edit the bag\n
\n
\n
\n
\n
\n

Delivery is free on this orderWe will send a message on the morning it arrives.

\n

The postcode is missingAdd it below so we can work out the delivery day.

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

Summary

\n
\n
Arc reading lamp, oak
129.00
\n
Care plan, first month
3.00
\n
Delivery
Free
\n
Total today
132.00
\n
\n
\n
\n
\n

Remove the lamp?

\n

Your bag will be empty and the care plan will go with it.

\n
\n Keep it\n Remove\n
\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Your bag

\n

Things you add stay here for 30 days.

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

Your bag is empty

\n

The lamp you removed is saved for later, in case you change your mind.

\n Go to the store\n
\n
\n

Saved for later

\n \n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.material-you.shop.s02.p06.t02.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"shop\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-my-2622\",\n \"short\": \"v1-my-2622\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ececec;\n --color-canvas: #fafafa;\n --color-surface: #f3f3f3;\n --color-surface-alt: #e6e6e6;\n --color-surface-strong: #dedede;\n --color-bar: #ececec;\n --color-bar-text: #1a1c1c;\n --color-bar-alt: #dadada;\n --color-bar-alt-text: #1a1c1c;\n --color-inverse: #2f3131;\n --color-inverse-text: #f0f1f1;\n --color-text: #1a1c1c;\n --color-text-muted: #454747;\n --color-heading: #101212;\n --color-heading-alt: #004f50;\n --color-link: #006a6b;\n --color-link-quiet: #1a1c1c;\n --color-link-visited: #5d5f5f;\n --color-link-hover: #004f50;\n --color-link-active: #002020;\n --color-border: #c5c7c7;\n --color-border-strong: #757777;\n --color-border-muted: #e2e2e2;\n --color-accent: #c4eceb;\n --color-accent-text: #002020;\n --color-accent-alt: #3c4a4a;\n --color-fill-1: #c4eceb;\n --color-fill-2: #dadada;\n --color-fill-3: #c9cdcd;\n --color-fill-4: #dedede;\n --color-button: #006a6b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #dadada;\n --color-button-secondary-text: #1a1c1c;\n --color-input: #fafafa;\n --color-input-text: #1a1c1c;\n --color-input-border: #757777;\n --color-disabled: #e4e4e4;\n --color-disabled-text: #9a9c9c;\n --color-danger: #a8201a;\n --color-danger-surface: #f7dcd9;\n --color-success: #3d6b2c;\n --color-warning: #8d6200;\n --color-notice: #d6dada;\n --color-notice-text: #161d1d;\n --color-focus: #1a1c1c;\n --color-shadow: #000000;\n --color-overlay: rgb(26 28 28 / 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"DM Sans\", \"Noto Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-heading: Outfit, Lexend, Poppins, \"Avenir Next\", \"Century Gothic\", sans-serif;\n --font-ui: \"DM Sans\", \"Noto Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-mono: \"JetBrains Mono\", \"DejaVu Sans Mono\", Menlo, monospace;\n --text-base: 15px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 64px;\n --text-h1: 40px;\n --text-h2: 30px;\n --text-h3: 20px;\n --line-body: 1.6;\n --line-heading: 1.2;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\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: 3px;\n --border-style: solid;\n --radius-control: 12px;\n --radius-panel: 20px;\n --radius-pill: 9999px;\n --radius-page: 24px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-surface-strong);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 88%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;\n --backdrop-blur: 0px;\n}\n" } }