{
  "id": "v1-nm-7abb",
  "long_id": "v1.neumorphism.app.s07.p10.t11.u11",
  "name": "Neumorphism player",
  "era": {
    "slug": "neumorphism",
    "code": "nm",
    "name": "Neumorphism",
    "years": [
      2019,
      2021
    ],
    "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners."
  },
  "archetype": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": false,
    "responsive": true
  },
  "summary": "Neumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. Its most drawn showpiece after the smart home panel was the music player: a large round disc, round transport keys, a pressed progress track and a queue. This pack is that player as a desktop app on a blush surface with plum text and one raspberry accent: a raised navigation column at the left, the playing track on one deep rounded card, and soft, very round panels in a heavy geometric display face over a plain humanist sans.",
  "url": "https://chrono.skin/s/v1-nm-7abb",
  "preview_url": "https://chrono.skin/s/v1-nm-7abb/specimen.html",
  "files": {
    "STYLE.md": "# Neumorphism player\n\n## Summary\n\nNeumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. Its most drawn showpiece after the smart home panel was the music player: a large round disc, round transport keys, a pressed progress track and a queue. This pack is that player as a desktop app on a blush surface with plum text and one raspberry accent: a raised navigation column at the left, the playing track on one deep rounded card, and soft, very round panels in a heavy geometric display face over a plain humanist sans.\n\n## Layout\n\n- Frame: `.ds-app` is a centred grid `--size-page` (1240px) wide with `--space-5` (24px) padding: the `.ds-app__side` column, `--size-side` (248px), and `.ds-app__main`, which takes the rest (960px), `--space-6` (32px) apart. The page does not stretch beyond it.\n- Navigation: `.ds-nav` is vertical, a raised panel at the top of the side column: the brand, the account `.ds-menu`, then one labelled key with an icon per section. The current section is pressed in. Under it, in the same column and on every page, stands the `.ds-sidebar` panel with the playlists and the download meter.\n- Home page: one `.ds-page__stack` at 32px gaps in the main column: the `.ds-hero` card across the full width (disc at the left, text, progress and `.ds-keys` at the right); the `.ds-stat` row on the bare page; one `.ds-page__row`, three to two, with the `.ds-list` queue beside a stack of the `.ds-carousel` and a `.ds-panel`; a `.ds-page__title` and the `.ds-grid` of four stations.\n- Inner pages keep the side column and have no hero. `--space-2` below the top of the frame come the `.ds-breadcrumb` and, 12px under it, the `.ds-page-header`: title at `--text-h1` with one muted line at the left, at most two buttons at the right, on the bare page. A list page then has the `.ds-tabs` left-aligned and `.ds-page__row--aside`: the working column (notices, table, pagination) and a `--size-aside` (312px) column of small panels. A detail page uses `.ds-page__row` (three to two): the list at the left, the dialog and a panel at the right. A settings page uses `.ds-page__row--even`: the form in a panel beside the `.ds-accordion` and a panel. A text page uses `.ds-page__row`: prose in a panel beside the accordion. Keep the columns of a row about equally long.\n- Views. The specimen is one site with five views, each `<section class=\"ds-view\" id=\"...\">` inside `.ds-app__main`; the side column and the footer stand outside them and one view shows at a time. `listen` is the home view: the playing track, the week's figures, the queue beside the mixes and the friends who listen, and tonight's stations. `library` is the list page: tabs, notices, the table of albums with its pagination, and at the right the download ring and the empty state of podcasts. `playlist` is the detail page: the tracks of one playlist beside the dialog that deletes it and the people it is shared with. `settings` is the form page: the profile form beside the playback switches and the account buttons. `help` is the text page: prose beside the questions. The navigation presses in the link of the current view, by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (dot to text, tab track padding), `--space-2` 8px (label to control, gaps between navigation keys), `--space-3` 12px (icon to text, row padding of the queue), `--space-4` 16px (control side padding, gaps between keys and buttons), `--space-5` 24px (panel padding, form field gap), `--space-6` 32px (the gap between every pair of raised panels), `--space-7` 48px (hero padding, gap above the footer), `--space-8` 64px (reserved for a page that needs a wider break).\n- Raised panels need room for their shadows: never place two closer than `--space-5`, and never put a raised panel inside another. Inside a panel use wells, rules, round keys and avatars.\n- `--size-rule` (1px) is the weight of the rules between rows; it is a layout token because the rules stay when a surface part sets `--border-width` to 0.\n- Below 900px the frame is one column: the navigation panel becomes a block with the brand, the account menu and the section keys in a wrapping row, the playlists panel moves under the views and its links wrap into a row, every `.ds-page__row` stacks and the grid has two columns. Below 560px the padding drops to `--space-4`, the hero stacks with the disc above the text and takes `--text-h1`, the stats stack, form rows stack, the tabs fill the width and scroll inside their track, and table columns marked `.ds-table__opt` are hidden, so nothing scrolls sideways. On a phone (560px and below) the bar keeps the brand and the account (the avatar loses its name, `.ds-avatar__text`, and its menu list opens from the right edge) and `.ds-nav__list` becomes a raised dock of five equal keys fixed to the foot of the window, each `.ds-nav__link` an icon (`.ds-nav__icon`) above a small label, the current one pressed in; the counts `.ds-nav__count` are hidden.\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- One wide humanist family for everything: Oxygen, then Ubuntu and Verdana; `--font-mono` for code.\n- Small text, because the face is wide: `--text-base` and `--text-ui` 13px at `--line-body` 1.6, `--text-small` 11px, `--text-large` 15px, `--text-h3` 15px, `--text-h2` 19px, `--text-h1` 28px, `--text-display` 40px.\n- Two weights: `--weight-body` 400; `--weight-bold`, `--weight-heading`, `--weight-display` and `--weight-ui` 700. `--line-heading` 1.25, `--line-display` 1.15.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n- A warm soft UI. One surface: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-input` and `--color-button-secondary` are the same cream (242 235 227). `--color-surface-alt` and `--color-notice` (248 243 237) are a step lighter, for tiles, hovered rows and notices; `--color-surface-strong` (228 217 205) a step darker, for inline code, quiet badges and disabled controls.\n- The relief pair: `--color-shadow` (211 198 184) is the dark side and `--color-border-muted` (warm white, 255 252 247) the light side of every shadow.\n- Text is warm brown, never black: `--color-text` 84 70 64, `--color-text-muted` 124 106 96, `--color-heading` 62 48 44, `--color-heading-alt` 104 86 78.\n- `--color-accent` and `--color-button` are one coral (226 88 68) with warm white text; `--color-link` is the darker coral 196 68 50, which is also the focus ring. `--color-accent-alt` is teal (46 140 140) and only marks \"new\".\n- The footer and code block are the dark brown of the headings (`--color-bar-alt`, `--color-inverse`, 62 48 44) with cream text.\n- Status: `--color-success` 70 140 90, `--color-warning` 200 124 16, `--color-danger` 184 36 48 on a blush `--color-danger-surface`. `--color-fill-1` to `--color-fill-4` are coral, teal, mustard and plum.\n- `--color-border` (228 217 205) is for rules between rows; `--color-input-border` and `--color-border-strong` (212 198 183) for hairlines when a surface part draws them.\n\n- Cut, not moulded: corners are nearly square. `--border-width` is 0; `--radius-control` 3px, `--radius-panel` 4px, `--radius-page` 6px, and `--radius-pill` is 4px too, so badges are small tags and a pill track becomes a slot. `--border-width-strong` (2px) is the focus and error ring.\n- Tight, crisp relief with a lit edge: every raised shadow ends in `inset 1px 1px 0` of the light colour, a one pixel highlight along the top and left edges. `--shadow-control` is 3px offset and 5px blur on the dark side, 2px and 4px on the light side at 80%; `--shadow-panel` and `--shadow-control-hover` 5px and 10px; `--shadow-dialog` 10px and 20px with its light side at 50%. `--shadow-control-pressed` is a hard 3px and 5px inset on the dark side with a one pixel light edge at the bottom right.\n- Every fill is flat. `--shadow-text` is `none`. Transitions are short and linear, 0.1s.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints the surface colour and sets the base type. `.ds-app` is the frame, `.ds-app__side` the navigation column, `.ds-app__main` the column of the views. `.ds-page__stack` is a vertical stack, `.ds-page__row` two columns three to two, `.ds-page__row--aside` a working column and a 312px column, `.ds-page__row--even` two halves. `.ds-page__title` is a heading on the bare page over a row of the home view, with an optional link at its right. `.ds-view` is one screen of the specimen (see Layout); an application that gives each page its own document does not need it.\n- `.ds-brand`: the site's mark and name at the top of the navigation panel, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 36px) dressed like the primary button (`--fill-button`, `--color-button-text`, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the raised navigation panel. It holds the `.ds-brand`, the `.ds-menu` and the `.ds-nav__list` of `.ds-nav__link` keys, each with a `.ds-nav__icon` and an optional `.ds-nav__count`; the current item is `is-current` and pressed in; `is-hover` raises a link.\n- `.ds-menu`: a drop-down, here the account menu under the brand. A `<details>` whose `.ds-menu__toggle` summary is a sunk well (it holds a `.ds-avatar` and a chevron) and whose `.ds-menu__list` is a raised sheet laid over what follows; `.ds-menu__link` is one entry, `is-hover` lightens it, `.ds-menu__link--danger` is the leaving entry.\n- `.ds-hero`: the page introduction, one deep card with the radius of `--radius-page`: `.ds-hero__art` is a raised disc holding a sunk `.ds-hero__well` and the accent `.ds-hero__label`; `.ds-hero__text` holds `.ds-hero__eyebrow` (a badge and a muted line), `.ds-hero__title` at the display size, `.ds-hero__lead`, a `.ds-progress` with its legend, and `.ds-hero__actions` with the `.ds-keys` and the main button. Use it once, on the home page.\n- `.ds-keys`: a row of round keys, `.ds-keys__key` (48px), in the secondary button's dress; `.ds-keys__key--primary` (64px) is the main one, in the primary button's dress. `is-hover` lifts a key, `is-active` sinks it, `is-on` keeps a toggle key sunk. Wrap each in a `.ds-tooltip`.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.ds-page-header__text` holds `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` sits at the right with at most one primary button. No fill or shadow of its own. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, 40px high, raised by `--shadow-control`; `is-hover` lifts it, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action: a surface-coloured key with `--color-danger` text; use it once, last in a group or as the confirming button of a dialog. `.ds-button--large` (52px) and `.ds-button--block` (full width) exist. `disabled` or `is-disabled` is flat, with no shadow. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron` icon), `.ds-form__range` (sunk track, raised accent thumb). `.ds-form__check` is a label row holding a `.ds-form__checkbox` (raised square, accent when checked). An invalid input takes `is-error`, which replaces its well with a 2px danger ring, and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons; `.ds-form__row` puts two fields side by side. Text controls are wells: they use `--shadow-control-pressed`.\n- `.ds-switch`: the on/off control, a `<label>` holding `.ds-switch__input` (the checkbox, invisible over the whole label), `.ds-switch__track` (a sunk pill with a raised thumb) and `.ds-switch__label`, which may hold a `.ds-switch__hint` line. When on, the thumb moves right and takes the accent; the track stays a well. `.ds-switch--end` puts the track at the right end of a full-width row, for settings lists.\n- `.ds-table`: data table as one raised sheet: small uppercase head, rows divided by a 1px rule, no stripes. `.ds-table__num` right-aligns a numeric column, `.ds-table__meta` is muted text, `.ds-table__wide` gives the name column 38%, `.ds-table__opt` marks a column that is dropped on a phone, `is-hover` on a row lightens it.\n- `.ds-list`: the queue, one raised sheet with rules between rows. `.ds-list__head` is its title row, with a switch or a count at the right. `.ds-list__item` holds a `.ds-list__cover` (a sunk square with the track number), a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a `.ds-list__time`. The playing row is `is-current`: its cover is raised and filled with the accent. `.ds-list__dot` is a status dot; `--off` turns it red, `--new` takes the second accent.\n- `.ds-panel`: the basic raised card. `.ds-panel__title` is the title line (a badge may stand at its right), `.ds-panel__body` the padded content, `.ds-panel__text` a muted paragraph, `.ds-panel__facts` a list of labels and values, `.ds-panel__rows` a stack of `.ds-panel__row` lines (a person and a `.ds-panel__note`, or a switch).\n- `.ds-grid`: four station cards in a row, each a raised `.ds-grid__cell` (a link) with a sunk `.ds-grid__art` in which a `.ds-grid__chip` disc stands, coloured by `--1` to `--4` from `--color-fill-*`; under it `.ds-grid__title` and `.ds-grid__text`. `is-hover` lifts a card.\n- `.ds-stat`: the row of three summary figures on the bare page; each `.ds-stat__item` is a single figure: a round sunk `.ds-stat__icon`, then `.ds-stat__value` (21px, tabular figures) over `.ds-stat__label`.\n- `.ds-tabs`: a sunk track holding `.ds-tabs__tab` segments; the one with `is-current` is raised out of the track. Use it for view switches, left-aligned under the page header, not for site navigation.\n- `.ds-badge`: pill for counts and states, filled with the accent. `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: the raised panel under the navigation: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link` with a `.ds-sidebar__count`, pressed in when `is-current`; `.ds-sidebar__foot` is a ruled foot for a meter.\n- `.ds-progress`: how far something is. The bar is a pressed track 8px high with a `.ds-progress__bar` in the accent; the level is a class on the track, `.ds-progress--25`, `--40`, `--60`, `--75` or `--90`. `.ds-progress__legend` is the line of two labels over it. `.ds-progress--ring` with the same level classes is a raised ring (120px) around a sunk `.ds-progress__face` holding a `.ds-progress__figure` and a `.ds-progress__caption`.\n- `.ds-tooltip`: a hint for an icon key. Wrap the trigger and a `.ds-tooltip__tip` in it; the tip is a small inverted label above the trigger, shown on hover and keyboard focus, or with `is-open`.\n- `.ds-avatar`: a person. `.ds-avatar__pic` is a raised disc (36px) with initials in the secondary button's dress; `.ds-avatar--accent` fills it with the accent, for the signed-in listener. `.ds-avatar__text` holds `.ds-avatar__name` and `.ds-avatar__meta` beside it.\n- `.ds-accordion`: one raised sheet of `<details>` sections, `.ds-accordion__item`, divided by rules: `.ds-accordion__head` is the summary with a round `.ds-accordion__chevron` key that is pressed in and turned while the section is open; `.ds-accordion__body` holds text or a column of switches. Use it for grouped settings and for questions.\n- `.ds-carousel`: a well with one slide showing: `.ds-carousel__track` scrolls sideways with scroll-snap, each `.ds-carousel__slide` holds a raised accent `.ds-carousel__art` tile and a `.ds-carousel__body` (`.ds-carousel__title`, `.ds-carousel__text`, a link); `.ds-carousel__dots` under it marks the current slide with `is-current`.\n- `.ds-notice`: information notice sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` has a pale red well and `--color-danger` text. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: row of raised 40px keys, `.ds-pagination__link`; the current page is `is-current`, flat and filled with the accent.\n- `.ds-breadcrumb`: small muted trail above the page header of an inner page, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, 440px wide, raised by the deepest shadow: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: empty state as a sunk well: a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: a rounded strip in `--fill-bar-alt` under the views, as wide as the main column: `.ds-footer__inner`, `.ds-footer__links`, `.ds-footer__link`.\n\n## Never\n\n- `row-gap <= 16px`: rows of a table or list touch and are divided by a rule; rows of people or switches inside a panel sit 16px apart.\n- `block-gap <= 48px`: raised panels sit 32px apart; 48px above the footer is the largest gap.\n- `content-width <= 1240px`: everything stays in the centred frame.\n- `font-size <= 40px`: the hero title is the largest text.\n- `font-size >= 11px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.65`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: underline is a hover state.\n- `border-width <= 2px`: nothing is outlined; 1px rules between rows and the 2px ring are the only lines.\n- `border-radius <= 6px`: controls 3px, panels and tags 4px, tiles and dialogs 6px; only discs are round.\n- `box-shadow-blur <= 20px`: panels blur 10px, the dialog and the hero disc 20px.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 5%`: every fill is one flat colour.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first whether it is raised or sunk: a container that holds content is raised and starts from `.ds-panel` (fill, radius and `--shadow-panel` together); something the user fills in or that shows a state is sunk and starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`); something the user presses starts from `.ds-button--secondary`, round like `.ds-keys__key` when it carries only an icon. Keep the fill equal to the surface behind it, since the shadows only read on the shared colour, and never draw a shadow in a raw colour: use the shadow tokens as they are. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to, and keep the accent to one small element per group.\n",
    "components.css": "/* Layout tokens (structure part) */\n:root {\n  --size-page: 1240px;\n  --size-side: 248px;\n  --size-aside: 312px;\n  --size-dialog: 440px;\n  --size-control: 40px;\n  --size-control-large: 52px;\n  --size-key: 48px;\n  --size-key-large: 64px;\n  --size-disc: 248px;\n  --size-ring: 120px;\n  --size-cover: 44px;\n  --size-art: 88px;\n  --size-avatar: 36px;\n  --size-icon: 16px;\n  --size-glyph: 22px;\n  --size-dot: 8px;\n  --size-chip: 48px;\n  --size-thumb: 20px;\n  --size-track: 8px;\n  --size-check: 20px;\n  --size-rule: 1px;\n  --size-brand: 36px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 64px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  background-color: var(--color-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-page__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  flex: none;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* brand: the mark on a small raised key in the primary button's dress, then the name */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-bar-text);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-brand);\n  height: var(--size-brand);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n  margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n  max-width: 72ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-6) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  margin-top: 0;\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  padding-left: var(--space-5);\n}\n.ds-prose li + li {\n  margin-top: var(--space-1);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-strong);\n  border-radius: calc(var(--radius-control) / 3);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose__lead {\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n.ds-prose__code {\n  margin: 0 0 var(--space-4);\n  padding: var(--space-4) var(--space-5);\n  overflow: auto;\n  background-color: var(--color-inverse);\n  background: var(--fill-inverse);\n  border-radius: min(var(--radius-control), var(--space-4));\n  color: var(--color-inverse-text);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-5);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-color: var(--color-border);\n  color: var(--color-button-secondary-text);\n  text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-color: var(--color-danger);\n  color: var(--color-danger);\n  text-shadow: none;\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-size: var(--text-large);\n}\n.ds-button--block {\n  width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  cursor: default;\n}\n.ds-button__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n/* form: every control is a well sunk into the surface */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-form__label {\n  display: flex;\n  justify-content: space-between;\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(2 * var(--size-control) + var(--space-4));\n  padding: var(--space-3) var(--space-4);\n  border-radius: min(var(--radius-control), var(--space-4));\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-input-text);\n  opacity: 0.55;\n}\n.ds-form__select {\n  padding-right: var(--space-7);\n  appearance: none;\n  -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n  position: relative;\n  display: block;\n}\n.ds-form__chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--space-4);\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-top: calc(var(--size-icon) / -2);\n  color: var(--color-input-text);\n  pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n  box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  padding: var(--space-1);\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: min(calc(var(--radius-control) / 2), calc(var(--size-check) / 4));\n  box-shadow: var(--shadow-control);\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n  background: var(--fill-accent);\n  background-clip: content-box;\n}\n.ds-form__checkbox:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n/* the era's slider: a sunk track with a raised round thumb */\n.ds-form__range {\n  width: 100%;\n  height: var(--size-thumb);\n  margin: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n  height: var(--size-track);\n  background: var(--fill-input);\n  border-radius: var(--size-track);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-webkit-slider-thumb {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n  -webkit-appearance: none;\n  background: var(--fill-accent);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n}\n.ds-form__range::-moz-range-track {\n  height: var(--size-track);\n  background: var(--fill-input);\n  border-radius: var(--size-track);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-moz-range-thumb {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  margin-top: var(--space-2);\n}\n\n/* table: one raised sheet, rows divided by a rule */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-4) var(--space-5);\n  text-align: left;\n  vertical-align: middle;\n}\n.ds-table th {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n.ds-table th:first-child {\n  border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n  border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n  border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n  border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n  border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.ds-table .ds-table__meta {\n  color: var(--color-text-muted);\n}\n.ds-table .ds-table__wide {\n  width: 38%;\n}\n\n/* panel */\n.ds-panel {\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-5) var(--space-5) 0;\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n  padding-top: var(--space-3);\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n.ds-panel__text:last-child {\n  margin-bottom: 0;\n}\n/* rows of a label and a value inside a panel */\n.ds-panel__facts {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-3) var(--space-5);\n  margin: 0;\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-panel__facts dt {\n  color: var(--color-text-muted);\n}\n.ds-panel__facts dd {\n  margin: 0;\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n/* rows of anything inside a panel: a person and a note, a switch and its hint */\n.ds-panel__rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-panel__note {\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  padding: 0 var(--space-3);\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  white-space: nowrap;\n  vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--size-dot);\n  height: var(--size-dot);\n  flex: none;\n  border-radius: 50%;\n}\n.ds-badge--success::before {\n  background: var(--color-success);\n}\n.ds-badge--warning::before {\n  background: var(--color-warning);\n}\n.ds-badge--danger::before {\n  background: var(--color-danger);\n}\n\n/* notice: a message sunk into the surface */\n.ds-notice {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-notice);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: min(var(--radius-panel), var(--space-5));\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-notice-text);\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n  color: var(--color-danger);\n}\n.ds-notice__icon {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  flex: none;\n  margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  min-height: var(--size-control);\n  padding: 0 var(--space-3);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-accent);\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-7) var(--space-5);\n  background: var(--color-overlay);\n  border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  padding: var(--space-6);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-dialog);\n  color: var(--color-text);\n}\n.ds-dialog__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n  color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--space-6) var(--space-5);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-control-large);\n  height: var(--size-control-large);\n  margin-bottom: var(--space-4);\n  padding: var(--space-3);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 40ch;\n  margin: var(--space-2) 0 var(--space-5);\n  font-size: var(--text-ui);\n}\n\n/* switch: a sunk pill over a checkbox, its raised thumb takes the accent when on */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: calc(2 * var(--size-thumb) + 2 * var(--space-1) + var(--space-1));\n  height: calc(var(--size-thumb) + 2 * var(--space-1));\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--size-thumb);\n  box-shadow: var(--shadow-control-pressed);\n  transition: var(--transition);\n}\n.ds-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: var(--space-1);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  margin-top: calc(var(--size-thumb) / -2);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n  left: auto;\n  right: var(--space-1);\n  background: var(--fill-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track {\n  background: var(--color-disabled);\n  box-shadow: none;\n}\n.ds-switch--end {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n.ds-switch__label {\n  min-width: 0;\n}\n.ds-switch__hint {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* progress: a pressed track with an accent bar, or a ring around a sunk face */\n.ds-progress {\n  display: block;\n  height: var(--size-track);\n  overflow: hidden;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: var(--size-track);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: var(--size-track);\n}\n.ds-progress--25 .ds-progress__bar {\n  width: 25%;\n}\n.ds-progress--60 .ds-progress__bar {\n  width: 60%;\n}\n.ds-progress--ring {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-ring);\n  height: var(--size-ring);\n  overflow: visible;\n  background: conic-gradient(var(--color-accent) 50%, var(--color-surface-strong) 0);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-progress--ring.ds-progress--25 {\n  background: conic-gradient(var(--color-accent) 25%, var(--color-surface-strong) 0);\n}\n.ds-progress--ring.ds-progress--60 {\n  background: conic-gradient(var(--color-accent) 60%, var(--color-surface-strong) 0);\n}\n.ds-progress__face {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 80%;\n  height: 80%;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n}\n.ds-progress__figure {\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  font-variant-numeric: tabular-nums;\n}\n.ds-progress__caption {\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-progress__legend {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n}\n\n/* tooltip: a small inverted label over its trigger, on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 50%;\n  z-index: 6;\n  padding: var(--space-1) var(--space-3);\n  transform: translateX(-50%);\n  background-color: var(--color-inverse);\n  background: var(--fill-inverse);\n  border-radius: min(var(--radius-control), var(--space-3));\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-transform: none;\n  white-space: nowrap;\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* avatar: initials on a raised disc, alone or beside a name */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-avatar__pic {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n}\n.ds-avatar--accent .ds-avatar__pic {\n  background: var(--fill-accent);\n  border-color: transparent;\n  color: var(--color-accent-text);\n}\n.ds-avatar__text {\n  min-width: 0;\n}\n.ds-avatar__name {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  opacity: 0.75;\n}\n\n/* accordion: one raised sheet of sections that open and close */\n.ds-accordion {\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-accordion__item + .ds-accordion__item {\n  border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: calc(var(--size-icon) + var(--space-3));\n  height: calc(var(--size-icon) + var(--space-3));\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: inherit;\n  transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-accordion__chevron svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron svg {\n  transform: rotate(180deg);\n}\n.ds-accordion__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: 0 var(--space-5) var(--space-5);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* app frame: the navigation column at the left, the views at the right */\n.ds-app {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: start;\n  max-width: calc(var(--size-page) + 2 * var(--space-5));\n  margin: 0 auto;\n  padding: var(--space-5);\n}\n.ds-app__side {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-app__main {\n  min-width: 0;\n}\n/* a vertical stack of blocks, one step apart */\n.ds-page__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  min-width: 0;\n}\n/* two columns, the left one wider */\n.ds-page__row {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n/* an inner page: the working column and a narrow column at the right */\n.ds-page__row--aside {\n  grid-template-columns: minmax(0, 1fr) var(--size-aside);\n}\n.ds-page__row--even {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n/* an inner view starts level with the brand in the navigation column */\n.ds-view:not(.ds-view--home) {\n  padding-top: var(--space-2);\n}\n\n/* nav: one raised column panel, a labelled key per section, the current one pressed in */\n.ds-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-5) var(--space-4);\n  background-color: var(--color-bar);\n  background: var(--fill-bar);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-text);\n}\n.ds-nav .ds-brand {\n  padding: 0 var(--space-2);\n}\n.ds-nav__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-control);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-nav__icon {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  flex: none;\n}\n.ds-nav__count {\n  margin-left: auto;\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  font-variant-numeric: tabular-nums;\n  opacity: 0.7;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  box-shadow: var(--shadow-control);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#listen\"],\n.ds-page:has(#listen:target) .ds-nav__link[href=\"#listen\"],\n.ds-page:has(#library:target) .ds-nav__link[href=\"#library\"],\n.ds-page:has(#playlist:target) .ds-nav__link[href=\"#playlist\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n}\n\n/* menu: the account well under the brand opens a raised list */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: calc(var(--size-avatar) / 2 + var(--space-2));\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-2));\n  left: 0;\n  right: 0;\n  z-index: 5;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: min(var(--radius-panel), var(--space-5));\n  box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  border-radius: min(var(--radius-control), var(--space-4));\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  background: var(--color-surface-alt);\n}\n.ds-menu__link--danger {\n  color: var(--color-danger);\n}\n\n/* hero: what is playing, a turning disc beside the title and the transport keys */\n.ds-hero {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-7);\n  align-items: center;\n  padding: var(--space-7);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-hero__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-disc);\n  max-width: 100%;\n  aspect-ratio: 1;\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 50%;\n  box-shadow: var(--shadow-dialog);\n}\n.ds-hero__well {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 82%;\n  height: 82%;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-hero__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44%;\n  height: 44%;\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n}\n.ds-hero__label svg {\n  width: 44%;\n  height: 44%;\n}\n.ds-hero__text {\n  min-width: 0;\n}\n.ds-hero__eyebrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-hero__title {\n  margin: var(--space-3) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-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  text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n  margin: var(--space-2) 0 var(--space-5);\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4) var(--space-5);\n  margin-top: var(--space-5);\n}\n\n/* keys: the round transport keys, the middle one in the primary button's dress */\n.ds-keys {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0 auto 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-keys__key {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-key);\n  height: var(--size-key);\n  padding: 0;\n  background-color: var(--color-button-secondary);\n  background: var(--fill-button-secondary);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-keys__key svg {\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n}\n.ds-keys__key--primary {\n  width: var(--size-key-large);\n  height: var(--size-key-large);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  border-color: transparent;\n  color: var(--color-button-text);\n}\n.ds-keys__key:hover,\n.ds-keys__key.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-keys__key:active,\n.ds-keys__key.is-active,\n.ds-keys__key.is-on {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-keys__key:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n\n/* stats: three figures on the bare page, each beside a round sunk icon */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0 var(--space-4);\n  list-style: none;\n}\n.ds-stat__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-stat__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-key-large);\n  height: var(--size-key-large);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n}\n.ds-stat__icon svg {\n  width: var(--size-glyph);\n  height: var(--size-glyph);\n}\n.ds-stat__value {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n  text-shadow: var(--shadow-text);\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n\n/* list: the queue on one raised sheet, a numbered well, the title and the length */\n.ds-list {\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  list-style: none;\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n}\n.ds-list__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) 0;\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-list__item:first-child {\n  border-top: 0;\n}\n.ds-list__cover {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-cover);\n  height: var(--size-cover);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: min(var(--radius-control), calc(var(--size-cover) / 3));\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__cover svg {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-list__item.is-current .ds-list__cover {\n  background: var(--fill-accent);\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n}\n.ds-list__body {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  display: block;\n  overflow: hidden;\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-list__time {\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__dot {\n  display: inline-block;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  margin-right: var(--space-1);\n  background: var(--color-success);\n  border-radius: 50%;\n}\n.ds-list__dot--off {\n  background: var(--color-danger);\n}\n.ds-list__dot--new {\n  background: var(--color-accent-alt);\n}\n\n/* grid: four stations, each a raised card with a coloured disc standing in a well */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-6);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-4);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  box-shadow: var(--shadow-dialog);\n}\n.ds-grid__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--size-art);\n  margin-bottom: var(--space-4);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border-radius: min(calc(var(--radius-panel) - var(--space-2)), var(--space-5));\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__chip {\n  width: var(--size-chip);\n  height: var(--size-chip);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n}\n.ds-grid__cell--1 .ds-grid__chip {\n  background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__chip {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__chip {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__chip {\n  background: var(--color-fill-4);\n}\n.ds-grid__title {\n  padding: 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  margin: var(--space-1) 0 var(--space-2);\n  padding: 0 var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n\n/* section title: a heading on the bare page over a row of the home view */\n.ds-page__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: 0 0 calc(var(--space-2) - var(--space-6));\n  padding: 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page__title .ds-link {\n  font-family: var(--font-body);\n  font-size: var(--text-ui);\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n/* tabs: a sunk track, the current choice raised out of it */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-1);\n  width: fit-content;\n  max-width: 100%;\n  margin: 0 0 var(--space-6);\n  padding: var(--space-1);\n  overflow-x: auto;\n  scrollbar-width: none;\n  list-style: none;\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: calc(var(--radius-control) + var(--space-1));\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-5);\n  border-radius: var(--radius-control);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-secondary-text);\n}\n\n/* sidebar: the playlists, a raised panel under the navigation */\n.ds-sidebar {\n  padding: var(--space-5) var(--space-4);\n  background-color: var(--color-surface);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n  margin: 0 var(--space-4) var(--space-3);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-transform: uppercase;\n}\n.ds-sidebar__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__link {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-sidebar__count {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  font-variant-numeric: tabular-nums;\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n  box-shadow: var(--shadow-control);\n}\n.ds-sidebar__link.is-current {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-sidebar__foot {\n  margin: var(--space-5) var(--space-4) 0;\n  padding-top: var(--space-4);\n  border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* carousel: a well with one slide showing, dots under it */\n.ds-carousel {\n  padding: var(--space-4) var(--space-4) var(--space-3);\n  background-color: var(--color-input);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-input-text);\n}\n.ds-carousel__track {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  flex: 0 0 100%;\n  min-width: 0;\n  padding: var(--space-2);\n  scroll-snap-align: start;\n}\n.ds-carousel__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-art);\n  height: var(--size-art);\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  border-radius: min(var(--radius-control), var(--space-5));\n  box-shadow: var(--shadow-control);\n  color: var(--color-accent-text);\n}\n.ds-carousel__art svg {\n  width: var(--size-chip);\n  height: var(--size-chip);\n}\n.ds-carousel__body {\n  min-width: 0;\n}\n.ds-carousel__title {\n  display: block;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n  display: block;\n  margin: var(--space-1) 0 var(--space-3);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  opacity: 0.8;\n}\n.ds-carousel__dots {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n.ds-carousel__dot {\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-surface-strong);\n  border-radius: 50%;\n}\n.ds-carousel__dot.is-current {\n  background: var(--fill-accent);\n}\n\n/* footer: a rounded strip under the views */\n.ds-footer {\n  margin-top: var(--space-7);\n  background-color: var(--color-bar-alt);\n  background: var(--fill-bar-alt);\n  border-radius: var(--radius-panel);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  padding: var(--space-4) var(--space-5);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n}\n\n@media (max-width: 900px) {\n  .ds-app,\n  .ds-page__row,\n  .ds-page__row--aside,\n  .ds-page__row--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  /* the navigation stays on top, the playlists sit between it and the views */\n  .ds-app__side {\n    display: contents;\n  }\n  .ds-app__main {\n    order: 3;\n  }\n  .ds-sidebar {\n    order: 2;\n  }\n  .ds-nav {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-4);\n  }\n  .ds-nav__list {\n    flex-direction: row;\n    flex-wrap: wrap;\n    width: 100%;\n  }\n  .ds-nav__count {\n    display: none;\n  }\n  .ds-menu__list {\n    left: auto;\n    min-width: 22ch;\n  }\n  /* one strip of playlists that scrolls sideways and fades out where there is more */\n  .ds-sidebar__list {\n    flex-direction: row;\n    flex-wrap: nowrap;\n    margin: 0 calc(var(--space-2) * -1);\n    padding: var(--space-2) var(--space-7) var(--space-2) var(--space-2);\n    overflow-x: auto;\n    scrollbar-width: none;\n    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-7)), transparent);\n    mask-image: linear-gradient(to right, black calc(100% - var(--space-7)), transparent);\n  }\n  .ds-sidebar__link {\n    white-space: nowrap;\n  }\n  .ds-sidebar__count {\n    margin-left: 0;\n  }\n  .ds-hero {\n    gap: var(--space-6);\n    padding: var(--space-6);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n@media (max-width: 560px) {\n  .ds-app {\n    gap: var(--space-5);\n    padding: var(--space-4);\n  }\n  .ds-page__stack,\n  .ds-page__row {\n    gap: var(--space-5);\n  }\n  .ds-nav {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-nav__list {\n    gap: var(--space-1);\n  }\n  .ds-nav__link {\n    gap: var(--space-2);\n    padding: var(--space-2) var(--space-3);\n  }\n  .ds-nav__icon {\n    display: none;\n  }\n  .ds-hero {\n    grid-template-columns: minmax(0, 1fr);\n    justify-items: center;\n    padding: var(--space-5);\n    border-radius: var(--radius-panel);\n  }\n  .ds-hero__art {\n    width: 64%;\n  }\n  .ds-hero__text {\n    width: 100%;\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-keys {\n    justify-content: space-between;\n    width: 100%;\n    gap: var(--space-2);\n  }\n  .ds-hero__actions .ds-button {\n    flex: 1 1 auto;\n  }\n  .ds-stat {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-4);\n    padding: 0;\n  }\n  .ds-grid {\n    gap: var(--space-4);\n  }\n  .ds-grid__cell {\n    padding: var(--space-3);\n  }\n  .ds-page__title {\n    margin-bottom: calc(var(--space-2) - var(--space-5));\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-tabs {\n    width: 100%;\n  }\n  .ds-tabs__tab {\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-3);\n  }\n  .ds-table .ds-table__opt {\n    display: none;\n  }\n  .ds-pagination {\n    gap: var(--space-2);\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-dialog__box {\n    padding: var(--space-5);\n  }\n  .ds-dialog__actions {\n    flex-wrap: wrap;\n  }\n  .ds-carousel__slide {\n    gap: var(--space-3);\n  }\n}\n@media (max-width: 560px) {\n  /* the bar keeps the brand and the account; the five views are a raised dock at the foot of the window */\n  .ds-app {\n    padding-bottom: calc(var(--size-control) * 2 + var(--space-6));\n  }\n  .ds-nav {\n    flex-wrap: nowrap;\n  }\n  .ds-nav .ds-avatar__text {\n    display: none;\n  }\n  .ds-menu__list {\n    left: auto;\n    right: 0;\n    max-width: calc(100vw - 2 * var(--space-5));\n  }\n  .ds-nav__list {\n    position: fixed;\n    left: var(--space-3);\n    right: var(--space-3);\n    bottom: var(--space-3);\n    z-index: 6;\n    display: grid;\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    gap: var(--space-1);\n    width: auto;\n    padding: var(--space-2);\n    background-color: var(--color-bar);\n    background: var(--fill-bar);\n    border: var(--border-width) var(--border-style) var(--color-border);\n    border-radius: var(--radius-panel);\n    box-shadow: var(--shadow-panel);\n  }\n  .ds-nav__list li {\n    display: flex;\n    min-width: 0;\n  }\n  .ds-nav__link {\n    flex: 1;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--space-1);\n    min-width: 0;\n    padding: var(--space-2) 0;\n    font-size: var(--text-small);\n    text-align: center;\n  }\n  .ds-nav__icon {\n    display: block;\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: listen</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<div class=\"ds-app\">\n\n  <div class=\"ds-app__side\">\n\n    <header class=\"ds-nav\" data-component=\"nav\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"5.5\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M3 12a9 9 0 0 1 9-9\" opacity=\"0.45\"/><path d=\"M21 12a9 9 0 0 1-9 9\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <details class=\"ds-menu\">\n        <summary class=\"ds-menu__toggle\" aria-label=\"Account menu\">\n          <span class=\"ds-avatar ds-avatar--accent\"><span class=\"ds-avatar__pic\">MO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Mira Okafor</span><span class=\"ds-avatar__meta\">Family plan</span></span></span>\n          <svg class=\"ds-page__icon\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg>\n        </summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__link\" href=\"#settings\">Profile</a></li>\n          <li><a class=\"ds-menu__link is-hover\" href=\"#settings\">Switch listener</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#help\">Keyboard shortcuts</a></li>\n          <li><a class=\"ds-menu__link ds-menu__link--danger\" href=\"#settings\">Sign out</a></li>\n        </ul>\n      </details>\n      <ul class=\"ds-nav__list\">\n        <li><a class=\"ds-nav__link\" href=\"#listen\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 14v-2a8 8 0 0 1 16 0v2\"/><rect x=\"3\" y=\"14\" width=\"4\" height=\"6\" rx=\"1.5\"/><rect x=\"17\" y=\"14\" width=\"4\" height=\"6\" rx=\"1.5\"/></svg>Listen</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#library\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4v16M10 4v16M14.5 5l4 14.5\"/></svg>Library <span class=\"ds-nav__count\">128</span></a></li>\n        <li><a class=\"ds-nav__link\" href=\"#playlist\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 6h11M4 11h11M4 16h6\"/><circle cx=\"16\" cy=\"18\" r=\"2\"/><path d=\"M18 18v-8l3 1\"/></svg>Playlist</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#settings\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 7h10M18 7h2M4 17h2M10 17h10\"/><circle cx=\"16\" cy=\"7\" r=\"2\"/><circle cx=\"8\" cy=\"17\" r=\"2\"/></svg>Settings</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#help\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17v.5\"/></svg>Help</a></li>\n      </ul>\n    </header>\n\n    <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n      <h2 class=\"ds-sidebar__heading\">Playlists</h2>\n      <ul class=\"ds-sidebar__list\">\n        <li><a class=\"ds-sidebar__link is-current\" href=\"#playlist\">Night shift <span class=\"ds-sidebar__count\">24</span></a></li>\n        <li><a class=\"ds-sidebar__link\" href=\"#playlist\">Slow mornings <span class=\"ds-sidebar__count\">41</span></a></li>\n        <li><a class=\"ds-sidebar__link is-hover\" href=\"#playlist\">Run, 170 bpm <span class=\"ds-sidebar__count\">18</span></a></li>\n        <li><a class=\"ds-sidebar__link\" href=\"#playlist\">Kitchen radio <span class=\"ds-sidebar__count\">63</span></a></li>\n        <li><a class=\"ds-sidebar__link\" href=\"#playlist\">Strings only <span class=\"ds-sidebar__count\">12</span></a></li>\n      </ul>\n      <div class=\"ds-sidebar__foot\">\n        <div class=\"ds-progress__legend\"><span>Downloads</span> <span>4.8 of 8 GB</span></div>\n        <div class=\"ds-progress ds-progress--60\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Download space used\"><span class=\"ds-progress__bar\"></span></div>\n      </div>\n    </aside>\n\n  </div>\n\n  <div class=\"ds-app__main\">\n\n    <section class=\"ds-view ds-view--home\" id=\"listen\">\n    <div class=\"ds-page__stack\">\n\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <div class=\"ds-hero__art\">\n          <div class=\"ds-hero__well\">\n            <div class=\"ds-hero__label\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 18V6l10-2v12\"/><circle cx=\"6.5\" cy=\"18\" r=\"2.5\"/><circle cx=\"16.5\" cy=\"16\" r=\"2.5\"/></svg></div>\n          </div>\n        </div>\n        <div class=\"ds-hero__text\">\n          <div class=\"ds-hero__eyebrow\"><span class=\"ds-badge\" data-component=\"badge\">Now playing</span> <span>from Night shift, track 7 of 24</span></div>\n          <h1 class=\"ds-hero__title\">Harbour lights at four</h1>\n          <p class=\"ds-hero__lead\">Odile Marsh and the Tin Quartet, on the album Low Tide Sessions.</p>\n          <div class=\"ds-progress__legend\"><span>2:31</span> <span>4:12</span></div>\n          <div class=\"ds-progress ds-progress--60\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Position in the track\"><span class=\"ds-progress__bar\"></span></div>\n          <div class=\"ds-hero__actions\">\n            <ul class=\"ds-keys\">\n              <li><span class=\"ds-tooltip\"><button class=\"ds-keys__key is-on\" type=\"button\" aria-label=\"Shuffle\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 7h3c5 0 7 10 12 10h3M3 17h3c1.6 0 3-1 4.2-2.5M21 7h-3c-1.6 0-3 1-4.2 2.5M18 4l3 3-3 3M18 14l3 3-3 3\"/></svg></button><span class=\"ds-tooltip__tip\" role=\"tooltip\">Shuffle is on</span></span></li>\n              <li><span class=\"ds-tooltip\"><button class=\"ds-keys__key\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 9 12l9 6zM6 6v12\"/></svg></button><span class=\"ds-tooltip__tip\" role=\"tooltip\">Previous</span></span></li>\n              <li><span class=\"ds-tooltip\"><button class=\"ds-keys__key ds-keys__key--primary\" type=\"button\" aria-label=\"Pause\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M8 5v14M16 5v14\"/></svg></button><span class=\"ds-tooltip__tip\" role=\"tooltip\">Pause</span></span></li>\n              <li><span class=\"ds-tooltip\"><button class=\"ds-keys__key is-hover\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 9 6-9 6zM18 6v12\"/></svg></button><span class=\"ds-tooltip__tip\" role=\"tooltip\">Next</span></span></li>\n              <li><span class=\"ds-tooltip\"><button class=\"ds-keys__key\" type=\"button\" aria-label=\"Like\"><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 20s-7-4.4-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\"/></svg></button><span class=\"ds-tooltip__tip\" role=\"tooltip\">Add to liked</span></span></li>\n            </ul>\n            <a class=\"ds-button\" href=\"#playlist\">Open the playlist</a>\n          </div>\n        </div>\n      </section>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\">\n          <span class=\"ds-stat__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/></svg></span>\n          <span><span class=\"ds-stat__value\">14 h 20 min</span><span class=\"ds-stat__label\">listened this week</span></span>\n        </li>\n        <li class=\"ds-stat__item\">\n          <span class=\"ds-stat__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 18V6l10-2v12\"/><circle cx=\"6.5\" cy=\"18\" r=\"2.5\"/><circle cx=\"16.5\" cy=\"16\" r=\"2.5\"/></svg></span>\n          <span><span class=\"ds-stat__value\">212</span><span class=\"ds-stat__label\">tracks played</span></span>\n        </li>\n        <li class=\"ds-stat__item\">\n          <span class=\"ds-stat__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 20c1.5-4 5-5 8-5s6.5 1 8 5\"/></svg></span>\n          <span><span class=\"ds-stat__value\">9</span><span class=\"ds-stat__label\">artists new to you</span></span>\n        </li>\n      </ul>\n\n      <div class=\"ds-page__row\">\n\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__head\">Up next\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Autoplay</span></label>\n          </li>\n          <li class=\"ds-list__item is-current\">\n            <span class=\"ds-list__cover\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M8 5v14M16 5v14\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#playlist\">Harbour lights at four</a>\n              <span class=\"ds-list__meta\"><span class=\"ds-list__dot\"></span> Odile Marsh · playing</span>\n            </div>\n            <span class=\"ds-list__time\">4:12</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">08</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#playlist\">Paper boats</a>\n              <span class=\"ds-list__meta\">Tessel and Reed · Low Tide Sessions</span>\n            </div>\n            <span class=\"ds-list__time\">3:48</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">09</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#playlist\">The last tram home</a>\n              <span class=\"ds-list__meta\"><span class=\"ds-list__dot ds-list__dot--new\"></span> Ivo Brandt · added today</span>\n            </div>\n            <span class=\"ds-list__time\">5:02</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">10</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#playlist\">Salt on the window</a>\n              <span class=\"ds-list__meta\">Odile Marsh · Low Tide Sessions</span>\n            </div>\n            <span class=\"ds-list__time\">3:27</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">11</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#library\">Understudy</a>\n              <span class=\"ds-list__meta\"><span class=\"ds-list__dot ds-list__dot--off\"></span> Northern Choir · not downloaded</span>\n            </div>\n            <span class=\"ds-list__time\">6:40</span>\n          </li>\n        </ul>\n\n        <div class=\"ds-page__stack\">\n\n          <div class=\"ds-carousel\" aria-roledescription=\"carousel\" aria-label=\"Made for you\">\n            <div class=\"ds-carousel__track\">\n              <div class=\"ds-carousel__slide\">\n                <span class=\"ds-carousel__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M4 14v-4M8 17V7M12 20V4M16 16V8M20 13v-2\"/></svg></span>\n                <div class=\"ds-carousel__body\">\n                  <span class=\"ds-carousel__title\">Your Friday mix</span>\n                  <span class=\"ds-carousel__text\">Thirty tracks from what you played late this week.</span>\n                  <a class=\"ds-link\" href=\"#playlist\">Play the mix</a>\n                </div>\n              </div>\n              <div class=\"ds-carousel__slide\">\n                <span class=\"ds-carousel__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/></svg></span>\n                <div class=\"ds-carousel__body\">\n                  <span class=\"ds-carousel__title\">New from artists you follow</span>\n                  <span class=\"ds-carousel__text\">Four albums and a live set since Monday.</span>\n                  <a class=\"ds-link\" href=\"#library\">See the releases</a>\n                </div>\n              </div>\n              <div class=\"ds-carousel__slide\">\n                <span class=\"ds-carousel__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\"/></svg></span>\n                <div class=\"ds-carousel__body\">\n                  <span class=\"ds-carousel__title\">A year ago today</span>\n                  <span class=\"ds-carousel__text\">What you kept on repeat last autumn.</span>\n                  <a class=\"ds-link\" href=\"#playlist\">Listen back</a>\n                </div>\n              </div>\n            </div>\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          </div>\n\n          <section class=\"ds-panel\" data-component=\"panel\">\n            <h2 class=\"ds-panel__title\">Listening with you <span class=\"ds-badge ds-badge--quiet\">3</span></h2>\n            <div class=\"ds-panel__body\">\n              <ul class=\"ds-panel__rows\">\n                <li class=\"ds-panel__row\"><span class=\"ds-avatar\"><span class=\"ds-avatar__pic\">TK</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tomas Keller</span><span class=\"ds-avatar__meta\">Paper boats</span></span></span> <span class=\"ds-panel__note\">now</span></li>\n                <li class=\"ds-panel__row\"><span class=\"ds-avatar\"><span class=\"ds-avatar__pic\">JA</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Jun Aoki</span><span class=\"ds-avatar__meta\">Strings only</span></span></span> <span class=\"ds-panel__note\">12 min ago</span></li>\n                <li class=\"ds-panel__row\"><span class=\"ds-avatar\"><span class=\"ds-avatar__pic\">RS</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Silva</span><span class=\"ds-avatar__meta\">Kitchen radio</span></span></span> <span class=\"ds-panel__note\">1 h ago</span></li>\n              </ul>\n            </div>\n          </section>\n\n        </div>\n\n      </div>\n\n      <h2 class=\"ds-page__title\">Stations for tonight <a class=\"ds-link\" href=\"#library\">All stations</a></h2>\n\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <a class=\"ds-grid__cell ds-grid__cell--1\" href=\"#playlist\">\n          <span class=\"ds-grid__art\"><span class=\"ds-grid__chip\"></span></span>\n          <span class=\"ds-grid__title\">After hours</span>\n          <span class=\"ds-grid__text\">Slow soul and late jazz</span>\n        </a>\n        <a class=\"ds-grid__cell ds-grid__cell--2\" href=\"#playlist\">\n          <span class=\"ds-grid__art\"><span class=\"ds-grid__chip\"></span></span>\n          <span class=\"ds-grid__title\">Deep focus</span>\n          <span class=\"ds-grid__text\">Piano, no words</span>\n        </a>\n        <a class=\"ds-grid__cell ds-grid__cell--3\" href=\"#playlist\">\n          <span class=\"ds-grid__art\"><span class=\"ds-grid__chip\"></span></span>\n          <span class=\"ds-grid__title\">Sunday kitchen</span>\n          <span class=\"ds-grid__text\">Warm folk and bossa</span>\n        </a>\n        <a class=\"ds-grid__cell ds-grid__cell--4\" href=\"#playlist\">\n          <span class=\"ds-grid__art\"><span class=\"ds-grid__chip\"></span></span>\n          <span class=\"ds-grid__title\">Night drive</span>\n          <span class=\"ds-grid__text\">Synths at 100 bpm</span>\n        </a>\n      </div>\n\n    </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"library\">\n\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#listen\">Listen</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#library\">Library</a></li>\n        <li class=\"ds-breadcrumb__item\">Albums</li>\n      </ol>\n\n      <header class=\"ds-page-header\" data-component=\"page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Library</h1>\n          <p class=\"ds-page-header__lead\">128 albums, 41 of them kept on this device.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#settings\">Import files</a>\n        </div>\n      </header>\n\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#library\" aria-current=\"true\">Albums</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#library\">Artists</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#library\">Downloads</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#library\">Podcasts</a></li>\n      </ul>\n\n      <div class=\"ds-page__row ds-page__row--aside\">\n\n        <div class=\"ds-page__stack\">\n\n          <div class=\"ds-notice__stack\" data-component=\"notice\">\n            <div class=\"ds-notice\" role=\"status\">\n              <svg class=\"ds-notice__icon\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"8\"/><path d=\"M10 9v5M10 6v.5\"/></svg>\n              <div><span class=\"ds-notice__title\">Two albums are syncing.</span> They play from the network until the download ends.</div>\n            </div>\n            <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n              <svg class=\"ds-notice__icon\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M10 2.5 18 17H2z\"/><path d=\"M10 8v4M10 14v.5\"/></svg>\n              <div><span class=\"ds-notice__title\">One download failed.</span> Understudy needs 310 MB and the device has 120 MB left.</div>\n            </div>\n          </div>\n\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"ds-table__wide\">Album</th>\n                <th scope=\"col\" class=\"ds-table__opt\">Artist</th>\n                <th scope=\"col\" class=\"ds-table__num ds-table__opt\">Tracks</th>\n                <th scope=\"col\" class=\"ds-table__num\">Length</th>\n                <th scope=\"col\">On device</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td><a class=\"ds-link ds-link--quiet\" href=\"#playlist\">Low Tide Sessions</a></td>\n                <td class=\"ds-table__meta ds-table__opt\">Odile Marsh</td>\n                <td class=\"ds-table__num ds-table__opt\">11</td>\n                <td class=\"ds-table__num\">46:20</td>\n                <td><span class=\"ds-badge ds-badge--success\">Saved</span></td>\n              </tr>\n              <tr class=\"is-hover\">\n                <td><a class=\"ds-link ds-link--quiet\" href=\"#playlist\">Tram Songs</a></td>\n                <td class=\"ds-table__meta ds-table__opt\">Ivo Brandt</td>\n                <td class=\"ds-table__num ds-table__opt\">9</td>\n                <td class=\"ds-table__num\">38:05</td>\n                <td><span class=\"ds-badge ds-badge--warning\">Syncing</span></td>\n              </tr>\n              <tr>\n                <td><a class=\"ds-link ds-link--quiet\" href=\"#playlist\">Understudy</a></td>\n                <td class=\"ds-table__meta ds-table__opt\">Northern Choir</td>\n                <td class=\"ds-table__num ds-table__opt\">14</td>\n                <td class=\"ds-table__num\">61:48</td>\n                <td><span class=\"ds-badge ds-badge--danger\">Failed</span></td>\n              </tr>\n              <tr>\n                <td><a class=\"ds-link ds-link--quiet\" href=\"#playlist\">Glasshouse</a></td>\n                <td class=\"ds-table__meta ds-table__opt\">Tessel and Reed</td>\n                <td class=\"ds-table__num ds-table__opt\">10</td>\n                <td class=\"ds-table__num\">42:31</td>\n                <td><span class=\"ds-badge ds-badge--success\">Saved</span></td>\n              </tr>\n              <tr>\n                <td><a class=\"ds-link ds-link--quiet\" href=\"#playlist\">Small Hours, Vol. 2</a></td>\n                <td class=\"ds-table__meta ds-table__opt\">Various artists</td>\n                <td class=\"ds-table__num ds-table__opt\">22</td>\n                <td class=\"ds-table__num\">88:12</td>\n                <td><span class=\"ds-badge ds-badge--quiet\">Online</span></td>\n              </tr>\n              <tr>\n                <td><a class=\"ds-link ds-link--quiet\" href=\"#playlist\">Field Notes</a></td>\n                <td class=\"ds-table__meta ds-table__opt\">Jun Aoki Trio</td>\n                <td class=\"ds-table__num ds-table__opt\">8</td>\n                <td class=\"ds-table__num\">35:44</td>\n                <td><span class=\"ds-badge ds-badge--warning\">Syncing</span></td>\n              </tr>\n            </tbody>\n          </table>\n\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link\" href=\"#library\" aria-label=\"Previous page\">Prev</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#library\">1</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#library\" aria-current=\"page\">2</a></li>\n            <li><a class=\"ds-pagination__link is-hover\" href=\"#library\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#library\">4</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#library\" aria-label=\"Next page\">Next</a></li>\n          </ul>\n\n        </div>\n\n        <div class=\"ds-page__stack\">\n\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">On this device</h2>\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-panel__row\">\n                <div class=\"ds-progress ds-progress--ring ds-progress--60\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Download space used\"><span class=\"ds-progress__face\"><span class=\"ds-progress__figure\">60%</span><span class=\"ds-progress__caption\">used</span></span></div>\n                <dl class=\"ds-panel__facts\">\n                  <dt>Albums</dt><dd>41</dd>\n                  <dt>Space</dt><dd>4.8 GB</dd>\n                  <dt>Free</dt><dd>3.2 GB</dd>\n                </dl>\n              </div>\n            </div>\n          </section>\n\n          <section class=\"ds-empty\" data-component=\"empty\">\n            <svg class=\"ds-empty__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4v11M7.5 11l4.5 4.5 4.5-4.5M5 20h14\"/></svg>\n            <h2 class=\"ds-empty__title\">No podcasts yet</h2>\n            <p class=\"ds-empty__text\">Shows you follow appear here, newest episode first.</p>\n            <a class=\"ds-button\" href=\"#listen\">Find a show</a>\n          </section>\n\n        </div>\n\n      </div>\n\n    </section>\n\n    <section class=\"ds-view\" id=\"playlist\">\n\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#listen\">Listen</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#library\">Playlists</a></li>\n        <li class=\"ds-breadcrumb__item\">Night shift</li>\n      </ol>\n\n      <header class=\"ds-page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Night shift</h1>\n          <p class=\"ds-page-header__lead\">24 tracks, 1 h 38 min. Made by you, edited yesterday.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#settings\">Share</a>\n          <a class=\"ds-button\" href=\"#listen\">Play</a>\n        </div>\n      </header>\n\n      <div class=\"ds-page__row\">\n\n        <ul class=\"ds-list\">\n          <li class=\"ds-list__head\">Tracks <span class=\"ds-badge ds-badge--quiet\">24</span></li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">05</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#listen\">Blue hour</a>\n              <span class=\"ds-list__meta\">Jun Aoki Trio · Field Notes</span>\n            </div>\n            <span class=\"ds-list__time\">4:55</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">06</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#listen\">Ferry, last crossing</a>\n              <span class=\"ds-list__meta\">Tessel and Reed · Glasshouse</span>\n            </div>\n            <span class=\"ds-list__time\">3:33</span>\n          </li>\n          <li class=\"ds-list__item is-current\">\n            <span class=\"ds-list__cover\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M8 5v14M16 5v14\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#listen\">Harbour lights at four</a>\n              <span class=\"ds-list__meta\"><span class=\"ds-list__dot\"></span> Odile Marsh · playing</span>\n            </div>\n            <span class=\"ds-list__time\">4:12</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">08</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#listen\">Paper boats</a>\n              <span class=\"ds-list__meta\">Tessel and Reed · Low Tide Sessions</span>\n            </div>\n            <span class=\"ds-list__time\">3:48</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">09</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#listen\">The last tram home</a>\n              <span class=\"ds-list__meta\"><span class=\"ds-list__dot ds-list__dot--new\"></span> Ivo Brandt · added today</span>\n            </div>\n            <span class=\"ds-list__time\">5:02</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__cover\">10</span>\n            <div class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#listen\">Salt on the window</a>\n              <span class=\"ds-list__meta\">Odile Marsh · Low Tide Sessions</span>\n            </div>\n            <span class=\"ds-list__time\">3:27</span>\n          </li>\n        </ul>\n\n        <div class=\"ds-page__stack\">\n\n          <section class=\"ds-dialog\" data-component=\"dialog\">\n            <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"d-title\">\n              <h2 class=\"ds-dialog__title\" id=\"d-title\">Delete Night shift?</h2>\n              <div class=\"ds-dialog__body\">The playlist goes for everyone it is shared with. The tracks stay in your library.</div>\n              <div class=\"ds-dialog__actions\">\n                <button class=\"ds-button ds-button--secondary\" type=\"button\">Keep it</button>\n                <button class=\"ds-button ds-button--danger\" type=\"button\">Delete</button>\n              </div>\n            </div>\n          </section>\n\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">Shared with</h2>\n            <div class=\"ds-panel__body\">\n              <ul class=\"ds-panel__rows\">\n                <li class=\"ds-panel__row\"><span class=\"ds-avatar ds-avatar--accent\"><span class=\"ds-avatar__pic\">MO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Mira Okafor</span><span class=\"ds-avatar__meta\">Owner</span></span></span> <span class=\"ds-panel__note\">14 tracks</span></li>\n                <li class=\"ds-panel__row\"><span class=\"ds-avatar\"><span class=\"ds-avatar__pic\">TK</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tomas Keller</span><span class=\"ds-avatar__meta\">Can add</span></span></span> <span class=\"ds-panel__note\">10 tracks</span></li>\n                <li><label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Let friends add tracks</span></label></li>\n                <li><label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Show on your profile</span></label></li>\n              </ul>\n            </div>\n          </section>\n\n        </div>\n\n      </div>\n\n    </section>\n\n    <section class=\"ds-view\" id=\"settings\">\n\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#listen\">Listen</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#settings\">Settings</a></li>\n        <li class=\"ds-breadcrumb__item\">Profile and playback</li>\n      </ol>\n\n      <header class=\"ds-page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Settings</h1>\n          <p class=\"ds-page-header__lead\">Who you are here, and how chronoskin plays.</p>\n        </div>\n      </header>\n\n      <div class=\"ds-page__row ds-page__row--even\">\n\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Profile</h2>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#settings\">\n              <div class=\"ds-form__row\">\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"f-name\">Display name</label>\n                  <input class=\"ds-form__input\" id=\"f-name\" type=\"text\" value=\"Mira Okafor\">\n                </div>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"f-mail\">Email</label>\n                  <input class=\"ds-form__input is-error\" id=\"f-mail\" type=\"email\" value=\"mira@example\" aria-invalid=\"true\" aria-describedby=\"f-mail-error\">\n                  <span class=\"ds-form__error\" id=\"f-mail-error\">Enter a full address, such as mira@example.org.</span>\n                </div>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-quality\">Streaming quality</label>\n                <span class=\"ds-form__select-wrap\">\n                  <select class=\"ds-form__select\" id=\"f-quality\">\n                    <option>High, 320 kbit/s</option>\n                    <option>Normal, 160 kbit/s</option>\n                    <option>Data saver, 96 kbit/s</option>\n                  </select>\n                  <svg class=\"ds-form__chevron\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg>\n                </span>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-fade\">Crossfade <span>4 seconds</span></label>\n                <input class=\"ds-form__range\" id=\"f-fade\" type=\"range\" min=\"0\" max=\"12\" value=\"4\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-about\">About you</label>\n                <textarea class=\"ds-form__textarea\" id=\"f-about\" placeholder=\"A line for your profile\"></textarea>\n                <span class=\"ds-form__hint\">Shown to people you share playlists with.</span>\n              </div>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me the weekly listening summary</label>\n              <div class=\"ds-form__actions\">\n                <button class=\"ds-button\" type=\"submit\">Save profile</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#listen\">Cancel</a>\n              </div>\n            </form>\n          </div>\n        </section>\n\n        <div class=\"ds-page__stack\">\n\n          <div class=\"ds-accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">Playback <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\">\n                <label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Autoplay similar tracks <span class=\"ds-switch__hint\">When a playlist or album ends</span></span></label>\n                <label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Level the volume <span class=\"ds-switch__hint\">Same loudness for every track</span></span></label>\n                <label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Gapless albums <span class=\"ds-switch__hint\">No pause between tracks of one album</span></span></label>\n              </div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Downloads <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\">\n                <label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Download over mobile data</span></label>\n              </div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Privacy <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\">\n                <label class=\"ds-switch ds-switch--end\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Show what I am playing to friends</span></label>\n              </div>\n            </details>\n          </div>\n\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">Account <span class=\"ds-badge ds-badge--success\">Family plan</span></h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Four of six places are taken. The plan renews on the 3rd.</p>\n              <div class=\"ds-button__row\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"button\">Invite a listener</button>\n                <button class=\"ds-button ds-button--secondary\" type=\"button\">Sign out</button>\n                <button class=\"ds-button ds-button--danger\" type=\"button\">Close account</button>\n                <button class=\"ds-button\" type=\"button\" disabled>Restore purchases</button>\n              </div>\n            </div>\n          </section>\n\n        </div>\n\n      </div>\n\n    </section>\n\n    <section class=\"ds-view\" id=\"help\">\n\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#listen\">Listen</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#help\">Help</a></li>\n        <li class=\"ds-breadcrumb__item\">Getting around</li>\n      </ol>\n\n      <header class=\"ds-page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Help</h1>\n          <p class=\"ds-page-header__lead\">The keys, the queue and what happens offline.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#settings\">Open settings</a>\n        </div>\n      </header>\n\n      <div class=\"ds-page__row\">\n\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>Getting around the player</h1>\n              <p class=\"ds-prose__lead\">Everything that plays goes through one queue. The disc on the first page always shows its head.</p>\n              <h2>The queue</h2>\n              <p>Starting an album or a playlist replaces the queue; adding a single track puts it <strong>after the one that plays</strong>. With autoplay on, similar tracks follow when the queue runs out.</p>\n              <ul>\n                <li>Press <code>Space</code> to pause and to go on.</li>\n                <li>Press <code>Shift</code> and an arrow to skip a track.</li>\n                <li>Press <code>L</code> to add the playing track to your liked list.</li>\n              </ul>\n              <h3>Offline</h3>\n              <p>Saved albums play without a network. A track that is not on the device is skipped and marked in the list, and the download starts again on the next connection.</p>\n              <h2>More to read</h2>\n              <p class=\"ds-link__sample\" data-component=\"links\">\n                <a class=\"ds-link\" href=\"#settings\">Playback settings</a>\n                <a class=\"ds-link is-visited\" href=\"#library\">Managing downloads</a>\n                <a class=\"ds-link is-hover\" href=\"#playlist\">Sharing a playlist</a>\n                <a class=\"ds-link is-active\" href=\"#help\">All shortcuts</a>\n              </p>\n            </div>\n          </div>\n        </section>\n\n        <div class=\"ds-page__stack\">\n\n          <div class=\"ds-accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">Why did a track skip? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\"><p>It was not on the device and there was no network. It is marked with a red dot in the queue.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Can two people listen at once? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\"><p>On the family plan, yes: each listener has a queue of their own.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Where do imported files go? <span class=\"ds-accordion__chevron\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m4 6 4 4 4-4\"/></svg></span></summary>\n              <div class=\"ds-accordion__body\"><p>Into the library, under Albums, with the tags the files carry.</p></div>\n            </details>\n          </div>\n\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">Still stuck?</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Write to the people who make chronoskin. Answers come within a working day.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#settings\">Write to support</a>\n            </div>\n          </section>\n\n        </div>\n\n      </div>\n\n    </section>\n\n    <footer class=\"ds-footer\" data-component=\"footer\">\n      <div class=\"ds-footer__inner\">\n        <span>chronoskin, a player for one queue at a time.</span>\n        <ul class=\"ds-footer__links\">\n          <li><a class=\"ds-footer__link\" href=\"#help\">Help</a></li>\n          <li><a class=\"ds-footer__link is-hover\" href=\"#settings\">Privacy</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#help\">Terms</a></li>\n        </ul>\n      </div>\n    </footer>\n\n  </div>\n\n</div>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.neumorphism.app.s07.p10.t11.u11\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"neumorphism\",\n    \"years\": [\n      2019,\n      2021\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-nm-7abb\",\n  \"short\": \"v1-nm-7abb\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: rgb(242 235 227);\n  --color-canvas: rgb(242 235 227);\n  --color-surface: rgb(242 235 227);\n  --color-surface-alt: rgb(248 243 237);\n  --color-surface-strong: rgb(228 217 205);\n  --color-bar: rgb(242 235 227);\n  --color-bar-text: rgb(62 48 44);\n  --color-bar-alt: rgb(62 48 44);\n  --color-bar-alt-text: rgb(242 235 227);\n  --color-inverse: rgb(62 48 44);\n  --color-inverse-text: rgb(248 243 237);\n  --color-text: rgb(84 70 64);\n  --color-text-muted: rgb(124 106 96);\n  --color-heading: rgb(62 48 44);\n  --color-heading-alt: rgb(104 86 78);\n  --color-link: rgb(196 68 50);\n  --color-link-quiet: rgb(62 48 44);\n  --color-link-visited: rgb(130 80 110);\n  --color-link-hover: rgb(62 48 44);\n  --color-link-active: rgb(226 88 68);\n  --color-border: rgb(228 217 205);\n  --color-border-strong: rgb(212 198 183);\n  --color-border-muted: rgb(255 252 247);\n  --color-accent: rgb(226 88 68);\n  --color-accent-text: rgb(255 252 247);\n  --color-accent-alt: rgb(46 140 140);\n  --color-fill-1: rgb(226 88 68);\n  --color-fill-2: rgb(46 140 140);\n  --color-fill-3: rgb(222 165 60);\n  --color-fill-4: rgb(130 80 110);\n  --color-button: rgb(226 88 68);\n  --color-button-text: rgb(255 252 247);\n  --color-button-hover-text: rgb(255 255 255);\n  --color-button-secondary: rgb(242 235 227);\n  --color-button-secondary-text: rgb(62 48 44);\n  --color-input: rgb(242 235 227);\n  --color-input-text: rgb(84 70 64);\n  --color-input-border: rgb(212 198 183);\n  --color-disabled: rgb(228 217 205);\n  --color-disabled-text: rgb(124 106 96 / 0.7);\n  --color-danger: rgb(184 36 48);\n  --color-danger-surface: rgb(250 228 224);\n  --color-success: rgb(70 140 90);\n  --color-warning: rgb(200 124 16);\n  --color-notice: rgb(248 243 237);\n  --color-notice-text: rgb(62 48 44);\n  --color-focus: rgb(196 68 50);\n  --color-shadow: rgb(211 198 184);\n  --color-overlay: rgb(62 48 44 / 0.35);\n}\n\n/* @part type */\n:root {\n  --font-body: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n  --font-heading: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n  --font-ui: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 13px;\n  --text-large: 15px;\n  --text-display: 40px;\n  --text-h1: 28px;\n  --text-h2: 19px;\n  --text-h3: 15px;\n  --line-body: 1.6;\n  --line-heading: 1.25;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 0;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 3px;\n  --radius-panel: 4px;\n  --radius-pill: 4px;\n  --radius-page: 6px;\n  --shadow-panel: 5px 5px 10px var(--color-shadow), -5px -5px 10px color-mix(in srgb, var(--color-border-muted) 80%, transparent), inset 1px 1px 0 var(--color-border-muted);\n  --shadow-control: 3px 3px 5px var(--color-shadow), -2px -2px 4px color-mix(in srgb, var(--color-border-muted) 80%, transparent), inset 1px 1px 0 var(--color-border-muted);\n  --shadow-control-hover: 5px 5px 10px var(--color-shadow), -5px -5px 10px color-mix(in srgb, var(--color-border-muted) 80%, transparent), inset 1px 1px 0 var(--color-border-muted);\n  --shadow-control-pressed: inset 3px 3px 5px var(--color-shadow), inset -1px -1px 0 var(--color-border-muted);\n  --shadow-dialog: 10px 10px 20px var(--color-shadow), -10px -10px 20px color-mix(in srgb, var(--color-border-muted) 50%, transparent), inset 1px 1px 0 var(--color-border-muted);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 88%, var(--color-border-muted));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: box-shadow 0.1s linear, background-color 0.1s linear, color 0.1s linear;\n  --backdrop-blur: 0px;\n}\n"
  }
}