{
  "id": "v1-cl-4546",
  "long_id": "v1.claymorphism.app.s04.p05.t04.u06",
  "name": "Claymorphism home panel",
  "era": {
    "slug": "claymorphism",
    "code": "cl",
    "name": "Claymorphism",
    "years": [
      2021,
      2025
    ],
    "description": "Soft 3D of 2021 to 2025: thick rounded shapes like modelling clay, pastel fills with a light inner glow on top and a dark inner shadow below, big floating drop shadows, round friendly type and playful blobs."
  },
  "archetype": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "Claymorphism is the soft 3D look of 2021 to 2025: thick, very round shapes that seem modelled from coloured clay, with a light inner glow along the upper edge, a darker inner shadow along the lower edge and one large soft shadow under them. Around 2022 it was the look of smart-home, music and car control panels, usually at night: deep coloured clay in which fat toggles, dials and sliders sit like toys. This pack is such a panel for a house: a capsule of round keys at the left, a board of cards of mixed widths, device cards in four warm clays with a fat switch each, a temperature dial and a bar chart of pressed wells, set in a geometric display face over a plain sans.",
  "url": "https://chrono.skin/s/v1-cl-4546",
  "preview_url": "https://chrono.skin/s/v1-cl-4546/specimen.html",
  "files": {
    "STYLE.md": "# Claymorphism home panel\n\n## Summary\n\nClaymorphism is the soft 3D look of 2021 to 2025: thick, very round shapes that seem modelled from coloured clay, with a light inner glow along the upper edge, a darker inner shadow along the lower edge and one large soft shadow under them. Around 2022 it was the look of smart-home, music and car control panels, usually at night: deep coloured clay in which fat toggles, dials and sliders sit like toys. This pack is such a panel for a house: a capsule of round keys at the left, a board of cards of mixed widths, device cards in four warm clays with a fat switch each, a temperature dial and a bar chart of pressed wells, set in a geometric display face over a plain sans.\n\n## Layout\n\n- The working column is `--size-page` (1200px) wide. To its left stands the rail, `--size-rail` (92px) wide and `--space-5` (22px) away; rail and column together are centred in the window. The layout is fluid below that width.\n- Navigation: `.ds-nav` is a strip on the bare page across the top (brand, the house as a `.ds-menu`, at the right a bell key with a `.ds-tooltip` and the `.ds-avatar` of the person) and, hanging under it at the left, `.ds-nav__rail`: one tall clay capsule of five round keys, each with its label under it. The key of the current view is in the accent clay.\n- Home page: `.ds-bento` is a board of twelve columns with `--space-5` gaps. A child spans all twelve unless it carries `.ds-bento__3`, `__4`, `__5` or `__7`; the cards of a row are equally tall. The rows are: the hero (7) beside the climate panel with the dial (5); the three `.ds-stat` tiles; a `.ds-page__title`; the `.ds-grid` of four device cards; the chart panel (5), the scenes carousel (4) and the people at home (3).\n- Inner pages have no hero. `--space-6` (30px) under the strip come the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1`, one lead line, the action at the right) on the bare page. Below them a `.ds-page__stack`: a `.ds-page__tools` row with the `.ds-tabs` at the left and a `.ds-switch` at the right, then `.ds-page__split`, a working column with a `--size-aside` (360px) column at the right (devices and sliders beside the room's air and an empty state; the table beside the budget; the form beside notices and the dialog). The help page uses `.ds-page__split--side`: a `--size-side` (256px) sidebar at the left, the text panel and the accordion at the right. Keep the two columns about equally long.\n- Views. The specimen is one site with five views, each `<section class=\"ds-view\" id=\"...\">` inside `.ds-page__inner`; the strip, the rail and the footer stand outside them. `home` is the board, `rooms` one room, `energy` the week's use, `routines` the form for a routine, `help` the help text. One `:has()` rule per view colours the key of the current view.\n- Spacing scale: `--space-1` 4px (key to its label, between title and meta), `--space-2` 8px (label to control, between chart wells), `--space-3` 12px (icon to text, between list bars and between buttons), `--space-4` 16px (between rail keys, inside a row), `--space-5` 22px (card padding, every gap of the board), `--space-6` 30px (hero padding, under the strip, dialog padding), `--space-7` 44px (above the footer), `--space-8` 60px (not used on the board; the largest step for a new section break).\n- `--size-rule` (2px) is the weight of the soft rules between table rows.\n- Below 1180px the spans of 3 and 4 become half the board and those of 5 and 7 the whole, and the grid goes to two columns. Below 960px the rail lies down as a row of keys under the strip and the splits stack. Below 560px everything is one column, the hero stacks with its art under the text, the person's name is dropped from the strip, tabs fill the width and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways.\n- On a phone (560px and below) `.ds-nav__rail` is a floating dock: a capsule fixed `--space-3` above the bottom edge of the window, `--space-4` from each side, with a pill radius, holding the row of keys of `.ds-nav__list`. The `.ds-nav__home` menu takes a full row under the brand and its list opens as a full row; the person's name in `.ds-nav__actions` is not shown. The current key stays pressed in.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-heading` is a geometric display face (Sora, then Space Grotesk, Trebuchet MS) for titles, figures and the brand; `--font-body` and `--font-ui` are a plain sans (Manrope, then the system face). `--font-mono` is for code only.\n- Sizes: `--text-base` 16px, `--text-ui` 15px for controls, tables and notices, `--text-small` 13px for meta text, labels, badges and the labels of the rail, `--text-large` 18px for lead text and large buttons, `--text-h3` 18px, `--text-h2` 24px, `--text-h1` 34px for the hero and page titles, `--text-display` 54px for the figure on the dial only.\n- Weights: 400 body, 600 headings and controls, 700 bold. Line height 1.5 for body, 1.3 for headings, 1.15 for the dial.\n- The era's conventions for which text token sits on which fill are kept:\n  - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours stand only on the page, on `--color-surface`, `--color-surface-alt` and `--color-surface-strong`. The strip is on the bare page, so the brand there takes `--color-heading`.\n  - `--color-accent-text` is the ink for the accent and for all four `--color-fill-*` clays (device cards, stat icons, avatars, the current key). Meta text on a fill is the same ink at opacity 0.8.\n  - `--color-bar-text` on `--fill-bar` (the rail), `--color-bar-alt-text` on `--fill-bar-alt` (the footer strip, a scene slide, table head), `--color-inverse-text` on `--fill-inverse` (tooltips, code blocks), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary buttons, round keys, icon balls, switch and slider thumbs, the house key), `--color-input-text` on `--fill-input` (controls, the tab track, the empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`.\n  - Status colours never carry text: a status badge is the surface tinted with the status colour, a dot of the full colour and `--color-text`.\n- The clay comes from the surface part: every shadow token holds a drop shadow in `--color-shadow` and inset shadows mixed from white and black (here a thin bright rim and a soft glow above, a deep shade below), so the same tokens shape a dark card and a bright one. `--shadow-control-pressed` has only insets, reversed: it is a dent. Tracks, wells, the hero's tray and the empty state are dents in `--fill-input`.\n- Coloured shapes (device cards, the lamp's shade) 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- A switch on a coloured card fills with `--fill-inverse` when on, not with the accent, because the accent may equal the card's fill.\n- One-off values with no token: circles use `border-radius: 50%`, stat icon tiles 34%, the lamp's shade and the speaker their own percentages; a list bar, a notice and an accordion bar take the smaller of `--radius-panel` and `--radius-control`; placeholders are `--color-input-text` at opacity 0.55.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints `--fill-page` and sets the base type. `.ds-page__inner` is the working column beside the rail, `.ds-page__stack` a vertical stack 22px apart, `.ds-page__split` a working column with an aside (`--side` for a sidebar at the left), `.ds-page__tools` a row with two ends, `.ds-page__title` a small heading on the bare page with a `.ds-page__more` link at its right. `.ds-view` is one screen of the specimen; an application with one document per page does not need it.\n- `.ds-bento`: the home board; `.ds-bento__3`, `__4`, `__5`, `__7` set how many of the twelve columns a card takes.\n- `.ds-brand`: the site's mark and name in the strip: `.ds-brand__mark` is a clay tile `--size-brand` (44px) dressed like the primary button, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own and keep the tile.\n- `.ds-nav`: the strip and the rail. `.ds-nav__home` is the key that names the house (the toggle of a `.ds-menu`), `.ds-nav__actions` the right end, `.ds-nav__rail` the capsule, `.ds-nav__list` its keys, `.ds-nav__link` one item (a round `.ds-nav__key` over its label; `is-current` puts the key in the accent, `is-hover` lifts it).\n- `.ds-key`: a round clay key with one icon: the bell, the dial's minus and plus. `is-hover` lifts it, `is-active` presses it.\n- `.ds-menu`: a `<details>` drop-down: `.ds-menu__toggle` on the summary, `.ds-menu__list` the clay card under it, `.ds-menu__link` with an optional `.ds-menu__note`. `--end` aligns it right, `--up` opens it upwards.\n- `.ds-hero`: the greeting on one clay card: `.ds-hero__text` with a badge, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions`; `.ds-hero__art` is a pressed tray holding devices.\n- `.ds-device`: a device drawn in clay, decorative. Plain it is a lamp built from `.ds-device__shade`, `.ds-device__stem` and `.ds-device__foot`; `.ds-device--speaker` is a speaker with two pressed cones. `.ds-clay` (ball, `--cube`, `--pill`, `--ring`, sizes and fills `--1` to `--4`) is there for further objects.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, `.ds-page-header__actions` at the right with at most one primary button.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for an inverted code block.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for titles and table links; `.ds-link__sample` lays out a row of links.\n- `.ds-button`: a clay key 46px high. `is-hover` lifts it, `is-active` squashes it. `.ds-button--secondary` is the same key in the secondary clay, `.ds-button--danger` the destructive action, `.ds-button--large` (58px) 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. `.ds-form__check` is a label row with a `.ds-form__checkbox`. `is-error` rings the control in `--color-danger` and is followed by `.ds-form__error`; `.ds-form__hint` is help text, `.ds-form__actions` holds the buttons, `.ds-form__row` puts two fields side by side.\n- `.ds-switch`: the fat clay toggle over a checkbox, the panel's main control: `.ds-switch__input`, `.ds-switch__track` (a dent that fills when on) with a clay ball as thumb, `.ds-switch__label` and `.ds-switch__hint`; `--end` puts the track at the right. Without a visible label give the input an `aria-label`.\n- `.ds-table`: one clay sheet with a head in `--color-bar-alt` and rows divided by a soft rule. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `.ds-table__strong` a row title, `.ds-table__opt` a column dropped on a phone, `is-hover` tints a row.\n- `.ds-list`: devices as separate clay bars: `.ds-list__item` holds a `.ds-list__icon` ball, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`), a status badge and a switch; `.ds-list__aside` is a figure at the end.\n- `.ds-panel`: the basic clay card: `.ds-panel__title`, `.ds-panel__body` (a column with 16px gaps), `.ds-panel__note` for small muted text, `.ds-panel__line` for a row with two ends. `.ds-panel--accent` is the card in the accent clay.\n- `.ds-stat`: the row of three; each `.ds-stat__item` is a chunky tile with a `.ds-stat__icon` (a clay tile in a fill, `--2` and `--3` pick the others), a `.ds-stat__label` and a `.ds-stat__value` with an optional `.ds-stat__meta`.\n- `.ds-grid`: four device cards. `.ds-grid__cell` with `--1` to `--4` takes a `--color-fill-*` clay and its own coloured drop shadow; inside, a `.ds-grid__icon` ball, `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__foot` with the state and the switch.\n- `.ds-chart`: a bar chart from CSS: each `.ds-chart__col` is a pressed `.ds-chart__well` with a puffy `.ds-chart__bar` standing in it (height by `--30`, `--45`, `--60`, `--75`, `--90`) and its label; `is-current` puts a bar in the button colour.\n- `.ds-dial`: a large `.ds-progress--ring` whose face shows a figure at the display size with a `.ds-dial__unit`, a `.ds-key` at either side.\n- `.ds-tabs`: a dented track of `.ds-tabs__tab` pills; `is-current` is a raised pill in the accent. For switching what a page shows, not for site navigation.\n- `.ds-badge`: a pill in the accent. `.ds-badge--quiet` is neutral; `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted pills with a status dot.\n- `.ds-sidebar`: a clay card of topics: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link`, dented when `is-current`.\n- `.ds-notice`: a raised bar in `--color-notice` with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` is the error. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: clay keys, `.ds-pagination__link`; the current page is `is-current`, in the accent.\n- `.ds-breadcrumb`: small bold trail above the page header: `.ds-breadcrumb__item`, `.ds-breadcrumb__link`.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box` under the deepest shadow: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dent holding a clay ball `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-tooltip`: wraps a trigger; `.ds-tooltip__tip` is an inverted pill shown on hover or focus (`is-open` shows it statically). `--below` opens it under the trigger, for keys at the top of the window.\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`. `.ds-progress--slider` puts a clay ball at the end of the bar: a slider shown at a fixed value.\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-scene` with `.ds-scene__title` and `.ds-scene__text` is the scene block used as a slide.\n- `.ds-footer`: one slim clay strip in `--fill-bar-alt` at the end of the working column: `.ds-footer__inner` holds the brand, `.ds-footer__text` and `.ds-footer__links` with `.ds-footer__link`.\n\n## Never\n\n- `block-gap <= 44px`: cards sit 22px apart; 44px above the footer is the largest gap.\n- `content-width <= 1200px`: the working column is capped.\n- `font-size <= 54px`: the figure on the dial is the largest text.\n- `font-size >= 13px`: meta text, badges and the labels of the rail are the smallest text.\n- `font-weight >= 400`: nothing is light.\n- `font-families <= 3`: one display face, one sans and one monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `uppercase-text <= 5%`: nothing is set in capitals.\n- `box-shadow != none`: nothing raised is flat; a block without its inner glow and drop shadow is not clay.\n- `border-width <= 3px`: clay has no outlines; the only lines are 2px rules and the 3px focus or error ring.\n- `box-shadow-blur <= 80px`: the deepest shadow, under the dialog and the band, blurs over 80px.\n- `text-shadow = none`: the text is flat; only shapes are modelled.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first whether it is raised or dented: a container starts from `.ds-panel` (fill, radius and `--shadow-panel` together), something pressed or filled in starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`), something the user presses starts from `.ds-button--secondary` or `.ds-key`. A new card on the board takes a `.ds-bento__*` span so that its row stays full. For a coloured card take a `--color-fill-*` background, `--color-accent-text` for everything on it, and add the coloured drop shadow as `.ds-grid__cell` does. A new device drawing is built like `.ds-device`: clay parts in fills and in the secondary clay, pressed parts in `--fill-input`, all with the shadow tokens. Never draw a shadow in a raw colour and never flatten a shape. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to.\n",
    "components.css": "/* Layout tokens (structure part) */\n:root {\n  --size-page: 1200px;\n  --size-rail: 92px;\n  --size-aside: 360px;\n  --size-side: 256px;\n  --size-dialog: 420px;\n  --size-control: 46px;\n  --size-control-large: 58px;\n  --size-icon: 20px;\n  --size-dot: 10px;\n  --size-thumb: 30px;\n  --size-track: 18px;\n  --size-check: 26px;\n  --size-avatar: 44px;\n  --size-ring: 100px;\n  --size-dial: 196px;\n  --size-chart: 150px;\n  --size-rule: 2px;\n  --size-brand: 44px;\n  --size-clay: 104px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 22px;\n  --space-6: 30px;\n  --space-7: 44px;\n  --space-8: 60px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  min-height: 100vh;\n  overflow-x: clip;\n  background: var(--fill-page);\n  background-color: var(--color-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* clay objects: a sphere, a ring, a cube, a pill and a face, shaped by the shadow tokens */\n.ds-clay {\n  position: relative;\n  display: block;\n  flex: none;\n  width: var(--size-clay);\n  height: var(--size-clay);\n  background-color: var(--color-fill-1);\n  border-radius: 50%;\n  box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-3)) color-mix(in srgb, var(--color-fill-1) 75%, transparent);\n}\n\n/* brand: the mark on a small clay key in the primary button's dress, then the name */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-brand);\n  height: var(--size-brand);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  width: 58%;\n  height: 58%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n  margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n  max-width: 60ch;\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n  max-width: 72ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-6) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  margin-top: 0;\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  padding-left: var(--space-5);\n}\n.ds-prose li + li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-2);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  white-space: nowrap;\n}\n.ds-prose__lead {\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n.ds-prose__code {\n  margin: 0 0 var(--space-4);\n  padding: var(--space-4) var(--space-5);\n  overflow: auto;\n  background-color: var(--color-inverse);\n  background: var(--fill-inverse);\n  border-radius: min(var(--radius-control), var(--radius-panel));\n  box-shadow: var(--shadow-control);\n  color: var(--color-inverse-text);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  border-radius: var(--radius-pill);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: fat clay keys that lift on hover and squash when pressed */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-5);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n  transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-button:hover::after,\n.ds-button.is-hover::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  right: 0;\n  left: 0;\n  height: calc(var(--space-1) * 0.5);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  transform: scale(0.97, 0.93);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-color: var(--color-border);\n  color: var(--color-button-secondary-text);\n  text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n  color: var(--color-danger);\n  text-shadow: none;\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-size: var(--text-large);\n}\n.ds-button--wide {\n  width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  transform: none;\n  cursor: default;\n}\n.ds-button__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n/* form: controls are wells pressed into the clay */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-form__label {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-5);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(2 * var(--size-control) + var(--space-4));\n  padding: var(--space-4) var(--space-5);\n  border-radius: min(var(--radius-control), var(--radius-panel));\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-input-text);\n  opacity: 0.55;\n}\n.ds-form__select {\n  padding-right: var(--space-7);\n  appearance: none;\n  -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n  position: relative;\n  display: block;\n}\n.ds-form__chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--space-4);\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-top: calc(var(--size-icon) / -2);\n  color: var(--color-input-text);\n  pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n  box-shadow: var(--shadow-control-pressed), 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n  padding: 0 var(--space-2);\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  padding: 0 var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n  position: relative;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: 34%;\n  box-shadow: var(--shadow-control);\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n}\n.ds-form__checkbox:checked::after,\n.ds-form__checkbox.is-checked::after {\n  content: \"\";\n  position: absolute;\n  top: 16%;\n  left: 34%;\n  width: 30%;\n  height: 52%;\n  border: var(--border-width-strong) var(--border-style) var(--color-accent-text);\n  border-top-color: transparent;\n  border-left-color: transparent;\n  transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  margin-top: var(--space-2);\n}\n\n/* table: one clay sheet with a coloured head, rows divided by a soft rule */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-4) var(--space-5);\n  text-align: left;\n  vertical-align: middle;\n}\n.ds-table th {\n  background: var(--color-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table th:first-child {\n  border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n  border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n  border-top: var(--size-rule) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n  border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n  border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n  color: var(--color-text-muted);\n}\n.ds-table .ds-table__strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n\n/* list: every item is its own clay bar */\n.ds-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: min(var(--radius-panel), var(--radius-control));\n  box-shadow: var(--shadow-control);\n  color: var(--color-text);\n}\n.ds-list__body {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-list__aside {\n  flex: none;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  font-variant-numeric: tabular-nums;\n}\n\n/* panel: the basic clay card */\n.ds-panel {\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-5) var(--space-5) 0;\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n  padding-top: var(--space-3);\n}\n.ds-panel__body p {\n  margin: 0;\n}\n.ds-panel__note {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-panel__line {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n/* a panel in the accent clay: all of its text takes the ink of the fills */\n.ds-panel--accent {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-panel--accent .ds-panel__title,\n.ds-panel--accent .ds-panel__note {\n  color: var(--color-accent-text);\n}\n\n/* stats: figures in the heading face on clay tiles */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: 0;\n}\n.ds-stat__item {\n  padding: var(--space-4) var(--space-5);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-stat__label {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-stat__value {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 var(--space-2);\n  margin: var(--space-1) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__meta {\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n}\n\n/* tabs: a pressed track, the current tab a clay pill in the accent */\n.ds-tabs {\n  display: inline-flex;\n  align-self: flex-start;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-5);\n  border-radius: var(--radius-pill);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  padding: 0 var(--space-3);\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n/* status badges: the surface tinted with the status colour, a dot of the full colour in front */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  gap: var(--space-2);\n  color: var(--color-text);\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--size-dot);\n  height: var(--size-dot);\n  flex: none;\n  border-radius: 50%;\n}\n.ds-badge--success::before {\n  background: var(--color-success);\n}\n.ds-badge--warning::before {\n  background: var(--color-warning);\n}\n.ds-badge--danger::before {\n  background: var(--color-danger);\n}\n\n/* notice: a raised clay bar in the notice colour */\n.ds-notice {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-notice);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: min(var(--radius-panel), var(--radius-control));\n  box-shadow: var(--shadow-control);\n  color: var(--color-notice-text);\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n  color: var(--color-danger);\n}\n.ds-notice__icon {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  flex: none;\n  margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n\n/* pagination: round clay keys, the current one in the accent */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  min-height: var(--size-control);\n  padding: 0 var(--space-4);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-color: transparent;\n  color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin: 0 var(--space-2);\n  opacity: 0.6;\n}\n.ds-breadcrumb__link {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-7) var(--space-5);\n  background: var(--color-overlay);\n  border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  padding: var(--space-6);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-dialog);\n  color: var(--color-text);\n}\n.ds-dialog__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n  color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  margin-top: var(--space-6);\n}\n\n/* empty state: a pressed well with a clay ball in it */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--space-6) var(--space-5);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  margin-bottom: var(--space-4);\n  padding: var(--space-3);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 40ch;\n  margin: var(--space-2) 0 var(--space-5);\n  font-size: var(--text-ui);\n}\n\n/* menu: a drop-down clay card under a navigation item */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  transition: var(--transition);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n  transform: rotate(180deg);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-3));\n  left: 0;\n  z-index: 8;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-width: 24ch;\n  margin: 0;\n  padding: var(--space-3);\n  list-style: none;\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: min(var(--radius-panel), var(--radius-control));\n  box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-pill);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  background: var(--color-surface-alt);\n  color: var(--color-link-hover);\n}\n.ds-menu__note {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* tooltip: a small inverted pill over its trigger, on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 50%;\n  z-index: 9;\n  padding: var(--space-1) var(--space-3);\n  transform: translateX(-50%);\n  background-color: var(--color-inverse);\n  background: var(--fill-inverse);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control);\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-transform: none;\n  white-space: nowrap;\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* switch: a fat clay toggle over a checkbox */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: calc(2 * var(--size-thumb) + 3 * var(--space-1));\n  height: calc(var(--size-thumb) + 2 * var(--space-1));\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n  transition: var(--transition);\n}\n.ds-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: var(--space-1);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  margin-top: calc(var(--size-thumb) / -2);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n  left: auto;\n  right: var(--space-1);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  min-width: 0;\n}\n.ds-switch__hint {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* progress: a thick pressed track with a puffy bar, or a ring around a clay ball */\n.ds-progress {\n  display: block;\n  height: var(--size-track);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control);\n}\n.ds-progress--25 .ds-progress__bar {\n  width: 25%;\n}\n.ds-progress--40 .ds-progress__bar {\n  width: 40%;\n}\n.ds-progress--60 .ds-progress__bar {\n  width: 60%;\n}\n.ds-progress--75 .ds-progress__bar {\n  width: 75%;\n}\n.ds-progress--90 .ds-progress__bar {\n  width: 90%;\n}\n.ds-progress--ring {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-ring);\n  height: var(--size-ring);\n  background: conic-gradient(var(--color-accent) 50%, var(--color-surface-strong) 0);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n}\n.ds-progress--ring.ds-progress--25 {\n  background: conic-gradient(var(--color-accent) 25%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--40 {\n  background: conic-gradient(var(--color-accent) 40%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--60 {\n  background: conic-gradient(var(--color-accent) 60%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--75 {\n  background: conic-gradient(var(--color-accent) 75%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--90 {\n  background: conic-gradient(var(--color-accent) 90%, var(--color-surface-strong) 0);\n}\n.ds-progress__face {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 66%;\n  height: 66%;\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__legend {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n}\n\n/* avatar: initials on a clay ball, alone or beside a name */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-avatar__pic {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n}\n.ds-avatar--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--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@media (max-width: 560px) {\n  .ds-pagination {\n    gap: var(--space-2);\n  }\n  .ds-pagination__link {\n    min-width: calc(var(--size-control) - var(--space-2));\n    min-height: calc(var(--size-control) - var(--space-2));\n    padding: 0 var(--space-3);\n  }\n}\n\n/* the frame: a strip across the top, a capsule of round keys at the left, the working column beside it */\n.ds-page__inner {\n  width: 100%;\n  max-width: calc(var(--size-page) + var(--size-rail) + 3 * var(--space-5));\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-5) 0 calc(var(--size-rail) + 2 * var(--space-5));\n}\n.ds-page__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n/* a working column with an aside at the right, or a side column at the left */\n.ds-page__split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-aside);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-page__split--side {\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n}\n/* a small heading on the bare page, with a link at its right end */\n.ds-page__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: var(--space-2) var(--space-2) 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__more {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n/* the home board: twelve columns, every card takes a span and the cards of a row are equally tall */\n.ds-bento {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-bento > * {\n  grid-column: span 12;\n  min-width: 0;\n}\n.ds-bento .ds-bento__3 {\n  grid-column: span 3;\n}\n.ds-bento .ds-bento__4 {\n  grid-column: span 4;\n}\n.ds-bento .ds-bento__5 {\n  grid-column: span 5;\n}\n.ds-bento .ds-bento__7 {\n  grid-column: span 7;\n}\n.ds-bento .ds-panel__body {\n  min-width: 0;\n}\n\n/* nav: the strip (brand, house, account) and under it the capsule of round keys */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  max-width: calc(var(--size-page) + var(--size-rail) + 3 * var(--space-5));\n  margin: 0 auto;\n  padding: var(--space-5) var(--space-5) 0;\n  color: var(--color-heading);\n}\n.ds-nav__home {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\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-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-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-nav__home:hover,\n.ds-nav__home.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-menu[open] .ds-nav__home {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin-left: auto;\n  color: var(--color-text);\n}\n.ds-nav__rail {\n  position: absolute;\n  top: calc(100% + var(--space-6));\n  left: var(--space-5);\n  width: var(--size-rail);\n  padding: var(--space-4) 0;\n  background-color: var(--color-bar);\n  background: var(--fill-bar);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-text);\n}\n.ds-nav__list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\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}\n.ds-nav__key {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  transition: var(--transition);\n}\n.ds-nav__key svg {\n  width: 42%;\n  height: 42%;\n}\n.ds-nav__link:hover .ds-nav__key,\n.ds-nav__link.is-hover .ds-nav__key {\n  box-shadow: var(--shadow-control-hover);\n  transform: translateY(calc(var(--space-1) * -0.5));\n}\n.ds-nav__link.is-current .ds-nav__key,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] .ds-nav__key,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] .ds-nav__key,\n.ds-page:has(#rooms:target) .ds-nav__link[href=\"#rooms\"] .ds-nav__key,\n.ds-page:has(#energy:target) .ds-nav__link[href=\"#energy\"] .ds-nav__key,\n.ds-page:has(#routines:target) .ds-nav__link[href=\"#routines\"] .ds-nav__key,\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] .ds-nav__key {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n  border-radius: var(--radius-control);\n}\n\n/* a round clay key with one icon: the bell, the dial's minus and plus */\n.ds-key {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\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-key svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-key:hover,\n.ds-key.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-key:active,\n.ds-key.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  transform: scale(0.94);\n}\n.ds-key:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-tooltip--below .ds-tooltip__tip {\n  top: calc(100% + var(--space-2));\n  bottom: auto;\n}\n\n/* hero: the greeting on one clay card, the lamp and the speaker standing at its right */\n.ds-hero {\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  gap: var(--space-5);\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);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-hero__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-width: 0;\n}\n.ds-hero__title {\n  margin: var(--space-3) 0 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-hero__lead {\n  max-width: 38ch;\n  margin: var(--space-2) 0 var(--space-5);\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-3);\n  margin-top: auto;\n}\n.ds-hero__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-3);\n  flex: none;\n  padding: var(--space-4) var(--space-4) var(--space-5);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n}\n\n/* devices drawn in clay: a lamp (shade, stem, foot) and a speaker with two cones */\n.ds-device {\n  position: relative;\n  display: block;\n  flex: none;\n  width: var(--size-clay);\n  height: calc(var(--size-clay) * 1.5);\n}\n.ds-device__shade {\n  position: absolute;\n  top: 0;\n  left: 6%;\n  width: 88%;\n  height: 50%;\n  background-color: var(--color-fill-3);\n  border-radius: 50% 50% 16% 16% / 78% 78% 14% 14%;\n  box-shadow: var(--shadow-panel), 0 var(--space-4) var(--space-7) color-mix(in srgb, var(--color-fill-3) 60%, transparent);\n}\n.ds-device__stem {\n  position: absolute;\n  top: 48%;\n  left: 43%;\n  width: 14%;\n  height: 42%;\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}\n.ds-device__foot {\n  position: absolute;\n  bottom: 0;\n  left: 18%;\n  width: 64%;\n  height: 14%;\n  background-color: var(--color-fill-1);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control);\n}\n.ds-device--speaker {\n  width: calc(var(--size-clay) * 0.72);\n  height: calc(var(--size-clay) * 1.16);\n  background-color: var(--color-fill-4);\n  border-radius: 30% / 20%;\n  box-shadow: var(--shadow-panel);\n}\n.ds-device--speaker::before,\n.ds-device--speaker::after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  aspect-ratio: 1;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-pressed);\n  transform: translateX(-50%);\n}\n.ds-device--speaker::before {\n  top: 12%;\n  width: 26%;\n}\n.ds-device--speaker::after {\n  bottom: 12%;\n  width: 56%;\n}\n\n/* the dial: a thick ring around a clay face with the figure at display size, a key at either side */\n.ds-dial {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n}\n.ds-dial .ds-progress--ring {\n  width: var(--size-dial);\n  height: var(--size-dial);\n  box-shadow: var(--shadow-panel);\n}\n.ds-dial .ds-progress__face {\n  width: 72%;\n  height: 72%;\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}\n.ds-dial__unit {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: 0;\n}\n\n/* a slider: the progress track with a clay ball at the end of its bar */\n.ds-progress--slider {\n  margin: calc((var(--size-thumb) - var(--size-track)) / 2) 0;\n}\n.ds-progress--slider .ds-progress__bar {\n  position: relative;\n}\n.ds-progress--slider .ds-progress__bar::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: calc(var(--size-thumb) / -2);\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}\n\n/* stats: three chunky tiles, a clay ball with an icon in front of each figure */\n.ds-stat__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-5);\n}\n.ds-stat__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  background-color: var(--color-fill-1);\n  border-radius: 34%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n}\n.ds-stat__icon--2 {\n  background-color: var(--color-fill-2);\n}\n.ds-stat__icon--3 {\n  background-color: var(--color-fill-3);\n}\n.ds-stat__icon svg {\n  width: 46%;\n  height: 46%;\n}\n.ds-stat__value {\n  margin: 0;\n}\n\n/* grid: one clay card for each device, its fat switch at the foot */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  padding: var(--space-5);\n  background-color: var(--color-fill-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-1) 70%, transparent);\n  color: var(--color-accent-text);\n}\n.ds-grid__cell--1 {\n  background-color: var(--color-fill-1);\n}\n.ds-grid__cell--2 {\n  background-color: var(--color-fill-2);\n  box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-2) 70%, transparent);\n}\n.ds-grid__cell--3 {\n  background-color: var(--color-fill-3);\n  box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-3) 70%, transparent);\n}\n.ds-grid__cell--4 {\n  background-color: var(--color-fill-4);\n  box-shadow: var(--shadow-panel), 0 var(--space-5) var(--space-7) calc(-1 * var(--space-4)) color-mix(in srgb, var(--color-fill-4) 70%, transparent);\n}\n.ds-grid__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  margin-bottom: 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}\n.ds-grid__icon svg {\n  width: 44%;\n  height: 44%;\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n.ds-grid__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: auto;\n  padding-top: var(--space-5);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n/* on a coloured card the switch is filled with the inverse when on, so that it shows on every fill */\n.ds-grid__cell .ds-switch {\n  color: var(--color-accent-text);\n}\n.ds-grid__cell .ds-switch__input:checked + .ds-switch__track,\n.ds-grid__cell .ds-switch.is-on .ds-switch__track {\n  background-color: var(--color-inverse);\n  background: var(--fill-inverse);\n}\n\n/* the chart: seven pressed wells, a puffy bar standing in each */\n.ds-chart {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-chart__col {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\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-chart__well {\n  display: flex;\n  align-items: flex-end;\n  width: 100%;\n  max-width: var(--size-control);\n  height: var(--size-chart);\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-chart__bar {\n  display: block;\n  width: 100%;\n  height: 50%;\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-chart__bar--30 {\n  height: 30%;\n}\n.ds-chart__bar--45 {\n  height: 45%;\n}\n.ds-chart__bar--60 {\n  height: 60%;\n}\n.ds-chart__bar--75 {\n  height: 75%;\n}\n.ds-chart__bar--90 {\n  height: 90%;\n}\n.ds-chart__bar.is-current {\n  background-color: var(--color-button);\n  background: var(--fill-button);\n}\n\n/* a scene: the slide of the carousel, one block in the secondary bar's clay */\n.ds-scene {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-5);\n  background-color: var(--color-bar-alt);\n  background: var(--fill-bar-alt);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control);\n  color: var(--color-bar-alt-text);\n}\n.ds-scene__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}\n.ds-scene__text {\n  margin: 0 0 var(--space-2);\n  font-size: var(--text-small);\n  opacity: 0.85;\n}\n.ds-carousel__track {\n  margin: calc(var(--space-4) * -1);\n  padding: var(--space-4);\n  scroll-padding: var(--space-4);\n  gap: var(--space-6);\n}\n.ds-carousel__foot {\n  margin-top: auto;\n}\n.ds-bento .ds-carousel {\n  flex: 1;\n}\n\n/* list: a clay ball with the device's icon in front of each row, its switch at the end */\n.ds-list__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\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-list__icon svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-panel .ds-list__item {\n  box-shadow: var(--shadow-control);\n}\n.ds-page__tools {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n\n/* sidebar: a clay card of topics */\n.ds-sidebar {\n  padding: var(--space-5) var(--space-4);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n  margin: 0 var(--space-3) var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-sidebar__list + .ds-sidebar__heading {\n  margin-top: var(--space-5);\n}\n.ds-sidebar__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-radius: min(var(--radius-control), var(--radius-panel));\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n  background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n  background: var(--color-surface-alt);\n  box-shadow: var(--shadow-control-pressed);\n}\n\n/* footer: one slim clay strip at the end of the working column */\n.ds-footer {\n  max-width: calc(var(--size-page) + var(--size-rail) + 3 * var(--space-5));\n  margin: var(--space-7) auto 0;\n  padding: 0 var(--space-5) var(--space-5) calc(var(--size-rail) + 2 * var(--space-5));\n  font-size: var(--text-small);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-5);\n  padding: var(--space-4) var(--space-5);\n  background-color: var(--color-bar-alt);\n  background: var(--fill-bar-alt);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__text {\n  flex: 1;\n  min-width: 24ch;\n  margin: 0;\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline;\n}\n\n@media (max-width: 1180px) {\n  .ds-bento .ds-bento__3,\n  .ds-bento .ds-bento__4 {\n    grid-column: span 6;\n  }\n  .ds-bento .ds-bento__5,\n  .ds-bento .ds-bento__7 {\n    grid-column: span 12;\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n@media (max-width: 960px) {\n  .ds-page__inner,\n  .ds-footer {\n    padding-left: var(--space-5);\n  }\n  .ds-nav {\n    flex-wrap: wrap;\n  }\n  .ds-nav__rail {\n    position: static;\n    order: 9;\n    width: 100%;\n    padding: var(--space-3);\n    border-radius: var(--radius-panel);\n  }\n  .ds-nav__list {\n    flex-direction: row;\n    justify-content: space-around;\n    gap: var(--space-2);\n  }\n  .ds-page__split,\n  .ds-page__split--side {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n@media (max-width: 560px) {\n  .ds-page__inner,\n  .ds-footer,\n  .ds-nav {\n    padding-left: var(--space-4);\n    padding-right: var(--space-4);\n  }\n  .ds-nav__key {\n    width: var(--size-control);\n    height: var(--size-control);\n  }\n  .ds-nav__actions .ds-avatar__text {\n    display: none;\n  }\n  .ds-bento {\n    gap: var(--space-4);\n  }\n  .ds-bento .ds-bento__3,\n  .ds-bento .ds-bento__4 {\n    grid-column: span 12;\n  }\n  .ds-hero {\n    flex-direction: column;\n    padding: var(--space-5);\n    border-radius: var(--radius-panel);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h2);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-hero__art {\n    justify-content: center;\n  }\n  .ds-hero__actions .ds-button {\n    flex: 1 1 auto;\n  }\n  .ds-stat {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-4);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-4);\n  }\n  .ds-grid__cell {\n    border-radius: var(--radius-panel);\n  }\n  .ds-dial {\n    gap: var(--space-3);\n  }\n  .ds-dial .ds-progress--ring {\n    width: calc(var(--size-dial) * 0.84);\n    height: calc(var(--size-dial) * 0.84);\n  }\n  .ds-dial .ds-progress__face {\n    font-size: var(--text-h1);\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-list__item {\n    flex-wrap: wrap;\n  }\n  .ds-list__body {\n    flex: 1 1 60%;\n  }\n  .ds-list__item .ds-switch {\n    margin-left: auto;\n  }\n  .ds-page-header__title {\n    font-size: var(--text-h2);\n  }\n  .ds-page-header__lead {\n    font-size: var(--text-base);\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-4);\n    border-radius: var(--radius-panel);\n  }\n  .ds-dialog__box {\n    padding: var(--space-5);\n    border-radius: var(--radius-panel);\n  }\n  .ds-footer__inner {\n    border-radius: var(--radius-panel);\n  }\n}\n\n/* phone: brand and keys in one row, the house key across the next, the round keys as a dock at the foot */\n@media (max-width: 560px) {\n  .ds-page {\n    padding-bottom: calc(var(--size-control) + 5 * var(--space-4));\n  }\n  .ds-nav > .ds-menu {\n    order: 3;\n    width: 100%;\n  }\n  .ds-nav__home {\n    justify-content: space-between;\n  }\n  .ds-nav > .ds-menu .ds-menu__list {\n    left: 0;\n    right: 0;\n    min-width: 0;\n  }\n  .ds-nav__rail {\n    position: fixed;\n    top: auto;\n    left: var(--space-4);\n    right: var(--space-4);\n    bottom: var(--space-3);\n    z-index: 20;\n    width: auto;\n    padding: var(--space-2) var(--space-3);\n    border-radius: var(--radius-pill);\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: the house in your hand</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  <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  <details class=\"ds-menu\" data-component=\"menu\">\n    <summary class=\"ds-nav__home ds-menu__toggle\">Canal house <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></summary>\n    <ul class=\"ds-menu__list\">\n      <li><a class=\"ds-menu__link\" href=\"#home\">Canal house <span class=\"ds-menu__note\">12 devices</span></a></li>\n      <li><a class=\"ds-menu__link\" href=\"#home\">Garden studio <span class=\"ds-menu__note\">4 devices</span></a></li>\n      <li><a class=\"ds-menu__link\" href=\"#routines\">Add a house</a></li>\n    </ul>\n  </details>\n  <div class=\"ds-nav__actions\">\n    <span class=\"ds-tooltip ds-tooltip--below\" data-component=\"tooltip\"><a class=\"ds-key\" href=\"#routines\" aria-label=\"Alerts\"><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 16v-5a6 6 0 0 1 12 0v5l1.500 2h-15zM10 21h4\"/></svg></a><span class=\"ds-tooltip__tip\" role=\"tooltip\">2 alerts today</span></span>\n    <a class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\" href=\"#help\"><span class=\"ds-avatar__pic\">MS</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Mira Solberg</span><span class=\"ds-avatar__meta\">at home</span></span></a>\n  </div>\n  <nav class=\"ds-nav__rail\" aria-label=\"Sections\">\n    <ul class=\"ds-nav__list\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><span class=\"ds-nav__key\"><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 11 8-7 8 7v8a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1z\"/></svg></span>Home</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#rooms\"><span class=\"ds-nav__key\"><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 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z\"/></svg></span>Rooms</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#energy\"><span class=\"ds-nav__key\"><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=\"M13 3 5 13h6l-1 8 8-10h-6z\"/></svg></span>Energy</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#routines\"><span class=\"ds-nav__key\"><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=\"8\"/><path d=\"M12 8v4l3 2\"/></svg></span>Routines</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#help\"><span class=\"ds-nav__key\"><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=\"8\"/><path d=\"M9.500 9.500a2.500 2.500 0 1 1 3.500 2.300c-.7.4-1 .9-1 1.700M12 16.600v.2\"/></svg></span>Help</a></li>\n    </ul>\n  </nav>\n</header>\n\n<div class=\"ds-page__inner\">\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-bento\">\n\n    <section class=\"ds-hero ds-bento__7\" data-component=\"hero\">\n      <div class=\"ds-hero__text\">\n        <span class=\"ds-badge\">Thursday, 19:40</span>\n        <h1 class=\"ds-hero__title\">Good evening. Four things are on.</h1>\n        <p class=\"ds-hero__lead\">The living room is warm, the porch light came on at dusk and nothing is open that should be shut.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#routines\">Start the evening</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#rooms\">All rooms</a>\n        </div>\n      </div>\n      <div class=\"ds-hero__art\" aria-hidden=\"true\">\n        <span class=\"ds-device\"><span class=\"ds-device__stem\"></span><span class=\"ds-device__foot\"></span><span class=\"ds-device__shade\"></span></span>\n        <span class=\"ds-device ds-device--speaker\"></span>\n      </div>\n    </section>\n\n    <section class=\"ds-panel ds-bento__5\" data-component=\"panel\">\n      <h2 class=\"ds-panel__title\">Living room climate <span class=\"ds-badge ds-badge--success\">Heating</span></h2>\n      <div class=\"ds-panel__body\">\n        <div class=\"ds-dial\">\n          <button class=\"ds-key\" type=\"button\" aria-label=\"Cooler\"><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 12h12\"/></svg></button>\n          <div class=\"ds-progress ds-progress--ring ds-progress--60\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"21\" aria-valuemin=\"15\" aria-valuemax=\"25\" aria-label=\"Target temperature\"><span class=\"ds-progress__face\">21<span class=\"ds-dial__unit\">degrees</span></span></div>\n          <button class=\"ds-key is-hover\" type=\"button\" aria-label=\"Warmer\"><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 6v12M6 12h12\"/></svg></button>\n        </div>\n        <div>\n          <div class=\"ds-progress__legend\"><span>Fan</span><span>40%</span></div>\n          <span class=\"ds-progress ds-progress--slider ds-progress--40\" role=\"slider\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Fan speed\"><span class=\"ds-progress__bar\"></span></span>\n        </div>\n      </div>\n    </section>\n\n    <dl class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__item\">\n        <span class=\"ds-stat__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=\"M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z\"/></svg></span>\n        <div>\n          <dt class=\"ds-stat__label\">Inside now</dt>\n          <dd class=\"ds-stat__value\">20.5 <span class=\"ds-stat__meta\">degrees, 46% humid</span></dd>\n        </div>\n      </div>\n      <div class=\"ds-stat__item\">\n        <span class=\"ds-stat__icon ds-stat__icon--2\"><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=\"M13 3 5 13h6l-1 8 8-10h-6z\"/></svg></span>\n        <div>\n          <dt class=\"ds-stat__label\">Energy today</dt>\n          <dd class=\"ds-stat__value\">6.4 <span class=\"ds-stat__meta\">kWh, a fifth less than Wednesday</span></dd>\n        </div>\n      </div>\n      <div class=\"ds-stat__item\">\n        <span class=\"ds-stat__icon ds-stat__icon--3\"><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 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4\"/></svg></span>\n        <div>\n          <dt class=\"ds-stat__label\">Devices on</dt>\n          <dd class=\"ds-stat__value\">4 <span class=\"ds-stat__meta\">of 12, all reachable</span></dd>\n        </div>\n      </div>\n    </dl>\n\n    <h2 class=\"ds-page__title\">Favourites <a class=\"ds-link ds-page__more\" href=\"#rooms\">All 12 devices</a></h2>\n\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=\"M9 18h6M10 21h4M8 14a6 6 0 1 1 8 0c-.6.6-1 1.200-1 2H9c0-.8-.4-1.400-1-2z\"/></svg></span>\n        <h3 class=\"ds-grid__title\">Ceiling light</h3>\n        <p class=\"ds-grid__text\">Living room · 70% warm</p>\n        <div class=\"ds-grid__foot\"><span>On</span><label class=\"ds-switch\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Ceiling light\"><span class=\"ds-switch__track\"></span></label></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\"><path d=\"M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z\"/></svg></span>\n        <h3 class=\"ds-grid__title\">Radiators</h3>\n        <p class=\"ds-grid__text\">Whole house · to 21 degrees</p>\n        <div class=\"ds-grid__foot\"><span>On</span><label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Radiators\"><span class=\"ds-switch__track\"></span></label></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\"><rect x=\"7\" y=\"3\" width=\"10\" height=\"18\" rx=\"3\"/><circle cx=\"12\" cy=\"14\" r=\"2.500\"/><path d=\"M12 7v.2\"/></svg></span>\n        <h3 class=\"ds-grid__title\">Kitchen speaker</h3>\n        <p class=\"ds-grid__text\">Kitchen · idle since 18:05</p>\n        <div class=\"ds-grid__foot\"><span>Off</span><label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" aria-label=\"Kitchen speaker\"><span class=\"ds-switch__track\"></span></label></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\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"9\" rx=\"2\"/><path d=\"M8 11V8a4 4 0 0 1 8 0v3\"/></svg></span>\n        <h3 class=\"ds-grid__title\">Front door</h3>\n        <p class=\"ds-grid__text\">Hall · locked at 18:52</p>\n        <div class=\"ds-grid__foot\"><span>Locked</span><label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Front door lock\"><span class=\"ds-switch__track\"></span></label></div>\n      </article>\n    </div>\n\n    <section class=\"ds-panel ds-bento__5\">\n      <h2 class=\"ds-panel__title\">This week <span class=\"ds-badge ds-badge--quiet\">38.2 kWh</span></h2>\n      <div class=\"ds-panel__body\">\n        <ol class=\"ds-chart\" aria-label=\"Energy used each day\">\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--60\"></span></span>Fri</li>\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--90\"></span></span>Sat</li>\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--75\"></span></span>Sun</li>\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--45\"></span></span>Mon</li>\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--30\"></span></span>Tue</li>\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--60\"></span></span>Wed</li>\n          <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--45 is-current\"></span></span>Thu</li>\n        </ol>\n        <p class=\"ds-panel__note\">Thursday so far. <a class=\"ds-link\" href=\"#energy\">See every device</a></p>\n      </div>\n    </section>\n\n    <section class=\"ds-panel ds-bento__4\">\n      <h2 class=\"ds-panel__title\">Scenes</h2>\n      <div class=\"ds-panel__body\">\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Scenes\">\n          <div class=\"ds-carousel__track\">\n            <article class=\"ds-carousel__slide ds-scene\">\n              <h3 class=\"ds-scene__title\">Evening</h3>\n              <p class=\"ds-scene__text\">Lamps to 40%, blinds down, radiators to 21 degrees.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#routines\">Run now</a>\n            </article>\n            <article class=\"ds-carousel__slide ds-scene\">\n              <h3 class=\"ds-scene__title\">Film</h3>\n              <p class=\"ds-scene__text\">Ceiling light off, floor lamp to 10%, speaker on.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#routines\">Run now</a>\n            </article>\n            <article class=\"ds-carousel__slide ds-scene\">\n              <h3 class=\"ds-scene__title\">Away</h3>\n              <p class=\"ds-scene__text\">Everything off, door locked, radiators to 16 degrees.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#routines\">Run now</a>\n            </article>\n          </div>\n          <div class=\"ds-carousel__foot\">\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 4 6 8l4 4\"/></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><span class=\"ds-carousel__dot\"></span></div>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 4 4 4-4 4\"/></svg></button>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-panel ds-bento__3\">\n      <h2 class=\"ds-panel__title\">Who is in</h2>\n      <div class=\"ds-panel__body\">\n        <span class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">MS</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Mira</span><span class=\"ds-avatar__meta\">home since 17:30</span></span></span>\n        <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">JS</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Jonas</span><span class=\"ds-avatar__meta\">home since 18:52</span></span></span>\n        <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">LS</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Liv</span><span class=\"ds-avatar__meta\">out, back about 21:00</span></span></span>\n        <a class=\"ds-button ds-button--secondary ds-button--wide\" href=\"#routines\">Invite someone</a>\n      </div>\n    </section>\n\n  </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"rooms\">\n\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Canal house</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#rooms\">Rooms</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">Living room</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\">Living room</h1>\n        <p class=\"ds-page-header__lead\">Five devices, three of them on. 20.5 degrees and settling.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#routines\">Add a device</a>\n      </div>\n    </header>\n\n    <div class=\"ds-page__stack\">\n      <div class=\"ds-page__tools\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#rooms\" aria-current=\"true\">Living room</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#rooms\">Kitchen</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#rooms\">Bedroom</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#rooms\">Hall</a></li>\n        </ul>\n        <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Only what is on</span></label>\n      </div>\n\n      <div class=\"ds-page__split\">\n        <div class=\"ds-page__stack\">\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__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=\"M9 18h6M10 21h4M8 14a6 6 0 1 1 8 0c-.6.6-1 1.200-1 2H9c0-.8-.4-1.400-1-2z\"/></svg></span>\n              <div class=\"ds-list__body\">\n                <a class=\"ds-list__title\" href=\"#rooms\">Ceiling light</a>\n                <span class=\"ds-list__meta\">70% · warm white · on since 19:12</span>\n              </div>\n              <span class=\"ds-badge ds-badge--success\" data-component=\"badge\">Online</span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Ceiling light\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__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=\"M9 18h6M10 21h4M8 14a6 6 0 1 1 8 0c-.6.6-1 1.200-1 2H9c0-.8-.4-1.400-1-2z\"/></svg></span>\n              <div class=\"ds-list__body\">\n                <a class=\"ds-list__title\" href=\"#rooms\">Floor lamp</a>\n                <span class=\"ds-list__meta\">40% · candle · on since 19:30</span>\n              </div>\n              <span class=\"ds-badge ds-badge--success\">Online</span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Floor lamp\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__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=\"M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z\"/></svg></span>\n              <div class=\"ds-list__body\">\n                <a class=\"ds-list__title\" href=\"#rooms\">Radiator valve</a>\n                <span class=\"ds-list__meta\">to 21 degrees · battery at 14%</span>\n              </div>\n              <span class=\"ds-badge ds-badge--warning\">Low battery</span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Radiator valve\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__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 4h14v16H5zM5 9h14M5 14h14\"/></svg></span>\n              <div class=\"ds-list__body\">\n                <a class=\"ds-list__title\" href=\"#rooms\">Window blind</a>\n                <span class=\"ds-list__meta\">not seen since Tuesday</span>\n              </div>\n              <span class=\"ds-badge ds-badge--danger\">Offline</span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" aria-label=\"Window blind\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n          </ul>\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">Ceiling light <span class=\"ds-badge\">70%</span></h2>\n            <div class=\"ds-panel__body\">\n              <div>\n                <div class=\"ds-progress__legend\"><span>Brightness</span><span>70%</span></div>\n                <span class=\"ds-progress ds-progress--slider ds-progress--75\" role=\"slider\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Brightness\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n              <div>\n                <div class=\"ds-progress__legend\"><span>Warmth</span><span>warm white</span></div>\n                <span class=\"ds-progress ds-progress--slider ds-progress--25\" role=\"slider\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Warmth\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n            </div>\n          </section>\n        </div>\n\n        <div class=\"ds-page__stack\">\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">Air</h2>\n            <div class=\"ds-panel__body\">\n              <div>\n                <div class=\"ds-progress__legend\"><span>Humidity</span><span>46%</span></div>\n                <span class=\"ds-progress ds-progress--40\" role=\"progressbar\" aria-valuenow=\"46\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Humidity\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n              <div>\n                <div class=\"ds-progress__legend\"><span>Fresh air</span><span>good</span></div>\n                <span class=\"ds-progress ds-progress--90\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Fresh air\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n              <p class=\"ds-panel__note\">Measured by the radiator valve every ten minutes.</p>\n            </div>\n          </section>\n          <section class=\"ds-empty\" data-component=\"empty\">\n            <svg class=\"ds-empty__icon\" 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 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4\"/></svg>\n            <h2 class=\"ds-empty__title\">Nothing in the hall yet</h2>\n            <p class=\"ds-empty__text\">Plug a device in and hold its button for five seconds. It shows up here.</p>\n            <a class=\"ds-button\" href=\"#routines\">Add a device</a>\n          </section>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"energy\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Canal house</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#energy\">Energy</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">This week</li>\n    </ol>\n\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__text\">\n        <h1 class=\"ds-page-header__title\">Energy this week</h1>\n        <p class=\"ds-page-header__lead\">38.2 kWh from Friday to Thursday, by device.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#energy\">Last week</a>\n      </div>\n    </header>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-page__stack\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr>\n              <th scope=\"col\">Device</th>\n              <th scope=\"col\" class=\"ds-table__opt\">Room</th>\n              <th scope=\"col\" class=\"ds-table__num ds-table__opt\">Hours on</th>\n              <th scope=\"col\" class=\"ds-table__num\">kWh</th>\n              <th scope=\"col\" class=\"ds-table__num\">Share</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"ds-table__strong\"><a class=\"ds-link ds-link--quiet\" href=\"#rooms\">Radiators</a></td>\n              <td class=\"ds-table__meta ds-table__opt\">Whole house</td>\n              <td class=\"ds-table__num ds-table__opt\">61</td>\n              <td class=\"ds-table__num\">21.4</td>\n              <td class=\"ds-table__num\">56%</td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__strong\"><a class=\"ds-link ds-link--quiet\" href=\"#rooms\">Oven</a></td>\n              <td class=\"ds-table__meta ds-table__opt\">Kitchen</td>\n              <td class=\"ds-table__num ds-table__opt\">5</td>\n              <td class=\"ds-table__num\">7.8</td>\n              <td class=\"ds-table__num\">20%</td>\n            </tr>\n            <tr class=\"is-hover\">\n              <td class=\"ds-table__strong\"><a class=\"ds-link ds-link--quiet\" href=\"#rooms\">Washing machine</a></td>\n              <td class=\"ds-table__meta ds-table__opt\">Hall</td>\n              <td class=\"ds-table__num ds-table__opt\">4</td>\n              <td class=\"ds-table__num\">4.1</td>\n              <td class=\"ds-table__num\">11%</td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__strong\"><a class=\"ds-link ds-link--quiet\" href=\"#rooms\">Lights</a></td>\n              <td class=\"ds-table__meta ds-table__opt\">Whole house</td>\n              <td class=\"ds-table__num ds-table__opt\">88</td>\n              <td class=\"ds-table__num\">3.2</td>\n              <td class=\"ds-table__num\">8%</td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__strong\"><a class=\"ds-link ds-link--quiet\" href=\"#rooms\">Kitchen speaker</a></td>\n              <td class=\"ds-table__meta ds-table__opt\">Kitchen</td>\n              <td class=\"ds-table__num ds-table__opt\">19</td>\n              <td class=\"ds-table__num\">1.7</td>\n              <td class=\"ds-table__num\">5%</td>\n            </tr>\n          </tbody>\n        </table>\n        <nav aria-label=\"Weeks\">\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link\" href=\"#energy\">Previous</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#energy\">40</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#energy\" aria-current=\"page\">41</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#energy\">42</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#energy\">Next</a></li>\n          </ul>\n        </nav>\n      </div>\n\n      <div class=\"ds-page__stack\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">October budget</h2>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-panel__line\">\n              <div class=\"ds-progress ds-progress--ring ds-progress--40\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Budget used\"><span class=\"ds-progress__face\">40%</span></div>\n              <p>72 of 180 kWh used with 23 days to go.</p>\n            </div>\n            <ol class=\"ds-chart\" aria-label=\"Energy used each day\">\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--60\"></span></span>F</li>\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--90\"></span></span>S</li>\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--75\"></span></span>S</li>\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--45\"></span></span>M</li>\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--30\"></span></span>T</li>\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--60\"></span></span>W</li>\n              <li class=\"ds-chart__col\"><span class=\"ds-chart__well\"><span class=\"ds-chart__bar ds-chart__bar--45 is-current\"></span></span>T</li>\n            </ol>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"routines\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Canal house</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#routines\">Routines</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">New routine</li>\n    </ol>\n\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__text\">\n        <h1 class=\"ds-page-header__title\">New routine</h1>\n        <p class=\"ds-page-header__lead\">A routine runs a scene at a time, or when somebody comes home.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">Back to the board</a>\n      </div>\n    </header>\n\n    <div class=\"ds-page__split\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">When and what <span class=\"ds-badge\">draft</span></h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"r-name\">Name</label>\n                <input class=\"ds-form__input\" id=\"r-name\" type=\"text\" value=\"Weekday morning\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"r-time\">Starts at</label>\n                <input class=\"ds-form__input is-error\" id=\"r-time\" type=\"text\" value=\"25:00\" aria-invalid=\"true\" aria-describedby=\"r-time-error\">\n                <span class=\"ds-form__error\" id=\"r-time-error\">Enter a time between 00:00 and 23:59.</span>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"r-scene\">Scene</label>\n                <span class=\"ds-form__select-wrap\">\n                  <select class=\"ds-form__select\" id=\"r-scene\">\n                    <option>Morning</option>\n                    <option>Evening</option>\n                    <option>Film</option>\n                    <option>Away</option>\n                  </select>\n                  <svg class=\"ds-form__chevron\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg>\n                </span>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"r-room\">Rooms</label>\n                <input class=\"ds-form__input\" id=\"r-room\" type=\"text\" placeholder=\"All rooms\">\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"r-note\">Note for the others</label>\n              <textarea class=\"ds-form__textarea\" id=\"r-note\" placeholder=\"Why this routine exists\"></textarea>\n              <span class=\"ds-form__hint\">Shown to everybody in the house when the routine runs.</span>\n            </div>\n            <label class=\"ds-form__check\">\n              <input class=\"ds-form__checkbox\" type=\"checkbox\" checked>\n              Skip it when nobody is home\n            </label>\n            <label class=\"ds-form__check\">\n              <input class=\"ds-form__checkbox\" type=\"checkbox\">\n              Run on Saturday and Sunday too\n            </label>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Save routine</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Run once</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Delete</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Share</button>\n            </div>\n          </form>\n        </div>\n      </section>\n\n      <div class=\"ds-page__stack\">\n        <div class=\"ds-notice__stack\" data-component=\"notice\">\n          <div class=\"ds-notice\" role=\"status\">\n            <svg class=\"ds-notice__icon\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"8\"/><path d=\"M10 9v5M10 6v.5\"/></svg>\n            <div><span class=\"ds-notice__title\">Three routines run today.</span> The next is Evening at 20:00.</div>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <svg class=\"ds-notice__icon\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 2.500 18 17H2z\"/><path d=\"M10 8v4M10 14v.5\"/></svg>\n            <div><span class=\"ds-notice__title\">The window blind did not answer.</span> Away ran without it at 08:15.</div>\n          </div>\n        </div>\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\">Delete this routine?</h2>\n            <div class=\"ds-dialog__body\">Weekday morning stops running. Its scene and the devices stay as they are.</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\">Delete</button>\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"help\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Canal house</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#help\">Help</a></li>\n      <li class=\"ds-breadcrumb__item\" aria-current=\"page\">Adding a device</li>\n    </ol>\n\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__text\">\n        <h1 class=\"ds-page-header__title\">Help</h1>\n        <p class=\"ds-page-header__lead\">Short answers on devices, scenes and what happens when the internet is down.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#routines\">Add a device</a>\n      </div>\n    </header>\n\n    <div class=\"ds-page__split ds-page__split--side\">\n      <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__heading\">Devices</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link is-current\" href=\"#help\">Adding a device</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#help\">Moving it to a room</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#help\">Batteries <span class=\"ds-badge\">1 low</span></a></li>\n        </ul>\n        <h2 class=\"ds-sidebar__heading\">The house</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link\" href=\"#routines\">Scenes and routines</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#energy\">Energy budget</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#help\">Inviting people</a></li>\n        </ul>\n        <h2 class=\"ds-sidebar__heading\">When it goes wrong</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link\" href=\"#help\">Offline devices</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#help\">Without the internet</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#rooms\">A room that is missing</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#help\">Starting the hub again</a></li>\n        </ul>\n      </aside>\n\n      <div class=\"ds-page__stack\">\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__body\">\n            <article class=\"ds-prose\" data-component=\"typography\">\n              <h1>Adding a device</h1>\n              <p class=\"ds-prose__lead\">Anything that speaks to the hub can join the house: lamps, plugs, valves, locks and speakers.</p>\n              <p>Plug the device in and hold its button for five seconds, until it blinks. The hub lists it under a short code such as <code>LAMP-07</code>, and you give it a <strong>name and a room</strong>.</p>\n              <h2>When it does not show up</h2>\n              <p>Most devices that stay hidden are too far from the hub or were paired to another house before.</p>\n              <h3>Three things to try</h3>\n              <ul>\n                <li>Bring the device within five metres of the hub.</li>\n                <li>Hold the button for fifteen seconds to clear the old house.</li>\n                <li>Check that the hub's own light is steady, not blinking.</li>\n              </ul>\n              <p>Once it is in, <a class=\"ds-link\" href=\"#rooms\">switch it from its room</a> or <a class=\"ds-link\" href=\"#routines\">put it in a routine</a>.</p>\n              <p class=\"ds-link__sample\" data-component=\"links\">\n                <a class=\"ds-link\" href=\"#help\">Moving it to a room</a>\n                <a class=\"ds-link is-visited\" href=\"#help\">Batteries</a>\n                <a class=\"ds-link is-hover\" href=\"#help\">Inviting people</a>\n                <a class=\"ds-link is-active\" href=\"#help\">Offline devices</a>\n                <a class=\"ds-link ds-link--quiet\" href=\"#energy\">Energy budget</a>\n              </p>\n            </article>\n          </div>\n        </section>\n\n        <div class=\"ds-accordion\" data-component=\"accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Does the house work without the internet? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n            <div class=\"ds-accordion__body\"><p>Yes. Switches, scenes and routines run on the hub. Only the view from outside the house needs a connection.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Who can unlock the front door? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n            <div class=\"ds-accordion__body\"><p>Only people you invited as residents. Guests see the lights and nothing else.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">How is the energy figure measured? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n            <div class=\"ds-accordion__body\"><p>Plugs and valves report what they draw. Devices that cannot report are estimated from their hours on.</p></div>\n          </details>\n        </div>\n      </div>\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    <p class=\"ds-footer__text\">Hub 4.2 · all 12 devices checked a minute ago.</p>\n    <ul class=\"ds-footer__links\">\n      <li><a class=\"ds-footer__link\" href=\"#help\">Help</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#energy\">Energy</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#help\">Privacy</a></li>\n    </ul>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.claymorphism.app.s04.p05.t04.u06\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"claymorphism\",\n    \"years\": [\n      2021,\n      2025\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-cl-4546\",\n  \"short\": \"v1-cl-4546\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: rgb(212 246 230);\n  --color-canvas: rgb(230 251 240);\n  --color-surface: rgb(251 255 250);\n  --color-surface-alt: rgb(235 250 241);\n  --color-surface-strong: rgb(202 240 220);\n  --color-bar: rgb(251 255 250);\n  --color-bar-text: rgb(18 70 60);\n  --color-bar-alt: rgb(22 84 72);\n  --color-bar-alt-text: rgb(232 255 242);\n  --color-inverse: rgb(16 64 56);\n  --color-inverse-text: rgb(242 255 232);\n  --color-text: rgb(30 66 60);\n  --color-text-muted: rgb(78 114 106);\n  --color-heading: rgb(10 52 46);\n  --color-heading-alt: rgb(0 120 98);\n  --color-link: rgb(0 116 98);\n  --color-link-quiet: rgb(18 70 60);\n  --color-link-visited: rgb(88 92 150);\n  --color-link-hover: rgb(0 84 72);\n  --color-link-active: rgb(176 98 0);\n  --color-border: rgb(194 232 212);\n  --color-border-strong: rgb(148 208 180);\n  --color-border-muted: rgb(222 244 232);\n  --color-accent: rgb(255 224 84);\n  --color-accent-text: rgb(32 50 30);\n  --color-accent-alt: rgb(255 152 112);\n  --color-fill-1: rgb(255 228 100);\n  --color-fill-2: rgb(146 232 198);\n  --color-fill-3: rgb(170 220 255);\n  --color-fill-4: rgb(255 192 162);\n  --color-button: rgb(8 128 104);\n  --color-button-text: rgb(255 255 255);\n  --color-button-hover-text: rgb(255 255 255);\n  --color-button-secondary: rgb(251 255 250);\n  --color-button-secondary-text: rgb(6 106 88);\n  --color-input: rgb(230 248 238);\n  --color-input-text: rgb(30 66 60);\n  --color-input-border: rgb(174 222 198);\n  --color-disabled: rgb(220 238 228);\n  --color-disabled-text: rgb(136 166 154);\n  --color-danger: rgb(188 48 58);\n  --color-danger-surface: rgb(255 228 226);\n  --color-success: rgb(22 150 84);\n  --color-warning: rgb(206 138 0);\n  --color-notice: rgb(255 246 200);\n  --color-notice-text: rgb(92 68 0);\n  --color-focus: rgb(0 98 84);\n  --color-shadow: rgb(20 130 100 / 0.3);\n  --color-overlay: rgb(10 52 46 / 0.4);\n}\n\n/* @part type */\n:root {\n  --font-body: Manrope, \"SF Pro Text\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n  --font-heading: Sora, \"Space Grotesk\", \"Trebuchet MS\", \"Lucida Grande\", Tahoma, sans-serif;\n  --font-ui: Manrope, \"SF Pro Text\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n  --font-mono: \"IBM Plex Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 15px;\n  --text-large: 18px;\n  --text-display: 54px;\n  --text-h1: 34px;\n  --text-h2: 24px;\n  --text-h3: 18px;\n  --line-body: 1.5;\n  --line-heading: 1.3;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 600;\n  --weight-display: 600;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: -0.01em;\n  --display-tracking: -0.02em;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 0;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 24px;\n  --radius-panel: 36px;\n  --radius-pill: 60px;\n  --radius-page: 52px;\n  --shadow-panel: 6px 8px 14px -4px var(--color-shadow), 18px 26px 48px -12px var(--color-shadow), inset -8px -10px 24px color-mix(in srgb, black 8%, transparent), inset 8px 10px 24px color-mix(in srgb, white 80%, transparent);\n  --shadow-control: 3px 4px 8px -2px var(--color-shadow), 8px 12px 22px -8px var(--color-shadow), inset -4px -6px 12px color-mix(in srgb, black 10%, transparent), inset 4px 6px 12px color-mix(in srgb, white 62%, transparent);\n  --shadow-control-hover: 4px 6px 10px -2px var(--color-shadow), 12px 18px 30px -8px var(--color-shadow), inset -4px -6px 12px color-mix(in srgb, black 10%, transparent), inset 4px 6px 12px color-mix(in srgb, white 76%, transparent);\n  --shadow-control-pressed: inset 5px 7px 14px color-mix(in srgb, black 13%, transparent), inset -5px -6px 12px color-mix(in srgb, white 70%, transparent);\n  --shadow-dialog: 10px 14px 24px -8px var(--color-shadow), 30px 44px 80px -20px var(--color-shadow), inset -10px -14px 30px color-mix(in srgb, black 7%, transparent), inset 10px 14px 30px color-mix(in srgb, white 88%, transparent);\n  --shadow-text: none;\n  --fill-page: radial-gradient(40% 30% at 100% 0%, color-mix(in srgb, var(--color-fill-2) 55%, transparent), transparent 70%), radial-gradient(44% 30% at 0% 60%, color-mix(in srgb, var(--color-fill-3) 34%, transparent), transparent 70%), linear-gradient(170deg, var(--color-canvas), var(--color-page) 55%, color-mix(in srgb, var(--color-fill-1) 30%, var(--color-page)));\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: linear-gradient(140deg, color-mix(in srgb, var(--color-bar-alt) 82%, white), var(--color-bar-alt) 55%);\n  --fill-inverse: linear-gradient(140deg, color-mix(in srgb, var(--color-inverse) 90%, white), var(--color-inverse) 55%);\n  --fill-accent: linear-gradient(140deg, color-mix(in srgb, var(--color-accent) 72%, white), var(--color-accent) 55%), var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(140deg, color-mix(in srgb, var(--color-button) 80%, white), var(--color-button) 55%), var(--color-button);\n  --fill-button-hover: linear-gradient(140deg, color-mix(in srgb, var(--color-button) 68%, white), var(--color-button) 65%), var(--color-button);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px dotted var(--color-focus);\n  --transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}