{ "id": "v1-mp-1233", "long_id": "v1.modern-product.landing.s01.p02.t03.u03", "name": "Modern product home page", "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": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "This is the home page of a big consumer brand between 2020 and 2026, here a money app: very large, tight, heavy headlines, full-bleed sections that alternate white, black and one saturated colour, generous rounded blocks of 32 to 40px, pill buttons, and the product itself, a phone and a card drawn in CSS, shown huge and centred. Navigation is a translucent capsule that floats at the top of the window, the footer is a quiet band of small grey link columns, and blocks fade and rise as they scroll into view. It is the common look of finance, payment and device makers' sites in the first half of the 2020s.", "url": "https://chrono.skin/s/v1-mp-1233", "preview_url": "https://chrono.skin/s/v1-mp-1233/specimen.html", "files": { "STYLE.md": "# Modern product home page\n\n## Summary\n\nThis is the home page of a big consumer brand between 2020 and 2026, here a money app: very large, tight, heavy headlines, full-bleed sections that alternate white, black and one saturated colour, generous rounded blocks of 32 to 40px, pill buttons, and the product itself, a phone and a card drawn in CSS, shown huge and centred. Navigation is a translucent capsule that floats at the top of the window, the footer is a quiet band of small grey link columns, and blocks fade and rise as they scroll into view. It is the common look of finance, payment and device makers' sites in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1200px) wide with `--space-5` side padding; sections are full bleed and pad themselves with `--space-9` (128px), `--tight` with `--space-8`.\n- Navigation is `.ds-nav`, a capsule `--size-nav` (60px) tall that is `position: sticky` `--space-3` below the top of the window: brand at the left, four links in the middle, a log-in link and one small primary button at the right. It is translucent and blurs what passes under it.\n- The home view stacks: `.ds-hero`, an inset block of the accent colour with `--radius-page` corners, `--space-3` from the window edges, everything centred and the phone cut off by its lower edge; a `.ds-statement`; a `.ds-marquee` of names; a section with `.ds-grid`, the row of four rounded tiles; a full-bleed inverse section with a `.ds-feature` (copy and a stage with two cards); a section of `.ds-stat` figures; a `.ds-tone--alt` section with three `.ds-plans` cards; and `.ds-cta`, a second inset accent block.\n- Inner pages have no hero. Inside `.ds-wrap` 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 centred pill switch in `.ds-tabsrow` above the cards they change. Content is full width (the three plans), `.ds-cols` (7 to 5), `.ds-cols--even`, or `.ds-cols--side` with the `.ds-sidebar` at the left.\n- Views. The specimen is the site of a money app. `home` is the landing page. `plans` has the switch between kinds of account, three plan cards, the comparison table with its notice and badge key, and questions as a list. `app` is the download page: the phone on a tinted stage beside the three steps, the two download buttons, links and three figures. `help` has the topics at the left with an empty conversations box, an article with its pagination, the message form with its notices and buttons, the open discard dialog and a reading list.\n- Below 900px columns, features and plans stack and the tile row becomes a strip that scrolls sideways inside the page with scroll snapping; below 640px the links of the capsule fold into a sheet that lists every view, opened by a \"Menu\" pill beside the call to action (`.ds-nav__fold`, a `details` holding `.ds-nav__toggle` and `.ds-nav__sheet`; the open view is the filled row, and the sign-in link, hidden in the bar as `.ds-nav__signin`, is the `.ds-menu__link--aside` row), figures stack and a wide table scrolls inside `.ds-table__wrap`. Below 640px a `.ds-tooltip__tip` takes the width of its paragraph, so it never leaves the window. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps, pagination), `--space-2` 8px (icon to text, the phone's bezel), `--space-3` 12px (between buttons, inset of the hero and navigation from the window), `--space-4` 16px (form rows, list rows, tile gap), `--space-5` 24px (panel and tile padding, page gutter), `--space-6` 32px (hero actions, column gap), `--space-7` 48px (section head to content, rise of the scroll animation), `--space-8` 80px (tight sections, feature gap, top of the hero), `--space-9` 128px (sections).\n- Other sizes: `--size-mark` 28px, `--size-icon` 48px, `--size-control` 40px, `--size-phone` 300px, `--size-card` 320px, `--size-art` 440px (least height of a stage), `--size-tile` 300px, `--size-dialog` 460px.\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 phone and behind the closing block (16s, alternating), and the `.ds-marquee` row of names sliding left (40s, linear). Every animation is declared inside `@media (prefers-reduced-motion: no-preference)`, the scroll ones also inside `@supports (animation-timeline: view())`. The keyframes state only the start (`from`), so the resting state of every rule is the finished, visible page: without support, or with reduced motion, nothing is hidden. Lengths in keyframes are `--space-*` tokens.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of four grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. An inverse block (`--fill-inverse`, class `.ds-tone--inverse`) carries only `--color-inverse-text`. An accent block (`--fill-accent`, class `.ds-tone--accent`) carries only `--color-accent-text`. The navigation (`--fill-bar`) carries `--color-bar-text`; the footer (`--fill-bar-alt`) carries `--color-bar-alt-text`.\n- A palette may be light or dark. Nothing assumes that the page is light: the inverse block is black on a white palette and off-white on a black one, and full-bleed sections alternate page, inverse, accent and `--color-surface-alt`.\n- `--color-fill-1` to `--color-fill-4` are tile grounds that carry running text in `--color-text` and `--color-heading`: tints on a light palette, deep tones on a dark one. They never carry `--color-inverse-text`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On an inverse block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. On an accent block only `.ds-button--onaccent` (fill `--color-accent-text`, text `--color-accent`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on.\n- `--color-inverse` is also the body of a drawn device and `--color-accent` the face of a drawn payment card, so a device is drawn on the page, a fill or the accent, never on an inverse block.\n- `--fill-bar` is translucent (the bar colour mixed with `transparent` in the surface part) and the navigation blurs what scrolls under it by `--backdrop-blur`.\n- `--color-heading-alt` is the kicker above a title, the sidebar title and h3 in prose. On inverse and accent blocks the kicker inherits the block's text colour.\n- `--fill-accent` with `--color-accent-text` is the default badge. `.ds-badge--alt` and the status badges are tints: the colour mixed at 16 to 24% into `--color-surface`, the text mixed from the colour and `--color-heading`, so they hold on light and dark palettes.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface`. The destructive button is `--color-danger` with `--color-button-text`.\n- Borders are hairlines: `--border-width` in `--color-border-muted` around panels and between rows, `--color-border` under a table head, `--color-input-border` around fields. `--border-width-strong` in `--color-border` frames the empty state.\n- Radii: `--radius-control` for buttons, fields, tabs and the current row of a sidebar; `--radius-panel` for panels, the dialog and the empty state (half of it for notices and the textarea); `--radius-page` for the largest blocks (hero, tiles, stages); `--radius-pill` for badges and meters.\n- Shadows: `--shadow-panel` on panels, `--shadow-control` on buttons and the current tab, `--shadow-control-hover` on a hovered button or tile, `--shadow-dialog` on the dialog and on drawn products.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: washes of `currentColor` or a text token at 7 to 22% for hover grounds, hairlines and stages on coloured blocks; tinted badges; the error notice's edge (`--color-danger` at 35%); the footer rule (`--color-bar-alt-text` at 25%). Opacity 0.6 to 0.8 dims secondary text on inverse and accent blocks.\n- Here: `--color-page` 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 ``. 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, `.ds-section--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`. `.ds-link--quiet` for meta; `.ds-link--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-wrap`: the centred content column.\n- `.ds-nav`: the floating capsule. `.ds-nav__inner` lays out the brand, `.ds-nav__links` of `.ds-nav__link` (the current one on a wash, `is-current`) and `.ds-nav__actions` with `.ds-nav__signin` and one `.ds-button--small`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-nav__fold`: below 640px the bar's links; a `
` whose `.ds-nav__toggle` (a pill with `.ds-nav__bars`) opens `.ds-nav__sheet`, a panel under the bar of `.ds-menu__link` rows, one per view, the open one filled. While the sheet is open the toggle reads \"Close\". Hidden above 640px, where `.ds-nav__links` carries the views.\n- `.ds-hero`: the inset accent block of the home view, centred: `.ds-hero__kicker` (a pill with a badge), `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one `--onaccent`, one `--ghost` button) and `.ds-hero__stage` with the `.ds-phone` between two `.ds-hero__chip` cards (`--right` for the second). A `.ds-glow` drifts behind. One per site.\n- `.ds-phone`: the product drawn with boxes: a body in `--color-inverse` and `.ds-phone__screen`, a surface holding `.ds-phone__island`, `.ds-phone__label`, `.ds-phone__figure`, `.ds-phone__pills` of `.ds-phone__pill` (`--quiet`) and `.ds-phone__row` lines of a `.ds-dot`, a `.ds-phone__grow` name and a sum.\n- `.ds-dot`: a round icon holder on `--color-fill-1` (`.ds-dot--2`, `--3`, `--4`; `--large`).\n- `.ds-statement`: one very large centred sentence; `.ds-statement__dim` greys its second half.\n- `.ds-marquee`: names set as text in a `.ds-marquee__track` of `.ds-marquee__name`, written twice so that the row can slide by half its width without a seam.\n- `.ds-grid`: the row of four rounded tiles on the four fills. Each `.ds-grid__cell` is a link with a `.ds-dot--large` at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom; it rises on hover.\n- `.ds-feature`: copy beside a stage; `.ds-feature--flip` puts the copy at the right. `.ds-feature__copy` holds a kicker, `.ds-feature__title`, `.ds-feature__text` and a button row. `.ds-art` is the stage, a rounded block washed with 9% of the text colour (`--fill` on `--color-fill-1`, `--cut` lets a phone run off its lower edge).\n- `.ds-card`: a payment card on the accent fill with the name, a `.ds-card__chip` and a `.ds-card__number`; tilted by 8 degrees and straightened on hover. `--back` is a second card on the panel fill behind it.\n- `.ds-stat`: the row of three figures; each `.ds-stat__item` is a `.ds-stat__figure` in display size over a `.ds-stat__label`.\n- `.ds-plans`: three `.ds-panel.ds-plan` cards of equal height: `.ds-plan__price` with `.ds-plan__per`, `.ds-plan__text`, a `.ds-points` list of ticked `.ds-points__item` and a `--wide` button. `.ds-plan--best` stands on the inverse fill and takes the `--inverse` button.\n- `.ds-cta`: the closing inset block, used with `.ds-tone--accent`: a section title and a centred button row over a `.ds-glow`.\n- `.ds-list--steps`: numbers the items of a list in circles of `--color-fill-1`.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then four columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n- `.ds-menu`: a navigation item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is the panel under it, shown on hover, on focus or with `is-open`, with a `.ds-menu__title` and a `.ds-menu__list` of `.ds-menu__link` per column. Below 1000px the panel is not shown and the item is a plain link.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `
` with a `.ds-accordion__head` summary and a `.ds-accordion__body`. Use it for the questions under a price or a product, never for navigation.\n- `.ds-tooltip`: a dotted-underlined term holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`. Use it for one term that needs a sentence.\n- `.ds-carousel`: `.ds-carousel__track` scrolls sideways with scroll snapping and holds `.ds-carousel__slide` items on the fills; `.ds-carousel__bar` has `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__hint`, a small line that says to swipe. `.ds-carousel--peek` shows two slides and the edge of a third; `.ds-voice` with `.ds-voice__text` is a slide that quotes a customer above a `.ds-person`.\n- `.ds-switch`: an on and off control drawn over ``. `.ds-toggle` is the label that holds it with its words, beside the tabs of a price or filter row.\n- `.ds-progress`: a thin bar; `.ds-progress__bar` with `.ds-progress__bar--20`, `.ds-progress__bar--40`, `.ds-progress__bar--60`, `.ds-progress__bar--70`, `.ds-progress__bar--80`, `.ds-progress__bar--100` sets how far; `.ds-progress__label` above it has a bold name and a quiet remark. Use it for a step of a flow or a share used.\n- `.ds-avatar`: initials in a circle on a fill (`--2`, `--3`, `.ds-avatar--large`). `.ds-person` puts it beside a `.ds-person__name` and `.ds-person__meta`.\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 block of the landing page is a `.ds-section`, with a tone class when it is not on the page colour, and a `.ds-section__head`; a new feature is another `.ds-feature` with its side flipped and the product drawn on its `.ds-art` stage; anything that holds data is a `.ds-panel`. 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: 1200px;\n --size-nav: 60px;\n --size-mark: 28px;\n --size-icon: 48px;\n --size-control: 40px;\n --size-dialog: 460px;\n --size-menu: 660px;\n --size-avatar: 40px;\n --size-tip: 240px;\n --size-phone: 300px;\n --size-card: 320px;\n --size-art: 440px;\n --size-tile: 300px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 80px;\n --space-9: 128px;\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 whose shadow grows on hover and that shrink a little when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--onaccent,\n.ds-button--onaccent:hover,\n.ds-button--onaccent.is-hover {\n background: var(--color-accent-text);\n color: var(--color-accent);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: currentColor;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button--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-x: auto;\n scrollbar-width: none;\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/* ---- components of the period beyond the checklist ---- */\n\n/* menu: a wide drop-down under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: var(--space-2);\n border-right: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n transform: translateY(-35%) rotate(45deg);\n opacity: 0.6;\n}\n.ds-menu__panel {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n width: var(--size-menu);\n max-width: 92vw;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n text-transform: none;\n box-shadow: var(--shadow-dialog);\n opacity: 0;\n visibility: hidden;\n transform: translateY(calc(var(--space-2) * -1));\n transition: var(--transition);\n}\n.ds-menu--end .ds-menu__panel {\n right: 0;\n left: auto;\n}\n.ds-menu:hover .ds-menu__panel,\n.ds-menu:focus-within .ds-menu__panel,\n.ds-menu.is-open .ds-menu__panel {\n opacity: 1;\n visibility: visible;\n transform: none;\n}\n.ds-menu__title {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-menu__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: normal;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-menu__link small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: questions that open and close, built on details */\n.ds-accordion {\n min-width: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n display: block;\n flex: none;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) round(var(--space-6) * 0.4, var(--space-1)) no-repeat,\n var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] .ds-accordion__head::after,\n.ds-accordion__item.is-open .ds-accordion__head::after {\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: 62ch;\n padding: 0 0 var(--space-5);\n color: var(--color-text);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: inherit;\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: var(--size-tip);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-panel) / 2.5);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n opacity: 0;\n visibility: hidden;\n transform: translate(-50%, var(--space-1));\n transition: var(--transition);\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, 0);\n}\n\n/* carousel: a row of slides, one showing, moved by scroll snapping */\n.ds-carousel {\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-page);\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n flex: none;\n width: 100%;\n min-width: 0;\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n color: var(--color-text);\n scroll-snap-align: start;\n}\n.ds-carousel__slide:nth-child(3n + 2) { background: var(--color-fill-3); }\n.ds-carousel__slide:nth-child(3n + 3) { background: var(--color-fill-2); }\n.ds-carousel__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin-top: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n}\n.ds-carousel__dot {\n width: var(--space-2);\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: currentColor;\n opacity: 0.25;\n transition: var(--transition);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n opacity: 1;\n}\n.ds-carousel__hint {\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n\n/* switch: an on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--space-7);\n height: calc(var(--space-5) + var(--space-1));\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--space-5) - var(--space-2));\n height: calc(var(--space-5) - var(--space-2));\n border-radius: 50%;\n background: var(--color-heading);\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-switch:checked,\n.ds-switch.is-on {\n border-color: transparent;\n background: var(--fill-button);\n}\n.ds-switch:checked::after,\n.ds-switch.is-on::after {\n left: calc(100% - var(--space-5));\n background: var(--color-button-text);\n}\n.ds-switch:focus-visible,\n.ds-switch.is-focus {\n outline: var(--focus-ring);\n}\n.ds-switch:disabled,\n.ds-switch.is-disabled {\n background: var(--color-disabled);\n cursor: default;\n}\n\n/* progress: a bar that shows how far something is */\n.ds-progress {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n}\n.ds-progress__bar--20 { width: 20%; }\n.ds-progress__bar--40 { width: 40%; }\n.ds-progress__bar--60 { width: 60%; }\n.ds-progress__bar--70 { width: 70%; }\n.ds-progress__bar--80 { width: 80%; }\n.ds-progress__bar--100 { width: 100%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-progress__label strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* avatar: a person drawn as initials in a circle, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-decoration: none;\n}\n.ds-avatar--2 { background: var(--color-fill-1); }\n.ds-avatar--3 { background: var(--color-fill-4); }\n.ds-avatar--large {\n width: var(--size-icon);\n height: var(--size-icon);\n font-size: var(--text-ui);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-person__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* voice: what a customer says, the slide of a carousel that shows two and a bit */\n.ds-carousel--peek {\n margin-top: var(--space-7);\n}\n.ds-carousel--peek .ds-carousel__slide {\n width: 46%;\n}\n.ds-voice {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-5);\n height: 100%;\n margin: 0;\n padding: var(--space-6);\n}\n.ds-voice__text {\n margin: 0;\n color: inherit;\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-voice .ds-person__name,\n.ds-voice .ds-person__meta {\n color: inherit;\n}\n.ds-voice .ds-avatar {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n/* toggle: a switch with its label, beside the tabs of a pricing or filter row */\n.ds-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n cursor: pointer;\n}\n.ds-tabsrow:has(.ds-toggle) {\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-5);\n}\n.ds-progress--gap {\n margin: var(--space-3) 0 var(--space-5);\n}\n@media (max-width: 1000px) {\n .ds-menu__panel {\n display: none;\n }\n .ds-menu__toggle::after {\n display: none;\n }\n}\n@media (max-width: 640px) {\n .ds-carousel--peek .ds-carousel__slide {\n width: 88%;\n }\n .ds-voice {\n padding: var(--space-5);\n }\n}\n\n/* ---- layout: product home page of a consumer money app ---- */\n\n/* nav: a floating translucent capsule that stays at the top of the window */\n.ds-nav {\n position: sticky;\n top: var(--space-3);\n z-index: 10;\n width: calc(100% - var(--space-5));\n max-width: var(--size-page);\n min-height: var(--size-nav);\n margin: var(--space-3) auto;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n border-radius: var(--radius-control);\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 align-items: center;\n gap: var(--space-5);\n min-height: var(--size-nav);\n padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\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:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 8%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#plans:target) .ds-nav__links .ds-nav__link[href=\"#plans\"],\n.ds-page:has(#app:target) .ds-nav__links .ds-nav__link[href=\"#app\"],\n.ds-page:has(#help:target) .ds-nav__links .ds-nav__link[href=\"#help\"] {\n background: color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* hero: an inset rounded block of the accent colour, everything centred,\n the phone standing at its lower edge and cut off by it */\n.ds-hero {\n position: relative;\n margin: 0 var(--space-3);\n padding: var(--space-8) var(--space-5) 0;\n border-radius: var(--radius-page);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-align: center;\n overflow: hidden;\n}\n.ds-hero__kicker {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-accent-text) 16%, transparent);\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-hero__kicker .ds-badge {\n background: var(--color-accent-text);\n color: var(--color-accent);\n}\n.ds-hero__title {\n position: relative;\n max-width: 12ch;\n margin: 0 auto;\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 11vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-hero__lead {\n position: relative;\n max-width: 34ch;\n margin: var(--space-5) auto 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-hero__actions {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin-top: var(--space-6);\n}\n.ds-hero__stage {\n position: relative;\n display: flex;\n justify-content: center;\n margin: var(--space-7) auto calc(var(--space-9) * -1);\n max-width: calc(var(--size-phone) * 2.6);\n}\n.ds-hero__chip {\n position: absolute;\n top: 18%;\n left: 0;\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--fill-panel);\n color: var(--color-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__chip--right {\n top: 42%;\n right: 0;\n left: auto;\n}\n.ds-hero__chip small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* dot: a small round icon holder on one of the fills */\n.ds-dot {\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-fill-1);\n color: var(--color-heading);\n}\n.ds-dot svg {\n width: 55%;\n height: 55%;\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.ds-dot--large {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* phone: the product, drawn with boxes. The body is the inverse colour,\n the screen a panel that holds a small account screen */\n.ds-phone {\n position: relative;\n flex: none;\n width: var(--size-phone);\n max-width: 100%;\n aspect-ratio: 9 / 18;\n padding: var(--space-2);\n border-radius: var(--radius-page);\n background: var(--color-inverse);\n box-shadow: var(--shadow-dialog);\n}\n.ds-phone__screen {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n height: 100%;\n padding: var(--space-4);\n border-radius: calc(var(--radius-page) - var(--space-2));\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: left;\n overflow: hidden;\n}\n.ds-phone__island {\n align-self: center;\n width: 30%;\n height: var(--space-4);\n border-radius: var(--radius-pill);\n background: var(--color-inverse);\n}\n.ds-phone__label {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-phone__figure {\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-display);\n letter-spacing: var(--heading-tracking);\n}\n.ds-phone__pills {\n display: flex;\n gap: var(--space-2);\n}\n.ds-phone__pill {\n flex: 1;\n padding: var(--space-2);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n font-weight: var(--weight-ui);\n text-align: center;\n}\n.ds-phone__pill--quiet {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-phone__row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2);\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-page);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-phone__grow {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* statement: one very large sentence with air around it */\n.ds-statement {\n max-width: 18ch;\n margin: 0 auto;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 7vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-align: center;\n text-wrap: balance;\n}\n.ds-statement__dim {\n color: var(--color-text-muted);\n}\n\n/* feature: copy beside a rounded stage that shows the product */\n.ds-feature {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: center;\n gap: var(--space-8);\n}\n.ds-feature--flip .ds-feature__copy {\n order: 2;\n}\n.ds-feature__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 5vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-wrap: balance;\n}\n.ds-feature__text {\n max-width: 40ch;\n margin: var(--space-5) 0 var(--space-6);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-tone--inverse .ds-feature__text,\n.ds-tone--accent .ds-feature__text {\n opacity: 0.75;\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-4);\n min-height: var(--size-art);\n padding: var(--space-6);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, currentColor 9%, transparent);\n overflow: hidden;\n}\n.ds-art--fill {\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-art--cut {\n justify-content: flex-start;\n padding-bottom: 0;\n}\n.ds-art--cut .ds-phone {\n margin-bottom: calc(var(--space-8) * -1);\n}\n\n/* card: a payment card on the accent colour, 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 text-align: left;\n box-shadow: var(--shadow-dialog);\n transform: rotate(-8deg);\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--back {\n position: absolute;\n background: var(--fill-panel);\n color: var(--color-heading);\n transform: rotate(6deg) translate(var(--space-6), var(--space-5));\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 letter-spacing: 0;\n}\n\n/* grid: a horizontal row of large rounded tiles on the four fills */\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-page);\n background: var(--color-fill-1);\n color: var(--color-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:nth-child(4n + 2) { background: var(--color-fill-2); }\n.ds-grid__cell:nth-child(4n + 3) { background: var(--color-fill-3); }\n.ds-grid__cell:nth-child(4n + 4) { background: var(--color-fill-4); }\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n transform: scale(1.015);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__cell .ds-dot {\n background: var(--color-page);\n}\n.ds-grid__title {\n margin: auto 0 0;\n padding-top: var(--space-6);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: var(--space-2) 0 0;\n font-size: var(--text-ui);\n}\n\n/* plans: three rounded cards; the chosen one stands on the inverse colour */\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n align-items: stretch;\n gap: var(--space-4);\n}\n.ds-plan {\n display: flex;\n flex-direction: column;\n transition: var(--transition);\n}\n.ds-plan:hover,\n.ds-plan.is-hover {\n transform: scale(1.015);\n}\n.ds-plan .ds-panel__body {\n display: flex;\n flex: 1;\n flex-direction: column;\n}\n.ds-plan--best {\n border-color: transparent;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-plan--best .ds-panel__title,\n.ds-plan--best .ds-plan__price,\n.ds-plan--best .ds-plan__per,\n.ds-plan--best .ds-plan__text {\n color: inherit;\n}\n.ds-plan__price {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n}\n.ds-plan__per {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n.ds-plan__text {\n margin: var(--space-3) 0 var(--space-4);\n}\n.ds-points {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-points__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-points__item::before {\n content: \"\\2713\";\n font-weight: var(--weight-bold);\n}\n\n/* call to action: the closing inset block on the accent colour */\n.ds-cta {\n position: relative;\n margin: 0 var(--space-3) var(--space-3);\n padding: var(--space-9) var(--space-5);\n border-radius: var(--radius-page);\n text-align: center;\n overflow: hidden;\n}\n.ds-cta .ds-buttonrow {\n position: relative;\n justify-content: center;\n margin-top: var(--space-6);\n}\n.ds-cta .ds-section__title,\n.ds-cta .ds-section__lead {\n position: relative;\n max-width: 20ch;\n margin-right: auto;\n margin-left: auto;\n}\n\n/* steps: a numbered list */\n.ds-list--steps {\n counter-reset: ds-step;\n}\n.ds-list--steps .ds-list__item {\n position: relative;\n padding-left: var(--space-8);\n counter-increment: ds-step;\n}\n.ds-list--steps .ds-list__item::before {\n content: counter(ds-step);\n position: absolute;\n left: 0;\n display: 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 font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n}\n.ds-tabsrow {\n display: flex;\n justify-content: center;\n margin-bottom: var(--space-6);\n}\n\n@media (max-width: 900px) {\n .ds-nav__links {\n justify-content: flex-start;\n overflow-x: auto;\n }\n .ds-hero__chip {\n display: none;\n }\n .ds-feature {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-6);\n }\n .ds-feature--flip .ds-feature__copy {\n order: 0;\n }\n .ds-grid {\n grid-template-columns: none;\n grid-auto-flow: column;\n grid-auto-columns: 72%;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n padding-bottom: var(--space-3);\n }\n .ds-grid__cell {\n scroll-snap-align: start;\n }\n .ds-plans {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n@media (max-width: 640px) {\n .ds-nav {\n border-radius: calc(var(--radius-panel) / 1.4);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-1) var(--space-3);\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__links {\n order: 3;\n flex: none;\n width: 100%;\n }\n .ds-nav__link {\n padding: var(--space-1) var(--space-3);\n }\n .ds-nav__signin {\n display: none;\n }\n .ds-hero {\n margin: 0 var(--space-2);\n padding: var(--space-7) var(--space-4) 0;\n }\n .ds-hero__title {\n letter-spacing: var(--heading-tracking);\n }\n .ds-stat__figure {\n letter-spacing: var(--heading-tracking);\n }\n .ds-cta {\n margin: 0 var(--space-2) var(--space-2);\n padding: var(--space-8) var(--space-4);\n }\n .ds-art {\n min-height: 0;\n padding: var(--space-6) var(--space-4);\n }\n .ds-art--cut {\n padding-bottom: 0;\n }\n .ds-list--steps .ds-list__item {\n padding-left: var(--space-7);\n }\n .ds-list--steps .ds-list__item::before {\n width: var(--space-6);\n height: var(--space-6);\n font-size: var(--text-ui);\n }\n}\n\n/* phone: a tooltip takes the width of its paragraph, so it never leaves the window */\n@media (max-width: 640px) {\n .ds-page :has(> .ds-tooltip) {\n position: relative;\n }\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n right: 0;\n left: 0;\n width: auto;\n max-width: none;\n transform: translateY(var(--space-1));\n }\n .ds-tooltip:hover .ds-tooltip__tip,\n .ds-tooltip:focus .ds-tooltip__tip,\n .ds-tooltip:focus-within .ds-tooltip__tip,\n .ds-tooltip.is-open .ds-tooltip__tip {\n transform: none;\n }\n}\n\n/* phone navigation: the brand, the call to action and a \"Menu\" pill in the\n capsule; the pill opens a sheet under the capsule that lists every view */\n.ds-nav__fold {\n position: static;\n display: none;\n}\n.ds-nav__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-nav__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-nav__sheet {\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n z-index: 20;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: var(--space-2) 0 0;\n padding: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n list-style: none;\n box-shadow: var(--shadow-dialog);\n}\n.ds-nav__sheet .ds-menu__link {\n padding: var(--space-3) var(--space-4);\n border-radius: calc(var(--radius-panel) / 2.5);\n}\n.ds-nav__sheet .ds-menu__link:hover,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#home\"],\n.ds-page:has(#plans:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#plans\"],\n.ds-page:has(#app:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#app\"],\n.ds-page:has(#help:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#help\"] {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-nav__sheet .ds-menu__link--aside {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-nav__toggle {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n background: color-mix(in srgb, var(--color-bar-text) 8%, transparent);\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-nav__toggle:hover,\n.ds-nav__fold[open] .ds-nav__toggle {\n background: color-mix(in srgb, var(--color-bar-text) 16%, transparent);\n}\n@media (max-width: 640px) {\n .ds-nav__links {\n display: none;\n }\n .ds-nav__fold {\n display: block;\n }\n}\n\n/* the open sheet is closed from the same button, which then reads Close */\n.ds-nav__word--close,\n.ds-nav__fold[open] .ds-nav__word {\n display: none;\n}\n.ds-nav__fold[open] .ds-nav__word--close {\n display: inline;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: modern product home page specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Log in\n Get the app\n
\n MenuClose\n \n
\n
\n
\n
\n\n
\n
\n \n

New Round-ups that save the change

\n

Money, minus the admin.

\n

One account that sorts your salary, splits the bills and tells you what is left to spend.

\n
\n Open an account\n Compare plans\n
\n
\n
Rent paidToday, 09:00
\n
\n
\n \n

Left to spend

\n

1,284.60

\n
SendAdd
\n
Groceries-42.18
\n
Salary+2,150.00
\n
Gym, monthly-29.00
\n
Holiday pot+24.10
\n
Coffee-3.40
\n
\n
\n
+24.10 savedRound-ups this week
\n
\n
\n\n
\n
\n

Your salary lands. Bills, savings and spending money are already where they belong.

\n
\n
\n\n
\n
    \n
  • Harbour Coffee
  • Tern Cycles
  • Northline Rail
  • Fieldnote Books
  • Marrow Market
  • Lindqvist Studio
  • Orchard Pharmacy
    • \n
  • Harbour Coffee
  • Tern Cycles
  • Northline Rail
  • Fieldnote Books
  • Marrow Market
  • Lindqvist Studio
  • Orchard Pharmacy
    • \n
\n
\n\n
\n
\n
\n

Everything in one place

\n

Built for the way you spend.

\n
\n
\n \n \n

Pots

\n

Put money aside for rent, holidays or a rainy day.

\n \n \n \n

Cards

\n

A card in the post and one on your phone in a minute.

\n \n \n \n

Transfers

\n

Send to 40 countries at the real rate, in seconds.

\n \n \n \n

Protection

\n

Freeze a card with one tap. Real people on chat, day and night.

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

The card

\n

Tap, pay, forget about fees.

\n

No charge abroad, no charge at cash machines, and a notification before the receipt has finished printing.

\n
\n Order a card\n See the limits\n
\n
\n
\n
chronoskin•••• 2207
\n
chronoskin•••• •••• •••• 4821
\n
\n
\n
\n\n
\n
\n
\n

In numbers

\n

Trusted with the everyday.

\n
\n
\n

9.2m

people run their main account here

\n

0.00

in fees for paying by card abroad

\n

38s

is the usual wait for a person on chat

\n
\n
\n
    \n
  • My salary lands and the rent pot is already full before I have looked.
    IVInes VargaPlus plan, since 2022
    • \n
  • We stopped arguing about who paid for what. The account does the sums.
    TBTomas BrandtJoint account
    • \n
  • I froze my card from a train and thawed it when it turned up in my coat.
    RWRin WatanabeMax plan
    • \n
\n
\n
\n

Swipe for more

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

Pick a plan. Change it whenever.

\n

Every plan has the account, the card and the pots.

\n
\n
\n
\n

Free

\n
\n

0 a month

\n

The account, a card and three pots.

\n See Free\n
\n
\n
\n

Plus

Most chosen
\n
\n

5 a month

\n

Unlimited pots, round-ups and interest.

\n See Plus\n
\n
\n
\n

Max

\n
\n

17 a month

\n

Travel and phone cover, and a metal card.

\n See Max\n
\n
\n
\n
\n
\n\n
\n
\n \n

Ten minutes from here to your first payment.

\n
\n Get the app\n Talk to us first\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Account
    3. \n
  3. Plans
    4. \n
\n

Three plans, no small print.

\n

Move up or down a plan from the app. The change takes a minute.

\n
\n
\n Open an account\n
\n
\n\n
\n \n \n
\n\n
\n
\n

Free

Start here
\n
\n

0 a month

\n

Everything you need to be paid and to pay.

\n
    \n
  • Account and contactless card
    • \n
  • Three pots
    • \n
  • Fee-free card payments abroad
    • \n
\n Choose Free\n
\n
\n
\n

Plus

Most chosen
\n
\n

5 a month

\n

For people who want their money to sort itself.

\n
    \n
  • Unlimited pots with interest
    • \n
  • Round-ups and salary sorting
    • \n
  • Virtual cards for subscriptions
    • \n
  • Cash withdrawals abroad, 600 a month
    • \n
\n Choose Plus\n
\n
\n
\n

Max

With cover
\n
\n

17 a month

\n

Plus, with the insurance you would buy anyway.

\n
    \n
  • Worldwide travel cover
    • \n
  • Phone cover
    • \n
  • A metal card
    • \n
\n Choose Max\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Side by side

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
IncludedFreePlusMax
Pots3UnlimitedUnlimited
Interest on pots0%3.1%3.6%
Cash abroad, a month2006002,000
Virtual cards1520
Travel coverNoAdd-onIncluded
\n
\n
\n
\n

Prices are per account and include tax. Interest is paid monthly into the pot that earned it.

\n
\n Most chosen\n With cover\n Start here\n Included\n Add-on\n No\n
\n
\n
\n

Asked before choosing

\n
\n
\n
\nCan I switch plans later?\n

Yes, from the app. You pay for the days you used.

\n
\n
\nIs my money protected?\n

Deposits are covered up to the national limitThe amount the deposit scheme of your country pays back if a bank fails..

\n
\n
\nWhat does a joint account cost?\n

The same as one personal plan, shared by two.

\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. The app
    3. \n
\n

The whole bank fits in your pocket.

\n

Download, show us your ID, and the account is open before the kettle boils.

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

Step 2 of 3

\n \n

Scan your ID

\n
Your detailsDone
\n
Photo of your IDNow
\n
A short selfie videoNext
\n
Open the camera
\n
\n
\n
\n
\n
\n

Three steps

About 10 minutes
\n
\n
    \n
  1. \n Download the app\n

    For phones from the last six years

    \n
    2. \n
  2. \n Show us it is you\n

    A photo of your ID and a short video

    \n
    3. \n
  3. \n Add money and pay\n

    Your card works on your phone straight away

    \n
    4. \n
\n
\n
\n
\n Download the app\n Text me the link\n
\n \n
\n
\n
\n
\n
\n
\n

4.8

average rating from 310,000 reviews

\n

10 min

from download to an open account

\n

24/7

chat with a person, in the app

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Help
    3. \n
  3. Cards
    4. \n
\n

How can we help?

\n

Most answers take a minute to read. If yours is not here, write to us below.

\n
\n
\n Chat in the app\n
\n
\n
\n
\n \n
\n \n

No open conversations

\n

Messages you send us appear here with our replies.

\n Write to us\n
\n
\n
\n
\n
\n
\n

If your card is lost or stolen

\n

Freeze it first. A frozen card cannot be used, and you can thaw it if it turns up in a coat pocket.

\n

Freeze the card

\n

Open the app, choose Cards and tap the card. The switch marked Freeze works at once, also for payments by phone.

\n

Then, if it is really gone

\n
    \n
  • Order a replacement from the same screen; it arrives in three working days.
    • \n
  • Your phone gets the new card immediately.
    • \n
  • Check the last payments and report any you do not know.
    • \n
\n
\n
\n
\n Article 4 of 18 in Cards\n \n
\n
\n
\n
\n

Write to us

\n
\n
\n
\n

We answer within a day. Chat in the app is faster.

\n

Not sent. Check the email address.

\n
\n
\n \n \n
\n
\n \n \n This address is missing its ending.\n
\n
\n \n \n
\n
\n \n \n Never include your PIN or full card number.\n
\n \n
\n \n Save draft\n \n \n
\n
\n
\n
\n
\n
\n
\n

Discard this message?

×
\n

What you have written will be deleted. A saved draft stays for 30 days.

\n
\n Discard\n Keep writing\n
\n
\n
\n
\n

Read next

\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.modern-product.landing.s01.p02.t03.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"modern-product\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-mp-1233\",\n \"short\": \"v1-mp-1233\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #060606;\n --color-canvas: #060606;\n --color-surface: #151515;\n --color-surface-alt: #1e1e1e;\n --color-surface-strong: #2b2b2b;\n --color-bar: #060606;\n --color-bar-text: #f2ede4;\n --color-bar-alt: #101010;\n --color-bar-alt-text: #99948a;\n --color-inverse: #f2ede4;\n --color-inverse-text: #0b0b0b;\n --color-text: #cfcac0;\n --color-text-muted: #99948a;\n --color-heading: #f2ede4;\n --color-heading-alt: #ff5c1a;\n --color-link: #ff7a40;\n --color-link-quiet: #cfcac0;\n --color-link-visited: #cf9272;\n --color-link-hover: #ffa67d;\n --color-link-active: #e0480c;\n --color-border: #303030;\n --color-border-strong: #5e5e5e;\n --color-border-muted: #232323;\n --color-accent: #ff5c1a;\n --color-accent-text: #0b0b0b;\n --color-accent-alt: #ffc24a;\n --color-fill-1: #1b1b1b;\n --color-fill-2: #2c1a11;\n --color-fill-3: #25221c;\n --color-fill-4: #111111;\n --color-button: #ff5c1a;\n --color-button-text: #0b0b0b;\n --color-button-hover-text: #0b0b0b;\n --color-button-secondary: #060606;\n --color-button-secondary-text: #f2ede4;\n --color-input: #151515;\n --color-input-text: #f2ede4;\n --color-input-border: #3c3c3c;\n --color-disabled: #1f1f1f;\n --color-disabled-text: #5e5e5e;\n --color-danger: #ff5247;\n --color-danger-surface: #2a1311;\n --color-success: #3dd16a;\n --color-warning: #ffb340;\n --color-notice: #1e1e1e;\n --color-notice-text: #f2ede4;\n --color-focus: #ff5c1a;\n --color-shadow: rgb(0 0 0 / 0.6);\n --color-overlay: rgb(0 0 0 / 0.72);\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 --figure-shift: 0em;\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: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s ease-out;\n --backdrop-blur: 28px;\n}\n" } }