{
  "id": "v1-my-1111",
  "long_id": "v1.material-you.app.s01.p01.t01.u01",
  "name": "Tonal notes app, 2023",
  "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": "pure",
  "viewport": {
    "width": 1440,
    "fluid": false
  },
  "summary": "An app screen in the tonal language of 2021 to 2026: a narrow navigation rail on a lilac-grey surface container, and all content on one large rounded sheet of the palest surface tone. Every colour is a tint of one violet key colour, with a pink tertiary for contrast; corners are 16 to 28px, buttons and navigation indicators are full pills, and depth is shown by a stronger tint, with a shadow only under the floating action button, the search bar and dialogs. Type is one neutral grotesque (Roboto) at 16px with a regular-weight 57px display size.",
  "url": "https://chrono.skin/s/v1-my-1111",
  "preview_url": "https://chrono.skin/s/v1-my-1111/specimen.html",
  "files": {
    "STYLE.md": "# Tonal notes app, 2023\n\n## Summary\n\nAn app screen in the tonal language of 2021 to 2026: a narrow navigation rail on a lilac-grey surface container, and all content on one large rounded sheet of the palest surface tone. Every colour is a tint of one violet key colour, with a pink tertiary for contrast; corners are 16 to 28px, buttons and navigation indicators are full pills, and depth is shown by a stronger tint, with a shadow only under the floating action button, the search bar and dialogs. Type is one neutral grotesque (Roboto) at 16px with a regular-weight 57px display size.\n\n## Layout\n\n- Designed at 1440px; `--size-page` is 1440px and the page does not stretch beyond it. Two columns: the rail `.ds-nav` (`--size-rail` 96px) on the left, sticky, and the views on the right. Each view is one `.ds-main` sheet (`--color-canvas`, `--radius-page`) with `--space-3` between it and the window edge and `--space-5` by `--space-6` of padding.\n- The rail holds, from the top: `.ds-brand` (mark above a small name), the floating action button, then the destinations, each an icon in a 56 by 32px pill (`--size-indicator`, `--size-chip`) above a 12px label.\n- Home view, top to bottom inside the sheet: `.ds-topbar` (search pill, an icon button, the avatar), `.ds-hero` (a tonal card with a kicker, the display title, a lead and two buttons on the left, `.ds-shapes` on the right), `.ds-stats` `--space-3` under it, `.ds-filter` (chips and a link), `.ds-panes` (the list of note cards at 5 parts, the open note in a `.ds-panel.ds-detail` at 7 parts), a `.ds-section` with the `.ds-grid` of four notebook tiles, and a `.ds-snackbar`. `.ds-footer` is a tonal strip under the sheet.\n- Spacing: `--space-1` 4px (icon to label, tab gap), `--space-2` 8px (between list cards, between buttons and chips), `--space-3` 12px (between stat tiles and grid tiles, sheet to window edge), `--space-4` 16px (list row padding, between panes, field gap), `--space-5` 24px (card padding, columns gap, rail item gap), `--space-6` 32px (sheet side padding, detail card padding), `--space-7` 40px (above a section, hero top and bottom), `--space-8` 56px (hero sides).\n- Heights: buttons and avatars `--size-control` 40px; fields and the search bar `--size-field` 56px; floating action button `--size-fab` 56px; chips and the switch `--size-chip` 32px; list rows `--size-row` 72px; table rows and tabs `--size-row-dense` 48px; grid tiles at least `--size-tile` 148px. `--size-measure` 680px caps running text, `--size-dialog` is 400px, `--size-art` 240px.\n- Inner pages (every view but the home view) have no hero and no top bar. The rail stays; the sheet opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header`, then the working components: `.ds-tabs` and the table; or `.ds-columns` with the main block at 3 parts and a `.ds-stack` of cards at 2; or `.ds-layout`, a `.ds-sidebar` of sections at 1 part and the form at 3.\n- Views: `notes` (home) is the list and detail screen. `note` is one note opened: breadcrumb, page header, the text, linked notes and the delete dialog. `notebooks` is the table of notebooks under tabs, with status badges and pagination. `archive` is shown empty beside the recently deleted notes. `settings` has the section list, two notices and the account form with switches.\n- Below 1000px the panes, columns and settings layout become one column, the grid two, and the artwork is dropped. Below 640px the rail becomes a top row (brand and floating action button) and a bottom navigation bar fixed to the window edge with the same pill indicators; stats stack, the page header stacks, and `.ds-table__extra` cells are hidden.\n\n## Typography and colour roles\n\n- One family: `--font-body`, `--font-heading` and `--font-ui` are the same Roboto stack; `--font-mono` (Roboto Mono) is for code only.\n- Sizes: `--text-base` 16px at `--line-body` 1.5; `--text-small` 12px (rail labels, field labels, badges, list meta); `--text-ui` 14px (buttons, chips, tabs, table cells, list second lines); `--text-large` 22px (hero lead, prose lead); `--text-display` 57px at `--line-display` 1.12 with `--display-tracking` -0.25px (hero title only); `--text-h1` 36px, `--text-h2` 28px, `--text-h3` 22px at `--line-heading` 1.25.\n- Weights: headings and display are 400; `--weight-ui` and `--weight-bold` are 500. Nothing is heavier than 500. `--ui-transform` is `none`: labels are sentence case.\n- Links are not underlined at rest (`--link-decoration` `none`), 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 `<body>`: the two-column shell on `--fill-page`.\n- `.ds-nav`: the navigation rail on `--fill-bar`. `.ds-nav__inner` is the sticky column; `.ds-nav__links` holds `.ds-nav__link` items, each a `.ds-nav__pill` with an icon above the label. The current item (`is-current`, or the rule for the open view) fills its pill with `--fill-button-secondary`.\n- `.ds-main`: the content sheet of a view. `.ds-topbar`: the row with the search bar on the home view.\n- `.ds-hero`: the tonal greeting card in `--fill-accent`. `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and a `.ds-buttons` group; an outlined button inside it takes the accent text colour.\n- `.ds-filter`: chips on the left, a link on the right. `.ds-panes`: list and detail side by side. `.ds-detail` is the open note: `.ds-detail__bar` with a badge and `.ds-detail__tools`, `.ds-detail__title`, the text and a `.ds-todo` checklist.\n- `.ds-grid`: four tiles. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has an icon, `.ds-grid__title` and `.ds-grid__text`; hovering tightens the corners to `--radius-panel`.\n- `.ds-tabs`: a hairline-ruled row of `.ds-tabs__tab`; `is-current` is link-coloured with a short rounded `--border-width-strong` indicator under the label.\n- `.ds-sidebar`: the section list of the settings view, a filled card with `.ds-sidebar__title` and a `.ds-sidebar__list` of pill-shaped `.ds-sidebar__link` rows; `is-current` is on the secondary container. `.ds-layout` places it beside the content.\n- `.ds-footer`: a rounded strip on `--fill-bar-alt` with `.ds-footer__legal` and `.ds-footer__links` of `.ds-footer__link`.\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-page-header`: the head of an inner view, unboxed on the sheet. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text` (one muted line); `.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 in a row.\n- `.ds-button`: the filled pill button. `--secondary` is the tonal button, `--outlined` has a `--color-border-strong` outline and a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` it is a danger-coloured text button for dialogs), `--large` is the tall form for a hero or an order form, `--icon` is a round icon button, `--fab` is the floating action button, a rounded square in `--fill-accent`, and `--on-inverse` is the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. Never more than one filled button in a group.\n- `.ds-icon`: stroked inline SVG in the current text colour; `--small` inside buttons, chips and tabs.\n- `.ds-chip`: an outlined 32px chip; `is-current` fills it with the secondary container. Group with `.ds-chips`.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (56px, outlined, `--fill-input`; `--area` for a textarea; wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields side by side. `is-focus` shows the focus ring, `is-invalid` on the field 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-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger and in `--color-button-text` on a `--fill-button` track when on.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; rows are divided by `--color-border-muted`; `.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`, each with an optional `.ds-list__icon` disc (`--1`, `--3`, `--4` pick the fill), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` or a button on the right. `--cards` turns every row into its own filled card, `--space-2` apart, and `is-current` puts the selected 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` is the outlined card on the canvas, `--tonal` the stronger tint, `--accent` the primary container. A card is filled or outlined, never both.\n- `.ds-stat`: one summary figure, a tile with `.ds-stat__value` and `.ds-stat__label`. Three or more sit in a `.ds-stats` row.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, and `--success`, `--warning`, `--danger` are the 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` with a danger-coloured title. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is filled like the primary button, `is-disabled` is grey; previous and next are chevron icons.\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, an optional `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned text buttons in `.ds-dialog__actions`. It sits on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark` (a rounded square in `--fill-accent` holding an icon), `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-search`: the search bar, one pill on `--fill-input` with an icon and `.ds-search__text`. `.ds-avatar`: a disc with initials. `.ds-snackbar`: a short message on `--fill-inverse` with `.ds-snackbar__action`. `.ds-shapes` with `.ds-shape--1` to `--4`: the circle, rounded square and pill drawn as artwork.\n- `.ds-section` 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 in one of them.\n\n## Never\n\n- `row-gap <= 12px`: list cards are 8px apart and table rows touch.\n- `block-gap <= 40px`: blocks on the sheet are 12 to 40px apart.\n- `uppercase-text = 0%`: buttons, tabs and navigation labels are sentence case.\n- `font-weight <= 500`: emphasis is medium, never bold.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 12px`: the smallest labels are 12px.\n- `font-size <= 57px`: the hero title is the largest text.\n- `font-families <= 2`: one sans-serif plus the mono for code.\n- `line-height <= 1.6`: body text is 16px on a 24px line.\n- `underlined-links <= 10%`: links are marked by colour; only the snackbar action is underlined.\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. Anything that holds content is a `.ds-panel`: filled with a container tone, or outlined on the canvas, with `--radius-panel`. Anything pressed is a `.ds-button` variant and stays a full pill. A selected state is the secondary container (`--fill-button-secondary` with `--color-button-secondary-text`) on a pill or on the item itself. 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-rail: 96px;\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: 48px;\n  --size-indicator: 56px;\n  --size-area: 120px;\n  --size-dialog: 400px;\n  --size-empty: 96px;\n  --size-art: 240px;\n  --size-tile: 148px;\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  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--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\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 {\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\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--count {\n  background: var(--color-danger);\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/* avatar: a tonal disc with initials */\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  text-decoration: none;\n}\n\n/* search: one pill */\n.ds-search {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  flex: 1;\n  min-width: 0;\n  min-height: var(--size-field);\n  padding: 0 var(--space-5);\n  background: var(--fill-input);\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-hover);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  text-decoration: none;\n}\n.ds-search__text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\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/* switch: the thumb grows 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: 69%;\n  width: var(--size-thumb-on);\n  height: var(--size-thumb-on);\n  background: var(--color-button-text);\n}\n.ds-switch:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\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/* stats: tonal tiles, one figure each */\n.ds-stats {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-3);\n}\n.ds-stat {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n}\n.ds-stat__value {\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-stat__label {\n  margin: 0;\n  font-size: var(--text-ui);\n  color: var(--color-text-muted);\n}\n\n/* tabs: primary tabs with a short rounded indicator */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-1);\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  overflow-x: auto;\n}\n.ds-tabs__tab {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-row-dense);\n  padding: 0 var(--space-4);\n  color: var(--color-text-muted);\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  color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n  color: var(--color-link);\n}\n.ds-tabs__tab.is-current::after {\n  content: \"\";\n  position: absolute;\n  left: var(--space-4);\n  right: var(--space-4);\n  bottom: 0;\n  height: var(--border-width-strong);\n  background: var(--color-link);\n  border-radius: var(--border-width-strong) var(--border-width-strong) 0 0;\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  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/* shapes: the soft geometric figures used as artwork */\n.ds-shapes {\n  position: relative;\n  flex: none;\n  width: var(--size-art);\n  height: var(--size-art);\n}\n.ds-shape {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text);\n}\n.ds-shape--1 {\n  inset: 0 40% 40% 0;\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border-radius: 50%;\n}\n.ds-shape--2 {\n  inset: 12% 0 46% 52%;\n  background: var(--color-fill-3);\n  border-radius: var(--radius-page);\n}\n.ds-shape--3 {\n  inset: 58% 30% 0 8%;\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-radius: var(--radius-pill);\n}\n.ds-shape--4 {\n  inset: 62% 0 6% 74%;\n  background: var(--color-canvas);\n  border-radius: var(--radius-panel);\n}\n.ds-hero__copy {\n  min-width: 0;\n}\n.ds-section--tight {\n  margin-top: var(--space-4);\n}\n\n\n/* shell: a navigation rail on the page tone, the content on one rounded sheet */\n.ds-page {\n  display: grid;\n  grid-template-columns: var(--size-rail) minmax(0, 1fr);\n  align-content: start;\n  max-width: var(--size-page);\n  min-height: 100vh;\n  margin: 0 auto;\n  padding: 0;\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  grid-column: 1;\n  grid-row: 1 / span 2;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-nav__inner {\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-4) 0;\n}\n.ds-nav .ds-brand {\n  flex-direction: column;\n  gap: var(--space-1);\n}\n.ds-nav .ds-brand__name {\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n}\n.ds-nav__links {\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-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  text-transform: var(--ui-transform);\n  text-decoration: none;\n  opacity: 0.8;\n}\n.ds-nav__pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-indicator);\n  height: var(--size-chip);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-nav__link:hover .ds-nav__pill, .ds-nav__link.is-hover .ds-nav__pill {\n  background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible .ds-nav__pill {\n  outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#notes\"],\n.ds-page:has(#notes:target) .ds-nav__link[href=\"#notes\"],\n.ds-page:has(#note:target) .ds-nav__link[href=\"#notes\"],\n.ds-page:has(#notebooks:target) .ds-nav__link[href=\"#notebooks\"],\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-nav__link.is-current {\n  opacity: 1;\n  font-weight: var(--weight-bold);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#notes\"] .ds-nav__pill,\n.ds-page:has(#notes:target) .ds-nav__link[href=\"#notes\"] .ds-nav__pill,\n.ds-page:has(#note:target) .ds-nav__link[href=\"#notes\"] .ds-nav__pill,\n.ds-page:has(#notebooks:target) .ds-nav__link[href=\"#notebooks\"] .ds-nav__pill,\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"] .ds-nav__pill,\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] .ds-nav__pill,\n.ds-nav__link.is-current .ds-nav__pill {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-view {\n  grid-column: 2;\n  min-width: 0;\n}\n.ds-main {\n  margin: var(--space-3) var(--space-3) 0 0;\n  padding: var(--space-5) var(--space-6) var(--space-6);\n  background: var(--color-canvas);\n  border-radius: var(--radius-page);\n}\n.ds-topbar {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin-bottom: var(--space-5);\n}\n\n/* hero: one tonal card with the greeting and the main action */\n.ds-hero {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-6);\n  padding: var(--space-7) var(--space-8);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-page);\n}\n.ds-hero__kicker {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\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-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n  max-width: 52ch;\n  margin: var(--space-3) 0 var(--space-5);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n.ds-hero .ds-button--outlined {\n  color: var(--color-accent-text);\n  border-color: var(--color-accent-text);\n}\n.ds-hero .ds-button--outlined:hover {\n  background: color-mix(in srgb, var(--color-accent-text) 10%, transparent);\n}\n.ds-stats {\n  margin-top: var(--space-3);\n}\n.ds-filter {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: var(--space-6) 0 var(--space-4);\n}\n\n/* list and detail panes */\n.ds-panes {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  gap: var(--space-4);\n  align-items: stretch;\n}\n.ds-detail {\n  gap: var(--space-4);\n  padding: var(--space-6);\n}\n.ds-detail__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n}\n.ds-detail__tools {\n  display: flex;\n  gap: var(--space-1);\n  color: var(--color-text-muted);\n}\n.ds-detail__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  color: var(--color-heading);\n}\n.ds-todo {\n  display: grid;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* grid: notebooks as tonal tiles */\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-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  text-decoration: none;\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:hover, .ds-grid__cell.is-hover {\n  border-radius: var(--radius-panel);\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  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-ui);\n  color: var(--color-text-muted);\n}\n.ds-snackbar {\n  max-width: var(--size-dialog);\n  margin: var(--space-6) auto 0;\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  padding: var(--space-3);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-3) 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-row-dense);\n  padding: 0 var(--space-4);\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\n/* footer: one tonal strip under the sheet */\n.ds-footer {\n  grid-column: 2;\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: var(--space-3) var(--space-3) var(--space-3) 0;\n  padding: var(--space-3) var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-radius: var(--radius-page);\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-bar-alt-text);\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-panes,\n  .ds-columns,\n  .ds-columns--even,\n  .ds-layout {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-shapes {\n    display: none;\n  }\n  .ds-sidebar__list {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 640px) {\n  .ds-page {\n    grid-template-columns: minmax(0, 1fr);\n    padding-bottom: calc(var(--size-row) + var(--space-4));\n  }\n  .ds-nav,\n  .ds-view,\n  .ds-footer {\n    grid-column: 1;\n  }\n  .ds-nav {\n    grid-row: auto;\n  }\n  .ds-nav__inner {\n    position: static;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav .ds-brand {\n    flex-direction: row;\n    gap: var(--space-3);\n  }\n  .ds-nav .ds-brand__name {\n    font-size: var(--text-large);\n    font-weight: var(--weight-heading);\n  }\n  .ds-nav__links {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 5;\n    flex-direction: row;\n    justify-content: space-around;\n    padding: var(--space-3) var(--space-2);\n    background: var(--fill-bar);\n  }\n  .ds-main {\n    margin: 0 var(--space-2);\n    padding: var(--space-4);\n  }\n  .ds-footer {\n    margin: var(--space-2);\n    padding: var(--space-4);\n  }\n  .ds-hero {\n    padding: var(--space-5);\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-page-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .ds-filter {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .ds-table__extra {\n    display: none;\n  }\n  .ds-detail {\n    padding: var(--space-4);\n  }\n  .ds-prose h1 {\n    font-size: var(--text-h2);\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: tonal notes app specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#notes\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <a class=\"ds-button ds-button--fab\" href=\"#note\" aria-label=\"New note\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20l1-5L16 4l4 4L9 19z\"/></svg></a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#notes\"><span class=\"ds-nav__pill\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 3h9l4 4v14H6z M9 12h6 M9 16h6\"/></svg></span>Notes</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#notebooks\"><span class=\"ds-nav__pill\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z M9 4v12\"/></svg></span>Notebooks</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#archive\"><span class=\"ds-nav__pill\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h16v4H4z M6 9v10h12V9 M10 13h4\"/></svg></span>Archive</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#settings\"><span class=\"ds-nav__pill\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6 M12 3v3 M12 18v3 M3 12h3 M18 12h3 M5.6 5.6l2.1 2.1 M16.3 16.3l2.1 2.1 M5.6 18.4l2.1-2.1 M16.3 7.7l2.1-2.1\"/></svg></span>Settings</a></li>\n    </ul>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"notes\">\n  <div class=\"ds-main\">\n    <div class=\"ds-topbar\">\n      <a class=\"ds-search\" href=\"#archive\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 4a7 7 0 1 0 0 14a7 7 0 0 0 0-14 M16 16l4 4\"/></svg><span class=\"ds-search__text\">Search your notes</span></a>\n      <a class=\"ds-button ds-button--icon\" href=\"#settings\" aria-label=\"Reminders\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 17V11a6 6 0 0 1 12 0v6l2 2H4z M10 21h4\"/></svg></a>\n      <a class=\"ds-avatar\" href=\"#settings\">IV</a>\n    </div>\n\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <div class=\"ds-hero__copy\">\n        <p class=\"ds-hero__kicker\">Tuesday, 14 notes in four notebooks</p>\n        <h1 class=\"ds-hero__title\">Good morning, Ines</h1>\n        <p class=\"ds-hero__lead\">Three notes changed since yesterday, and one reminder is due at noon.</p>\n        <div class=\"ds-buttons\">\n          <a class=\"ds-button\" href=\"#note\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14 M5 12h14\"/></svg>New note</a>\n          <a class=\"ds-button ds-button--outlined\" href=\"#notebooks\">Open notebooks</a>\n        </div>\n      </div>\n      <div class=\"ds-shapes\" aria-hidden=\"true\">\n        <span class=\"ds-shape ds-shape--1\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20l1-5L16 4l4 4L9 19z\"/></svg></span>\n        <span class=\"ds-shape ds-shape--2\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4l2.5 5.2 5.5.8-4 4 1 5.6-5-2.8-5 2.8 1-5.6-4-4 5.5-.8z\"/></svg></span>\n        <span class=\"ds-shape ds-shape--3\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12l5 5 9-10\"/></svg></span>\n        <span class=\"ds-shape ds-shape--4\"></span>\n      </div>\n    </div>\n\n    <div class=\"ds-stats\" data-component=\"stats\">\n      <div class=\"ds-stat\"><p class=\"ds-stat__value\">14</p><p class=\"ds-stat__label\">Notes this month</p></div>\n      <div class=\"ds-stat\"><p class=\"ds-stat__value\">5</p><p class=\"ds-stat__label\">Shared with you</p></div>\n      <div class=\"ds-stat\"><p class=\"ds-stat__value\">2</p><p class=\"ds-stat__label\">Reminders today</p></div>\n    </div>\n\n    <div class=\"ds-filter\">\n      <ul class=\"ds-chips\">\n        <li><a class=\"ds-chip is-current\" href=\"#notes\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12l5 5 9-10\"/></svg>All notes</a></li>\n        <li><a class=\"ds-chip\" href=\"#notes\">Pinned</a></li>\n        <li><a class=\"ds-chip\" href=\"#notes\">Shared</a></li>\n        <li><a class=\"ds-chip\" href=\"#notes\">With reminders</a></li>\n      </ul>\n      <a class=\"ds-link ds-link--more\" href=\"#archive\">Show archived <svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 6l6 6-6 6\"/></svg></a>\n    </div>\n\n    <div class=\"ds-panes\">\n      <ul class=\"ds-list ds-list--cards\" data-component=\"list\">\n        <li class=\"ds-list__item is-current\"><span class=\"ds-list__icon\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 3h9l4 4v14H6z M9 12h6 M9 16h6\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Allotment plan for spring</a><p class=\"ds-list__text\">Beds two and three get the beans this year</p></div><span class=\"ds-list__meta\">09:12</span></li>\n        <li class=\"ds-list__item\"><span class=\"ds-list__icon ds-list__icon--3\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4l2.5 5.2 5.5.8-4 4 1 5.6-5-2.8-5 2.8 1-5.6-4-4 5.5-.8z\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Reading list</a><p class=\"ds-list__text\">Six titles, two finished, one abandoned</p></div><span class=\"ds-list__meta\">Mon</span></li>\n        <li class=\"ds-list__item\"><span class=\"ds-list__icon\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4a4 4 0 1 0 0 8a4 4 0 0 0 0-8 M4 20a8 8 0 0 1 16 0\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Choir rota, shared by Tomas</a><p class=\"ds-list__text\">You are down for the second Thursday</p></div><span class=\"ds-list__meta\">Mon</span></li>\n        <li class=\"ds-list__item\"><span class=\"ds-list__icon ds-list__icon--1\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 17V11a6 6 0 0 1 12 0v6l2 2H4z M10 21h4\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Boiler service</a><p class=\"ds-list__text\">Reminder at noon: ring to confirm the visit</p></div><span class=\"ds-list__meta\">Sun</span></li>\n        <li class=\"ds-list__item\"><span class=\"ds-list__icon ds-list__icon--4\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 3h9l4 4v14H6z M9 12h6 M9 16h6\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Soup, the one with barley</a><p class=\"ds-list__text\">Sweat the leeks slowly, do not brown them</p></div><span class=\"ds-list__meta\">2 May</span></li>\n      </ul>\n\n      <article class=\"ds-panel ds-detail\" data-component=\"panel\">\n        <div class=\"ds-detail__bar\">\n          <span class=\"ds-badge\">Garden</span>\n          <span class=\"ds-detail__tools\">\n            <a class=\"ds-button ds-button--icon\" href=\"#note\" aria-label=\"Share\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 15V4 M8 8l4-4 4 4 M5 13v6h14v-6\"/></svg></a>\n            <a class=\"ds-button ds-button--icon\" href=\"#archive\" aria-label=\"Archive\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h16v4H4z M6 9v10h12V9 M10 13h4\"/></svg></a>\n            <a class=\"ds-button ds-button--icon\" href=\"#note\" aria-label=\"Delete\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 7h14 M9 7V4h6v3 M7 7l1 13h8l1-13\"/></svg></a>\n          </span>\n        </div>\n        <h2 class=\"ds-panel__title ds-detail__title\">Allotment plan for spring</h2>\n        <div class=\"ds-panel__body\">\n          <p>Beds two and three get the beans this year, so the brassicas move to the far end by the water butt. The shed roof wants felting before any of it.</p>\n          <p>Order seed potatoes by the end of the week. Ask Tomas about the spare cold frame.</p>\n        </div>\n        <ul class=\"ds-todo\">\n          <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Measure bed three</label></li>\n          <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Turn the compost</label></li>\n          <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> Felt the shed roof</label></li>\n        </ul>\n        <div class=\"ds-panel__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#note\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20l1-5L16 4l4 4L9 19z\"/></svg>Open and edit</a>\n          <a class=\"ds-button ds-button--text\" href=\"#note\">Add a reminder</a>\n        </div>\n      </article>\n    </div>\n\n    <div class=\"ds-section\">\n      <div class=\"ds-section__head\"><h2 class=\"ds-section__title\">Notebooks</h2><a class=\"ds-link ds-link--more\" href=\"#notebooks\">Manage <svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 6l6 6-6 6\"/></svg></a></div>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <a class=\"ds-grid__cell\" href=\"#notebooks\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z M9 4v12\"/></svg><span><h3 class=\"ds-grid__title\">Garden</h3><p class=\"ds-grid__text\">6 notes, edited today</p></span></a>\n        <a class=\"ds-grid__cell ds-grid__cell--2\" href=\"#notebooks\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z M9 4v12\"/></svg><span><h3 class=\"ds-grid__title\">Kitchen</h3><p class=\"ds-grid__text\">4 notes, edited in May</p></span></a>\n        <a class=\"ds-grid__cell ds-grid__cell--3\" href=\"#notebooks\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4a4 4 0 1 0 0 8a4 4 0 0 0 0-8 M4 20a8 8 0 0 1 16 0\"/></svg><span><h3 class=\"ds-grid__title\">Choir</h3><p class=\"ds-grid__text\">3 notes, shared with five</p></span></a>\n        <a class=\"ds-grid__cell ds-grid__cell--4\" href=\"#notebooks\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14 M5 12h14\"/></svg><span><h3 class=\"ds-grid__title\">New notebook</h3><p class=\"ds-grid__text\">Group notes by subject</p></span></a>\n      </div>\n    </div>\n\n    <div class=\"ds-snackbar\"><span>Seed order moved to the archive</span><a class=\"ds-snackbar__action\" href=\"#archive\">Undo</a></div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"note\">\n  <div class=\"ds-main\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#notes\">Notes</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#notebooks\">Garden</a></li>\n      <li class=\"ds-breadcrumb__item is-current\">Allotment plan for spring</li>\n    </ol>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__body\">\n        <h1 class=\"ds-page-header__title\">Allotment plan for spring</h1>\n        <p class=\"ds-page-header__text\">In Garden, edited today at 09:12, shared with Tomas Reyl</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#notes\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 15V4 M8 8l4-4 4 4 M5 13v6h14v-6\"/></svg>Share</a>\n        <a class=\"ds-button\" href=\"#notes\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12l5 5 9-10\"/></svg>Done</a>\n      </div>\n    </div>\n    <div class=\"ds-columns\">\n      <article class=\"ds-prose\" data-component=\"typography\">\n        <h1>Where everything goes</h1>\n        <p class=\"ds-prose__lead\">A rotation for the four beds, written in March and corrected after the frost.</p>\n        <p>Beds two and three get the beans this year, so the brassicas move to the far end by the water butt. The plan is in the shared sheet <code>beds-2026</code>, and Tomas keeps the <a href=\"#notes\">seed order</a> up to date.</p>\n        <h2>Before planting</h2>\n        <p>The shed roof wants felting before any of it. <strong>Do not</strong> dig bed four while it is still wet.</p>\n        <ul>\n          <li>Measure bed three and mark the path</li>\n          <li>Turn the compost and cover it again</li>\n          <li>Order seed potatoes by the end of the week</li>\n        </ul>\n        <h3>Things to ask</h3>\n        <p>Whether the spare cold frame is still going, and who has the key to the tap.</p>\n      </article>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel ds-panel--outlined\">\n          <h2 class=\"ds-panel__title\">Linked notes</h2>\n          <ul class=\"ds-links\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#notes\">Seed order</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#notes\">Last year's plan</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#notes\">Frost dates</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#notes\">Tool list</a></li>\n          </ul>\n          <ul class=\"ds-chips\">\n            <li><span class=\"ds-chip\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12V4h8l10 10-8 8z M7.5 8v.5\"/></svg>Garden</span></li>\n            <li><span class=\"ds-chip\">Spring</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-overlay\">\n          <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-label=\"Delete this note?\">\n            <span class=\"ds-dialog__icon\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 7h14 M9 7V4h6v3 M7 7l1 13h8l1-13\"/></svg></span>\n            <h2 class=\"ds-dialog__title\">Delete this note?</h2>\n            <p class=\"ds-dialog__body\">It will stay in the archive for 30 days. Tomas will lose access at once.</p>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--text\" href=\"#note\">Keep it</a>\n              <a class=\"ds-button ds-button--text ds-button--danger\" href=\"#archive\">Delete</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"notebooks\">\n  <div class=\"ds-main\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__body\">\n        <h1 class=\"ds-page-header__title\">Notebooks</h1>\n        <p class=\"ds-page-header__text\">Four notebooks hold 14 notes. Shared ones sync for everyone in them.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#settings\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14 M5 12h14\"/></svg>New notebook</a>\n      </div>\n    </div>\n    <ul class=\"ds-tabs\" data-component=\"tabs\">\n      <li><a class=\"ds-tabs__tab is-current\" href=\"#notebooks\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z M9 4v12\"/></svg>Mine</a></li>\n      <li><a class=\"ds-tabs__tab\" href=\"#notebooks\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4a4 4 0 1 0 0 8a4 4 0 0 0 0-8 M4 20a8 8 0 0 1 16 0\"/></svg>Shared with me</a></li>\n      <li><a class=\"ds-tabs__tab\" href=\"#archive\"><svg class=\"ds-icon ds-icon--small\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h16v4H4z M6 9v10h12V9 M10 13h4\"/></svg>Archived</a></li>\n    </ul>\n    <div class=\"ds-badges\" data-component=\"badge\">\n      <span class=\"ds-badge\">4 notebooks</span>\n      <span class=\"ds-badge ds-badge--new\">New</span>\n      <span class=\"ds-badge ds-badge--success\">Synced</span>\n      <span class=\"ds-badge ds-badge--warning\">Syncing</span>\n      <span class=\"ds-badge ds-badge--danger\">Offline</span>\n    </div>\n    <div class=\"ds-section ds-section--tight\">\n      <div class=\"ds-table-wrap\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead><tr><th>Notebook</th><th class=\"ds-table__extra\">Shared with</th><th>Status</th><th class=\"ds-table__extra\">Last edit</th><th class=\"ds-table__num\">Notes</th></tr></thead>\n          <tbody>\n            <tr class=\"is-current\"><td><a href=\"#notes\">Garden</a></td><td class=\"ds-table__extra\">Tomas Reyl</td><td><span class=\"ds-badge ds-badge--success\">Synced</span></td><td class=\"ds-table__extra\">Today, 09:12</td><td class=\"ds-table__num\">6</td></tr>\n            <tr><td><a href=\"#notes\">Kitchen</a></td><td class=\"ds-table__extra\">Only you</td><td><span class=\"ds-badge ds-badge--success\">Synced</span></td><td class=\"ds-table__extra\">2 May</td><td class=\"ds-table__num\">4</td></tr>\n            <tr><td><a href=\"#notes\">Choir</a></td><td class=\"ds-table__extra\">Five people</td><td><span class=\"ds-badge ds-badge--warning\">Syncing</span></td><td class=\"ds-table__extra\">Monday</td><td class=\"ds-table__num\">3</td></tr>\n            <tr><td><a href=\"#notes\">House</a></td><td class=\"ds-table__extra\">Only you</td><td><span class=\"ds-badge ds-badge--danger\">Offline</span></td><td class=\"ds-table__extra\">Sunday</td><td class=\"ds-table__num\">1</td></tr>\n            <tr><td><a href=\"#notes\">Travel</a></td><td class=\"ds-table__extra\">Mirela Voss</td><td><span class=\"ds-badge ds-badge--success\">Synced</span></td><td class=\"ds-table__extra\">19 April</td><td class=\"ds-table__num\">0</td></tr>\n          </tbody>\n        </table>\n      </div>\n      <ul class=\"ds-pagination\" data-component=\"pagination\">\n        <li><a class=\"ds-pagination__link is-disabled\" href=\"#notebooks\" aria-label=\"Previous\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 6l-6 6 6 6\"/></svg></a></li>\n        <li><a class=\"ds-pagination__link is-current\" href=\"#notebooks\">1</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#notebooks\">2</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#notebooks\">3</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#notebooks\" aria-label=\"Next\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 6l6 6-6 6\"/></svg></a></li>\n      </ul>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"archive\">\n  <div class=\"ds-main\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__body\">\n        <h1 class=\"ds-page-header__title\">Archive</h1>\n        <p class=\"ds-page-header__text\">Archived notes are kept out of the way and out of search.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--outlined\" href=\"#notes\">Back to notes</a>\n      </div>\n    </div>\n    <div class=\"ds-columns\">\n      <div class=\"ds-empty\" data-component=\"empty\">\n        <span class=\"ds-empty__mark\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h16v4H4z M6 9v10h12V9 M10 13h4\"/></svg></span>\n        <h2 class=\"ds-empty__title\">Nothing archived yet</h2>\n        <p class=\"ds-empty__text\">Swipe a note aside, or use the archive button, and it will wait here until you need it again.</p>\n        <a class=\"ds-button ds-button--secondary\" href=\"#notes\">Go to notes</a>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel ds-panel--tonal\">\n          <h2 class=\"ds-panel__title\">Deleted in the last 30 days</h2>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__item\"><span class=\"ds-list__icon\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 7h14 M9 7V4h6v3 M7 7l1 13h8l1-13\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Seed order</a><p class=\"ds-list__text\">Deleted today, 26 days left</p></div><a class=\"ds-button ds-button--text\" href=\"#notes\">Restore</a></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__icon\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 7h14 M9 7V4h6v3 M7 7l1 13h8l1-13\"/></svg></span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#note\">Packing list</a><p class=\"ds-list__text\">Deleted 19 April, 4 days left</p></div><a class=\"ds-button ds-button--text\" href=\"#notes\">Restore</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-notice\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18 M12 11v6 M12 7.5v.5\"/></svg><p class=\"ds-notice__body\"><strong class=\"ds-notice__title\">Archived is not deleted</strong>Archived notes keep their reminders and stay shared.</p></div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"settings\">\n  <div class=\"ds-main\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__body\">\n        <h1 class=\"ds-page-header__title\">Settings</h1>\n        <p class=\"ds-page-header__text\">Your account, how notes sync and how the app looks.</p>\n      </div>\n    </div>\n    <div class=\"ds-layout\">\n      <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__title\">Sections</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link is-current\" href=\"#settings\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4a4 4 0 1 0 0 8a4 4 0 0 0 0-8 M4 20a8 8 0 0 1 16 0\"/></svg>Account</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#settings\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 18a4 4 0 0 1 0-8a6 6 0 0 1 11.5 1.5A3.5 3.5 0 0 1 18 18z\"/></svg>Sync</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#settings\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 0 0 18c1.5 0 2-1 2-2s-.5-2 1-2h2a4 4 0 0 0 4-4c0-5-4-9-9-9z M8 11v.5 M12 8v.5 M16 11v.5\"/></svg>Appearance</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#settings\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 17V11a6 6 0 0 1 12 0v6l2 2H4z M10 21h4\"/></svg>Reminders</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#archive\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h16v4H4z M6 9v10h12V9 M10 13h4\"/></svg>Archive</a></li>\n        </ul>\n      </nav>\n      <div class=\"ds-stack\">\n        <div class=\"ds-notices\" data-component=\"notice\">\n          <div class=\"ds-notice\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18 M12 11v6 M12 7.5v.5\"/></svg><p class=\"ds-notice__body\"><strong class=\"ds-notice__title\">Sync is on</strong>Changes reach your other devices within a minute.</p></div>\n          <div class=\"ds-notice ds-notice--error\"><svg class=\"ds-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4l9 16H3z M12 10v4 M12 17v.5\"/></svg><p class=\"ds-notice__body\"><strong class=\"ds-notice__title\">One field needs attention</strong>The recovery address is not a complete address.</p></div>\n        </div>\n        <form class=\"ds-form ds-panel ds-panel--outlined\" data-component=\"form\" action=\"#settings\">\n          <h2 class=\"ds-panel__title\">Account</h2>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Display name</span><input class=\"ds-form__control\" type=\"text\" value=\"Ines Varga\"></label>\n            <label class=\"ds-form__field is-invalid\"><span class=\"ds-form__label\">Recovery address</span><input class=\"ds-form__control\" type=\"text\" value=\"ines.varga@\"><span class=\"ds-form__error\">Enter the whole address, with its domain.</span></label>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Colour source</span><span class=\"ds-form__select\"><select class=\"ds-form__control\"><option>From the wallpaper</option><option>Violet</option><option>Moss</option></select></span></label>\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Default notebook</span><span class=\"ds-form__select\"><select class=\"ds-form__control\"><option>Garden</option><option>Kitchen</option></select></span><span class=\"ds-form__hint\">New notes start here.</span></label>\n          </div>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Signature on shared notes</span><textarea class=\"ds-form__control ds-form__control--area\">Ines, plot 14</textarea></label>\n          <div>\n            <label class=\"ds-form__check ds-form__check--between\"><span class=\"ds-form__check-text\">Sync over mobile data<small>Uses about 2 MB a month</small></span><input class=\"ds-switch\" type=\"checkbox\" checked></label>\n            <label class=\"ds-form__check ds-form__check--between\"><span class=\"ds-form__check-text\">Dark theme after sunset<small>Follows the device clock</small></span><input class=\"ds-switch\" type=\"checkbox\"></label>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me a summary of shared changes each week</label>\n          </div>\n          <div class=\"ds-form__actions\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"button\">Save changes</button>\n            <button class=\"ds-button ds-button--secondary\" type=\"button\">Export notes</button>\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Delete account</button>\n            <button class=\"ds-button is-disabled\" type=\"button\" disabled>Restore</button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <p class=\"ds-footer__legal\">chronoskin notes, synced a minute ago</p>\n  <ul class=\"ds-footer__links\">\n    <li><a class=\"ds-footer__link\" href=\"#settings\">Help</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#settings\">Privacy</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#settings\">Keyboard shortcuts</a></li>\n  </ul>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.material-you.app.s01.p01.t01.u01\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"material-you\",\n    \"years\": [\n      2021,\n      2026\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-my-1111\",\n  \"short\": \"v1-my-1111\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f3edf7;\n  --color-canvas: #fef7ff;\n  --color-surface: #f7f2fa;\n  --color-surface-alt: #ece6f0;\n  --color-surface-strong: #e6e0e9;\n  --color-bar: #f3edf7;\n  --color-bar-text: #1d1b20;\n  --color-bar-alt: #e8def8;\n  --color-bar-alt-text: #1d192b;\n  --color-inverse: #322f35;\n  --color-inverse-text: #f5eff7;\n  --color-text: #1d1b20;\n  --color-text-muted: #49454f;\n  --color-heading: #1d1b20;\n  --color-heading-alt: #4f378b;\n  --color-link: #6750a4;\n  --color-link-quiet: #1d1b20;\n  --color-link-visited: #7d5260;\n  --color-link-hover: #4f378b;\n  --color-link-active: #21005d;\n  --color-border: #cac4d0;\n  --color-border-strong: #79747e;\n  --color-border-muted: #e7e0ec;\n  --color-accent: #eaddff;\n  --color-accent-text: #21005d;\n  --color-accent-alt: #7d5260;\n  --color-fill-1: #eaddff;\n  --color-fill-2: #e8def8;\n  --color-fill-3: #ffd8e4;\n  --color-fill-4: #e6e0e9;\n  --color-button: #6750a4;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #e8def8;\n  --color-button-secondary-text: #1d192b;\n  --color-input: #fef7ff;\n  --color-input-text: #1d1b20;\n  --color-input-border: #79747e;\n  --color-disabled: #e4dfe7;\n  --color-disabled-text: #9a96a0;\n  --color-danger: #b3261e;\n  --color-danger-surface: #f9dedc;\n  --color-success: #386a20;\n  --color-warning: #b26a00;\n  --color-notice: #ffd8e4;\n  --color-notice-text: #31111d;\n  --color-focus: #6750a4;\n  --color-shadow: #000000;\n  --color-overlay: rgb(0 0 0 / 0.32);\n}\n\n/* @part type */\n:root {\n  --font-body: Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-ui: Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: \"Roboto Mono\", Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 12px;\n  --text-ui: 14px;\n  --text-large: 22px;\n  --text-display: 57px;\n  --text-h1: 36px;\n  --text-h2: 28px;\n  --text-h3: 22px;\n  --line-body: 1.5;\n  --line-heading: 1.25;\n  --line-display: 1.12;\n  --weight-body: 400;\n  --weight-bold: 500;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 500;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: -0.25px;\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"
  }
}
