{
  "id": "v1-mp-3333",
  "long_id": "v1.modern-product.app.s03.p03.t03.u03",
  "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": "pure",
  "viewport": {
    "width": 1440,
    "fluid": true
  },
  "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-3333",
  "preview_url": "https://chrono.skin/s/v1-mp-3333/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 that scrolls sideways) and columns stack; below 640px figure tiles stack and a wide table scrolls inside `.ds-table__wrap`. 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\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` soft off-white `#f4f1ea`, `--color-surface` white, `--color-inverse` deep aubergine `#260a2f` (also `--color-heading` and the footer), `--color-accent` and `--color-button` violet `#5b3df5`. The fills are four pastels: lilac, peach, mint and straw.\n- One rounded family for everything (`--font-body`: Nunito, Varela Round, the system rounded face; the references used custom rounded and geometric faces), `--font-mono` for code and the card number. `--text-base` 18px at `--line-body` 1.6; `--text-ui` 16px (buttons, navigation, tile names); `--text-small` 14px (meta, badges, labels); `--text-large` 22px (leads); `--text-display` 84px (the balance, scaled down with `clamp()` and `vw` to `--text-h1`); `--text-h1` 54px (page titles and tile figures); `--text-h2` 34px (block titles, pot sums); `--text-h3` 21px (panel titles).\n- Weights are friendly, not heavy: `--weight-display` 700, `--weight-heading` 600, `--weight-ui` and `--weight-bold` 700. Nothing is uppercase and links are never underlined.\n- Surface: controls are rounded rectangles (`--radius-control` 16px), panels 28px, the largest blocks 36px, badges pills. `--shadow-panel` is a soft two-layer shadow tinted with the brand colour; buttons have a faint shadow that grows on hover and turns inward when pressed. `--fill-inverse` is a radial light from the top left corner; `--fill-button` a shallow vertical gradient. `--border-width-strong` is 3px. `--transition` is 0.25s; `--backdrop-blur` 28px.\n\n## Components\n\n- `.ds-page`: on `<body>`. 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\n## Never\n\n- `font-weight <= 700`: type is bold at most, never black.\n- `font-size >= 14px`: meta, badges and labels are the smallest text.\n- `font-size <= 84px`: the balance is the largest text.\n- `font-families <= 2`: one rounded sans-serif family, plus monospace for code and card numbers.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 0%`: links are told apart by colour and weight.\n- `text-shadow = none`: text is flat on every ground.\n- `border-width <= 3px`: borders are hairlines; 3px frames the empty state.\n- `border-radius <= 36px`: panels are 28px and the largest blocks 36px; only pills and circles are rounder.\n- `box-shadow-blur <= 90px`: shadows are soft and wide but end at 90px.\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-card: 300px;\n  --size-tile: 168px;\n  --size-chart: 180px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 36px;\n  --space-7: 52px;\n  --space-8: 72px;\n  --space-9: 112px;\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@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  .ds-marquee__track {\n    animation: ds-marquee 40s linear infinite;\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 that lift on hover and 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  transform: translateY(calc(var(--space-1) * -0.5));\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--wide {\n  width: 100%;\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--tight {\n  padding: var(--space-8) 0;\n}\n.ds-section--flush {\n  padding-top: 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/* 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.ds-marquee {\n  overflow: hidden;\n}\n.ds-marquee__track {\n  display: flex;\n  gap: var(--space-8);\n  width: max-content;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-marquee__name {\n  color: var(--color-text-muted);\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  white-space: nowrap;\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  .ds-section--flush {\n    padding-top: 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--flush {\n    padding-top: 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  .ds-marquee__track {\n    gap: var(--space-6);\n  }\n}\n.ds-view > .ds-wrap:last-child {\n  padding-bottom: var(--space-8);\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: translateY(calc(var(--space-1) * -1));\n}\n.ds-stat__figure {\n  font-size: var(--text-h1);\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: translateY(calc(var(--space-1) * -1)) scale(1.01);\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 {\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",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: modern product account specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 9l7-6 7 6v8H3z\"/></svg>Overview</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#activity\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 6h12 M4 10h12 M4 14h8\"/></svg>Activity</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#cards\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 5h14v10H3z M3 9h14\"/></svg>Cards</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#settings\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6 M10 2v2 M10 16v2 M2 10h2 M16 10h2\"/></svg>Settings</a></li>\n    </ul>\n    <a class=\"ds-nav__me\" href=\"#settings\"><span class=\"ds-avatar\">MO</span><span><strong>Mara Okafor</strong>Plus plan</span></a>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-main\">\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <span class=\"ds-glow\" aria-hidden=\"true\"></span>\n      <div class=\"ds-hero__copy\">\n        <p class=\"ds-hero__kicker\">Good evening, Mara</p>\n        <h1 class=\"ds-hero__title\">4,812.40</h1>\n        <p class=\"ds-hero__lead\">Left to spend until payday on the 28th. Two payments are still pending.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--inverse\" href=\"#activity\">Send money</a>\n          <a class=\"ds-button ds-button--ghost\" href=\"#activity\">Add money</a>\n          <a class=\"ds-button ds-button--ghost\" href=\"#cards\">Card</a>\n        </div>\n      </div>\n      <div class=\"ds-hero__art\" aria-hidden=\"true\">\n        <div class=\"ds-card\"><span>chronoskin</span><span class=\"ds-card__chip\"></span><span class=\"ds-card__number\">&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; 4821</span></div>\n      </div>\n    </div>\n\n    <div class=\"ds-block\">\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__item ds-reveal\"><p class=\"ds-stat__kicker\">Spent this month <span class=\"ds-badge ds-badge--success\">On track</span></p><p class=\"ds-stat__figure\">1,206.15</p><p class=\"ds-stat__label\">of a 1,900 budget</p></div>\n        <div class=\"ds-stat__item ds-reveal ds-reveal--2\"><p class=\"ds-stat__kicker\">Saved in pots <span class=\"ds-badge ds-badge--alt\">+3.1%</span></p><p class=\"ds-stat__figure\">7,430.00</p><p class=\"ds-stat__label\">across four pots</p></div>\n        <div class=\"ds-stat__item ds-reveal ds-reveal--3\"><p class=\"ds-stat__kicker\">Coming in <span class=\"ds-badge ds-badge--quiet\">28th</span></p><p class=\"ds-stat__figure\">2,150.00</p><p class=\"ds-stat__label\">salary, in nine days</p></div>\n      </div>\n    </div>\n\n    <div class=\"ds-block__head\"><h2 class=\"ds-block__title\">Pots</h2><a class=\"ds-link ds-link--more\" href=\"#settings\">Manage pots</a></div>\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <a class=\"ds-grid__cell ds-reveal\" href=\"#activity\"><h3 class=\"ds-grid__title\">Rent and bills</h3><p class=\"ds-grid__figure\">1,150.00</p><p class=\"ds-grid__text\">Full for this month</p><span class=\"ds-meter\"><span class=\"ds-meter__fill ds-meter__fill--full\"></span></span></a>\n      <a class=\"ds-grid__cell ds-reveal ds-reveal--2\" href=\"#activity\"><h3 class=\"ds-grid__title\">Holiday</h3><p class=\"ds-grid__figure\">2,340.00</p><p class=\"ds-grid__text\">78% of 3,000</p><span class=\"ds-meter\"><span class=\"ds-meter__fill ds-meter__fill--high\"></span></span></a>\n      <a class=\"ds-grid__cell ds-reveal ds-reveal--2\" href=\"#activity\"><h3 class=\"ds-grid__title\">Rainy day</h3><p class=\"ds-grid__figure\">3,500.00</p><p class=\"ds-grid__text\">Half of 7,000</p><span class=\"ds-meter\"><span class=\"ds-meter__fill\"></span></span></a>\n      <a class=\"ds-grid__cell ds-reveal ds-reveal--3\" href=\"#activity\"><h3 class=\"ds-grid__title\">New bike</h3><p class=\"ds-grid__figure\">440.00</p><p class=\"ds-grid__text\">22% of 2,000</p><span class=\"ds-meter\"><span class=\"ds-meter__fill ds-meter__fill--low\"></span></span></a>\n    </div>\n\n    <div class=\"ds-block ds-cols\">\n      <div class=\"ds-panel ds-reveal\" data-component=\"panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Latest activity</h2><a class=\"ds-link ds-link--more\" href=\"#activity\">See all</a></div>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-list ds-list--rows\" data-component=\"list\">\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 8h12l-1 8H5z M7 8a3 3 0 0 1 6 0\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Marrow Market</a><p class=\"ds-list__meta\">Groceries, today 18:12</p></div><span class=\"ds-list__sum\">-42.18</span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--2\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 6h10v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z M14 7h2v3h-2\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Harbour Coffee</a><p class=\"ds-list__meta\">Eating out, today 08:40</p></div><span class=\"ds-list__sum\">-3.40</span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--3\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 16V4 M5 9l5-5 5 5\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Round-up to Holiday</a><p class=\"ds-list__meta\">Pots, yesterday</p></div><span class=\"ds-list__sum\">+0.60</span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--4\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 3h10v10H5z M5 9h10 M7 17l1-4 M13 17l-1-4\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Northline Rail</a><p class=\"ds-list__meta\">Transport, Monday</p></div><span class=\"ds-badge ds-badge--warning\">Pending</span><span class=\"ds-list__sum\">-18.90</span></div></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-panel ds-reveal ds-reveal--2\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Spending</h2><span class=\"ds-badge ds-badge--quiet\">6 months</span></div>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-chart\" aria-hidden=\"true\"><span class=\"ds-chart__bar ds-chart__bar--1\"></span><span class=\"ds-chart__bar ds-chart__bar--2\"></span><span class=\"ds-chart__bar ds-chart__bar--3\"></span><span class=\"ds-chart__bar ds-chart__bar--4\"></span><span class=\"ds-chart__bar ds-chart__bar--5\"></span><span class=\"ds-chart__bar is-current\"></span></div>\n          <p class=\"ds-panel__text\">You have spent 310 less than at this point last month, mostly on eating out.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#activity\">Open the breakdown</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"activity\">\n  <div class=\"ds-main\">\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Overview</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#activity\">Activity</a></li>\n          <li class=\"ds-breadcrumb__current\">October</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Activity</h1>\n        <p class=\"ds-page-header__text\">Everything in and out of your main account this month.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#activity\">Export</a>\n        <a class=\"ds-button\" href=\"#activity\">Send money</a>\n      </div>\n    </div>\n    <div class=\"ds-tabsrow\">\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#activity\">All</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#activity\">Money in</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#activity\">Money out</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#activity\">Pending</a></li>\n      </ul>\n      <div class=\"ds-badgerow\" data-component=\"badge\">\n        <span class=\"ds-badge\">October</span>\n        <span class=\"ds-badge ds-badge--alt\">2 pots</span>\n        <span class=\"ds-badge ds-badge--success\">Paid</span>\n        <span class=\"ds-badge ds-badge--warning\">Pending</span>\n        <span class=\"ds-badge ds-badge--danger\">Declined</span>\n      </div>\n    </div>\n    <div class=\"ds-panel\">\n      <div class=\"ds-panel__body\">\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Date</th><th>Paid to or from</th><th>Category</th><th>Status</th><th class=\"ds-table__num\">Amount</th></tr>\n            </thead>\n            <tbody>\n              <tr><td>19 Oct</td><td><a class=\"ds-table__title\" href=\"#activity\">Marrow Market</a></td><td>Groceries</td><td><span class=\"ds-badge ds-badge--success\">Paid</span></td><td class=\"ds-table__num\">-42.18</td></tr>\n              <tr><td>19 Oct</td><td><a class=\"ds-table__title\" href=\"#activity\">Harbour Coffee</a></td><td>Eating out</td><td><span class=\"ds-badge ds-badge--success\">Paid</span></td><td class=\"ds-table__num\">-3.40</td></tr>\n              <tr class=\"is-hover\"><td>18 Oct</td><td><a class=\"ds-table__title\" href=\"#activity\">Round-up to Holiday</a></td><td>Pots</td><td><span class=\"ds-badge ds-badge--quiet\">Moved</span></td><td class=\"ds-table__num\">+0.60</td></tr>\n              <tr><td>17 Oct</td><td><a class=\"ds-table__title\" href=\"#activity\">Northline Rail</a></td><td>Transport</td><td><span class=\"ds-badge ds-badge--warning\">Pending</span></td><td class=\"ds-table__num\">-18.90</td></tr>\n              <tr><td>16 Oct</td><td><a class=\"ds-table__title\" href=\"#activity\">Tern Cycles</a></td><td>Shopping</td><td><span class=\"ds-badge ds-badge--danger\">Declined</span></td><td class=\"ds-table__num\">-389.00</td></tr>\n              <tr><td>15 Oct</td><td><a class=\"ds-table__title\" href=\"#activity\">Ingrid Lindqvist</a></td><td>Friends</td><td><span class=\"ds-badge ds-badge--success\">Paid</span></td><td class=\"ds-table__num\">+25.00</td></tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n      <div class=\"ds-table__foot\">\n        <span>1 to 6 of 48 payments</span>\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#activity\">Previous</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#activity\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#activity\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#activity\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#activity\">Next</a></li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"ds-block ds-cols ds-cols--even\">\n      <div class=\"ds-empty\" data-component=\"empty\">\n        <span class=\"ds-empty__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h12v11H4z M4 9h12 M7 3v3 M13 3v3\"/></svg></span>\n        <h2 class=\"ds-empty__title\">No scheduled payments</h2>\n        <p class=\"ds-empty__text\">Standing orders and payments you plan ahead will be listed here.</p>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#activity\">Schedule a payment</a>\n      </div>\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">This month so far</h2></div>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-list ds-list--rows\">\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--3\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 16V4 M5 9l5-5 5 5\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Money in</a><p class=\"ds-list__meta\">3 payments</p></div><span class=\"ds-list__sum\">+2,175.60</span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--2\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 4v12 M5 11l5 5 5-5\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Money out</a><p class=\"ds-list__meta\">45 payments</p></div><span class=\"ds-list__sum\">-1,206.15</span></div></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"cards\">\n  <div class=\"ds-main\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Overview</a></li>\n          <li class=\"ds-breadcrumb__current\">Cards</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Cards</h1>\n        <p class=\"ds-page-header__text\">One in your wallet, one on your phone. Both answer to these switches.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#cards\">Add a virtual card</a>\n      </div>\n    </div>\n    <div class=\"ds-cols ds-cols--even\">\n      <div class=\"ds-art\">\n        <div class=\"ds-card ds-card--flat\"><span>chronoskin</span><span class=\"ds-card__chip\"></span><span class=\"ds-card__number\">&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; 4821</span></div>\n        <div class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--success\">Active</span><span class=\"ds-badge ds-badge--quiet\">Expires 08/29</span></div>\n      </div>\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Card controls</h2></div>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-list ds-list--rows\">\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><div class=\"ds-list__grow\"><span class=\"ds-list__title\">Contactless</span><p class=\"ds-list__meta\">Up to 100 without a PIN</p></div><span class=\"ds-switch is-on\"></span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><div class=\"ds-list__grow\"><span class=\"ds-list__title\">Online payments</span><p class=\"ds-list__meta\">Shops and subscriptions</p></div><span class=\"ds-switch is-on\"></span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><div class=\"ds-list__grow\"><span class=\"ds-list__title\">Cash machines</span><p class=\"ds-list__meta\">600 a month abroad</p></div><span class=\"ds-switch is-on\"></span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><div class=\"ds-list__grow\"><span class=\"ds-list__title\">Freeze this card</span><p class=\"ds-list__meta\">Stops every payment until you thaw it</p></div><span class=\"ds-switch\"></span></div></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"ds-block ds-cols ds-cols--even\">\n      <div class=\"ds-dialog\" data-component=\"dialog\">\n        <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"c-dialog\">\n          <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"c-dialog\">Freeze the card ending 4821?</h2><a class=\"ds-dialog__close\" href=\"#cards\" aria-label=\"Close\">&times;</a></div>\n          <div class=\"ds-dialog__body\"><p>Payments by card and by phone will be declined. Standing orders are not affected.</p></div>\n          <div class=\"ds-dialog__actions\">\n            <a class=\"ds-button ds-button--danger ds-button--small\" href=\"#cards\">Freeze card</a>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#cards\">Cancel</a>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Used most this month</h2></div>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-list ds-list--rows\">\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 8h12l-1 8H5z M7 8a3 3 0 0 1 6 0\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Marrow Market</a><p class=\"ds-list__meta\">9 payments</p></div><span class=\"ds-list__sum\">-212.40</span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--2\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 6h10v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z M14 7h2v3h-2\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Harbour Coffee</a><p class=\"ds-list__meta\">14 payments</p></div><span class=\"ds-list__sum\">-47.60</span></div></li>\n            <li class=\"ds-list__item\"><div class=\"ds-list__row\"><span class=\"ds-dot ds-dot--4\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 3h10v10H5z M5 9h10 M7 17l1-4 M13 17l-1-4\"/></svg></span><div class=\"ds-list__grow\"><a class=\"ds-list__title\" href=\"#activity\">Northline Rail</a><p class=\"ds-list__meta\">6 payments</p></div><span class=\"ds-list__sum\">-113.40</span></div></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"settings\">\n  <div class=\"ds-main\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Overview</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#settings\">Settings</a></li>\n          <li class=\"ds-breadcrumb__current\">Your details</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Settings</h1>\n        <p class=\"ds-page-header__text\">Who you are, how we reach you and what the account may do.</p>\n      </div>\n    </div>\n    <div class=\"ds-cols ds-cols--side\">\n      <div class=\"ds-stack\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Settings</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__item is-current\" href=\"#settings\">Your details</a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#settings\">Security</a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#settings\">Notifications <span class=\"ds-sidebar__count\">3 on</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#settings\">Limits</a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#settings\">Plan <span class=\"ds-sidebar__count\">Plus</span></a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Elsewhere</h2>\n          <ul class=\"ds-linkrow\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#cards\">Card controls</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#activity\">Statements</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#settings\">Close the account</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#home\">Back to overview</a></li>\n          </ul>\n        </nav>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Your details</h2><span class=\"ds-badge ds-badge--success\">Verified</span></div>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#settings\">\n              <div class=\"ds-noticerow\" data-component=\"notice\">\n                <p class=\"ds-notice\"><span class=\"ds-notice__title\">Changing your name?</span> We will ask for a photo of your new ID.</p>\n                <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not saved.</span> The phone number below is not complete.</p>\n              </div>\n              <div class=\"ds-form__row\">\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"s-name\">Name</label>\n                  <input class=\"ds-form__input\" id=\"s-name\" type=\"text\" value=\"Mara Okafor\">\n                </div>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"s-mail\">Email</label>\n                  <input class=\"ds-form__input\" id=\"s-mail\" type=\"email\" value=\"mara@example.org\">\n                </div>\n              </div>\n              <div class=\"ds-form__row\">\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"s-phone\">Mobile number</label>\n                  <input class=\"ds-form__input is-error\" id=\"s-phone\" type=\"tel\" value=\"+44 7700 90\">\n                  <span class=\"ds-form__error\">Three digits are missing.</span>\n                </div>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"s-lang\">Language</label>\n                  <select class=\"ds-form__select\" id=\"s-lang\"><option>English</option><option>Svenska</option><option>Deutsch</option></select>\n                  <span class=\"ds-form__hint\">Used in the app and in emails.</span>\n                </div>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"s-addr\">Home address</label>\n                <textarea class=\"ds-form__textarea\" id=\"s-addr\">14 Orchard Lane\nFlat 3</textarea>\n              </div>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send a notification for every payment</label>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"submit\">Save changes</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#home\">Cancel</a>\n                <button class=\"ds-button ds-button--danger\" type=\"button\">Sign out everywhere</button>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Verify number</button>\n              </div>\n            </form>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__body\">\n            <article class=\"ds-prose\" data-component=\"typography\">\n              <h1>Your limits</h1>\n              <p class=\"ds-prose__lead\">Limits keep a lost phone from becoming a lost month. You can lower any of them yourself.</p>\n              <h2>Payments</h2>\n              <p>You can send up to <strong>10,000 a day</strong> to people you have paid before. A new payee starts at 1,000; the reference <code>NEW-PAYEE</code> shows on the first payment.</p>\n              <h3>Cash</h3>\n              <ul>\n                <li>400 a day at home.</li>\n                <li>600 a month abroad on the Plus plan.</li>\n              </ul>\n            </article>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-footer__cols\">\n      <div>\n        <a class=\"ds-brand\" href=\"#home\">\n          <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n        </a>\n        <p class=\"ds-footer__about\">Your everyday account, your card and your pots.</p>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Account</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#home\">Overview</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#activity\">Activity</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#cards\">Cards</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Help</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#settings\">Settings</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#cards\">Lost card</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#settings\">Chat with us</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Legal</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#settings\">Privacy</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#settings\">Terms</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#settings\">Fees</a></li>\n        </ul>\n      </div>\n    </div>\n    <p class=\"ds-footer__legal\"><span>chronoskin, 2025. Deposits are protected up to the national limit.</span><span>Signed in as Mara Okafor</span></p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.modern-product.app.s03.p03.t03.u03\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"modern-product\",\n    \"years\": [\n      2020,\n      2026\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-mp-3333\",\n  \"short\": \"v1-mp-3333\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f4f1ea;\n  --color-canvas: #f4f1ea;\n  --color-surface: #ffffff;\n  --color-surface-alt: #ece7dd;\n  --color-surface-strong: #e1dacd;\n  --color-bar: #f4f1ea;\n  --color-bar-text: #260a2f;\n  --color-bar-alt: #260a2f;\n  --color-bar-alt-text: #d3c7d8;\n  --color-inverse: #260a2f;\n  --color-inverse-text: #f4f1ea;\n  --color-text: #3b2f40;\n  --color-text-muted: #76697a;\n  --color-heading: #260a2f;\n  --color-heading-alt: #5b3df5;\n  --color-link: #5b3df5;\n  --color-link-quiet: #5a4a60;\n  --color-link-visited: #7d4fb3;\n  --color-link-hover: #3f25c9;\n  --color-link-active: #2e1a99;\n  --color-border: #ddd5c8;\n  --color-border-strong: #a89d8e;\n  --color-border-muted: #ebe5da;\n  --color-accent: #5b3df5;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #ff6b4a;\n  --color-fill-1: #e4dcff;\n  --color-fill-2: #ffe2d4;\n  --color-fill-3: #d6efe6;\n  --color-fill-4: #f7e9b8;\n  --color-button: #5b3df5;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #260a2f;\n  --color-input: #ffffff;\n  --color-input-text: #260a2f;\n  --color-input-border: #cfc6b8;\n  --color-disabled: #e6dfd3;\n  --color-disabled-text: #a3988a;\n  --color-danger: #c8322b;\n  --color-danger-surface: #fdeae6;\n  --color-success: #1f7a5a;\n  --color-warning: #b7791f;\n  --color-notice: #e4dcff;\n  --color-notice-text: #2e1a99;\n  --color-focus: #5b3df5;\n  --color-shadow: rgb(38 10 47 / 0.12);\n  --color-overlay: rgb(38 10 47 / 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n  --font-heading: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n  --font-ui: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n  --font-mono: \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 18px;\n  --text-small: 14px;\n  --text-ui: 16px;\n  --text-large: 22px;\n  --text-display: 84px;\n  --text-h1: 54px;\n  --text-h2: 34px;\n  --text-h3: 21px;\n  --line-body: 1.6;\n  --line-heading: 1.3;\n  --line-display: 1.05;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 600;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: -0.3px;\n  --display-tracking: -2px;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 16px;\n  --radius-panel: 28px;\n  --radius-pill: 999px;\n  --radius-page: 36px;\n  --shadow-panel: 0 1px 2px var(--color-shadow), 0 12px 32px var(--color-shadow);\n  --shadow-control: 0 1px 2px var(--color-shadow);\n  --shadow-control-hover: 0 8px 20px var(--color-shadow);\n  --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n  --shadow-dialog: 0 4px 12px var(--color-shadow), 0 32px 90px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: color-mix(in srgb, var(--color-bar) 82%, transparent);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-inverse) 84%, white), var(--color-inverse) 62%);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 86%, white), var(--color-button));\n  --fill-button-hover: linear-gradient(180deg, var(--color-button), color-mix(in srgb, var(--color-button) 86%, black));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 35%, transparent);\n  --transition: all 0.25s ease-out;\n  --backdrop-blur: 28px;\n}\n"
  }
}
