{ "id": "v1-my-7331", "long_id": "v1.material-you.app.s07.p03.t03.u01", "name": "Tonal home control, 2025", "era": { "slug": "material-you", "code": "my", "name": "Material You", "years": [ 2021, 2026 ], "description": "The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "An \"at a glance\" home control screen in the tonal language of 2021 to 2026, in a dark scheme: no rail and no drawer, only a plain top row and a floating pill of destinations at the foot of the window, with the content between them as large shaped tiles laid on the page tone. Every colour is a tone of one indigo key colour, with an amber tertiary for the third tile and for notices; corners run from 14 to 36px, buttons, stat tiles, tabs and the status strip are full pills, and only the floating bar, menus and dialogs cast a shadow. Headings are a wide geometric sans (Lexend) at medium weight up to 68px over a neutral grotesque (Inter) at 16px.", "url": "https://chrono.skin/s/v1-my-7331", "preview_url": "https://chrono.skin/s/v1-my-7331/specimen.html", "files": { "STYLE.md": "# Tonal home control, 2025\n\n## Summary\n\nAn \"at a glance\" home control screen in the tonal language of 2021 to 2026, in a dark scheme: no rail and no drawer, only a plain top row and a floating pill of destinations at the foot of the window, with the content between them as large shaped tiles laid on the page tone. Every colour is a tone of one indigo key colour, with an amber tertiary for the third tile and for notices; corners run from 14 to 36px, buttons, stat tiles, tabs and the status strip are full pills, and only the floating bar, menus and dialogs cast a shadow. Headings are a wide geometric sans (Lexend) at medium weight up to 68px over a neutral grotesque (Inter) at 16px.\n\n## Layout\n\n- Designed at 1440px; `--size-page` is 1440px and the page does not stretch beyond it. One column with `--space-6` at the window edges. From the top: the top row of `.ds-nav` (`--size-bar` 72px, on the page tone), the open view, `.ds-footer`, and `--size-dock-space` 104px kept free for the floating bar.\n- `.ds-nav` holds two things: `.ds-nav__inner`, the top row with `.ds-brand`, the `.ds-menu` that switches homes and, at the right, `.ds-nav__tools` (an icon button with a `.ds-tooltip`, the `.ds-avatar`); and `.ds-nav__dock`, the floating bar on `--fill-bar`, a pill centred at the foot of the window (it sticks `--space-4` above the edge) with the destinations and, at its end, the round floating action button. At 1440px a destination is an icon beside its label in a 56px pill; the current one is filled with the secondary container.\n- Home view, straight on the page tone: `.ds-status` (the secondary bar, one pill), then `.ds-glance` (the unboxed `.ds-hero` at 5 parts, the `.ds-carousel` of rooms at 7), `.ds-stats` (four pill tiles) `--space-5` under it, `.ds-filter` (section title, chips, a link), the `.ds-grid` of eight device tiles in four columns, and `.ds-columns` with the activity `.ds-panel` at 3 parts and a `.ds-stack` (the energy card and a `.ds-snackbar`) at 2.\n- Spacing: `--space-1` 4px (between tabs, between the two parts of a progress track, accordion rows), `--space-2` 8px (between buttons, chips, carousel slides, dock padding), `--space-3` 12px (between tiles and stat pills), `--space-4` 16px (list row padding, field gap, between cards in a stack), `--space-5` 24px (tile and card padding, between columns), `--space-6` 32px (window edge, between hero and carousel, sheet top), `--space-7` 40px (sheet sides, above a section), `--space-8` 56px (unused reserve of the scale).\n- Heights: buttons, avatars and icon discs `--size-control` 40px; large buttons and fields `--size-field` 56px; dock items and the floating action button `--size-fab` 56px; chips and the switch `--size-chip` 32px; list and accordion rows `--size-row` 72px; table rows, menu items and the status strip `--size-row-dense` 52px; device tiles at least `--size-tile` 168px; the carousel `--size-slide` 296px; the progress track `--size-track` 16px. `--size-measure` 680px caps running text, `--size-dialog` is 400px, `--size-menu` 248px.\n- Inner pages (every view but the home view) have no status strip, hero or carousel. The top row and the floating bar stay; the content sits on one `.ds-main` sheet (`--color-canvas`, `--radius-page`, padding `--space-6` by `--space-7`) that opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header`, then `.ds-tabs` and the working components in `.ds-columns` (3 parts and 2), or `.ds-layout` (the `.ds-sidebar` at 1 part, the content at 3).\n- Views: `home` is the glance screen. `room` is one room: the device table under tabs with pagination, beside the climate card and who is in the room. `routines` lists the routines with their switches, an empty state for away routines, the delete dialog and further reading. `add` is the form for a new device with its notices, a step progress and the pairing guide. `settings` has the section list, the accordion of setting groups, the people and the hub storage.\n- Below 1000px the glance, columns and settings layout become one column and the grid and stats two columns. Below 640px the section list of the settings view is one strip that scrolls sideways and fades at the right, the window edge is `--space-3`, the menu shows only its icon (`.ds-menu__label` is hidden) and its list opens across the full width of the top row, the tooltip button is dropped, the status strip drops its `.ds-status__action`, the stats stack, `.ds-nav__dock` stays a floating bar at the foot of the window and shows each `.ds-nav__link` as an icon above a 13px label with `--radius-page` corners, the current one keeping its filled pill, the third carousel slide is dropped and `.ds-table__extra` cells are hidden. Nothing scrolls sideways at 390px.\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- Two families: `--font-heading` is Roboto Serif (then Noto Serif, Georgia) for every title, the brand name and the stat figures; `--font-body` and `--font-ui` are Noto Sans. `--font-mono` is Noto Sans Mono.\n- Sizes: `--text-base` 17px at `--line-body` 1.55; `--text-small` 13px; `--text-ui` 14px; `--text-large` 21px (leads); `--text-display` 52px at `--line-display` 1.15 with `--display-tracking` -0.5px; `--text-h1` 34px, `--text-h2` 26px, `--text-h3` 21px at `--line-heading` 1.3.\n- Weights: display 400, headings 500, `--weight-ui` 600, `--weight-bold` 700. `--ui-transform` is `none`.\n- Links are not underlined at rest, underlined on hover.\n- The era's rule for text on fills, which every layout and every token set of this era keeps: on `--fill-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and on all four `--color-fill-*` blocks, text is `--color-text`, titles `--color-heading` and captions `--color-text-muted`; the fills are container tones, so the ordinary text colours stay readable on them in a light and in a dark scheme. On `--fill-bar` text is `--color-bar-text`; on `--fill-bar-alt` it is `--color-bar-alt-text`; on `--fill-inverse` it is `--color-inverse-text`; on `--fill-accent` it is `--color-accent-text`; on `--fill-button` it is `--color-button-text`; on `--fill-button-secondary` it is `--color-button-secondary-text`; on `--color-notice` it is `--color-notice-text`; on `--color-danger-surface` the body is `--color-text` and the title and icon are `--color-danger`. A solid block of `--color-danger`, `--color-success`, `--color-warning` or `--color-accent-alt` carries `--color-canvas` as its text colour, because the status colours are dark in a light scheme and pale in a dark one, always opposite to the canvas.\n- Tonal roles: `--color-page` is the surface container behind everything; the bar, rail or drawer and the table head are on `--fill-bar`, which the surface part sets to a neighbouring container tone, so each surface set shows there; `--color-canvas` is the plain surface of the rounded content sheet; `--color-surface` (container low) fills cards and list cards, `--color-surface-alt` (container high) stat tiles and dialogs, `--color-surface-strong` (container highest) tonal cards, inline code and hovered rows. `--color-accent` is the primary container: hero card, floating action button, default badge, the disc of an empty state. `--color-button-secondary` is the secondary container: tonal buttons and every pill indicator behind a current navigation item, chip or tab. `--color-accent-alt` is the tertiary colour, used solid for \"new\" markers. `--color-fill-1` to `--color-fill-4` are the primary, secondary and tertiary containers and the highest surface container.\n- `--color-link` is the primary colour: links, outlined and text button labels, the current tab, list markers. Visited links take the tertiary `--color-link-visited`. `--color-border` (outline variant) draws card outlines, chips and dividers, `--color-border-strong` (outline) the outlined button and the off switch, `--color-border-muted` the dividers inside lists and tables. `--color-input-border` outlines fields; `--color-focus` is the focus line.\n- Status badges are tonal: `--color-success`, `--color-warning` or `--color-danger` mixed at 22% into `--color-canvas`, with `--color-text` and a dot in the full status colour.\n- Shape: every button, badge, search bar, navigation indicator and pagination link uses `--radius-pill`; fields and chips use `--radius-control`; cards, notices, tables and the floating action button use `--radius-panel`; the content sheet, hero, grid tiles, dialogs and empty states use `--radius-page`.\n- Elevation is shown by tone, not shadow. `--shadow-panel` and `--shadow-control` sit on cards and buttons and are `none` or one faint layer; `--shadow-control-hover` is on hovered buttons and on the search bar, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs and the floating action button. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\n- One-off values built with `color-mix()` because the vocabulary has no token: an 8% or 10% wash of the label colour for hovered tonal, outlined, text and icon buttons, chips and navigation items; the 22% status tints; the danger colour mixed with 12% of `--color-text` for a hovered danger button.\n\n## Components\n\n- `.ds-page` on ``: the one-column shell on `--fill-page`.\n- `.ds-nav`: the header. `.ds-nav__inner` is the top row; `.ds-nav__tools` its right end. `.ds-nav__dock` is the floating bar on `--fill-bar` holding `.ds-nav__links` of `.ds-nav__link` items (icon and label) and one `.ds-button--fab`. The current item (`is-current`, or the rule for the open view) is filled with `--fill-button-secondary`.\n- `.ds-brand`: the site's mark and name, one link. `.ds-brand__mark` is a round tile dressed like the filled button (`--fill-button`, `--color-button-text`, `--radius-pill`, `--shadow-control`, a transparent `--border-width` border) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-menu`: a `
` drop-down. `.ds-menu__button` is its tonal pill (`.ds-menu__label` is the text, hidden on a phone); `.ds-menu__list` is a `--color-surface-alt` sheet with `--radius-panel` and `--shadow-dialog` holding `.ds-menu__item` rows; `is-current` is on the secondary container. Use it for switching between a few things of one kind.\n- `.ds-tooltip`: wraps a trigger; `.ds-tooltip__text` is a small label on `--fill-inverse` shown under it on hover or focus (`is-hover` shows it statically).\n- `.ds-avatar`: a disc with initials on `--color-fill-3`; `--2` and `--4` pick other fills. `.ds-avatars` overlaps several; `.ds-people` sets a stack beside a line of text.\n- `.ds-status`: the secondary bar, one pill on `--fill-bar-alt` with an icon, `.ds-status__text` and an outlined `.ds-status__action`.\n- `.ds-glance`: the row of hero and carousel. `.ds-hero`: the greeting, unboxed on the page tone, with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and a `.ds-buttons` group of large buttons.\n- `.ds-carousel`: `.ds-carousel__track` holds `.ds-carousel__slide` items, the `is-current` one wide on `--color-surface-alt` with `.ds-carousel__head`, `.ds-carousel__foot`, `.ds-carousel__value` and `.ds-carousel__text`, the others as narrow shaped ends in a fill (`--3`, `--4`) with an icon and a `.ds-carousel__name`. `.ds-carousel__nav` under it holds `.ds-carousel__dots` (`.ds-carousel__dot`, the current one long) and `.ds-carousel__arrows`.\n- `.ds-stat`: one summary figure, a pill with a `.ds-stat__icon` disc, `.ds-stat__value` and `.ds-stat__label`. Four sit in a `.ds-stats` row.\n- `.ds-filter`: a section title, `.ds-chips` and a link at the right. `.ds-chip` is an outlined 32px chip; `is-current` fills it.\n- `.ds-grid`: device tiles. A `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill; `is-off` puts it on `--fill-panel`) has a `.ds-grid__head` with a `.ds-grid__icon` disc and a `.ds-switch` or badge, then `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger with a tick on a `--fill-button` track when on.\n- `.ds-progress`: a 16px track in two parts with a gap, `.ds-progress__bar` in `--fill-button` and `.ds-progress__rest` in the secondary container with a stop dot at its end. `--25`, `--40`, `--60`, `--75` set the share (50% without); `--warning` colours the bar. `.ds-progress__label` is the line above it. `.ds-figure` is a large number above a progress or in a card.\n- `.ds-tabs`: a pill track on `--color-surface-alt` with `.ds-tabs__tab` pills; `is-current` is on the secondary container.\n- `.ds-accordion`: a group of `
`; each `.ds-accordion__item` is a tonal row with `.ds-accordion__summary` (a title and a `.ds-accordion__hint` line, a chevron at the right) and `.ds-accordion__body`. Only the outer corners of the group are large.\n- `.ds-sidebar`: the section list of the settings view, unboxed: `.ds-sidebar__title` and a `.ds-sidebar__list` of 56px pill rows `.ds-sidebar__link`; `is-current` is on the secondary container. `.ds-layout` places it beside the content.\n- `.ds-main`: the sheet of an inner view. `.ds-section` (`--first` for less space above) with `.ds-section__head`, `.ds-section__title` and `.ds-section__label` titles a block; `.ds-columns` (`--even`) puts two blocks side by side and `.ds-stack` piles cards.\n- `.ds-page-header`: the head of an inner view. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text`; `.ds-page-header__actions` sits at the right with one filled button at most.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the larger opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured, `--more` carries a chevron. `.ds-links` lays several out.\n- `.ds-button`: the filled pill button. `--secondary` is tonal, `--outlined` outlined with a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` a danger-coloured text button), `--large` is the 56px form, `--icon` a round icon button, `--fab` the floating action button in `--fill-accent`, `--on-inverse` the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. `.ds-icon` (`--small`) is a stroked inline SVG.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a `.ds-form__label` above a `.ds-form__control` (`--area` for a textarea; inside `.ds-form__select` for a select); `.ds-form__row` puts two side by side. `is-invalid` plus `.ds-form__error` shows an error, `.ds-form__hint` is help text. `.ds-form__check` with `.ds-form__checkbox` is a checkbox row; `.ds-form__check--between` with `.ds-form__check-text` and a `.ds-switch` is a setting row. `.ds-form__actions` holds the buttons.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without; `tr.is-current` is tinted.\n- `.ds-list`: rows of `.ds-list__item` with a `.ds-list__icon` disc (`--1`, `--3`, `--4`) or an avatar, `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta`, a badge or a switch at the right. `--cards` makes every row its own card; `is-current` puts one on the secondary container.\n- `.ds-panel`: a filled card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__head` and `.ds-panel__actions`. `--outlined`, `--tonal` and `--accent` as in the era's other layouts.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, `--success`, `--warning` and `--danger` are tonal status labels with a dot. Group with `.ds-badges`.\n- `.ds-notice`: a tonal card with a leading icon, `.ds-notice__body` and `.ds-notice__title`; `--error` is on `--color-danger-surface`. Group with `.ds-notices`.\n- `.ds-pagination`: round `.ds-pagination__link` items; `is-current` is filled like the primary button, `is-disabled` is grey.\n- `.ds-breadcrumb`: a muted trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a `--color-surface-alt` sheet with `--radius-page` corners, `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and text buttons in `.ds-dialog__actions`, on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-snackbar`: a short message on `--fill-inverse` with `.ds-snackbar__action`.\n- `.ds-footer`: one quiet line under the content, ruled above, with `.ds-footer__legal` and `.ds-footer__links` of `.ds-footer__link`.\n\n## Never\n\n- `row-gap <= 12px`: list cards are 8px apart and table rows touch.\n- `block-gap <= 40px`: blocks are 12 to 40px apart.\n- `uppercase-text = 0%`: labels are sentence case.\n- `font-weight <= 700`: bold is for strong text only.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 13px`: the smallest labels are 13px.\n- `font-size <= 52px`: the hero title is the largest text.\n- `font-families <= 3`: a serif for headings, a sans for text and the mono.\n- `line-height <= 1.7`: body text is 17px on a 26px line.\n- `underlined-links <= 10%`: links are marked by colour.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `border-width <= 2px`: outlines are 1px; the tab indicator, checkbox and switch track are 2px.\n- `box-shadow-blur <= 8px`: the only shadows are the two small layers under floating things.\n- `border-radius <= 28px`: containers stop at 28px; anything rounder is a full pill.\n- `transition != none`: controls ease between states.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Something to glance at is a tile: a `.ds-grid__cell` in a fill when it is on or active, on `--fill-panel` when it is not, with `--radius-page`. Anything that holds longer content is a `.ds-panel`. Anything pressed is a `.ds-button` variant and stays a full pill; a selected state is the secondary container on a pill. New destinations go into the floating bar, never into a rail or a second bar; keep it to five items and one floating action button. Raise something by moving it to the next surface tone, not by adding a shadow. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and follow the rule for text on fills in \"Typography and colour roles\". Never add a gradient, an uppercase label, a square corner on a container or a second filled button beside the first.\n", "components.css": ":root {\n --size-page: 1440px;\n --size-bar: 72px;\n --size-dock-space: 104px;\n --size-measure: 680px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 40px;\n --size-control: 40px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-chip: 32px;\n --size-badge: 22px;\n --size-check: 18px;\n --size-switch: 52px;\n --size-thumb: 16px;\n --size-thumb-on: 24px;\n --size-row: 72px;\n --size-row-dense: 52px;\n --size-indicator: 64px;\n --size-area: 120px;\n --size-dialog: 400px;\n --size-empty: 96px;\n --size-tile: 168px;\n --size-slide: 296px;\n --size-track: 16px;\n --size-menu: 248px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 40px;\n --space-8: 56px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* icons: stroked inline SVG in the current text colour */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-icon--small {\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n}\n\n/* brand: a round tile dressed like the filled button, 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: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n line-height: var(--line-heading);\n}\n\n/* section titles on the canvas */\n.ds-section {\n margin-top: var(--space-7);\n}\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-section__label {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-columns--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-stack {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n}\n\n/* page header of an inner view */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-page-header__body {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: var(--space-2);\n}\n\n/* prose */\n.ds-prose {\n max-width: var(--size-measure);\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-3);\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 color: var(--color-heading);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p,\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-link);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n\n/* links */\n.ds-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-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-link:visited, .ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover, .ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active, .ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible, .ds-link.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n.ds-link--more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* buttons: every button is a full pill */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\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: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover, .ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active, .ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible, .ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover, .ds-button--secondary.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n color: var(--color-button-secondary-text);\n}\n.ds-button--outlined {\n background: transparent;\n color: var(--color-link);\n border-color: var(--color-border-strong);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--text {\n padding: 0 var(--space-3);\n background: transparent;\n color: var(--color-link);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--outlined:hover, .ds-button--outlined.is-hover,\n.ds-button--text:hover, .ds-button--text.is-hover {\n background: color-mix(in srgb, var(--color-link) 10%, transparent);\n color: var(--color-link);\n box-shadow: none;\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-button--danger:hover, .ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));\n color: var(--color-canvas);\n}\n.ds-button--text.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n}\n.ds-button--text.ds-button--danger:hover, .ds-button--text.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 10%, transparent);\n color: var(--color-danger);\n}\n.ds-button--on-inverse:hover, .ds-button--on-inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 88%, var(--color-inverse));\n color: var(--color-inverse);\n}\n.ds-button--large {\n min-height: var(--size-field);\n padding: 0 var(--space-6);\n font-size: var(--text-base);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--icon:hover, .ds-button--icon.is-hover {\n background: color-mix(in srgb, currentColor 10%, transparent);\n color: inherit;\n box-shadow: none;\n}\n.ds-button--fab {\n min-width: var(--size-fab);\n min-height: var(--size-fab);\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button--fab:hover, .ds-button--fab.is-hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, var(--color-accent));\n color: var(--color-accent-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button:disabled, .ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n pointer-events: none;\n}\n\n/* chips and badges */\n.ds-chips,\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n background: transparent;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover, .ds-chip.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-chip.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: transparent;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n min-height: var(--size-badge);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n white-space: nowrap;\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-canvas);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n}\n.ds-badge--success { background: color-mix(in srgb, var(--color-success) 22%, var(--color-canvas)); }\n.ds-badge--warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas)); }\n.ds-badge--danger { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas)); }\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: currentColor;\n}\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* form: fields with a label above */\n.ds-form {\n display: grid;\n gap: var(--space-5);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-form__control {\n display: block;\n width: 100%;\n min-height: var(--size-field);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n appearance: none;\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: var(--size-area);\n padding: var(--space-3) var(--space-4);\n resize: vertical;\n}\n.ds-form__control:focus, .ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width) * -1);\n border-color: var(--color-focus);\n}\n.ds-form__select {\n position: relative;\n display: block;\n}\n.ds-form__select::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: var(--space-5);\n width: var(--space-2);\n height: var(--space-2);\n border-right: var(--border-width-strong) solid var(--color-input-text);\n border-bottom: var(--border-width-strong) solid var(--color-input-text);\n transform: translateY(-75%) rotate(45deg);\n pointer-events: none;\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: var(--text-small);\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__control {\n border-color: var(--color-danger);\n outline: var(--border-width) solid var(--color-danger);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n color: var(--color-text);\n}\n.ds-form__check--between {\n justify-content: space-between;\n min-height: var(--size-row);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__check-text {\n display: grid;\n}\n.ds-form__check-text small {\n font-size: var(--text-ui);\n color: var(--color-text-muted);\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 background: transparent;\n border: var(--border-width-strong) solid var(--color-input-border);\n border-radius: calc(var(--size-check) / 6);\n cursor: pointer;\n}\n.ds-form__checkbox:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-form__checkbox:checked::after {\n content: \"\";\n position: absolute;\n left: 30%;\n top: 5%;\n width: 35%;\n height: 65%;\n border-right: var(--border-width-strong) solid var(--color-button-text);\n border-bottom: var(--border-width-strong) solid var(--color-button-text);\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* table: an outlined container, the head in the bar tone */\n.ds-table-wrap {\n overflow-x: auto;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-canvas);\n font-size: var(--text-ui);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n height: var(--size-row-dense);\n padding: var(--space-2) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__name {\n font-family: var(--font-mono);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table a {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:hover {\n color: var(--color-link-hover);\n}\n\n/* list: rows with a leading tonal disc */\n.ds-list {\n display: grid;\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 min-height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-list__icon--1 { background: var(--color-fill-1); }\n.ds-list__icon--3 { background: var(--color-fill-3); }\n.ds-list__icon--4 { background: var(--color-fill-4); }\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n.ds-list--cards {\n gap: var(--space-2);\n}\n.ds-list--cards .ds-list__item,\n.ds-list--cards .ds-list__item:last-child {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list--cards .ds-list__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n box-shadow: none;\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__title,\n.ds-list--cards .ds-list__item.is-current .ds-list__text,\n.ds-list--cards .ds-list__item.is-current .ds-list__meta {\n color: var(--color-button-secondary-text);\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__icon {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* panel: a filled card; outlined and tonal variants */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel--outlined {\n background: var(--color-canvas);\n border-color: var(--color-border);\n box-shadow: none;\n}\n.ds-panel--tonal {\n background: var(--color-surface-strong);\n box-shadow: none;\n}\n.ds-panel--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: none;\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__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 color: var(--color-heading);\n}\n.ds-panel--accent .ds-panel__title {\n color: var(--color-accent-text);\n}\n.ds-panel__body {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel--accent .ds-panel__body {\n color: var(--color-accent-text);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n margin-bottom: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-2);\n}\n\n/* notices: tonal cards with a leading icon */\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n}\n.ds-notice__body {\n margin: 0;\n min-width: 0;\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__title,\n.ds-notice--error .ds-icon {\n color: var(--color-danger);\n}\n\n/* pagination: round links, the current one filled */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover, .ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-top: var(--border-width) solid currentColor;\n border-right: var(--border-width) solid currentColor;\n transform: rotate(45deg);\n}\n.ds-breadcrumb__link {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* dialog: a tinted sheet with the largest corners, on a scrim */\n.ds-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__icon {\n color: var(--color-link);\n}\n.ds-dialog__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 color: var(--color-heading);\n}\n.ds-dialog__body {\n margin: 0;\n font-size: var(--text-ui);\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-2);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-empty__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-empty);\n height: var(--size-empty);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 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 color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n max-width: 44ch;\n color: var(--color-text-muted);\n}\n\n/* snackbar: the inverted block */\n.ds-snackbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-row-dense);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-size: var(--text-ui);\n}\n.ds-snackbar__action {\n padding: var(--space-2) var(--space-3);\n color: var(--color-inverse-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* avatar: a tonal disc with initials; a stack overlaps them */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-1); }\n.ds-avatars {\n display: inline-flex;\n align-items: center;\n}\n.ds-avatars .ds-avatar + .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n box-shadow: 0 0 0 var(--border-width-strong) var(--color-canvas);\n}\n\n/* switch: the thumb grows and carries a tick when it is on */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: var(--size-chip);\n margin: 0;\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25%;\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-border-strong);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: var(--transition);\n}\n.ds-switch:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-switch:checked::before {\n left: 70%;\n width: var(--size-thumb-on);\n height: var(--size-thumb-on);\n background: var(--color-button-text);\n}\n.ds-switch:checked::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 70%;\n width: calc(var(--size-thumb) * 0.3);\n height: calc(var(--size-thumb) * 0.6);\n border-right: calc(var(--size-thumb) / 8) solid var(--color-button);\n border-bottom: calc(var(--size-thumb) / 8) solid var(--color-button);\n transform: translate(-50%, -60%) rotate(45deg);\n}\n.ds-switch:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n\n/* menu: a tonal sheet under its button */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-3) 0 var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button:hover, .ds-menu__button.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-menu[open] .ds-menu__button {\n border-radius: var(--radius-control);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 10;\n display: grid;\n gap: var(--space-1);\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-menu__item:hover, .ds-menu__item.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-menu__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* tooltip: a small inverted label under its trigger */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__text {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 10;\n margin-top: var(--space-1);\n padding: var(--space-1) var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-hover .ds-tooltip__text {\n opacity: 1;\n visibility: visible;\n}\n\n/* accordion: a group of tonal rows that open; only the group's outer corners are large */\n.ds-accordion {\n display: grid;\n gap: var(--space-1);\n}\n.ds-accordion__item {\n background: var(--fill-panel);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n box-shadow: var(--shadow-panel);\n}\n.ds-accordion__item:first-child {\n border-top-left-radius: var(--radius-panel);\n border-top-right-radius: var(--radius-panel);\n}\n.ds-accordion__item:last-child {\n border-bottom-left-radius: var(--radius-panel);\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: var(--space-2) var(--space-5);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: auto;\n border-right: var(--border-width-strong) solid currentColor;\n border-bottom: var(--border-width-strong) solid currentColor;\n transform: translateY(-25%) rotate(45deg);\n}\n.ds-accordion__item[open] .ds-accordion__summary::after {\n transform: translateY(25%) rotate(225deg);\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-accordion__hint {\n display: block;\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-4);\n color: var(--color-text-muted);\n}\n.ds-accordion__body p {\n margin: 0 0 var(--space-3);\n}\n\n/* progress: a thick track in two parts with a gap, and a stop dot at the end */\n.ds-progress {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n height: var(--size-track);\n}\n.ds-progress__bar {\n flex: 0 0 50%;\n height: 100%;\n background: var(--fill-button);\n border-radius: var(--radius-pill);\n}\n.ds-progress__rest {\n position: relative;\n flex: 1;\n height: 100%;\n background: var(--fill-button-secondary);\n border-radius: var(--radius-pill);\n}\n.ds-progress__rest::after {\n content: \"\";\n position: absolute;\n top: 25%;\n right: calc(var(--size-track) / 4);\n width: calc(var(--size-track) / 2);\n height: 50%;\n background: var(--color-button);\n border-radius: 50%;\n}\n.ds-progress--25 .ds-progress__bar { flex-basis: 25%; }\n.ds-progress--60 .ds-progress__bar { flex-basis: 60%; }\n.ds-progress--75 .ds-progress__bar { flex-basis: 75%; }\n.ds-progress--warning .ds-progress__bar { background: var(--color-warning); }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-progress__label strong {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* carousel: one wide slide and the narrow ends of the next ones */\n.ds-carousel {\n display: grid;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-2);\n min-height: var(--size-slide);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 0 16%;\n min-width: 0;\n padding: var(--space-5) var(--space-4);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: var(--radius-page);\n overflow: hidden;\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-carousel__slide--3 { background: var(--color-fill-3); flex-basis: 9%; }\n.ds-carousel__slide.is-current {\n flex: 1;\n padding: var(--space-5) var(--space-6);\n background: var(--color-surface-alt);\n}\n.ds-carousel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n width: 100%;\n}\n.ds-carousel__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-carousel__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-carousel__foot {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n width: 100%;\n}\n.ds-carousel__name {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-carousel__nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n}\n.ds-carousel__dot {\n display: block;\n width: var(--space-2);\n height: var(--space-2);\n background: var(--color-border-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n background: var(--color-link);\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-1);\n}\n\n/* tabs: pills on a tonal track */\n.ds-tabs {\n display: inline-flex;\n max-width: 100%;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface-alt);\n border-radius: var(--radius-pill);\n overflow-x: auto;\n}\n.ds-tabs__tab {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-5);\n color: var(--color-text-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover, .ds-tabs__tab.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* stats: pill tiles, a tonal disc and one figure each */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n.ds-stat {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-width: 0;\n padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n}\n.ds-stat__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-indicator);\n height: var(--size-indicator);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* shell: a plain top row, the content on the page tone, a floating bar of destinations at the foot */\n.ds-page {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: var(--size-bar) auto auto var(--size-dock-space);\n align-content: start;\n max-width: var(--size-page);\n min-height: 100vh;\n margin: 0 auto;\n padding: 0 var(--space-6);\n background: var(--fill-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-nav {\n position: relative;\n z-index: 5;\n grid-column: 1;\n grid-row: 1 / 5;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n pointer-events: none;\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n height: var(--size-bar);\n color: var(--color-text);\n pointer-events: auto;\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n.ds-menu__label {\n display: inline;\n}\n.ds-nav__dock {\n position: sticky;\n bottom: var(--space-4);\n align-self: center;\n display: flex;\n align-items: center;\n gap: var(--space-3);\n max-width: 100%;\n margin-bottom: var(--space-4);\n padding: var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-dialog);\n pointer-events: auto;\n}\n.ds-nav__links {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-width: var(--size-indicator);\n min-height: var(--size-fab);\n padding: 0 var(--space-5);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-nav__link:hover, .ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#room:target) .ds-nav__link[href=\"#room\"],\n.ds-page:has(#add:target) .ds-nav__link[href=\"#room\"],\n.ds-page:has(#routines:target) .ds-nav__link[href=\"#routines\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-bold);\n}\n.ds-nav__dock .ds-button--fab {\n border-radius: var(--radius-pill);\n box-shadow: none;\n}\n.ds-view {\n grid-column: 1;\n grid-row: 2;\n min-width: 0;\n padding-top: var(--space-2);\n}\n.ds-main {\n padding: var(--space-6) var(--space-7) var(--space-7);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n\n/* status: the secondary bar, one line about the whole house */\n.ds-status {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-pill);\n font-size: var(--text-ui);\n}\n.ds-status__text {\n flex: 1;\n min-width: 0;\n}\n.ds-status__action {\n display: inline-flex;\n align-items: center;\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) currentColor;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-status__action:hover {\n background: color-mix(in srgb, var(--color-bar-alt-text) 10%, transparent);\n}\n\n/* glance: the greeting on the page tone beside the rooms carousel */\n.ds-glance {\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n gap: var(--space-6);\n align-items: stretch;\n margin-top: var(--space-5);\n}\n.ds-hero {\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n padding: var(--space-4) 0 var(--space-4) var(--space-2);\n color: var(--color-text);\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 40ch;\n margin: var(--space-4) 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n.ds-filter {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin: var(--space-7) 0 var(--space-4);\n}\n.ds-filter .ds-link--more {\n margin-left: auto;\n}\n.ds-filter .ds-section__title {\n white-space: nowrap;\n}\n\n/* grid: one large shaped tile per device; a device that is off sits on the plain card tone */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-4);\n min-width: 0;\n min-height: var(--size-tile);\n padding: var(--space-5);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n transition: var(--transition);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell.is-off {\n background: var(--fill-panel);\n}\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n border-radius: var(--radius-panel);\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n}\n.ds-grid__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: 50%;\n}\n.ds-grid__title {\n display: block;\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 color: var(--color-heading);\n text-decoration: none;\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-figure {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-panel--accent .ds-figure,\n.ds-panel--accent .ds-progress__label,\n.ds-panel--accent .ds-progress__label strong {\n color: var(--color-accent-text);\n}\n.ds-panel .ds-list__item {\n padding-left: 0;\n padding-right: 0;\n}\n.ds-snackbar {\n max-width: var(--size-dialog);\n margin: var(--space-6) auto 0;\n}\n.ds-section--first {\n margin-top: var(--space-5);\n}\n\n/* sidebar: the section list of the settings view */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-sidebar {\n display: grid;\n gap: var(--space-1);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: 0 var(--space-4) var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-fab);\n padding: 0 var(--space-5);\n color: var(--color-text-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-sidebar__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-people {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* footer: one quiet line under the content */\n.ds-footer {\n grid-column: 1;\n grid-row: 3;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin-top: var(--space-5);\n padding: var(--space-4) var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__legal {\n margin: 0;\n}\n\n@media (max-width: 1000px) {\n .ds-glance,\n .ds-columns,\n .ds-columns--even,\n .ds-layout {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid,\n .ds-stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: wrap;\n }\n}\n@media (max-width: 640px) {\n .ds-page {\n padding: 0 var(--space-3);\n }\n .ds-nav .ds-brand__name {\n font-size: var(--text-base);\n }\n .ds-menu__label,\n .ds-nav__tools .ds-tooltip {\n display: none;\n }\n .ds-nav__dock {\n gap: var(--space-1);\n border-radius: var(--radius-page);\n }\n .ds-nav__links {\n gap: 0;\n }\n .ds-nav__link {\n flex-direction: column;\n gap: 0;\n padding: var(--space-1) var(--space-2);\n font-size: var(--text-small);\n }\n .ds-main {\n padding: var(--space-5) var(--space-4);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-stats,\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell {\n padding: var(--space-4);\n }\n .ds-carousel__slide {\n flex-basis: 14%;\n padding: var(--space-4) var(--space-2);\n }\n .ds-carousel__slide--3 {\n display: none;\n }\n .ds-carousel__slide.is-current {\n padding: var(--space-4) var(--space-5);\n }\n .ds-carousel__name {\n display: none;\n }\n .ds-carousel__value {\n font-size: var(--text-h1);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-filter {\n flex-wrap: wrap;\n gap: var(--space-3);\n }\n .ds-status__action,\n .ds-table__extra {\n display: none;\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n position: relative;\n }\n .ds-nav__inner > .ds-menu {\n position: static;\n }\n .ds-nav__inner > .ds-menu .ds-menu__list {\n right: 0;\n left: 0;\n min-width: 0;\n }\n}\n\n/* ---------- phones: the section list is one strip that scrolls sideways from edge to edge, fading at the right ---------- */\n@media (max-width: 640px) {\n .ds-sidebar {\n min-width: 0;\n max-width: 100%;\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: nowrap;\n margin: 0 calc(var(--space-4) * -1);\n padding: var(--space-2) var(--space-7) var(--space-2) var(--space-4);\n overflow-x: auto;\n scrollbar-width: none;\n -webkit-mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-7)), transparent);\n mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-7)), transparent);\n }\n .ds-sidebar__list > li {\n flex: none;\n }\n .ds-sidebar__link {\n white-space: nowrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal home control specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
\n Mill Lane\n \n
\n
\n Two alerts today\n IV\n
\n
\n \n
\n\n
\n
Both doors are locked and nobody is away.Set away mode
\n\n
\n
\n

Thursday evening, 9° outside

\n

Good evening, Ines

\n

Seven things are on. The heating drops to 18° at eleven.

\n
\n Run Evening\n Add a device\n
\n
\n\n
\n
    \n
  • \n
    Living roomOpen room
    \n
    \n

    21.5°

    Heating to 22°, three lights on, blinds down

    \n IVTR\n
    \n
    • \n
  • Kitchen
    • \n
    • \n
\n
\n
\n \n
\n
\n
\n\n
\n

7

Devices on

\n

20.8°

Average indoors

\n

3.2 kWh

Used today

\n

2 of 2

Doors locked

\n
\n\n
\n

Favourites

\n \n All rooms \n
\n\n
\n
Sofa lamp

On, 60% warm white

\n
Radiators

Heating to 22°

\n
Front door

Locked at 18:42

\n
Kitchen speaker

Playing the news, quietly

\n
Bedroom blinds

Open since 07:10

\n
Bathroom fan

Off, humidity 48%

\n
Low battery
Garden camera

Idle, 14% left

\n
Desk socket

Off since Tuesday

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

Lately

Whole log
\n \n
\n
\n
\n

Energy today

Below average
\n

3.2 kWh

\n

Heating2.3 kWh

\n

Lights and sockets0.9 kWh

\n
By roomTariff
\n
\n
Hall light turned offUndo
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. Rooms
    3. \n
  3. Living room
    4. \n
\n
\n
\n

Living room

\n

Seven devices, 21.5°, last movement four minutes ago

\n
\n
\n Edit room\n Add a device\n
\n
\n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
DeviceKindStateWattsChanged
Sofa lampLightOn618:30
Ceiling lightsLight groupOn2218:30
RadiatorsThermostatHeating84017:55
BlindsCoverDown018:30
Window sensorSensorLow battery0Monday
Shelf speakerSpeakerOffline02 May
\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
    • \n
\n
\n
\n
\n

Climate

The target follows the schedule
\n

21.5°

\n

Heating to 22°about ten minutes

\n
Lower by 1°Schedule
\n
\n
\n

In this room

\n
IVTRInes and Tomas, since 18:10
\n
Ground floorNew sensor5 online1 low battery1 offline
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Routines

\n

Things the house does by itself, at a time or when something happens

\n
\n
\n New routine\n
\n
\n \n
\n
\n
    \n
  • Evening

    At sunset: four lights on, blinds down, heating to 22°

    • \n
  • Morning

    Weekdays at 06:40: bedroom blinds up, kitchen speaker on

    • \n
  • Last one out

    When nobody is home: lock both doors, everything off

    • \n
  • Water the beds

    Every second day at 05:30, unless it rained

    • \n
\n
\n \n

Nothing runs while you are away

\n

An away routine can switch a lamp on at dusk or keep the heating low until you are back.

\n Make an away routine\n
\n
\n
\n
\n
\n \n

Delete Water the beds?

\n

The routine and its history are removed for everyone in Mill Lane. The valve itself stays in the garden room.

\n
Keep itDelete
\n
\n
\n
\n

Read more

\n \n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. Living room
    3. \n
  3. Add a device
    4. \n
\n
\n
\n

Add a device

\n

Step two of three: name it and put it in a room

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

A plug was found nearbyKeep it within two metres of the hub until pairing has finished.

\n

The pairing code did not matchCheck the six characters on the back of the plug and enter them again.

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

Before you pair

\n

Most plugs, lamps and sensors join in under a minute. A few things make it go wrong.

\n

Hold the button on the device until its light blinks, then enter the code printed as CS-000000 on the back. The hub listens for five minutes; after that, start again.

\n

If nothing is found

\n
    \n
  • Move the device closer to the hub
    • \n
  • Take the battery tab out, if it has one
    • \n
  • Switch other new devices off for the moment
    • \n
\n

Devices from other makers

\n

Anything that speaks the common home standard can join. Cameras need the wired network.

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

Settings

\n

Mill Lane, three people, 23 devices on one hub

\n
\n
\n Done\n
\n
\n
\n \n
\n
\n
\n PresenceHow the house knows who is in\n
\n \n \n
\n
\n
\n AlertsDoors, smoke, water and low batteries\n

Alerts go to everyone who is away, and to the hall panel.

\n
\n
\n EnergyTariff, meter and the daily total\n

The meter is read every quarter of an hour.

\n
\n
\n HubVersion 4.2, up to date\n

Updates install at night, when nothing is running.

\n
\n
\n
\n
\n

People

\n
    \n
  • IV
    Ines Varga

    Owner, at home

    Home
    • \n
  • TR
    Tomas Reyl

    Can change routines

    Home
    • \n
  • MO
    Mara Oyelaran

    Guest until Sunday

    Away
    • \n
\n
\n
\n

Hub storage

\n

Camera clips11.6 of 16 GB

\n

Clips older than two weeks are removed first.

\n
Clear old clipsRemove this home
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.material-you.app.s07.p03.t03.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-my-7331\",\n \"short\": \"v1-my-7331\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f8ebe0;\n --color-canvas: #fff8f4;\n --color-surface: #fdf1e7;\n --color-surface-alt: #f4e5d8;\n --color-surface-strong: #ecdccd;\n --color-bar: #f8ebe0;\n --color-bar-text: #221a14;\n --color-bar-alt: #f6e0b0;\n --color-bar-alt-text: #241a04;\n --color-inverse: #382e28;\n --color-inverse-text: #ffede2;\n --color-text: #221a14;\n --color-text-muted: #52443b;\n --color-heading: #2e1508;\n --color-heading-alt: #8f4c1c;\n --color-link: #9a4a14;\n --color-link-quiet: #221a14;\n --color-link-visited: #5f6135;\n --color-link-hover: #733509;\n --color-link-active: #351000;\n --color-border: #d7c2b7;\n --color-border-strong: #85736a;\n --color-border-muted: #eeddd0;\n --color-accent: #ffdbc8;\n --color-accent-text: #351000;\n --color-accent-alt: #5f6135;\n --color-fill-1: #ffdbc8;\n --color-fill-2: #f6e0b0;\n --color-fill-3: #e5e6ad;\n --color-fill-4: #ecdccd;\n --color-button: #9a4a14;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f6e0b0;\n --color-button-secondary-text: #241a04;\n --color-input: #fff8f4;\n --color-input-text: #221a14;\n --color-input-border: #85736a;\n --color-disabled: #eadfd6;\n --color-disabled-text: #a3948a;\n --color-danger: #ba1a1a;\n --color-danger-surface: #ffdad6;\n --color-success: #4a6a1c;\n --color-warning: #a86400;\n --color-notice: #e5e6ad;\n --color-notice-text: #1c1d00;\n --color-focus: #9a4a14;\n --color-shadow: #3b1e0a;\n --color-overlay: rgb(34 26 20 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Noto Sans\", \"Open Sans\", \"Segoe UI\", Arial, sans-serif;\n --font-heading: \"Roboto Serif\", \"Noto Serif\", \"Source Serif 4\", Georgia, serif;\n --font-ui: \"Noto Sans\", \"Open Sans\", \"Segoe UI\", Arial, sans-serif;\n --font-mono: \"Noto Sans Mono\", \"Source Code Pro\", Menlo, monospace;\n --text-base: 17px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 52px;\n --text-h1: 34px;\n --text-h2: 26px;\n --text-h3: 21px;\n --line-body: 1.55;\n --line-heading: 1.3;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 400;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 16px;\n --radius-pill: 9999px;\n --radius-page: 28px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 1px 3px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-surface-alt);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 90%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);\n --backdrop-blur: 0px;\n}\n" } }