{
  "id": "v1-cl-8672",
  "long_id": "v1.claymorphism.forum.s08.p06.t07.u02",
  "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-8672",
  "preview_url": "https://chrono.skin/s/v1-cl-8672/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` and `--font-ui` are a softly rounded grotesque (Rubik, then Varela Round); `--font-body` is a plain, very legible sans (Public Sans, then Atkinson Hyperlegible) because this is a page for reading. `--font-mono` is for code and references only.\n- Sizes: `--text-base` 16px, `--text-ui` 15px for controls, navigation, tables and notices, `--text-small` 13px for meta text, labels, badges and the contents list, `--text-large` 19px for lead text and the search field, `--text-h3` 18px, `--text-h2` 25px, `--text-h1` 36px, `--text-display` 56px for the hero question only.\n- Weights: 400 body, 600 for links, labels and controls, 700 for headings. Line height 1.65 for body, 1.2 for headings, 1.1 for display. Links in running text are underlined; quiet links, titles and navigation are not.\n- The era's conventions for which text token sits on which fill are kept:\n  - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours stand only on the page, on `--color-surface`, `--color-surface-alt` and `--color-surface-strong`.\n  - `--color-accent-text` is the ink for the accent and for all four `--color-fill-*` clays (topic tiles, numbered balls, the accent panel). Meta text on a fill is the same ink at opacity 0.8.\n  - `--color-bar-text` on `--fill-bar` (the navigation strip), `--color-bar-alt-text` on `--fill-bar-alt` (the footer strip, the table head), `--color-inverse-text` on `--fill-inverse` (the closing band with its figures, code blocks, tooltips), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, chips, icon tiles, pagination keys, switch thumbs), `--color-input-text` on `--fill-input` (controls, the search well, the tab track, the carousel's well, the current line of the contents list, the empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`.\n  - Status colours never carry text: a status badge is the surface tinted with the status colour, a dot of the full colour and `--color-text`.\n- The clay comes from the surface part. Each raised shadow token holds a short contact shadow and a long soft one in `--color-shadow`, an inner shade along the lower edge that is also mixed from `--color-shadow` (so white clay is shaded in the palette's own tint, not in grey) and an inner glow of white along the upper edge. `--shadow-control-pressed` has only the insets, reversed: it is a dent.\n- Coloured shapes (topic tiles, clay objects) add a second drop shadow in their own colour: `color-mix()` of their fill token and `transparent`, written in the component because the vocabulary has no token per fill.\n- One-off values with no token: circles use `border-radius: 50%` and icon tiles 34%; a list bar, a notice, an accordion bar and a book of the hero take the smaller of `--radius-panel` and `--radius-control`; placeholders are `--color-input-text` at opacity 0.55; the clay objects are placed and sized in percent of their box.\n\n## Components\n\n- `.ds-page`: on `<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 <= 56px`: the hero question is the largest text.\n- `font-size >= 13px`: meta text and badges are the smallest text.\n- `font-weight >= 400`: nothing is light.\n- `font-families <= 3`: one rounded grotesque, one reading sans and one monospace.\n- `line-height <= 1.7`: body text is set at 1.65.\n- `letter-spacing = 0`: no tracking on any text.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `box-shadow != none`: every key, card and tile is modelled; nothing raised is flat.\n- `border-width <= 4px`: clay has no outlines; the only lines are 2px rules and the 4px focus or error ring.\n- `border-radius <= 36px`: keys are 20px, cards 28px, the hero and flashcards 36px; only pills and balls go higher.\n- `box-shadow-blur <= 44px`: the shadows are short and firm; the dialog's is the deepest.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first whether it is raised or dented: a container starts from `.ds-panel` (fill, radius and `--shadow-panel` together), something pressed or filled in starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`), something the user presses starts from `.ds-button--secondary` 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.p06.t07.u02\",\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-8672\",\n  \"short\": \"v1-cl-8672\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: rgb(255 234 216);\n  --color-canvas: rgb(255 242 229);\n  --color-surface: rgb(255 252 246);\n  --color-surface-alt: rgb(255 243 231);\n  --color-surface-strong: rgb(252 222 199);\n  --color-bar: rgb(255 252 246);\n  --color-bar-text: rgb(92 44 30);\n  --color-bar-alt: rgb(228 124 90);\n  --color-bar-alt-text: rgb(56 20 14);\n  --color-inverse: rgb(104 46 36);\n  --color-inverse-text: rgb(255 240 226);\n  --color-text: rgb(84 52 44);\n  --color-text-muted: rgb(132 96 86);\n  --color-heading: rgb(72 32 24);\n  --color-heading-alt: rgb(184 78 44);\n  --color-link: rgb(190 68 36);\n  --color-link-quiet: rgb(92 44 30);\n  --color-link-visited: rgb(146 78 108);\n  --color-link-hover: rgb(146 44 18);\n  --color-link-active: rgb(92 106 28);\n  --color-border: rgb(246 220 200);\n  --color-border-strong: rgb(232 186 158);\n  --color-border-muted: rgb(252 234 220);\n  --color-accent: rgb(255 198 106);\n  --color-accent-text: rgb(74 34 20);\n  --color-accent-alt: rgb(236 112 112);\n  --color-fill-1: rgb(255 178 142);\n  --color-fill-2: rgb(255 214 132);\n  --color-fill-3: rgb(246 172 172);\n  --color-fill-4: rgb(198 216 152);\n  --color-button: rgb(204 80 48);\n  --color-button-text: rgb(255 250 244);\n  --color-button-hover-text: rgb(255 255 255);\n  --color-button-secondary: rgb(255 252 246);\n  --color-button-secondary-text: rgb(150 54 28);\n  --color-input: rgb(255 240 227);\n  --color-input-text: rgb(84 52 44);\n  --color-input-border: rgb(240 206 184);\n  --color-disabled: rgb(244 230 220);\n  --color-disabled-text: rgb(176 150 140);\n  --color-danger: rgb(184 36 48);\n  --color-danger-surface: rgb(255 224 222);\n  --color-success: rgb(72 140 70);\n  --color-warning: rgb(204 126 0);\n  --color-notice: rgb(236 244 220);\n  --color-notice-text: rgb(58 80 30);\n  --color-focus: rgb(150 54 28);\n  --color-shadow: rgb(190 100 60 / 0.3);\n  --color-overlay: rgb(72 32 24 / 0.38);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Public Sans\", \"Atkinson Hyperlegible\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: Rubik, \"Varela Round\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-ui: Rubik, \"Varela Round\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: \"JetBrains Mono\", \"Fira Code\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 15px;\n  --text-large: 19px;\n  --text-display: 56px;\n  --text-h1: 36px;\n  --text-h2: 25px;\n  --text-h3: 18px;\n  --line-body: 1.65;\n  --line-heading: 1.2;\n  --line-display: 1.1;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 0;\n  --border-width-strong: 4px;\n  --border-style: solid;\n  --radius-control: 20px;\n  --radius-panel: 28px;\n  --radius-pill: 40px;\n  --radius-page: 36px;\n  --shadow-panel: 10px 12px 24px var(--color-shadow), inset -8px -8px 16px color-mix(in srgb, black 14%, transparent), inset 8px 8px 14px color-mix(in srgb, white 70%, transparent);\n  --shadow-control: 6px 7px 14px var(--color-shadow), inset -5px -6px 10px color-mix(in srgb, black 18%, transparent), inset 5px 5px 8px color-mix(in srgb, white 60%, transparent);\n  --shadow-control-hover: 9px 11px 20px var(--color-shadow), inset -5px -6px 10px color-mix(in srgb, black 18%, transparent), inset 5px 5px 8px color-mix(in srgb, white 72%, transparent);\n  --shadow-control-pressed: inset 5px 6px 10px color-mix(in srgb, black 20%, transparent), inset -4px -4px 8px color-mix(in srgb, white 55%, transparent);\n  --shadow-dialog: 18px 22px 44px var(--color-shadow), inset -10px -10px 20px color-mix(in srgb, black 12%, transparent), inset 10px 10px 18px color-mix(in srgb, white 80%, transparent);\n  --shadow-text: 0 2px 0 color-mix(in srgb, white 35%, transparent);\n  --fill-page: radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--color-fill-3) 70%, transparent) 0, color-mix(in srgb, var(--color-fill-3) 70%, transparent) 12%, transparent 12.2%), radial-gradient(circle at 4% 34%, color-mix(in srgb, var(--color-fill-2) 45%, transparent) 0, color-mix(in srgb, var(--color-fill-2) 45%, transparent) 9%, transparent 9.2%), linear-gradient(180deg, var(--color-page) 0%, var(--color-page) 70%, color-mix(in srgb, var(--color-fill-1) 45%, var(--color-page)) 100%);\n  --fill-bar: linear-gradient(160deg, color-mix(in srgb, var(--color-bar) 86%, white), var(--color-bar) 60%);\n  --fill-bar-alt: linear-gradient(160deg, color-mix(in srgb, var(--color-bar-alt) 80%, white), var(--color-bar-alt) 60%);\n  --fill-inverse: linear-gradient(160deg, color-mix(in srgb, var(--color-inverse) 86%, white), var(--color-inverse) 60%);\n  --fill-accent: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 70%, white), var(--color-accent) 60%), var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(160deg, color-mix(in srgb, var(--color-button) 76%, white), var(--color-button) 60%), var(--color-button);\n  --fill-button-hover: linear-gradient(160deg, color-mix(in srgb, var(--color-button) 62%, white), var(--color-button) 70%), var(--color-button);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 4px solid var(--color-focus);\n  --transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}