{ "id": "v1-mp-3446-dc", "long_id": "v1.modern-product.app.s03.p04.t04.u06.dc", "name": "Modern product account", "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 }, "density": "compact", "summary": "This is the signed-in account of a consumer product between 2020 and 2026, here a money app: a calm app on a soft off-white page with a translucent rail at the left, the balance in very large figures on a rounded block of the deep brand colour, and everything else as large rounded tiles with soft shadows. Type is one rounded, friendly sans, pots are tiles on four pastel fills with meters, and the payment card is drawn in CSS. It was the common look of banking, payment and subscription account pages in the first half of the 2020s.", "url": "https://chrono.skin/s/v1-mp-3446-dc", "preview_url": "https://chrono.skin/s/v1-mp-3446-dc/specimen.html", "files": { "STYLE.md": "# Modern product account\n\n## Summary\n\nThis is the signed-in account of a consumer product between 2020 and 2026, here a money app: a calm app on a soft off-white page with a translucent rail at the left, the balance in very large figures on a rounded block of the deep brand colour, and everything else as large rounded tiles with soft shadows. Type is one rounded, friendly sans, pots are tiles on four pastel fills with meters, and the payment card is drawn in CSS. It was the common look of banking, payment and subscription account pages in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. `.ds-page` is a grid of two columns: the rail, `--size-rail` (256px) wide, and the screens. Each screen's content sits in `.ds-main`, centred, at most `--size-page` (1160px) wide with `--space-6` side padding.\n- Navigation is `.ds-nav`, the rail: `position: sticky`, as tall as the window, translucent, with a hairline at its right: the brand at the top, the links with icons under it, the signed-in person at the bottom.\n- The home view stacks, `--space-5` apart: `.ds-hero`, the balance block on the inverse fill with the card at its right; `.ds-stat`, three figure tiles; a `.ds-block__head` and `.ds-grid`, four pot tiles; and `.ds-cols` (7 to 5) with the latest activity and a spending chart.\n- Inner pages have no hero. They open with `.ds-page-header` (breadcrumb, a large title, one line of text, at most two buttons at the right) on the page colour; then the working components. Tabs are a pill switch at the left of `.ds-tabsrow`, with filters or a key at its right, directly above the table panel. Content is one full-width panel (activity), `.ds-cols--even` (cards), or `.ds-cols--side` with the `.ds-sidebar` at the left (settings).\n- Views. The specimen is the account of a money app. `home` is the overview. `activity` has the switch and badge key, the payments table with its pagination, an empty scheduled-payments box and the month's totals. `cards` has the card on a tinted stage beside its switches, the open freeze dialog and the most used shops. `settings` has the sections and links at the left, the details form with its notices and buttons, and the text on limits.\n- Below 1100px the pots stand two across. Below 900px the rail becomes a translucent bar at the top of the window (brand and person in one row, the links in a second row; below 640px that row is a tab row of four equal cells, an icon over each name, the current one on its wash, and `.ds-nav__me` shows only its `.ds-avatar`) and columns stack; below 640px figure tiles stack and a wide table scrolls inside `.ds-table__wrap`. Below 1000px a `.ds-tooltip__tip` takes the width of its paragraph, so it never leaves the window. A figure in a tile is `--text-h1` but never more than 24% of the tile's width, so three tiles hold at every width with every type set. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps, lift on hover), `--space-2` 8px (icon to text, meter height), `--space-3` 12px (between buttons, navigation rows), `--space-4` 16px (tile gap, form rows, list rows), `--space-5` 24px (panel and tile padding, between blocks), `--space-6` 36px (gutter of the screen, above a block title), `--space-7` 52px (hero padding, rise of the scroll animation), `--space-8` 72px (end of a screen), `--space-9` 112px (height of a textarea).\n- Other sizes: `--size-mark` 30px, `--size-icon` 44px, `--size-control` 40px, `--size-card` 300px, `--size-tile` 168px, `--size-chart` 180px, `--size-nav` 60px, `--size-dialog` 440px.\n- Motion, in CSS only. (1) Scroll: an element with `.ds-reveal` fades in and rises by `--space-7` as it enters the window (`@keyframes ds-rise`, `animation-timeline: view()`, `animation-range: entry 0% entry 80%`); `.ds-reveal--2` and `.ds-reveal--3` start later, for the second and third item of a row; `.ds-reveal--zoom` also grows from 94%. Put it on section heads, tiles, cards, figures and feature columns, never on the navigation, the hero copy, a whole full-bleed section or the footer. (2) Hover and press: buttons rise by 2px and shrink to 97% when pressed; tiles rise by 4 to 8px; all through `--transition`. (3) Ambient: one `.ds-glow` drifting behind the balance (16s, alternating); nothing else moves by itself. Every animation is declared inside `@media (prefers-reduced-motion: no-preference)`, the scroll ones also inside `@supports (animation-timeline: view())`. The keyframes state only the start (`from`), so the resting state of every rule is the finished, visible page: without support, or with reduced motion, nothing is hidden. Lengths in keyframes are `--space-*` tokens.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of four grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. An inverse block (`--fill-inverse`, class `.ds-tone--inverse`) carries only `--color-inverse-text`. An accent block (`--fill-accent`, class `.ds-tone--accent`) carries only `--color-accent-text`. The navigation (`--fill-bar`) carries `--color-bar-text`; the footer (`--fill-bar-alt`) carries `--color-bar-alt-text`.\n- A palette may be light or dark. Nothing assumes that the page is light: the inverse block is black on a white palette and off-white on a black one, and full-bleed sections alternate page, inverse, accent and `--color-surface-alt`.\n- `--color-fill-1` to `--color-fill-4` are tile grounds that carry running text in `--color-text` and `--color-heading`: tints on a light palette, deep tones on a dark one. They never carry `--color-inverse-text`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On an inverse block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. On an accent block only `.ds-button--onaccent` (fill `--color-accent-text`, text `--color-accent`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on.\n- `--color-inverse` is also the body of a drawn device and `--color-accent` the face of a drawn payment card, so a device is drawn on the page, a fill or the accent, never on an inverse block.\n- `--fill-bar` is translucent (the bar colour mixed with `transparent` in the surface part) and the navigation blurs what scrolls under it by `--backdrop-blur`.\n- `--color-heading-alt` is the kicker above a title, the sidebar title and h3 in prose. On inverse and accent blocks the kicker inherits the block's text colour.\n- `--fill-accent` with `--color-accent-text` is the default badge. `.ds-badge--alt` and the status badges are tints: the colour mixed at 16 to 24% into `--color-surface`, the text mixed from the colour and `--color-heading`, so they hold on light and dark palettes.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface`. The destructive button is `--color-danger` with `--color-button-text`.\n- Borders are hairlines: `--border-width` in `--color-border-muted` around panels and between rows, `--color-border` under a table head, `--color-input-border` around fields. `--border-width-strong` in `--color-border` frames the empty state.\n- Radii: `--radius-control` for buttons, fields, tabs and the current row of a sidebar; `--radius-panel` for panels, the dialog and the empty state (half of it for notices and the textarea); `--radius-page` for the largest blocks (hero, tiles, stages); `--radius-pill` for badges and meters.\n- Shadows: `--shadow-panel` on panels, `--shadow-control` on buttons and the current tab, `--shadow-control-hover` on a hovered button or tile, `--shadow-dialog` on the dialog and on drawn products.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: washes of `currentColor` or a text token at 7 to 22% for hover grounds, hairlines and stages on coloured blocks; tinted badges; the error notice's edge (`--color-danger` at 35%); the footer rule (`--color-bar-alt-text` at 25%). Opacity 0.6 to 0.8 dims secondary text on inverse and accent blocks.\n- Here: `--color-page` deep navy `#0b1437` with lighter navy panels, `--color-inverse` a mint white `#e6f8f0`, `--color-accent` coral `#ff6b57` with navy text, and `--color-button`, links and kickers mint `#4fe3b0`. The four fills are deep blue, plum, teal and indigo.\n- One soft geometric family for everything (`--font-body`: Poppins, Avenir Next; the references used commercial geometric and grotesque faces), `--font-mono` for code and the fields of a mock. `--text-base` 16px at `--line-body` 1.45; `--text-ui` 14px (buttons, navigation, kickers); `--text-small` 13px (meta, badges, labels, footer, the inside of a mock); `--text-large` 19px (leads, list titles, step text); `--text-display` 88px (hero title and figures, scaled down with `clamp()` and `vw` to `--text-h2` on a phone); `--text-h1` 56px (section and page titles, the rate); `--text-h2` 32px (step titles, sums); `--text-h3` 20px (panel and tile titles).\n- Headlines are semibold, not heavy: `--weight-display` and `--weight-heading` 600, with `--display-tracking` -2.5px and `--heading-tracking` -0.4px; `--weight-ui` 500. Nothing is uppercase; links are not underlined until hovered.\n- Surface: `--radius-control` 12px (buttons and fields are rounded rectangles, not pills), `--radius-panel` 24px, `--radius-page` 32px, pills only for badges, chips and tabs' capsule ends. Panels float on `--shadow-panel` (0 16px 32px); a hovered button or tile gets a 4px ring of its own colour (`--shadow-control-hover`); mocks, the reader and the dialog carry `--shadow-dialog`. `--fill-page` adds one faint light in the upper right corner and `--fill-accent` runs the accent towards a lighter tint at 135 degrees. `--transition` is 0.2s; `--backdrop-blur` 16px.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\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; titles, kickers, leads and figures inside inherit it.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-section`: a full-width block; `--tight` with less padding, `--flush` without top padding. `.ds-section__head` centres a `.ds-section__kicker`, a `.ds-section__title` and a `.ds-section__lead`; `--left` aligns it left.\n- `.ds-reveal`: the scroll animation described under Layout; `--2`, `--3`, `--zoom`.\n- `.ds-glow`: one soft round light in `currentColor` behind a product, drifting slowly; give its parent `position: relative` and `overflow: hidden`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds the breadcrumb, the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right, on the baseline of the text.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3 for a sidebar; `--even` two equal columns. `.ds-stack` stacks blocks one `--space-5` apart.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends a small arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the button, in `--font-ui`. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` (inverse blocks), `--onaccent` (accent blocks), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table without fills: a small quiet head, hairlines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap` so that it scrolls sideways on a phone; `.ds-table__foot` is a last strip for a count and the pagination.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge or figure at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the large rounded card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link; `.ds-panel__body` is padded; `.ds-panel__text` is a paragraph.\n- `.ds-tabs`: a pill switch: `.ds-tabs__tab` on a capsule of `--color-surface-strong`, the current one (`is-current`) raised on `--fill-panel`. `.ds-tabsrow` places it above what it changes.\n- `.ds-badge`: small label on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is filled with `--color-surface-strong`.\n- `.ds-notice`: tinted rounded message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` pills; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by small arrows; the last is `.ds-breadcrumb__current`. It sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a panel in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a round `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a centred message in a frame of `--border-width-strong`: `.ds-empty__icon` (a circle of `--color-fill-1`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-main`: the centred content column of a screen. `.ds-wrap` is the same column without the padding, used inside the footer.\n- `.ds-nav`: the rail. `.ds-nav__inner` stacks the brand, `.ds-nav__links` of `.ds-nav__link` (an icon and a word; the current one on a wash, `is-current`) and `.ds-nav__me`, the signed-in person with an `.ds-avatar`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the balance block of the home view on the inverse fill: `.ds-hero__copy` with `.ds-hero__kicker` (the greeting), `.ds-hero__title` (the balance), `.ds-hero__lead` and `.ds-hero__actions` (one `--inverse` and up to two `--ghost` buttons); `.ds-hero__art` with the `.ds-card`. A `.ds-glow` in the accent colour drifts behind. One per account.\n- `.ds-card`: the payment card on the accent fill with the name, a `.ds-card__chip` and a `.ds-card__number`; tilted by 6 degrees and straightened on hover; `--flat` lies straight. `.ds-art` is a tinted stage on `--color-fill-1` for it.\n- `.ds-block`: a block of a screen, `--space-5` below the one before. `.ds-block__head` holds a `.ds-block__title` and a link at the right.\n- `.ds-stat`: the row of three figure tiles. Each `.ds-stat__item` is a panel with a `.ds-stat__kicker` (label and a badge), a `.ds-stat__figure` and a `.ds-stat__label`.\n- `.ds-grid`: four pot tiles on the four fills. Each `.ds-grid__cell` is a link with a `.ds-grid__title`, a `.ds-grid__figure`, a `.ds-grid__text` and a `.ds-meter` whose `.ds-meter__fill` is `--low`, default (half), `--high` or `--full`.\n- `.ds-list--rows`: list rows for payments: `.ds-list__row` lays out a `.ds-dot` (`--2`, `--3`, `--4`), a `.ds-list__grow` with title and meta, an optional badge and a `.ds-list__sum`.\n- `.ds-chart`: six `.ds-chart__bar` (`--1` to `--5` set the height); the current month (`is-current`) is on the accent fill.\n- `.ds-switch`: an on and off control at the right of a list row; `is-on`.\n- `.ds-footer`: an inset rounded block on `--fill-bar-alt` at the end of every screen: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then three columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n- `.ds-menu`: a navigation item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is the panel under it, shown on hover, on focus or with `is-open`, with a `.ds-menu__title` and a `.ds-menu__list` of `.ds-menu__link` per column. Below 1000px the panel is not shown and the item is a plain link.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `
` with a `.ds-accordion__head` summary and a `.ds-accordion__body`. Use it for the questions under a price or a product, never for navigation.\n- `.ds-tooltip`: a dotted-underlined term holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`. Use it for one term that needs a sentence.\n- `.ds-progress`: a thin bar; `.ds-progress__bar` with `--20`, `--40`, `--60`, `--70`, `--80`, `--100` sets how far; `.ds-progress__label` above it has a bold name and a quiet remark. Use it for a step of a flow or a share used.\n\n## Never\n\n- `font-weight <= 600`: headlines are semibold, never heavy.\n- `font-weight >= 400`: nothing is set light.\n- `font-size >= 13px`: meta, badges and the footer are the smallest text.\n- `font-size <= 88px`: the hero title and the figures are the largest text.\n- `font-families <= 2`: one geometric sans-serif family, plus monospace for code and the fields of a mock.\n- `line-height <= 1.5`: body text is set at 1.45.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 5%`: links are told apart by colour and weight; only a hovered link is underlined.\n- `text-shadow = none`: text is flat on every ground.\n- `border-width <= 4px`: borders are 2px; 4px is the rule over a figure, the pull quote's edge and the empty state's frame.\n- `border-radius <= 24px`: panels are 16px and the largest blocks 24px; only pills and circles are rounder.\n- `box-shadow-blur <= 60px`: only hovered controls and the dialog cast a shadow, and it ends at 60px.\n- `gradient-fills <= 5%`: fills are flat; only the ring of a poster is drawn with a gradient.\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 part of a screen is a `.ds-block` with a `.ds-block__head`; anything that holds data is a `.ds-panel`; a new figure is another `.ds-stat__item`, a new pot another `.ds-grid__cell` on the next fill; a new screen starts with a `.ds-page-header` inside `.ds-main`. Give new tiles and cards `.ds-reveal`, staggered with `--2` and `--3` along a row, and a hover state through `--transition`; add no animation that leaves an element hidden when it does not run. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, type sizes on the `--text-*` tokens (large titles through `clamp()` between two of them), and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-page: 1160px;\n --size-rail: 256px;\n --size-nav: 60px;\n --size-mark: 30px;\n --size-icon: 44px;\n --size-control: 40px;\n --size-dialog: 440px;\n --size-menu: 660px;\n --size-avatar: 40px;\n --size-tip: 240px;\n --size-card: 300px;\n --size-tile: 168px;\n --size-chart: 180px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 13px;\n --space-5: 19px;\n --space-6: 29px;\n --space-7: 42px;\n --space-8: 58px;\n --space-9: 90px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-wrap {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* tones: the three grounds a block can stand on besides the page.\n Each sets its own text colour; headings inside inherit it. */\n.ds-tone--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-tone--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-tone--alt {\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n\n/* motion. The resting state of every rule is the finished page; the\n animations below only run where scroll-driven timelines exist and\n the visitor has not asked for less motion. */\n@keyframes ds-rise {\n from {\n opacity: 0;\n transform: translateY(var(--space-7));\n }\n}\n@keyframes ds-zoom {\n from {\n opacity: 0;\n transform: translateY(var(--space-6)) scale(0.94);\n }\n}\n@keyframes ds-drift {\n from {\n transform: translate(calc(var(--space-8) * -1), 0) scale(1);\n }\n to {\n transform: translate(var(--space-8), var(--space-6)) scale(1.15);\n }\n}\n@keyframes ds-marquee {\n to {\n transform: translateX(-50%);\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: view()) {\n .ds-reveal {\n animation: ds-rise linear both;\n animation-timeline: view();\n animation-range: entry 0% entry 80%;\n }\n .ds-reveal--2 {\n animation-range: entry 15% entry 95%;\n }\n .ds-reveal--3 {\n animation-range: entry 30% entry 110%;\n }\n .ds-reveal--zoom {\n animation-name: ds-zoom;\n }\n }\n .ds-glow {\n animation: ds-drift 16s ease-in-out infinite alternate;\n }\n}\n\n/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n max-width: 68ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h2);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h3);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n}\n.ds-prose p {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--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__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-list__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: the large rounded card */\n.ds-panel {\n min-width: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.8;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 24%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 40%, var(--color-heading));\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"\\203A\";\n margin-left: var(--space-2);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* page header: the head of an inner page */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7) 0 var(--space-6);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 56ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-7) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-3) 0 var(--space-5);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-7) var(--space-5);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* tabs: a pill switch */\n.ds-tabs {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1);\n border-radius: var(--radius-control);\n background: var(--color-surface-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-panel);\n color: var(--color-heading);\n box-shadow: var(--shadow-control);\n}\n\n/* sections and their heads */\n.ds-section {\n padding: var(--space-9) 0;\n}\n.ds-section__head {\n max-width: 90ch;\n margin: 0 auto var(--space-7);\n text-align: center;\n}\n.ds-section__kicker {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-section__lead {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n gap: var(--space-7);\n}\n.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/* glow: one soft light behind a product, drifting slowly */\n.ds-glow {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 60%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: radial-gradient(closest-side, currentColor, transparent);\n opacity: 0.28;\n pointer-events: none;\n}\n\n/* marquee: a row of names set as text, sliding slowly */\n\n/* footer: small grey link columns */\n.ds-footer {\n padding: var(--space-8) 0 var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-footer__about {\n max-width: 30ch;\n margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.8;\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n opacity: 1;\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__legal {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-7) 0 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n opacity: 0.8;\n}\n\n@media (max-width: 900px) {\n .ds-cols,\n .ds-cols--side,\n .ds-cols--even {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n }\n .ds-footer__cols {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-section {\n padding: var(--space-8) 0;\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table {\n font-size: var(--text-small);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-page-header {\n padding: var(--space-6) 0 var(--space-5);\n }\n}\n.ds-view > .ds-wrap:last-child {\n padding-bottom: var(--space-8);\n}\n\n/* ---- components of the period beyond the checklist ---- */\n\n/* menu: a wide drop-down under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: var(--space-2);\n border-right: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n transform: translateY(-35%) rotate(45deg);\n opacity: 0.6;\n}\n.ds-menu__panel {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n width: var(--size-menu);\n max-width: 92vw;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n text-transform: none;\n box-shadow: var(--shadow-dialog);\n opacity: 0;\n visibility: hidden;\n transform: translateY(calc(var(--space-2) * -1));\n transition: var(--transition);\n}\n.ds-menu:hover .ds-menu__panel,\n.ds-menu:focus-within .ds-menu__panel,\n.ds-menu.is-open .ds-menu__panel {\n opacity: 1;\n visibility: visible;\n transform: none;\n}\n.ds-menu__title {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-menu__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: normal;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-menu__link small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: questions that open and close, built on details */\n.ds-accordion {\n min-width: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n display: block;\n flex: none;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) round(var(--space-6) * 0.4, var(--space-1)) no-repeat,\n var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] .ds-accordion__head::after,\n.ds-accordion__item.is-open .ds-accordion__head::after {\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: 62ch;\n padding: 0 0 var(--space-5);\n color: var(--color-text);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: inherit;\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: var(--size-tip);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-panel) / 2.5);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n opacity: 0;\n visibility: hidden;\n transform: translate(-50%, var(--space-1));\n transition: var(--transition);\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, 0);\n}\n\n/* carousel: a row of slides, one showing, moved by scroll snapping */\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n opacity: 1;\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__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/* voice: what a customer says, the slide of a carousel that shows two and a bit */\n/* toggle: a switch with its label, beside the tabs of a pricing or filter row */\n.ds-progress--gap {\n margin: var(--space-3) 0 var(--space-5);\n}\n@media (max-width: 1000px) {\n .ds-menu__panel {\n display: none;\n }\n .ds-menu__toggle::after {\n display: none;\n }\n}\n\n.ds-nav__inner > .ds-menu {\n margin-top: auto;\n}\n.ds-menu--up .ds-menu__panel {\n top: auto;\n bottom: 100%;\n grid-template-columns: minmax(0, 1fr);\n width: calc(var(--size-rail) - var(--space-5));\n margin-bottom: var(--space-2);\n}\n\n/* ---- layout: the signed-in account of a consumer money app ---- */\n\n/* shell: a rail at the left that stays in place, the screens beside it */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n grid-template-rows: 1fr auto;\n}\n.ds-view,\n.ds-footer {\n grid-column: 2;\n min-width: 0;\n}\n.ds-main {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) var(--space-6) var(--space-8);\n}\n\n/* nav: the translucent rail; under 900px a translucent bar at the top */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n grid-column: 1;\n grid-row: 1 / span 2;\n align-self: start;\n height: 100vh;\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(1.6);\n backdrop-filter: blur(var(--backdrop-blur)) saturate(1.6);\n}\n.ds-nav__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n height: 100%;\n padding: var(--space-5) var(--space-4);\n}\n.ds-nav__inner .ds-brand {\n padding: 0 var(--space-3);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3);\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) 7%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#activity:target) .ds-nav__link[href=\"#activity\"],\n.ds-page:has(#cards:target) .ds-nav__link[href=\"#cards\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n background: color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n}\n.ds-nav__me {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3);\n border-radius: var(--radius-panel);\n background: color-mix(in srgb, var(--color-bar-text) 7%, transparent);\n color: inherit;\n font-size: var(--text-small);\n text-decoration: none;\n}\n.ds-nav__me strong {\n display: block;\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n border-radius: 50%;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* hero: the balance, on a rounded block of the inverse colour */\n.ds-hero {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-7);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-hero__copy {\n position: relative;\n min-width: 0;\n}\n.ds-hero__kicker {\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 text-transform: var(--ui-transform);\n opacity: 0.75;\n}\n.ds-hero__title {\n margin: 0;\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-hero__lead {\n max-width: 40ch;\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n opacity: 0.8;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n.ds-hero__art {\n position: relative;\n display: flex;\n justify-content: center;\n padding: var(--space-5) 0;\n}\n.ds-hero .ds-glow {\n top: -30%;\n left: 45%;\n color: var(--color-accent);\n opacity: 0.55;\n}\n\n/* card: the payment card, drawn; tilted until it is hovered */\n.ds-card {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: var(--size-card);\n max-width: 100%;\n aspect-ratio: 1.586;\n padding: var(--space-5);\n border-radius: calc(var(--radius-panel) / 1.6);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n box-shadow: var(--shadow-dialog);\n transform: rotate(-6deg);\n transition: var(--transition);\n}\n.ds-card:hover,\n.ds-card.is-hover {\n transform: rotate(0) scale(1.03);\n}\n.ds-card--flat {\n transform: none;\n}\n.ds-card__chip {\n width: var(--space-7);\n height: var(--space-6);\n border-radius: var(--space-2);\n background: color-mix(in srgb, currentColor 55%, transparent);\n}\n.ds-card__number {\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n}\n.ds-art {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n min-height: 100%;\n padding: var(--space-7) var(--space-5);\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n color: var(--color-heading);\n overflow: hidden;\n}\n\n/* blocks of a screen */\n.ds-block {\n margin-top: var(--space-5);\n}\n.ds-block__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-6) 0 var(--space-4);\n}\n.ds-block__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* stats: here each figure is a rounded tile */\n.ds-stat {\n gap: var(--space-4);\n}\n.ds-stat__item {\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 transition: var(--transition);\n}\n.ds-stat__item:hover,\n.ds-stat__item.is-hover {\n transform: scale(1.015);\n}\n/* a figure never outgrows its tile: it is capped at a share of the tile's width */\n.ds-stat__item {\n container-type: inline-size;\n}\n.ds-stat__figure {\n font-size: min(var(--text-h1), 24cqi);\n letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n max-width: none;\n margin-top: var(--space-1);\n font-size: var(--text-base);\n}\n.ds-stat__kicker {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-4);\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/* grid: pots, four rounded tiles on the fills, each with a meter */\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 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__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-grid__figure {\n margin: auto 0 0;\n padding-top: var(--space-5);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-meter {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-heading) 12%, transparent);\n overflow: hidden;\n}\n.ds-meter__fill {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--color-heading);\n}\n.ds-meter__fill--low { width: 22%; }\n.ds-meter__fill--high { width: 78%; }\n.ds-meter__fill--full { width: 100%; }\n\n/* rows of the activity list */\n.ds-list__row {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-list__grow {\n flex: 1;\n min-width: 0;\n}\n.ds-list__sum {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.ds-list--rows .ds-list__title {\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-dot {\n display: inline-flex;\n flex: none;\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-dot svg {\n width: 45%;\n height: 45%;\n}\n.ds-dot--2 { background: var(--color-fill-2); }\n.ds-dot--3 { background: var(--color-fill-3); }\n.ds-dot--4 { background: var(--color-fill-4); }\n\n/* chart: six bars, the current month in the accent colour */\n.ds-chart {\n display: flex;\n align-items: flex-end;\n gap: var(--space-3);\n height: var(--size-chart);\n margin: 0 0 var(--space-4);\n}\n.ds-chart__bar {\n flex: 1;\n height: 50%;\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-surface-strong);\n transition: var(--transition);\n}\n.ds-chart__bar:hover,\n.ds-chart__bar.is-hover {\n background: var(--color-border-strong);\n}\n.ds-chart__bar--1 { height: 38%; }\n.ds-chart__bar--2 { height: 62%; }\n.ds-chart__bar--3 { height: 48%; }\n.ds-chart__bar--4 { height: 86%; }\n.ds-chart__bar--5 { height: 58%; }\n.ds-chart__bar.is-current,\n.ds-chart__bar.is-current:hover {\n height: 72%;\n background: var(--fill-accent);\n}\n\n/* switch: an on and off control in a settings row */\n.ds-switch {\n position: relative;\n display: inline-block;\n flex: none;\n width: var(--space-7);\n height: calc(var(--space-5) + var(--space-1));\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n transition: var(--transition);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: var(--space-1);\n width: calc(var(--space-5) - var(--space-1));\n height: calc(var(--space-5) - var(--space-1));\n border-radius: 50%;\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch.is-on {\n background: var(--color-button);\n}\n.ds-switch.is-on::after {\n left: calc(100% - var(--space-5));\n}\n\n/* inner pages */\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-page-header {\n padding-top: var(--space-5);\n}\n\n/* footer: an inset rounded block at the end of the screens */\n.ds-footer {\n margin: 0 var(--space-6) var(--space-6);\n padding: var(--space-7) var(--space-6) var(--space-5);\n border-radius: var(--radius-page);\n}\n.ds-footer .ds-wrap {\n padding: 0;\n}\n.ds-footer__cols {\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n}\n.ds-footer__legal {\n margin-top: var(--space-6);\n}\n\n@media (max-width: 1100px) {\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 900px) {\n .ds-page {\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n }\n .ds-view,\n .ds-footer {\n grid-column: 1;\n }\n .ds-nav {\n grid-row: auto;\n height: auto;\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n }\n .ds-nav__inner {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__inner .ds-brand {\n padding: 0;\n }\n .ds-nav__links {\n order: 3;\n flex: none;\n flex-direction: row;\n width: 100%;\n overflow-x: auto;\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__link svg,\n .ds-nav__me span:not(.ds-avatar) {\n display: none;\n }\n .ds-nav__me {\n padding: 0;\n background: transparent;\n }\n .ds-main {\n padding: var(--space-4) var(--space-4) var(--space-7);\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-6) var(--space-5);\n }\n .ds-hero__title {\n letter-spacing: var(--heading-tracking);\n }\n .ds-footer {\n margin: 0 var(--space-4) var(--space-4);\n padding: var(--space-6) var(--space-5) var(--space-5);\n }\n .ds-footer__cols {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 640px) {\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-grid__cell {\n min-height: 0;\n padding: var(--space-4);\n }\n .ds-list__row {\n gap: var(--space-3);\n }\n .ds-hero__art {\n padding: 0;\n }\n}\n\n/* phone: a tooltip takes the width of its paragraph, so it never leaves the window */\n@media (max-width: 1000px) {\n .ds-page :has(> .ds-tooltip) {\n position: relative;\n }\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n right: 0;\n left: 0;\n width: auto;\n max-width: none;\n transform: translateY(var(--space-1));\n }\n .ds-tooltip:hover .ds-tooltip__tip,\n .ds-tooltip:focus .ds-tooltip__tip,\n .ds-tooltip:focus-within .ds-tooltip__tip,\n .ds-tooltip.is-open .ds-tooltip__tip {\n transform: none;\n }\n}\n\n/* phone navigation: the brand and the account in the bar, the four screens\n under it as a tab row of equal cells, each an icon over its name */\n@media (max-width: 900px) {\n .ds-nav__links {\n justify-content: center;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__links {\n gap: var(--space-1);\n overflow-x: visible;\n }\n .ds-nav__links > li {\n flex: 1;\n min-width: 0;\n }\n .ds-nav__link {\n flex-direction: column;\n justify-content: center;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-1);\n font-size: var(--text-small);\n }\n .ds-nav__link svg {\n display: block;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: modern product account specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n MOMara OkaforPlus plan\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n \n
\n

Good evening, Mara

\n

4,812.40

\n

Left to spend until payday on the 28th. Two payments are still pending.

\n
\n Send money\n Add money\n Card\n
\n
\n
\n
chronoskin•••• •••• •••• 4821
\n
\n
\n\n
\n
\n

Spent this month On track

1,206.15

of a 1,900 budget

\n

Saved in pots +3.1%

7,430.00

across four pots

\n

Coming in 28th

2,150.00

salary, in nine days

\n
\n
\n\n

Pots

Manage pots
\n
\n

Rent and bills

1,150.00

Full for this month

\n

Holiday

2,340.00

78% of 3,000

\n

Rainy day

3,500.00

Half of 7,000

\n

New bike

440.00

22% of 2,000

\n
\n\n
\n
\n

Latest activity

See all
\n
\n \n
\n
\n
\n

Spending

6 months
\n
\n
\n

You have spent 310 less than at this point last month, mostly on eating out.

\n Open the breakdown\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. Activity
    3. \n
  3. October
    4. \n
\n

Activity

\n

Everything in and out of your main account this month.

\n
\n
\n Export\n Send money\n
\n
\n
\n \n
\n October\n 2 pots\n Paid\n Pending\n Declined\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
DatePaid to or fromCategoryStatusAmount
19 OctMarrow MarketGroceriesPaid-42.18
19 OctHarbour CoffeeEating outPaid-3.40
18 OctRound-up to HolidayPotsMoved+0.60
17 OctNorthline RailTransportPending-18.90
16 OctTern CyclesShoppingDeclined-389.00
15 OctIngrid LindqvistFriendsPaid+25.00
\n
\n
\n
\n 1 to 6 of 48 payments\n \n
\n
\n
\n
\n \n

No scheduled payments

\n

Standing orders and payments you plan ahead will be listed here.

\n Schedule a payment\n
\n
\n

This month so far

\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. Cards
    3. \n
\n

Cards

\n

One in your wallet, one on your phone. Both answer to these switches.

\n
\n
\n Add a virtual card\n
\n
\n
\n
\n
chronoskin•••• •••• •••• 4821
\n
ActiveExpires 08/29
\n
\n
\n

Card controls

\n
\n
    \n
  • Contactless

    Up to 100 without a PIN

    • \n
  • Online payments

    Shops and subscriptions

    • \n
  • Cash machines

    600 a month abroad

    • \n
  • Freeze this card

    Stops every payment until you thaw it

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

Freeze the card ending 4821?

×
\n

Payments by card and by phone will be declined. Standing orders are not affected.

\n
\n Freeze card\n Cancel\n
\n
\n
\n
\n

Used most this month

\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Overview
    2. \n
  2. Settings
    3. \n
  3. Your details
    4. \n
\n

Settings

\n

Who you are, how we reach you and what the account may do.

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

Your details

Verified
\n
\n
\n
\n

Changing your name? We will ask for a photo of your new ID.

\n

Not saved. The phone number below is not complete.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n Three digits are missing.\n
\n
\n \n \n Used in the app and in emails.\n
\n
\n
\n \n \n
\n \n
\n \n Cancel\n \n \n
\n
\n
\n
\n
\n
\n
\n

Your limits

\n

Limits keep a lost phone from becoming a lost month. You can lower any of them yourself.

\n

Payments

\n

You can send up to 10,000 a day to people you have paid before. A new payeeSomeone you have not paid from this account before. starts at 1,000; the reference NEW-PAYEE shows on the first payment.

\n

Cash

\n
    \n
  • 400 a day at home.
    • \n
  • 600 a month abroad on the Plus plan.
    • \n
\n
\n

Sent today2,000 of 10,000

\n\n
\n
\nWhy is my limit lower abroad?\n

Cash machines abroad are where stolen cards are tried first, so the monthly figure is smaller.

\n
\n
\nHow do I raise a limit?\n

Ask in chat. We may ask what the payment is for and answer within a day.

\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.modern-product.app.s03.p04.t04.u06.dc\",\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-3446-dc\",\n \"short\": \"v1-mp-3446-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0b1437;\n --color-canvas: #0b1437;\n --color-surface: #16224f;\n --color-surface-alt: #101b45;\n --color-surface-strong: #24326b;\n --color-bar: #0b1437;\n --color-bar-text: #eef2ff;\n --color-bar-alt: #070d27;\n --color-bar-alt-text: #9aa6cf;\n --color-inverse: #e6f8f0;\n --color-inverse-text: #0b1437;\n --color-text: #c5cdea;\n --color-text-muted: #8e9ac4;\n --color-heading: #ffffff;\n --color-heading-alt: #4fe3b0;\n --color-link: #4fe3b0;\n --color-link-quiet: #c5cdea;\n --color-link-visited: #9fd0c0;\n --color-link-hover: #92f2cf;\n --color-link-active: #2fc492;\n --color-border: #2c3a73;\n --color-border-strong: #5565a3;\n --color-border-muted: #1e2a5a;\n --color-accent: #ff6b57;\n --color-accent-text: #0b1437;\n --color-accent-alt: #7cc4ff;\n --color-fill-1: #15305c;\n --color-fill-2: #3a2046;\n --color-fill-3: #123c47;\n --color-fill-4: #1c2658;\n --color-button: #4fe3b0;\n --color-button-text: #06122e;\n --color-button-hover-text: #06122e;\n --color-button-secondary: #0b1437;\n --color-button-secondary-text: #eef2ff;\n --color-input: #101b45;\n --color-input-text: #ffffff;\n --color-input-border: #35447f;\n --color-disabled: #1a2552;\n --color-disabled-text: #5b689c;\n --color-danger: #ff4f7b;\n --color-danger-surface: #3a1233;\n --color-success: #2fd08f;\n --color-warning: #ffc857;\n --color-notice: #16305c;\n --color-notice-text: #cfe6ff;\n --color-focus: #4fe3b0;\n --color-shadow: rgb(2 6 23 / 0.5);\n --color-overlay: rgb(3 8 28 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: Poppins, \"Avenir Next\", Avenir, Montserrat, \"Century Gothic\", sans-serif;\n --font-heading: Poppins, \"Avenir Next\", Avenir, Montserrat, \"Century Gothic\", sans-serif;\n --font-ui: Poppins, \"Avenir Next\", Avenir, Montserrat, \"Century Gothic\", sans-serif;\n --font-mono: \"DM Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 88px;\n --text-h1: 56px;\n --text-h2: 32px;\n --text-h3: 20px;\n --line-body: 1.45;\n --line-heading: 1.15;\n --line-display: 1.02;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.4px;\n --display-tracking: -2.5px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 999px;\n --radius-panel: 16px;\n --radius-pill: 999px;\n --radius-page: 24px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 8px 20px var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 24px 60px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 92%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 82%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s ease-out;\n --backdrop-blur: 8px;\n}\n" } }