{ "id": "v1-cl-6665", "long_id": "v1.claymorphism.blog.s06.p06.t06.u05", "name": "Claymorphism recipe cards", "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": "blog", "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 the side of the light, a darker inner shadow opposite and a large soft shadow under them. It suited recipe, fitness and habit pages of those years, where a deck of chunky cards and a big round timer made a daily task look like a game on the kitchen table. This pack is a small recipe site in that look: a header of separate clay keys, a hand of four tilted recipe cards with clay plates, a pressed tray of figures, a ring timer and a clay hill as footer, set in a soft serif over a humanist sans.", "url": "https://chrono.skin/s/v1-cl-6665", "preview_url": "https://chrono.skin/s/v1-cl-6665/specimen.html", "files": { "STYLE.md": "# Claymorphism recipe cards\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 the side of the light, a darker inner shadow opposite and a large soft shadow under them. It suited recipe, fitness and habit pages of those years, where a deck of chunky cards and a big round timer made a daily task look like a game on the kitchen table. This pack is a small recipe site in that look: a header of separate clay keys, a hand of four tilted recipe cards with clay plates, a pressed tray of figures, a ring timer and a clay hill as footer, set in a soft serif over a humanist sans.\n\n## Layout\n\n- Content column: `--size-page` (1240px), centred, with `--space-5` (24px) side padding. The footer runs across the whole window; the layout is fluid below that width.\n- Navigation: `.ds-nav` has no bar. On the bare page stand the brand, a pressed search well `--size-search` (300px) wide, then, pushed to the right, every section as a clay key of its own, and last the cook's avatar as the toggle of a `.ds-menu`. The key of the current view is pressed in.\n- Home page: `.ds-page__sections` stacks sections `--space-7` (52px) apart: the hero (badge, title, lead and actions, centred) with the `.ds-grid` deck of four tilted cards directly under it, the `.ds-stat` tray, a `.ds-page__split` (the list of recipes beside the timer panel) and the closing `.ds-page__band`.\n- Inner pages have no hero. `--space-6` (34px) 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 recipe page is a `.ds-page__stack`: a `.ds-page__tools` row with the `.ds-tabs` and a `.ds-switch`, then `.ds-page__split`, a reading column (the carousel of steps, the notes panel) with a `--size-aside` (400px) column at the right (ingredients, the table, the cook). The form page uses the same split: the form in one `.ds-panel`, notices and the dialog in the aside. The box page uses `.ds-page__split--side`: a `--size-side` (272px) column with the `.ds-sidebar` and the empty state at the left, the list, the pagination and the accordion 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 day's hand of cards, `recipe` one recipe, `box` the saved recipes, `write` the form for a new one. One `:has()` rule per view presses the key of the current view.\n- Spacing scale: `--space-1` 4px (between sidebar links), `--space-2` 8px (label to control, inside a card), `--space-3` 12px (between list bars, between navigation keys), `--space-4` 16px (between buttons and deck cards, row padding), `--space-5` 24px (card padding, form gap, between stacked panels), `--space-6` 34px (column gap of a split, under the navigation), `--space-7` 52px (between home sections, footer padding), `--space-8` 80px (above the footer).\n- `--size-plate` (148px) is the diameter of a plate, `--size-timer` (216px) of the timer ring.\n- Below 1080px the search well and the keys wrap under the brand, the splits stack and the deck is two by two with a slight tilt. Below 560px the deck is one column without tilt, the stats stack inside their tray, the hero title takes `--text-h1`, 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` sits on its own line under the brand and the search well (`.ds-nav__search` is a full row from 1080px down), its keys stretch to share the width equally with centred labels and a smaller gap, and the current key stays pressed in. 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\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` is a soft serif (Fraunces, then DM Serif Display, Iowan Old Style) for titles, figures and the brand; `--font-body` and `--font-ui` are a humanist sans (Karla, then Mulish, Gill Sans). `--font-mono` is for code only.\n- Sizes: `--text-base` 18px, `--text-ui` 16px for controls, navigation, tables and notices, `--text-small` 15px for meta text, labels and badges, `--text-large` 21px for lead text, step text and large buttons, `--text-h3` 22px, `--text-h2` 29px, `--text-h1` 42px, `--text-display` 68px for the hero title only.\n- Weights: 400 body, 600 controls, 700 headings and bold, 800 display. Line height 1.55 for body, 1.18 for headings, 1.02 for display.\n- The era's conventions for which text token sits on which fill are kept:\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`. The brand in the navigation stands on the bare page and takes `--color-heading`.\n - `--color-accent-text` is the ink for the accent and for all four `--color-fill-*` clays (deck cards, the minutes ball, step numbers, avatars, the current sidebar link). Meta text on a fill is the same ink at opacity 0.8.\n - `--color-bar-text` on `--fill-bar` (the navigation keys), `--color-bar-alt-text` on `--fill-bar-alt` (the footer, table head), `--color-inverse-text` on `--fill-inverse` (the closing band, tooltips, code blocks), `--color-button-text` on `--fill-button` (primary buttons, the timer's main key), `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, round keys, pagination keys), `--color-input-text` on `--fill-input` (controls, the search well, the stat tray, the tab track, the empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`.\n - Status colours never carry text: a status badge is the surface tinted with the status colour, a dot of the full colour and `--color-text`.\n- The clay comes from the surface part: every shadow token holds drop shadows in `--color-shadow` (a tint of the palette) and two inset shadows mixed from white and black, so the same tokens shape a white card, a coloured card and the dark band. `--shadow-control-pressed` has only insets, reversed: it is a dent.\n- Coloured cards add one more 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- One-off values with no token: circles use `border-radius: 50%`, the bits of food their own percentages; 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. The tilt of a deck card is between 2 and 5 degrees.\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 24px apart, `.ds-page__split` a reading column with an aside (`--side` for a side column at the left), `.ds-page__tools` a row with two ends, `.ds-page__title` a section heading with a `.ds-page__more` link at its right, `.ds-page__band` the closing inverted block with `.ds-page__band-title` and `.ds-page__band-text`. `.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 tile `--size-brand` (50px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the tile.\n- `.ds-nav`: the header row. `.ds-nav__search` wraps an icon and a `.ds-form__input`, `.ds-nav__list` holds the keys, `.ds-nav__link` is one key (pressed in when `is-current`, lifted on `is-hover`), `.ds-nav__actions` holds the account menu.\n- `.ds-menu`: a `
` drop-down: `.ds-menu__toggle` on the summary (here the avatar and a chevron), `.ds-menu__list` the clay card under it, `.ds-menu__link` with an optional `.ds-menu__note`. `--end` aligns it right, `--up` opens it upwards.\n- `.ds-key`: a round clay key with one icon, under the timer; `.ds-key--primary` is larger and in the button colour. `is-hover` lifts it, `is-active` presses it.\n- `.ds-hero`: the page introduction, centred on the bare page: a badge, `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`. The deck follows it without a gap.\n- `.ds-plate`: a clay dish with a pressed well and up to three `.ds-plate__bit` of food (`--1` to `--4` pick the fill); `.ds-plate--small` is the size for a list row. `.ds-clay` (ball, `--cube`, `--pill`, `--ring`, sizes and fills) gives further objects. Decorative: 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, underlined; 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 clay key 50px high. `is-hover` lifts it, `is-active` squashes it. `.ds-button--secondary` is the same key in the surface colour, `.ds-button--danger` the destructive action, `.ds-button--large` (62px) for the hero and the band, `.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. `.ds-form__check` is a label row with a `.ds-form__checkbox`; it also serves as a line of an ingredient list. `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`: recipes as separate clay bars: `.ds-list__item` holds a `.ds-list__time` ball (minutes over a `.ds-list__unit`) or a small plate, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge; `.ds-list__aside` is a figure at the end.\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.\n- `.ds-stat`: the row; one long pressed tray holding three `.ds-stat__item` figures divided by rules, each a `.ds-stat__value` (with an optional `.ds-stat__meta`) over a `.ds-stat__label`, all in `--color-input-text`.\n- `.ds-grid`: the deck, four recipe cards fanned like a hand. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay, its own coloured drop shadow and its tilt; inside, a `.ds-plate`, `.ds-grid__title`, `.ds-grid__text` and an underlined `.ds-grid__more`. `is-hover` straightens and lifts a card.\n- `.ds-timer`: a large `.ds-progress--ring` whose face shows the time over a `.ds-timer__label`, and `.ds-timer__keys`, a row of `.ds-key`.\n- `.ds-step`: one step of a recipe, used as a carousel slide: a `.ds-step__num` ball in the accent and a `.ds-step__body` with `.ds-step__title`, `.ds-step__text` and one secondary button.\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 shelves: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` with a quiet badge as count; `is-current` is a raised pill in the accent.\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`: 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`; the timer is one.\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`).\n- `.ds-footer`: a clay hill in `--fill-bar-alt` across the bottom of the window, round at the top only: `.ds-footer__inner` (three 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 <= 80px`: 52px between home sections and 80px above the footer are the largest gaps.\n- `content-width <= 1240px`: the column is capped.\n- `font-size <= 68px`: the hero title is the largest text.\n- `font-size >= 15px`: meta text and badges are the smallest text.\n- `font-weight >= 400`: nothing is light.\n- `font-families <= 3`: one serif, one sans and one monospace.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `box-shadow != none`: nothing raised is flat; a block without its inner glow, its lip and its 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 <= 60px`: the deepest shadow, under the dialog and the band, blurs over 60px.\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` or `.ds-key`. 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. A new picture of food or a tool is built like `.ds-plate`: a dish in the secondary clay with a pressed well, and round bits in the fills raised with `--shadow-control`. Never draw a shadow 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.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1240px;\n --size-aside: 400px;\n --size-side: 272px;\n --size-dialog: 460px;\n --size-search: 300px;\n --size-control: 50px;\n --size-control-large: 62px;\n --size-icon: 20px;\n --size-dot: 10px;\n --size-thumb: 26px;\n --size-track: 16px;\n --size-check: 28px;\n --size-avatar: 48px;\n --size-ring: 112px;\n --size-timer: 216px;\n --size-plate: 148px;\n --size-rule: 2px;\n --size-brand: 50px;\n --size-clay: 100px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 34px;\n --space-7: 52px;\n --space-8: 80px;\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\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__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--60 .ds-progress__bar {\n width: 60%;\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--60 {\n background: conic-gradient(var(--color-accent) 60%, 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--3 .ds-avatar__pic {\n background: var(--color-fill-3);\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__sections {\n display: flex;\n flex-direction: column;\n gap: var(--space-7);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n/* a reading 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: 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}\n.ds-page__tools {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-page__title {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\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-page__more {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n letter-spacing: 0;\n text-transform: none;\n}\n.ds-view:not(.ds-view--home) {\n padding-top: var(--space-6);\n}\n\n/* nav: no bar; the brand, a pressed search well, every section a clay key of its own, the cook at the right */\n.ds-nav {\n position: relative;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: var(--space-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 color: var(--color-heading);\n}\n.ds-nav__search {\n position: relative;\n flex: 0 1 var(--size-search);\n min-width: 0;\n color: var(--color-input-text);\n}\n.ds-nav__search svg {\n position: absolute;\n top: 50%;\n left: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n pointer-events: none;\n}\n.ds-nav__search .ds-form__input {\n padding-left: calc(var(--size-icon) + var(--space-4) + var(--space-3));\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n min-height: var(--size-control);\n padding: 0 var(--space-5);\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-control);\n box-shadow: var(--shadow-control);\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 white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n box-shadow: var(--shadow-control-hover);\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-nav__link:hover::after,\n.ds-nav__link.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-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(#recipe:target) .ds-nav__link[href=\"#recipe\"],\n.ds-page:has(#box:target) .ds-nav__link[href=\"#box\"],\n.ds-page:has(#write:target) .ds-nav__link[href=\"#write\"] {\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 transform: none;\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n color: var(--color-text);\n}\n.ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n border-radius: var(--radius-pill);\n}\n\n/* a round clay key with one icon */\n.ds-key {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\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-key svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-key--primary {\n width: var(--size-control-large);\n height: var(--size-control-large);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-key:hover,\n.ds-key.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-key:active,\n.ds-key.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.94);\n}\n.ds-key:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n\n/* hero: the title centred on the bare page, the card deck fanned out under it */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-7) 0 0;\n text-align: center;\n}\n.ds-hero__title {\n max-width: 17ch;\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: 50ch;\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 justify-content: center;\n gap: var(--space-4);\n margin-top: var(--space-5);\n}\n\n/* a plate: a clay dish with three bits of food on it */\n.ds-plate {\n position: relative;\n display: block;\n flex: none;\n width: var(--size-plate);\n height: var(--size-plate);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-panel);\n}\n.ds-plate::before {\n content: \"\";\n position: absolute;\n top: 13%;\n left: 13%;\n width: 74%;\n height: 74%;\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-plate__bit {\n position: absolute;\n top: 26%;\n left: 24%;\n width: 36%;\n height: 34%;\n background-color: var(--color-fill-1);\n border-radius: 56% 44% 48% 52% / 50% 56% 44% 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-plate__bit:nth-child(2) {\n top: 44%;\n left: 46%;\n width: 30%;\n height: 30%;\n border-radius: 50%;\n}\n.ds-plate__bit:nth-child(3) {\n top: 24%;\n left: 56%;\n width: 20%;\n height: 18%;\n border-radius: 50%;\n}\n.ds-plate__bit--1 {\n background-color: var(--color-fill-1);\n}\n.ds-plate__bit--2 {\n background-color: var(--color-fill-2);\n}\n.ds-plate__bit--3 {\n background-color: var(--color-fill-3);\n}\n.ds-plate__bit--4 {\n background-color: var(--color-fill-4);\n}\n.ds-plate--small {\n width: calc(var(--size-plate) * 0.42);\n height: calc(var(--size-plate) * 0.42);\n box-shadow: var(--shadow-control);\n}\n\n/* grid: the deck, four recipe cards fanned like a hand of cards */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n padding: var(--space-4) var(--space-4) var(--space-6);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n align-items: center;\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 text-align: center;\n transform: rotate(-5deg) translateY(var(--space-5));\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n transform: translateY(calc(var(--space-2) * -1));\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__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 transform: rotate(-2deg);\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 transform: rotate(2deg);\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 transform: rotate(5deg) translateY(var(--space-5));\n}\n.ds-grid__title {\n margin: var(--space-3) 0 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-small);\n opacity: 0.8;\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-ui);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* stats: three figures in one long pressed tray */\n.ds-stat {\n gap: 0;\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\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-input-border);\n}\n.ds-stat__value {\n justify-content: center;\n margin: 0;\n color: var(--color-input-text);\n font-size: var(--text-h1);\n}\n.ds-stat__label,\n.ds-stat__meta {\n color: var(--color-input-text);\n opacity: 0.8;\n}\n\n/* list: recipes as clay bars, the minutes on a ball in front */\n.ds-list__time {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control-large);\n height: var(--size-control-large);\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-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: 1;\n}\n.ds-list__unit {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n\n/* the timer: a thick ring around a clay face, three round keys under it */\n.ds-timer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-4);\n text-align: center;\n}\n.ds-timer .ds-progress--ring {\n width: var(--size-timer);\n height: var(--size-timer);\n box-shadow: var(--shadow-panel);\n}\n.ds-timer .ds-progress__face {\n width: 74%;\n height: 74%;\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n}\n.ds-timer__label {\n color: var(--color-text-muted);\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 letter-spacing: 0;\n}\n.ds-timer__keys {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* a step: the slide of the carousel, its number on a clay ball */\n.ds-step {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n padding: 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-control);\n color: var(--color-text);\n}\n.ds-step__num {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control-large);\n height: var(--size-control-large);\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-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: 1;\n}\n.ds-step__body {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-step__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-step__text {\n margin: 0 0 var(--space-2);\n font-size: var(--text-large);\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/* the closing band: one inverted clay block */\n.ds-page__band {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5) var(--space-6);\n padding: var(--space-6) 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: 46ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.85;\n}\n\n/* sidebar: a clay card of shelves, the current one a raised pill in the accent */\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-3) 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-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-3) 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-color: var(--color-accent);\n background: var(--fill-accent);\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n.ds-sidebar__link.is-current .ds-badge--quiet {\n background: transparent;\n color: var(--color-accent-text);\n}\n\n/* footer: a clay hill across the bottom of the window, round at the top only */\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-panel);\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));\n gap: var(--space-6);\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: 40ch;\n margin: 0;\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: 1080px) {\n .ds-nav {\n flex-wrap: wrap;\n }\n .ds-nav__search {\n order: 4;\n flex: 1 1 100%;\n }\n .ds-nav__list {\n order: 5;\n flex-wrap: wrap;\n width: 100%;\n margin: 0;\n }\n .ds-nav__actions {\n margin-left: auto;\n }\n .ds-page__split,\n .ds-page__split--side {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n }\n .ds-grid__cell,\n .ds-grid__cell--4 {\n transform: rotate(-2deg);\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav {\n gap: var(--space-3);\n }\n .ds-nav__list {\n gap: var(--space-2);\n }\n .ds-nav__link {\n flex: 1 1 auto;\n justify-content: center;\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-3);\n }\n .ds-nav__list > * {\n flex: 1 1 auto;\n }\n .ds-hero {\n padding-top: var(--space-6);\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-grid {\n grid-template-columns: minmax(0, 1fr);\n padding: 0;\n }\n .ds-grid__cell,\n .ds-grid__cell--2,\n .ds-grid__cell--3,\n .ds-grid__cell--4 {\n border-radius: var(--radius-panel);\n transform: none;\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-input-border);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-step {\n flex-direction: column;\n gap: var(--space-3);\n }\n .ds-step__title {\n font-size: var(--text-h3);\n }\n .ds-step__text {\n font-size: var(--text-base);\n }\n .ds-timer .ds-progress--ring {\n width: calc(var(--size-timer) * 0.84);\n height: calc(var(--size-timer) * 0.84);\n }\n .ds-timer .ds-progress__face {\n font-size: var(--text-h2);\n }\n .ds-page__band {\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-page__band-title {\n font-size: var(--text-h2);\n }\n .ds-page__band-text {\n font-size: var(--text-base);\n }\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-list__item {\n flex-wrap: wrap;\n }\n .ds-list__body {\n flex: 1 1 60%;\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 border-radius: var(--radius-panel);\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\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/* phones: the cards start a section gap below the hero's buttons */\n@media (max-width: 560px) {\n .ds-hero + .ds-grid {\n margin-top: var(--space-6);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: supper in four cards\n\n\n\n\n\n
\n \n \n chronoskin\n \n \n \n
\n
\n HV\n \n
\n
\n
\n\n
\n\n
\n
\n\n
\n
\n Thursday's hand of four\n

Pick a card, cook a supper

\n

Four recipes a day, each short enough for a weeknight and written by somebody who cooked it twice.

\n
\n Cook the first card\n Open my box\n
\n
\n\n
\n
\n \n

Brown butter gnocchi

\n

25 minutes · serves 2 · easy

\n Cook this\n
\n
\n \n

Leek and lemon orzo

\n

20 minutes · serves 4 · easy

\n Cook this\n
\n
\n \n

Tomato rice with eggs

\n

35 minutes · serves 3 · steady

\n Cook this\n
\n
\n \n

Plum and oat crumble

\n

45 minutes · serves 6 · easy

\n Cook this\n
\n
\n
\n\n
\n
\n
1,460
\n
cards dealt since the first supper
\n
\n
\n
28 minutes
\n
from cupboard to table, on average
\n
\n
\n
9 things
\n
to buy for a card, at most
\n
\n
\n\n
\n
\n

Cooked most this week All recipes

\n \n
\n\n
\n

Gnocchi, step 3 running

\n
\n
\n
3:12of 8 minutes
\n
\n \n \n \n
\n
\n

Brown the butter until it smells of nuts. Back to the recipe

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

Cooked something twice?

\n

Write it down as a card. Nine ingredients, six steps, and it may be dealt next week.

\n
\n Write a card\n
\n\n
\n
\n\n
\n\n
    \n
  1. Tonight
    2. \n
  2. Pasta and dumplings
    3. \n
  3. Brown butter gnocchi
    4. \n
\n\n
\n
\n

Brown butter gnocchi

\n

Crisp outside, soft inside, with sage and a squeeze of lemon. 25 minutes for two.

\n
\n
\n Save to my box\n Start cooking\n
\n
\n\n
\n
\n \n \n
\n\n
\n
\n
\n
\n
\n 3\n
\n

Brown the butter

\n

Melt the butter over a medium heat and keep it moving. It foams, goes quiet, then turns the colour of hazelnuts.

\n Set 8 minutes\n
\n
\n
\n 4\n
\n

Fry the gnocchi

\n

Tip the gnocchi into the butter in one layer and leave them alone until the undersides are gold.

\n Set 5 minutes\n
\n
\n
\n 5\n
\n

Sage and lemon

\n

Add the sage for the last minute, then the lemon off the heat.

\n Set 1 minute\n
\n
\n
\n
\n \n
\n \n
\n
\n\n
\n
\n
\n

Cook's notes

\n

Shop gnocchi are fine here. What matters is a dry pan and patience with the butter.

\n

The card is filed as PASTA-112. It was tested with salted butter; with unsalted, add a pinch of salt with the sage.

\n

What can go wrong

\n

Butter goes from brown to burnt in half a minute. Take the pan off the heat when in doubt.

\n

Swaps that work

\n
    \n
  • Thyme for sage, in the same amount.
    • \n
  • A spoon of capers instead of the lemon.
    • \n
  • Walnuts on top when there is no cheese.
    • \n
\n

Serve with cucumber, yoghurt and dill, or find another side in your box.

\n

\n Leek and lemon orzo\n Tomato rice\n Plum crumble\n Baked beans\n All pasta\n

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

You need for 2

\n
\n \n \n \n \n \n Add 3 to the shopping list\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
A serving hasAmountOf a day
Energy540 kcal27%
Fat28 g40%
Carbohydrate61 g23%
Protein12 g24%
SaltWith salted butter, as tested1.9 g32%
Fibre4 g13%
Sugar3 g3%
\n\n
\n
\n TITomas Idowu14 cards · cooks in a small kitchen\n
\n
\n
\n
\n
\n
\n\n
\n\n
    \n
  1. Tonight
    2. \n
  2. My box
    3. \n
  3. Pasta and dumplings
    4. \n
\n\n
\n
\n

My recipe box

\n

38 cards you saved, sorted the way a kitchen drawer never is.

\n
\n
\n Write a card\n
\n
\n\n
\n
\n \n
\n \n

The shopping list is empty

\n

Tick what you lack on a recipe and it lands here.

\n Open a recipe\n
\n
\n\n
\n \n\n \n\n
\n
\n How many cards fit in a box? \n

As many as you like. Shelves are only there so that you find them again.

\n
\n
\n Can I change a saved recipe? \n

You can add notes to your copy. The card itself stays as its cook wrote it.

\n
\n
\n Who sees my box? \n

Only you, unless you share a shelf by its link.

\n
\n
\n
\n
\n
\n\n
\n\n
    \n
  1. Tonight
    2. \n
  2. My box
    3. \n
  3. Write a card
    4. \n
\n\n
\n
\n

Write a card

\n

Something you cooked at least twice. Nine ingredients and six steps at most.

\n
\n
\n Back to my box\n
\n
\n\n
\n
\n

The card draft

\n
\n
\n
\n \n \n
\n
\n
\n \n \n Enter a number of minutes.\n
\n
\n \n \n \n \n \n
\n
\n
\n \n \n Nine lines at most. Salt, pepper and oil do not count.\n
\n
\n \n \n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n \n
Drafts are kept for a month. Nobody else sees them.
\n
\n
\n \n
Eleven ingredients are two too many. Join or drop two lines.
\n
\n
\n
\n
\n

Throw this card away?

\n
The name, the ingredients and the first step are removed. A draft cannot be brought back.
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.claymorphism.blog.s06.p06.t06.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"claymorphism\",\n \"years\": [\n 2021,\n 2025\n ]\n },\n \"archetype\": \"blog\",\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-6665\",\n \"short\": \"v1-cl-6665\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(255 234 216);\n --color-canvas: rgb(255 242 229);\n --color-surface: rgb(255 252 246);\n --color-surface-alt: rgb(255 243 231);\n --color-surface-strong: rgb(252 222 199);\n --color-bar: rgb(255 252 246);\n --color-bar-text: rgb(92 44 30);\n --color-bar-alt: rgb(228 124 90);\n --color-bar-alt-text: rgb(56 20 14);\n --color-inverse: rgb(104 46 36);\n --color-inverse-text: rgb(255 240 226);\n --color-text: rgb(84 52 44);\n --color-text-muted: rgb(132 96 86);\n --color-heading: rgb(72 32 24);\n --color-heading-alt: rgb(184 78 44);\n --color-link: rgb(190 68 36);\n --color-link-quiet: rgb(92 44 30);\n --color-link-visited: rgb(146 78 108);\n --color-link-hover: rgb(146 44 18);\n --color-link-active: rgb(92 106 28);\n --color-border: rgb(246 220 200);\n --color-border-strong: rgb(232 186 158);\n --color-border-muted: rgb(252 234 220);\n --color-accent: rgb(255 198 106);\n --color-accent-text: rgb(74 34 20);\n --color-accent-alt: rgb(236 112 112);\n --color-fill-1: rgb(255 178 142);\n --color-fill-2: rgb(255 214 132);\n --color-fill-3: rgb(246 172 172);\n --color-fill-4: rgb(198 216 152);\n --color-button: rgb(204 80 48);\n --color-button-text: rgb(255 250 244);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(255 252 246);\n --color-button-secondary-text: rgb(150 54 28);\n --color-input: rgb(255 240 227);\n --color-input-text: rgb(84 52 44);\n --color-input-border: rgb(240 206 184);\n --color-disabled: rgb(244 230 220);\n --color-disabled-text: rgb(176 150 140);\n --color-danger: rgb(184 36 48);\n --color-danger-surface: rgb(255 224 222);\n --color-success: rgb(72 140 70);\n --color-warning: rgb(204 126 0);\n --color-notice: rgb(236 244 220);\n --color-notice-text: rgb(58 80 30);\n --color-focus: rgb(150 54 28);\n --color-shadow: rgb(190 100 60 / 0.3);\n --color-overlay: rgb(72 32 24 / 0.38);\n}\n\n/* @part type */\n:root {\n --font-body: Karla, Mulish, \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", sans-serif;\n --font-heading: Fraunces, \"DM Serif Display\", \"Iowan Old Style\", \"Palatino Linotype\", Georgia, serif;\n --font-ui: Karla, Mulish, \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", sans-serif;\n --font-mono: \"Courier Prime\", \"Courier New\", Courier, monospace;\n --text-base: 18px;\n --text-small: 15px;\n --text-ui: 16px;\n --text-large: 21px;\n --text-display: 68px;\n --text-h1: 42px;\n --text-h2: 29px;\n --text-h3: 22px;\n --line-body: 1.55;\n --line-heading: 1.18;\n --line-display: 1.02;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.01em;\n --display-tracking: -0.025em;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\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: 26px;\n --radius-panel: 44px;\n --radius-pill: 999px;\n --radius-page: 64px;\n --shadow-panel: 0 20px 32px -12px var(--color-shadow), inset 0 -10px 0 color-mix(in srgb, black 7%, transparent), inset 0 10px 16px color-mix(in srgb, white 75%, transparent);\n --shadow-control: 0 9px 14px -6px var(--color-shadow), inset 0 -6px 0 color-mix(in srgb, black 12%, transparent), inset 0 5px 8px color-mix(in srgb, white 55%, transparent);\n --shadow-control-hover: 0 14px 20px -6px var(--color-shadow), inset 0 -7px 0 color-mix(in srgb, black 12%, transparent), inset 0 5px 8px color-mix(in srgb, white 70%, transparent);\n --shadow-control-pressed: inset 0 6px 0 color-mix(in srgb, black 10%, transparent), inset 0 -3px 6px color-mix(in srgb, white 55%, transparent);\n --shadow-dialog: 0 38px 60px -18px var(--color-shadow), inset 0 -14px 0 color-mix(in srgb, black 6%, transparent), inset 0 12px 20px color-mix(in srgb, white 85%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--color-fill-1) 55%, transparent) 0, transparent 22%), radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--color-fill-3) 55%, transparent) 0, transparent 26%), radial-gradient(circle at 78% 92%, color-mix(in srgb, var(--color-fill-4) 40%, transparent) 0, transparent 24%), linear-gradient(200deg, var(--color-canvas), var(--color-page));\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: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 88%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background-color 0.1s ease-out;\n --backdrop-blur: 0px;\n}\n" } }