{ "id": "v1-mp-8652", "long_id": "v1.modern-product.app.s08.p06.t05.u02", "name": "Modern product order tracking", "era": { "slug": "modern-product", "code": "mp", "name": "Modern product", "years": [ 2020, 2026 ], "description": "The big-brand product page of 2020 to 2026: very large tight headlines, full-bleed sections that alternate black, white and one saturated colour, generous rounded cards and pill buttons, product shown huge and centred, and motion on scroll: sections that fade and slide in, sticky stories, numbers that reveal." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "This is the order and delivery tracking of a consumer brand between 2020 and 2026, here a maker of electric bikes: a dark forest-green app in which the state of the order is the headline, set very large in a geometric sans, over a bar of five stages, a map tile and a summary card that stays in place while the events scroll. One acid lime is the only loud colour: the primary button, the progress bar, the block that holds the drawn bike and a full-width band of figures. The screens are reached from a dock that floats at the lower edge of the window, as in the brand's phone app; it was the common look of the order, delivery and account pages of vehicle, device and delivery brands in the first half of the 2020s.", "url": "https://chrono.skin/s/v1-mp-8652", "preview_url": "https://chrono.skin/s/v1-mp-8652/specimen.html", "files": { "STYLE.md": "# Modern product order tracking\n\n## Summary\n\nThis is the order and delivery tracking of a consumer brand between 2020 and 2026, here a maker of electric bikes: a dark forest-green app in which the state of the order is the headline, set very large in a geometric sans, over a bar of five stages, a map tile and a summary card that stays in place while the events scroll. One acid lime is the only loud colour: the primary button, the progress bar, the block that holds the drawn bike and a full-width band of figures. The screens are reached from a dock that floats at the lower edge of the window, as in the brand's phone app; it was the common look of the order, delivery and account pages of vehicle, device and delivery brands in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1280px) wide with `--space-5` side padding; sections pad themselves with `--space-9` (96px), `--tight` with `--space-8`.\n- Navigation is `.ds-nav` in two places. A plain top row, `--size-nav` (64px) tall and not fixed, has the brand at the left and, at the right, a `.ds-menu` that opens a wide panel of the customer's orders and the signed-in person's `.ds-avatar`. The screens themselves are `.ds-nav__links`, a dock: a small translucent, blurred bar of four icon links that is `position: fixed`, centred, `--space-4` above the lower edge of the window; the current screen is filled like a primary button. The footer keeps `--space-9` free under itself for the dock. Do not give `.ds-nav` a `backdrop-filter` or a transform, or the dock stops being fixed to the window.\n- The home view stacks, inside `.ds-wrap`: `.ds-hero`, on the page colour, with the order number and a badge, the state as a display headline whose second half is greyed, one line of text and two buttons, and at the right, on the baseline, the `.ds-rider` card; `.ds-track`, a rounded block with a large `.ds-progress` and five named stages; and `.ds-board`, two columns: at the left, `--size-side` (400px) wide and `position: sticky`, the order summary panel with the bike on an accent block, at the right the `.ds-map` tile and a panel with the timeline. Then, full bleed: `.ds-band`, an inset rounded block of the accent with the `.ds-stat` figures; a section with the `.ds-grid` of four tiles; and a `.ds-tone--alt` section with the `.ds-accordion` beside a `.ds-carousel` of tips.\n- Inner pages have no hero. Inside `.ds-wrap` they open with `.ds-page-header` (breadcrumb, a large title, one line of text, one button at the right), then the working components. Tabs are a pill switch at the left of `.ds-tabsrow` with the badge key at its right. Content is full width (the table of orders), `.ds-cols` (7 to 5), `.ds-cols--even`, or `.ds-cols--side` with the `.ds-sidebar` at the left.\n- Views. The specimen is the order area of a bike maker. `home` tracks one order. `orders` has the switch and badge key, the table of orders with its pagination, an empty returns box and the service plan with a progress bar. `delivery` is the change-delivery form with its notices and buttons, the open cancel dialog and three switches for messages. `help` has the topics and a person at the left, the text on the handover with a row of links, and more questions as an accordion.\n- Below 1000px the hero, the board and all columns stack, the summary is no longer sticky, tiles go two by two and the menu panel is not shown. Below 640px the dock's links put the icon over the word and the dock sits `--space-2` above the lower edge, the first name beside the `.ds-avatar` of `.ds-nav__me` is hidden, the stages lose their dates, the band and the largest blocks take `--radius-panel` and a wide table scrolls inside `.ds-table__wrap`. Below 640px a `.ds-tooltip__tip` takes the width of its paragraph, so it never leaves the window. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps, dock padding), `--space-2` 8px (icon to text, progress bar height), `--space-3` 12px (between buttons, tile gap), `--space-4` 16px (form rows, list rows, dock to window edge), `--space-5` 20px (panel and tile padding, page gutter, column gap), `--space-6` 28px (track padding, hero actions), `--space-7` 40px (hero to track, section head to content, timeline indent), `--space-8` 64px (top of the hero, band padding, tight sections), `--space-9` 96px (sections, room for the dock).\n- Other sizes: `--size-mark` 28px, `--size-icon` 44px, `--size-control` 40px, `--size-side` 400px, `--size-map` 340px, `--size-art` 240px (least height of the bike's block), `--size-tile` 220px, `--size-menu` 620px, `--size-avatar` 36px, `--size-tip` 220px, `--size-dialog` 440px.\n- Motion, in CSS only. An element with `.ds-reveal` fades in and rises as it enters the window (`animation-timeline: view()`; `--2` and `--3` start later along a row). Buttons rise a little on hover and shrink to 97% when pressed, tiles rise by `--space-1`, the menu panel and tooltips fade and slide in, all through `--transition`. Animations are declared inside `@media (prefers-reduced-motion: no-preference)` and state only their start, so nothing is hidden where they do not run.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of four grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. An inverse block (`--fill-inverse`, class `.ds-tone--inverse`) carries only `--color-inverse-text`. An accent block (`--fill-accent`, class `.ds-tone--accent`) carries only `--color-accent-text`. The navigation (`--fill-bar`) carries `--color-bar-text`; the footer (`--fill-bar-alt`) carries `--color-bar-alt-text`.\n- A palette may be light or dark. Nothing assumes that the page is light: the inverse block is black on a white palette and off-white on a black one, and full-bleed sections alternate page, inverse, accent and `--color-surface-alt`.\n- `--color-fill-1` to `--color-fill-4` are tile grounds that carry running text in `--color-text` and `--color-heading`: tints on a light palette, deep tones on a dark one. They never carry `--color-inverse-text`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On an inverse block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. On an accent block only `.ds-button--onaccent` (fill `--color-accent-text`, text `--color-accent`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on.\n- `--color-inverse` is also the body of a drawn device and `--color-accent` the face of a drawn payment card, so a device is drawn on the page, a fill or the accent, never on an inverse block.\n- `--fill-bar` is translucent (the bar colour mixed with `transparent` in the surface part) and the navigation blurs what scrolls under it by `--backdrop-blur`.\n- `--color-heading-alt` is the kicker above a title, the sidebar title and h3 in prose. On inverse and accent blocks the kicker inherits the block's text colour.\n- `--fill-accent` with `--color-accent-text` is the default badge. `.ds-badge--alt` and the status badges are tints: the colour mixed at 16 to 24% into `--color-surface`, the text mixed from the colour and `--color-heading`, so they hold on light and dark palettes.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface`. The destructive button is `--color-danger` with `--color-button-text`.\n- Borders are hairlines: `--border-width` in `--color-border-muted` around panels and between rows, `--color-border` under a table head, `--color-input-border` around fields. `--border-width-strong` in `--color-border` frames the empty state.\n- Radii: `--radius-control` for buttons, fields, tabs and the current row of a sidebar; `--radius-panel` for panels, the dialog and the empty state (half of it for notices and the textarea); `--radius-page` for the largest blocks (hero, tiles, stages); `--radius-pill` for badges and meters.\n- Shadows: `--shadow-panel` on panels, `--shadow-control` on buttons and the current tab, `--shadow-control-hover` on a hovered button or tile, `--shadow-dialog` on the dialog and on drawn products.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: washes of `currentColor` or a text token at 7 to 22% for hover grounds, hairlines and stages on coloured blocks; tinted badges; the error notice's edge (`--color-danger` at 35%); the footer rule (`--color-bar-alt-text` at 25%). Opacity 0.6 to 0.8 dims secondary text on inverse and accent blocks.\n- Here: `--color-page` silicon grey `#f5f5f7` with white panels, `--color-inverse` graphite `#1c1c1e`, and one blue: `--color-link` `#0066cc`, `--color-accent` and `--color-button` `#0071e3`. Kickers (`--color-heading-alt`) are grey; `--color-accent-alt`, a burnt orange, is only the word \"New\" and the far end of a drawn screen. The four fills are a cool grey-blue, white, a warm silver and a mid grey.\n- One neutral system family for everything (`--font-body`: the system UI font, then Segoe UI, Roboto, Helvetica Neue; `--font-heading` asks for its display cut), `--font-mono` for code. `--text-base` 17px at `--line-body` 1.47; `--text-ui` 14px (buttons, kickers); `--text-small` 12px (navigation, meta, badges, the strip, the footer); `--text-large` 19px (leads, list titles); `--text-display` 72px (the hero's product name, scaled down with `clamp()` and `vw` to `--text-h2` on a phone); `--text-h1` 48px (tile, section and page titles, figures); `--text-h2` 28px (titles of half-width tiles); `--text-h3` 21px (panel, option and product titles).\n- Weights are moderate: `--weight-display` 600, `--weight-heading` 500, `--weight-ui` 400, with `--display-tracking` -1px and `--heading-tracking` -0.2px. Nothing is uppercase; links are not underlined until hovered.\n- Surface: `--radius-control` 10px (buttons and fields are softly squared), `--radius-panel` 18px, `--radius-page` 24px for tiles and stages, pills for badges and finish chips. Panels rest on a faint offset shadow (`--shadow-panel`, 2px 4px 12px); a hovered button or card gets `--shadow-control-hover`; devices, the price bar and the dialog carry `--shadow-dialog`, a hairline ring and a 48px blur. Fills are flat. `--transition` is 0.18s; `--backdrop-blur` 24px.\n- A drawn screen runs from `--color-accent` to `--color-accent-alt`; this is the only gradient besides the drifting light.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-tone--inverse`, `.ds-tone--accent`, `.ds-tone--alt`: put a block on the inverse fill, the accent fill or `--color-surface-alt` and set its text colour.\n- `.ds-brand`: the site's mark and name, first in the top row and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-wrap`: the centred content column. `.ds-section`: a full-width block (`--tight`, `--flush`) with a `.ds-section__head` of `.ds-section__kicker`, `.ds-section__title` and `.ds-section__lead`; `--left` aligns it left.\n- `.ds-nav`: the top row and the dock. `.ds-nav__inner` lays out the brand and `.ds-nav__actions` (the menu and `.ds-nav__me`, avatar and first name); `.ds-nav__links` is the dock of `.ds-nav__link` items, each a small SVG icon and a word, the current one filled (`is-current`).\n- `.ds-menu`: a top-row item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is a wide panel under it, shown on hover, on focus or with `is-open`; `--end` aligns it to the item's right edge. Here it holds two `.ds-menu__order` cards (a badge, the order's name, a line and a progress bar) and a `.ds-menu__foot` of links; a plain menu uses `.ds-menu__title`, `.ds-menu__list` and `.ds-menu__link`. Do not show it open over other content.\n- `.ds-hero`: the head of the home view: `.ds-hero__kicker` (order number and badge), `.ds-hero__title` (an `` greys its second half), `.ds-hero__lead`, `.ds-hero__actions`, and the `.ds-rider` card at the right. One per site.\n- `.ds-rider`: a small panel with a `.ds-person`, a `.ds-rider__text` and optionally one small button.\n- `.ds-track`: the stages of the order: a `.ds-progress__label`, a `.ds-progress--large` and `.ds-track__steps` of five `.ds-track__step` (`is-done`, `is-current`), each a word over a small date.\n- `.ds-progress`: a bar; `.ds-progress__bar` with `--20`, `--40`, `--60`, `--70`, `--80`, `--100` sets how far; `--large` is thicker. `.ds-progress__label` above it has a bold name and a quiet remark.\n- `.ds-board`: the two columns of the home view; `.ds-board__side` is the sticky one.\n- `.ds-panel`: the rounded card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link; `.ds-panel__body` is padded; `.ds-panel__text` is a paragraph. `.ds-summary` is the order's panel: `.ds-summary__art` (the product in SVG on the accent), a head, `.ds-lines` and a `.ds-table__foot` with the address.\n- `.ds-lines`: priced rows: `.ds-lines__row` with a name over a small line and a `.ds-lines__sum`; `--total` is the last, larger row above a rule.\n- `.ds-map`: a tile on `--color-fill-1` with two SVG layers, `.ds-map__roads` and `.ds-map__route`, `.ds-map__pin` labels (`--rider`, `--home`) and a `.ds-map__note` with a large first line.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title`, an optional `.ds-list__text` and `.ds-list__meta`; `.ds-list__row` puts a `.ds-list__grow` block and a badge or switch on one line. `.ds-list--timeline` turns it into a line of events with dots (`is-done`, `is-current`), newest first.\n- `.ds-band`: an inset rounded block for the figures, used with `.ds-tone--accent`; `.ds-band__head` is its small heading.\n- `.ds-stat`: the row of three figures; each `.ds-stat__item` is a `.ds-stat__figure` in display size over a `.ds-stat__label`.\n- `.ds-grid`: four tiles on the four fills. Each `.ds-grid__cell` is a link with a `.ds-grid__num` in monospace at the top and a `.ds-grid__title` and `.ds-grid__text` at the bottom; `is-done` strikes the title through.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `
` with a `.ds-accordion__head` summary (a plus that becomes a filled minus when open) and a `.ds-accordion__body`.\n- `.ds-carousel`: slides of which one shows. `.ds-carousel__track` scrolls sideways with scroll snapping and holds `.ds-carousel__slide` items on the fills; `.ds-carousel__bar` under it has `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__hint`, a small line that says to swipe. Here a slide holds a `.ds-tip`: a badge, a `.ds-tip__title`, a `.ds-tip__text` and at most one button.\n- `.ds-tooltip`: a dotted-underlined trigger holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`.\n- `.ds-switch`: an on and off control drawn over ``; on when checked or `is-on`.\n- `.ds-avatar`: initials in a circle on a fill (`--2`, `--3`, `--large`). `.ds-person` puts it beside a `.ds-person__name` and `.ds-person__meta`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds the breadcrumb, the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3 for a sidebar; `--even` two equal columns; `--fill` stretches both to one height. `.ds-stack` stacks blocks one `--space-5` apart.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends a small arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the button, in `--font-ui`. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse`, `--onaccent`, `--ghost`, `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table without fills: a small quiet head, hairlines between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link; `.ds-table__code` sets a code in the monospace font. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is a last strip for a count and the pagination.\n- `.ds-tabs`: a pill switch: `.ds-tabs__tab` on a block of `--color-surface-strong`, the current one (`is-current`) raised on `--fill-panel`. `.ds-tabsrow` places it above what it changes.\n- `.ds-badge`: small label on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is filled.\n- `.ds-notice`: tinted rounded message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` blocks; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by small arrows; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`: `.ds-dialog__head` (`.ds-dialog__title`, a round `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a centred message in a frame of `--border-width-strong`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-plan__row`: a last line in a panel with a remark at the left and one small button at the right.\n- `.ds-reveal`: the scroll animation described under Layout; `--2`, `--3`, `--zoom`.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then four columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n\n## Never\n\n- `font-weight <= 600`: nothing is heavier than semibold.\n- `font-weight >= 400`: nothing is set light.\n- `font-size >= 12px`: navigation, meta and the footer are the smallest text.\n- `font-size <= 72px`: the product name in the hero is the largest text.\n- `font-families <= 2`: the system sans-serif, plus monospace for code.\n- `line-height <= 1.5`: body text is set at 1.47.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 5%`: the one blue marks a link; only a hovered link is underlined.\n- `text-shadow = none`: text is flat on every ground.\n- `border-width <= 1px`: every border is a hairline.\n- `border-radius <= 28px`: panels are 20px and the largest blocks 28px; only pills and circles are rounder.\n- `box-shadow-blur <= 120px`: only the dialog casts a shadow, and it ends at 120px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; inverse; accent) and take the text token and the buttons of that ground; do not put a primary button on an inverse or accent block, or `--color-inverse-text` on a fill. A new screen is one more link in the dock (keep it to five) and opens with a `.ds-page-header`; anything that holds data is a `.ds-panel`; anything that shows how far along something is uses `.ds-progress`, with named stages under it when there are few. Keep the accent rare: one accent block per screen at most, besides buttons and bars. Things that float (a menu, a tooltip, a pin) take `--shadow-dialog` and stay hidden until hover or focus unless they are part of a picture. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, type sizes on the `--text-*` tokens (large titles through `clamp()` between two of them), and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-page: 1280px;\n --size-nav: 64px;\n --size-mark: 28px;\n --size-icon: 44px;\n --size-control: 40px;\n --size-dialog: 440px;\n --size-side: 400px;\n --size-map: 340px;\n --size-art: 240px;\n --size-tile: 220px;\n --size-menu: 620px;\n --size-avatar: 36px;\n --size-tip: 220px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 20px;\n --space-6: 28px;\n --space-7: 40px;\n --space-8: 64px;\n --space-9: 96px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-wrap {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* tones: the three grounds a block can stand on besides the page.\n Each sets its own text colour; headings inside inherit it. */\n.ds-tone--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-tone--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-tone--alt {\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n.ds-tone--inverse .ds-section__title,\n.ds-tone--accent .ds-section__title,\n.ds-tone--inverse .ds-section__kicker,\n.ds-tone--accent .ds-section__kicker,\n.ds-tone--inverse .ds-section__lead,\n.ds-tone--accent .ds-section__lead,\n.ds-tone--inverse .ds-feature__title,\n.ds-tone--accent .ds-feature__title,\n.ds-tone--inverse .ds-feature__text,\n.ds-tone--accent .ds-feature__text,\n.ds-tone--inverse .ds-stat__figure,\n.ds-tone--accent .ds-stat__figure,\n.ds-tone--inverse .ds-stat__label,\n.ds-tone--accent .ds-stat__label {\n color: inherit;\n}\n\n/* motion. The resting state of every rule is the finished page; the\n animations below only run where scroll-driven timelines exist and\n the visitor has not asked for less motion. */\n@keyframes ds-rise {\n from {\n opacity: 0;\n transform: translateY(var(--space-7));\n }\n}\n@keyframes ds-zoom {\n from {\n opacity: 0;\n transform: translateY(var(--space-6)) scale(0.94);\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: view()) {\n .ds-reveal {\n animation: ds-rise linear both;\n animation-timeline: view();\n animation-range: entry 0% entry 80%;\n }\n .ds-reveal--2 {\n animation-range: entry 15% entry 95%;\n }\n .ds-reveal--3 {\n animation-range: entry 30% entry 110%;\n }\n }\n}\n\n/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n max-width: 68ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h2);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h3);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n}\n.ds-prose p {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n content: \" \\203A\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n\n/* buttons: pills whose shadow grows on hover and that shrink a little when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--onaccent,\n.ds-button--onaccent:hover,\n.ds-button--onaccent.is-hover {\n background: var(--color-accent-text);\n color: var(--color-accent);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: currentColor;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n border-color: transparent;\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: var(--space-9);\n border-radius: calc(var(--radius-panel) / 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-size: var(--text-base);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--space-4);\n height: var(--space-4);\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n}\n\n/* table: no fills, hairlines between rows, a small quiet head */\n.ds-table__wrap {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: the large rounded card */\n.ds-panel {\n min-width: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.8;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 24%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 40%, var(--color-heading));\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"\\203A\";\n margin-left: var(--space-2);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* page header: the head of an inner page */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7) 0 var(--space-6);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 56ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-7) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-3) 0 var(--space-5);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-7) var(--space-5);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* tabs: a pill switch */\n.ds-tabs {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1);\n border-radius: var(--radius-control);\n background: var(--color-surface-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-panel);\n color: var(--color-heading);\n box-shadow: var(--shadow-control);\n}\n\n/* sections and their heads */\n.ds-section {\n padding: var(--space-9) 0;\n}\n.ds-section--tight {\n padding: var(--space-8) 0;\n}\n.ds-section__head {\n max-width: 90ch;\n margin: 0 auto var(--space-7);\n text-align: center;\n}\n.ds-section__head--left {\n margin-left: 0;\n text-align: left;\n}\n.ds-section__kicker {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-section__lead {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n gap: var(--space-7);\n}\n.ds-cols--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n/* stats: big numbers. .ds-stat is the row, .ds-stat__item one figure */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-stat__item {\n min-width: 0;\n}\n.ds-stat__figure {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h1), 7vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n max-width: 24ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* footer: small grey link columns */\n.ds-footer {\n padding: var(--space-8) 0 var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-footer__about {\n max-width: 30ch;\n margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.8;\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n opacity: 1;\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__legal {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-7) 0 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n opacity: 0.8;\n}\n\n@media (max-width: 900px) {\n .ds-cols,\n .ds-cols--side,\n .ds-cols--even {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n }\n .ds-footer__cols {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-section {\n padding: var(--space-8) 0;\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-section,\n .ds-section--tight {\n padding: var(--space-7) 0;\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table {\n font-size: var(--text-small);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-page-header {\n padding: var(--space-6) 0 var(--space-5);\n }\n}\n.ds-view > .ds-wrap:last-child {\n padding-bottom: var(--space-8);\n}\n\n/* ---- components of the period beyond the checklist ---- */\n\n/* menu: a wide drop-down under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: var(--space-2);\n border-right: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n transform: translateY(-35%) rotate(45deg);\n opacity: 0.6;\n}\n.ds-menu__panel {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n width: var(--size-menu);\n max-width: 92vw;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n text-transform: none;\n box-shadow: var(--shadow-dialog);\n opacity: 0;\n visibility: hidden;\n transform: translateY(calc(var(--space-2) * -1));\n transition: var(--transition);\n}\n.ds-menu--end .ds-menu__panel {\n right: 0;\n left: auto;\n}\n.ds-menu:hover .ds-menu__panel,\n.ds-menu:focus-within .ds-menu__panel,\n.ds-menu.is-open .ds-menu__panel {\n opacity: 1;\n visibility: visible;\n transform: none;\n}\n.ds-menu__title {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-menu__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: normal;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-menu__link small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: questions that open and close, built on details */\n.ds-accordion {\n min-width: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n display: block;\n flex: none;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) round(var(--space-6) * 0.4, var(--space-1)) no-repeat,\n var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] .ds-accordion__head::after,\n.ds-accordion__item.is-open .ds-accordion__head::after {\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: 62ch;\n padding: 0 0 var(--space-5);\n color: var(--color-text);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: inherit;\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: var(--size-tip);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-panel) / 2.5);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n opacity: 0;\n visibility: hidden;\n transform: translate(-50%, var(--space-1));\n transition: var(--transition);\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, 0);\n}\n\n/* carousel: a row of slides, one showing, moved by scroll snapping */\n.ds-carousel {\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-page);\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n flex: none;\n width: 100%;\n min-width: 0;\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n color: var(--color-text);\n scroll-snap-align: start;\n}\n.ds-carousel__slide:nth-child(3n + 2) { background: var(--color-fill-3); }\n.ds-carousel__slide:nth-child(3n + 3) { background: var(--color-fill-2); }\n.ds-carousel__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin-top: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n}\n.ds-carousel__dot {\n width: var(--space-2);\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: currentColor;\n opacity: 0.25;\n transition: var(--transition);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n opacity: 1;\n}\n.ds-carousel__hint {\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n\n/* switch: an on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--space-7);\n height: calc(var(--space-5) + var(--space-1));\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--space-5) - var(--space-2));\n height: calc(var(--space-5) - var(--space-2));\n border-radius: 50%;\n background: var(--color-heading);\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-switch:checked,\n.ds-switch.is-on {\n border-color: transparent;\n background: var(--fill-button);\n}\n.ds-switch:checked::after,\n.ds-switch.is-on::after {\n left: calc(100% - var(--space-5));\n background: var(--color-button-text);\n}\n.ds-switch:focus-visible,\n.ds-switch.is-focus {\n outline: var(--focus-ring);\n}\n.ds-switch:disabled,\n.ds-switch.is-disabled {\n background: var(--color-disabled);\n cursor: default;\n}\n\n/* progress: a bar that shows how far something is */\n.ds-progress {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n}\n.ds-progress__bar--20 { width: 20%; }\n.ds-progress__bar--70 { width: 70%; }\n.ds-progress__bar--100 { width: 100%; }\n.ds-progress--large {\n height: var(--space-3);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-progress__label strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* avatar: a person drawn as initials in a circle, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-decoration: none;\n}\n.ds-avatar--2 { background: var(--color-fill-1); }\n.ds-avatar--3 { background: var(--color-fill-4); }\n.ds-avatar--large {\n width: var(--size-icon);\n height: var(--size-icon);\n font-size: var(--text-ui);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-person__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* rows inside lists: a title block and something at the right */\n.ds-list__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-list__grow {\n flex: 1;\n min-width: 0;\n}\n.ds-cols--fill {\n align-items: stretch;\n}\n.ds-cols--fill > .ds-empty {\n justify-content: center;\n}\n.ds-table td.ds-table__code {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* ---- layout: order and delivery tracking of a maker of electric bikes ---- */\n\n/* the footer leaves room for the dock */\n.ds-footer {\n padding-bottom: calc(var(--space-9) + var(--space-5));\n}\n\n/* nav: a plain top row with the brand and the account, and the screens\n themselves on a dock that floats at the lower edge of the window */\n.ds-nav {\n position: relative;\n z-index: 10;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n max-width: var(--size-page);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__links {\n position: fixed;\n bottom: var(--space-4);\n left: 50%;\n z-index: 30;\n display: flex;\n gap: var(--space-1);\n max-width: calc(100% - var(--space-4));\n margin: 0;\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 16%, transparent);\n border-radius: calc(var(--radius-control) + var(--space-1));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n list-style: none;\n box-shadow: var(--shadow-dialog);\n transform: translateX(-50%);\n -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(1.4);\n backdrop-filter: blur(var(--backdrop-blur)) saturate(1.4);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-5);\n border-radius: var(--radius-control);\n color: inherit;\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 svg {\n flex: none;\n width: var(--space-5);\n height: var(--space-5);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#orders:target) .ds-nav__links .ds-nav__link[href=\"#orders\"],\n.ds-page:has(#delivery:target) .ds-nav__links .ds-nav__link[href=\"#delivery\"],\n.ds-page:has(#help:target) .ds-nav__links .ds-nav__link[href=\"#help\"] {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-nav__actions .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n}\n.ds-nav__me {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-weight: var(--weight-ui);\n text-decoration: none;\n white-space: nowrap;\n}\n\n/* the order menu: each row an order with its state */\n.ds-menu__panel {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-menu__order {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-4);\n border-radius: calc(var(--radius-panel) / 1.5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n text-decoration: none;\n white-space: normal;\n transition: var(--transition);\n}\n.ds-menu__order:hover,\n.ds-menu__order.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-menu__order strong {\n color: var(--color-heading);\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}\n.ds-menu__foot {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n}\n\n/* hero: no picture, only the state of the order in very large type,\n with the rider at the right on the baseline */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: end;\n gap: var(--space-6);\n padding: var(--space-8) 0 var(--space-7);\n}\n.ds-hero__kicker {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 10vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__title em {\n color: var(--color-text-muted);\n font-style: normal;\n}\n.ds-hero__lead {\n max-width: 48ch;\n margin: var(--space-5) 0 0;\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-6);\n}\n.ds-rider {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n width: calc(var(--size-side) - var(--space-8));\n max-width: 100%;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-rider__text {\n margin: 0;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n\n/* track: the five stages of the order across the page */\n.ds-track {\n padding: var(--space-6);\n border-radius: var(--radius-page);\n background: var(--color-surface-alt);\n}\n.ds-track__steps {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n text-align: center;\n}\n.ds-track__step {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-track__step small {\n display: block;\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-transform: none;\n}\n.ds-track__step.is-done {\n color: var(--color-text);\n}\n.ds-track__step.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* board: the order summary stays in place at the left while the map and\n the events scroll at the right */\n.ds-board {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n align-items: start;\n gap: var(--space-5);\n margin-top: var(--space-5);\n}\n.ds-board__side {\n position: sticky;\n top: var(--space-4);\n}\n.ds-summary {\n overflow: hidden;\n}\n.ds-summary__art {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-art);\n margin: var(--space-2);\n padding: var(--space-5);\n border-radius: calc(var(--radius-panel) - var(--space-1));\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-summary__art svg {\n width: 82%;\n height: auto;\n}\n.ds-lines {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-lines__row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n color: var(--color-text);\n}\n.ds-lines__row small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-lines__sum {\n flex: none;\n color: var(--color-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-lines__row--total {\n margin-top: var(--space-2);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* map: the route drawn as lines on a tile */\n.ds-map {\n position: relative;\n min-height: var(--size-map);\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n color: var(--color-heading);\n overflow: hidden;\n}\n.ds-map__roads,\n.ds-map__route {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n}\n.ds-map__roads {\n opacity: 0.16;\n}\n.ds-map__pin {\n position: absolute;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--fill-panel);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n box-shadow: var(--shadow-dialog);\n}\n.ds-map__pin::before {\n content: \"\";\n width: var(--space-4);\n height: var(--space-4);\n border-radius: 50%;\n background: var(--fill-button);\n}\n.ds-map__pin--rider {\n top: 40%;\n left: 43%;\n}\n.ds-map__pin--home {\n top: 14%;\n right: 6%;\n}\n.ds-map__pin--home::before {\n background: var(--color-heading);\n}\n.ds-map__note {\n position: absolute;\n bottom: var(--space-4);\n left: var(--space-4);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-radius: calc(var(--radius-panel) / 1.5);\n background: var(--fill-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n box-shadow: var(--shadow-dialog);\n}\n.ds-map__note strong {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* timeline: the list as a line of events */\n.ds-list--timeline .ds-list__item,\n.ds-list--timeline .ds-list__item:first-child {\n position: relative;\n padding: 0 0 var(--space-5) var(--space-7);\n border-bottom: 0;\n}\n.ds-list--timeline .ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list--timeline .ds-list__item::before {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: 0;\n width: var(--space-4);\n height: var(--space-4);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--fill-panel);\n}\n.ds-list--timeline .ds-list__item::after {\n content: \"\";\n position: absolute;\n top: var(--space-6);\n bottom: var(--space-1);\n left: calc(var(--space-2) - var(--border-width) / 2);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list--timeline .ds-list__item:last-child::after {\n display: none;\n}\n.ds-list--timeline .ds-list__item.is-done::before {\n border-color: var(--color-heading);\n background: var(--color-heading);\n}\n.ds-list--timeline .ds-list__item.is-current::before {\n border-color: var(--color-button);\n background: var(--color-button);\n box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-button) 30%, transparent);\n}\n\n/* stats stand in a band of the accent colour */\n.ds-band {\n margin: var(--space-8) var(--space-3) 0;\n padding: var(--space-8) 0;\n border-radius: var(--radius-page);\n}\n.ds-band__head {\n margin: 0 0 var(--space-6);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-stat__label {\n opacity: 0.8;\n}\n\n/* grid: four tiles of things to do before the bike arrives */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-height: var(--size-tile);\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-fill-1);\n color: var(--color-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:nth-child(4n + 2) { background: var(--color-fill-2); }\n.ds-grid__cell:nth-child(4n + 3) { background: var(--color-fill-3); }\n.ds-grid__cell:nth-child(4n + 4) { background: var(--color-fill-4); }\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n transform: scale(1.015);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__num {\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-grid__title {\n margin: auto 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n}\n.ds-grid__cell.is-done .ds-grid__title {\n text-decoration: line-through;\n opacity: 0.6;\n}\n\n/* tips: the slide of the carousel */\n.ds-tip {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-height: calc(var(--size-tile) + var(--space-9));\n padding: var(--space-7);\n}\n.ds-tip .ds-badge {\n align-self: flex-start;\n}\n.ds-tip__title {\n margin: auto 0 0;\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 text-wrap: balance;\n}\n.ds-tip__text {\n max-width: 44ch;\n margin: 0;\n}\n\n/* inner pages */\n.ds-page-header {\n padding-top: var(--space-7);\n}\n.ds-tabsrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n}\n.ds-plan__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n\n@media (max-width: 1000px) {\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n padding-top: var(--space-7);\n }\n .ds-rider {\n width: 100%;\n }\n .ds-board {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-board__side {\n position: static;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-menu__panel {\n display: none;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n padding: 0 var(--space-4);\n }\n .ds-nav__links {\n bottom: var(--space-2);\n }\n .ds-nav__links .ds-nav__link {\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-small);\n }\n .ds-table__wrap .ds-table {\n min-width: 66ch;\n }\n .ds-nav__me span:not(.ds-avatar) {\n display: none;\n }\n .ds-hero__title {\n letter-spacing: var(--heading-tracking);\n }\n .ds-track {\n padding: var(--space-4);\n border-radius: var(--radius-panel);\n }\n .ds-track__steps {\n gap: var(--space-1);\n }\n .ds-track__step {\n font-size: var(--text-small);\n overflow-wrap: anywhere;\n }\n .ds-track__step small {\n display: none;\n }\n .ds-map,\n .ds-carousel__track,\n .ds-carousel__slide {\n border-radius: var(--radius-panel);\n }\n .ds-map__pin--rider {\n left: 22%;\n }\n .ds-band {\n margin: var(--space-7) var(--space-2) 0;\n padding: var(--space-7) 0;\n border-radius: var(--radius-panel);\n }\n .ds-stat__figure {\n letter-spacing: var(--heading-tracking);\n }\n .ds-grid__cell {\n min-height: 0;\n padding: var(--space-4);\n }\n .ds-grid__title {\n padding-top: var(--space-5);\n font-size: var(--text-large);\n }\n .ds-tip {\n min-height: 0;\n padding: var(--space-5);\n }\n .ds-tip__title {\n padding-top: var(--space-6);\n font-size: var(--text-h3);\n }\n}\n\n/* phone: a tooltip takes the width of its paragraph, so it never leaves the window */\n@media (max-width: 640px) {\n .ds-page :has(> .ds-tooltip) {\n position: relative;\n }\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n right: 0;\n left: 0;\n width: auto;\n max-width: none;\n transform: translateY(var(--space-1));\n }\n .ds-tooltip:hover .ds-tooltip__tip,\n .ds-tooltip:focus .ds-tooltip__tip,\n .ds-tooltip:focus-within .ds-tooltip__tip,\n .ds-tooltip.is-open .ds-tooltip__tip {\n transform: none;\n }\n}\n\n/* phone: the order menu opens across the bar instead of doing nothing */\n@media (max-width: 1000px) {\n .ds-nav__actions .ds-menu {\n position: static;\n }\n .ds-nav__actions .ds-menu__panel {\n right: var(--space-4);\n left: var(--space-4);\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n width: auto;\n max-width: none;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: modern product order tracking specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n Your orders\n
\n \n On its way\n City bike, sage\n CS-20418, arriving Thursday\n \n \n \n Delivered\n Helmet and lock\n CS-20377, delivered 2 May\n \n \n
All ordersReturns
\n
\n
\n MOMara\n
\n
\n
\n\n
\n
\n
\n
\n

Order CS-20418On its way

\n

Arriving Thursday, 14:20 to 15:00.

\n

Your city bike left the workshop this morning, built, tested and charged to 80%.

\n
\n Change delivery\n What happens on the day\n
\n
\n
\n
IVIvo brings itRider and mechanic
\n

He fits the saddle and pedals with you. Plan for a 20 minute handoverSaddle height, brakes, the lock and pairing the app..

\n
\n
\n\n
\n

Stage 4 of 53 stops before yours

\n \n
    \n
  1. OrderedMon 12 May
    2. \n
  2. BuiltTue 20 May
    3. \n
  3. TestedWed 21 May
    4. \n
  4. On its wayToday, 9:10
    5. \n
  5. DeliveredThu, 14:20
    6. \n
\n
\n\n
\n
\n
\n
\n

City bike, sage

Size M
\n
\n
    \n
  • City bikeBelt drive, 120 km battery2,390.00
    • \n
  • Front carrierFitted at the workshop89.00
    • \n
  • Delivery and handoverBy bike courier0.00
    • \n
  • Paid2,479.00
    • \n
\n
\n
Mara Okafor, 14 Linden RowChange
\n
\n
\n
\n
\n \n \n Ivo, 4.2 km away\n 14 Linden Row\n

3 stops awayUpdated a minute ago

\n
\n
\n

What has happened

Order details
\n
\n
    \n
  • Out for delivery

    Today, 9:10. Loaded at the east workshop

    • \n
  • Test ride passed

    Wednesday, 16:42. 6 km, brakes and motor checked

    • \n
  • Built by Rin

    Tuesday, 11:05. Frame 4F2A, size M

    • \n
  • Order placed

    Monday 12 May, 20:31. Paid by card

    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n

Your bike, in numbers

\n
\n

120 km

On one charge, in the middle assist level.

\n

19 kg

With the battery in, light enough for the stairs.

\n

3.5 h

From empty to full at any socket.

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

Before Thursday

\n

Four things to get ready.

\n
\n
\n 01 · done

Get the app

It unlocks the bike and shows the charge.

\n 02 · 2 min

Clear a parking spot

Two metres by sixty centimetres, near a socket.

\n 03 · 5 min

Insure it

Theft cover starts the minute it is handed over.

\n 04 · 1 min

Check the address

You can change it until 20:00 on Wednesday.

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

Delivery questions

\n

Good to know.

\n
\n
\n
\n What if I am not at home?\n

Ivo waits ten minutes and calls you. After that the bike goes back to the workshop and you choose a new slot, free of charge.

\n
\n
\n Can someone else take the bike?\n

Yes, anyone over 18 whom you name under Delivery.

\n
\n
\n Does it arrive in a box?\n

No. It is ridden or carried to you, ready to use.

\n
\n
\n How do I send it back?\n

Within 30 days we collect it at your door.

\n
\n
\n
\n
\n
    \n
  • Tip 1 of 3

    Your first ride is on us.

    Ivo rides the first kilometre with you and sets the assist to how you pedal.

    How the handover goes
    • \n
  • Tip 2 of 3

    Charge it indoors.

    The battery lifts out with the key and likes room temperature.

    • \n
  • Tip 3 of 3

    Lock the frame, not the wheel.

    The chain goes through the rear triangle and something fixed.

    • \n
\n
\n
\n

Swipe for more

\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Orders
    3. \n
\n

Your orders

\n

Everything you have bought from us, newest first.

\n
\n
\n Download invoices\n
\n
\n
\n \n
\n 6 orders\n Delivered\n On its way\n Cancelled\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
OrderItemsPlacedStatusTotal
CS-20418City bike, front carrier12 May 2025On its way2,479.00
CS-20377Helmet, folding lock28 April 2025Delivered148.00
CS-19902Rain cover3 March 2025Cancelled39.00
CS-18240Second charger19 November 2024Delivered79.00
CS-17015Child seat, mount2 September 2024Delivered164.00
\n
\n
\n Orders 1 to 5 of 6\n \n
\n
\n
\n
\n \n

No returns

\n

Anything you send back within 30 days shows here with its refund.

\n How returns work\n
\n
\n

Service plan

Year 1
\n
\n

Three check-ups are included with the bike. The first is due after 500 km.

\n

0 of 3 usedFirst check-up at 500 km

\n \n
Valid until May 2027Book a check-up
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Order CS-20418
    3. \n
  3. Delivery
    4. \n
\n

Change delivery

\n

Free until 20:00 on Wednesday. After that the bike is already on the road.

\n
\n
\n Back to tracking\n
\n
\n
\n
\n

Where and when

\n
\n
\n
\n

Thursday still has four slots. Friday is full.

\n

Not saved. We do not deliver to that postcode yet.

\n
\n
\n \n \n
\n
\n
\n \n \n Outside the delivery area.\n
\n
\n \n \n
\n
\n
\n \n \n Ivo reads this on the way to you.\n
\n \n
\n \n Keep as it is\n \n \n
\n
\n
\n
\n
\n
\n
\n

Cancel this order?

×
\n

The bike goes back to the workshop and 2,479.00 returns to your card within five days.

\n
\n Cancel order\n Keep my bike\n
\n
\n
\n
\n

Tell me when

\n
\n
    \n
    • \n
    • \n
    • \n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Help
    3. \n
  3. Delivery day
    4. \n
\n

On the day

\n

What the rider does, what you sign and what to check before he leaves.

\n
\n
\n Change delivery\n
\n
\n
\n
\n \n
\n
NKNoor answersUsually within 5 minutes
\n

Questions about order CS-20418 go straight to the workshop that built it.

\n Message the workshop\n
\n
\n
\n
\n
\n
\n

What happens at the handover

\n

The rider arrives on your bike or with it. Nothing comes in a box and nothing needs tools.

\n

Twenty minutes, three things

\n

He sets the saddle to your height, shows you the three assist levels and pairs the bike with the app. The code he asks for is the six characters shown as CS-HAND on the tracking screen; do not share it earlier.

\n
    \n
  • Check the frame number against the order.
    • \n
  • Try both brakes and the lights.
    • \n
  • Take both keys for the battery lock.
    • \n
\n

If something is not right

\n

Say so before you sign. The rider notes it and the workshop calls you the same day.

\n
\n
\n
\n Read next\n \n
\n
\n
\n
\n Do I need to be there myself?\n

You, or an adult you have named under Delivery. The rider checks a photo ID.

\n
\n
\n What if it rains?\n

The bike comes anyway. The first ride can wait for a dry day.

\n
\n
\n Is the battery charged?\n

To 80%, enough for about 95 km.

\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.modern-product.app.s08.p06.t05.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"modern-product\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-mp-8652\",\n \"short\": \"v1-mp-8652\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fffbe6;\n --color-canvas: #fffbe6;\n --color-surface: #ffffff;\n --color-surface-alt: #fff1b8;\n --color-surface-strong: #f0e4a6;\n --color-bar: #ffd60a;\n --color-bar-text: #0a0a0a;\n --color-bar-alt: #0a0a0a;\n --color-bar-alt-text: #d9d2b0;\n --color-inverse: #0a0a0a;\n --color-inverse-text: #ffd60a;\n --color-text: #1f1d14;\n --color-text-muted: #6b6648;\n --color-heading: #0a0a0a;\n --color-heading-alt: #7a5c00;\n --color-link: #0a0a0a;\n --color-link-quiet: #3d3a2a;\n --color-link-visited: #5c4a00;\n --color-link-hover: #7a5c00;\n --color-link-active: #000000;\n --color-border: #e0d9b0;\n --color-border-strong: #0a0a0a;\n --color-border-muted: #efe9c8;\n --color-accent: #ffd60a;\n --color-accent-text: #0a0a0a;\n --color-accent-alt: #ff5a1f;\n --color-fill-1: #ffe45c;\n --color-fill-2: #efeadb;\n --color-fill-3: #fff3bf;\n --color-fill-4: #e2dcc6;\n --color-button: #0a0a0a;\n --color-button-text: #fffbe6;\n --color-button-hover-text: #ffd60a;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #0a0a0a;\n --color-input: #ffffff;\n --color-input-text: #0a0a0a;\n --color-input-border: #0a0a0a;\n --color-disabled: #ece7d0;\n --color-disabled-text: #a39d80;\n --color-danger: #d92d0f;\n --color-danger-surface: #ffe8e0;\n --color-success: #1d7a3a;\n --color-warning: #b86e00;\n --color-notice: #fff1b8;\n --color-notice-text: #3d2f00;\n --color-focus: #0a0a0a;\n --color-shadow: rgb(10 10 10 / 0.16);\n --color-overlay: rgb(10 10 10 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-heading: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-ui: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n --font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 17px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 72px;\n --text-h1: 48px;\n --text-h2: 28px;\n --text-h3: 21px;\n --line-body: 1.47;\n --line-heading: 1.14;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 600;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 999px;\n --radius-panel: 20px;\n --radius-pill: 6px;\n --radius-page: 28px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 0 1px var(--color-border-strong), 0 40px 120px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 64%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(180deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 90%, black));\n --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 88%, white), var(--color-accent));\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 80%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n --backdrop-blur: 12px;\n}\n" } }