{ "id": "v1-cl-7771", "long_id": "v1.claymorphism.docs.s07.p07.t07.u01", "name": "Claymorphism help centre", "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": "docs", "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, each with a light inner glow above, a darker inner shade below and one soft drop shadow under it. This pack is a help centre in that look, in a single hue: milk white clay on a pale blue page, a cobalt strip that hangs from the top of the window, and every block colour a different depth of blue. It was common for the support and documentation pages of friendly consumer products: one big search well, topic tiles, and articles in three columns.", "url": "https://chrono.skin/s/v1-cl-7771", "preview_url": "https://chrono.skin/s/v1-cl-7771/specimen.html", "files": { "STYLE.md": "# Claymorphism help centre\n\n## Summary\n\nClaymorphism is the soft 3D look of 2021 to 2025: thick, very round shapes that seem modelled from coloured clay, each with a light inner glow above, a darker inner shade below and one soft drop shadow under it. This pack is a help centre in that look, in a single hue: milk white clay on a pale blue page, a cobalt strip that hangs from the top of the window, and every block colour a different depth of blue. It was common for the support and documentation pages of friendly consumer products: one big search well, topic tiles, and articles in three columns.\n\n## Layout\n\n- Content column: `--size-page` (1120px), centred, with `--space-5` (20px) side padding; the layout is fluid below that width.\n- Navigation: `.ds-nav` is not a floating bar but a strip as wide as the window that hangs from its top edge, rounded only below (`--radius-page`), `--size-nav` (68px) high. Inside the column: the brand, then the links directly beside it (one of them a `.ds-menu`), and the two buttons at the right end. The footer mirrors it: a strip the page stands on, rounded only above.\n- Home page: `.ds-page__sections` stacks its sections `--space-8` (72px) apart. First the hero, centred: a status badge, the question, one lead line, the search well `--size-search` (640px) wide and a row of chips; two groups of clay objects stand in the margins. Then the `.ds-grid` of six topic tiles in three columns under a `.ds-page__head`, a `.ds-page__split` (the most read list at the left, the carousel in its well at the right) and the closing `.ds-page__band` with the call for help at the left and the three figures at the right.\n- Inner pages have no hero. `--space-6` (28px) under the navigation come the `.ds-breadcrumb` and the `.ds-page-header` on the bare page. A topic page is a `.ds-page__split--side`: a `--size-side` (240px) column with the `.ds-sidebar` and one accent panel, then the tabs, the table of guides and the pagination. An article is a `.ds-page__split--doc` of three columns: the sidebar tree, the working column (the prose panel, a table, a panel of steps) and a `--size-toc` (224px) column with the `.ds-toc` and a small panel; the article's own h1 stands in for the page header. A form page is a `.ds-page__split--aside`: the form panel and the empty state at the left, notices, accordion and dialog in the `--size-aside` (360px) column.\n- Views. The specimen is one site with four views, each `
` inside `.ds-page__inner`: `home` (the help centre's front page), `guides` (one topic), `article` (one guide) and `ask` (a question to the help desk). The link of the current view is pressed into the strip by one `:has()` rule per view; an article presses the Guides link.\n- Spacing scale: `--space-1` 4px (dot to text, between tree links), `--space-2` 8px (label to control), `--space-3` 12px (icon to text, between list bars and chips), `--space-4` 16px (between buttons, row padding, between steps), `--space-5` 20px (card padding, grid gap, form gap), `--space-6` 28px (between panels, column gap of inner pages), `--space-7` 40px (band padding, column gap of the home split), `--space-8` 72px (between home sections, above the footer).\n- `--size-rule` (2px) is the weight of the soft rules between table rows and above the sidebar's foot.\n- Below 1180px the clay objects of the hero are hidden. Below 960px every split and the band stack, the column with the `.ds-toc` is dropped (`.ds-page__aside-toc`), the grid goes to two columns and the navigation links wrap to a second line inside the strip. Below 560px the grid and the figures are one column, the hero title takes `--text-h1`, form rows stack, the tabs fill the width and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways.\n- On a phone (560px and below) `.ds-nav__list` and the secondary button of `.ds-nav__actions` are not shown and `.ds-nav__fold` takes their place: a `
` that is also a `.ds-menu--end`, whose round secondary summary shows three bars and whose list opens as a full row inset by `--space-4` under the bar, one `.ds-menu__link` per view with the current one filled with `--color-accent`. The Topics drop-down is not shown and its items are not in the folded list. At every width a tooltip in a table opens at the left edge of its trigger, at most 60vw wide.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-heading` and `--font-ui` are a softly rounded grotesque (Rubik, then Varela Round); `--font-body` is a plain, very legible sans (Public Sans, then Atkinson Hyperlegible) because this is a page for reading. `--font-mono` is for code and references only.\n- Sizes: `--text-base` 16px, `--text-ui` 15px for controls, navigation, tables and notices, `--text-small` 13px for meta text, labels, badges and the contents list, `--text-large` 19px for lead text and the search field, `--text-h3` 18px, `--text-h2` 25px, `--text-h1` 36px, `--text-display` 56px for the hero question only.\n- Weights: 400 body, 600 for links, labels and controls, 700 for headings. Line height 1.65 for body, 1.2 for headings, 1.1 for display. Links in running text are underlined; quiet links, titles and navigation are not.\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`.\n - `--color-accent-text` is the ink for the accent and for all four `--color-fill-*` clays (topic tiles, numbered balls, the accent panel). Meta text on a fill is the same ink at opacity 0.8.\n - `--color-bar-text` on `--fill-bar` (the navigation strip), `--color-bar-alt-text` on `--fill-bar-alt` (the footer strip, the table head), `--color-inverse-text` on `--fill-inverse` (the closing band with its figures, code blocks, tooltips), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, chips, icon tiles, pagination keys, switch thumbs), `--color-input-text` on `--fill-input` (controls, the search well, the tab track, the carousel's well, the current line of the contents list, 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. Each raised shadow token holds a short contact shadow and a long soft one in `--color-shadow`, an inner shade along the lower edge that is also mixed from `--color-shadow` (so white clay is shaded in the palette's own tint, not in grey) and an inner glow of white along the upper edge. `--shadow-control-pressed` has only the insets, reversed: it is a dent.\n- Coloured shapes (topic tiles, clay objects) add a second drop shadow in their own colour: `color-mix()` of their fill token and `transparent`, written in the component because the vocabulary has no token per fill.\n- One-off values with no token: circles use `border-radius: 50%` and icon tiles 34%; a list bar, a notice, an accordion bar and a book of the hero take the smaller of `--radius-panel` and `--radius-control`; placeholders are `--color-input-text` at opacity 0.55; the clay objects are placed and sized in percent of their box.\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 28px apart, `.ds-page__split` two columns (`--aside`, `--side` and the three-column `--doc` for the inner pages; `.ds-page__aside-toc` marks the column that is dropped on a narrow window), `.ds-page__head` a section heading row with `.ds-page__title` and a link or `.ds-page__title-note` at its right end, `.ds-page__band` the closing inverted block with `.ds-page__band-title`, `.ds-page__band-text` and `.ds-page__band-actions`. `.ds-page__icon` sizes an icon in a button. `.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` (40px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. It inherits its colour from the strip it stands on. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the tile.\n- `.ds-nav`: the strip that hangs from the top. `.ds-nav__inner` is the column, `.ds-nav__list` the links, `.ds-nav__link` one link (pressed in when `is-current`, raised on `is-hover`), `.ds-nav__actions` the buttons at the right.\n- `.ds-menu`: a `
` drop-down under a navigation item: `.ds-menu__toggle` on the summary, `.ds-menu__list` the clay card that opens under it, `.ds-menu__link` with an optional `.ds-menu__note`. `--end` aligns it right, `--up` opens it upwards.\n- `.ds-nav__fold`: on a phone the navigation links fold into a `
` that is also a `.ds-menu--end`; its round `.ds-menu__toggle` summary shows three bars and the `.ds-menu__list` names every view, the current one filled with `--color-accent`. Use it only at 560px and below, where `.ds-nav__list` is not shown.\n- `.ds-hero`: the centred introduction on the bare page: a badge, `.ds-hero__title` at the display size, `.ds-hero__lead`, the search form `.ds-hero__search` (a `.ds-form__input` with `.ds-hero__field`, the icon `.ds-hero__glass` and a round primary button `.ds-hero__go` inside the well) and `.ds-hero__chips`. `.ds-hero__art` places a group of clay objects in the left margin, `--end` in the right.\n- `.ds-art`: a group of clay objects drawn in CSS, with the same shadow tokens as the cards: `.ds-art__slab` (a book; `--2` and `--3` stack two more on it), `.ds-art__ball` (`--small`, `--tiny`), `.ds-art__bubble` holding three `.ds-art__dot`, and `.ds-art__ring`, whose hole takes `--color-page`. Decorative only: mark the group `aria-hidden`.\n- `.ds-chip`: a small clay key for a suggested search or a tag; lifts on `is-hover`.\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-steps`: an ordered list of instructions outside the prose; each `.ds-steps__item` gets its number on an accent ball and starts with a `.ds-steps__title`.\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 46px high. `is-hover` lifts it, `is-active` squashes it and takes `--shadow-control-pressed`. `.ds-button--secondary` is the same key in the surface colour, `.ds-button--danger` the destructive action on `--color-danger-surface`, `.ds-button--large` (64px) for the band, `.ds-button--wide` fills its card, `.ds-button--round` is a ball with one icon; `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form in a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with a `.ds-form__chevron`). Controls are dents: `--fill-input` with `--shadow-control-pressed`. `.ds-form__check` is a label row with a `.ds-form__checkbox` (a raised clay tile, accent with a tick when checked). `is-error` rings the control in `--color-danger` and is followed by `.ds-form__error`; `.ds-form__hint` is help text, `.ds-form__actions` holds the buttons, `.ds-form__row` puts two fields side by side.\n- `.ds-switch`: a fat clay toggle over a checkbox: `.ds-switch__input`, `.ds-switch__track` (a dent that fills with the accent when on) with a clay ball as thumb, `.ds-switch__label` and `.ds-switch__hint`; `--end` puts the track at the right.\n- `.ds-table`: one clay sheet with a head in `--color-bar-alt` and rows divided by a soft rule. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `.ds-table__strong` a row title, `.ds-table__opt` a column dropped on a phone, `is-hover` tints a row.\n- `.ds-list`: items as separate clay bars 12px apart: `.ds-list__item` holds an optional `.ds-list__rank` (a number on an accent ball), a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge, button or `.ds-list__aside` figure.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body` (a column with 16px gaps), `.ds-panel__note` for small muted text, `.ds-panel__line` for a row with two ends. `.ds-panel--accent` is the card in the accent clay, with all text in `--color-accent-text`.\n- `.ds-grid`: the topic tiles, three to a row. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay and its own coloured drop shadow, `--plain` the surface clay; inside, `.ds-grid__top` (a `.ds-grid__icon` tile and a `.ds-grid__count`), `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__links` list of underlined `.ds-grid__more` links. A tile lifts on `is-hover`.\n- `.ds-stat`: the row of three figures; each `.ds-stat__item` is a tile with a `.ds-stat__value` over a `.ds-stat__label`, with an optional `.ds-stat__meta`. On the band the tiles are shaped out of the band's own clay and take its text colour.\n- `.ds-tabs`: a dented track of `.ds-tabs__tab` pills; `is-current` is a raised pill in the accent. For filtering what a page shows, not for site navigation.\n- `.ds-badge`: a pill in the accent. `.ds-badge--quiet` is neutral; `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted pills with a status dot.\n- `.ds-sidebar`: a clay card with the tree of topics: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` (dented when `is-current`) with an optional `.ds-sidebar__count`, and `.ds-sidebar__foot` under a rule.\n- `.ds-toc`: the headings of an article on the bare page at its right: `.ds-toc__heading`, `.ds-toc__link`, dented when `is-current`.\n- `.ds-notice`: a raised bar in `--color-notice` with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` is the error. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: 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 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`: a dented well in which the slides lie: `.ds-carousel__track` scrolls and snaps, one `.ds-carousel__slide` showing; `.ds-carousel__foot` holds two round `.ds-carousel__arrow` keys around `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`). `.ds-tour` is the step card used as a slide: `.ds-tour__num` (a ball in a block colour, `--2`, `--3`), `.ds-tour__title`, `.ds-tour__text` and a progress bar.\n- `.ds-footer`: the strip the page stands on, in `--fill-bar-alt`: `.ds-footer__inner` holds the brand, `.ds-footer__links` with `.ds-footer__link`, and `.ds-footer__text`.\n\n## Never\n\n- `block-gap <= 72px`: 72px between home sections is the largest gap.\n- `content-width <= 1120px`: the column is capped.\n- `font-size <= 56px`: the hero question is the largest text.\n- `font-size >= 13px`: meta text and badges are the smallest text.\n- `font-weight >= 400`: nothing is light.\n- `font-families <= 3`: one rounded grotesque, one reading sans and one monospace.\n- `line-height <= 1.7`: body text is set at 1.65.\n- `letter-spacing = 0`: no tracking on any text.\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, 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` or `.ds-chip`. 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-art`: rounded boxes in fill colours under `--shadow-panel`, never an image. Never draw a shadow in a raw colour and never flatten a shape: use the shadow tokens as they are. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1120px;\n --size-aside: 360px;\n --size-side: 240px;\n --size-toc: 224px;\n --size-search: 640px;\n --size-dialog: 420px;\n --size-nav: 68px;\n --size-control: 46px;\n --size-control-large: 64px;\n --size-icon: 18px;\n --size-dot: 10px;\n --size-thumb: 26px;\n --size-track: 14px;\n --size-check: 24px;\n --size-avatar: 42px;\n --size-ring: 92px;\n --size-rule: 2px;\n --size-brand: 40px;\n --size-art: 120px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 20px;\n --space-6: 28px;\n --space-7: 40px;\n --space-8: 72px;\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.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n\n/* brand: the mark on a small clay key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: 58%;\n height: 58%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n max-width: 60ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 72ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--radius-panel));\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: var(--radius-pill);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: fat clay keys that lift on hover and squash when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-button:hover::after,\n.ds-button.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: calc(var(--space-1) * 0.5);\n}\n.ds-button:active,\n.ds-button.is-active,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97, 0.93);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--wide {\n width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* form: controls are wells pressed into the clay */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n padding: 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-4) var(--space-5);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: var(--shadow-control-pressed), 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n padding: 0 var(--space-2);\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n padding: 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: 34%;\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-form__checkbox:checked::after,\n.ds-form__checkbox.is-checked::after {\n content: \"\";\n position: absolute;\n top: 16%;\n left: 34%;\n width: 30%;\n height: 52%;\n border: var(--border-width-strong) var(--border-style) var(--color-accent-text);\n border-top-color: transparent;\n border-left-color: transparent;\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one clay sheet with a coloured head, rows divided by a soft rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--color-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n.ds-table .ds-table__strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* list: every item is its own clay bar */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__aside {\n flex: none;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n font-variant-numeric: tabular-nums;\n}\n\n/* panel: the basic clay card */\n.ds-panel {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n.ds-panel__body p {\n margin: 0;\n}\n.ds-panel__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel__line {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n/* a panel in the accent clay: all of its text takes the ink of the fills */\n.ds-panel--accent {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-panel--accent .ds-panel__title,\n.ds-panel--accent .ds-panel__note {\n color: var(--color-accent-text);\n}\n\n/* stats: figures in the heading face on clay tiles */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-4) var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n\n/* tabs: a pressed track, the current tab a clay pill in the accent */\n.ds-tabs {\n display: inline-flex;\n align-self: flex-start;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-pill);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n/* status badges: the surface tinted with the status colour, a dot of the full colour in front */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n gap: var(--space-2);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* notice: a raised clay bar in the notice colour */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: round clay keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-color: transparent;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a pressed well with a clay ball in it */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* menu: a drop-down clay card under a navigation item */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n transform: rotate(180deg);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-3));\n left: 0;\n z-index: 8;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 24ch;\n margin: 0;\n padding: var(--space-3);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu--end .ds-menu__list {\n left: auto;\n right: 0;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-menu__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* tooltip: a small inverted pill over its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 9;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* switch: a fat clay toggle over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 3 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc(var(--size-thumb) / -2);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n left: auto;\n right: var(--space-1);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch--end {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n.ds-switch__label {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* progress: a thick pressed track with a puffy bar, or a ring around a clay ball */\n.ds-progress {\n display: block;\n height: var(--size-track);\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-progress--25 .ds-progress__bar {\n width: 25%;\n}\n.ds-progress--40 .ds-progress__bar {\n width: 40%;\n}\n.ds-progress--60 .ds-progress__bar {\n width: 60%;\n}\n.ds-progress--90 .ds-progress__bar {\n width: 90%;\n}\n.ds-progress--ring {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-ring);\n height: var(--size-ring);\n background: conic-gradient(var(--color-accent) 50%, var(--color-surface-strong) 0);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-progress--ring.ds-progress--25 {\n background: conic-gradient(var(--color-accent) 25%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--40 {\n background: conic-gradient(var(--color-accent) 40%, var(--color-surface-strong) 0);\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--ring.ds-progress--90 {\n background: conic-gradient(var(--color-accent) 90%, var(--color-surface-strong) 0);\n}\n.ds-progress__face {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 66%;\n height: 66%;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-progress__legend {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n\n/* avatar: initials on a clay ball, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-avatar--2 .ds-avatar__pic {\n background: var(--color-fill-2);\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 first key on the bar takes the bar's second fill, so that it never sits accent on accent */\n.ds-nav__actions .ds-button:not(.ds-button--secondary) {\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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(#ask: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/* a dialog standing in a narrow column: tighter, so that its two keys stay on one line */\n.ds-dialog {\n padding: var(--space-6) var(--space-4);\n}\n.ds-dialog__box {\n padding: var(--space-5);\n}\n.ds-dialog__actions {\n flex-wrap: nowrap;\n gap: var(--space-3);\n}\n@media (max-width: 560px) {\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-pagination__link {\n min-width: calc(var(--size-control) - var(--space-2));\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-3);\n }\n}\n\n/* width container and the stacks of the pages */\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n/* the home page: sections one below the other, far apart */\n.ds-page__sections {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n/* two columns, or a working column with an aside, a side column, or the three columns of an article */\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\n gap: var(--space-7);\n align-items: start;\n}\n.ds-page__split--aside {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-6);\n}\n.ds-page__split--side {\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n gap: var(--space-6);\n}\n.ds-page__split--doc {\n grid-template-columns: var(--size-side) minmax(0, 1fr) var(--size-toc);\n gap: var(--space-6);\n}\n/* a section heading on the bare page, with a link at its right end */\n.ds-page__head {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n margin: 0 0 var(--space-5);\n}\n.ds-page__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 text-transform: var(--heading-transform);\n}\n.ds-page__title-note {\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n/* the closing band: one inverted clay block, the call for help at the left, the figures at the right */\n.ds-page__band {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);\n gap: var(--space-7);\n align-items: center;\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-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4) var(--space-5);\n margin-top: var(--space-5);\n}\n/* figures on the band are shaped out of the band's own clay */\n.ds-page__band .ds-stat__item {\n padding: var(--space-5) var(--space-4);\n background: transparent;\n box-shadow: var(--shadow-control);\n text-align: center;\n}\n.ds-page__band .ds-stat__value {\n justify-content: center;\n color: inherit;\n font-size: var(--text-h1);\n}\n.ds-page__band .ds-stat__label,\n.ds-page__band .ds-stat__meta {\n color: inherit;\n opacity: 0.8;\n}\n.ds-view:not(.ds-view--home) {\n padding-top: var(--space-6);\n}\n\n/* nav: a strip of clay that hangs from the top edge of the window, rounded only below */\n.ds-nav {\n position: relative;\n z-index: 5;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: var(--space-3) var(--space-5);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n box-shadow: var(--shadow-control);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#guides:target) .ds-nav__link[href=\"#guides\"],\n.ds-page:has(#article:target) .ds-nav__link[href=\"#guides\"],\n.ds-page:has(#ask:target) .ds-nav__link[href=\"#ask\"] {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-left: auto;\n}\n\n/* a round key: one icon on a clay ball */\n.ds-button--round {\n width: var(--size-control);\n min-width: var(--size-control);\n padding: 0;\n border-radius: 50%;\n}\n/* chip: a small clay key for a suggested search or a tag */\n.ds-chip {\n display: inline-flex;\n align-items: center;\n padding: var(--space-1) var(--space-4);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-chip:hover,\n.ds-chip.is-hover {\n box-shadow: var(--shadow-control-hover);\n transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-chip:hover::after,\n.ds-chip.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\n/* hero: a centred question and one big search well, clay objects in the margins */\n.ds-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-8) 0 var(--space-2);\n text-align: center;\n}\n.ds-hero__title {\n max-width: var(--size-search);\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: 48ch;\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__search {\n position: relative;\n display: block;\n width: 100%;\n max-width: var(--size-search);\n margin-top: var(--space-6);\n}\n.ds-hero__field {\n min-height: var(--size-control-large);\n padding-left: calc(var(--space-5) + var(--size-icon) + var(--space-3));\n padding-right: calc(var(--size-control-large) + var(--space-3));\n border-radius: var(--radius-pill);\n font-size: var(--text-large);\n}\n.ds-hero__glass {\n position: absolute;\n top: 50%;\n left: var(--space-5);\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-hero__go {\n position: absolute;\n top: calc((var(--size-control-large) - var(--size-control)) / 2);\n right: calc((var(--size-control-large) - var(--size-control)) / 2);\n}\n.ds-hero__chips {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-3);\n margin-top: var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n/* art: objects modelled from the same clay as the cards: a pile of books, a thought bubble, a ring, a ball */\n.ds-art {\n position: relative;\n display: block;\n flex: none;\n width: calc(var(--size-art) * 1.5);\n height: calc(var(--size-art) * 1.6);\n}\n.ds-art__slab,\n.ds-art__ball,\n.ds-art__ring,\n.ds-art__bubble {\n position: absolute;\n display: block;\n background-color: var(--color-fill-1);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-1) 70%, transparent);\n}\n.ds-art__slab {\n bottom: 0;\n left: 4%;\n width: 88%;\n height: 24%;\n border-radius: min(var(--radius-control), var(--radius-panel));\n transform: rotate(-3deg);\n}\n.ds-art__slab::after {\n content: \"\";\n position: absolute;\n top: 28%;\n right: 8%;\n width: 34%;\n height: 44%;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-art__slab--2 {\n bottom: 25%;\n left: 12%;\n width: 78%;\n background-color: var(--color-fill-2);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-2) 70%, transparent);\n transform: rotate(5deg);\n}\n.ds-art__slab--3 {\n bottom: 49%;\n left: 6%;\n width: 70%;\n background-color: var(--color-fill-3);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-3) 70%, transparent);\n transform: rotate(-7deg);\n}\n.ds-art__ball {\n top: 0;\n right: 14%;\n width: 34%;\n height: auto;\n aspect-ratio: 1;\n background-color: var(--color-fill-4);\n border-radius: 50%;\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-4) 70%, transparent);\n}\n.ds-art__ball--small {\n top: 58%;\n right: auto;\n left: 20%;\n width: 20%;\n background-color: var(--color-accent);\n box-shadow: var(--shadow-control);\n}\n.ds-art__ball--tiny {\n top: 76%;\n right: auto;\n left: 8%;\n width: 11%;\n background-color: var(--color-accent);\n box-shadow: var(--shadow-control);\n}\n.ds-art__bubble {\n top: 0;\n left: 8%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8%;\n width: 88%;\n height: 52%;\n background-color: var(--color-accent);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-accent) 70%, transparent);\n transform: rotate(4deg);\n}\n.ds-art__dot {\n width: 14%;\n aspect-ratio: 1;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-art__ring {\n right: 0;\n bottom: 0;\n width: 46%;\n aspect-ratio: 1;\n background-color: var(--color-fill-2);\n border-radius: 50%;\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-2) 70%, transparent);\n}\n.ds-art__ring::after {\n content: \"\";\n position: absolute;\n top: 30%;\n left: 30%;\n width: 40%;\n height: 40%;\n background: var(--color-page);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* the two groups of objects stand in the margins beside the hero */\n.ds-hero__art {\n position: absolute;\n top: var(--space-8);\n left: 0;\n pointer-events: none;\n}\n.ds-hero__art--end {\n top: calc(var(--space-8) + var(--space-6));\n left: auto;\n right: 0;\n}\n\n/* grid: six topic tiles, four in the block colours and two in the plain clay */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-5);\n background-color: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-1) 80%, transparent);\n color: var(--color-accent-text);\n transition: var(--transition);\n}\n.ds-grid__cell--1 {\n background-color: var(--color-fill-1);\n}\n.ds-grid__cell--2 {\n background-color: var(--color-fill-2);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-2) 80%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: var(--color-fill-3);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-3) 80%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: var(--color-fill-4);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-4) 80%, transparent);\n}\n.ds-grid__cell--plain {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n transform: translateY(calc(var(--space-1) * -1));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-grid__cell:hover::after,\n.ds-grid__cell.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: var(--space-1);\n}\n.ds-grid__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n}\n.ds-grid__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 34%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-grid__icon svg {\n width: 44%;\n height: 44%;\n}\n.ds-grid__count {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n opacity: 0.8;\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__cell--plain .ds-grid__title {\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n}\n.ds-grid__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: auto 0 0;\n padding: var(--space-2) 0 0;\n list-style: none;\n}\n.ds-grid__more {\n color: inherit;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-grid__cell--plain .ds-grid__more {\n color: var(--color-link);\n}\n\n/* list: a rank on a clay ball in front of the most read guides */\n.ds-list__rank {\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-heading);\n font-weight: var(--weight-heading);\n line-height: 1;\n font-variant-numeric: tabular-nums;\n}\n\n/* carousel: the slides lie in a well; each is a card with a numbered ball */\n.ds-carousel {\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 color: var(--color-input-text);\n}\n.ds-carousel__track {\n gap: var(--space-5);\n padding: var(--space-1) var(--space-2) var(--space-5);\n scroll-padding: var(--space-2);\n}\n.ds-tour {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-tour__num {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n background-color: var(--color-fill-1);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: 1;\n}\n.ds-tour__num--2 {\n background-color: var(--color-fill-2);\n}\n.ds-tour__num--3 {\n background-color: var(--color-fill-3);\n}\n.ds-tour__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 text-transform: var(--heading-transform);\n}\n.ds-tour__text {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-tour .ds-progress {\n align-self: stretch;\n}\n\n/* steps: a numbered run of instructions, each number on a clay ball */\n.ds-steps {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: ds-step;\n}\n.ds-steps__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n counter-increment: ds-step;\n}\n.ds-steps__item::before {\n content: counter(ds-step);\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-heading);\n font-weight: var(--weight-heading);\n line-height: 1;\n}\n.ds-steps__title {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* sidebar: a clay card with the tree of topics */\n.ds-sidebar {\n padding: var(--space-5) var(--space-3);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-3) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-5);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n border-radius: min(var(--radius-control), var(--radius-panel));\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n font-variant-numeric: tabular-nums;\n}\n.ds-sidebar__foot {\n margin: var(--space-5) var(--space-3) 0;\n padding-top: var(--space-4);\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n\n/* toc: the headings of the article, on the bare page at its right */\n.ds-toc {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-toc__heading {\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-toc__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-toc__link:hover,\n.ds-toc__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-toc__link.is-current {\n background-color: var(--color-input);\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n\n/* footer: a strip of clay that the page stands on, rounded only above */\n.ds-footer {\n margin-top: var(--space-8);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-alt-text);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-6) var(--space-5);\n}\n.ds-footer__text {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\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: 1180px) {\n .ds-hero__art {\n display: none;\n }\n}\n@media (max-width: 960px) {\n .ds-page__split,\n .ds-page__split--aside,\n .ds-page__split--side,\n .ds-page__split--doc,\n .ds-page__band {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page__aside-toc {\n display: none;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n }\n .ds-nav__list {\n order: 3;\n flex-wrap: wrap;\n width: 100%;\n margin: 0;\n }\n .ds-page__sections {\n gap: var(--space-7);\n }\n .ds-hero {\n padding-top: var(--space-7);\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav__inner,\n .ds-footer__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav {\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__actions {\n gap: var(--space-2);\n }\n .ds-nav__actions .ds-button {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n font-size: var(--text-small);\n }\n .ds-nav__inner {\n gap: var(--space-2) var(--space-3);\n }\n .ds-nav .ds-brand {\n gap: var(--space-2);\n }\n .ds-hero__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__field {\n font-size: var(--text-ui);\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat {\n gap: var(--space-3);\n }\n .ds-page__band {\n gap: var(--space-5);\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-page__band-text {\n font-size: var(--text-base);\n }\n .ds-carousel {\n padding: var(--space-3);\n border-radius: var(--radius-panel);\n }\n .ds-tour__title {\n font-size: var(--text-h3);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs {\n display: flex;\n align-self: stretch;\n flex-wrap: wrap;\n gap: var(--space-1);\n border-radius: var(--radius-panel);\n }\n .ds-tabs > * {\n flex: 1 1 auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n text-align: center;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-page-header__lead {\n font-size: var(--text-base);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-footer {\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n }\n .ds-footer__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n}\n\n/* phone: a tooltip in a table's first column opens from its trigger's left edge and may wrap */\n/* a tooltip in a table's first column opens at the left edge of its trigger, so it never leaves the window */\n.ds-table__strong .ds-tooltip__tip {\n left: 0;\n width: max-content;\n max-width: 60vw;\n transform: none;\n white-space: normal;\n}\n\n/* phone: a round menu key at the end of the bar opens a clay sheet of every view */\n.ds-nav__fold {\n display: none;\n}\n.ds-nav__fold .ds-menu__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold .ds-menu__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__fold .ds-menu__link[href=\"#home\"],\n.ds-page:has(#guides:target) .ds-nav__fold .ds-menu__link[href=\"#guides\"],\n.ds-page:has(#article:target) .ds-nav__fold .ds-menu__link[href=\"#article\"],\n.ds-page:has(#ask:target) .ds-nav__fold .ds-menu__link[href=\"#ask\"] {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: var(--shadow-control-pressed);\n}\n@media (max-width: 560px) {\n .ds-nav__inner {\n position: relative;\n flex-wrap: nowrap;\n }\n .ds-nav__list,\n .ds-nav__actions .ds-button--secondary {\n display: none;\n }\n .ds-nav__fold {\n display: block;\n position: static;\n }\n .ds-nav__fold .ds-menu__list {\n top: calc(100% + var(--space-2));\n left: var(--space-4);\n right: var(--space-4);\n min-width: 0;\n }\n .ds-nav__fold .ds-menu__link {\n padding: var(--space-3) var(--space-4);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin help: city bikes by the minute\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n My questions\n Ask us\n
\n
\n \n \n
\n
\n
\n\n
\n\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n All 212 docks are working\n

What can we help you with?

\n

Guides for unlocking, riding and parking a city bike, written by the people who answer the phone.

\n
\n \n \n \n
\n
\n Often asked\n What a ride costs\n Full dock\n Flat tyre\n Charged twice\n
\n
\n\n
\n
\n

Browse by topic

\n All 58 guides\n
\n
\n \n \n \n \n \n \n
\n
\n\n
\n
\n
\n

Most read this week

\n from 4,180 readers\n
\n \n
\n
\n
\n

First ride in three steps

\n
\n
\n
\n
\n 1\n

Wake the dock

\n

Press the round key next to a bike with a green light and type the five figures of your code.

\n \n
\n
\n 2\n

Pull, then check

\n

Pull the bike back by the saddle. Squeeze both brakes and spin the pedals once before you set off.

\n \n
\n
\n 3\n

Push in until green

\n

At any dock, push the front wheel in hard. The ride ends when the light turns green, not before.

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

Still stuck? A person answers.

\n

Write to us from the dock or from the sofa. Most questions are closed the same day.

\n
\n Ask us\n NBNoor Bakkeron the help desk today\n
\n
\n
\n
\n
58
\n
guides, all checked this year
\n
\n
\n
2 h 10 min
\n
to a first answer, on average
\n
\n
\n
94%
\n
closed on the day they came in
\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. Help
    2. \n
  2. Guides
    3. \n
  3. Unlocking and docks
    4. \n
\n\n
\n
\n

Unlocking and docks

\n

Fourteen guides on codes, cards, locks and the lights on a dock.

\n
\n
\n Ask about a dock\n
\n
\n\n
\n\n
\n \n
\n

Which dock is it?

\n
\n

Every dock has a number on its post, such as D-117. Tell us that and we see what the dock saw.

\n Ask about a dock\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 \n \n \n \n \n \n \n \n \n \n \n \n \n
GuideKindCheckedMinutesHelped
Unlock with a codeHow to2 March296%
Unlock with a transport cardHow to2 March391%
The lock will not openFix18 February484%
What the lights on a dock meanHow to30 January298%
The dock kept my bike but the ride runs onFix30 January579%
Two bikes on one codeHow to22 January388%
A dock without powerFix14 January290%
How long a code stays goodRules11 January193%
\n\n \n
\n\n
\n
\n\n
\n\n
    \n
  1. Help
    2. \n
  2. Passes and prices
    3. \n
  3. What a ride costs
    4. \n
\n\n
\n\n \n\n
\n
\n
\n
\n

What a ride costs

\n

You pay for the minutes between pulling a bike out and the green light at the next dock, and nothing else.

\n

The first unlock of a day is free. A ride is kept under a reference such as R-48213, which you find in the app and on the receipt, and which we will ask for if a charge looks wrong.

\n

How the minutes are counted

\n

The clock starts when the lock opens and stops when a dock shows green. A dock that blinks red has not taken the bike, so the ride runs on.

\n

Three things that stop the clock

\n
    \n
  • A green light on the dock.
    • \n
  • A full dock, reported from the app: you get 15 free minutes.
    • \n
  • A broken bike, reported within 2 minutes of unlocking.
    • \n
\n

Prices at a glance

\n

The same prices apply at every dock. For the small print see fees and how to avoid them, or ask us about a charge.

\n

\n Day and year passes\n Paying for a friend\n Refunds\n Full docks\n All guides\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
Way to payUnlockA minuteFree minutes
By the minute1.000.150
Day pass0.000.1030
Year pass0.000.0545
Late feeAfter 12 hours without a dock25.000.000
\n\n
\n

Check a charge yourself

\n
\n
    \n
  1. Open the rideIn the app, tap Rides and pick the day. Each ride shows its two docks and its minutes.
    2. \n
  2. Take off the free minutesA day pass gives 30 and a year pass 45, on every ride.
    3. \n
  3. Multiply what is leftMinutes left times the price of a minute, plus the unlock if you have no pass.
    4. \n
\n
\n Next: day and year passes\n Back to the topic\n
\n
\n
\n
\n\n
\n \n
\n

Did this help?

\n
\n 212 of 231 readers said yes.\n
\n \n \n
\n Tell us what is missing\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. Help
    2. \n
  2. Ask us
    3. \n
  3. New question
    4. \n
\n\n
\n
\n

Ask the help desk

\n

Tell us the dock or the ride and what went wrong. A person reads every message.

\n
\n
\n Look in the guides first\n
\n
\n\n
\n\n
\n
\n

Your question answered in about 2 hours

\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n \n \n A reference has five figures, like R-48213.\n
\n
\n
\n \n \n
\n
\n \n \n A photo of the dock number helps. You can add it after sending.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n \n

No open questions

\n

Questions you send wait here until we have answered them.

\n Browse the guides\n
\n
\n\n
\n
\n
\n \n
The desk is open until 22:00. Later messages are read first thing tomorrow.
\n
\n
\n \n
We could not find that ride. Check the reference on your receipt.
\n
\n
\n\n
\n
\n

Before you write

\n
\n
\n
\n My ride did not end \n

Push the bike in again until the light is green. If it stays red, report a full dock from the app and the clock stops.

\n
\n
\n I was charged twice \n

One of the two is a hold that your bank lets go within three days.

\n
\n
\n The code does not work \n

A code is good for ten minutes. Ask for a new one in the app.

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

Throw this question away?

\n
What you have written so far is removed. Nothing has been sent.
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.claymorphism.docs.s07.p07.t07.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"claymorphism\",\n \"years\": [\n 2021,\n 2025\n ]\n },\n \"archetype\": \"docs\",\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-7771\",\n \"short\": \"v1-cl-7771\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(229 238 252);\n --color-canvas: rgb(243 247 255);\n --color-surface: rgb(253 254 255);\n --color-surface-alt: rgb(237 243 254);\n --color-surface-strong: rgb(217 229 250);\n --color-bar: rgb(30 58 162);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(193 212 250);\n --color-bar-alt-text: rgb(20 40 108);\n --color-inverse: rgb(20 36 98);\n --color-inverse-text: rgb(234 242 255);\n --color-text: rgb(44 60 106);\n --color-text-muted: rgb(92 108 154);\n --color-heading: rgb(18 34 94);\n --color-heading-alt: rgb(38 76 190);\n --color-link: rgb(30 80 212);\n --color-link-quiet: rgb(28 48 122);\n --color-link-visited: rgb(92 76 188);\n --color-link-hover: rgb(16 54 168);\n --color-link-active: rgb(8 32 118);\n --color-border: rgb(206 220 246);\n --color-border-strong: rgb(168 190 238);\n --color-border-muted: rgb(226 235 251);\n --color-accent: rgb(146 186 255);\n --color-accent-text: rgb(14 32 96);\n --color-accent-alt: rgb(92 144 250);\n --color-fill-1: rgb(150 186 255);\n --color-fill-2: rgb(172 220 252);\n --color-fill-3: rgb(188 194 255);\n --color-fill-4: rgb(202 226 250);\n --color-button: rgb(38 86 228);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(253 254 255);\n --color-button-secondary-text: rgb(28 68 196);\n --color-input: rgb(230 239 253);\n --color-input-text: rgb(44 60 106);\n --color-input-border: rgb(188 206 242);\n --color-disabled: rgb(223 230 244);\n --color-disabled-text: rgb(138 150 186);\n --color-danger: rgb(198 42 78);\n --color-danger-surface: rgb(255 228 235);\n --color-success: rgb(22 150 118);\n --color-warning: rgb(212 140 28);\n --color-notice: rgb(211 228 255);\n --color-notice-text: rgb(22 50 130);\n --color-focus: rgb(20 60 204);\n --color-shadow: rgb(58 98 204 / 0.36);\n --color-overlay: rgb(20 36 98 / 0.36);\n}\n\n/* @part type */\n:root {\n --font-body: \"Public Sans\", \"Atkinson Hyperlegible\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Rubik, \"Varela Round\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: Rubik, \"Varela Round\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: \"JetBrains Mono\", \"Fira Code\", Menlo, Consolas, \"Liberation Mono\", monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 19px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 25px;\n --text-h3: 18px;\n --line-body: 1.65;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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: 999px;\n --radius-panel: 32px;\n --radius-pill: 999px;\n --radius-page: 48px;\n --shadow-panel: 0 28px 48px -16px var(--color-shadow), inset 0 -10px 20px color-mix(in srgb, black 9%, transparent), inset 0 10px 20px color-mix(in srgb, white 70%, transparent);\n --shadow-control: 0 12px 20px -8px var(--color-shadow), inset 0 -6px 10px color-mix(in srgb, black 11%, transparent), inset 0 6px 10px color-mix(in srgb, white 55%, transparent);\n --shadow-control-hover: 0 18px 28px -10px var(--color-shadow), inset 0 -6px 10px color-mix(in srgb, black 11%, transparent), inset 0 6px 10px color-mix(in srgb, white 65%, transparent);\n --shadow-control-pressed: inset 0 6px 12px color-mix(in srgb, black 14%, transparent), inset 0 -5px 8px color-mix(in srgb, white 60%, transparent);\n --shadow-dialog: 0 44px 80px -24px var(--color-shadow), inset 0 -12px 24px color-mix(in srgb, black 8%, transparent), inset 0 12px 24px color-mix(in srgb, white 80%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(56% 40% at 8% 0%, color-mix(in srgb, var(--color-fill-1) 60%, transparent), transparent 72%), radial-gradient(48% 36% at 100% 12%, color-mix(in srgb, var(--color-fill-2) 50%, transparent), transparent 72%), radial-gradient(60% 40% at 60% 100%, color-mix(in srgb, var(--color-fill-3) 40%, transparent), transparent 72%), linear-gradient(180deg, var(--color-page), var(--color-canvas));\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 84%, white), var(--color-button)), var(--color-button);\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 74%, white), var(--color-button)), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }