{ "id": "v1-cl-2134", "long_id": "v1.claymorphism.app.s02.p01.t03.u04", "name": "Claymorphism app", "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": "app", "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 from the upper left, a darker inner shadow at the lower right and a soft drop shadow in a tint of the palette. It was the look of playful learning, habit and money apps, where chunky keys, fat progress bars and a round mascot made a daily task feel like a toy. This pack is such an app: a clay rail at the left, a greeting block with a clay character, tiles with one big figure each, lesson cards and thick rings and bars, set in a heavy geometric display face over a plain sans.", "url": "https://chrono.skin/s/v1-cl-2134", "preview_url": "https://chrono.skin/s/v1-cl-2134/specimen.html", "files": { "STYLE.md": "# Claymorphism app\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 from the upper left, a darker inner shadow at the lower right and a soft drop shadow in a tint of the palette. It was the look of playful learning, habit and money apps, where chunky keys, fat progress bars and a round mascot made a daily task feel like a toy. This pack is such an app: a clay rail at the left, a greeting block with a clay character, tiles with one big figure each, lesson cards and thick rings and bars, set in a heavy geometric display face over a plain sans.\n\n## Layout\n\n- The window is two columns: the rail `--size-rail` (264px) at the left, sticking to the top, and the working column, capped at `--size-page` (1080px) with `--space-6` (28px) side padding and centred in what remains. The layout is fluid below that width.\n- Navigation: `.ds-nav` is the rail, one tall clay card: the brand, four chunky links with icons, each `--size-control-large` (56px) high, and a small streak card at its foot. Over every view the working column starts with `.ds-page__top`: the search well at the left, the streak badge and the account `.ds-menu` at the right.\n- Home page: a `.ds-page__stack` at 28px gaps: the hero (one inverted clay block, greeting left, clay character right), the `.ds-grid` of four figure tiles, then `.ds-page__cols`: the list of lesson cards under a `.ds-page__heading` in the wide column and a `--size-aside` (340px) column with the weekly panel and the `.ds-sidebar` of courses.\n- Inner pages have no hero. They start with the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1`, one lead line, one action at the right) on the bare page. A list page stacks the `.ds-stat` row, the `.ds-tabs` and `.ds-page__cols`: table and pagination in the wide column, the empty state and a small panel in the aside. A practice page uses `.ds-page__cols`: the progress bar, the card carousel, the answer keys and the action row at the left, a prose panel and the dialog at the right. A settings page uses `.ds-page__cols`: the form in a `.ds-panel`, notices, a panel of switches and the accordion in the aside. Keep the two columns about equally long.\n- Views. The specimen is one app with four views, each `
` inside `.ds-page__inner`; the rail, the top strip and the footer stand outside them. `today` is the home view, `lessons` the list, `lesson` the practice screen, `settings` the form. The rail link of the current view is pressed in by one `:has()` rule per view.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (between rail links, label to control), `--space-3` 12px (icon to text, between list cards), `--space-4` 16px (between buttons, card padding of a list item), `--space-5` 20px (tile and panel padding, grid gap), `--space-6` 28px (between blocks and columns), `--space-7` 40px (hero padding), `--space-8` 56px (above the footer).\n- `--size-rule` (2px) is the weight of the rules between table rows.\n- Below 1100px the aside drops under the working column and the tiles go two across. Below 900px the rail becomes a block at the top of the page: the brand over a chunky tab bar of four equal keys with the icon above the label; `.ds-nav__card` is not shown there and the current key stays pressed in. Below 560px the hero stacks, stats are one column, form rows and answer keys stack, the tabs fill the width and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-heading` and `--font-ui` are one geometric sans with round bowls (Outfit, then Lexend, Futura) for titles, prices, buttons and navigation; `--font-body` is a rounded sans (Quicksand, then Hiragino Maru Gothic, Varela Round). `--font-mono` is for code only. These are open stand-ins for the commercial rounded faces of the references.\n- Sizes: `--text-base` 18px, `--text-ui` 17px for controls and navigation, `--text-small` 14px for meta text and badges, `--text-large` 22px for lead text and large buttons, `--text-h3` 21px, `--text-h2` 26px (prices on cards), `--text-h1` 36px, `--text-display` 58px for the hero title only.\n- Weights: 400 body, 500 for buttons and navigation, 600 for headings and bold text, 700 for the hero title and the large price. Headings are tracked at 0.01em.\n- Text tokens sit on fills as the era's first layout sets out: body, muted, heading and link colours only on the page and the three surface colours; `--color-accent-text` on the accent and on every `--color-fill-*` clay (badges on trays, avatars, faces), with nothing else set on a fill; `--color-bar-text` on `--fill-bar` (the top bar); `--color-bar-alt-text` on `--fill-bar-alt` (the footer) and on `--color-bar-alt` (table head); `--color-inverse-text` on `--fill-inverse` (code, tooltips); `--color-button-text` on `--fill-button`; `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, round keys, pagination, switch thumbs); `--color-input-text` on `--fill-input` (controls, the search well, the hero tray, tab and progress tracks, the empty state); `--color-notice-text` on `--color-notice`; `--color-danger` on `--color-danger-surface`. Status colours never carry text.\n- The palette is dark: the page is deep indigo, the surfaces are lighter indigo clays, and the fills, the accent and the button are candy colours light enough to carry the dark ink `--color-accent-text`.\n- The clay comes from the surface part: panels have a dark drop shadow and two insets mixed from black and white; controls throw a glow in `--color-button` instead of a dark shadow, and the dialog and the hero card add a halo in `--color-accent`. `--shadow-text` is a faint glow on the text of primary buttons. Clay objects add a drop shadow in their own fill through `color-mix()` with `transparent`, written in the component.\n- One-off values with no token: circles use `border-radius: 50%`, the cube 28%, checkboxes 34%; a tray takes the card's radius less its inset, by `calc()`; list bars, notices and accordion bars take the smaller of `--radius-panel` and `--radius-control`; placeholders are `--color-input-text` at opacity 0.55.\n\n## Components\n\n- `.ds-page`: on ``; the two-column frame, painted with `--fill-page`. `.ds-page__inner` is the working column, `.ds-page__top` the strip over every view with `.ds-page__search` and `.ds-page__top-end`, `.ds-page__account` the account pill (`.ds-page__account-name` is hidden on a phone), `.ds-page__stack` a vertical stack, `.ds-page__cols` the wide column with an aside, `.ds-page__heading` a section heading with a link at its right end. `.ds-view` is one screen of the specimen; an application with one document per page does not need it.\n- `.ds-brand`: the mark and name at the top of the rail: `.ds-brand__mark` is a clay key `--size-brand` (42px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font, in the colour of the bar. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the key.\n- `.ds-nav`: the rail. `.ds-nav__inner` is the clay card, `.ds-nav__list` the links, `.ds-nav__link` one chunky link with an icon (pressed in when `is-current`, raised on `is-hover`), `.ds-nav__card` with `.ds-nav__card-title` the streak card at its foot.\n- `.ds-menu`: the account drop-down, a `
`: `.ds-menu__toggle` on the summary, `.ds-menu__list` the clay card, `.ds-menu__link` with an optional `.ds-menu__note`; `--end` aligns it right, `--up` opens it upwards.\n- `.ds-hero`: the greeting on one inverted clay block: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`, and `.ds-hero__art` holding `.ds-clay` objects. Once per app, on the home view.\n- `.ds-clay`: a clay object drawn in CSS: a ball; `--1` to `--4` pick the fill, `--tiny`, `--small`, `--large` the size, `--cube`, `--pill`, `--ring` the shape; a face holds two `.ds-clay__eye`, a `.ds-clay__smile` and two `.ds-clay__cheek`. Decorative only.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, `.ds-page-header__actions` at the right.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead`, `.ds-prose__code`.\n- `.ds-link`: link in running text, underlined; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for table links; `.ds-link__sample` lays out a row of links.\n- `.ds-button`: a fat clay key 46px high with uppercase text. `is-hover` lifts it, `is-active` squashes it into a dent. `.ds-button--secondary` in the surface colour, `.ds-button--danger` on `--color-danger-surface`, `.ds-button--large` (56px), `.ds-button--wide`; `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group.\n- `.ds-form`: vertical form in a panel: `.ds-form__field`, `.ds-form__label`, `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with `.ds-form__chevron`), `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__error` after an `is-error` control, `.ds-form__hint`, `.ds-form__actions`, `.ds-form__row`. Controls are dents.\n- `.ds-switch`: a fat clay toggle over a checkbox: `.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`, `.ds-switch__hint`; `--end` puts the track at the right. Use it for settings that apply at once.\n- `.ds-table`: one clay sheet with a head in `--color-bar-alt`: `.ds-table__num`, `.ds-table__meta`, `.ds-table__strong`, `.ds-table__opt`, `is-hover` on a row.\n- `.ds-list`: lesson cards 12px apart. `.ds-list__item` is a clay card holding a `.ds-list__step` ball with the lesson number (`--2` to `--4` pick a fill), a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge or button; `is-locked` presses the card in. `.ds-list__aside` is a figure at the right.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__note`, `.ds-panel__line`; `.ds-panel--accent` in the accent clay. `.ds-panel__goal` sets a ring beside `.ds-panel__bars`; `.ds-panel__rank` and `.ds-panel__points` are a row of a board.\n- `.ds-grid`: four figure tiles. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay and its own coloured drop shadow; inside, a `.ds-grid__icon` tile, a `.ds-grid__value` (44px), a `.ds-grid__label` and a `.ds-grid__meta`.\n- `.ds-stat`: the row of three; each `.ds-stat__item` is a clay card with a `.ds-stat__label` over a `.ds-stat__value` and an optional `.ds-stat__meta`. Used on inner pages; the grid is the home view's form of it.\n- `.ds-tabs`: a dented track of `.ds-tabs__tab` pills; `is-current` is raised, in the accent.\n- `.ds-badge`: a pill in the accent; `.ds-badge--quiet` neutral; `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` tinted with a status dot.\n- `.ds-sidebar`: a clay card of courses in the aside: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` (a pill, dented when `is-current`).\n- `.ds-notice`: a raised bar in `--color-notice` with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error`; `.ds-notice__stack`.\n- `.ds-pagination`: clay keys, `.ds-pagination__link`, the current one `is-current` in the accent.\n- `.ds-breadcrumb`: small bold trail above the page header: `.ds-breadcrumb__item`, `.ds-breadcrumb__link`.\n- `.ds-dialog`: a tinted sheet with a centred `.ds-dialog__box`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dent holding a clay ball `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-tooltip`: wraps a trigger; `.ds-tooltip__tip` shows on hover or focus.\n- `.ds-progress`: a thick dented track with a puffy `.ds-progress__bar` (`--10` to `--90`), `.ds-progress__legend` above it; `.ds-progress--ring` is a ring around a clay ball `.ds-progress__face`.\n- `.ds-avatar`: initials on a clay ball `.ds-avatar__pic`, with optional `.ds-avatar__text` (`.ds-avatar__name`, `.ds-avatar__meta`); `--1` to `--4` pick a fill.\n- `.ds-accordion`: `
` sections as separate clay bars: `.ds-accordion__item`, `.ds-accordion__head`, `.ds-accordion__chevron`, `.ds-accordion__body`.\n- `.ds-carousel`: `.ds-carousel__track` with one `.ds-carousel__slide` showing, `.ds-carousel__foot` with two `.ds-carousel__arrow` keys around `.ds-carousel__dots` (`.ds-carousel__dot`). `.ds-card` is the flashcard used as a slide (`--2`, `--4` pick a fill): a `.ds-card__sign` ball, `.ds-card__title`, `.ds-card__text`; `.ds-card__answers` is the grid of answer keys under it.\n- `.ds-footer`: one flat clay strip in `--fill-bar-alt` at the end of the working column: `.ds-footer__inner`, `.ds-footer__links`, `.ds-footer__link`.\n\n## Never\n\n- `block-gap <= 56px`: blocks sit 28px apart; 56px above the footer is the largest gap.\n- `content-width <= 1140px`: the working column is capped.\n- `font-size <= 58px`: the hero title is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: the type is round, not heavy.\n- `font-families <= 3`: one display face, one rounded sans and one monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `underlined-links <= 10%`: links are marked by colour alone.\n- `box-shadow != none`: nothing raised is flat; a block without its inner glow and drop shadow is not clay.\n- `border-width <= 2px`: clay has no outlines; the only lines are 2px rules and the 2px focus or error ring.\n- `box-shadow-blur <= 72px`: the deepest shadow, under the dialog, blurs over 72px.\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. A container starts from `.ds-panel`, something pressed or filled in from `.ds-form__input`, something the user presses from `.ds-button--secondary`. For a coloured tile take a `--color-fill-*` background, `--color-accent-text` for everything on it, and add the coloured drop shadow as `.ds-grid__cell` does. Never draw a shadow in a raw colour and never flatten a shape. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to, as the list above says.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1080px;\n --size-rail: 264px;\n --size-aside: 340px;\n --size-dialog: 400px;\n --size-control: 46px;\n --size-control-large: 56px;\n --size-icon: 20px;\n --size-dot: 10px;\n --size-thumb: 28px;\n --size-track: 18px;\n --size-check: 26px;\n --size-avatar: 42px;\n --size-ring: 104px;\n --size-rule: 2px;\n --size-brand: 42px;\n --size-clay: 96px;\n --size-search: 320px;\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: 56px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n overflow-x: clip;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* clay objects: a sphere, a ring, a cube, a pill and a face, shaped by the shadow tokens */\n.ds-clay {\n position: relative;\n display: block;\n flex: none;\n width: var(--size-clay);\n height: var(--size-clay);\n background-color: var(--color-fill-1);\n border-radius: 50%;\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-1) 75%, transparent);\n}\n.ds-clay--1 {\n background-color: var(--color-fill-1);\n}\n.ds-clay--3 {\n background-color: var(--color-fill-3);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-3) 75%, transparent);\n}\n.ds-clay--4 {\n background-color: var(--color-fill-4);\n box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-4) 75%, transparent);\n}\n.ds-clay--small {\n width: calc(var(--size-clay) * 0.5);\n height: calc(var(--size-clay) * 0.5);\n}\n.ds-clay--tiny {\n width: calc(var(--size-clay) * 0.28);\n height: calc(var(--size-clay) * 0.28);\n box-shadow: var(--shadow-control);\n}\n.ds-clay--large {\n width: calc(var(--size-clay) * 1.6);\n height: calc(var(--size-clay) * 1.6);\n}\n.ds-clay--cube {\n border-radius: 28%;\n transform: rotate(-14deg);\n}\n.ds-clay__eye {\n position: absolute;\n top: 36%;\n left: 28%;\n width: 11%;\n height: 15%;\n background: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-clay__eye + .ds-clay__eye {\n left: auto;\n right: 28%;\n}\n.ds-clay__smile {\n position: absolute;\n top: 44%;\n left: 37%;\n width: 26%;\n height: 22%;\n border: var(--border-width-strong) var(--border-style) transparent;\n border-bottom-color: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-clay__cheek {\n position: absolute;\n top: 54%;\n left: 14%;\n width: 14%;\n height: 10%;\n background: var(--color-accent-alt);\n border-radius: 50%;\n opacity: 0.7;\n}\n.ds-clay__cheek + .ds-clay__cheek {\n left: auto;\n right: 14%;\n}\n\n/* brand: the mark on a small clay key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: 58%;\n height: 58%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n max-width: 60ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 72ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--radius-panel));\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: var(--radius-pill);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: fat clay keys that lift on hover and squash when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-button:hover::after,\n.ds-button.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: calc(var(--space-1) * 0.5);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97, 0.93);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--wide {\n width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* form: controls are wells pressed into the clay */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n padding: 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-4) var(--space-5);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: var(--shadow-control-pressed), 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n padding: 0 var(--space-2);\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n padding: 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: 34%;\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-form__checkbox:checked::after,\n.ds-form__checkbox.is-checked::after {\n content: \"\";\n position: absolute;\n top: 16%;\n left: 34%;\n width: 30%;\n height: 52%;\n border: var(--border-width-strong) var(--border-style) var(--color-accent-text);\n border-top-color: transparent;\n border-left-color: transparent;\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one clay sheet with a coloured head, rows divided by a soft rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--color-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n.ds-table .ds-table__strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* list: every item is its own clay bar */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__aside {\n flex: none;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n font-variant-numeric: tabular-nums;\n}\n\n/* panel: the basic clay card */\n.ds-panel {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n.ds-panel__body p {\n margin: 0;\n}\n.ds-panel__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel__line {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n/* a panel in the accent clay: all of its text takes the ink of the fills */\n.ds-panel--accent {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-panel--accent .ds-panel__title,\n.ds-panel--accent .ds-panel__note {\n color: var(--color-accent-text);\n}\n\n/* stats: figures in the heading face on clay tiles */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-4) var(--space-5);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n\n/* tabs: a pressed track, the current tab a clay pill in the accent */\n.ds-tabs {\n display: inline-flex;\n align-self: flex-start;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-pill);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n/* status badges: the surface tinted with the status colour, a dot of the full colour in front */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n gap: var(--space-2);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* notice: a raised clay bar in the notice colour */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: round clay keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-color: transparent;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a pressed well with a clay ball in it */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* menu: a drop-down clay card under a navigation item */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n transform: rotate(180deg);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-3));\n left: 0;\n z-index: 8;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 24ch;\n margin: 0;\n padding: var(--space-3);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu--end .ds-menu__list {\n left: auto;\n right: 0;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-menu__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* tooltip: a small inverted pill over its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 9;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* switch: a fat clay toggle over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 3 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc(var(--size-thumb) / -2);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n left: auto;\n right: var(--space-1);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch--end {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n.ds-switch__label {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* progress: a thick pressed track with a puffy bar, or a ring around a clay ball */\n.ds-progress {\n display: block;\n height: var(--size-track);\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-progress--40 .ds-progress__bar {\n width: 40%;\n}\n.ds-progress--60 .ds-progress__bar {\n width: 60%;\n}\n.ds-progress--75 .ds-progress__bar {\n width: 75%;\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--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--75 {\n background: conic-gradient(var(--color-accent) 75%, 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--3 .ds-avatar__pic {\n background: var(--color-fill-3);\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: every section its own clay bar that opens */\n.ds-accordion {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-accordion__item {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-4));\n height: calc(var(--size-icon) + var(--space-4));\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n transition: var(--transition);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* carousel: one slide showing, round clay arrows and dots under it */\n.ds-carousel {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n margin: 0;\n padding: 0;\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow svg {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-carousel__arrow:active,\n.ds-carousel__arrow.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.94);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: calc(3 * var(--size-dot));\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n\n@media (max-width: 560px) {\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-pagination__link {\n min-width: calc(var(--size-control) - var(--space-2));\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-3);\n }\n}\n\n/* the app frame: a clay rail at the left, the working column beside it */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n align-items: start;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-6));\n margin: 0 auto;\n padding: var(--space-5) var(--space-6) var(--space-6);\n}\n/* the strip over every view: search at the left, streak and account at the right */\n.ds-page__top {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin-bottom: var(--space-6);\n}\n.ds-page__search {\n flex: 1;\n max-width: var(--size-search);\n}\n.ds-page__top-end {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin-left: auto;\n}\n.ds-page__account {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);\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-ui);\n font-weight: var(--weight-ui);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n/* the working column and a narrower column at the right */\n.ds-page__cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n.ds-page__heading .ds-link {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n letter-spacing: 0;\n}\n\n/* nav: the rail, one tall clay card with chunky items */\n.ds-nav {\n position: sticky;\n top: 0;\n padding: var(--space-5) 0 var(--space-5) var(--space-5);\n}\n.ds-nav__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner > .ds-brand {\n padding: 0 var(--space-2);\n}\n.ds-nav__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control-large);\n padding: 0 var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\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 svg {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\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=\"#today\"],\n.ds-page:has(#today:target) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#lessons:target) .ds-nav__link[href=\"#lessons\"],\n.ds-page:has(#lesson:target) .ds-nav__link[href=\"#lesson\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\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/* the streak card at the foot of the rail */\n.ds-nav__card {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-4);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-nav__card-title {\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}\n\n/* hero: the greeting on one inverted clay block, a clay character at the right */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-6);\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-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 44ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.85;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-5);\n}\n.ds-hero__art {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding-right: var(--space-4);\n}\n.ds-hero__art .ds-clay--tiny {\n align-self: flex-start;\n}\n.ds-hero__art .ds-clay--small {\n align-self: flex-end;\n}\n\n/* grid: four clay tiles with one figure each */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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-panel);\n box-shadow: var(--shadow-panel), 0 var(--space-4) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-1) 80%, transparent);\n color: var(--color-accent-text);\n}\n.ds-grid__cell--1 {\n background-color: var(--color-fill-1);\n}\n.ds-grid__cell--2 {\n background-color: var(--color-fill-2);\n box-shadow: var(--shadow-panel), 0 var(--space-4) var(--space-6) calc(-1 * var(--space-3)) 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-4) var(--space-6) calc(-1 * var(--space-3)) 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-4) var(--space-6) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-4) 80%, transparent);\n}\n.ds-grid__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n margin-bottom: var(--space-3);\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: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__value {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-grid__label {\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__meta {\n margin-top: var(--space-1);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.8;\n}\n\n/* list: lesson cards, a numbered clay ball in front of each */\n.ds-list__item {\n padding: var(--space-4);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__step {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control-large);\n height: var(--size-control-large);\n background-color: var(--color-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-h3);\n font-weight: var(--weight-heading);\n}\n.ds-list__step--2 {\n background-color: var(--color-fill-2);\n}\n.ds-list__step--3 {\n background-color: var(--color-fill-3);\n}\n.ds-list__step--4 {\n background-color: var(--color-fill-4);\n}\n.ds-list__item.is-locked {\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* the weekly goal: a ring beside its bars */\n.ds-panel__goal {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-panel__bars {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-panel__rank {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__points {\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/* sidebar: the courses, a flat block of chunky links inside a clay card */\n.ds-sidebar {\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-2) var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n box-shadow: var(--shadow-control);\n}\n.ds-sidebar__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* the flashcard: the slide of the lesson's carousel */\n.ds-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-4);\n height: 100%;\n padding: var(--space-7) var(--space-5);\n background-color: var(--color-fill-3);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-accent-text);\n text-align: center;\n}\n.ds-card--2 {\n background-color: var(--color-fill-2);\n}\n.ds-card--4 {\n background-color: var(--color-fill-4);\n}\n.ds-card__sign {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-clay) * 1.5);\n height: calc(var(--size-clay) * 1.5);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-panel);\n color: var(--color-button-secondary-text);\n}\n.ds-card__sign svg {\n width: 54%;\n height: 54%;\n}\n.ds-card__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-card__text {\n max-width: 40ch;\n margin: 0;\n}\n.ds-carousel__track {\n margin: calc(var(--space-5) * -1);\n padding: var(--space-5);\n scroll-padding: var(--space-5);\n gap: var(--space-7);\n}\n/* the answers: a grid of fat keys under the card */\n.ds-card__answers {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n\n/* stats sit three across, each with a clay dot in its own fill */\n.ds-stat__item {\n display: flex;\n flex-direction: column;\n}\n\n/* footer: one flat clay strip at the end of the working column */\n.ds-footer {\n margin-top: var(--space-8);\n font-size: var(--text-small);\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-3) var(--space-5);\n padding: var(--space-4) var(--space-5);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-alt-text);\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: 1100px) {\n .ds-page__cols {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 900px) {\n .ds-page {\n display: block;\n }\n /* the rail turns into the brand over a chunky tab bar */\n .ds-nav {\n position: static;\n padding: var(--space-4) var(--space-4) 0;\n }\n .ds-nav__inner {\n gap: var(--space-3);\n padding: var(--space-3);\n border-radius: var(--radius-panel);\n }\n .ds-nav__list {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n }\n .ds-nav__link {\n flex-direction: column;\n justify-content: center;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-1);\n font-size: var(--text-small);\n text-align: center;\n text-transform: none;\n }\n .ds-nav__card {\n display: none;\n }\n .ds-page__inner {\n padding: var(--space-4);\n }\n /* the track bleeds no further than the page's padding */\n .ds-carousel__track {\n margin: calc(var(--space-4) * -1);\n padding: var(--space-4);\n scroll-padding: var(--space-4);\n }\n}\n@media (max-width: 560px) {\n .ds-carousel__track {\n margin: calc(var(--space-4) * -1);\n padding: var(--space-4);\n scroll-padding: var(--space-4);\n }\n .ds-page__top {\n margin-bottom: var(--space-5);\n }\n .ds-page__account-name {\n display: none;\n }\n .ds-page__account {\n padding: var(--space-1);\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n }\n .ds-hero__title {\n font-size: var(--text-h2);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-hero__art {\n justify-content: center;\n padding: 0;\n }\n .ds-grid {\n gap: var(--space-4);\n }\n .ds-grid__cell {\n padding: var(--space-4);\n }\n .ds-grid__value {\n font-size: var(--text-h2);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n }\n .ds-list__item {\n flex-wrap: wrap;\n }\n .ds-list__item .ds-button {\n flex: 1 1 100%;\n }\n .ds-panel__goal {\n flex-direction: column;\n align-items: stretch;\n }\n .ds-panel__goal .ds-progress--ring {\n align-self: center;\n }\n .ds-form__row,\n .ds-card__answers {\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-card {\n padding: var(--space-6) var(--space-4);\n border-radius: var(--radius-panel);\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}\n", "specimen.html": "\n\n\n\n\nchronoskin: read music in ten minutes a day\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n 14 day streak\n \n 6 of 10 minutes today\n
\n
\n
\n\n
\n\n
\n \n
\n 14 daysYour streak, one freeze left\n
\n MV\n \n
\n
\n
\n\n
\n
\n\n
\n
\n

Good afternoon, Mira

\n

Lesson 12 is ten minutes of quarter rests. Do it today and the streak reaches fifteen days.

\n
\n Continue lesson 12\n Pick another\n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n 14\n day streak\n Best so far: 21 days\n
\n
\n \n 86\n signs learned\n Seven new this week\n
\n
\n \n 42\n minutes this week\n Goal: 70 minutes\n
\n
\n \n 92%\n right first time\n Up from 88% last week\n
\n
\n\n
\n\n
\n

Today's path All lessons

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

This week day 4 of 7

\n
\n
\n 60%\n
\n
\n
Notes18 of 24
\n \n
\n
\n
Rests4 of 10
\n \n
\n
\n
\n
\n
\n \n
\n\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Lessons
    3. \n
  3. Rhythm
    4. \n
\n\n
\n
\n

Rhythm

\n

Forty short lessons, from the whole note to counting in six.

\n
\n
\n Continue lesson 12\n
\n
\n\n
\n\n
\n
\n
Lessons done
\n
11 of 40
\n
\n
\n
Right first time
\n
92% this course
\n
\n
\n
Time spent
\n
118 minutes
\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
LessonStatusSignsMinutesScore
9 Whole notesDone68100
10 Whole restsDone5790
11 Half notes and restsDone910100
12 Quarter restsStep 4 of 1081040
13 Counting in threeNext7120
14 The dotted half noteLocked690
\n\n \n
\n\n
\n
\n \n

No saved signs yet

\n

Tap the ribbon on a card and it waits here for another go.

\n Open a lesson\n
\n
\n

Unit 3 opens soon

\n
\n
\n
Lessons done11 of 15
\n \n
\n

Four more lessons and counting in six unlocks.

\n
\n
\n
\n\n
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Rhythm
    3. \n
  3. Lesson 12
    4. \n
\n\n
\n
\n

Quarter rests

\n

Card 4 of 10. Which sign means one beat of silence?

\n
\n
\n All lessons\n
\n
\n\n
\n\n
\n
\n
Card 4 of 103 right, 0 wrong
\n \n
\n\n
\n
\n
\n \n

One beat of silence

\n

It sits in the middle of the staff and lasts as long as a quarter note.

\n
\n
\n \n

Two beats of silence

\n

A small hat that sits on the middle line.

\n
\n
\n \n

Four beats of silence

\n

The same hat, hanging under the line.

\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

About rests

\n

A rest is silence that is counted. In 4/4 time a quarter rest takes one of the four beats.

\n

How to count it

\n

Say the number in your head and keep your hands still.

\n

Easy to mix up

\n
    \n
  • The half rest sits on the line.
    • \n
  • The whole rest hangs under it.
    • \n
  • The quarter rest looks like a small bolt.
    • \n
\n

\n Whole rests\n Half rests\n Counting in three\n This card\n Sound\n

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

Leave the lesson?

\n
Your three right answers are kept, and the streak waits until midnight.
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Settings
    3. \n
  3. Profile and reminders
    4. \n
\n\n
\n
\n

Settings

\n

Your name, your daily goal and when to nudge you.

\n
\n
\n Back to today\n
\n
\n\n
\n\n
\n

Profile

\n
\n
\n
\n
\n \n \n
\n
\n \n \n Enter a complete email address.\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n \n \n
\n
\n
\n \n \n We pick the examples in your lessons from this.\n
\n \n
\n \n \n
\n
\n
\n
\n\n
\n
\n
\n \n
One streak freeze left. It is used by itself on a missed day.
\n
\n
\n \n
Yesterday's reminder was not sent. Check the email address.
\n
\n
\n
\n

Reminders

\n
\n \n \n \n
\n
\n
\n
\n What is a streak freeze? \n

A day off that does not break the streak. You earn one for every seven days in a row.

\n
\n
\n Can I change the course? \n

Yes, from the list of courses on the Today page. Progress is kept in each.

\n
\n
\n
\n\n
\n
\n\n \n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.claymorphism.app.s02.p01.t03.u04\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"claymorphism\",\n \"years\": [\n 2021,\n 2025\n ]\n },\n \"archetype\": \"app\",\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-2134\",\n \"short\": \"v1-cl-2134\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(236 230 251);\n --color-canvas: rgb(243 238 253);\n --color-surface: rgb(252 250 255);\n --color-surface-alt: rgb(243 237 254);\n --color-surface-strong: rgb(226 216 248);\n --color-bar: rgb(252 250 255);\n --color-bar-text: rgb(58 45 107);\n --color-bar-alt: rgb(214 200 250);\n --color-bar-alt-text: rgb(50 36 100);\n --color-inverse: rgb(58 45 107);\n --color-inverse-text: rgb(246 241 255);\n --color-text: rgb(63 53 100);\n --color-text-muted: rgb(105 95 142);\n --color-heading: rgb(44 33 86);\n --color-heading-alt: rgb(84 62 168);\n --color-link: rgb(101 60 220);\n --color-link-quiet: rgb(58 45 107);\n --color-link-visited: rgb(138 72 170);\n --color-link-hover: rgb(70 32 178);\n --color-link-active: rgb(200 62 110);\n --color-border: rgb(217 207 242);\n --color-border-strong: rgb(185 168 232);\n --color-border-muted: rgb(235 228 250);\n --color-accent: rgb(255 184 156);\n --color-accent-text: rgb(59 34 89);\n --color-accent-alt: rgb(255 143 177);\n --color-fill-1: rgb(203 187 255);\n --color-fill-2: rgb(255 202 178);\n --color-fill-3: rgb(170 236 208);\n --color-fill-4: rgb(255 227 156);\n --color-button: rgb(124 92 255);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(252 250 255);\n --color-button-secondary-text: rgb(74 53 176);\n --color-input: rgb(240 234 252);\n --color-input-text: rgb(63 53 100);\n --color-input-border: rgb(207 195 238);\n --color-disabled: rgb(228 222 242);\n --color-disabled-text: rgb(150 142 182);\n --color-danger: rgb(196 46 88);\n --color-danger-surface: rgb(255 224 232);\n --color-success: rgb(31 157 110);\n --color-warning: rgb(214 138 24);\n --color-notice: rgb(220 240 255);\n --color-notice-text: rgb(36 71 107);\n --color-focus: rgb(90 54 224);\n --color-shadow: rgb(116 92 200 / 0.38);\n --color-overlay: rgb(58 45 107 / 0.32);\n}\n\n/* @part type */\n:root {\n --font-body: Quicksand, \"Hiragino Maru Gothic ProN\", \"Varela Round\", \"Avenir Next\", \"Segoe UI\", sans-serif;\n --font-heading: Outfit, Lexend, Futura, \"Century Gothic\", \"Avenir Next\", sans-serif;\n --font-ui: Outfit, Lexend, Futura, \"Century Gothic\", \"Avenir Next\", sans-serif;\n --font-mono: \"JetBrains Mono\", \"Fira Code\", Menlo, Consolas, monospace;\n --text-base: 18px;\n --text-small: 14px;\n --text-ui: 17px;\n --text-large: 22px;\n --text-display: 58px;\n --text-h1: 36px;\n --text-h2: 26px;\n --text-h3: 21px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0.01em;\n --display-tracking: -0.01em;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 18px;\n --radius-panel: 30px;\n --radius-pill: 999px;\n --radius-page: 42px;\n --shadow-panel: 0 26px 44px -14px var(--color-shadow), inset 0 -12px 22px color-mix(in srgb, black 30%, transparent), inset 0 2px 0 color-mix(in srgb, white 20%, transparent), inset 0 12px 20px color-mix(in srgb, white 10%, transparent);\n --shadow-control: 0 12px 20px -8px var(--color-shadow), inset 0 -7px 12px color-mix(in srgb, black 28%, transparent), inset 0 2px 0 color-mix(in srgb, white 26%, transparent), inset 0 7px 10px color-mix(in srgb, white 14%, transparent);\n --shadow-control-hover: 0 18px 28px -8px var(--color-shadow), inset 0 -7px 12px color-mix(in srgb, black 28%, transparent), inset 0 2px 0 color-mix(in srgb, white 36%, transparent), inset 0 7px 10px color-mix(in srgb, white 22%, transparent);\n --shadow-control-pressed: inset 0 7px 12px color-mix(in srgb, black 38%, transparent), inset 0 -2px 0 color-mix(in srgb, white 12%, transparent), inset 0 -6px 10px color-mix(in srgb, white 6%, transparent);\n --shadow-dialog: 0 40px 72px -20px var(--color-shadow), 0 0 0 1px color-mix(in srgb, white 8%, transparent), inset 0 -14px 26px color-mix(in srgb, black 30%, transparent), inset 0 2px 0 color-mix(in srgb, white 24%, transparent), inset 0 14px 24px color-mix(in srgb, white 12%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(50% 36% at 0% 0%, color-mix(in srgb, var(--color-fill-2) 18%, transparent), transparent 70%), radial-gradient(46% 34% at 100% 100%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%), linear-gradient(160deg, var(--color-canvas), var(--color-page) 60%);\n --fill-bar: linear-gradient(180deg, color-mix(in srgb, var(--color-bar) 90%, white), var(--color-bar) 50%);\n --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt) 92%, white), var(--color-bar-alt) 50%);\n --fill-inverse: linear-gradient(180deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 88%, black));\n --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 80%, white), var(--color-accent) 50%, color-mix(in srgb, var(--color-accent) 90%, black)), var(--color-accent);\n --fill-panel: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 91%, white), var(--color-surface) 46%);\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 78%, white), var(--color-button) 50%, color-mix(in srgb, var(--color-button) 88%, black)), var(--color-button);\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 64%, white), var(--color-button) 60%), var(--color-button);\n --fill-button-secondary: linear-gradient(180deg, color-mix(in srgb, var(--color-button-secondary) 90%, white), var(--color-button-secondary) 50%), var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out, color 0.18s ease-out;\n --backdrop-blur: 0px;\n}\n" } }