{
  "id": "v1-cl-8764",
  "long_id": "v1.claymorphism.forum.s08.p07.t06.u04",
  "name": "Claymorphism clubhouse forum",
  "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": "forum",
  "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 a soft drop shadow under it. This pack is a small community forum in that look, in bubblegum colours: pink and sky blue clay with lilac and aqua beside them, a cherry red button, and every raised shape standing on a firm ledge of its own shadow like a sweet on a tray. It was common for the community, club and fan pages of playful consumer products, where posts are speech bubbles and members are clay balls.",
  "url": "https://chrono.skin/s/v1-cl-8764",
  "preview_url": "https://chrono.skin/s/v1-cl-8764/specimen.html",
  "files": {
    "STYLE.md": "# Claymorphism clubhouse forum\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 a soft drop shadow under it. This pack is a small community forum in that look, in bubblegum colours: pink and sky blue clay with lilac and aqua beside them, a cherry red button, and every raised shape standing on a firm ledge of its own shadow like a sweet on a tray. It was common for the community, club and fan pages of playful consumer products, where posts are speech bubbles and members are clay balls.\n\n## Layout\n\n- Content column: `--size-page` (1180px), centred, with `--space-5` (24px) side padding; the layout is fluid below that width.\n- Navigation: `.ds-nav` has no bar. On the bare page stand the brand, then a row of separate clay keys `--size-nav` (56px) high in `--fill-bar`, each an icon and a word, and at the right end the primary button and the account (an avatar that opens a `.ds-menu`).\n- Every page is the same two columns from the top, `.ds-page__split`: a working column and an aside of `--size-aside` (340px) at its right. Blocks in a column are `.ds-page__stack`ed `--space-6` (34px) apart.\n- Home page: in the working column the hero (one wide clay slab: the title runs across it, lead and buttons below at the left, three clay plants in the lower right corner), the `.ds-grid` of four boards two to a row under a `.ds-page__head`, and the list of current topics. In the aside three panels: the club's figures with a progress ring, the carousel, the podium.\n- Inner pages have no hero. Under the navigation come the `.ds-breadcrumb` and, on a board or a form, the `.ds-page-header` on the bare page. A board has the tabs, the table of topics and the pagination in the working column, the `.ds-sidebar` of boards and the accordion of rules in the aside. A topic is a run of `.ds-post` (the member in a `--size-author` 148px column, the words in a speech bubble) and the reply panel, with the topic's own panels in the aside; the first post's h1 stands in for the page header. A form page has the form panel in the working column and notices, empty state and dialog in the aside.\n- Views. The specimen is one site with four views, each `<section class=\"ds-view\" id=\"...\">` inside `.ds-page__inner`: `home` (the boards), `board` (one board's topics), `topic` (one topic) and `new` (the form for a new topic). The key of the current view is pressed in by one `:has()` rule per view.\n- Spacing scale: `--space-1` 4px (dot to text), `--space-2` 8px (label to control, icon to word), `--space-3` 12px (between list bars, keys and figures), `--space-4` 18px (between buttons, row padding, member to bubble), `--space-5` 24px (card padding, grid gap, form gap), `--space-6` 34px (between panels and columns, hero padding), `--space-7` 52px (dialog sheet padding), `--space-8` 80px (above the footer).\n- `--size-rule` (2px) is the weight of the soft rules between table rows.\n- Below 960px the aside moves under the working column and the keys of the navigation take a line of their own, equally wide. Below 560px the brand shows only its mark and the account only its avatar, the keys lose their icons, the boards are one column, the hero stacks with its plants centred, a post puts its member in a row above the bubble, form rows 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` is a soft serif (Fraunces, then DM Serif Display, Iowan Old Style) for titles, figures and the brand; `--font-body` and `--font-ui` are a humanist sans (Karla, then Mulish, Gill Sans). `--font-mono` is for code only.\n- Sizes: `--text-base` 18px, `--text-ui` 16px for controls, navigation, tables and notices, `--text-small` 15px for meta text, labels and badges, `--text-large` 21px for lead text, step text and large buttons, `--text-h3` 22px, `--text-h2` 29px, `--text-h1` 42px, `--text-display` 68px for the hero title only.\n- Weights: 400 body, 600 controls, 700 headings and bold, 800 display. Line height 1.55 for body, 1.18 for headings, 1.02 for display.\n- The era's conventions for which text token sits on which fill are kept:\n  - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours stand only on the page, on `--color-surface`, `--color-surface-alt` and `--color-surface-strong`. The brand in the navigation stands on the bare page and takes `--color-heading`.\n  - `--color-accent-text` is the ink for the accent and for all four `--color-fill-*` clays (deck cards, the minutes ball, step numbers, avatars, the current sidebar link). Meta text on a fill is the same ink at opacity 0.8.\n  - `--color-bar-text` on `--fill-bar` (the navigation keys), `--color-bar-alt-text` on `--fill-bar-alt` (the footer, table head), `--color-inverse-text` on `--fill-inverse` (the closing band, tooltips, code blocks), `--color-button-text` on `--fill-button` (primary buttons, the timer's main key), `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, round keys, pagination keys), `--color-input-text` on `--fill-input` (controls, the search well, the stat tray, the tab track, the empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`.\n  - Status colours never carry text: a status badge is the surface tinted with the status colour, a dot of the full colour and `--color-text`.\n- The clay comes from the surface part: every shadow token holds drop shadows in `--color-shadow` (a tint of the palette) and two inset shadows mixed from white and black, so the same tokens shape a white card, a coloured card and the dark band. `--shadow-control-pressed` has only insets, reversed: it is a dent.\n- Coloured cards add one more drop shadow in their own colour: `color-mix()` of their fill token and `transparent`, written in the component because the vocabulary has no token per fill.\n- One-off values with no token: circles use `border-radius: 50%`, the bits of food their own percentages; a list bar, a notice and an accordion bar take the smaller of `--radius-panel` and `--radius-control`; placeholders are `--color-input-text` at opacity 0.55. The tilt of a deck card is between 2 and 5 degrees.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints `--fill-page` and sets the base type. `.ds-page__inner` is the width container, `.ds-page__split` the two columns, `.ds-page__stack` a vertical stack 34px apart, `.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__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 ball `--size-brand` (48px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the ball.\n- `.ds-nav`: the header row on the bare page. `.ds-nav__inner` lays it out, `.ds-nav__list` holds the keys, `.ds-nav__link` is one key (pressed in when `is-current`, lifted on `is-hover`), `.ds-nav__actions` the right end, `.ds-nav__account` the account pill with an avatar and `.ds-nav__account-name`.\n- `.ds-menu`: a `<details>` drop-down, here under the account: `.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-hero`: the welcome slab of the home page: `.ds-hero__head` (a badge and `.ds-hero__title` at the display size) across the top, then `.ds-hero__lead` with `.ds-hero__actions`, and `.ds-hero__art` holding the plants.\n- `.ds-pot`: a plant drawn in CSS from the same clay as the cards: `.ds-pot__body` and `.ds-pot__rim` in a block colour (`--1` to `--4`), and either three `.ds-pot__leaf` (`--left`, `--right`, `--tall`) or a `.ds-pot__ball` for a cactus; `--small` and `--large` size it. Decorative only: mark it `aria-hidden`.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, `.ds-page-header__actions` at the right with at most one primary button.\n- `.ds-prose`: running text inside a post or a panel: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for an inverted code block.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for titles and table links; `.ds-link__sample` lays out a row of links.\n- `.ds-button`: a fat clay key 50px high on its ledge. `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` (62px) for the hero, `.ds-button--wide` fills its card; `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form in a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with a `.ds-form__chevron`). Controls are dents: `--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`: the topics of a board on 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`: topics as separate clay bars 12px apart: `.ds-list__item` holds an avatar, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`), a badge and `.ds-list__aside`, the number of replies in a dent.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body` (a column with 18px 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 boards, two to a row. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay; inside, a `.ds-grid__icon` ball, the board's name as `.ds-grid__title` (a link), `.ds-grid__text` and a `.ds-grid__foot` with a `.ds-grid__count` and the `.ds-faces` of who posted last. A card lifts and tilts on `is-hover`.\n- `.ds-faces`: a few small avatars that overlap.\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`. `--1` to `--3` put a tile in a block colour.\n- `.ds-podium`: the three most helpful members: each `.ds-podium__place` (`--1`, `--3`; plain is second) is an avatar, a `.ds-podium__name` and a `.ds-podium__block`, a plinth in a block colour with the place on it.\n- `.ds-tabs`: a dented track of `.ds-tabs__tab` pills; `is-current` is a raised pill in the accent. For filtering a board, not for site navigation.\n- `.ds-badge`: a pill in the accent, also used for a member's rank. `.ds-badge--quiet` is neutral; `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted pills with a status dot.\n- `.ds-post`: one message of a topic: `.ds-post__author` (a large avatar, `.ds-post__name`, a rank badge, `.ds-post__meta`) and `.ds-post__bubble`, a clay card with one tight corner towards the member, holding `.ds-post__head`, the text and `.ds-post__foot`. `.ds-post--picked` puts the bubble in the accent clay: the answer the asker chose.\n- `.ds-react`: a small clay key with an icon and a count under a post; `is-on` presses it in.\n- `.ds-sidebar`: a clay card listing the boards: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` (dented when `is-current`) with a `.ds-sidebar__dot` in the board's colour (`--2` to `--4`) and a `.ds-sidebar__count`.\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 at the top of an inner page: `.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, here a rank badge; `.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`: `<details>` sections as separate clay bars: `.ds-accordion__item`, `.ds-accordion__head` with a round `.ds-accordion__chevron`, `.ds-accordion__body`.\n- `.ds-carousel`: `.ds-carousel__track` scrolls and snaps, one `.ds-carousel__slide` showing; `.ds-carousel__foot` holds two round `.ds-carousel__arrow` keys around `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`). `.ds-shelf` is the slide: `.ds-shelf__plants` (a dented niche with a row of `.ds-pot`), `.ds-shelf__board` (the shelf, a bar of accent clay) and an avatar with a name as caption.\n- `.ds-footer`: one clay pill in `--fill-bar-alt` at the end of the page: `.ds-footer__inner` holds the brand, `.ds-footer__links` with `.ds-footer__link`, and `.ds-footer__text`.\n\n## Never\n\n- `block-gap <= 80px`: blocks sit 34px apart; 80px above the footer is the largest gap.\n- `content-width <= 1180px`: the column is capped.\n- `font-size <= 68px`: the hero title is the largest text.\n- `font-size >= 15px`: meta text and badges are the smallest text.\n- `font-weight >= 400`: nothing is light.\n- `font-families <= 3`: one serif, one sans and one monospace.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `box-shadow != none`: nothing raised is flat; a block without its inner glow 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. 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-react`. For a coloured card take a `--color-fill-*` background and `--color-accent-text` for everything on it, as `.ds-grid__cell` does. A new illustration is built like `.ds-pot`: rounded boxes in block colours under the shadow tokens, never an image and never a face. 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: 1180px;\n  --size-aside: 340px;\n  --size-author: 148px;\n  --size-dialog: 440px;\n  --size-nav: 56px;\n  --size-control: 50px;\n  --size-control-large: 62px;\n  --size-icon: 20px;\n  --size-dot: 12px;\n  --size-thumb: 30px;\n  --size-track: 20px;\n  --size-check: 28px;\n  --size-avatar: 46px;\n  --size-ring: 104px;\n  --size-rule: 2px;\n  --size-brand: 48px;\n  --size-pot: 92px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 18px;\n  --space-5: 24px;\n  --space-6: 34px;\n  --space-7: 52px;\n  --space-8: 80px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  min-height: 100vh;\n  overflow-x: clip;\n  background: var(--fill-page);\n  background-color: var(--color-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.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\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/* beside a post's author the tip opens at the left edge of its trigger: the author column stands at the window's edge */\n@media (min-width: 561px) {\n  .ds-post__author .ds-tooltip__tip {\n    left: 0;\n    transform: none;\n  }\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--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--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--1 .ds-avatar__pic {\n  background: var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n  background: var(--color-fill-2);\n}\n.ds-avatar--3 .ds-avatar__pic {\n  background: var(--color-fill-3);\n}\n.ds-avatar--4 .ds-avatar__pic {\n  background: var(--color-fill-4);\n}\n.ds-avatar__text {\n  min-width: 0;\n}\n.ds-avatar__name {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  opacity: 0.75;\n}\n\n/* accordion: every section its own clay bar that opens */\n.ds-accordion {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n.ds-accordion__item {\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: min(var(--radius-panel), var(--radius-control));\n  box-shadow: var(--shadow-control);\n  color: var(--color-text);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: calc(var(--size-icon) + var(--space-4));\n  height: calc(var(--size-icon) + var(--space-4));\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  transition: var(--transition);\n}\n.ds-accordion__chevron svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n  box-shadow: var(--shadow-control-pressed);\n  transform: rotate(180deg);\n}\n.ds-accordion__body {\n  padding: 0 var(--space-5) var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* carousel: one slide showing, round clay arrows and dots under it */\n.ds-carousel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n  border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  scroll-snap-align: start;\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n}\n.ds-carousel__arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-carousel__arrow svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-carousel__arrow:active,\n.ds-carousel__arrow.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  transform: scale(0.94);\n}\n.ds-carousel__dots {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-carousel__dot {\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n  width: calc(3 * var(--size-dot));\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n}\n\n/* the form view has no link of its own: its key in the bar stays pressed while it shows */\n.ds-page:has(#new: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 columns of the pages */\n.ds-page__inner {\n  width: 100%;\n  max-width: calc(var(--size-page) + 2 * var(--space-5));\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n.ds-page__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  min-width: 0;\n}\n/* every page is a working column with an aside at its right, from the top */\n.ds-page__split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-aside);\n  gap: var(--space-6);\n  align-items: start;\n}\n/* 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-4);\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-small);\n  font-weight: var(--weight-bold);\n}\n.ds-view {\n  padding-top: var(--space-6);\n}\n\n/* nav: no bar. The brand, a row of separate clay keys and the account stand on the bare page */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  max-width: calc(var(--size-page) + 2 * var(--space-5));\n  margin: 0 auto;\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4) var(--space-5);\n  color: var(--color-heading);\n}\n.ds-nav__list {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 auto 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-2);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-5) 0 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-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-nav__link svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  flex: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  box-shadow: var(--shadow-control-hover);\n  transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-nav__link:hover::after,\n.ds-nav__link.is-hover::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  right: 0;\n  left: 0;\n  height: calc(var(--space-1) * 0.5);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"],\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#topic\"] {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  box-shadow: var(--shadow-control-pressed);\n  transform: none;\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n/* the account: an avatar that opens a menu */\n.ds-nav__account {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1);\n  padding-right: var(--space-3);\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  line-height: var(--line-heading);\n}\n.ds-nav__account .ds-avatar__pic {\n  width: calc(var(--size-control) - 2 * var(--space-1));\n  height: calc(var(--size-control) - 2 * var(--space-1));\n  box-shadow: none;\n}\n\n/* hero: a welcome on one wide clay slab; the title runs across it, three plants stand in its lower right corner */\n.ds-hero {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: var(--space-2) var(--space-5);\n  align-items: end;\n  padding: var(--space-6);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-hero__head {\n  grid-column: 1 / -1;\n}\n.ds-hero__title {\n  max-width: 18ch;\n  margin: var(--space-3) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  max-width: 44ch;\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  margin-top: var(--space-5);\n}\n.ds-hero__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-3);\n}\n\n/* pot: a plant modelled from the same clay: a pot in a block colour, a rim and three leaves */\n.ds-pot {\n  position: relative;\n  display: block;\n  flex: none;\n  width: var(--size-pot);\n  height: calc(var(--size-pot) * 1.5);\n}\n.ds-pot--small {\n  width: calc(var(--size-pot) * 0.62);\n  height: calc(var(--size-pot) * 0.93);\n}\n.ds-pot--large {\n  width: calc(var(--size-pot) * 1.4);\n  height: calc(var(--size-pot) * 2.1);\n}\n.ds-pot__body,\n.ds-pot__rim {\n  position: absolute;\n  display: block;\n  background-color: var(--color-fill-1);\n}\n.ds-pot__body {\n  bottom: 0;\n  left: 14%;\n  width: 72%;\n  height: 40%;\n  border-radius: 14% 14% 44% 44% / 12% 12% 56% 56%;\n  box-shadow: var(--shadow-panel);\n}\n.ds-pot__rim {\n  bottom: 36%;\n  left: 5%;\n  width: 90%;\n  height: 13%;\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control);\n}\n.ds-pot--1 .ds-pot__body,\n.ds-pot--1 .ds-pot__rim {\n  background-color: var(--color-fill-1);\n}\n.ds-pot--2 .ds-pot__body,\n.ds-pot--2 .ds-pot__rim {\n  background-color: var(--color-fill-2);\n}\n.ds-pot--3 .ds-pot__body,\n.ds-pot--3 .ds-pot__rim {\n  background-color: var(--color-fill-3);\n}\n.ds-pot--4 .ds-pot__body,\n.ds-pot--4 .ds-pot__rim {\n  background-color: var(--color-fill-4);\n}\n.ds-pot__leaf {\n  position: absolute;\n  bottom: 47%;\n  left: 50%;\n  display: block;\n  width: 36%;\n  height: 24%;\n  background-color: color-mix(in srgb, var(--color-success) 62%, var(--color-surface));\n  border-radius: 90% 10% 90% 10%;\n  box-shadow: var(--shadow-control);\n  transform-origin: 0 100%;\n  transform: rotate(-45deg);\n}\n.ds-pot__leaf--left {\n  transform: rotate(-98deg) scale(0.86);\n}\n.ds-pot__leaf--right {\n  transform: rotate(4deg) scale(0.86);\n}\n.ds-pot__leaf--tall {\n  width: 40%;\n  height: 27%;\n}\n/* a round cactus instead of leaves */\n.ds-pot__ball {\n  position: absolute;\n  bottom: 44%;\n  left: 24%;\n  display: block;\n  width: 52%;\n  height: 36%;\n  background-color: color-mix(in srgb, var(--color-success) 62%, var(--color-surface));\n  border-radius: 50% 50% 46% 46%;\n  box-shadow: var(--shadow-panel);\n}\n\n/* stats: three round-cornered tiles side by side, each a figure over its label */\n.ds-stat {\n  gap: var(--space-3);\n}\n.ds-stat__item {\n  padding: var(--space-4) var(--space-2);\n  border-radius: min(var(--radius-panel), var(--radius-control));\n  box-shadow: var(--shadow-control);\n  text-align: center;\n}\n.ds-stat__value {\n  justify-content: center;\n  margin: 0;\n}\n.ds-stat__item--1,\n.ds-stat__item--2,\n.ds-stat__item--3 {\n  background: var(--color-fill-1);\n}\n.ds-stat__item--2 {\n  background: var(--color-fill-2);\n}\n.ds-stat__item--3 {\n  background: var(--color-fill-4);\n}\n.ds-stat__item--1 .ds-stat__value,\n.ds-stat__item--2 .ds-stat__value,\n.ds-stat__item--3 .ds-stat__value,\n.ds-stat__item--1 .ds-stat__label,\n.ds-stat__item--2 .ds-stat__label,\n.ds-stat__item--3 .ds-stat__label {\n  color: var(--color-accent-text);\n}\n\n/* grid: the boards, two to a row; each a wide card in a block colour */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-2) var(--space-4);\n  align-items: 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);\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}\n.ds-grid__cell--3 {\n  background-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n  background-color: var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  transform: translateY(calc(var(--space-1) * -1)) rotate(-1deg);\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__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  grid-row: span 2;\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n}\n.ds-grid__icon svg {\n  width: 44%;\n  height: 44%;\n}\n.ds-grid__title {\n  margin: 0;\n  color: inherit;\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  text-decoration: none;\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n}\n.ds-grid__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  grid-column: 1 / -1;\n  margin-top: var(--space-2);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-grid__count {\n  opacity: 0.8;\n}\n/* a few small avatars that overlap: who posted last */\n.ds-faces {\n  display: flex;\n}\n.ds-faces .ds-avatar__pic {\n  width: calc(var(--size-avatar) * 0.7);\n  height: calc(var(--size-avatar) * 0.7);\n  font-size: var(--text-small);\n}\n.ds-faces .ds-avatar + .ds-avatar {\n  margin-left: calc(var(--space-2) * -1);\n}\n\n/* list: topics as clay bars; the number of replies sits in a dent at the end */\n.ds-list__aside {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: 0 var(--space-3);\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  color: var(--color-input-text);\n}\n\n/* podium: the three most helpful members on plinths of clay */\n.ds-podium {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-3);\n  align-items: end;\n}\n.ds-podium__place {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n  text-align: center;\n}\n.ds-podium__name {\n  max-width: 100%;\n  overflow: hidden;\n  color: var(--color-heading);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-podium__block {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  width: 100%;\n  height: calc(var(--size-control) * 1.1);\n  padding-top: var(--space-2);\n  background-color: var(--color-fill-2);\n  border-radius: var(--radius-control) var(--radius-control) var(--space-2) var(--space-2);\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: var(--line-heading);\n}\n.ds-podium__place--1 .ds-podium__block {\n  height: calc(var(--size-control) * 1.9);\n  background-color: var(--color-fill-1);\n}\n.ds-podium__place--3 .ds-podium__block {\n  height: calc(var(--size-control) * 0.8);\n  padding-top: 0;\n  background-color: var(--color-fill-4);\n}\n\n/* carousel: a shelf of plants in a dent, one shelf showing */\n.ds-carousel__track {\n  gap: var(--space-4);\n  border-radius: var(--radius-panel);\n}\n.ds-shelf {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n.ds-shelf__plants {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-around;\n  padding: var(--space-4) var(--space-3) 0;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: var(--radius-panel) var(--radius-panel) var(--space-2) var(--space-2);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-shelf__board {\n  display: block;\n  height: var(--size-track);\n  margin-top: calc(var(--space-3) * -1);\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\n/* post: one message of a topic: the member at the left, the words in a speech bubble at the right */\n.ds-post {\n  display: grid;\n  grid-template-columns: var(--size-author) minmax(0, 1fr);\n  gap: var(--space-4);\n  align-items: start;\n}\n.ds-post__author {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  padding-top: var(--space-2);\n  color: var(--color-text);\n  text-align: center;\n}\n.ds-post__author .ds-avatar__pic {\n  width: calc(var(--size-avatar) * 1.6);\n  height: calc(var(--size-avatar) * 1.6);\n  font-size: var(--text-large);\n}\n.ds-post__name {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-post__meta {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-post__bubble {\n  min-width: 0;\n  padding: 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(--space-2) var(--radius-panel) var(--radius-panel) var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-post__bubble p {\n  margin: 0 0 var(--space-3);\n}\n.ds-post__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  margin-bottom: var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-post__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin-top: var(--space-4);\n}\n.ds-post__foot .ds-link {\n  margin-left: auto;\n}\n/* the answer the asker picked: the bubble in the accent clay, with the ink of the fills */\n.ds-post--picked .ds-post__bubble {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-post--picked .ds-post__head {\n  color: var(--color-accent-text);\n}\n/* react: a small clay key with a count, pressed in when you have used it */\n.ds-react {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: calc(var(--size-control) - var(--space-3));\n  margin: 0;\n  padding: 0 var(--space-4) 0 var(--space-3);\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-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-bold);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-react svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-react:hover,\n.ds-react.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-react.is-on {\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/* sidebar: a clay card with the boards */\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 {\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  gap: var(--space-3);\n  padding: var(--space-2) var(--space-3);\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-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__dot {\n  flex: none;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background-color: var(--color-fill-1);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n}\n.ds-sidebar__dot--2 {\n  background-color: var(--color-fill-2);\n}\n.ds-sidebar__dot--3 {\n  background-color: var(--color-fill-3);\n}\n.ds-sidebar__dot--4 {\n  background-color: var(--color-fill-4);\n}\n.ds-sidebar__count {\n  margin-left: auto;\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\n/* footer: a row of small things on the bare page, then one clay pill with the brand */\n.ds-footer {\n  max-width: calc(var(--size-page) + 2 * var(--space-5));\n  margin: var(--space-8) auto 0;\n  padding: 0 var(--space-5) var(--space-6);\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-3) var(--space-6);\n  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);\n  background-color: var(--color-bar-alt);\n  background: var(--fill-bar-alt);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-alt-text);\n}\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: 960px) {\n  .ds-page__split {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n  }\n  .ds-nav__list {\n    order: 3;\n    width: 100%;\n    margin: 0;\n  }\n  .ds-nav__list > * {\n    flex: 1 1 0;\n  }\n  .ds-nav__link {\n    justify-content: center;\n  }\n  .ds-nav__actions {\n    margin-left: auto;\n  }\n}\n@media (max-width: 560px) {\n  .ds-page__inner,\n  .ds-nav,\n  .ds-footer {\n    padding-left: var(--space-4);\n    padding-right: var(--space-4);\n  }\n  .ds-nav__inner {\n    gap: var(--space-3);\n  }\n  .ds-nav__list {\n    gap: var(--space-2);\n  }\n  .ds-nav__link {\n    min-height: var(--size-control);\n    padding: 0 var(--space-2);\n    font-size: var(--text-small);\n  }\n  .ds-nav__link svg {\n    display: none;\n  }\n  .ds-nav__account-name,\n  .ds-brand__name {\n    display: none;\n  }\n  .ds-nav__account {\n    padding-right: var(--space-1);\n  }\n  .ds-view {\n    padding-top: var(--space-5);\n  }\n  .ds-hero {\n    grid-template-columns: minmax(0, 1fr);\n    padding: var(--space-5);\n    border-radius: var(--radius-panel);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    line-height: var(--line-heading);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-hero__actions .ds-button {\n    flex: 1 1 auto;\n  }\n  .ds-hero__art {\n    justify-content: center;\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-list__item {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    gap: var(--space-2) var(--space-3);\n  }\n  .ds-list__item > .ds-badge {\n    grid-column: 2;\n    grid-row: 2;\n    justify-self: start;\n  }\n  .ds-list__item > .ds-list__aside {\n    grid-column: 3;\n    grid-row: 1;\n  }\n  .ds-post {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-3);\n  }\n  .ds-post__author {\n    flex-direction: row;\n    flex-wrap: wrap;\n    padding: 0 var(--space-2);\n    text-align: left;\n  }\n  .ds-post__author .ds-avatar__pic {\n    width: var(--size-avatar);\n    height: var(--size-avatar);\n    font-size: var(--text-small);\n  }\n  .ds-post__bubble {\n    padding: var(--space-4);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-tabs {\n    display: flex;\n    align-self: stretch;\n    flex-wrap: wrap;\n    gap: var(--space-1);\n    border-radius: var(--radius-panel);\n  }\n  .ds-tabs > * {\n    flex: 1 1 auto;\n  }\n  .ds-tabs__tab {\n    padding: var(--space-2) var(--space-3);\n    text-align: center;\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-3) var(--space-3);\n  }\n  .ds-table .ds-table__opt {\n    display: none;\n  }\n  .ds-page-header__title {\n    font-size: var(--text-h2);\n  }\n  .ds-page-header__lead {\n    font-size: var(--text-base);\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-dialog__box {\n    padding: var(--space-5);\n    border-radius: var(--radius-panel);\n  }\n  .ds-footer__inner {\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--space-5);\n    border-radius: var(--radius-panel);\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin clubhouse: people who keep houseplants alive</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"8.6\" cy=\"8.8\" r=\"6\"/><circle cx=\"15.4\" cy=\"9.6\" r=\"5.2\"/><circle cx=\"11\" cy=\"15.2\" r=\"6\"/><circle cx=\"19.2\" cy=\"18.8\" r=\"2.6\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__list\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z\"/></svg> Boards</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#board\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z\"/></svg> Cuttings</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#topic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4l2.500 5 5.500.8-4 3.900.9 5.500-4.900-2.600-4.900 2.600.9-5.500-4-3.900 5.500-.8z\"/></svg> Guide</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-button\" href=\"#new\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg> New topic</a>\n      <details class=\"ds-menu ds-menu--end\" data-component=\"menu\">\n        <summary class=\"ds-nav__account ds-menu__toggle\"><span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">MO</span></span><span class=\"ds-nav__account-name\">Mira</span> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"/></svg></summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__link\" href=\"#board\">My topics <span class=\"ds-menu__note\">7</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#new\">Drafts <span class=\"ds-menu__note\">0</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#topic\">Saved guides</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#home\">Sign out</a></li>\n        </ul>\n      </details>\n    </div>\n  </div>\n</header>\n\n<div class=\"ds-page__inner\">\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-page__split\">\n\n    <div class=\"ds-page__stack\">\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <div class=\"ds-hero__head\">\n          <span class=\"ds-badge\">Spring swap is open</span>\n          <h1 class=\"ds-hero__title\">Nobody here has killed fewer plants than you</h1>\n        </div>\n        <div>\n          <p class=\"ds-hero__lead\">A clubhouse for people with one windowsill and too many pots. Ask, show, and swap cuttings by post.</p>\n          <div class=\"ds-hero__actions\">\n            <a class=\"ds-button ds-button--large\" href=\"#new\">Ask the club</a>\n            <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#topic\">Read the swap guide</a>\n          </div>\n        </div>\n        <div class=\"ds-hero__art\" aria-hidden=\"true\">\n          <span class=\"ds-pot ds-pot--4 ds-pot--small\"><span class=\"ds-pot__ball\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span>\n          <span class=\"ds-pot ds-pot--1 ds-pot--large\"><span class=\"ds-pot__leaf ds-pot__leaf--left\"></span><span class=\"ds-pot__leaf ds-pot__leaf--right\"></span><span class=\"ds-pot__leaf\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span>\n          <span class=\"ds-pot ds-pot--3\"><span class=\"ds-pot__leaf ds-pot__leaf--left\"></span><span class=\"ds-pot__leaf ds-pot__leaf--right\"></span><span class=\"ds-pot__leaf ds-pot__leaf--tall\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span>\n        </div>\n      </section>\n\n      <section>\n        <div class=\"ds-page__head\">\n          <h2 class=\"ds-page__title\">Boards</h2>\n          <span class=\"ds-page__title-note\">4 boards · 1,318 topics</span>\n        </div>\n        <div class=\"ds-grid\" data-component=\"grid\">\n          <article class=\"ds-grid__cell ds-grid__cell--1\">\n            <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 19c0-9 5-14 14-14 0 9-5 14-14 14zM5 19l8-8\"/></svg></span>\n            <a class=\"ds-grid__title\" href=\"#board\">Cuttings to swap</a>\n            <p class=\"ds-grid__text\">Offer what you have too much of, ask for what you want.</p>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-grid__count\">412 topics · 18 today</span>\n              <span class=\"ds-faces\"><span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">IL</span></span><span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">KA</span></span><span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">TB</span></span></span>\n            </div>\n          </article>\n          <article class=\"ds-grid__cell ds-grid__cell--2\">\n            <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><ellipse cx=\"12\" cy=\"13\" rx=\"5\" ry=\"6\"/><path d=\"M12 7V4M7 11H4M20 11h-3M7 16H4M20 16h-3\"/></svg></span>\n            <a class=\"ds-grid__title\" href=\"#board\">Sick leaves</a>\n            <p class=\"ds-grid__text\">Yellow, brown, spotted or crawling. Bring a photo.</p>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-grid__count\">506 topics · 23 today</span>\n              <span class=\"ds-faces\"><span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">RS</span></span><span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">MO</span></span></span>\n            </div>\n          </article>\n          <article class=\"ds-grid__cell ds-grid__cell--3\">\n            <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 3v2M12 19v2M3 12h2M19 12h2M5.600 5.600l1.400 1.400M17 17l1.400 1.400M5.600 18.400L7 17M17 7l1.400-1.400\"/></svg></span>\n            <a class=\"ds-grid__title\" href=\"#board\">Show your shelf</a>\n            <p class=\"ds-grid__text\">One shelf, one photo, no tidying up first.</p>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-grid__count\">238 topics · 6 today</span>\n              <span class=\"ds-faces\"><span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">JN</span></span><span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">IL</span></span><span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">DV</span></span></span>\n            </div>\n          </article>\n          <article class=\"ds-grid__cell ds-grid__cell--4\">\n            <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3s6 6.500 6 11a6 6 0 0 1-12 0c0-4.500 6-11 6-11z\"/></svg></span>\n            <a class=\"ds-grid__title\" href=\"#board\">First pot</a>\n            <p class=\"ds-grid__text\">Questions that feel too small for the other boards.</p>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-grid__count\">162 topics · 9 today</span>\n              <span class=\"ds-faces\"><span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">TB</span></span><span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">KA</span></span></span>\n            </div>\n          </article>\n        </div>\n      </section>\n\n      <section>\n        <div class=\"ds-page__head\">\n          <h2 class=\"ds-page__title\">Talked about right now</h2>\n          <a class=\"ds-link\" href=\"#board\">All new topics</a>\n        </div>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\"><span class=\"ds-avatar__pic\">IL</span></span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#topic\">Rooting a cutting in water, start to finish</a>\n              <span class=\"ds-list__meta\">Ilse Lindqvist in Cuttings to swap · 12 minutes ago</span>\n            </div>\n            <span class=\"ds-badge ds-badge--quiet\">Pinned</span>\n            <span class=\"ds-list__aside\">48</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">RS</span></span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#topic\">Brown tips on every single leaf</a>\n              <span class=\"ds-list__meta\">Rafael Sousa in Sick leaves · 40 minutes ago</span>\n            </div>\n            <span class=\"ds-badge ds-badge--success\">Solved</span>\n            <span class=\"ds-list__aside\">9</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">KA</span></span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#topic\">Three spider plant babies looking for a home</a>\n              <span class=\"ds-list__meta\">Kofi Asante in Cuttings to swap · 1 hour ago</span>\n            </div>\n            <span class=\"ds-badge ds-badge--warning\">2 left</span>\n            <span class=\"ds-list__aside\">14</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">TB</span></span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#topic\">Tiny flies in the soil, again</a>\n              <span class=\"ds-list__meta\">Tamar Ben-David in Sick leaves · 3 hours ago</span>\n            </div>\n            <span class=\"ds-badge ds-badge--danger\">No answer yet</span>\n            <span class=\"ds-list__aside\">0</span>\n          </li>\n        </ul>\n      </section>\n    </div>\n\n    <aside class=\"ds-page__stack\">\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <h2 class=\"ds-panel__title\">The club today</h2>\n        <div class=\"ds-panel__body\">\n          <dl class=\"ds-stat\" data-component=\"stats\">\n            <div class=\"ds-stat__item ds-stat__item--1\">\n              <dd class=\"ds-stat__value\">2,140</dd>\n              <dt class=\"ds-stat__label\">members</dt>\n            </div>\n            <div class=\"ds-stat__item ds-stat__item--2\">\n              <dd class=\"ds-stat__value\">86</dd>\n              <dt class=\"ds-stat__label\">here now</dt>\n            </div>\n            <div class=\"ds-stat__item ds-stat__item--3\">\n              <dd class=\"ds-stat__value\">312</dd>\n              <dt class=\"ds-stat__label\">swaps sent</dt>\n            </div>\n          </dl>\n          <div class=\"ds-panel__line\">\n            <span class=\"ds-progress ds-progress--ring ds-progress--60\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Spring swap goal\"><span class=\"ds-progress__face\">60%</span></span>\n            <div>\n              <strong>Spring swap</strong>\n              <div class=\"ds-panel__note\">312 of 520 cuttings are on their way. The swap closes on 30 April.</div>\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Shelf of the week</h2>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Shelf of the week\">\n            <div class=\"ds-carousel__track\">\n              <figure class=\"ds-carousel__slide ds-shelf\">\n                <div aria-hidden=\"true\">\n                  <div class=\"ds-shelf__plants\"><span class=\"ds-pot ds-pot--2 ds-pot--small\"><span class=\"ds-pot__leaf ds-pot__leaf--left\"></span><span class=\"ds-pot__leaf ds-pot__leaf--right\"></span><span class=\"ds-pot__leaf\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span><span class=\"ds-pot ds-pot--1\"><span class=\"ds-pot__leaf ds-pot__leaf--left\"></span><span class=\"ds-pot__leaf ds-pot__leaf--right\"></span><span class=\"ds-pot__leaf ds-pot__leaf--tall\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span><span class=\"ds-pot ds-pot--4 ds-pot--small\"><span class=\"ds-pot__ball\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span><span class=\"ds-pot ds-pot--3 ds-pot--small\"><span class=\"ds-pot__leaf ds-pot__leaf--left\"></span><span class=\"ds-pot__leaf ds-pot__leaf--right\"></span><span class=\"ds-pot__leaf\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span></div>\n                  <span class=\"ds-shelf__board\"></span>\n                </div>\n                <figcaption class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">JN</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Jun Nakamura</span><span class=\"ds-avatar__meta\">north window, four pots, 61 hearts</span></span></figcaption>\n              </figure>\n              <figure class=\"ds-carousel__slide ds-shelf\">\n                <div aria-hidden=\"true\">\n                  <div class=\"ds-shelf__plants\"><span class=\"ds-pot ds-pot--3\"><span class=\"ds-pot__ball\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span><span class=\"ds-pot ds-pot--2 ds-pot--small\"><span class=\"ds-pot__ball\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span><span class=\"ds-pot ds-pot--1\"><span class=\"ds-pot__leaf ds-pot__leaf--left\"></span><span class=\"ds-pot__leaf ds-pot__leaf--right\"></span><span class=\"ds-pot__leaf\"></span><span class=\"ds-pot__body\"></span><span class=\"ds-pot__rim\"></span></span></div>\n                  <span class=\"ds-shelf__board\"></span>\n                </div>\n                <figcaption class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">DV</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Dana Vesely</span><span class=\"ds-avatar__meta\">bathroom shelf, three pots, 44 hearts</span></span></figcaption>\n              </figure>\n            </div>\n            <div class=\"ds-carousel__foot\">\n              <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 6l-6 6 6 6\"/></svg></button>\n              <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span></div>\n              <button class=\"ds-carousel__arrow is-hover\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 6l6 6-6 6\"/></svg></button>\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Most helpful in March</h2>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-podium\">\n            <div class=\"ds-podium__place\">\n              <span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">RS</span></span>\n              <span class=\"ds-podium__name\">Rafael</span>\n              <span class=\"ds-podium__block\">2</span>\n            </div>\n            <div class=\"ds-podium__place ds-podium__place--1\">\n              <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">IL</span></span>\n              <span class=\"ds-podium__name\">Ilse</span>\n              <span class=\"ds-podium__block\">1</span>\n            </div>\n            <div class=\"ds-podium__place ds-podium__place--3\">\n              <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">KA</span></span>\n              <span class=\"ds-podium__name\">Kofi</span>\n              <span class=\"ds-podium__block\">3</span>\n            </div>\n          </div>\n          <span class=\"ds-panel__note\">Counted by answers that the asker marked as the one that helped.</span>\n        </div>\n      </section>\n    </aside>\n\n  </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"board\">\n\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Clubhouse</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Boards</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">Cuttings to swap</li>\n    </ol>\n\n    <header class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__text\">\n        <h1 class=\"ds-page-header__title\">Cuttings to swap</h1>\n        <p class=\"ds-page-header__lead\">Offer what you have too much of. 412 topics, 18 of them from today.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#new\">Offer a cutting</a>\n      </div>\n    </header>\n\n    <div class=\"ds-page__split\">\n\n      <div class=\"ds-page__stack\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#board\" aria-current=\"true\">Newest</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#board\">Offers</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#board\">Wanted</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#board\">Mine</a></li>\n        </ul>\n\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr>\n              <th scope=\"col\">Topic</th>\n              <th scope=\"col\" class=\"ds-table__opt\">State</th>\n              <th scope=\"col\" class=\"ds-table__num\">Replies</th>\n              <th scope=\"col\" class=\"ds-table__num ds-table__opt\">Hearts</th>\n              <th scope=\"col\" class=\"ds-table__opt\">Last word</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td><a class=\"ds-link ds-link--quiet ds-table__strong\" href=\"#topic\">Rooting a cutting in water, start to finish</a></td>\n              <td class=\"ds-table__opt\"><span class=\"ds-badge\" data-component=\"badge\">Pinned</span></td>\n              <td class=\"ds-table__num\">48</td>\n              <td class=\"ds-table__num ds-table__opt\">131</td>\n              <td class=\"ds-table__meta ds-table__opt\">Kofi, 12 min</td>\n            </tr>\n            <tr>\n              <td><a class=\"ds-link ds-link--quiet ds-table__strong\" href=\"#topic\">Three spider plant babies looking for a home</a></td>\n              <td class=\"ds-table__opt\"><span class=\"ds-badge ds-badge--warning\">2 left</span></td>\n              <td class=\"ds-table__num\">14</td>\n              <td class=\"ds-table__num ds-table__opt\">22</td>\n              <td class=\"ds-table__meta ds-table__opt\">Jun, 1 hour</td>\n            </tr>\n            <tr class=\"is-hover\">\n              <td><a class=\"ds-link ds-link--quiet ds-table__strong\" href=\"#topic\">Wanted: any pink-veined nerve plant</a></td>\n              <td class=\"ds-table__opt\"><span class=\"ds-badge ds-badge--quiet\">Wanted</span></td>\n              <td class=\"ds-table__num\">3</td>\n              <td class=\"ds-table__num ds-table__opt\">5</td>\n              <td class=\"ds-table__meta ds-table__opt\">Dana, 2 hours</td>\n            </tr>\n            <tr>\n              <td><a class=\"ds-link ds-link--quiet ds-table__strong\" href=\"#topic\">Pothos by the metre, free to whoever asks</a></td>\n              <td class=\"ds-table__opt\"><span class=\"ds-badge ds-badge--success\">Open</span></td>\n              <td class=\"ds-table__num\">27</td>\n              <td class=\"ds-table__num ds-table__opt\">64</td>\n              <td class=\"ds-table__meta ds-table__opt\">Ilse, 5 hours</td>\n            </tr>\n            <tr>\n              <td><a class=\"ds-link ds-link--quiet ds-table__strong\" href=\"#topic\">Jade plant leaves, posted in a matchbox</a></td>\n              <td class=\"ds-table__opt\"><span class=\"ds-badge ds-badge--danger\">All gone</span></td>\n              <td class=\"ds-table__num\">19</td>\n              <td class=\"ds-table__num ds-table__opt\">40</td>\n              <td class=\"ds-table__meta ds-table__opt\">Tamar, yesterday</td>\n            </tr>\n            <tr>\n              <td><a class=\"ds-link ds-link--quiet ds-table__strong\" href=\"#topic\">How do you post a cutting in winter?</a></td>\n              <td class=\"ds-table__opt\"><span class=\"ds-badge ds-badge--quiet\">Question</span></td>\n              <td class=\"ds-table__num\">11</td>\n              <td class=\"ds-table__num ds-table__opt\">17</td>\n              <td class=\"ds-table__meta ds-table__opt\">Rafael, yesterday</td>\n            </tr>\n          </tbody>\n        </table>\n\n        <nav aria-label=\"Pages\">\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link\" href=\"#board\">Newer</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#board\" aria-current=\"page\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#board\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#board\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#board\">Older</a></li>\n          </ul>\n        </nav>\n      </div>\n\n      <aside class=\"ds-page__stack\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\" aria-label=\"Boards\">\n          <h2 class=\"ds-sidebar__heading\">Boards</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#board\"><span class=\"ds-sidebar__dot\"></span>Cuttings to swap <span class=\"ds-sidebar__count\">412</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#board\"><span class=\"ds-sidebar__dot ds-sidebar__dot--2\"></span>Sick leaves <span class=\"ds-sidebar__count\">506</span></a></li>\n            <li><a class=\"ds-sidebar__link is-hover\" href=\"#board\"><span class=\"ds-sidebar__dot ds-sidebar__dot--3\"></span>Show your shelf <span class=\"ds-sidebar__count\">238</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#board\"><span class=\"ds-sidebar__dot ds-sidebar__dot--4\"></span>First pot <span class=\"ds-sidebar__count\">162</span></a></li>\n          </ul>\n        </nav>\n        <div>\n          <div class=\"ds-page__head\">\n            <h2 class=\"ds-page__title\">House rules for swaps</h2>\n          </div>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">Who pays the postage? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\"><p>The sender, always. A cutting weighs less than a letter.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">What may not be posted? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\"><p>Soil, anything with pests, and plants that are protected where you live.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">It arrived as mush <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\"><p>Say so kindly in the topic. Most senders post a second one.</p></div>\n            </details>\n          </div>\n        </div>\n      </aside>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"topic\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Clubhouse</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#board\">Cuttings to swap</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">Rooting a cutting in water</li>\n    </ol>\n\n    <div class=\"ds-page__split\">\n\n      <div class=\"ds-page__stack\">\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\">\n            <span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">IL</span></span>\n            <span class=\"ds-post__name\">Ilse Lindqvist</span>\n            <span class=\"ds-tooltip\" data-component=\"tooltip\"><span class=\"ds-badge\" tabindex=\"0\">Old root</span><span class=\"ds-tooltip__tip\" role=\"tooltip\">More than 500 answers that helped</span></span>\n            <span class=\"ds-post__meta\">1,204 posts</span>\n          </div>\n          <div class=\"ds-post__bubble\">\n            <div class=\"ds-post__head\"><span>Pinned guide · edited on 4 March</span><span>#1</span></div>\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>Rooting a cutting in water, start to finish</h1>\n              <p class=\"ds-prose__lead\">Nearly every swap on this board starts with a stem in a glass. This is the whole method, with the two places where it goes wrong.</p>\n              <h2>Cut below a node</h2>\n              <p>A node is the small bump where a leaf meets the stem. Roots come from there and from <strong>nowhere else</strong>. Label the glass with the name and the day, like <code>pothos 04-03</code>, because in three weeks you will not remember.</p>\n              <h3>What you need</h3>\n              <ul>\n                <li>A clean pair of scissors.</li>\n                <li>A glass that lets you see the roots.</li>\n                <li>Tap water that has stood for a day.</li>\n              </ul>\n              <h2>When to pot it</h2>\n              <p>When the roots are as long as your thumb. Longer roots sulk in soil. If the stem goes soft instead, read <a class=\"ds-link\" href=\"#board\">what to do with mush</a> or <a class=\"ds-link\" href=\"#new\">ask in a topic of your own</a>.</p>\n              <p class=\"ds-link__sample\" data-component=\"links\">\n                <a class=\"ds-link\" href=\"#topic\">Posting a cutting</a>\n                <a class=\"ds-link is-visited\" href=\"#topic\">Winter swaps</a>\n                <a class=\"ds-link is-hover\" href=\"#topic\">Which plants root in water</a>\n                <a class=\"ds-link is-active\" href=\"#topic\">Rooting in moss</a>\n                <a class=\"ds-link ds-link--quiet\" href=\"#board\">Back to the board</a>\n              </p>\n            </div>\n            <div class=\"ds-post__foot\">\n              <button class=\"ds-react is-on\" type=\"button\" aria-pressed=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.500-7-10a4 4 0 0 1 7-2.500A4 4 0 0 1 19 10c0 5.500-7 10-7 10z\"/></svg> 131</button>\n              <button class=\"ds-react\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 19c0-9 5-14 14-14 0 9-5 14-14 14zM5 19l8-8\"/></svg> Saved by 58</button>\n              <a class=\"ds-link\" href=\"#new\">Quote</a>\n            </div>\n          </div>\n        </article>\n\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\">\n            <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">KA</span></span>\n            <span class=\"ds-post__name\">Kofi Asante</span>\n            <span class=\"ds-badge ds-badge--quiet\">Sprout</span>\n            <span class=\"ds-post__meta\">38 posts</span>\n          </div>\n          <div class=\"ds-post__bubble\">\n            <div class=\"ds-post__head\"><span>12 minutes ago</span><span>#48</span></div>\n            <p>Mine has sat in the glass for five weeks and has one root the length of a grain of rice. The window faces north. Is that the reason, or is it the water?</p>\n            <div class=\"ds-post__foot\">\n              <button class=\"ds-react\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.500-7-10a4 4 0 0 1 7-2.500A4 4 0 0 1 19 10c0 5.500-7 10-7 10z\"/></svg> 4</button>\n              <a class=\"ds-link\" href=\"#new\">Quote</a>\n            </div>\n          </div>\n        </article>\n\n        <article class=\"ds-post ds-post--picked\">\n          <div class=\"ds-post__author\">\n            <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">RS</span></span>\n            <span class=\"ds-post__name\">Rafael Sousa</span>\n            <span class=\"ds-badge ds-badge--quiet\">Green thumb</span>\n            <span class=\"ds-post__meta\">412 posts</span>\n          </div>\n          <div class=\"ds-post__bubble\">\n            <div class=\"ds-post__head\"><span>4 minutes ago · picked by Kofi as the answer</span><span>#49</span></div>\n            <p>It is the window. Move the glass to the brightest sill you have, out of direct sun, and change the water twice a week. North light roots a pothos in two months, east light in three weeks.</p>\n            <div class=\"ds-post__foot\">\n              <button class=\"ds-react is-hover\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.500-7-10a4 4 0 0 1 7-2.500A4 4 0 0 1 19 10c0 5.500-7 10-7 10z\"/></svg> 9</button>\n            </div>\n          </div>\n        </article>\n\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Your reply</h2>\n          <div class=\"ds-panel__body\">\n            <textarea class=\"ds-form__textarea\" aria-label=\"Your reply\" placeholder=\"Be as kind as you would be over a fence\"></textarea>\n            <div class=\"ds-button__row\">\n              <a class=\"ds-button\" href=\"#topic\">Post the reply</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#new\">Start a new topic instead</a>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <aside class=\"ds-page__stack\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">In this topic</h2>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-panel__line\"><span>Replies</span><strong>48</strong></div>\n            <div class=\"ds-panel__line\"><span>People</span><span class=\"ds-faces\"><span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">IL</span></span><span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">KA</span></span><span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">RS</span></span><span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">+19</span></span></span></div>\n            <div>\n              <div class=\"ds-progress__legend\"><span>You have read</span><span>36 of 48</span></div>\n              <span class=\"ds-progress ds-progress--75\" role=\"progressbar\" aria-valuenow=\"36\" aria-valuemin=\"0\" aria-valuemax=\"48\" aria-label=\"Replies read\"><span class=\"ds-progress__bar\"></span></span>\n            </div>\n            <label class=\"ds-switch ds-switch--end\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Follow this topic<span class=\"ds-switch__hint\">A note when somebody answers.</span></span></label>\n          </div>\n        </section>\n        <section class=\"ds-panel ds-panel--accent\">\n          <h2 class=\"ds-panel__title\">Got roots already?</h2>\n          <div class=\"ds-panel__body\">\n            <p>Offer the spare ones on the board. Somebody with an empty glass is waiting.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--wide\" href=\"#new\">Offer a cutting</a>\n          </div>\n        </section>\n      </aside>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"new\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Clubhouse</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#board\">Cuttings to swap</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">New topic</li>\n    </ol>\n\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__text\">\n        <h1 class=\"ds-page-header__title\">Start a topic</h1>\n        <p class=\"ds-page-header__lead\">One plant, one question or one offer. A photo gets you an answer twice as fast.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#board\">Back to the board</a>\n      </div>\n    </header>\n\n    <div class=\"ds-page__split\">\n\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Your topic <span class=\"ds-badge ds-badge--quiet\">draft, not saved</span></h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"t-title\">Title</label>\n              <input class=\"ds-form__input is-error\" id=\"t-title\" type=\"text\" value=\"Help\" aria-invalid=\"true\" aria-describedby=\"t-title-error\">\n              <span class=\"ds-form__error\" id=\"t-title-error\">Say which plant and what is the matter, in at least three words.</span>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"t-board\">Board</label>\n                <span class=\"ds-form__select-wrap\">\n                  <select class=\"ds-form__select\" id=\"t-board\">\n                    <option>Cuttings to swap</option>\n                    <option>Sick leaves</option>\n                    <option>Show your shelf</option>\n                    <option>First pot</option>\n                  </select>\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"ds-form__chevron\"><path d=\"M6 9l6 6 6-6\"/></svg>\n                </span>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"t-plant\">Plant, if you know it</label>\n                <input class=\"ds-form__input\" id=\"t-plant\" type=\"text\" placeholder=\"Pothos, or the one with holes\">\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"t-text\">What you want to say</label>\n              <textarea class=\"ds-form__textarea\" id=\"t-text\" placeholder=\"Where it stands, how often you water, what changed\"></textarea>\n              <span class=\"ds-form__hint\">Photos are added after the first save.</span>\n            </div>\n            <label class=\"ds-form__check\">\n              <input class=\"ds-form__checkbox\" type=\"checkbox\" checked>\n              This is an offer: show it in the swap list\n            </label>\n            <label class=\"ds-form__check\">\n              <input class=\"ds-form__checkbox\" type=\"checkbox\">\n              I can post abroad\n            </label>\n            <label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Send me every reply by email</span></label>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Post the topic</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Save the draft</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Throw away</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Add photos</button>\n            </div>\n          </form>\n        </div>\n      </section>\n\n      <aside class=\"ds-page__stack\">\n        <div class=\"ds-notice__stack\" data-component=\"notice\">\n          <div class=\"ds-notice\" role=\"status\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"ds-notice__icon\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v5M12 8v.5\"/></svg>\n            <div><span class=\"ds-notice__title\">Looked for it first?</span> Four topics already mention brown tips this week.</div>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"ds-notice__icon\"><path d=\"M12 4l9 16H3z\"/><path d=\"M12 10v4M12 17v.5\"/></svg>\n            <div><span class=\"ds-notice__title\">The draft was not saved.</span> The title is too short.</div>\n          </div>\n        </div>\n        <section class=\"ds-empty\" data-component=\"empty\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"ds-empty__icon\"><path d=\"M4 13l3-8h10l3 8v6H4z\"/><path d=\"M4 13h5l1 2h4l1-2h5\"/></svg>\n          <h2 class=\"ds-empty__title\">No other drafts</h2>\n          <p class=\"ds-empty__text\">Topics you save without posting wait here for a week.</p>\n          <a class=\"ds-button ds-button--secondary\" href=\"#board\">See your topics</a>\n        </section>\n        <section class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"d-title\">\n            <h2 class=\"ds-dialog__title\" id=\"d-title\">Throw the draft away?</h2>\n            <div class=\"ds-dialog__body\">The title and the text are removed. Nobody has seen them.</div>\n            <div class=\"ds-dialog__actions\">\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Keep it</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Throw away</button>\n            </div>\n          </div>\n        </section>\n      </aside>\n\n    </div>\n  </section>\n\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <a class=\"ds-brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"8.6\" cy=\"8.8\" r=\"6\"/><circle cx=\"15.4\" cy=\"9.6\" r=\"5.2\"/><circle cx=\"11\" cy=\"15.2\" r=\"6\"/><circle cx=\"19.2\" cy=\"18.8\" r=\"2.6\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-footer__links\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">Boards</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#board\">Cuttings</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#topic\">Swap guide</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#new\">New topic</a></li>\n    </ul>\n    <p class=\"ds-footer__text\">chronoskin clubhouse: 2,140 people and their plants.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.claymorphism.forum.s08.p07.t06.u04\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"claymorphism\",\n    \"years\": [\n      2021,\n      2025\n    ]\n  },\n  \"archetype\": \"forum\",\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-8764\",\n  \"short\": \"v1-cl-8764\"\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: Karla, Mulish, \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", sans-serif;\n  --font-heading: Fraunces, \"DM Serif Display\", \"Iowan Old Style\", \"Palatino Linotype\", Georgia, serif;\n  --font-ui: Karla, Mulish, \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", sans-serif;\n  --font-mono: \"Courier Prime\", \"Courier New\", Courier, monospace;\n  --text-base: 18px;\n  --text-small: 15px;\n  --text-ui: 16px;\n  --text-large: 21px;\n  --text-display: 68px;\n  --text-h1: 42px;\n  --text-h2: 29px;\n  --text-h3: 22px;\n  --line-body: 1.55;\n  --line-heading: 1.18;\n  --line-display: 1.02;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 800;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: -0.01em;\n  --display-tracking: -0.025em;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 0;\n  --border-width-strong: 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"
  }
}