{ "id": "v1-cl-1111", "long_id": "v1.claymorphism.landing.s01.p01.t01.u01", "name": "Claymorphism landing", "era": { "slug": "claymorphism", "code": "cl", "name": "Claymorphism", "years": [ 2021, 2025 ], "description": "Soft 3D of 2021 to 2025: thick rounded shapes like modelling clay, pastel fills with a light inner glow on top and a dark inner shadow below, big floating drop shadows, round friendly type and playful blobs." }, "archetype": "landing", "mode": "pure", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "Claymorphism is the soft 3D look of 2021 to 2025: every block is a thick, very round shape that seems modelled from coloured clay, with a light inner glow along its upper edge, a darker inner shadow along its lower edge and one large soft drop shadow under it. Unlike neumorphism the shapes are coloured and float above a pastel page instead of being pressed out of it, and simple clay objects (a ball, a ring, a cube, a pill, a round face) stand in for illustrations. This pack is a playful product landing page in that look: a floating clay navigation bar, a hero with clay objects, feature cards in four pastel clays, a pricing trio and a chunky footer block, set in a rounded display face over a friendly sans.", "url": "https://chrono.skin/s/v1-cl-1111", "preview_url": "https://chrono.skin/s/v1-cl-1111/specimen.html", "files": { "STYLE.md": "# Claymorphism landing\n\n## Summary\n\nClaymorphism is the soft 3D look of 2021 to 2025: every block is a thick, very round shape that seems modelled from coloured clay, with a light inner glow along its upper edge, a darker inner shadow along its lower edge and one large soft drop shadow under it. Unlike neumorphism the shapes are coloured and float above a pastel page instead of being pressed out of it, and simple clay objects (a ball, a ring, a cube, a pill, a round face) stand in for illustrations. This pack is a playful product landing page in that look: a floating clay navigation bar, a hero with clay objects, feature cards in four pastel clays, a pricing trio and a chunky footer block, set in a rounded display face over a friendly sans.\n\n## Layout\n\n- Content column: `--size-page` (1160px), centred, with `--space-5` (24px) side padding. The page gradient fills the rest of the window; the layout is fluid below that width.\n- Navigation: `.ds-nav` is one floating clay bar `--size-nav` (72px) high, as wide as the column and 24px below the top edge: the brand at the left, the links centred (one of them a `.ds-menu`), a secondary and a primary button at the right.\n- Home page: `.ds-page__sections` stacks full-width sections `--space-8` (88px) apart: the hero (text left, clay objects right), the `.ds-stat` bar, the `.ds-grid` of four feature cards under a centred `.ds-page__title`, a `.ds-page__split` of two even columns (carousel of quotes beside a panel) and the closing `.ds-page__band`.\n- Inner pages have no hero. `--space-6` (32px) under the navigation come the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1`, one lead line, actions at the right) on the bare page. A pricing page then stacks, 32px apart, the centred `.ds-tabs` with a `.ds-switch`, the `.ds-price` trio and a `.ds-page__split--aside` (table left, a `--size-aside` 380px column of the accordion right). A form page uses `.ds-page__split--aside`: the form in one `.ds-panel`, notices and the dialog in the aside. A text page uses `.ds-page__split--side`: a `--size-side` (264px) column with the `.ds-sidebar` and the empty state at the left, the prose panel, the list and the pagination at the right. Keep the two columns about equally long.\n- Views. The specimen is one site with four views, each `
` inside `.ds-page__inner`; navigation and footer stand outside them. `home` is the landing page, `pricing` the plans, `signup` the form, `guide` the help text. The link of the current view is pressed into the bar by one `:has()` rule per view.\n- Spacing scale: `--space-1` 4px (dot to text), `--space-2` 8px (label to control, between stacked links), `--space-3` 12px (icon to text, between list bars), `--space-4` 16px (between buttons, row padding), `--space-5` 24px (card padding, grid gap, form gap), `--space-6` 32px (between panels, dialog padding), `--space-7` 48px (band and footer padding, column gap of a split), `--space-8` 88px (between home sections, above the footer).\n- Clay needs air: never put two raised shapes closer than `--space-3`, and give every card at least `--space-5` of padding so that the inner glow does not touch the text.\n- `--size-rule` (2px) is the weight of the soft rules between table rows and stat figures.\n- Below 960px the hero, the splits and the pricing trio stack, the grid goes to two columns and the navigation links wrap to a second line inside the bar. Below 560px the grid and stats are one column, the hero title takes `--text-h1`, form rows stack, the tabs fill the width and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways.\n- On a phone (560px and below) `.ds-nav__list` stays inside the bar as one row of equal cells (`flex: 1 1 auto`, no wrapping, text centred), under the brand and `.ds-nav__actions`; the current link stays pressed in. The More `.ds-menu` opens as a full row inset by `--space-3` under the bar instead of a card under its toggle. At every width a tooltip in a table opens at the left edge of its trigger, at most 60vw wide.\n\n## Typography and colour roles\n\n- `--font-heading` is a rounded display face (Fredoka, then Baloo 2, Arial Rounded) for titles, figures and the brand; `--font-body` and `--font-ui` are a soft sans (Nunito, then Avenir Next). `--font-mono` is for code only. The references used Fredoka One and commercial geometric rounded faces; these stacks are the closest open ones.\n- Sizes: `--text-base` 17px, `--text-ui` 16px for controls, navigation, tables and notices, `--text-small` 14px for meta text, labels and badges, `--text-large` 20px for lead text and large buttons, `--text-h3` 20px, `--text-h2` 28px, `--text-h1` 40px, `--text-display` 64px for the hero title and the prices only.\n- Weights: 500 body, 700 for headings, controls, labels and links. Line height 1.6 for body, 1.25 for headings, 1.05 for display.\n- These are the era's conventions for which text token sits on which fill; every layout of the era keeps to them:\n - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours stand only on the page, on `--color-surface`, `--color-surface-alt` and `--color-surface-strong`.\n - `--color-accent-text` is the ink for the accent and for all four `--color-fill-*` clays. A palette keeps the accent and the fills in one lightness band so that this one ink reads on all five. Meta text on a fill is the same ink at opacity 0.8, never `--color-text-muted`.\n - `--color-bar-text` on `--fill-bar` (the navigation), `--color-bar-alt-text` on `--fill-bar-alt` (the footer block, table head), `--color-inverse-text` on `--fill-inverse` (the closing band, code blocks, tooltips), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, pagination keys, round icon balls, switch thumbs), `--color-input-text` on `--fill-input` (controls, the tab track, progress tracks, the empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface` (error notice, destructive button).\n - Status colours never carry text: a status badge is the surface tinted 22% with the status colour, a dot of the full colour and `--color-text`.\n- The clay itself comes from the surface part: every shadow token holds the drop shadow in `--color-shadow` (a tint of the palette, not grey) and two inset shadows mixed from white and black, so the same tokens shape a white card, a pastel card and a dark band. `--shadow-control-pressed` has only the insets, reversed: it is a dent.\n- Coloured shapes (grid cards, clay objects) add a second drop shadow in their own colour: `color-mix()` of their fill token and `transparent`, written in the component because the vocabulary has no token per fill.\n- `--fill-page` is a pastel gradient with soft blobs mixed from `--color-fill-1` to `--color-fill-3`.\n- One-off values with no token: circles use `border-radius: 50%`, the cube 28% and icon tiles 34%; a list bar, a notice and an accordion bar take the smaller of `--radius-panel` and `--radius-control`; placeholders are `--color-input-text` at opacity 0.55.\n\n## Components\n\n- `.ds-page`: on ``; paints `--fill-page` and sets the base type. `.ds-page__inner` is the width container, `.ds-page__sections` the stack of home sections, `.ds-page__stack` a vertical stack 32px apart, `.ds-page__split` two columns (`--aside` and `--side` for the inner pages), `.ds-page__title` a centred section heading with `.ds-page__title-note`, `.ds-page__center` a centred row, `.ds-page__band` the closing inverted block with `.ds-page__band-title`, `.ds-page__band-text` and `.ds-page__band-art`. `.ds-view` is one screen of the specimen; an application with one document per page does not need it.\n- `.ds-brand`: the site's mark and name in the header: `.ds-brand__mark` is a clay ball `--size-brand` (44px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. It inherits its colour from the bar it stands on. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the ball.\n- `.ds-nav`: the floating bar. `.ds-nav__inner` is the clay, `.ds-nav__list` the links, `.ds-nav__link` one link (pressed in when `is-current`, raised on `is-hover`), `.ds-nav__actions` the buttons at the right.\n- `.ds-menu`: a `
` drop-down under a navigation item: `.ds-menu__toggle` on the summary, `.ds-menu__list` the clay card that opens under it, `.ds-menu__link` with an optional `.ds-menu__note`. `--end` aligns it right, `--up` opens it upwards.\n- `.ds-hero`: the page introduction on the bare page: a badge, `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`, `.ds-hero__proof` with overlapping avatars in `.ds-hero__faces`. `.ds-hero__art` holds the clay objects, each a `.ds-clay` placed with `.ds-hero__obj--a` to `--f`, and one floating `.ds-hero__card` with `.ds-hero__card-title`.\n- `.ds-clay`: a clay object drawn in CSS. Plain it is a ball in `--color-fill-1`; `--1` to `--4` pick the fill, `--tiny`, `--small` and `--large` the size, `--cube`, `--pill` and `--ring` the shape. A face is a ball holding two `.ds-clay__eye`, a `.ds-clay__smile` and two `.ds-clay__cheek`. A ring's hole takes `--color-page`: place rings on the bare page or set the hole to the fill behind it. Decorative only: mark them `aria-hidden`.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, `.ds-page-header__actions` at the right with at most one primary button.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for an inverted code block.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for titles and table links; `.ds-link__sample` lays out a row of links.\n- `.ds-button`: a fat clay pill 48px high. `is-hover` lifts it, `is-active` squashes it (it scales to 97% by 93% and takes `--shadow-control-pressed`). `.ds-button--secondary` is the same key in the surface colour, `.ds-button--danger` the destructive action on `--color-danger-surface`, `.ds-button--large` (60px) for the hero, `.ds-button--wide` fills its card; `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form in a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with a `.ds-form__chevron`). Controls are dents: `--fill-input` with `--shadow-control-pressed`. `.ds-form__check` is a label row with a `.ds-form__checkbox` (a raised clay tile, accent with a tick when checked). `is-error` rings the control in `--color-danger` and is followed by `.ds-form__error`; `.ds-form__hint` is help text, `.ds-form__actions` holds the buttons, `.ds-form__row` puts two fields side by side.\n- `.ds-switch`: a fat clay toggle over a checkbox: `.ds-switch__input`, `.ds-switch__track` (a dent that fills with the accent when on) with a clay ball as thumb, `.ds-switch__label` and `.ds-switch__hint`; `--end` puts the track at the right.\n- `.ds-table`: one clay sheet with a head in `--color-bar-alt` and rows divided by a soft rule. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `.ds-table__strong` a row title, `.ds-table__opt` a column dropped on a phone, `is-hover` tints a row.\n- `.ds-list`: items as separate clay bars 12px apart: `.ds-list__item` holds a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge, button or `.ds-list__aside` figure.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body` (a column with 16px gaps), `.ds-panel__note` for small muted text, `.ds-panel__line` for a row with two ends. `.ds-panel--accent` is the card in the accent clay, with all text in `--color-accent-text`.\n- `.ds-price`: the pricing trio, three `.ds-panel` cards with a `.ds-price__amount` (display size, `.ds-price__per` after it) and a `.ds-price__list`; the middle one is `.ds-panel--accent` and taller.\n- `.ds-grid`: four feature cards. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay and its own coloured drop shadow; inside, a `.ds-grid__icon` ball, `.ds-grid__title`, `.ds-grid__text` and an underlined `.ds-grid__more`. Every second card sits 24px lower.\n- `.ds-stat`: the row; one long clay bar holding three `.ds-stat__item` figures divided by rules, each a `.ds-stat__value` (40px) over a `.ds-stat__label`, with an optional `.ds-stat__meta`.\n- `.ds-tabs`: a dented track of `.ds-tabs__tab` pills; `is-current` is a raised pill in the accent. For switching what a page shows, not for site navigation.\n- `.ds-badge`: a pill in the accent. `.ds-badge--quiet` is neutral; `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted pills with a status dot.\n- `.ds-sidebar`: a clay card of topics: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link`, dented when `is-current`.\n- `.ds-notice`: a raised bar in `--color-notice` with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` is the error. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: round clay keys, `.ds-pagination__link`; the current page is `is-current`, in the accent.\n- `.ds-breadcrumb`: small bold trail above the page header: `.ds-breadcrumb__item`, `.ds-breadcrumb__link`.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box` under the deepest shadow: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dent holding a clay ball `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-tooltip`: wraps a trigger; `.ds-tooltip__tip` is an inverted pill shown on hover or focus (`is-open` shows it statically).\n- `.ds-progress`: a thick dented track with a puffy `.ds-progress__bar`; width by `--10`, `--25`, `--40`, `--60`, `--75`, `--90`; `.ds-progress__legend` is the line above it. `.ds-progress--ring` is a ring around a clay ball `.ds-progress__face`.\n- `.ds-avatar`: initials on a clay ball `.ds-avatar__pic`, alone or with `.ds-avatar__text` (`.ds-avatar__name`, `.ds-avatar__meta`); `--1` to `--4` pick a fill.\n- `.ds-accordion`: `
` sections as separate clay bars: `.ds-accordion__item`, `.ds-accordion__head` with a round `.ds-accordion__chevron`, `.ds-accordion__body`.\n- `.ds-carousel`: `.ds-carousel__track` scrolls and snaps, one `.ds-carousel__slide` showing; `.ds-carousel__foot` holds two round `.ds-carousel__arrow` keys around `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`). `.ds-quote` with `.ds-quote__text` is the quote card used as a slide.\n- `.ds-footer`: one chunky clay block in `--fill-bar-alt` that the page ends on: `.ds-footer__inner` (four columns), `.ds-footer__about` with the brand and `.ds-footer__text`, `.ds-footer__heading`, `.ds-footer__links`, `.ds-footer__link`.\n\n## Never\n\n- `block-gap <= 88px`: 88px between home sections is the largest gap.\n- `content-width <= 1160px`: the column is capped.\n- `font-size <= 64px`: the hero title and the prices are the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight >= 500`: the type is round and sturdy; nothing is light.\n- `font-families <= 3`: one display face, one sans and one monospace.\n- `line-height <= 1.65`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `underlined-links <= 25%`: links are marked by colour and weight; only the small links on coloured cards are underlined.\n- `box-shadow != none`: nothing raised is flat; a block without its inner glow and drop shadow is not clay.\n- `border-width <= 3px`: clay has no outlines; the only lines are 2px rules and the 3px focus or error ring.\n- `box-shadow-blur <= 80px`: the deepest shadow, under the dialog, blurs over 80px.\n- `text-shadow = none`: the text is flat; only shapes are modelled.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first whether it is raised or dented: a container starts from `.ds-panel` (fill, radius and `--shadow-panel` together), something pressed or filled in starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`), something the user presses starts from `.ds-button--secondary`. For a coloured card take a `--color-fill-*` background, `--color-accent-text` for everything on it, and add the coloured drop shadow as `.ds-grid__cell` does. Never draw a shadow in a raw colour and never flatten a shape: use the shadow tokens as they are. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1160px;\n --size-aside: 380px;\n --size-side: 264px;\n --size-dialog: 440px;\n --size-nav: 72px;\n --size-control: 48px;\n --size-control-large: 60px;\n --size-icon: 18px;\n --size-dot: 10px;\n --size-thumb: 26px;\n --size-track: 16px;\n --size-check: 26px;\n --size-avatar: 44px;\n --size-ring: 96px;\n --size-rule: 2px;\n --size-brand: 44px;\n --size-clay: 120px;\n --size-art: 460px;\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: 88px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n overflow-x: clip;\n background: var(--fill-page);\n background-color: var(--color-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}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\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/* clay objects: a sphere, a ring, a cube, a pill and a face, shaped by the shadow tokens */\n.ds-clay {\n position: relative;\n display: block;\n flex: none;\n width: var(--size-clay);\n height: var(--size-clay);\n background-color: var(--color-fill-1);\n border-radius: 50%;\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-1) 75%, transparent);\n}\n.ds-clay--2 {\n background-color: var(--color-fill-2);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-2) 75%, transparent);\n}\n.ds-clay--3 {\n background-color: var(--color-fill-3);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-3) 75%, transparent);\n}\n.ds-clay--4 {\n background-color: var(--color-fill-4);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-4) 75%, transparent);\n}\n.ds-clay--small {\n width: calc(var(--size-clay) * 0.5);\n height: calc(var(--size-clay) * 0.5);\n}\n.ds-clay--tiny {\n width: calc(var(--size-clay) * 0.28);\n height: calc(var(--size-clay) * 0.28);\n box-shadow: var(--shadow-control);\n}\n.ds-clay--large {\n width: calc(var(--size-clay) * 1.6);\n height: calc(var(--size-clay) * 1.6);\n}\n.ds-clay--cube {\n border-radius: 28%;\n transform: rotate(-14deg);\n}\n.ds-clay--pill {\n width: calc(var(--size-clay) * 1.3);\n height: calc(var(--size-clay) * 0.46);\n border-radius: var(--radius-pill);\n transform: rotate(-24deg);\n}\n.ds-clay--ring::after {\n content: \"\";\n position: absolute;\n top: 29%;\n left: 29%;\n width: 42%;\n height: 42%;\n background: var(--color-page);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-clay__eye {\n position: absolute;\n top: 36%;\n left: 28%;\n width: 11%;\n height: 15%;\n background: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-clay__eye + .ds-clay__eye {\n left: auto;\n right: 28%;\n}\n.ds-clay__smile {\n position: absolute;\n top: 44%;\n left: 37%;\n width: 26%;\n height: 22%;\n border: var(--border-width-strong) var(--border-style) transparent;\n border-bottom-color: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-clay__cheek {\n position: absolute;\n top: 54%;\n left: 14%;\n width: 14%;\n height: 10%;\n background: var(--color-accent-alt);\n border-radius: 50%;\n opacity: 0.7;\n}\n.ds-clay__cheek + .ds-clay__cheek {\n left: auto;\n right: 14%;\n}\n\n/* brand: the mark on a small clay key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: 58%;\n height: 58%;\n}\n.ds-brand__name {\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\n/* page header (inner pages) */\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-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n max-width: 60ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 72ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\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 margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--radius-panel));\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\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 border-radius: var(--radius-pill);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: fat clay keys that lift on hover and squash when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\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-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-button:hover::after,\n.ds-button.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: calc(var(--space-1) * 0.5);\n}\n.ds-button:active,\n.ds-button.is-active,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97, 0.93);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--wide {\n width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* form: controls are wells pressed into the clay */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\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__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n padding: 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-4) var(--space-5);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: var(--shadow-control-pressed), 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n padding: 0 var(--space-2);\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n padding: 0 var(--space-2);\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-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: 34%;\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-form__checkbox:checked::after,\n.ds-form__checkbox.is-checked::after {\n content: \"\";\n position: absolute;\n top: 16%;\n left: 34%;\n width: 30%;\n height: 52%;\n border: var(--border-width-strong) var(--border-style) var(--color-accent-text);\n border-top-color: transparent;\n border-left-color: transparent;\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one clay sheet with a coloured head, rows divided by a soft rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--color-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n.ds-table .ds-table__strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* list: every item is its own clay bar */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__aside {\n flex: none;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n font-variant-numeric: tabular-nums;\n}\n\n/* panel: the basic clay card */\n.ds-panel {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\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 display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n.ds-panel__body p {\n margin: 0;\n}\n.ds-panel__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel__line {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n/* a panel in the accent clay: all of its text takes the ink of the fills */\n.ds-panel--accent {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-panel--accent .ds-panel__title,\n.ds-panel--accent .ds-panel__note {\n color: var(--color-accent-text);\n}\n\n/* stats: figures in the heading face on clay tiles */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-4) var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n\n/* tabs: a pressed track, the current tab a clay pill in the accent */\n.ds-tabs {\n display: inline-flex;\n align-self: flex-start;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-pill);\n color: var(--color-input-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-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n/* status badges: the surface tinted with the status colour, a dot of the full colour in front */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n gap: var(--space-2);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* notice: a raised clay bar in the notice colour */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: round clay keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-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-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-color: transparent;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a pressed well with a clay ball in it */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* menu: a drop-down clay card under a navigation item */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n transform: rotate(180deg);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-3));\n left: 0;\n z-index: 8;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 24ch;\n margin: 0;\n padding: var(--space-3);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\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 line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-menu__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* tooltip: a small inverted pill over its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 9;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* switch: a fat clay toggle over a checkbox */\n.ds-switch {\n position: relative;\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 line-height: var(--line-heading);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 3 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc(var(--size-thumb) / -2);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n left: auto;\n right: var(--space-1);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__label {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* progress: a thick pressed track with a puffy bar, or a ring around a clay ball */\n.ds-progress {\n display: block;\n height: var(--size-track);\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-progress--25 .ds-progress__bar {\n width: 25%;\n}\n.ds-progress--75 .ds-progress__bar {\n width: 75%;\n}\n.ds-progress--90 .ds-progress__bar {\n width: 90%;\n}\n.ds-progress--ring {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-ring);\n height: var(--size-ring);\n background: conic-gradient(var(--color-accent) 50%, var(--color-surface-strong) 0);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-progress--ring.ds-progress--25 {\n background: conic-gradient(var(--color-accent) 25%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--75 {\n background: conic-gradient(var(--color-accent) 75%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--90 {\n background: conic-gradient(var(--color-accent) 90%, var(--color-surface-strong) 0);\n}\n.ds-progress__face {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 66%;\n height: 66%;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\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 font-variant-numeric: tabular-nums;\n}\n.ds-progress__legend {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n\n/* avatar: initials on a clay ball, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-avatar--1 .ds-avatar__pic {\n background: var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 .ds-avatar__pic {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 .ds-avatar__pic {\n background: var(--color-fill-4);\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: every section its own clay bar that opens */\n.ds-accordion {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-accordion__item {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\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-3) var(--space-3) var(--space-3) 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-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-4));\n height: calc(var(--size-icon) + var(--space-4));\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n transition: var(--transition);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* carousel: one slide showing, round clay arrows and dots under it */\n.ds-carousel {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n margin: 0;\n padding: 0;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-carousel__arrow:active,\n.ds-carousel__arrow.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.94);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: calc(3 * var(--size-dot));\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n\n/* the form view has no link of its own: its key in the bar stays pressed while it shows */\n.ds-page:has(#signup:target) .ds-nav__actions .ds-button:not(.ds-button--secondary) {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n box-shadow: var(--shadow-control-pressed);\n transform: none;\n}\n@media (max-width: 560px) {\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-pagination__link {\n min-width: calc(var(--size-control) - var(--space-2));\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-3);\n }\n}\n\n/* width container and the stacks of the pages */\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n/* the home page: sections one below the other, far apart */\n.ds-page__sections {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n/* two columns: even, or a working column with an aside at the right, or a side column at the left */\n.ds-page__split {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-7);\n align-items: center;\n}\n.ds-page__split--aside {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__split--side {\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n}\n/* a section heading on the bare page, centred over its row */\n.ds-page__title {\n margin: 0 0 var(--space-6);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-align: center;\n}\n.ds-page__title--left {\n margin-bottom: var(--space-3);\n text-align: left;\n}\n.ds-page__title-note {\n display: block;\n max-width: 52ch;\n margin: var(--space-2) auto 0;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n}\n.ds-page__center {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-4) var(--space-6);\n}\n/* the closing band: one inverted clay block with the last call to action */\n.ds-page__band {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5) var(--space-7);\n padding: var(--space-7);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-inverse-text);\n}\n.ds-page__band-title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__band-text {\n max-width: 44ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.85;\n}\n.ds-page__band-art {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-view:not(.ds-view--home) {\n padding-top: var(--space-6);\n}\n\n/* nav: one floating clay bar, brand at the left, links in the middle, the call to action at the right */\n.ds-nav {\n position: relative;\n z-index: 5;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) 0;\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-3) var(--space-3) var(--space-3) var(--space-4);\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n color: var(--color-bar-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-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n box-shadow: var(--shadow-control);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#signup\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: the title at the left, clay objects floating at the right */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);\n gap: var(--space-7);\n align-items: center;\n padding: var(--space-8) 0 var(--space-7);\n}\n.ds-hero__title {\n margin: var(--space-4) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 46ch;\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n.ds-hero__proof {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-6);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__faces {\n display: flex;\n}\n.ds-hero__faces .ds-avatar + .ds-avatar {\n margin-left: calc(var(--space-3) * -1);\n}\n.ds-hero__art {\n position: relative;\n height: var(--size-art);\n}\n.ds-hero__obj {\n position: absolute;\n}\n.ds-hero__obj--a {\n top: 16%;\n left: 26%;\n}\n.ds-hero__obj--b {\n top: 2%;\n left: 2%;\n}\n.ds-hero__obj--c {\n top: 4%;\n right: 4%;\n}\n.ds-hero__obj--d {\n right: 0;\n bottom: 30%;\n}\n.ds-hero__obj--e {\n bottom: 12%;\n left: 6%;\n}\n.ds-hero__obj--f {\n top: 0;\n right: 36%;\n}\n/* a small clay card that floats in front of the objects */\n.ds-hero__card {\n position: absolute;\n right: 6%;\n bottom: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n width: calc(var(--size-clay) * 2.2);\n padding: var(--space-4) var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-hero__card-title {\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}\n\n/* stats: three figures side by side on one long clay bar */\n.ds-stat {\n gap: 0;\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__item {\n padding: 0 var(--space-5);\n background: transparent;\n border-radius: 0;\n box-shadow: none;\n text-align: center;\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__value {\n justify-content: center;\n font-size: var(--text-h1);\n}\n\n/* grid: four feature cards, each in its own clay */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-5);\n background-color: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-1) 80%, transparent);\n color: var(--color-accent-text);\n transition: var(--transition);\n}\n.ds-grid__cell--1 {\n background-color: var(--color-fill-1);\n}\n.ds-grid__cell--2 {\n background-color: var(--color-fill-2);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-2) 80%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: var(--color-fill-3);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-3) 80%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: var(--color-fill-4);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-4) 80%, transparent);\n}\n.ds-grid__cell:nth-child(even) {\n transform: translateY(var(--space-5));\n}\n.ds-grid__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-3);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-grid__icon svg {\n width: 46%;\n height: 46%;\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n}\n.ds-grid__more {\n margin-top: auto;\n padding-top: var(--space-2);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* a quote card: the slide of the carousel */\n.ds-quote {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n height: 100%;\n padding: var(--space-6);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-quote__text {\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-carousel__track {\n margin: calc(var(--space-5) * -1);\n padding: var(--space-5);\n scroll-padding: var(--space-5);\n gap: var(--space-7);\n}\n\n/* pricing: three plan cards, the middle one in the accent clay and lifted */\n.ds-price {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: center;\n}\n.ds-price__amount {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-price__per {\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n letter-spacing: 0;\n opacity: 0.8;\n}\n.ds-price__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-price__list li {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-price__list li::before {\n content: \"\";\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n background: currentColor;\n border-radius: 50%;\n opacity: 0.55;\n}\n.ds-price .ds-panel--accent {\n padding: var(--space-4) 0;\n box-shadow: var(--shadow-dialog);\n}\n\n/* sidebar: a clay card of topics */\n.ds-sidebar {\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-4) var(--space-2);\n color: var(--color-heading-alt);\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-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-5);\n}\n.ds-sidebar__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-sidebar__link {\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-pill);\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 line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* footer: one chunky clay block that the page ends on */\n.ds-footer {\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: var(--space-8) auto 0;\n padding: 0 var(--space-5) var(--space-5);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n padding: var(--space-7);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-alt-text);\n}\n.ds-footer__about {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n}\n.ds-footer__text {\n max-width: 34ch;\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-footer__heading {\n margin: 0 0 var(--space-3);\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-footer__links {\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: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: underline;\n}\n\n@media (max-width: 960px) {\n .ds-hero,\n .ds-page__split,\n .ds-page__split--aside,\n .ds-page__split--side,\n .ds-price {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero {\n padding-top: var(--space-7);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-grid__cell:nth-child(even) {\n transform: none;\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n padding: var(--space-3);\n border-radius: var(--radius-panel);\n }\n .ds-nav__list {\n order: 3;\n flex-wrap: wrap;\n width: 100%;\n margin: 0;\n }\n .ds-nav__actions {\n margin-left: auto;\n }\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding: var(--space-6);\n }\n .ds-page__sections {\n gap: var(--space-7);\n }\n}\n@media (max-width: 560px) {\n .ds-carousel__track {\n margin: calc(var(--space-4) * -1);\n padding: var(--space-4);\n scroll-padding: var(--space-4);\n }\n .ds-page__inner,\n .ds-nav,\n .ds-footer {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__actions {\n gap: var(--space-2);\n }\n .ds-nav__actions .ds-button {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n font-size: var(--text-small);\n }\n .ds-nav__inner {\n gap: var(--space-2) var(--space-3);\n }\n .ds-nav .ds-brand {\n gap: var(--space-2);\n }\n .ds-hero {\n gap: var(--space-5);\n padding: var(--space-6) 0 var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n }\n .ds-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-hero__art {\n height: calc(var(--size-art) * 0.8);\n }\n .ds-hero__obj--a {\n left: 18%;\n }\n .ds-hero__card {\n right: 0;\n }\n .ds-page__title {\n font-size: var(--text-h2);\n }\n .ds-page__title-note {\n font-size: var(--text-base);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-stat__item + .ds-stat__item {\n padding-top: var(--space-4);\n border-left: 0;\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n }\n .ds-page__band {\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-page__band-title {\n font-size: var(--text-h2);\n }\n .ds-quote {\n padding: var(--space-5);\n }\n .ds-quote__text {\n font-size: var(--text-h3);\n }\n .ds-price__amount {\n font-size: var(--text-h1);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs {\n display: flex;\n align-self: stretch;\n flex-wrap: wrap;\n gap: var(--space-1);\n border-radius: var(--radius-panel);\n }\n .ds-tabs > * {\n flex: 1 1 auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n text-align: center;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-page-header__lead {\n font-size: var(--text-base);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-footer__inner {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n}\n\n/* phone: a tooltip in a table's first column opens from its trigger's left edge and may wrap */\n/* a tooltip in a table's first column opens at the left edge of its trigger, so it never leaves the window */\n.ds-table__strong .ds-tooltip__tip {\n left: 0;\n width: max-content;\n max-width: 60vw;\n transform: none;\n white-space: normal;\n}\n\n/* phone: the links spread across the bar as equal keys; the menu opens as a sheet under the bar */\n@media (max-width: 560px) {\n .ds-nav__inner {\n position: relative;\n }\n .ds-nav__list {\n flex-wrap: nowrap;\n gap: var(--space-1);\n }\n .ds-nav__list > li {\n flex: 1 1 auto;\n }\n .ds-nav__list .ds-nav__link {\n justify-content: center;\n }\n .ds-nav__list .ds-menu {\n position: static;\n }\n .ds-nav__list .ds-menu__list {\n left: var(--space-3);\n right: var(--space-3);\n min-width: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: pocket money jars\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Log in\n Start free\n
\n
\n
\n\n
\n\n
\n
\n\n
\n
\n New: jars for two homes\n

Pocket money you can squish into jars

\n

Every Saturday the money drops in. Children split it between jars to spend, to save and to give, and watch each one fill up.

\n
\n Start free\n See the plans\n
\n
\n \n IM\n TO\n RK\n \n 12,400 families fill jars every week\n
\n
\n
\n \n \n \n \n \n \n
\n Bike jar\n \n 36.00 of 48.00 saved\n
\n
\n
\n\n
\n
\n
12,400
\n
families with jars
\n
\n
\n
3.1 jars a child
\n
spend, save and give
\n
\n
\n
9 weeks
\n
to fill a first goal
\n
\n
\n\n
\n

Four things a jar can do Small enough for a six year old, honest enough for a parent.

\n
\n
\n \n

Fill

\n

Pocket money lands on the day you pick and waits to be shared out.

\n How filling works\n
\n
\n \n

Split

\n

Drag a slice into each jar. The split is theirs, the limits are yours.

\n Setting limits\n
\n
\n \n

Grow

\n

A goal has a picture and a price, and the jar shows how far it is.

\n Goals and pictures\n
\n
\n \n

Give

\n

One jar is for somebody else: a present, a cause, a sister.

\n The giving jar\n
\n
\n
\n\n
\n
\n
\n
\n
She counted nine Saturdays to the bike and did not ask for it once in between.
\n
IMInes Marchettitwo children, three jars each
\n
\n
\n
The giving jar was his idea of a joke for a week. Then his cousin had a birthday.
\n
TOTunde Okaforone child, four jars
\n
\n
\n
Two homes, one set of jars. Nobody argues about who paid last week.
\n
RKRosa Kiviniemithree children, two homes
\n
\n
\n
\n \n
\n \n
\n
\n
\n

Saturday is jar day

\n

The same small ritual every week: money in, a choice made, a jar a little fuller.

\n
\n

Ada's jars week 9

\n
\n
\n
Spend4.50 of 5.00
\n \n
\n
\n
Save for the bike36.00 of 48.00
\n \n
\n
\n
Give2.00 of 8.00
\n \n
\n
\n
\n
\n
\n\n
\n
\n

First jar free, for good

\n

One child and three jars cost nothing. Add the rest of the family when you are ready.

\n
\n
\n \n \n Make a jar\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Pricing
    3. \n
  3. Families
    4. \n
\n\n
\n
\n

Plans by the size of the family

\n

Prices are per household and month. Change or stop on any Saturday.

\n
\n
\n Start free\n
\n
\n\n
\n\n
\n \n \n
\n\n
\n
\n

Sprout

\n
\n
0 for good
\n
    \n
  • 1 child
    • \n
  • 3 jars
    • \n
  • 3 months of history
    • \n
\n Start free\n
\n
\n
\n

Family most picked

\n
\n
4 a month
\n
    \n
  • Up to 4 children
    • \n
  • 10 jars each
    • \n
  • Two homes, two grown-ups each
    • \n
  • 2 years of history
    • \n
\n Try a month free\n
\n
\n
\n

Club

\n
\n
19 a month
\n
    \n
  • Up to 30 children
    • \n
  • Shared goal jars
    • \n
  • 5 years of history
    • \n
\n Talk to us\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
What you getSproutFamilyClub
Children1430
Jars a childSpend, save, give and goals of their own31010
Grown-ups146
Months of history32460
Price a month0.004.0019.00
Price a year0.0040.00190.00
\n\n
\n
\n Is real money in the jars? \n

No. The jars keep count of money you hold for your child. You pay it out when a jar is spent.

\n
\n
\n Can two homes share a child's jars? \n

Yes, on the Family plan. Each home fills on its own day.

\n
\n
\n What happens when a month ends? \n

Nothing moves. Jars carry over until they are spent or emptied.

\n
\n
\n How do we stop? \n

From the family page, on any day. The jars stay readable for a year.

\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Pricing
    3. \n
  3. Start free
    4. \n
\n\n
\n
\n

Make the first jar

\n

Two minutes, no card. You can add children and homes later.

\n
\n
\n Back to the plans\n
\n
\n\n
\n\n
\n

About your family step 1 of 2

\n
\n
\n
\n
\n \n \n
\n
\n \n \n Enter a complete email address.\n
\n
\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n
\n \n \n Your child can change it later, with a picture.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n \n
Sprout is free for good. One child, three jars, no card.
\n
\n
\n \n
That email already has jars. Log in, or use another address.
\n
\n
\n
\n
\n

Clear the form?

\n
The name, the jar day and the first goal are removed. Nothing has been saved yet.
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Guide
    3. \n
  3. How filling works
    4. \n
\n\n
\n
\n

Guide for grown-ups

\n

Short answers on jars, limits and the Saturday summary.

\n
\n
\n Start free\n
\n
\n\n
\n\n
\n \n
\n \n

No questions from you yet

\n

Ask one and the answer shows up here, usually within a day.

\n Ask a question\n
\n
\n\n
\n
\n
\n
\n

How filling works

\n

On jar day the pocket money arrives in one lump and waits to be shared out between the jars.

\n

You set the amount and the day once. Each fill is kept under its own reference, such as SAT-09, so that both homes see the same Saturday.

\n

Who decides the split

\n

Your child does, inside the limits you set. A limit is a smallest or a largest share for one jar.

\n

A common set of limits

\n
    \n
  • At least a tenth goes to the giving jar.
    • \n
  • At most half goes to the spending jar.
    • \n
  • The rest is free to move between goals.
    • \n
\n

When a jar is spent

\n

Tap the jar and choose Spend. You hand over the money, and the jar starts again from zero. See how many jars each plan has or make the first one.

\n

\n Setting limits\n Two homes\n Goals and pictures\n The giving jar\n Plans and prices\n

\n
\n
\n
\n\n \n\n \n
\n\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.claymorphism.landing.s01.p01.t01.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"claymorphism\",\n \"years\": [\n 2021,\n 2025\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-cl-1111\",\n \"short\": \"v1-cl-1111\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(236 230 251);\n --color-canvas: rgb(243 238 253);\n --color-surface: rgb(252 250 255);\n --color-surface-alt: rgb(243 237 254);\n --color-surface-strong: rgb(226 216 248);\n --color-bar: rgb(252 250 255);\n --color-bar-text: rgb(58 45 107);\n --color-bar-alt: rgb(214 200 250);\n --color-bar-alt-text: rgb(50 36 100);\n --color-inverse: rgb(58 45 107);\n --color-inverse-text: rgb(246 241 255);\n --color-text: rgb(63 53 100);\n --color-text-muted: rgb(105 95 142);\n --color-heading: rgb(44 33 86);\n --color-heading-alt: rgb(84 62 168);\n --color-link: rgb(101 60 220);\n --color-link-quiet: rgb(58 45 107);\n --color-link-visited: rgb(138 72 170);\n --color-link-hover: rgb(70 32 178);\n --color-link-active: rgb(200 62 110);\n --color-border: rgb(217 207 242);\n --color-border-strong: rgb(185 168 232);\n --color-border-muted: rgb(235 228 250);\n --color-accent: rgb(255 184 156);\n --color-accent-text: rgb(59 34 89);\n --color-accent-alt: rgb(255 143 177);\n --color-fill-1: rgb(203 187 255);\n --color-fill-2: rgb(255 202 178);\n --color-fill-3: rgb(170 236 208);\n --color-fill-4: rgb(255 227 156);\n --color-button: rgb(124 92 255);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(252 250 255);\n --color-button-secondary-text: rgb(74 53 176);\n --color-input: rgb(240 234 252);\n --color-input-text: rgb(63 53 100);\n --color-input-border: rgb(207 195 238);\n --color-disabled: rgb(228 222 242);\n --color-disabled-text: rgb(150 142 182);\n --color-danger: rgb(196 46 88);\n --color-danger-surface: rgb(255 224 232);\n --color-success: rgb(31 157 110);\n --color-warning: rgb(214 138 24);\n --color-notice: rgb(220 240 255);\n --color-notice-text: rgb(36 71 107);\n --color-focus: rgb(90 54 224);\n --color-shadow: rgb(116 92 200 / 0.38);\n --color-overlay: rgb(58 45 107 / 0.32);\n}\n\n/* @part type */\n:root {\n --font-body: Nunito, \"Avenir Next\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: Fredoka, \"Baloo 2\", \"Arial Rounded MT Bold\", \"Varela Round\", \"Avenir Next\", sans-serif;\n --font-ui: Nunito, \"Avenir Next\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 17px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 64px;\n --text-h1: 40px;\n --text-h2: 28px;\n --text-h3: 20px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.05;\n --weight-body: 500;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 0;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 999px;\n --radius-panel: 32px;\n --radius-pill: 999px;\n --radius-page: 48px;\n --shadow-panel: 0 28px 48px -16px var(--color-shadow), inset 0 -10px 20px color-mix(in srgb, black 9%, transparent), inset 0 10px 20px color-mix(in srgb, white 70%, transparent);\n --shadow-control: 0 12px 20px -8px var(--color-shadow), inset 0 -6px 10px color-mix(in srgb, black 11%, transparent), inset 0 6px 10px color-mix(in srgb, white 55%, transparent);\n --shadow-control-hover: 0 18px 28px -10px var(--color-shadow), inset 0 -6px 10px color-mix(in srgb, black 11%, transparent), inset 0 6px 10px color-mix(in srgb, white 65%, transparent);\n --shadow-control-pressed: inset 0 6px 12px color-mix(in srgb, black 14%, transparent), inset 0 -5px 8px color-mix(in srgb, white 60%, transparent);\n --shadow-dialog: 0 44px 80px -24px var(--color-shadow), inset 0 -12px 24px color-mix(in srgb, black 8%, transparent), inset 0 12px 24px color-mix(in srgb, white 80%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(56% 40% at 8% 0%, color-mix(in srgb, var(--color-fill-1) 60%, transparent), transparent 72%), radial-gradient(48% 36% at 100% 12%, color-mix(in srgb, var(--color-fill-2) 50%, transparent), transparent 72%), radial-gradient(60% 40% at 60% 100%, color-mix(in srgb, var(--color-fill-3) 40%, transparent), transparent 72%), linear-gradient(180deg, var(--color-page), var(--color-canvas));\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 84%, white), var(--color-button)), var(--color-button);\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 74%, white), var(--color-button)), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }