{ "id": "v1-cl-5232", "long_id": "v1.claymorphism.landing.s05.p02.t03.u02", "name": "Claymorphism collectibles landing", "era": { "slug": "claymorphism", "code": "cl", "name": "Claymorphism", "years": [ 2021, 2025 ], "description": "Soft 3D of 2021 to 2025: thick rounded shapes like modelling clay, pastel fills with a light inner glow on top and a dark inner shadow below, big floating drop shadows, round friendly type and playful blobs." }, "archetype": "landing", "mode": "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 above, a darker lip below and a soft coloured shadow under them. In 2021 and 2022 it dressed the landing pages of collectible and token projects, where floating coins, blobs and little characters rendered in 3D promised something friendly. This pack is such a landing page for a set of numbered clay figures: a centred hero between floating coins and critters, three big coins with a figure each, steps as soft bricks, a carousel of figures and a dark closing block, set in a wide heavy display face over a geometric sans.", "url": "https://chrono.skin/s/v1-cl-5232", "preview_url": "https://chrono.skin/s/v1-cl-5232/specimen.html", "files": { "STYLE.md": "# Claymorphism collectibles landing\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 above, a darker lip below and a soft coloured shadow under them. In 2021 and 2022 it dressed the landing pages of collectible and token projects, where floating coins, blobs and little characters rendered in 3D promised something friendly. This pack is such a landing page for a set of numbered clay figures: a centred hero between floating coins and critters, three big coins with a figure each, steps as soft bricks, a carousel of figures and a dark closing block, set in a wide heavy display face over a geometric sans.\n\n## Layout\n\n- Content column: `--size-page` (1080px), centred, with `--space-5` (26px) side padding. The page fill covers the rest of the window; the layout is fluid below that width.\n- Navigation: `.ds-nav` has no bar. The brand stands on the bare page at the left, the links sit together in one small clay capsule in the middle (the last of them a `.ds-menu`), the primary button stands at the right.\n- Home page: `.ds-page__sections` stacks centred sections `--space-8` (96px) apart: the hero (badge, title, lead, actions and the meter bar, with clay things floating at both sides), the `.ds-stat` coins, a `.ds-feature` row (a pressed tray of clay things beside text), the `.ds-grid` of four bricks under a centred `.ds-page__title`, a `.ds-page__split` of two even columns (the carousel of figures beside the accordion of questions) and the closing `.ds-page__band`.\n- Inner pages have no hero. `--space-5` under the navigation come the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1`, one lead line, the action at the right) on the bare page. The drops page is one `.ds-page__stack`, 36px apart: a `.ds-page__tools` row with the `.ds-tabs` and a `.ds-switch`, the table across the column, the pagination, then a `.ds-page__split` (the list of recent draws beside a panel). The join page is a `.ds-page__split`: the form in one `.ds-panel`, notices and the dialog beside it. The guide uses `.ds-page__split--side`: the text panel at the left, a `--size-side` (300px) column with the `.ds-sidebar` and the empty state at the right. Keep the two columns about equally long.\n- Views. The specimen is one site with four views, each `
` inside `.ds-page__inner`; navigation and footer stand outside them. `home` is the landing page, `drops` the table of drops, `join` the form, `guide` the help text. One `:has()` rule per view puts the link of the current view in the accent clay.\n- Spacing scale: `--space-1` 4px (between capsule links), `--space-2` 8px (label to control, the thickness of a coin's edge), `--space-3` 12px (between list bars, the edge of a big coin), `--space-4` 18px (between buttons, row padding), `--space-5` 26px (card padding, grid gap, form gap), `--space-6` 36px (between panels, column gap of a split), `--space-7` 56px (band padding, gap in a feature row), `--space-8` 96px (between home sections, above the footer).\n- `--size-coin` (232px) is the diameter of a stat coin, `--size-tray` (300px) the least height of a feature tray, `--size-clay` (112px) the base size of coins and critters.\n- Below 960px the splits and the feature row stack, the capsule moves under the brand and the hero's clay things line up under its text instead of floating, and table cells close up to `--space-3` at their sides. Below 720px the bricks are one column and the stat coins lie straight. Below 560px the hero title takes `--text-h1`, the meter stacks, tabs fill the width and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways.\n- On a phone (560px and below) the capsule `.ds-nav__list` stays under the brand and does not wrap: its links become equal cells with centred text inside a pill-shaped capsule, and the current link stays a raised accent pill. Between 560px and 960px the capsule wraps and is centred. Below 960px the bar has two lines, brand and button above, the capsule below.\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__sections` the stack of home sections, `.ds-page__stack` a vertical stack 36px apart, `.ds-page__split` two even columns (`--side` for a side column at the right), `.ds-page__narrow` a narrower centred column, `.ds-page__tools` a row with two ends, `.ds-page__title` a centred section heading with `.ds-page__title-note` (`--left` aligns it left), `.ds-page__band` the closing inverted block with `.ds-page__band-title`, `.ds-page__band-text` and `.ds-page__band-art`. `.ds-view` is one screen of the specimen; an application with one document per page does not need it.\n- `.ds-brand`: the site's mark and name in the header: `.ds-brand__mark` is a clay tile `--size-brand` (46px) 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__list` is the capsule, `.ds-nav__link` one link (a raised accent pill when `is-current`, pressed in on `is-hover`), `.ds-nav__actions` the button at the right.\n- `.ds-menu`: a `
` drop-down under a navigation item: `.ds-menu__toggle` on the summary, `.ds-menu__list` the clay card under it, `.ds-menu__link` with an optional `.ds-menu__note`. `--end` aligns it right, `--up` opens it upwards.\n- `.ds-hero`: the page introduction, centred on the bare page: `.ds-hero__body` holds a badge, `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions` and `.ds-hero__meter` (a clay bar with overlapping avatars in `.ds-hero__faces` and a progress bar in `.ds-hero__meter-bar`). `.ds-hero__art` lies behind it and holds clay things, each placed with `.ds-hero__obj--a` to `--f`.\n- `.ds-coin`: a clay coin with a pressed ring and a raised middle, tilted; `--2` to `--4` pick the fill, `--small` and `--large` the size. `.ds-critter`: a blob of clay on two round feet, without a face; it may hold two `.ds-critter__horn` and a pressed `.ds-critter__belly`; `--1`, `--3`, `--4` pick the fill, `--small` and `--large` the size. `.ds-clay` (ball, `--cube`, `--pill`, `--ring`, `--tiny` and other sizes) gives further objects. All are decorative: mark them `aria-hidden`.\n- `.ds-feature`: a row of two halves: `.ds-feature__art`, a pressed tray of clay things, and a text half with a `.ds-page__title--left`, `.ds-feature__text` and one button.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, `.ds-page-header__actions` at the right with at most one primary button.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for an inverted code block.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for titles and table links; `.ds-link__sample` lays out a row of links.\n- `.ds-button`: a fat clay key 52px 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` (64px) 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`. `is-error` rings the control in `--color-danger` and is followed by `.ds-form__error`; `.ds-form__hint` is help text, `.ds-form__actions` holds the buttons, `.ds-form__row` puts two fields side by side.\n- `.ds-switch`: a fat clay toggle over a checkbox: `.ds-switch__input`, `.ds-switch__track` (a dent that fills with the accent when on) with a clay ball as thumb, `.ds-switch__label` and `.ds-switch__hint`; `--end` puts the track at the right.\n- `.ds-table`: one clay sheet with a head in `--color-bar-alt` and rows divided by a soft rule. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `.ds-table__strong` a row title, `.ds-table__opt` a column dropped on a phone, `is-hover` tints a row.\n- `.ds-list`: items as separate clay bars: `.ds-list__item` holds an avatar, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge or a `.ds-list__aside` figure.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body` (a column with 16px gaps), `.ds-panel__note` for small muted text, `.ds-panel__line` for a row with two ends. `.ds-panel--accent` is the card in the accent clay.\n- `.ds-stat`: the row; each `.ds-stat__item` is one big clay coin lying a little askew, in the first three fills, with a `.ds-stat__value` over a `.ds-stat__label`. Keep the figure to six characters.\n- `.ds-grid`: four soft bricks, two by two. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay and its own coloured drop shadow; inside, a numbered ball `.ds-grid__num` beside a `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-card`: a figure card, used as a carousel slide: `.ds-card__tray` is a pressed square holding a critter, `.ds-card__body` holds a badge, `.ds-card__title`, `.ds-card__text` and one 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 pressed well of topics: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link`, a raised key when `is-current` or hovered.\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`.\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`: one clay block in `--fill-bar-alt` with everything centred: `.ds-footer__inner` holds the brand, `.ds-footer__links` with `.ds-footer__link` and `.ds-footer__text`.\n\n## Never\n\n- `block-gap <= 96px`: 96px between home sections is the largest gap.\n- `content-width <= 1080px`: 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. Decide first whether it is raised or dented: a container starts from `.ds-panel` (fill, radius and `--shadow-panel` together), something pressed or filled in starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`), something the user presses starts from `.ds-button--secondary`. For a coloured card take a `--color-fill-*` background, `--color-accent-text` for everything on it, and add the coloured drop shadow as `.ds-grid__cell` does. A new illustration is built like `.ds-coin` and `.ds-critter`: round shapes in a fill, parts that inherit that fill, raised with `--shadow-control` or pressed with `--shadow-control-pressed`, and no faces. 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: 1080px;\n --size-side: 300px;\n --size-dialog: 440px;\n --size-control: 52px;\n --size-control-large: 64px;\n --size-icon: 18px;\n --size-dot: 12px;\n --size-thumb: 28px;\n --size-track: 20px;\n --size-check: 28px;\n --size-avatar: 46px;\n --size-ring: 96px;\n --size-rule: 2px;\n --size-brand: 46px;\n --size-clay: 112px;\n --size-coin: 232px;\n --size-tray: 300px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 18px;\n --space-5: 26px;\n --space-6: 36px;\n --space-7: 56px;\n --space-8: 96px;\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--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--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\n/* brand: the mark on a small clay key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: 58%;\n height: 58%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n max-width: 60ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 72ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--radius-panel));\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: var(--radius-pill);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: fat clay keys that lift on hover and squash when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-button:hover::after,\n.ds-button.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: calc(var(--space-1) * 0.5);\n}\n.ds-button:active,\n.ds-button.is-active,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97, 0.93);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--wide {\n width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* form: controls are wells pressed into the clay */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n padding: 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-4) var(--space-5);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: var(--shadow-control-pressed), 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n padding: 0 var(--space-2);\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n padding: 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: 34%;\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-form__checkbox:checked::after,\n.ds-form__checkbox.is-checked::after {\n content: \"\";\n position: absolute;\n top: 16%;\n left: 34%;\n width: 30%;\n height: 52%;\n border: var(--border-width-strong) var(--border-style) var(--color-accent-text);\n border-top-color: transparent;\n border-left-color: transparent;\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one clay sheet with a coloured head, rows divided by a soft rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--color-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n.ds-table .ds-table__strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* list: every item is its own clay bar */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__aside {\n flex: none;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n font-variant-numeric: tabular-nums;\n}\n\n/* panel: the basic clay card */\n.ds-panel {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n.ds-panel__body p {\n margin: 0;\n}\n.ds-panel__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel__line {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n/* a panel in the accent clay: all of its text takes the ink of the fills */\n.ds-panel--accent {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-panel--accent .ds-panel__title,\n.ds-panel--accent .ds-panel__note {\n color: var(--color-accent-text);\n}\n\n/* stats: figures in the heading face on clay tiles */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-4) var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n\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--2 .ds-avatar__pic {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 .ds-avatar__pic {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 .ds-avatar__pic {\n background: var(--color-fill-4);\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: every section its own clay bar that opens */\n.ds-accordion {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-accordion__item {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-4));\n height: calc(var(--size-icon) + var(--space-4));\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n transition: var(--transition);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* carousel: one slide showing, round clay arrows and dots under it */\n.ds-carousel {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n margin: 0;\n padding: 0;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-carousel__arrow:active,\n.ds-carousel__arrow.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.94);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: calc(3 * var(--size-dot));\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n\n/* the form view has no link of its own: its key in the bar stays pressed while it shows */\n.ds-page:has(#join:target) .ds-nav__actions .ds-button:not(.ds-button--secondary) {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n box-shadow: var(--shadow-control-pressed);\n transform: none;\n}\n@media (max-width: 560px) {\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-pagination__link {\n min-width: calc(var(--size-control) - var(--space-2));\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-3);\n }\n}\n\n/* width container and the stacks of the pages: one narrow centred column */\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-8);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n.ds-page__split {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__split--side {\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n}\n.ds-page__narrow {\n width: 100%;\n max-width: calc(var(--size-page) * 0.68);\n margin: 0 auto;\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 margin: 0 0 var(--space-6);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-align: center;\n}\n.ds-page__title--left {\n margin-bottom: var(--space-3);\n text-align: left;\n}\n.ds-page__title-note {\n display: block;\n max-width: 48ch;\n margin: var(--space-3) auto 0;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n}\n.ds-view:not(.ds-view--home) {\n padding-top: var(--space-5);\n}\n\n/* nav: the brand on the bare page, the links in one small clay capsule, the call to action at the right */\n.ds-nav {\n position: relative;\n z-index: 5;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\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__list {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\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-pill);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\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 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-pressed);\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(#drops:target) .ds-nav__link[href=\"#drops\"],\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\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-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* coins and critters: the illustrations, in the same clay as the cards */\n.ds-coin {\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: 0 var(--space-2) 0 color-mix(in srgb, var(--color-fill-1) 76%, var(--color-accent-text)), var(--shadow-panel);\n transform: rotate(-14deg);\n}\n.ds-coin::before {\n content: \"\";\n position: absolute;\n top: 14%;\n left: 14%;\n width: 72%;\n height: 72%;\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-coin::after {\n content: \"\";\n position: absolute;\n top: 31%;\n left: 31%;\n width: 38%;\n height: 38%;\n background-color: inherit;\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-coin--2 {\n background-color: var(--color-fill-2);\n box-shadow: 0 var(--space-2) 0 color-mix(in srgb, var(--color-fill-2) 76%, var(--color-accent-text)), var(--shadow-panel);\n}\n.ds-coin--3 {\n background-color: var(--color-fill-3);\n box-shadow: 0 var(--space-2) 0 color-mix(in srgb, var(--color-fill-3) 76%, var(--color-accent-text)), var(--shadow-panel);\n}\n.ds-coin--4 {\n background-color: var(--color-fill-4);\n box-shadow: 0 var(--space-2) 0 color-mix(in srgb, var(--color-fill-4) 76%, var(--color-accent-text)), var(--shadow-panel);\n}\n.ds-coin--small {\n width: calc(var(--size-clay) * 0.6);\n height: calc(var(--size-clay) * 0.6);\n transform: rotate(18deg);\n}\n.ds-coin--large {\n width: calc(var(--size-clay) * 1.4);\n height: calc(var(--size-clay) * 1.4);\n}\n/* a critter: a blob of clay on two round feet, without a face */\n.ds-critter {\n position: relative;\n display: block;\n flex: none;\n width: var(--size-clay);\n height: calc(var(--size-clay) * 1.1);\n margin-bottom: calc(var(--size-clay) * 0.1);\n background-color: var(--color-fill-2);\n border-radius: 56% 44% 46% 54% / 62% 58% 42% 38%;\n box-shadow: var(--shadow-panel);\n}\n.ds-critter::before,\n.ds-critter::after {\n content: \"\";\n position: absolute;\n bottom: -9%;\n left: 14%;\n width: 30%;\n height: 22%;\n background-color: inherit;\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-critter::after {\n left: auto;\n right: 14%;\n}\n.ds-critter__horn {\n position: absolute;\n top: -12%;\n left: 22%;\n width: 20%;\n height: 28%;\n background-color: inherit;\n border-radius: 50% 50% 40% 40%;\n box-shadow: var(--shadow-control);\n transform: rotate(-16deg);\n}\n.ds-critter__horn + .ds-critter__horn {\n left: auto;\n right: 22%;\n transform: rotate(16deg);\n}\n.ds-critter__belly {\n position: absolute;\n top: 40%;\n left: 26%;\n width: 48%;\n height: 40%;\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-critter--1 {\n background-color: var(--color-fill-1);\n}\n.ds-critter--3 {\n background-color: var(--color-fill-3);\n}\n.ds-critter--4 {\n background-color: var(--color-fill-4);\n}\n.ds-critter--small {\n width: calc(var(--size-clay) * 0.62);\n height: calc(var(--size-clay) * 0.68);\n}\n.ds-critter--large {\n width: calc(var(--size-clay) * 1.36);\n height: calc(var(--size-clay) * 1.5);\n}\n\n/* hero: everything centred, coins and critters floating at either side of the title */\n.ds-hero {\n position: relative;\n padding: var(--space-8) 0 0;\n}\n.ds-hero__body {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.ds-hero__title {\n max-width: min(15ch, 58%);\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: 44ch;\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-6);\n}\n.ds-hero__art {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: none;\n}\n.ds-hero__obj {\n position: absolute;\n}\n.ds-hero__obj--a {\n top: 20%;\n left: 0;\n}\n.ds-hero__obj--b {\n top: 52%;\n left: 12%;\n}\n.ds-hero__obj--c {\n top: 10%;\n left: 19%;\n}\n.ds-hero__obj--d {\n top: 16%;\n right: 1%;\n}\n.ds-hero__obj--e {\n top: 56%;\n right: 13%;\n}\n.ds-hero__obj--f {\n top: 8%;\n right: 21%;\n}\n/* the meter under the hero: one clay bar that shows how much of the drop is taken */\n.ds-hero__meter {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n width: 100%;\n max-width: calc(var(--size-page) * 0.68);\n margin-top: var(--space-7);\n padding: var(--space-4) 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-panel);\n color: var(--color-text);\n text-align: left;\n}\n.ds-hero__meter-bar {\n flex: 1;\n min-width: 0;\n}\n.ds-hero__faces {\n display: flex;\n flex: none;\n}\n.ds-hero__faces .ds-avatar + .ds-avatar {\n margin-left: calc(var(--space-3) * -1);\n}\n\n/* stats: three big clay coins lying flat, a figure on each */\n.ds-stat {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-5) var(--space-7);\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: var(--size-coin);\n height: var(--size-coin);\n padding: var(--space-4);\n background: var(--color-fill-1);\n border-radius: 50%;\n box-shadow: 0 var(--space-3) 0 color-mix(in srgb, var(--color-fill-1) 76%, var(--color-accent-text)), var(--shadow-panel);\n color: var(--color-accent-text);\n text-align: center;\n transform: rotate(-4deg);\n}\n.ds-stat__item:nth-child(2) {\n background: var(--color-fill-2);\n box-shadow: 0 var(--space-3) 0 color-mix(in srgb, var(--color-fill-2) 76%, var(--color-accent-text)), var(--shadow-panel);\n transform: translateY(var(--space-5)) rotate(3deg);\n}\n.ds-stat__item:nth-child(3) {\n background: var(--color-fill-3);\n box-shadow: 0 var(--space-3) 0 color-mix(in srgb, var(--color-fill-3) 76%, var(--color-accent-text)), var(--shadow-panel);\n transform: rotate(5deg);\n}\n.ds-stat__value {\n justify-content: center;\n margin: 0;\n color: var(--color-accent-text);\n font-size: var(--text-h1);\n}\n.ds-stat__label {\n max-width: 14ch;\n color: var(--color-accent-text);\n opacity: 0.8;\n}\n\n/* a feature row: a pressed tray of clay things beside a few lines of text */\n.ds-feature {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-7);\n align-items: center;\n}\n.ds-feature__art {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n min-height: var(--size-tray);\n padding: var(--space-5);\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}\n.ds-feature__text {\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n\n/* grid: four soft bricks, two by two, a numbered clay ball on each */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6);\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}\n.ds-grid__cell--1 {\n background-color: var(--color-fill-1);\n}\n.ds-grid__cell--2 {\n background-color: var(--color-fill-2);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-2) 80%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: var(--color-fill-3);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-3) 80%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: var(--color-fill-4);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-4) 80%, transparent);\n}\n.ds-grid__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-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 font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: 1;\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-ui);\n}\n\n/* a figure card: the slide of the carousel, the critter on a pressed tray at its left */\n.ds-card {\n display: grid;\n grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: center;\n padding: var(--space-4);\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-card__tray {\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-card__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-card__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-card__text {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\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, coins at its right */\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-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: 40ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.85;\n}\n.ds-page__band-art {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* sidebar: a pressed well of topics, the current one a raised key */\n.ds-sidebar {\n padding: var(--space-5) var(--space-4);\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}\n.ds-sidebar__heading {\n margin: 0 var(--space-3) 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 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-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n color: var(--color-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-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.ds-sidebar__link.is-current {\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n\n/* footer: one clay block with everything centred in it */\n.ds-footer {\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: var(--space-8) auto 0;\n padding: 0 var(--space-5) var(--space-5);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-6) var(--space-5);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-alt-text);\n text-align: center;\n}\n.ds-footer__text {\n max-width: 52ch;\n margin: 0;\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: underline;\n}\n\n@media (max-width: 960px) {\n .ds-page__split,\n .ds-page__split--side,\n .ds-feature {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page__sections {\n gap: var(--space-7);\n }\n .ds-nav {\n flex-wrap: wrap;\n }\n .ds-nav__list {\n order: 3;\n flex-wrap: wrap;\n justify-content: center;\n width: 100%;\n border-radius: var(--radius-panel);\n }\n .ds-hero {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-6);\n }\n .ds-hero__title {\n max-width: 15ch;\n }\n .ds-hero__art {\n position: static;\n order: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n margin-top: var(--space-7);\n }\n .ds-hero__obj {\n position: relative;\n top: auto;\n right: auto;\n left: auto;\n }\n .ds-hero__obj--c,\n .ds-hero__obj--f {\n display: none;\n }\n .ds-stat {\n gap: var(--space-5);\n }\n /* a table of six columns keeps its width by closing up its cells */\n .ds-table th,\n .ds-table td {\n padding: var(--space-4) var(--space-3);\n }\n .ds-table th {\n white-space: normal;\n }\n}\n@media (max-width: 720px) {\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat__item,\n .ds-stat__item:nth-child(2),\n .ds-stat__item:nth-child(3) {\n transform: none;\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav,\n .ds-footer {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-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__obj--b,\n .ds-hero__obj--e {\n display: none;\n }\n .ds-hero__art .ds-coin--large {\n width: var(--size-clay);\n height: var(--size-clay);\n }\n .ds-hero__art .ds-critter--large {\n width: var(--size-clay);\n height: calc(var(--size-clay) * 1.1);\n }\n .ds-hero__meter {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-3);\n border-radius: var(--radius-panel);\n }\n .ds-hero__meter-bar {\n flex: none;\n }\n .ds-page__title {\n font-size: var(--text-h2);\n }\n .ds-page__title-note {\n font-size: var(--text-base);\n }\n .ds-feature__art {\n min-height: 0;\n gap: var(--space-3);\n border-radius: var(--radius-panel);\n }\n .ds-feature__art .ds-critter--large {\n width: var(--size-clay);\n height: calc(var(--size-clay) * 1.1);\n }\n .ds-feature__text {\n font-size: var(--text-base);\n }\n .ds-grid__cell {\n gap: var(--space-4);\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-card {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-card__tray {\n aspect-ratio: 2;\n }\n .ds-card__title {\n font-size: var(--text-h3);\n }\n .ds-page__band {\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-page__band-title {\n font-size: var(--text-h2);\n }\n .ds-carousel__track {\n margin: calc(var(--space-4) * -1);\n padding: var(--space-4);\n scroll-padding: 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-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__inner {\n border-radius: var(--radius-panel);\n }\n}\n\n/* phone: the capsule's links are equal cells from edge to edge */\n@media (max-width: 560px) {\n .ds-nav__list {\n flex-wrap: nowrap;\n border-radius: var(--radius-pill);\n }\n .ds-nav__list > li {\n flex: 1 1 auto;\n }\n .ds-nav__list .ds-nav__link {\n justify-content: center;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: ten thousand clay critters\n\n\n\n\n\n
\n \n \n chronoskin\n \n \n
\n Join drop 7\n
\n
\n\n
\n\n
\n
\n\n
\n
\n \n \n \n \n \n \n
\n
\n Drop 7 is open until Sunday\n

Ten thousand critters made of clay

\n

Each one is squished by hand, numbered once and yours to keep, swap or put on a shelf for everybody to see.

\n
\n Get a critter\n See the drops\n
\n
\n \n NB\n KO\n EA\n \n
\n
Drop 7: the pond640 of 1,000 taken
\n \n
\n
\n
\n
\n\n
\n
\n
10,000
\n
critters, no two alike
\n
\n
\n
6,640
\n
already have a home
\n
\n
\n
2,180
\n
keepers in the club
\n
\n
\n\n
\n
\n \n \n \n
\n
\n

One critter, one number, one keeper

\n

A critter comes with its number and the day it was made. Nobody can make a second one, and the whole club can see whose shelf it sits on.

\n How keeping works\n
\n
\n\n
\n

From the pond to your shelf Four steps, and the first takes less than a minute.

\n
\n
\n 1\n
\n

Join the drop

\n

Leave a name and an email. No wallet is needed to start.

\n
\n
\n
\n 2\n
\n

Draw a critter

\n

You get the next one out of the pond. Which one is a surprise.

\n
\n
\n
\n 3\n
\n

Put it on a shelf

\n

Your shelf is a page of its own, with every critter you keep.

\n
\n
\n
\n 4\n
\n

Swap when you like

\n

Offer it to another keeper. A swap is done when both say yes.

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n No. 6641\n

Pond hopper

\n

Two horns, a round belly. One of 120 in mint green.

\n Draw one\n
\n
\n
\n
\n
\n No. 6642\n

Mud roller

\n

No horns at all. One of 300 in peach.

\n Draw one\n
\n
\n
\n
\n
\n No. 6643\n

Sky sitter

\n

Two horns, no belly. One of 40 in blue.

\n Draw one\n
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n What do I own when I keep one? \n

The numbered critter and its place on your shelf. The picture may be used by anybody; the number is yours alone.

\n
\n
\n Do I need a wallet? \n

Not to start. You can connect one later and move your critters into it.

\n
\n
\n Can I choose which one I get? \n

No. A draw is a surprise. Swapping is how you get the one you wanted.

\n
\n
\n What happens after ten thousand? \n

The pond is closed for good. Only swaps go on.

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

360 left in the pond

\n

Drop 7 closes on Sunday at noon, or when the last critter is drawn.

\n
\n
\n \n Get a critter\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Drops
    3. \n
  3. All seven
    4. \n
\n\n
\n
\n

The drops

\n

Seven so far, three still to come. A drop is a batch of critters from one place.

\n
\n
\n Join drop 7\n
\n
\n\n
\n
\n \n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DropOpenedCrittersKeepersLowest swapThe cheapest offer open right nowState
7: the pond3 October1,0005120.08Open
6: the attic5 September1,0007400.21Closed
5: the orchard1 August1,2008010.17Closed
4: the tide pool4 July8006550.34Closed
8: the snowfield7 November1,00000.00To come
\n\n \n\n
\n \n
\n

Drop 7 so far 3 days left

\n
\n
\n
64%
\n

640 of 1,000 critters are drawn. The pond closes on Sunday at noon.

\n
\n Draw one\n
\n
\n
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Drops
    3. \n
  3. Join drop 7
    4. \n
\n\n
\n
\n

Join drop 7

\n

One draw for each keeper. You can swap from the first minute.

\n
\n
\n Back to the drops\n
\n
\n\n
\n
\n

About you step 1 of 2

\n
\n
\n
\n \n \n Shown on your shelf and next to every swap.\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 \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n \n
360 critters are left. Joining holds one for you for ten minutes.
\n
\n
\n \n
That invite code was used. Each code works once.
\n
\n
\n
\n
\n

Leave the drop?

\n
The critter held for you goes back into the pond. You can join again while the drop is open.
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Guide
    3. \n
  3. How keeping works
    4. \n
\n\n
\n
\n

Keeper's guide

\n

Drawing, keeping and swapping, in plain words.

\n
\n
\n Join drop 7\n
\n
\n\n
\n
\n
\n
\n

How keeping works

\n

A critter is a numbered clay figure. Whoever keeps it is written next to its number, for everybody to read.

\n

When you draw one, the record says so under a reference such as POND-6641. From then on only you can offer it for a swap.

\n

Swapping

\n

An offer names the critter you give and the one you want, or a price. The other keeper says yes or lets it lapse after a week.

\n

Before you offer

\n
    \n
  • Check how many of its colour exist.
    • \n
  • Look at the lowest swap of its drop.
    • \n
  • Remember that a done swap cannot be undone.
    • \n
\n

Leaving the club

\n

Your critters stay yours. See what each drop is worth today or draw your first one.

\n

\n Drawing\n Shelves\n Swapping\n Wallets\n All drops\n

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

Your shelf is empty

\n

Draw a critter and it stands here, with its number under it.

\n Get a critter\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.claymorphism.landing.s05.p02.t03.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"claymorphism\",\n \"years\": [\n 2021,\n 2025\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-cl-5232\",\n \"short\": \"v1-cl-5232\"\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" } }