{
  "id": "v1-me-8322",
  "long_id": "v1.memphis.app.s08.p03.t02.u02",
  "name": "Memphis habit board (2016 to 2022)",
  "era": {
    "slug": "memphis",
    "code": "me",
    "name": "Memphis",
    "years": [
      2016,
      2022
    ],
    "description": "The Memphis revival of 2016 to 2022: flat bright colours that clash on purpose, squiggles, dots, triangles and zigzags scattered as decoration, patterns laid as whole fields, flat blocks that overlap and tilt, and bold geometric type."
  },
  "archetype": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A fluid dashboard in the Memphis revival look of 2016 to 2022: flat loud colours, whole fields of pattern, and discs, hoops and zigzags laid across the edges of the blocks. Nothing is outlined and nothing casts a shadow: depth comes from one flat block or shape overlapping another. This pack is a habit tracker, the playful kind of personal dashboard common in those years, and its charts are made of the era's shapes: the day is a hoop cut into arcs, the week is seven columns of pattern, the month is a calendar of discs and the figures sit on a chain of capsules.",
  "url": "https://chrono.skin/s/v1-me-8322",
  "preview_url": "https://chrono.skin/s/v1-me-8322/specimen.html",
  "files": {
    "STYLE.md": "# Memphis habit board (2016 to 2022)\n\n## Summary\n\nA fluid dashboard in the Memphis revival look of 2016 to 2022: flat loud colours, whole fields of pattern, and discs, hoops and zigzags laid across the edges of the blocks. Nothing is outlined and nothing casts a shadow: depth comes from one flat block or shape overlapping another. This pack is a habit tracker, the playful kind of personal dashboard common in those years, and its charts are made of the era's shapes: the day is a hoop cut into arcs, the week is seven columns of pattern, the month is a calendar of discs and the figures sit on a chain of capsules.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100% and every section (`.ds-nav`, `.ds-hero`, `.ds-page-header`, `.ds-band`, `.ds-footer`) is full-bleed. Content sits in a centred `--size-content` (1180px) column with `--space-gutter` (40px) at the sides. Designed at a 1440px viewport.\n- The header is one tall flat bar (`--size-nav` 80px): the brand, then the destinations, each led by a small shape (disc, tilted block, triangle, quarter), then a week tag and the account avatar. The current destination lies on a flat tilted block of `--color-bar-alt` that reaches below the bar.\n- Order of the home page: the bar, the hero, a tinted band whose chain of stat capsules climbs over the foot of the hero and which holds the week chart beside today's list, a band on the page ground with a panel and a carousel beside the month, which lies half on a slab of pattern, and the footer.\n- The hero is today as a poster. The left 7 of 12 columns hold a tilted badge, the count at display size with its second half on an accent block, a lead and two buttons, on the open ground. The right 5 hold `.ds-dial`, a hoop cut into one arc per fill, with four shapes round it; `.ds-hero__ground` is a disc of pattern that the top right corner of the window cuts off, and the dial lies half on it.\n- `.ds-stat` is four capsules of four lengths in one chain, each overlapping the one before, two of them tilted and shifted. The chain is pulled up by `--space-8`.\n- `.ds-chart` and `.ds-month` are flat sheets with `--radius-page`. `.ds-grid` is the calendar: seven columns of discs.\n- Inner pages keep the bar and footer and drop the hero. In its place comes a `.ds-page-header`: a `--color-surface-alt` band with the breadcrumb, the `--text-h1` title and one line of lead on the left, the actions on a flat tilted capsule at the right, a disc of pattern cut off by the right edge, and a line of dots and dashes in two fills along the bottom. Below it one `.ds-band` holds a `.ds-split` (7 to 5; `--even`, `--flip`, or `--side` with a `--size-sidebar` 270px column first). Tabs are the first row of the main column, then notices, then the table.\n- Spacing scale: `--space-1` 4px (chip padding, gaps inside the tab capsule), `--space-2` 8px (gaps between discs, label to control), `--space-3` 12px (row padding, gaps between columns of the chart), `--space-4` 18px (panel padding, gap between buttons), `--space-5` 24px (gap between stacked blocks, overlap of the capsules, sheet padding), `--space-6` 34px (gap between columns, capsule side padding), `--space-7` 50px (tight band padding, the stripe end of a panel title), `--space-8` 76px (band and hero padding, the climb of the stat chain), `--space-9` 108px (foot of the hero). `--space-nudge` 3px is the pressed offset and the focus outline offset.\n- Fixed sizes: `--size-control` 46px, `--size-control-large` 56px, `--size-control-small` 34px, `--size-logo` 40px, `--size-avatar` 42px, `--size-dial` 320px, `--size-art` 170px (unit of the chart height and the capsule radius), `--size-shape` 92px (unit of every ornament), `--size-dot` 18px (pitch of every pattern), `--size-stroke` 5px (weight of drawn lines), `--size-dialog` 470px.\n- Below 1000px columns stack, the dial shrinks and goes under the words, the capsules stand two by two, free shapes, pattern slabs and the header disc disappear and the destinations take a row of their own under the brand. Below 600px gutters shrink to `--space-4`, the hero title is half the display size, the capsules stack, the two-week strip breaks into two rows and table columns marked `.ds-table__extra` are hidden, so nothing scrolls sideways. Below 600px the `.ds-nav__links` cells are equal and centred, and the menu list in the row opens from the right edge.\n- Views: four, switched by plain `#name` links. `home` is today. `habits` is the list: a filter sidebar and an empty state on the left; tabs, notices, the table with a tooltip, the badges and the pagination on the right. `habit` is one habit: the two-week strip and a progress bar, the prose on its sheet, a small dial, the last check-ins and two avatars; it is reached from every list row and from the More menu, and the bar marks Habits. `new` has the form with a switch and the four buttons beside a preview and the accordion, and the confirmation dialog on its overlay band.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Type: headings in a rounded display face (`--font-heading`: Fredoka, Baloo 2, then Arial Rounded MT Bold), text and controls in Nunito or Quicksand, then Avenir Next. `--text-base` 16px at 1.6, `--text-small` 13px, `--text-ui` 16px at weight 700 and not uppercase, `--text-large` 20px. `--text-display` 84px, used at 80% for the hero title of this layout because the words block is seven columns wide; `--text-h1` 48px (inner page titles, stat figures), `--text-h2` 34px, `--text-h3` 21px, all weight 700. Links in running text are underlined and lose the underline on hover.\n- Palette: a mint page `--color-page` #d8f5e6 with cream surfaces #fffdf7, pale coral `--color-surface-alt` #ffe6da and pale lilac `--color-surface-strong` #e6dfff. The four fills are coral #ff7a66, lilac #a48bff, yellow #ffd166 and sky #7fd8ff; `--color-accent` and the primary button are the coral, `--color-accent-alt` the lilac, the fifth ornament colour `--color-shadow` is pink #ff9ecb. `--color-bar` is violet #5a2fd0 with white text (the rail, table heads); `--color-bar-alt` is the yellow with navy text. Navy #1d2366 is the dark flat colour: text, the secondary button, the footer block and drawn lines. `--color-heading-alt` and links are violet, link hover is brick red.\n- Surface: no outlines and no shadows. `--border-width` and `--border-width-strong` are a 1px dashed hairline, used only round form controls and between rows; all five shadow tokens are `none`. Shapes are round: `--radius-control` and `--radius-pill` 999px (pill buttons and inputs), `--radius-panel` 0, and `--radius-page` rounds one corner only, the top right, to a 96px quarter circle (the pattern field of the hero, covers, the last stat block, the footer). `--fill-page` scatters faint discs and rings over the mint; `--fill-bar-alt` is a loud field of coral dots on yellow; `--fill-inverse` draws lilac rings and coral dots on navy. `--fill-button-hover` is the yellow; `--transition` has a small overshoot. No text shadow, no blur.\n- Which text sits on which fill (the era's convention; every Memphis layout and token set keeps to it):\n  - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` carry `--color-text`, headings in `--color-heading` or `--color-heading-alt`, links in the `--color-link-*` tokens and secondary text in `--color-text-muted`.\n  - `--color-fill-1` to `--color-fill-4`, `--color-accent` (`--fill-accent`), `--color-accent-alt`, `--color-success` and `--color-warning` are the loud fills. They carry `--color-accent-text` and nothing else: headings and links on them inherit it (use `.ds-link--plain`), and there is no muted text on a loud fill.\n  - `--color-danger` is readable as text on any surface. Used as a fill (destructive button, danger badge) it carries `--color-surface`. `--color-danger-surface` carries `--color-text`.\n  - `--color-bar` carries `--color-bar-text`, `--color-bar-alt` carries `--color-bar-alt-text`, `--color-inverse` carries `--color-inverse-text`, `--color-notice` carries `--color-notice-text`, buttons carry their own text tokens and `--color-disabled` carries `--color-disabled-text`. The bar is a loud colour of its own, so the primary and the secondary button must both read on it.\n  - A box is a flat block of one colour. It has no outline and nothing behind it: every `--shadow-*` token is `none` and `components.css` never sets `box-shadow`. Two blocks are told apart by their fills, so a block never sits on a ground of its own colour: panels (`--fill-panel`) go on the page, on `--color-surface-alt` or on a fill; tinted blocks (`--color-surface-alt`, `--color-surface-strong`) go on the page or on a surface. The secondary button and the menu use the darkest or lightest colour of the palette (`--color-button-secondary`, `--color-inverse`) so that they read on every ground.\n  - The only borders are hairlines: `--border-width` in `--color-input-border` around a form control (a white field on a white block would vanish without it) and in `--color-border-muted` between rows of a table or list, drawn in the set's `--border-style`. `--color-border` and `--color-border-strong` are the ink of drawn ornaments (`.ds-shape--ink`, the specks in the terrazzo and confetti patterns), not of frames. `--color-shadow` is the fifth ornament colour (`.ds-shape--c5`, confetti); it is never a shadow.\n  - Patterns come in two strengths. `--fill-page` is the quiet one, drawn in a faint tint of the ground, and text may sit on it. The loud ones (`--fill-bar-alt`, `--fill-inverse` and every `.ds-cover`) are drawn in a second, clashing colour and never carry text directly: text goes on a flat block or chip laid over the pattern (`.ds-cover__chip`, the label of a tile, the footer block), in `--color-bar-alt`, `--color-inverse` or a surface. The only exceptions are the faint tints of `.ds-avatar__pic` and `.ds-progress__bar`, which mix `--color-accent-text` at under 30% into the fill.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill, the base font and colour; sections are its children.\n- `.ds-brand`: the mark and name, first in the bar, linking home. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button and tilted; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own.\n- `.ds-nav`: the header: `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link`, each starting with an empty `.ds-nav__icon` (the shape), one `.ds-menu`, and `.ds-nav__actions` with a plain badge and an avatar. The current link is marked through `:has()` rules, one per view, or with `is-current`.\n- `.ds-hero`: today. `.ds-hero__ground` is a `.ds-cover .ds-cover--ground` cut as a disc. `.ds-hero__inner` is the two-column grid; `.ds-hero__body` has a tilted badge, `.ds-hero__title` with its second half in `.ds-hero__mark`, `.ds-hero__lead` and `.ds-hero__actions`; `.ds-hero__art` holds four `.ds-shape` and the `.ds-dial`.\n- `.ds-dial`: how much is done, as a hoop: `.ds-dial__ring` is cut into arcs of the fills with the rest in `--color-disabled` (`.ds-dial--25`, none for a half, `--66`, `--75`), and `.ds-dial__hub` is a flat disc with `.ds-dial__value` and `.ds-dial__label`. `.ds-dial--small` for a panel. The ring is drawn with a conic gradient and a mask, not with a border.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__disc` (a ground cover cut as a disc), `.ds-page-header__inner`, the breadcrumb, then `.ds-page-header__row` with `.ds-page-header__title` and `.ds-page-header__lead` on the left and `.ds-page-header__actions`, a flat tilted capsule holding the buttons, on the right.\n- `.ds-band`: any full-width section. `.ds-band--surface`, `--alt`, `--strong` set the fill; `--tight` less padding; `--lift` for a band whose content climbs into the section above; `--overlay` is the dialog backdrop. `.ds-band__slab` is a ground cover over the right 42% of a band, with `--radius-page`; lay a sheet or flat blocks half on it. `.ds-band__inner` is the content column; `.ds-band__label` is a small heading over one block. `.ds-split`, `.ds-stack` (`--wide`) and `.ds-row` arrange blocks.\n- `.ds-stat`: the chain of figures; `.ds-stat` is the row. Each `.ds-stat__cell` is a capsule in the next fill with a `.ds-stat__value` and a `.ds-stat__label`.\n- `.ds-chart`: a week on a flat sheet: `.ds-chart__head` with `.ds-chart__title`, then `.ds-chart__bars` of seven `.ds-chart__bar`, each a `.ds-chart__value` over a `.ds-cover` column whose height comes from `.ds-chart__bar--1` to `--6`; every second column has a round head and `is-current` tilts one. `.ds-chart__ground` is the strip of `--fill-bar-alt` they stand on and `.ds-chart__days` the row of `.ds-chart__day` chips under it.\n- `.ds-grid`: the calendar: seven columns of `.ds-grid__cell` discs under a row of `.ds-grid__head`. `is-done` fills a disc with the next fill, `is-missed` draws a hoop, `is-current` is a tilted inverted block; other days are pale. `.ds-grid--strip` is fourteen days in one row. It lies on `.ds-month`, a flat sheet that also takes a `.ds-chart__head` and a line of text.\n- `.ds-list`: rows on one flat `--color-surface` block: `.ds-list__item` with a `.ds-list__check` (a drawn hoop; with `is-done` on the row a filled disc with a tick), `.ds-list__main` (`.ds-list__title`, `.ds-list__text`) and a muted `.ds-list__meta`; hairlines between rows.\n- `.ds-panel`: a flat `--fill-panel` block with a `.ds-panel__title` strip on `--color-surface-strong` that ends in a block of accent stripes, and a `.ds-panel__body`. `.ds-panel--pick` tilts it and gives the strip the accent fill. `.ds-sheet` is a larger flat block with `--radius-page` for prose.\n- `.ds-sidebar`: a flat `--color-surface-strong` block of filters: `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines (`is-current` is bold), standing on a foot of pattern, one `.ds-cover` with two small shapes.\n- `.ds-footer`: a field of `--fill-inverse` pattern with one shape; `.ds-footer__inner` is one flat inverted capsule with `.ds-footer__brand`, `.ds-footer__list` of `.ds-footer__link` and `.ds-footer__legal`.\n- `.ds-shape`: an ornament: an empty `aria-hidden` span, absolutely placed in a section, behind the content or across an edge. Filled kinds: `--disc`, `--half`, `--quarter`, `--tri`, `--block`. Line-only kinds: `--ring`, `--hoop`, `--line` (holds an SVG squiggle or zigzag), `--draw` (holds an SVG triangle, cross or arc). Pattern kinds: `--dots`, `--grid`, `--bars`, `--stripes`. Colour `--c1` to `--c4`, `--c5`, `--ink`, `--paper`; size `--s`, `--l`, `--xl`, `--xxl`; rotation `--tilt`, `--turn`, `--flip`, `--side`; place `--tl`, `--tr`, `--bl`, `--br`, `--edge-l`, `--edge-r`. A shape is either filled or a line, never a filled shape with an outline. Free shapes are hidden on narrow screens.\n- `.ds-cover`: a field of pattern: a fill with a pattern in a clashing colour. Pairs `.ds-cover--1` to `--6`; patterns `--dots`, `--stripes`, `--grid`, `--zig`, `--dash`, `--rings`, `--terrazzo`, `--confetti`. `--ground` makes it a layer behind a section's content. `.ds-cover__chip` is a label on a solid surface.\n- `.ds-squiggle`: a short wavy rule, an inline SVG in `--color-accent`, for a section title that needs one.\n- `.ds-prose`: long text: h1, h2, h3, paragraphs, lists, strong, inline code on a flat chip, links. `.ds-prose__lead` is the first, larger paragraph.\n- `.ds-link`: a link in content. `.ds-link--quiet` for titles and lists; `.ds-link--plain` inherits its colour and is the only link allowed on a loud fill. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` is a wrapping row.\n- `.ds-button`: one flat block of `--fill-button` with `--radius-control` corners. `.ds-button--secondary`, `.ds-button--danger` (once per view), `--large`, `--small`. `is-hover` swaps the fill and tilts the block, `is-active` drops it, `is-disabled`, `is-focus`. `.ds-buttons` is a row.\n- `.ds-badge`: a small flat tag; `--alt`, `--plain`, the status variants `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `--tilt`. `.ds-badges` is a row.\n- `.ds-form`: stacked `.ds-form__field` blocks: `.ds-form__label`, `.ds-form__control` (`--area` for a textarea), `.ds-form__hint` or `.ds-form__error`; `.ds-form__row` puts two side by side; `is-focus`, `is-invalid`, `is-disabled`. `.ds-form__check` wraps a `.ds-form__checkbox`.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`, `.ds-switch__hint`; `--end` puts the track at the right; `is-on`.\n- `.ds-table`: one flat block; the head row is `--color-bar`; rows alternate and are divided by hairlines; `is-current` marks a row. `.ds-table__name` wraps the first cell's text and leads it with a small shape in the next fill; `.ds-table__num` right-aligns figures, `.ds-table__extra` is dropped on a phone, `.ds-table__meta` is a muted second line.\n- `.ds-tabs`: one flat `--color-surface-strong` capsule that holds the choices (`.ds-tabs__tab`); the current one (`is-current`) is an accent capsule inside it, tilted.\n- `.ds-notice`: a flat `--color-notice` block with a half disc standing on its left edge; `.ds-notice__title`, `.ds-notice__text`. `.ds-notice--error` is `--color-danger-surface` with a `--color-danger` half disc.\n- `.ds-pagination`: flat discs and capsules (`.ds-pagination__link`); `is-current` is a tilted accent block, `is-disabled`, `is-hover`.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` joined by short accent dashes; the last has `is-current`.\n- `.ds-dialog`: a flat `--fill-panel` block on the overlay band: `.ds-dialog__bar` with `.ds-dialog__title` and `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a flat `--color-surface-alt` block, centred: `.ds-empty__art` (three small shapes), `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-menu`: a drop-down, a `<details>` with a `.ds-menu__toggle` summary and a `.ds-menu__list` of `.ds-menu__link`, each with an optional `.ds-menu__note`; a flat `--color-inverse` block, tilted. `.ds-menu--end` opens it leftwards.\n- `.ds-tooltip`: wraps its trigger; `.ds-tooltip__tip` is a small flat inverted chip shown on hover and focus (`is-open` shows it statically). Do not leave it open over other content.\n- `.ds-accordion`: `.ds-accordion__item` (`<details>`) with a `.ds-accordion__head` ending in a `.ds-accordion__sign` (a disc that becomes a diamond when open) and a `.ds-accordion__body`.\n- `.ds-progress`: a flat track with a striped `.ds-progress__bar`; `--alt` is dotted; width by `--0`, `--25`, `--40`, `--60`, `--75`, `--90`. `.ds-progress__legend` is the line above it.\n- `.ds-avatar`: a face (inline SVG) or initials in `.ds-avatar__pic` on a fill (`--1` to `--4`), with `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`; `--large`.\n- `.ds-carousel`: `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` (a `.ds-carousel__quote` and an avatar); `.ds-carousel__foot` holds `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and two `.ds-carousel__arrow`.\n\n## Never\n\n- `row-gap <= 8px`: rows of a table or list touch and are divided by hairlines.\n- `content-width >= 75%`: bands are full-bleed and their column is 1180px of a 1440px viewport.\n- `palette-colours <= 20`: four navies, near-white, four neon fills, the status colours and their tints.\n- `font-size <= 68px`: the hero title, at 80% of the display size, is the largest text of this layout.\n- `font-size >= 13px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 2`: a rounded face for headings and one sans for the rest (plus the monospace of inline code).\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 1%`: nothing is set in capitals in this type set.\n- `underlined-links <= 20%`: only links in running text are underlined.\n- `box-shadow = none`: no box has anything behind it, neither a soft shadow nor a hard offset block. A block of colour behind every box is another style; depth here comes from one shape or block overlapping another.\n- `border-width <= 1px`: the only borders are hairlines round form controls and between rows. No card, button, tag, tile or bar is outlined; a thick line is a drawn squiggle or zigzag, never a frame.\n- `text-shadow = none`: type is flat.\n- `gradient-fills <= 5%`: gradients only draw patterns on covers, fields and small tints; no box fades from one colour to another.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A box is one flat fill with a radius token: no border, no `box-shadow`, no outline. If it would vanish on its ground, change its fill or the ground's, do not frame it. Follow the convention above for its text: `--color-accent-text` on the loud fills, `--color-text` on the surfaces. A new chart is built from the shapes: counts as discs, shares as arcs of a hoop, amounts as columns of pattern on a patterned strip, a row of figures as overlapping capsules; draw each from the fill tokens in turn so that every palette repaints it, and put its numbers on flat ground. Give depth by overlap: pull a chain or a sheet over the edge of the band above, lay a sheet half on a slab of pattern, let a `.ds-shape` cross from one block onto the next. Tilt small things (the current tab, a capsule, a featured panel, today's block) by 1 to 8 degrees; never tilt running text or a form. For a size the vocabulary lacks use `calc()` over an existing token; `--size-stroke` is the weight of every drawn line.\n",
    "components.css": "/* Layout tokens (structure part) */\n:root {\n  --size-page: 100%;\n  --size-content: 1180px;\n  --size-measure: 560px;\n  --size-nav: 80px;\n  --size-control: 46px;\n  --size-control-large: 56px;\n  --size-control-small: 34px;\n  --size-logo: 40px;\n  --size-check: 22px;\n  --size-thumb: 20px;\n  --size-track: 16px;\n  --size-avatar: 42px;\n  --size-art: 170px;\n  --size-shape: 92px;\n  --size-dot: 18px;\n  --size-stroke: 5px;\n  --size-sidebar: 270px;\n  --size-dial: 320px;\n  --size-dialog: 470px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 18px;\n  --space-5: 24px;\n  --space-6: 34px;\n  --space-7: 50px;\n  --space-8: 76px;\n  --space-9: 108px;\n  --space-gutter: 40px;\n  --space-nudge: 3px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  width: var(--size-page);\n  overflow-x: clip;\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-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen 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/* nav: one tall flat bar. Each destination is led by a small shape; the current one lies on a flat block\n   of the second bar colour, tilted, that reaches below the bar */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  color: var(--color-bar-text);\n  background: var(--fill-bar);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  max-width: calc(var(--size-content) + 2 * var(--space-gutter));\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: 0 var(--space-gutter);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-4);\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: var(--link-decoration-quiet);\n  white-space: nowrap;\n  color: var(--color-bar-text);\n  transition: var(--transition);\n}\n.ds-nav__icon {\n  flex: none;\n  width: var(--space-4);\n  aspect-ratio: 1;\n  background: var(--color-surface);\n  border-radius: 50%;\n}\n.ds-nav__links li:nth-child(4n + 2) .ds-nav__icon {\n  border-radius: 0;\n  transform: rotate(12deg);\n}\n.ds-nav__links li:nth-child(4n + 3) .ds-nav__icon {\n  border-radius: 0;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-nav__links li:nth-child(4n) .ds-nav__icon {\n  border-radius: 100% 0 0 0;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-text);\n  background: var(--color-surface);\n  transform: rotate(-2deg);\n}\n.ds-nav__link:hover .ds-nav__icon,\n.ds-nav__link.is-hover .ds-nav__icon {\n  background: var(--fill-accent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#habits:target) .ds-nav__link[href=\"#habits\"],\n.ds-page:has(#habit:target) .ds-nav__link[href=\"#habits\"],\n.ds-page:has(#new:target) .ds-nav__link[href=\"#new\"] {\n  min-height: calc(var(--size-nav) * 0.8);\n  margin-bottom: calc(var(--size-nav) * -0.3);\n  padding-bottom: var(--space-3);\n  color: var(--color-bar-alt-text);\n  background: var(--color-bar-alt);\n  transform: rotate(-3deg);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* bands: full-bleed fields that meet edge to edge */\n.ds-band {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter);\n  overflow: hidden;\n}\n.ds-band--surface {\n  background: var(--color-surface);\n}\n.ds-band--alt {\n  background: var(--color-surface-alt);\n}\n.ds-band--lift {\n  z-index: 2;\n  display: flow-root;\n  padding-top: 0;\n  overflow: visible;\n}\n.ds-band--overlay {\n  background: var(--color-overlay);\n}\n.ds-band__slab {\n  top: var(--space-7);\n  right: 0;\n  bottom: 0;\n  width: 42%;\n  border-radius: var(--radius-page);\n}\n.ds-band__inner {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-band__label {\n  margin: 0 0 var(--space-4);\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-alt);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-5);\n  align-content: start;\n  min-width: 0;\n}\n.ds-stack--wide {\n  gap: var(--space-6);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-split--flip {\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n}\n.ds-split--side {\n  grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n}\n.ds-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n\n/* hero: today. The count in huge words on the open ground; beside it the dial, a hoop cut into one arc per\n   fill, lying half on a disc of pattern that the top corner of the window cuts off */\n.ds-hero {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter) calc(var(--space-9) + var(--space-6));\n  overflow: hidden;\n}\n.ds-hero__ground {\n  top: calc(var(--size-shape) * -1.6);\n  right: calc(var(--size-shape) * -1.2);\n  width: calc(var(--size-shape) * 6.4);\n  aspect-ratio: 1;\n  border-radius: 50%;\n}\n.ds-hero__inner {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  gap: var(--space-7);\n  align-items: center;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-hero__body {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-5);\n  justify-items: start;\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-hero__mark {\n  display: inline-block;\n  padding: 0 var(--space-3);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-panel);\n  transform: rotate(-3deg);\n}\n.ds-hero__lead {\n  max-width: var(--size-measure);\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-hero__art {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: calc(var(--size-dial) + var(--space-7));\n}\n.ds-hero__art .ds-shape:nth-of-type(1) {\n  bottom: calc(var(--size-shape) * -0.5);\n  left: calc(var(--size-shape) * -0.6);\n}\n.ds-hero__art .ds-shape:nth-of-type(2) {\n  top: 0;\n  left: 0;\n}\n.ds-hero__art .ds-shape:nth-of-type(3) {\n  right: calc(var(--size-shape) * -0.3);\n  bottom: 4%;\n}\n.ds-hero__art .ds-shape:nth-of-type(4) {\n  top: 44%;\n  left: calc(var(--size-shape) * -1);\n}\n\n/* dial: how much of today is done. A hoop cut into arcs of the fills, the rest in the disabled colour,\n   with the count on a flat disc in the middle */\n.ds-dial {\n  position: relative;\n  z-index: 1;\n  flex: none;\n  width: var(--size-dial);\n  max-width: 100%;\n  aspect-ratio: 1;\n}\n.ds-dial__ring {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: conic-gradient(var(--color-fill-1) 0 25%, var(--color-fill-2) 25% 50%, var(--color-disabled) 50% 100%);\n  border-radius: 50%;\n  mask: radial-gradient(closest-side, transparent 64%, currentColor 65%);\n}\n.ds-dial--25 .ds-dial__ring {\n  background: conic-gradient(var(--color-fill-1) 0 25%, var(--color-disabled) 25% 100%);\n}\n.ds-dial--66 .ds-dial__ring {\n  background: conic-gradient(var(--color-fill-1) 0 16.6%, var(--color-fill-2) 16.6% 33.3%, var(--color-fill-3) 33.3% 50%, var(--color-fill-4) 50% 66.6%, var(--color-disabled) 66.6% 100%);\n}\n.ds-dial--75 .ds-dial__ring {\n  background: conic-gradient(var(--color-fill-1) 0 25%, var(--color-fill-2) 25% 50%, var(--color-fill-3) 50% 75%, var(--color-disabled) 75% 100%);\n}\n.ds-dial__hub {\n  position: absolute;\n  top: 22%;\n  right: 22%;\n  bottom: 22%;\n  left: 22%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: 50%;\n}\n.ds-dial__value {\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-heading);\n}\n.ds-dial__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-dial--small {\n  width: calc(var(--size-dial) * 0.5);\n}\n.ds-dial--small .ds-dial__value {\n  font-size: var(--text-h3);\n}\n\n/* page header: the head of an inner page. A tinted band with a disc of pattern cut off by its right edge,\n   closed by a line of dots and dashes in two fills */\n.ds-page-header {\n  position: relative;\n  padding: var(--space-7) var(--space-gutter) calc(var(--space-6) + var(--space-3));\n  overflow: hidden;\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n}\n.ds-page-header::after {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--space-3);\n  background:\n    radial-gradient(circle, var(--color-fill-2) 62%, transparent 66%) 0 0 / calc(var(--space-3) * 5) 100%,\n    linear-gradient(90deg, transparent 30%, var(--color-fill-4) 30% 90%, transparent 90%) 0 0 / calc(var(--space-3) * 5) 100%;\n}\n.ds-page-header__disc {\n  top: calc(var(--size-shape) * -0.6);\n  right: calc(var(--size-shape) * -0.8);\n  width: calc(var(--size-shape) * 3.4);\n  aspect-ratio: 1;\n  border-radius: 50%;\n}\n.ds-page-header__inner {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-page-header__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\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__lead {\n  max-width: var(--size-measure);\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-3);\n  background: var(--fill-panel);\n  border-radius: calc(var(--size-control) * 2);\n  transform: rotate(-2deg);\n}\n\n/* stats: capsules of four fills and four lengths in one chain, each overlapping the one before, one of them\n   tilted; the chain climbs over the lower edge of the hero */\n.ds-stat {\n  display: flex;\n  align-items: center;\n  margin: calc(var(--space-8) * -1) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__cell {\n  position: relative;\n  display: flex;\n  flex: 5 1 0;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: var(--space-5) var(--space-6);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: calc(var(--size-art) * 1);\n}\n.ds-stat__cell + .ds-stat__cell {\n  margin-left: calc(var(--space-5) * -1);\n}\n.ds-stat__cell:nth-child(2) {\n  z-index: 1;\n  flex-grow: 4;\n  padding-top: var(--space-4);\n  padding-bottom: var(--space-4);\n  background: var(--color-fill-2);\n  transform: translateY(var(--space-5)) rotate(-4deg);\n}\n.ds-stat__cell:nth-child(3) {\n  flex-grow: 6;\n  padding-top: var(--space-6);\n  padding-bottom: var(--space-6);\n  background: var(--color-fill-3);\n}\n.ds-stat__cell:nth-child(4) {\n  z-index: 1;\n  flex-grow: 3;\n  padding-top: var(--space-4);\n  padding-bottom: var(--space-4);\n  background: var(--color-fill-4);\n  transform: translateY(calc(var(--space-4) * -1)) rotate(3deg);\n}\n.ds-stat__value {\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1.2;\n  text-transform: var(--ui-transform);\n}\n\n/* chart: a week as seven columns of pattern of different heights, some with a round head, standing on a\n   strip of the second bar pattern; the day sits on a flat chip under each */\n.ds-chart {\n  position: relative;\n  padding: var(--space-5) var(--space-5) var(--space-6);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n}\n.ds-chart__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  margin: 0 0 var(--space-5);\n}\n.ds-chart__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-chart__bars {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-3);\n  height: calc(var(--size-art) * 1.5);\n  margin: 0;\n  padding: 0 var(--space-3);\n  list-style: none;\n}\n.ds-chart__bar {\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  height: 100%;\n  min-width: 0;\n}\n.ds-chart__value {\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-heading);\n}\n.ds-chart__bar .ds-cover {\n  flex: none;\n  width: 100%;\n  height: 50%;\n  min-height: 0;\n}\n.ds-chart__bar:nth-child(odd) .ds-cover {\n  border-radius: 50% 50% 0 0 / var(--space-6) var(--space-6) 0 0;\n}\n.ds-chart__bar--none {\n  visibility: hidden;\n}\n.ds-chart__bar--1 .ds-cover {\n  height: 12%;\n}\n.ds-chart__bar--3 .ds-cover {\n  height: 38%;\n}\n.ds-chart__bar--4 .ds-cover {\n  height: 51%;\n}\n.ds-chart__bar--5 .ds-cover {\n  height: 64%;\n}\n.ds-chart__bar--6 .ds-cover {\n  height: 77%;\n}\n.ds-chart__bar.is-current .ds-cover {\n  transform: rotate(-3deg);\n  transform-origin: 50% 100%;\n}\n.ds-chart__ground {\n  display: block;\n  height: var(--space-5);\n  background: var(--fill-bar-alt);\n}\n.ds-chart__days {\n  display: flex;\n  gap: var(--space-3);\n  margin: calc(var(--space-3) * -1) 0 0;\n  padding: 0 var(--space-3);\n  list-style: none;\n}\n.ds-chart__day {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  padding: var(--space-1) 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-align: center;\n  text-transform: var(--ui-transform);\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n}\n.ds-chart__day.is-current {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-3deg);\n}\n\n/* grid: a month as a calendar of discs. A day done is a disc in the next fill, a day missed a drawn hoop,\n   today a tilted block; days to come are pale */\n.ds-month {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-4);\n  padding: var(--space-5);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n}\n.ds-month > * {\n  margin: 0;\n}\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__head {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.6;\n  text-align: center;\n  text-transform: var(--ui-transform);\n  color: var(--color-text-muted);\n}\n.ds-grid__cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-muted);\n  background: var(--color-surface-alt);\n  border-radius: 50%;\n}\n.ds-grid__cell.is-done {\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n}\n.ds-grid__cell.is-done:nth-child(4n + 2) {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell.is-done:nth-child(4n + 3) {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell.is-done:nth-child(4n) {\n  background: var(--color-fill-4);\n}\n.ds-grid__cell.is-missed {\n  color: var(--color-text);\n  background: radial-gradient(closest-side, transparent 80%, var(--color-border-muted) 82% 98%, transparent 100%);\n}\n.ds-grid__cell.is-current {\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: 0;\n  transform: rotate(8deg);\n}\n.ds-grid--strip {\n  grid-template-columns: repeat(14, minmax(0, 1fr));\n  gap: var(--space-1);\n}\n.ds-grid--strip .ds-grid__cell {\n  font-size: var(--text-small);\n}\n\n/* list: today's habits on one flat block. Each row is led by its check: a filled disc with a tick when done,\n   a drawn hoop when not */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__check {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  aspect-ratio: 1;\n  color: var(--color-text);\n  background: radial-gradient(closest-side, transparent 78%, currentColor 80% 98%, transparent 100%);\n}\n.ds-list__check svg {\n  display: none;\n  width: 50%;\n  height: 50%;\n}\n.ds-list__item.is-done .ds-list__check {\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: 50%;\n}\n.ds-list__item.is-done .ds-list__check svg {\n  display: block;\n}\n.ds-list__item.is-done:nth-child(4n + 2) .ds-list__check {\n  background: var(--color-fill-2);\n}\n.ds-list__item.is-done:nth-child(4n + 3) .ds-list__check {\n  background: var(--color-fill-3);\n}\n.ds-list__item.is-done:nth-child(4n) .ds-list__check {\n  background: var(--color-fill-4);\n}\n.ds-list__main {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-list__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n.ds-list__meta {\n  flex: none;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* panel: a flat block; its title strip ends in a block of stripes */\n.ds-panel {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-panel__title {\n  position: relative;\n  margin: 0;\n  padding: var(--space-3) calc(var(--space-7) + var(--space-4)) var(--space-3) var(--space-4);\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-alt);\n  background: var(--color-surface-strong);\n}\n.ds-panel__title::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--space-7);\n  background: repeating-linear-gradient(-45deg, var(--color-accent) 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 2.5));\n}\n.ds-panel__body {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  padding: var(--space-4);\n}\n.ds-panel__body > * {\n  margin: 0;\n}\n.ds-panel__body > .ds-form,\n.ds-panel__body > .ds-progress,\n.ds-panel__body > .ds-progress__legend,\n.ds-panel__body > .ds-switch,\n.ds-panel__body > .ds-grid {\n  width: 100%;\n}\n.ds-panel--pick {\n  transform: rotate(-1.5deg);\n}\n.ds-panel--pick .ds-panel__title {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-panel--pick .ds-panel__title::after {\n  background: repeating-linear-gradient(-45deg, var(--color-accent-text) 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 2.5));\n}\n.ds-sheet {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n  padding: var(--space-6);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n}\n.ds-sheet > * {\n  min-width: 0;\n}\n\n/* sidebar: a flat tinted block of filters that stands on a foot of pattern */\n.ds-sidebar {\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-4) var(--space-4) var(--space-2);\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-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0 var(--space-4) var(--space-4);\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-current {\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar .ds-cover {\n  min-height: calc(var(--size-art) * 0.45);\n}\n\n/* footer: a field of pattern with one flat inverted block on it */\n.ds-footer {\n  position: relative;\n  padding: var(--space-7) var(--space-gutter);\n  overflow: hidden;\n  color: var(--color-inverse-text);\n  background: var(--fill-inverse);\n}\n.ds-footer__inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-6);\n  max-width: var(--size-content);\n  margin: 0 auto;\n  padding: var(--space-5) var(--space-6);\n  background: var(--color-inverse);\n  border-radius: calc(var(--size-art) * 1);\n}\n.ds-footer__brand {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-footer__list {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.45;\n  text-transform: var(--ui-transform);\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline wavy;\n  text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n\n/* ornaments: shapes that float free of the layout; they paint with currentColor */\n.ds-shape {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  width: var(--size-shape);\n  aspect-ratio: 1;\n  color: var(--color-fill-1);\n  pointer-events: none;\n}\n.ds-shape--disc {\n  background: currentColor;\n  border-radius: 50%;\n}\n.ds-shape--ring {\n  background: radial-gradient(closest-side, transparent 56%, currentColor 58% 98%, transparent 100%);\n}\n.ds-shape--hoop {\n  background: radial-gradient(closest-side, transparent 84%, currentColor 86% 98%, transparent 100%);\n}\n.ds-shape--half {\n  aspect-ratio: 2 / 1;\n  background: currentColor;\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-shape--quarter {\n  background: currentColor;\n  border-radius: 100% 0 0 0;\n}\n.ds-shape--tri {\n  background: currentColor;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-shape--dots {\n  background: radial-gradient(currentColor 30%, transparent 34%) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--line {\n  width: calc(var(--size-shape) * 1.6);\n  aspect-ratio: 5 / 1;\n}\n.ds-shape svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-shape svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.5);\n}\n.ds-shape--draw {\n  background: none;\n}\n.ds-shape--c5 {\n  color: var(--color-shadow);\n}\n.ds-shape--paper {\n  color: var(--color-surface);\n}\n.ds-shape--c1 {\n  color: var(--color-fill-1);\n}\n.ds-shape--c2 {\n  color: var(--color-fill-2);\n}\n.ds-shape--c3 {\n  color: var(--color-fill-3);\n}\n.ds-shape--c4 {\n  color: var(--color-fill-4);\n}\n.ds-shape--ink {\n  color: var(--color-border-strong);\n}\n.ds-shape--s {\n  width: calc(var(--size-shape) * 0.5);\n}\n.ds-shape--l {\n  width: calc(var(--size-shape) * 2);\n}\n.ds-shape--xl {\n  width: calc(var(--size-shape) * 3);\n}\n.ds-shape--flip {\n  transform: rotate(180deg);\n}\n.ds-shape--side {\n  transform: rotate(90deg);\n}\n.ds-shape--tilt {\n  transform: rotate(-14deg);\n}\n.ds-shape--turn {\n  transform: rotate(28deg);\n}\n.ds-shape--tl {\n  top: var(--space-5);\n  left: var(--space-5);\n}\n.ds-shape--bl {\n  bottom: var(--space-5);\n  left: var(--space-5);\n}\n.ds-shape--edge-r {\n  top: 30%;\n  right: calc(var(--size-shape) * -0.5);\n}\n.ds-shape--edge-l {\n  bottom: 12%;\n  left: calc(var(--size-shape) * -0.5);\n}\n\n/* covers and pattern grounds: a flat fill with a pattern drawn in a second, clashing fill.\n   Text never sits straight on one: it goes on a flat block laid over the pattern */\n.ds-cover {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  overflow: hidden;\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--1 {\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--2 {\n  background-color: var(--color-fill-2);\n  color: var(--color-fill-3);\n}\n.ds-cover--3 {\n  background-color: var(--color-fill-3);\n  color: var(--color-fill-4);\n}\n.ds-cover--4 {\n  background-color: var(--color-fill-4);\n  color: var(--color-fill-1);\n}\n.ds-cover--dots {\n  background-image: radial-gradient(currentColor 28%, transparent 31%);\n  background-size: var(--size-dot) var(--size-dot);\n}\n.ds-cover--stripes {\n  background-image: repeating-linear-gradient(-45deg, currentColor 0 calc(var(--size-stroke) * 1.5), transparent calc(var(--size-stroke) * 1.5) var(--size-dot));\n}\n.ds-cover--zig {\n  background-image:\n    linear-gradient(135deg, currentColor 25%, transparent 25%),\n    linear-gradient(225deg, currentColor 25%, transparent 25%);\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--terrazzo {\n  background-image:\n    radial-gradient(ellipse 10% 6% at 18% 24%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 11% at 72% 16%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 9% 9% at 46% 58%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 12% 5% at 84% 70%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 8% at 14% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 6% 4% at 56% 92%, var(--color-surface) 96%, transparent);\n  background-size: calc(var(--size-dot) * 7) calc(var(--size-dot) * 6);\n}\n.ds-cover--dash {\n  background-image:\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent),\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 2) calc(var(--size-dot) * 1.5);\n  background-position: 0 0, var(--size-dot) calc(var(--size-dot) * 0.75);\n}\n.ds-cover--rings {\n  background-image:\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%),\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%);\n  background-size: calc(var(--size-dot) * 3) calc(var(--size-dot) * 3);\n  background-position: 0 0, calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--confetti {\n  background-image:\n    radial-gradient(ellipse 4% 4% at 12% 16%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 44% 10%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 2% 9% at 80% 22%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 5% 5% at 66% 52%, var(--color-shadow) 96%, transparent),\n    radial-gradient(ellipse 2% 8% at 26% 48%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 16% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 3% 3% at 50% 78%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 8% 2% at 84% 86%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 8) calc(var(--size-dot) * 8);\n}\n.ds-cover--ground {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  min-height: 0;\n}\n.ds-cover .ds-shape {\n  position: relative;\n  flex: none;\n}\n.ds-cover__chip {\n  position: absolute;\n  left: var(--space-3);\n  bottom: var(--space-3);\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-pill);\n}\n\n/* brand */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-logo);\n  height: var(--size-logo);\n  padding: var(--space-1);\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border-radius: var(--radius-control);\n  transform: rotate(-8deg);\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-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-bar-text);\n}\n\n/* typography */\n.ds-prose {\n  max-width: 66ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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 {\n  margin: 0 0 var(--space-5);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin: var(--space-6) 0 var(--space-3);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-prose a {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\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: 1.45;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-decoration-thickness: var(--space-nudge);\n  text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--plain {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link--plain:visited {\n  color: inherit;\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n  text-decoration-style: wavy;\n}\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n  color: inherit;\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\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\n/* buttons: one flat block of colour, no outline and nothing behind it; hover swaps the fill and tilts the block */\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  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  cursor: pointer;\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border: 0;\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-button--secondary {\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  transition: var(--transition), background-color 0s;\n}\n.ds-button--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-size: var(--text-large);\n}\n.ds-button--small {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  color: var(--color-button-hover-text);\n  background: var(--fill-button-hover);\n  transform: rotate(-2deg);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n  transform: translateY(var(--space-nudge)) rotate(1deg);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n  transform: none;\n  cursor: not-allowed;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* badge: a small flat tag */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.6;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  vertical-align: middle;\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n  background: var(--color-accent-alt);\n}\n.ds-badge--plain {\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n}\n.ds-badge--success {\n  background: var(--color-success);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-badge--tilt {\n  transform: rotate(-4deg);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  align-content: start;\n}\n.ds-form__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-form__control {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\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  color: var(--color-input-text);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-form__control--area {\n  min-height: calc(var(--size-control) * 2.4);\n  border-radius: var(--radius-panel);\n  resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form__checkbox {\n  appearance: none;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n  background:\n    linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 44% 44% no-repeat,\n    var(--fill-accent);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* switch: a flat track with a flat thumb; on is the accent fill */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  cursor: pointer;\n}\n.ds-switch--end {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: calc(var(--size-thumb) * 2 + var(--space-nudge) * 2);\n  height: calc(var(--size-thumb) + var(--space-nudge) * 2);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: var(--space-nudge);\n  left: var(--space-nudge);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  background: var(--color-button-secondary);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n  left: auto;\n  right: var(--space-nudge);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-switch__label {\n  min-width: 0;\n}\n.ds-switch__hint {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* table: one flat block; each row is led by a small shape in the next fill */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-base);\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  text-align: left;\n  vertical-align: middle;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n  color: var(--color-bar-text);\n  background: var(--color-bar);\n  border-bottom: 0;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ds-table tbody tr.is-current td {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__name {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-table__name::before {\n  content: \"\";\n  flex: none;\n  width: var(--space-4);\n  aspect-ratio: 1;\n  background: var(--color-fill-1);\n  border-radius: 50%;\n}\n.ds-table tr:nth-child(4n + 2) .ds-table__name::before {\n  background: var(--color-fill-2);\n  border-radius: 0;\n  transform: rotate(12deg);\n}\n.ds-table tr:nth-child(4n + 3) .ds-table__name::before {\n  background: var(--color-fill-3);\n  border-radius: 100% 0 0 0;\n}\n.ds-table tr:nth-child(4n) .ds-table__name::before {\n  background: var(--color-fill-4);\n  border-radius: 0;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-table__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* tabs: one flat capsule that holds the choices; the current one is an accent capsule inside it, tilted */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  width: fit-content;\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--color-surface-strong);\n  border-radius: var(--size-control);\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--color-text);\n  border-radius: var(--size-control);\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-alt);\n}\n.ds-tabs__tab.is-current {\n  font-weight: var(--weight-bold);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-3deg);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* notice: a flat block with a half disc standing on its left edge */\n.ds-notice {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-2));\n  color: var(--color-notice-text);\n  background: var(--color-notice);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-notice::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: var(--space-5);\n  height: calc(var(--space-5) * 2);\n  background: currentColor;\n  border-radius: 0 100% 100% 0 / 0 50% 50% 0;\n  transform: translateY(-50%);\n}\n.ds-notice__title {\n  flex: none;\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n  flex: 1 1 24ch;\n  margin: 0;\n}\n.ds-notice--error {\n  color: var(--color-text);\n  background: var(--color-danger-surface);\n}\n.ds-notice--error::before {\n  color: var(--color-danger);\n}\n\n/* pagination: flat discs and capsules; the current page is an accent block, tilted */\n.ds-pagination {\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-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control-small);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--size-control);\n  transition: var(--transition), background-color 0s;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--color-accent-alt);\n  transform: rotate(-4deg);\n}\n.ds-pagination__link.is-current {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: 0;\n  transform: rotate(8deg);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n\n/* breadcrumb: a small trail; a short accent dash joins each level to the next */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-3);\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\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-3);\n  height: var(--space-1);\n  background: var(--fill-accent);\n  border-radius: var(--space-1);\n}\n.ds-breadcrumb__item.is-current {\n  font-weight: var(--weight-bold);\n}\n\n/* dialog */\n.ds-dialog {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-dialog);\n  margin: 0 auto;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-dialog__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-strong);\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  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  padding: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n}\n.ds-dialog__body {\n  padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  padding: 0 var(--space-4) var(--space-5);\n}\n\n/* empty state: a quiet flat block with a small cluster of shapes */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  text-align: center;\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-empty__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n}\n.ds-empty__art .ds-shape {\n  position: relative;\n}\n.ds-empty__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-empty__text {\n  max-width: 40ch;\n  margin: 0 0 var(--space-2);\n}\n\n/* menu: a drop-down under a navigation item */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle svg {\n  flex: none;\n  width: var(--space-3);\n  height: var(--space-3);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n  transform: rotate(180deg);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-3));\n  left: 0;\n  z-index: 8;\n  display: grid;\n  min-width: 24ch;\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-1deg);\n}\n.ds-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-menu__note {\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n\n/* tooltip */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 9;\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.5;\n  text-transform: none;\n  white-space: nowrap;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-2deg);\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* accordion */\n.ds-accordion {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-accordion__item {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  list-style: none;\n  cursor: pointer;\n  color: var(--color-heading);\n  background: var(--color-surface-alt);\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__item[open] .ds-accordion__head {\n  background: var(--color-surface-strong);\n}\n.ds-accordion__sign {\n  position: relative;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__sign {\n  background: var(--color-accent-alt);\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-accordion__body {\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* progress: a flat track, the done part striped over the accent */\n.ds-progress {\n  display: block;\n  height: var(--size-track);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  overflow: hidden;\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background:\n    repeating-linear-gradient(-45deg, transparent 0 var(--space-2), color-mix(in srgb, var(--color-accent-text) 28%, transparent) var(--space-2) calc(var(--space-2) + var(--size-stroke))),\n    var(--fill-accent);\n}\n.ds-progress--60 .ds-progress__bar {\n  width: 60%;\n}\n.ds-progress__legend {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n}\n\n/* avatar: a face or initials on a patterned tile */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-avatar__pic {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  color: var(--color-accent-text);\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n  border-radius: var(--radius-control);\n}\n.ds-avatar--1 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-2);\n}\n.ds-avatar--3 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-3);\n}\n.ds-avatar--4 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-4);\n}\n.ds-avatar__pic svg {\n  display: block;\n  width: 70%;\n  height: 70%;\n}\n.ds-avatar__text {\n  min-width: 0;\n}\n.ds-avatar__name {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-avatar__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n\n/* carousel: one slide shows; the dots are a disc, a diamond and a square */\n.ds-carousel {\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-5);\n  scroll-snap-align: start;\n}\n.ds-carousel__quote {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.3;\n  color: var(--color-heading);\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-carousel__arrow svg {\n  width: var(--space-4);\n  height: var(--space-4);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-6deg);\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-carousel__dot {\n  width: var(--space-3);\n  height: var(--space-3);\n  background: var(--color-border);\n  border-radius: 50%;\n}\n.ds-carousel__dot:nth-child(3n + 2) {\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-carousel__dot:nth-child(3n) {\n  border-radius: 0;\n}\n.ds-carousel__dot.is-current {\n  background: var(--fill-accent);\n}\n\n/* squiggle: the wavy rule under a section title */\n.ds-squiggle {\n  display: block;\n  width: calc(var(--size-shape) * 1.25);\n  height: var(--space-4);\n  color: var(--color-accent);\n}\n.ds-squiggle svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-squiggle svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.25);\n}\n\n/* menu at the right end of the bar opens leftwards */\n.ds-menu--end .ds-menu__list {\n  right: 0;\n  left: auto;\n}\n\n@media (max-width: 1000px) {\n  .ds-split,\n  .ds-split--even,\n  .ds-split--flip,\n  .ds-split--side {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__inner {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-hero__ground {\n    width: calc(var(--size-shape) * 3);\n  }\n  .ds-hero__art {\n    min-height: 0;\n  }\n  .ds-dial {\n    width: calc(var(--size-dial) * 0.7);\n  }\n  .ds-dial--small {\n    width: calc(var(--size-dial) * 0.5);\n  }\n  .ds-stat {\n    flex-wrap: wrap;\n    gap: var(--space-2) 0;\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(2),\n  .ds-stat__cell:nth-child(3),\n  .ds-stat__cell:nth-child(4) {\n    flex: 1 1 40%;\n    padding: var(--space-4) var(--space-5);\n  }\n  .ds-stat__cell:nth-child(3) {\n    margin-left: 0;\n  }\n  .ds-band__slab,\n  .ds-band > .ds-shape,\n  .ds-hero__art .ds-shape,\n  .ds-page-header__disc,\n  .ds-footer > .ds-shape {\n    display: none;\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-2) var(--space-4);\n    padding: var(--space-3) var(--space-4) 0;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 0 0 100%;\n    gap: 0;\n  }\n  .ds-footer__inner {\n    border-radius: var(--radius-panel);\n  }\n}\n\n@media (max-width: 600px) {\n  .ds-band,\n  .ds-band--tight {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-band--lift {\n    padding-top: 0;\n  }\n  .ds-hero {\n    padding: var(--space-7) var(--space-4) calc(var(--space-8) + var(--space-5));\n  }\n  .ds-page-header {\n    padding: var(--space-6) var(--space-4) var(--space-6);\n  }\n  .ds-nav__link {\n    padding: 0 var(--space-3);\n    font-size: var(--text-small);\n  }\n  .ds-hero__ground {\n    width: calc(var(--size-shape) * 2.2);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.5);\n  }\n  .ds-hero__actions,\n  .ds-hero__actions .ds-button {\n    width: 100%;\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-prose h2,\n  .ds-chart__title {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-page-header__actions {\n    transform: none;\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(2),\n  .ds-stat__cell:nth-child(3),\n  .ds-stat__cell:nth-child(4) {\n    flex: 1 1 100%;\n    margin-left: 0;\n    padding: var(--space-3) var(--space-5);\n    transform: none;\n  }\n  .ds-stat__cell:nth-child(even) {\n    transform: rotate(-2deg);\n  }\n  .ds-stat__value {\n    font-size: var(--text-h2);\n  }\n  .ds-chart,\n  .ds-month,\n  .ds-sheet {\n    padding: var(--space-4);\n  }\n  .ds-chart__bars,\n  .ds-chart__days {\n    gap: var(--space-1);\n    padding: 0;\n  }\n  .ds-grid {\n    gap: var(--space-1);\n  }\n  .ds-grid__cell {\n    font-size: var(--text-small);\n  }\n  .ds-grid--strip {\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-button {\n    white-space: normal;\n  }\n  .ds-table {\n    font-size: var(--text-small);\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-2);\n  }\n  .ds-table .ds-table__extra {\n    display: none;\n  }\n  .ds-list__item {\n    flex-wrap: wrap;\n    gap: var(--space-2) var(--space-3);\n  }\n  .ds-list__meta {\n    flex: 0 0 100%;\n  }\n  .ds-menu__list {\n    min-width: 0;\n    width: 26ch;\n    max-width: 80vw;\n  }\n  .ds-footer {\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-footer__inner {\n    padding: var(--space-5) var(--space-4);\n  }\n}\n\n/* phone navigation: a tab row of equal cells */\n@media (max-width: 600px) {\n  .ds-nav__links > li {\n    display: flex;\n    flex: 1 1 0;\n    justify-content: center;\n    min-width: 0;\n  }\n  .ds-nav__link {\n    gap: var(--space-1);\n    padding: 0 var(--space-1);\n  }\n  .ds-nav__links .ds-menu__list {\n    right: 0;\n    left: auto;\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: memphis habit board 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  <nav class=\"ds-nav__inner\" aria-label=\"Main\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2.8 18q2.3-5.6 4.6 0t4.6 0t4.6 0t4.6 0\" stroke-width=\"2.4\"/><circle cx=\"6.5\" cy=\"7\" r=\"3.4\" fill=\"currentColor\" stroke=\"none\"/><polygon points=\"16.8,3.6 21.2,10.6 12.4,10.6\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><span class=\"ds-nav__icon\" aria-hidden=\"true\"></span>Today</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#habits\"><span class=\"ds-nav__icon\" aria-hidden=\"true\"></span>Habits</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#new\"><span class=\"ds-nav__icon\" aria-hidden=\"true\"></span>New</a></li>\n      <li>\n        <details class=\"ds-menu\" data-component=\"menu\">\n          <summary class=\"ds-nav__link ds-menu__toggle\"><span class=\"ds-nav__icon\" aria-hidden=\"true\"></span>More <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 6 5 5 5-5\"/></svg></summary>\n          <ul class=\"ds-menu__list\">\n            <li><a class=\"ds-menu__link\" href=\"#habit\">Longest streak <span class=\"ds-menu__note\">19 days</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#habits\">Paused habits <span class=\"ds-menu__note\">0</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#new\">Reminders</a></li>\n            <li><a class=\"ds-menu__link\" href=\"#habit\">How counting works</a></li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <span class=\"ds-badge ds-badge--plain\">Week 41</span>\n      <a class=\"ds-avatar ds-avatar--2\" href=\"#habits\" aria-label=\"Aino Berg, your habits\"><span class=\"ds-avatar__pic\">AB</span></a>\n    </div>\n  </nav>\n</header>\n\n<main>\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <section class=\"ds-hero\" data-component=\"hero\">\n    <span class=\"ds-cover ds-cover--3 ds-cover--rings ds-cover--ground ds-hero__ground\" aria-hidden=\"true\"></span>\n    <div class=\"ds-hero__inner\">\n      <div class=\"ds-hero__body\">\n        <span class=\"ds-badge ds-badge--alt ds-badge--tilt\">Thursday, day 19 in a row</span>\n        <h1 class=\"ds-hero__title\">Four of six. <span class=\"ds-hero__mark\">Two to go.</span></h1>\n        <p class=\"ds-hero__lead\">chronoskin counts the small things you meant to do today. Reading and the evening walk are still open, and both fit before ten.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#habit\">Check in reading</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#habits\">All six habits</a>\n        </div>\n      </div>\n      <div class=\"ds-hero__art\">\n        <span class=\"ds-shape ds-shape--quarter ds-shape--xl ds-shape--c5 ds-shape--side\" aria-hidden=\"true\"></span>\n        <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tilt\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n        <span class=\"ds-shape ds-shape--tri ds-shape--c2 ds-shape--turn\" aria-hidden=\"true\"></span>\n        <span class=\"ds-shape ds-shape--dots ds-shape--l ds-shape--ink\" aria-hidden=\"true\"></span>\n        <div class=\"ds-dial ds-dial--66\" role=\"img\" aria-label=\"Four of six habits done today\">\n          <span class=\"ds-dial__ring\"></span>\n          <span class=\"ds-dial__hub\"><strong class=\"ds-dial__value\">4/6</strong><span class=\"ds-dial__label\">done today</span></span>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--alt ds-band--lift\">\n    <div class=\"ds-band__inner ds-stack ds-stack--wide\">\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">19</strong><span class=\"ds-stat__label\">days in a row</span></li>\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">86%</strong><span class=\"ds-stat__label\">this week</span></li>\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">212</strong><span class=\"ds-stat__label\">check-ins since June</span></li>\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">6</strong><span class=\"ds-stat__label\">habits</span></li>\n      </ul>\n      <div class=\"ds-split\">\n        <section class=\"ds-chart\" aria-label=\"This week\">\n          <div class=\"ds-chart__head\">\n            <h2 class=\"ds-chart__title\">This week</h2>\n            <a class=\"ds-link\" href=\"#habits\">Habit by habit</a>\n          </div>\n          <ol class=\"ds-chart__bars\">\n            <li class=\"ds-chart__bar ds-chart__bar--5\"><span class=\"ds-chart__value\">5</span><span class=\"ds-cover ds-cover--1 ds-cover--dots\"></span></li>\n            <li class=\"ds-chart__bar ds-chart__bar--6\"><span class=\"ds-chart__value\">6</span><span class=\"ds-cover ds-cover--2 ds-cover--stripes\"></span></li>\n            <li class=\"ds-chart__bar ds-chart__bar--3\"><span class=\"ds-chart__value\">3</span><span class=\"ds-cover ds-cover--3 ds-cover--zig\"></span></li>\n            <li class=\"ds-chart__bar ds-chart__bar--4 is-current\"><span class=\"ds-chart__value\">4</span><span class=\"ds-cover ds-cover--4 ds-cover--rings\"></span></li>\n            <li class=\"ds-chart__bar ds-chart__bar--none\"></li>\n            <li class=\"ds-chart__bar ds-chart__bar--none\"></li>\n            <li class=\"ds-chart__bar ds-chart__bar--none\"></li>\n          </ol>\n          <span class=\"ds-chart__ground\" aria-hidden=\"true\"></span>\n          <ol class=\"ds-chart__days\" aria-hidden=\"true\">\n            <li class=\"ds-chart__day\">Mon</li>\n            <li class=\"ds-chart__day\">Tue</li>\n            <li class=\"ds-chart__day\">Wed</li>\n            <li class=\"ds-chart__day is-current\">Thu</li>\n            <li class=\"ds-chart__day\">Fri</li>\n            <li class=\"ds-chart__day\">Sat</li>\n            <li class=\"ds-chart__day\">Sun</li>\n          </ol>\n        </section>\n        <div>\n          <h2 class=\"ds-band__label\">Today's six</h2>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Water before coffee</a></h3><p class=\"ds-list__text\">One glass, first thing</p></div>\n              <span class=\"ds-list__meta\">day 19</span>\n            </li>\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Stretch for five minutes</a></h3><p class=\"ds-list__text\">Before the desk</p></div>\n              <span class=\"ds-list__meta\">day 12</span>\n            </li>\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Draw one thing</a></h3><p class=\"ds-list__text\">Any size, any pen</p></div>\n              <span class=\"ds-list__meta\">day 7</span>\n            </li>\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Write to someone</a></h3><p class=\"ds-list__text\">A line is enough</p></div>\n              <span class=\"ds-list__meta\">day 3</span>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__check\" aria-label=\"open\"></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Read twenty pages</a></h3><p class=\"ds-list__text\">Evenings, phone in the hall</p></div>\n              <span class=\"ds-list__meta\">open</span>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__check\" aria-label=\"open\"></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Walk round the block</a></h3><p class=\"ds-list__text\">After dinner</p></div>\n              <span class=\"ds-list__meta\">open</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-cover ds-cover--4 ds-cover--confetti ds-cover--ground ds-band__slab\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--ring ds-shape--l ds-shape--c2 ds-shape--edge-l\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--c4 ds-shape--tl ds-shape--tilt\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v18M3 12h18\"/></svg></span>\n    <div class=\"ds-band__inner ds-split ds-split--flip\">\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">Nudges</h2>\n          <div class=\"ds-panel__body\">\n            <p>One quiet reminder for each habit that is still open, and nothing after ten.</p>\n            <label class=\"ds-switch ds-switch--end\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Evening nudge<span class=\"ds-switch__hint\">At eight, for what is still open</span></span></label>\n            <div class=\"ds-progress__legend\"><span>Thirty days of reading</span><span>19 of 30</span></div>\n            <span class=\"ds-progress ds-progress--60\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"63\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Thirty days of reading\"><span class=\"ds-progress__bar\"></span></span>\n            <a class=\"ds-link\" href=\"#new\">Change the times</a>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"From people keeping pace with you\">\n          <div class=\"ds-carousel__track\">\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">I stopped counting pages and started counting evenings. That one stuck.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--3\" data-component=\"avatar\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Kiviniemi</span><span class=\"ds-avatar__meta\">reads with you, day 44</span></span></figcaption>\n            </figure>\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">A missed day is a hoop, not a hole.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">MD</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Milan Dvorak</span><span class=\"ds-avatar__meta\">walks with you, day 8</span></span></figcaption>\n            </figure>\n          </div>\n          <div class=\"ds-carousel__foot\">\n            <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n          </div>\n        </div>\n      </div>\n      <section class=\"ds-month\" aria-label=\"October, day by day\">\n        <div class=\"ds-chart__head\">\n          <h2 class=\"ds-chart__title\">October in discs</h2>\n          <div class=\"ds-badges\"><span class=\"ds-badge ds-badge--success\">6 full days</span><span class=\"ds-badge ds-badge--plain\">1 missed</span></div>\n        </div>\n        <ol class=\"ds-grid\" data-component=\"grid\">\n          <li class=\"ds-grid__head\">Mon</li><li class=\"ds-grid__head\">Tue</li><li class=\"ds-grid__head\">Wed</li><li class=\"ds-grid__head\">Thu</li><li class=\"ds-grid__head\">Fri</li><li class=\"ds-grid__head\">Sat</li><li class=\"ds-grid__head\">Sun</li>\n          <li class=\"ds-grid__cell is-done\">1</li><li class=\"ds-grid__cell is-done\">2</li><li class=\"ds-grid__cell is-done\">3</li><li class=\"ds-grid__cell is-missed\">4</li><li class=\"ds-grid__cell is-done\">5</li><li class=\"ds-grid__cell is-done\">6</li><li class=\"ds-grid__cell is-done\">7</li>\n          <li class=\"ds-grid__cell is-current\">8</li><li class=\"ds-grid__cell\">9</li><li class=\"ds-grid__cell\">10</li><li class=\"ds-grid__cell\">11</li><li class=\"ds-grid__cell\">12</li><li class=\"ds-grid__cell\">13</li><li class=\"ds-grid__cell\">14</li>\n          <li class=\"ds-grid__cell\">15</li><li class=\"ds-grid__cell\">16</li><li class=\"ds-grid__cell\">17</li><li class=\"ds-grid__cell\">18</li><li class=\"ds-grid__cell\">19</li><li class=\"ds-grid__cell\">20</li><li class=\"ds-grid__cell\">21</li>\n          <li class=\"ds-grid__cell\">22</li><li class=\"ds-grid__cell\">23</li><li class=\"ds-grid__cell\">24</li><li class=\"ds-grid__cell\">25</li><li class=\"ds-grid__cell\">26</li><li class=\"ds-grid__cell\">27</li><li class=\"ds-grid__cell\">28</li>\n        </ol>\n        <p>A full day is a disc, a missed one a hoop. <a class=\"ds-link\" href=\"#habit\">How counting works</a></p>\n      </section>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"habits\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-cover ds-cover--2 ds-cover--dots ds-cover--ground ds-page-header__disc\" aria-hidden=\"true\"></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Today</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">Habits</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Active</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Habits</h1>\n          <p class=\"ds-page-header__lead\">Six running, three finished, none paused.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#new\">New habit</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c3 ds-shape--edge-r ds-shape--side\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split ds-split--side\">\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Areas</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">Everything</a><span class=\"ds-badge\">6</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">Body</a><span class=\"ds-badge ds-badge--plain\">3</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">Head</a><span class=\"ds-badge ds-badge--plain\">2</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">People</a><span class=\"ds-badge ds-badge--plain\">1</span></li>\n          </ul>\n          <div class=\"ds-cover ds-cover--1 ds-cover--zig\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--paper\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--c3\"></span></div>\n        </aside>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <div class=\"ds-empty__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--hoop ds-shape--s ds-shape--c2\"></span><span class=\"ds-shape ds-shape--hoop ds-shape--s ds-shape--c4\"></span><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c3\"></span></div>\n          <h3 class=\"ds-empty__title\">Nothing is paused</h3>\n          <p class=\"ds-empty__text\">A paused habit keeps its streak for two weeks.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#habit\">How counting works</a>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#habits\" role=\"tab\" aria-selected=\"true\">Active <span class=\"ds-badge ds-badge--plain\">6</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#habits\" role=\"tab\">Paused</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#habits\" role=\"tab\">Finished</a></li>\n        </ul>\n        <div class=\"ds-stack\" data-component=\"notice\">\n          <div class=\"ds-notice\" role=\"status\">\n            <strong class=\"ds-notice__title\">Moved</strong>\n            <p class=\"ds-notice__text\">Reading now counts in the evening, from six until midnight.</p>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <strong class=\"ds-notice__title\">Not saved</strong>\n            <p class=\"ds-notice__text\">Two check-ins from this morning are waiting for a connection.</p>\n          </div>\n        </div>\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Habit</th><th class=\"ds-table__extra\">Area</th><th>Today</th><th class=\"ds-table__num\">Streak</th><th class=\"ds-table__extra ds-table__num\">This month</th></tr>\n          </thead>\n          <tbody>\n            <tr><td><span class=\"ds-table__name\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Water before coffee</a></span></td><td class=\"ds-table__extra\">Body</td><td><span class=\"ds-badge ds-badge--success\">Done</span></td><td class=\"ds-table__num\">19</td><td class=\"ds-table__extra ds-table__num\">100%</td></tr>\n            <tr><td><span class=\"ds-table__name\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Stretch for five minutes</a></span></td><td class=\"ds-table__extra\">Body</td><td><span class=\"ds-badge ds-badge--success\">Done</span></td><td class=\"ds-table__num\">12</td><td class=\"ds-table__extra ds-table__num\">88%</td></tr>\n            <tr class=\"is-current\"><td><span class=\"ds-table__name\"><span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Read twenty pages</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">counts from six in the evening</span></span></span></td><td class=\"ds-table__extra\">Head</td><td><span class=\"ds-badge ds-badge--warning\">Open</span></td><td class=\"ds-table__num\">18</td><td class=\"ds-table__extra ds-table__num\">86%</td></tr>\n            <tr><td><span class=\"ds-table__name\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Draw one thing</a></span></td><td class=\"ds-table__extra\">Head</td><td><span class=\"ds-badge ds-badge--success\">Done</span></td><td class=\"ds-table__num\">7</td><td class=\"ds-table__extra ds-table__num\">71%</td></tr>\n            <tr><td><span class=\"ds-table__name\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Write to someone</a></span></td><td class=\"ds-table__extra\">People</td><td><span class=\"ds-badge ds-badge--success\">Done</span></td><td class=\"ds-table__num\">3</td><td class=\"ds-table__extra ds-table__num\">57%</td></tr>\n            <tr><td><span class=\"ds-table__name\"><a class=\"ds-link ds-link--quiet\" href=\"#habit\">Walk round the block</a></span></td><td class=\"ds-table__extra\">Body</td><td><span class=\"ds-badge ds-badge--danger\">Missed twice</span></td><td class=\"ds-table__num\">0</td><td class=\"ds-table__extra ds-table__num\">43%</td></tr>\n          </tbody>\n        </table>\n        <div class=\"ds-row\">\n          <div class=\"ds-badges\" data-component=\"badge\">\n            <span class=\"ds-badge\">Body</span>\n            <span class=\"ds-badge ds-badge--alt\">New</span>\n            <span class=\"ds-badge ds-badge--plain\">Head</span>\n            <span class=\"ds-badge ds-badge--success\">Done</span>\n            <span class=\"ds-badge ds-badge--warning\">Open</span>\n            <span class=\"ds-badge ds-badge--danger\">Missed</span>\n          </div>\n          <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#habits\" aria-disabled=\"true\">Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#habits\" aria-current=\"page\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#habits\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#habits\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"habit\">\n  <section class=\"ds-page-header\" data-component=\"page-header\">\n    <span class=\"ds-cover ds-cover--4 ds-cover--stripes ds-cover--ground ds-page-header__disc\" aria-hidden=\"true\"></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Today</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">Habits</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Read twenty pages</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Read twenty pages</h1>\n          <p class=\"ds-page-header__lead\">Every evening since 20 September. Open today.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#new\">Change</a>\n          <a class=\"ds-button\" href=\"#home\">Check in</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-shape ds-shape--quarter ds-shape--xl ds-shape--c1 ds-shape--bl ds-shape--flip\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split\">\n      <div class=\"ds-stack\">\n        <section class=\"ds-month\" aria-label=\"The last two weeks\">\n          <div class=\"ds-chart__head\">\n            <h2 class=\"ds-chart__title\">Two weeks</h2>\n            <span class=\"ds-badge ds-badge--warning\">Open today</span>\n          </div>\n          <ol class=\"ds-grid ds-grid--strip\">\n            <li class=\"ds-grid__cell is-done\">25</li><li class=\"ds-grid__cell is-done\">26</li><li class=\"ds-grid__cell is-done\">27</li><li class=\"ds-grid__cell is-done\">28</li><li class=\"ds-grid__cell is-done\">29</li><li class=\"ds-grid__cell is-done\">30</li><li class=\"ds-grid__cell is-done\">1</li>\n            <li class=\"ds-grid__cell is-done\">2</li><li class=\"ds-grid__cell is-done\">3</li><li class=\"ds-grid__cell is-missed\">4</li><li class=\"ds-grid__cell is-done\">5</li><li class=\"ds-grid__cell is-done\">6</li><li class=\"ds-grid__cell is-done\">7</li><li class=\"ds-grid__cell is-current\">8</li>\n          </ol>\n          <div>\n            <div class=\"ds-progress__legend\"><span>Thirty evenings</span><span>19 of 30</span></div>\n            <span class=\"ds-progress ds-progress--60\" role=\"progressbar\" aria-valuenow=\"63\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Thirty evenings\"><span class=\"ds-progress__bar\"></span></span>\n          </div>\n        </section>\n        <div class=\"ds-sheet\">\n          <article class=\"ds-prose\" data-component=\"typography\">\n            <h1>How counting works</h1>\n            <p class=\"ds-prose__lead\">A habit counts once a day, inside the hours you gave it. Reading counts from six in the evening until midnight.</p>\n            <h2>Streaks</h2>\n            <p>A streak is the number of days in a row with a check-in. One missed day <strong>breaks the row but not the month</strong>: the calendar keeps the hoop and carries on.</p>\n            <ul>\n              <li>A check-in after midnight belongs to the new day</li>\n              <li>A paused habit keeps its streak for two weeks</li>\n              <li>Two misses in a row turn the label red</li>\n            </ul>\n            <h3>Your own rule</h3>\n            <p>Each habit has one line that says when it fits. For this one it is <code>after dinner, phone in the hall</code>, and you can change it at any time.</p>\n          </article>\n          <ul class=\"ds-links\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#new\">Change the rule</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#habits\">All six habits</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#home\">Back to today</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#new\">Pause this habit</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel ds-panel--pick\">\n          <h2 class=\"ds-panel__title\">This habit</h2>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-row\">\n              <div class=\"ds-dial ds-dial--small ds-dial--75\" role=\"img\" aria-label=\"86 percent of evenings this month\">\n                <span class=\"ds-dial__ring\"></span>\n                <span class=\"ds-dial__hub\"><strong class=\"ds-dial__value\">86%</strong></span>\n              </div>\n              <p>Six of seven evenings this month, and the longest row so far.</p>\n            </div>\n            <a class=\"ds-button ds-button--small\" href=\"#home\">Check in for today</a>\n          </div>\n        </section>\n        <div>\n          <h2 class=\"ds-band__label\">Last check-ins</h2>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\">Wednesday</h3><p class=\"ds-list__text\">24 pages, on the sofa</p></div>\n              <span class=\"ds-list__meta\">21:40</span>\n            </li>\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\">Tuesday</h3><p class=\"ds-list__text\">20 pages</p></div>\n              <span class=\"ds-list__meta\">22:05</span>\n            </li>\n            <li class=\"ds-list__item is-done\">\n              <span class=\"ds-list__check\" aria-label=\"done\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 8.5 3.5 3.5L13 4.5\"/></svg></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\">Monday</h3><p class=\"ds-list__text\">31 pages, could not stop</p></div>\n              <span class=\"ds-list__meta\">20:15</span>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__check\" aria-label=\"missed\"></span>\n              <div class=\"ds-list__main\"><h3 class=\"ds-list__title\">Sunday</h3><p class=\"ds-list__text\">Missed, out late</p></div>\n              <span class=\"ds-list__meta\">no entry</span>\n            </li>\n          </ul>\n        </div>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Reading with you</h2>\n          <div class=\"ds-panel__body\">\n            <a class=\"ds-avatar ds-avatar--3\" href=\"#habits\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Kiviniemi</span><span class=\"ds-avatar__meta\">day 44</span></span></a>\n            <a class=\"ds-avatar ds-avatar--4\" href=\"#habits\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Sami Oyelaran</span><span class=\"ds-avatar__meta\">day 19, same as you</span></span></a>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"new\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-cover ds-cover--1 ds-cover--terrazzo ds-cover--ground ds-page-header__disc\" aria-hidden=\"true\"></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Today</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#habits\">Habits</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">New</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">New habit</h1>\n          <p class=\"ds-page-header__lead\">Make it small enough to do on a bad day.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-cover ds-cover--2 ds-cover--dash ds-cover--ground ds-band__slab\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">The habit</h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"h-name\">What will you do</label>\n              <input class=\"ds-form__control\" id=\"h-name\" type=\"text\" value=\"Play the piano for ten minutes\">\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"h-area\">Area</label>\n                <select class=\"ds-form__control\" id=\"h-area\">\n                  <option>Head</option>\n                  <option>Body</option>\n                  <option>People</option>\n                </select>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"h-days\">Days a week</label>\n                <input class=\"ds-form__control is-invalid\" id=\"h-days\" type=\"text\" value=\"9\" aria-invalid=\"true\" aria-describedby=\"h-days-err\">\n                <p class=\"ds-form__error\" id=\"h-days-err\">A week has seven days. Choose one to seven.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"h-rule\">Your own rule</label>\n              <textarea class=\"ds-form__control ds-form__control--area\" id=\"h-rule\">Right after the dishes, before sitting down.</textarea>\n              <p class=\"ds-form__hint\">One line that says when it fits into the day.</p>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Weekends count too</label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Nudge me at eight<span class=\"ds-switch__hint\">Only if it is still open</span></span></label>\n            <div class=\"ds-buttons\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Start today</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Save as paused</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Delete</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Share with a friend</button>\n            </div>\n          </form>\n        </div>\n      </section>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel ds-panel--pick\">\n          <h2 class=\"ds-panel__title\">It will look like this</h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-list\">\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__check\" aria-label=\"open\"></span>\n                <div class=\"ds-list__main\"><h3 class=\"ds-list__title\">Play the piano for ten minutes</h3><p class=\"ds-list__text\">Right after the dishes</p></div>\n                <span class=\"ds-list__meta\">day 1</span>\n              </li>\n            </ul>\n          </div>\n        </section>\n        <div class=\"ds-accordion\" data-component=\"accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">How small is small enough? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>If you could do it with a cold, it is small enough. Ten minutes beats an hour you skip.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">What happens when I miss a day? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>The streak starts again and the month keeps a hoop for that day.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Can a habit end? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>Yes. Give it a number of days and it moves to Finished when it gets there.</p></div>\n          </details>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--overlay\">\n    <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n      <div class=\"ds-dialog__bar\">\n        <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Delete this habit?</h2>\n        <a class=\"ds-dialog__close\" href=\"#new\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>Its check-ins go with it. To keep them and stop the nudges, save it as paused instead.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#new\">Keep it</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Delete</button>\n      </div>\n    </div>\n  </section>\n</section>\n</main>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <span class=\"ds-shape ds-shape--disc ds-shape--c2 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n  <div class=\"ds-footer__inner\">\n    <p class=\"ds-footer__brand\">chronoskin</p>\n    <ul class=\"ds-footer__list\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">Today</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#habits\">Habits</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#new\">New habit</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#habit\">How counting works</a></li>\n    </ul>\n    <p class=\"ds-footer__legal\">Specimen page. All names, habits and figures are placeholders.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.app.s08.p03.t02.u02\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-me-8322\",\n  \"short\": \"v1-me-8322\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #12163f;\n  --color-canvas: #161b4b;\n  --color-surface: #1c2259;\n  --color-surface-alt: #272e70;\n  --color-surface-strong: #343c88;\n  --color-bar: #3df5d0;\n  --color-bar-text: #12163f;\n  --color-bar-alt: #f5ff4a;\n  --color-bar-alt-text: #12163f;\n  --color-inverse: #f4f1ff;\n  --color-inverse-text: #12163f;\n  --color-text: #f1f0ff;\n  --color-text-muted: #b1b6e6;\n  --color-heading: #ffffff;\n  --color-heading-alt: #3df5d0;\n  --color-link: #3df5d0;\n  --color-link-quiet: #f1f0ff;\n  --color-link-visited: #c9a6ff;\n  --color-link-hover: #ff7bdc;\n  --color-link-active: #f5ff4a;\n  --color-border: #f1f0ff;\n  --color-border-strong: #ffffff;\n  --color-border-muted: #4a52a3;\n  --color-accent: #ff5fd2;\n  --color-accent-text: #12163f;\n  --color-accent-alt: #3df5d0;\n  --color-fill-1: #ff5fd2;\n  --color-fill-2: #3df5d0;\n  --color-fill-3: #f5ff4a;\n  --color-fill-4: #9c8aff;\n  --color-button: #f5ff4a;\n  --color-button-text: #12163f;\n  --color-button-hover-text: #12163f;\n  --color-button-secondary: #f4f1ff;\n  --color-button-secondary-text: #12163f;\n  --color-input: #0c0f2e;\n  --color-input-text: #ffffff;\n  --color-input-border: #f1f0ff;\n  --color-disabled: #2a2f66;\n  --color-disabled-text: #9297cc;\n  --color-danger: #ff7389;\n  --color-danger-surface: #4a1d4f;\n  --color-success: #5dfc8f;\n  --color-warning: #ffb347;\n  --color-notice: #3df5d0;\n  --color-notice-text: #12163f;\n  --color-focus: #f5ff4a;\n  --color-shadow: #ff8f3d;\n  --color-overlay: rgb(5 7 28 / 0.72);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Nunito\", \"Quicksand\", \"Avenir Next\", \"Segoe UI\", Arial, sans-serif;\n  --font-heading: \"Fredoka\", \"Baloo 2\", \"Arial Rounded MT Bold\", \"Varela Round\", \"Nunito\", sans-serif;\n  --font-ui: \"Nunito\", \"Quicksand\", \"Avenir Next\", \"Segoe UI\", Arial, sans-serif;\n  --font-mono: \"DM Mono\", ui-monospace, Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 16px;\n  --text-large: 20px;\n  --text-display: 84px;\n  --text-h1: 48px;\n  --text-h2: 34px;\n  --text-h3: 21px;\n  --line-body: 1.6;\n  --line-heading: 1.15;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 800;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: -0.01em;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: dashed;\n  --radius-control: 999px;\n  --radius-panel: 0;\n  --radius-pill: 999px;\n  --radius-page: 0 96px 0 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--color-border-muted) 38%, transparent) 0 14px, transparent 15px) 0 0 / 220px 180px, radial-gradient(circle at 70% 64%, transparent 0 16px, color-mix(in srgb, var(--color-border-muted) 38%, transparent) 17px 21px, transparent 22px) 0 0 / 260px 220px, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: radial-gradient(var(--color-accent) 5px, transparent 5.5px) 0 0 / 22px 22px, var(--color-bar-alt);\n  --fill-inverse: radial-gradient(circle, transparent 9px, var(--color-fill-2) 9.5px 13px, transparent 13.5px) 0 0 / 56px 56px, radial-gradient(var(--color-fill-1) 4px, transparent 4.5px) 28px 28px / 56px 56px, 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: var(--color-fill-3);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px dotted var(--color-focus);\n  --transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}