{ "id": "v1-cl-3232", "long_id": "v1.claymorphism.shop.s03.p02.t03.u02", "name": "Claymorphism shop", "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": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "Claymorphism is the soft 3D look of 2021 to 2025: thick, very round shapes that seem modelled from coloured clay, with a light inner glow on one side, a darker inner shadow on the other and a large soft shadow under them. Around 2022 it also had a night form, on token, game and toy pages: a deep indigo page on which candy-coloured clays seem to glow. This pack is a small toy shop in that form: a clay bar across the top of the window, a hero card with a tray of clay toys, product cards with a coloured tray each, a product view, a basket and a checkout, set in a geometric display face over a rounded body face.", "url": "https://chrono.skin/s/v1-cl-3232", "preview_url": "https://chrono.skin/s/v1-cl-3232/specimen.html", "files": { "STYLE.md": "# Claymorphism shop\n\n## Summary\n\nClaymorphism is the soft 3D look of 2021 to 2025: thick, very round shapes that seem modelled from coloured clay, with a light inner glow on one side, a darker inner shadow on the other and a large soft shadow under them. Around 2022 it also had a night form, on token, game and toy pages: a deep indigo page on which candy-coloured clays seem to glow. This pack is a small toy shop in that form: a clay bar across the top of the window, a hero card with a tray of clay toys, product cards with a coloured tray each, a product view, a basket and a checkout, set in a geometric display face over a rounded body face.\n\n## Layout\n\n- Content column: `--size-page` (1200px), centred, with `--space-5` (24px) side padding. The bar and the footer run across the whole window; the layout is fluid below that width.\n- Navigation: `.ds-nav` is a clay bar attached to the top edge, rounded only at the bottom. Its first row has the brand at the left, the search well in the middle and the basket key and the account avatar at the right; its second row has the sections as pills (one of them a `.ds-menu`) and a small note at the right end.\n- Home page: every view starts `--space-6` (32px) under the bar. The shop front is a `.ds-page__stack` at 32px gaps: the hero card (offer left, tray of toys right), the `.ds-stat` row of three pills, then `.ds-page__shop`: the `.ds-sidebar` of filters in a `--size-side` (248px) column and the shelf, a `.ds-grid` of product cards three across with the pagination under it.\n- Inner pages have no hero. They start with the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1`, one lead line, actions at the right) on the bare page. A product page has `.ds-page__cols--even`: the picture carousel at the left, the buying panel and an accordion at the right; under it `.ds-page__cols` with the reviews list and a ratings panel. A basket page uses `.ds-page__cols`: notices, the table and the empty state in the wide column, the order panel and the dialog in a `--size-aside` (392px) column. A checkout page uses `.ds-page__cols`: the form in a `.ds-panel`, a prose panel in the aside. Keep the two columns about equally long.\n- Views. The specimen is one shop with four views, each `
` inside `.ds-page__inner`; the bar and the footer stand outside them. `shop` is the home view, `toy` the product, `basket` the basket, `checkout` the form. The pill of the current view is pressed into the bar by one `:has()` rule per view.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (between pills, label to control), `--space-3` 12px (card inset around a tray, between list bars), `--space-4` 16px (between buttons), `--space-5` 24px (panel padding, grid gap), `--space-6` 32px (between blocks and columns), `--space-7` 44px (footer padding), `--space-8` 64px (above the footer).\n- `--size-pic` (208px) is the height of a product tray; `--size-rule` (2px) the weight of the rules between table rows.\n- Below 1000px the columns, the shop front and the hero stack and the shelf goes two across. Below 560px the search drops to its own line in the bar, the shelf and the stats are one column, 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__top` wraps: the brand and the `.ds-nav__keys` on the first line, `.ds-nav__search` on a line of its own, then `.ds-nav__list` with smaller links. The Checkout link is not shown; the Basket link stands for both and is pressed in on the checkout view as well. The bar's bottom corners are rounded with `--radius-panel`.\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\n- `--font-heading` and `--font-ui` are one geometric sans with round bowls (Outfit, then Lexend, Futura) for titles, prices, buttons and navigation; `--font-body` is a rounded sans (Quicksand, then Hiragino Maru Gothic, Varela Round). `--font-mono` is for code only. These are open stand-ins for the commercial rounded faces of the references.\n- Sizes: `--text-base` 18px, `--text-ui` 17px for controls and navigation, `--text-small` 14px for meta text and badges, `--text-large` 22px for lead text and large buttons, `--text-h3` 21px, `--text-h2` 26px (prices on cards), `--text-h1` 36px, `--text-display` 58px for the hero title only.\n- Weights: 400 body, 500 for buttons and navigation, 600 for headings and bold text, 700 for the hero title and the large price. Headings are tracked at 0.01em.\n- Text tokens sit on fills as the era's first layout sets out: body, muted, heading and link colours only on the page and the three surface colours; `--color-accent-text` on the accent and on every `--color-fill-*` clay (badges on trays, avatars, faces), with nothing else set on a fill; `--color-bar-text` on `--fill-bar` (the top bar); `--color-bar-alt-text` on `--fill-bar-alt` (the footer) and on `--color-bar-alt` (table head); `--color-inverse-text` on `--fill-inverse` (code, tooltips); `--color-button-text` on `--fill-button`; `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, round keys, pagination, switch thumbs); `--color-input-text` on `--fill-input` (controls, the search well, the hero tray, tab and progress tracks, the empty state); `--color-notice-text` on `--color-notice`; `--color-danger` on `--color-danger-surface`. Status colours never carry text.\n- The palette is dark: the page is deep indigo, the surfaces are lighter indigo clays, and the fills, the accent and the button are candy colours light enough to carry the dark ink `--color-accent-text`.\n- The clay comes from the surface part: panels have a dark drop shadow and two insets mixed from black and white; controls throw a glow in `--color-button` instead of a dark shadow, and the dialog and the hero card add a halo in `--color-accent`. `--shadow-text` is a faint glow on the text of primary buttons. Clay objects add a drop shadow in their own fill through `color-mix()` with `transparent`, written in the component.\n- One-off values with no token: circles use `border-radius: 50%`, the cube 28%, checkboxes 34%; a tray takes the card's radius less its inset, by `calc()`; list bars, notices and accordion bars 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__stack` a vertical stack 32px apart, `.ds-page__shop` the filters beside the shelf, `.ds-page__cols` a wide column with an aside (`--even` for two halves), `.ds-page__heading` a section heading on the bare page. `.ds-view` is one screen of the specimen; an application with one document per page does not need it.\n- `.ds-brand`: the mark and name in the bar: `.ds-brand__mark` is a clay ball `--size-brand` (48px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font, in the colour of the bar. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the ball.\n- `.ds-nav`: the top bar. `.ds-nav__inner` is the width container, `.ds-nav__top` the first row with `.ds-nav__search` and `.ds-nav__keys` (round `.ds-nav__key` buttons, a count as a badge on the corner), `.ds-nav__list` the row of sections, `.ds-nav__link` one pill (pressed in when `is-current`, raised on `is-hover`), `.ds-nav__note` the note at the right end.\n- `.ds-menu`: a `
` drop-down under a section: `.ds-menu__toggle` on the summary, `.ds-menu__list` the clay card, `.ds-menu__link` with a count in `.ds-menu__note`; `--end` aligns it right, `--up` opens it upwards.\n- `.ds-hero`: the offer on one clay card: `.ds-hero__text` with a badge, `.ds-hero__title` at the display size, `.ds-hero__lead` and `.ds-hero__actions`; `.ds-hero__tray` is a dent holding `.ds-clay` toys placed with `.ds-hero__obj--a` to `--e`.\n- `.ds-clay`: a clay object drawn in CSS: a ball; `--1` to `--4` pick the fill, `--tiny`, `--small`, `--large` the size, `--cube`, `--pill`, `--ring` the shape; a face holds two `.ds-clay__eye`, a `.ds-clay__smile` and two `.ds-clay__cheek`. Inside a tray the hole of a ring takes the tray's colour. Decorative only.\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.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead`, `.ds-prose__code`.\n- `.ds-link`: link in running text, marked by colour alone; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for table links; `.ds-link__sample` lays out a row of links.\n- `.ds-button`: a fat clay pill 50px high that glows in its own colour. `is-hover` lifts it and widens the glow, `is-active` squashes it into a dent. `.ds-button--secondary` in a surface clay, `.ds-button--danger` on `--color-danger-surface`, `.ds-button--large` (62px), `.ds-button--wide`; `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group.\n- `.ds-form`: vertical form in a panel: `.ds-form__field`, `.ds-form__label`, `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with `.ds-form__chevron`), `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__error` after an `is-error` control, `.ds-form__hint`, `.ds-form__actions`, `.ds-form__row`. Controls are dents, darker than the card.\n- `.ds-switch`: a fat clay toggle over a checkbox: `.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`, `.ds-switch__hint`; `--end` puts the track at the right. Used for filters and options that apply at once.\n- `.ds-table`: one clay sheet with a head in `--color-bar-alt`: `.ds-table__num`, `.ds-table__meta`, `.ds-table__strong`, `.ds-table__opt`, `is-hover` on a row.\n- `.ds-list`: reviews as separate clay bars: `.ds-list__item` holds an avatar and a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`); `.ds-list__aside` is a figure at the right.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__note`, `.ds-panel__line`; `.ds-panel--accent` in the accent clay. `.ds-panel__price` is the large price, `.ds-panel__meter` a rating row (figure, bar, share), `.ds-panel__total` the ruled last line of an order.\n- `.ds-grid`: the shelf, three cards across. `.ds-grid__cell` is a clay card (it tilts and lifts on `is-hover`); `--1` to `--4` colour its `.ds-grid__pic`, a dented tray in a `--color-fill-*` clay holding a `.ds-clay` toy and an optional badge; then `.ds-grid__title`, `.ds-grid__meta` and `.ds-grid__foot` with the `.ds-grid__price` and one button. `.ds-grid__pic--large` is the tall tray of the product view.\n- `.ds-stat`: the row of three; each `.ds-stat__item` is a clay pill with a `.ds-stat__dot` ball (`--2`, `--3` pick a fill), a `.ds-stat__value` and a `.ds-stat__label`; `.ds-stat__meta` is a note beside the value.\n- `.ds-tabs`: a dented track of `.ds-tabs__tab` pills; `is-current` is raised, in the accent. Here it picks a colour set of a toy.\n- `.ds-badge`: a pill in the accent; `.ds-badge--quiet` neutral; `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` tinted with a status dot.\n- `.ds-sidebar`: the filters, a clay card: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` (dented when `is-current`), `.ds-sidebar__options` for a column of switches.\n- `.ds-notice`: a raised bar in `--color-notice` with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error`; `.ds-notice__stack`.\n- `.ds-pagination`: clay keys, `.ds-pagination__link`, the current one `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 with a centred `.ds-dialog__box` under a halo: `.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` shows on hover or focus.\n- `.ds-progress`: a thick dented track with a puffy `.ds-progress__bar` (`--10` to `--90`), `.ds-progress__legend` 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`, with optional `.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`, `.ds-accordion__chevron`, `.ds-accordion__body`.\n- `.ds-carousel`: `.ds-carousel__track` with one `.ds-carousel__slide` showing (here a product card with a large tray), `.ds-carousel__foot` with two `.ds-carousel__arrow` keys around `.ds-carousel__dots` (`.ds-carousel__dot`).\n- `.ds-footer`: a clay band across the bottom of the window, rounded only at the top, in `--fill-bar-alt`: `.ds-footer__inner`, `.ds-footer__about` with the brand and `.ds-footer__text`, `.ds-footer__heading`, `.ds-footer__links`, `.ds-footer__link`, `.ds-footer__toys` for three small clay balls.\n\n## Never\n\n- `block-gap <= 64px`: blocks sit 32px apart; 64px above the footer is the largest gap.\n- `content-width <= 1200px`: the column is capped.\n- `font-size <= 58px`: the hero title is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: the type is round, not heavy.\n- `font-families <= 3`: one display face, one rounded sans and one monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `underlined-links <= 10%`: links are marked by colour alone.\n- `box-shadow != none`: every key, card and tile is modelled; nothing raised is flat.\n- `border-width <= 4px`: clay has no outlines; the only lines are 2px rules and the 4px focus or error ring.\n- `border-radius <= 36px`: keys are 20px, cards 28px, the hero and flashcards 36px; only pills and balls go higher.\n- `box-shadow-blur <= 44px`: the shadows are short and firm; the dialog's is the deepest.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A container starts from `.ds-panel`, something pressed or filled in from `.ds-form__input`, something the user presses from `.ds-button--secondary`. A picture is a dented tray in a `--color-fill-*` clay holding `.ds-clay` objects in other fills; text on a fill is `--color-accent-text` and nothing else. Never draw a shadow or a glow in a raw colour and never flatten a shape. 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, as the list above says.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1200px;\n --size-side: 248px;\n --size-aside: 392px;\n --size-dialog: 420px;\n --size-control: 50px;\n --size-control-large: 62px;\n --size-icon: 20px;\n --size-dot: 10px;\n --size-thumb: 24px;\n --size-track: 14px;\n --size-check: 24px;\n --size-avatar: 46px;\n --size-ring: 92px;\n --size-rule: 2px;\n --size-brand: 48px;\n --size-clay: 108px;\n --size-search: 420px;\n --size-pic: 208px;\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: 44px;\n --space-8: 64px;\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--1 {\n background-color: var(--color-fill-1);\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 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--end .ds-menu__list {\n left: auto;\n right: 0;\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--end {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\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--10 .ds-progress__bar {\n width: 10%;\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--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@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 columns 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.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n/* the shop front: filters at the left, the shelf at the right */\n.ds-page__shop {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n}\n/* a working column with the order column at the right */\n.ds-page__cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__cols--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-page__heading {\n margin: 0 0 var(--space-4);\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-view {\n padding-top: var(--space-6);\n}\n\n/* nav: a clay bar across the top of the window, the sections in a second row */\n.ds-nav {\n position: relative;\n z-index: 5;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-4) var(--space-5);\n}\n.ds-nav__top {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-nav__search {\n flex: 1;\n max-width: var(--size-search);\n margin: 0 auto;\n}\n.ds-nav__keys {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-nav__key {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\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-nav__key svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-nav__key .ds-badge {\n position: absolute;\n top: calc(var(--space-1) * -1);\n right: calc(var(--space-2) * -1);\n padding: 0 var(--space-2);\n}\n.ds-nav__key:hover,\n.ds-nav__key.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-nav__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-3) 0 0;\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=\"#shop\"],\n.ds-page:has(#shop:target) .ds-nav__link[href=\"#shop\"],\n.ds-page:has(#toy:target) .ds-nav__link[href=\"#toy\"],\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"],\n.ds-page:has(#checkout:target) .ds-nav__link[href=\"#checkout\"] {\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__note {\n margin-left: auto;\n font-size: var(--text-small);\n opacity: 0.8;\n}\n\n/* hero: one clay card, the offer at the left and a tray of toys pressed into it at the right */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: stretch;\n padding: var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-hero__text {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: var(--space-5) 0 var(--space-5) var(--space-5);\n}\n.ds-hero__title {\n margin: var(--space-3) 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: 42ch;\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-5);\n}\n.ds-hero__tray {\n position: relative;\n min-height: calc(var(--size-clay) * 3.2);\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: calc(var(--radius-page) - var(--space-3));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-hero__obj {\n position: absolute;\n}\n.ds-hero__obj--a {\n top: 20%;\n left: 34%;\n}\n.ds-hero__obj--b {\n top: 12%;\n left: 8%;\n}\n.ds-hero__obj--c {\n right: 8%;\n bottom: 12%;\n}\n.ds-hero__obj--d {\n top: 10%;\n right: 10%;\n}\n.ds-hero__obj--e {\n bottom: 10%;\n left: 12%;\n}\n.ds-hero__tray .ds-clay--ring::after {\n background: var(--color-input);\n}\n\n/* stats: three small promises in a row of clay pills */\n.ds-stat__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-stat__dot {\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background-color: var(--color-fill-1);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-stat__dot--2 {\n background-color: var(--color-fill-2);\n}\n.ds-stat__dot--3 {\n background-color: var(--color-fill-3);\n}\n.ds-stat__value {\n margin: 0;\n font-size: var(--text-h3);\n}\n\n/* grid: the shelf, every toy on its own clay card with a coloured tray */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, 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-3);\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 transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n transform: translateY(calc(var(--space-2) * -1)) rotate(-1deg);\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-grid__cell:hover::after,\n.ds-grid__cell.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: var(--space-2);\n}\n.ds-grid__pic {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-3);\n height: var(--size-pic);\n margin-bottom: var(--space-2);\n background-color: var(--color-fill-1);\n border-radius: calc(var(--radius-panel) - var(--space-2));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__cell--1 .ds-grid__pic {\n background-color: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__pic {\n background-color: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__pic {\n background-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__pic {\n background-color: var(--color-fill-4);\n}\n.ds-grid__cell--1 .ds-clay--ring::after {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-clay--ring::after {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-clay--ring::after {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-clay--ring::after {\n background: var(--color-fill-4);\n}\n.ds-grid__pic--large {\n height: calc(var(--size-pic) * 1.9);\n}\n.ds-grid__pic .ds-badge {\n position: absolute;\n top: var(--space-3);\n left: var(--space-3);\n}\n.ds-grid__title {\n margin: 0;\n padding: 0 var(--space-3);\n color: var(--color-link-quiet);\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-decoration: var(--link-decoration-quiet);\n text-transform: var(--heading-transform);\n}\n.ds-grid__meta {\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: auto;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);\n}\n.ds-grid__price {\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 font-variant-numeric: tabular-nums;\n}\n\n/* sidebar: the filters, a clay card of sections and switches */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\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-3);\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-3);\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-3);\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.ds-sidebar__options {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: 0 var(--space-3);\n}\n\n/* the buying card of a toy */\n.ds-panel__price {\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-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-panel__meter {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n}\n.ds-panel__total {\n padding-top: var(--space-3);\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-carousel__track {\n margin: calc(var(--space-5) * -1);\n padding: var(--space-5);\n gap: var(--space-7);\n scroll-padding: var(--space-5);\n}\n.ds-carousel__slide.ds-grid__cell {\n flex: 0 0 100%;\n}\n.ds-list__item {\n align-items: flex-start;\n}\n\n/* footer: a clay band across the bottom of the window */\n.ds-footer {\n margin-top: var(--space-8);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-alt-text);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto;\n gap: var(--space-6);\n align-items: start;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-7) var(--space-5);\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: 36ch;\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.ds-footer__toys {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n@media (max-width: 1000px) {\n .ds-page__shop,\n .ds-page__cols,\n .ds-page__cols--even,\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__text {\n padding: var(--space-4) var(--space-3) 0;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-nav__note {\n display: none;\n }\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\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__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav {\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n }\n .ds-nav__top {\n flex-wrap: wrap;\n gap: var(--space-3);\n }\n .ds-nav__search {\n order: 3;\n flex: 1 1 100%;\n max-width: none;\n }\n .ds-nav__keys {\n margin-left: auto;\n }\n .ds-nav__list {\n gap: var(--space-1);\n }\n /* five links do not fit one row of a phone: the checkout is reached from the basket, whose link stands for both */\n .ds-nav__list > li:has(> .ds-nav__link[href=\"#checkout\"]) {\n display: none;\n }\n .ds-page:has(#checkout:target) .ds-nav__link[href=\"#basket\"] {\n box-shadow: var(--shadow-control-pressed);\n }\n .ds-nav__link {\n padding: var(--space-2);\n font-size: var(--text-small);\n }\n .ds-view {\n padding-top: var(--space-5);\n }\n .ds-hero {\n padding: var(--space-3);\n border-radius: var(--radius-panel);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-hero__tray {\n min-height: calc(var(--size-clay) * 2.6);\n border-radius: calc(var(--radius-panel) - var(--space-2));\n }\n .ds-hero__tray .ds-clay--large {\n width: calc(var(--size-clay) * 1.2);\n height: calc(var(--size-clay) * 1.2);\n }\n .ds-hero__tray .ds-clay--ring,\n .ds-hero__tray .ds-clay--cube {\n width: calc(var(--size-clay) * 0.7);\n height: calc(var(--size-clay) * 0.7);\n }\n .ds-hero__obj--a {\n top: 28%;\n left: 32%;\n }\n .ds-hero__obj--b {\n top: 8%;\n left: 6%;\n }\n .ds-hero__obj--d {\n top: 8%;\n right: 6%;\n }\n .ds-hero__obj--c {\n right: 4%;\n bottom: 8%;\n }\n .ds-stat,\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\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-grid__pic--large {\n height: calc(var(--size-pic) * 1.3);\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 {\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n }\n .ds-footer__inner {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-6) var(--space-4);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: soft toys for small hands\n\n\n\n\n\n
\n
\n
\n \n \n chronoskin\n \n \n
\n 3Basket, 3 toys\n
\n NH\n \n
\n
\n
\n \n
\n
\n\n
\n\n
\n
\n\n
\n
\n Toy of the week\n

Soft toys for small hands

\n

Balls, rings, blocks and pals in squashy silicone. Washable, chewable, and round on every side.

\n
\n See the stacking ring\n Open the basket\n
\n
\n
\n \n \n \n \n \n
\n
\n\n
\n
\n \n
\n
48 hours
\n
from order to your door
\n
\n
\n
\n \n
\n
214 toys
\n
in four shapes
\n
\n
\n
\n \n
\n
4.9 of 5
\n
from 3,120 reviews
\n
\n
\n
\n\n
\n\n \n\n
\n
\n \n \n \n
\n
\n Pal\n A round friend with a calm face\n
14.00Add
\n
\n \n
\n
Back soon
\n Ball trio\n Three sizes, three colours\n
15.00
\n
\n
\n\n \n
\n\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Rings
    3. \n
  3. Stacking ring
    4. \n
\n\n
\n
\n

Stacking ring

\n

Five squashy rings on a soft peg, for hands from six months.

\n
\n
\n Back to the shelf\n
\n
\n\n
\n
\n\n
\n
\n
The largest ring
\n
The middle ring
\n
The smallest ring
\n
\n
\n \n
\n \n
\n
\n\n
\n
\n

Five rings and a peg In stock

\n
\n
18.00or two for 32.00
\n \n

Each ring squashes flat and springs back. The peg bends, so it cannot poke. Food grade siliconeBoil it, freeze it, chew it, no small parts.

\n \n
\n Add to basket\n \n \n \n
\n
\n
\n
\n
\n Size and weight \n

The largest ring is 11 cm across. The set weighs 310 g.

\n
\n
\n Washing \n

Top rack of the dishwasher, or boil for three minutes.

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

What parents say

\n
    \n
  • \n EB\n
    \n Survived the dog, the bath and a brother\n Edda Byrne · 5 of 5 · two weeks ago\n
    \n
    • \n
  • \n KA\n
    \n The peg bends, which is the whole point\n Kofi Adeyemi · 5 of 5 · a month ago\n
    \n
    • \n
  • \n LS\n
    \n Smaller than it looks, in a good way\n Liv Sandoval · 4 of 5 · a month ago\n
    \n
    • \n
\n
\n
\n

4.9 of 5 182 reviews

\n
\n
590%
\n
48%
\n
32%
\n
\n
\n
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. All toys
    3. \n
  3. Basket
    4. \n
\n\n
\n
\n

Your basket

\n

Three toys. Another 2.00 and delivery is free.

\n
\n
\n Keep looking\n Go to checkout\n
\n
\n\n
\n\n
\n
\n
\n \n
Order before two. It leaves the workshop the same day.
\n
\n
\n \n
The ball trio sold out. It was taken out of your basket.
\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
ToyColoursStockCountPrice
Stacking ringCandyPlenty118.00
Soft blockMeadowLast four19.00
Bean rollerCandyPlenty111.00
Present wrapPaper and a cardNot added00.00
\n\n
\n \n

Nothing saved for later

\n

Toys you save wait here, and we tell you when one is nearly gone.

\n Back to the shelf\n
\n
\n\n
\n
\n

Your order

\n
\n
Three toys38.00
\n
Delivery4.00
\n
To pay42.00
\n Go to checkout\n
\n
\n
\n
\n

Take out the soft block?

\n
It goes back on the shelf. Only four are left in Meadow.
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Basket
    3. \n
  3. Checkout
    4. \n
\n\n
\n
\n

Where should it go?

\n

Three toys, 42.00 with delivery. You pay on the next step.

\n
\n
\n Back to the basket\n
\n
\n\n
\n\n
\n

Delivery 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 Written by hand, up to forty words.\n
\n \n
\n \n Change the basket\n
\n
\n
\n
\n\n
\n
\n
\n

Delivery and returns

\n

Orders placed before two leave the same day. Each parcel has a code such as CK-4471 for tracking.

\n

Sending a toy back

\n

You have thirty days, chewed or not.

\n

What we need

\n
    \n
  • The parcel code.
    • \n
  • The toy, in any box.
    • \n
  • A line on what went wrong.
    • \n
\n

\n The shelf\n Stacking ring\n Your basket\n This step\n Help\n

\n
\n
\n
\n\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.claymorphism.shop.s03.p02.t03.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"claymorphism\",\n \"years\": [\n 2021,\n 2025\n ]\n },\n \"archetype\": \"shop\",\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-cl-3232\",\n \"short\": \"v1-cl-3232\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(252 240 205);\n --color-canvas: rgb(252 240 205);\n --color-surface: rgb(255 253 246);\n --color-surface-alt: rgb(255 246 222);\n --color-surface-strong: rgb(247 228 170);\n --color-bar: rgb(36 49 94);\n --color-bar-text: rgb(255 248 224);\n --color-bar-alt: rgb(255 138 120);\n --color-bar-alt-text: rgb(43 18 56);\n --color-inverse: rgb(36 49 94);\n --color-inverse-text: rgb(255 248 224);\n --color-text: rgb(43 42 61);\n --color-text-muted: rgb(104 96 112);\n --color-heading: rgb(29 36 80);\n --color-heading-alt: rgb(176 62 40);\n --color-link: rgb(24 100 180);\n --color-link-quiet: rgb(36 49 94);\n --color-link-visited: rgb(122 75 154);\n --color-link-hover: rgb(15 70 132);\n --color-link-active: rgb(214 72 54);\n --color-border: rgb(236 217 160);\n --color-border-strong: rgb(214 187 102);\n --color-border-muted: rgb(246 234 196);\n --color-accent: rgb(255 204 64);\n --color-accent-text: rgb(42 29 58);\n --color-accent-alt: rgb(247 109 109);\n --color-fill-1: rgb(255 212 84);\n --color-fill-2: rgb(255 150 132);\n --color-fill-3: rgb(146 210 240);\n --color-fill-4: rgb(184 228 140);\n --color-button: rgb(255 122 102);\n --color-button-text: rgb(43 18 56);\n --color-button-hover-text: rgb(26 10 38);\n --color-button-secondary: rgb(255 253 246);\n --color-button-secondary-text: rgb(36 49 94);\n --color-input: rgb(255 246 222);\n --color-input-text: rgb(43 42 61);\n --color-input-border: rgb(226 205 140);\n --color-disabled: rgb(240 230 200);\n --color-disabled-text: rgb(150 140 112);\n --color-danger: rgb(186 40 40);\n --color-danger-surface: rgb(255 225 220);\n --color-success: rgb(46 139 79);\n --color-warning: rgb(200 120 0);\n --color-notice: rgb(222 241 251);\n --color-notice-text: rgb(29 69 107);\n --color-focus: rgb(24 100 180);\n --color-shadow: rgb(150 100 20 / 0.34);\n --color-overlay: rgb(36 49 94 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: Quicksand, \"Hiragino Maru Gothic ProN\", \"Varela Round\", \"Avenir Next\", \"Segoe UI\", sans-serif;\n --font-heading: Outfit, Lexend, Futura, \"Century Gothic\", \"Avenir Next\", sans-serif;\n --font-ui: Outfit, Lexend, Futura, \"Century Gothic\", \"Avenir Next\", sans-serif;\n --font-mono: \"JetBrains Mono\", \"Fira Code\", Menlo, Consolas, monospace;\n --text-base: 18px;\n --text-small: 14px;\n --text-ui: 17px;\n --text-large: 22px;\n --text-display: 58px;\n --text-h1: 36px;\n --text-h2: 26px;\n --text-h3: 21px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0.01em;\n --display-tracking: -0.01em;\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: 0;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 20px;\n --radius-panel: 28px;\n --radius-pill: 40px;\n --radius-page: 36px;\n --shadow-panel: 10px 12px 24px var(--color-shadow), inset -8px -8px 16px color-mix(in srgb, black 14%, transparent), inset 8px 8px 14px color-mix(in srgb, white 70%, transparent);\n --shadow-control: 6px 7px 14px var(--color-shadow), inset -5px -6px 10px color-mix(in srgb, black 18%, transparent), inset 5px 5px 8px color-mix(in srgb, white 60%, transparent);\n --shadow-control-hover: 9px 11px 20px var(--color-shadow), inset -5px -6px 10px color-mix(in srgb, black 18%, transparent), inset 5px 5px 8px color-mix(in srgb, white 72%, transparent);\n --shadow-control-pressed: inset 5px 6px 10px color-mix(in srgb, black 20%, transparent), inset -4px -4px 8px color-mix(in srgb, white 55%, transparent);\n --shadow-dialog: 18px 22px 44px var(--color-shadow), inset -10px -10px 20px color-mix(in srgb, black 12%, transparent), inset 10px 10px 18px color-mix(in srgb, white 80%, transparent);\n --shadow-text: 0 2px 0 color-mix(in srgb, white 35%, transparent);\n --fill-page: radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--color-fill-3) 70%, transparent) 0, color-mix(in srgb, var(--color-fill-3) 70%, transparent) 12%, transparent 12.2%), radial-gradient(circle at 4% 34%, color-mix(in srgb, var(--color-fill-2) 45%, transparent) 0, color-mix(in srgb, var(--color-fill-2) 45%, transparent) 9%, transparent 9.2%), linear-gradient(180deg, var(--color-page) 0%, var(--color-page) 70%, color-mix(in srgb, var(--color-fill-1) 45%, var(--color-page)) 100%);\n --fill-bar: linear-gradient(160deg, color-mix(in srgb, var(--color-bar) 86%, white), var(--color-bar) 60%);\n --fill-bar-alt: linear-gradient(160deg, color-mix(in srgb, var(--color-bar-alt) 80%, white), var(--color-bar-alt) 60%);\n --fill-inverse: linear-gradient(160deg, color-mix(in srgb, var(--color-inverse) 86%, white), var(--color-inverse) 60%);\n --fill-accent: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 70%, white), var(--color-accent) 60%), var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(160deg, color-mix(in srgb, var(--color-button) 76%, white), var(--color-button) 60%), var(--color-button);\n --fill-button-hover: linear-gradient(160deg, color-mix(in srgb, var(--color-button) 62%, white), var(--color-button) 70%), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 4px solid var(--color-focus);\n --transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;\n --backdrop-blur: 0px;\n}\n" } }