{ "id": "v1-cl-5556", "long_id": "v1.claymorphism.landing.s05.p05.t05.u06", "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-5556", "preview_url": "https://chrono.skin/s/v1-cl-5556/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` is a wide, heavy display face (Unbounded, then Syne, Verdana) for titles, figures and the brand; `--font-body` and `--font-ui` are a geometric sans (Plus Jakarta Sans, then Avenir). `--font-mono` is for code only.\n- Sizes: `--text-base` 17px, `--text-ui` 15px for controls, navigation, tables and notices, `--text-small` 14px for meta text, labels and badges, `--text-large` 21px for lead text and large buttons, `--text-h3` 17px, `--text-h2` 25px, `--text-h1` 38px for section titles and the figures on the coins, `--text-display` 60px for the hero title only.\n- Weights: 500 body, 700 headings, 800 controls, bold and display. Line height 1.6 for body, 1.2 for headings, 1.08 for display. Headings are tracked a little tight.\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 (stat coins, bricks, avatars, the current link). Meta text on a fill is the same ink at opacity 0.8.\n - `--color-bar-text` on `--fill-bar` (the capsule), `--color-bar-alt-text` on `--fill-bar-alt` (the footer block, table head), `--color-inverse-text` on `--fill-inverse` (the closing band, tooltips, code blocks), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, numbered balls, pagination keys, the current sidebar link), `--color-input-text` on `--fill-input` (controls, the tab track, the sidebar well, 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 a drop shadow in `--color-shadow` and two inset shadows mixed from white and black (here a soft glow above and a hard lip below), so the same tokens shape a white card, a coloured brick and the dark band. `--shadow-control-pressed` has only insets, reversed: it is a dent.\n- Coins and stat coins get their thickness from one more hard shadow under them: `color-mix()` of their fill token and `--color-accent-text`, which is that fill's own dark. Bricks add a soft drop shadow in their own colour, mixed with `transparent`. Both are written in the component because the vocabulary has no token per fill.\n- One-off values with no token: circles use `border-radius: 50%`, critters and their horns their own percentages; a list bar, a notice, an accordion bar and a figure tray 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 <= 60px`: the hero title is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight >= 500`: the type is sturdy; nothing is light.\n- `font-families <= 3`: one display face, one sans and one monospace.\n- `line-height <= 1.65`: body text is set at 1.6.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `box-shadow != none`: nothing raised is flat; a block without its inner glow and drop shadow is not clay.\n- `border-width <= 3px`: clay has no outlines; the only lines are 2px rules and the 3px focus or error ring.\n- `box-shadow-blur <= 80px`: the deepest shadow, under the dialog and the band, blurs over 80px.\n- `text-shadow = none`: the text is flat; only shapes are modelled.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first whether it is raised or dented: a container starts from `.ds-panel` (fill, radius and `--shadow-panel` together), something pressed or filled in starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`), something the user presses starts from `.ds-button--secondary`. For a coloured card take a `--color-fill-*` background, `--color-accent-text` for everything on it, and add the coloured drop shadow as `.ds-grid__cell` does. 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.p05.t05.u06\",\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-5556\",\n \"short\": \"v1-cl-5556\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(212 246 230);\n --color-canvas: rgb(230 251 240);\n --color-surface: rgb(251 255 250);\n --color-surface-alt: rgb(235 250 241);\n --color-surface-strong: rgb(202 240 220);\n --color-bar: rgb(251 255 250);\n --color-bar-text: rgb(18 70 60);\n --color-bar-alt: rgb(22 84 72);\n --color-bar-alt-text: rgb(232 255 242);\n --color-inverse: rgb(16 64 56);\n --color-inverse-text: rgb(242 255 232);\n --color-text: rgb(30 66 60);\n --color-text-muted: rgb(78 114 106);\n --color-heading: rgb(10 52 46);\n --color-heading-alt: rgb(0 120 98);\n --color-link: rgb(0 116 98);\n --color-link-quiet: rgb(18 70 60);\n --color-link-visited: rgb(88 92 150);\n --color-link-hover: rgb(0 84 72);\n --color-link-active: rgb(176 98 0);\n --color-border: rgb(194 232 212);\n --color-border-strong: rgb(148 208 180);\n --color-border-muted: rgb(222 244 232);\n --color-accent: rgb(255 224 84);\n --color-accent-text: rgb(32 50 30);\n --color-accent-alt: rgb(255 152 112);\n --color-fill-1: rgb(255 228 100);\n --color-fill-2: rgb(146 232 198);\n --color-fill-3: rgb(170 220 255);\n --color-fill-4: rgb(255 192 162);\n --color-button: rgb(8 128 104);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(251 255 250);\n --color-button-secondary-text: rgb(6 106 88);\n --color-input: rgb(230 248 238);\n --color-input-text: rgb(30 66 60);\n --color-input-border: rgb(174 222 198);\n --color-disabled: rgb(220 238 228);\n --color-disabled-text: rgb(136 166 154);\n --color-danger: rgb(188 48 58);\n --color-danger-surface: rgb(255 228 226);\n --color-success: rgb(22 150 84);\n --color-warning: rgb(206 138 0);\n --color-notice: rgb(255 246 200);\n --color-notice-text: rgb(92 68 0);\n --color-focus: rgb(0 98 84);\n --color-shadow: rgb(20 130 100 / 0.3);\n --color-overlay: rgb(10 52 46 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Plus Jakarta Sans\", \"Albert Sans\", Avenir, \"Century Gothic\", \"Segoe UI\", sans-serif;\n --font-heading: Unbounded, Syne, \"Krona One\", Verdana, \"DejaVu Sans\", sans-serif;\n --font-ui: \"Plus Jakarta Sans\", \"Albert Sans\", Avenir, \"Century Gothic\", \"Segoe UI\", sans-serif;\n --font-mono: \"Space Mono\", \"Courier Prime\", \"Courier New\", Courier, monospace;\n --text-base: 17px;\n --text-small: 14px;\n --text-ui: 15px;\n --text-large: 21px;\n --text-display: 60px;\n --text-h1: 38px;\n --text-h2: 25px;\n --text-h3: 17px;\n --line-body: 1.6;\n --line-heading: 1.2;\n --line-display: 1.08;\n --weight-body: 500;\n --weight-bold: 800;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 800;\n --heading-transform: none;\n --heading-tracking: -0.02em;\n --display-tracking: -0.04em;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\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: 3px;\n --border-style: solid;\n --radius-control: 24px;\n --radius-panel: 36px;\n --radius-pill: 60px;\n --radius-page: 52px;\n --shadow-panel: 6px 8px 14px -4px var(--color-shadow), 18px 26px 48px -12px var(--color-shadow), inset -8px -10px 24px color-mix(in srgb, black 8%, transparent), inset 8px 10px 24px color-mix(in srgb, white 80%, transparent);\n --shadow-control: 3px 4px 8px -2px var(--color-shadow), 8px 12px 22px -8px var(--color-shadow), inset -4px -6px 12px color-mix(in srgb, black 10%, transparent), inset 4px 6px 12px color-mix(in srgb, white 62%, transparent);\n --shadow-control-hover: 4px 6px 10px -2px var(--color-shadow), 12px 18px 30px -8px var(--color-shadow), inset -4px -6px 12px color-mix(in srgb, black 10%, transparent), inset 4px 6px 12px color-mix(in srgb, white 76%, transparent);\n --shadow-control-pressed: inset 5px 7px 14px color-mix(in srgb, black 13%, transparent), inset -5px -6px 12px color-mix(in srgb, white 70%, transparent);\n --shadow-dialog: 10px 14px 24px -8px var(--color-shadow), 30px 44px 80px -20px var(--color-shadow), inset -10px -14px 30px color-mix(in srgb, black 7%, transparent), inset 10px 14px 30px color-mix(in srgb, white 88%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(40% 30% at 100% 0%, color-mix(in srgb, var(--color-fill-2) 55%, transparent), transparent 70%), radial-gradient(44% 30% at 0% 60%, color-mix(in srgb, var(--color-fill-3) 34%, transparent), transparent 70%), linear-gradient(170deg, var(--color-canvas), var(--color-page) 55%, color-mix(in srgb, var(--color-fill-1) 30%, var(--color-page)));\n --fill-bar: var(--color-bar);\n --fill-bar-alt: linear-gradient(140deg, color-mix(in srgb, var(--color-bar-alt) 82%, white), var(--color-bar-alt) 55%);\n --fill-inverse: linear-gradient(140deg, color-mix(in srgb, var(--color-inverse) 90%, white), var(--color-inverse) 55%);\n --fill-accent: linear-gradient(140deg, color-mix(in srgb, var(--color-accent) 72%, white), var(--color-accent) 55%), var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(140deg, color-mix(in srgb, var(--color-button) 80%, white), var(--color-button) 55%), var(--color-button);\n --fill-button-hover: linear-gradient(140deg, color-mix(in srgb, var(--color-button) 68%, white), var(--color-button) 65%), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px dotted var(--color-focus);\n --transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;\n --backdrop-blur: 0px;\n}\n" } }