{
  "id": "v1-me-3333",
  "long_id": "v1.memphis.app.s03.p03.t03.u03",
  "name": "Memphis podcast app (2016 to 2022)",
  "era": {
    "slug": "memphis",
    "code": "me",
    "name": "Memphis",
    "years": [
      2016,
      2022
    ],
    "description": "The Memphis revival of 2016 to 2022: flat bright colours that clash on purpose, squiggles, dots, triangles and zigzags scattered as decoration, patterns laid as whole fields, flat blocks that overlap and tilt, and bold geometric type."
  },
  "archetype": "app",
  "mode": "pure",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A podcast player in the Memphis revival look of 2016 to 2022, in its dark form: a deep navy ground with a thin grid, and neon pink, mint, yellow and violet used as flat blocks and loud patterns of rings, teeth and confetti. Nothing is outlined, nothing glows and nothing casts a shadow: colour blocks touch and overlap, and near-white is used as one more flat colour. Playful products, music and podcast apps and event microsites of the period were dressed this way; the whole app sits on one flat sheet on the patterned page, with an app bar in one loud colour on top, three working columns and a player bar that stays at the foot.",
  "url": "https://chrono.skin/s/v1-me-3333",
  "preview_url": "https://chrono.skin/s/v1-me-3333/specimen.html",
  "files": {
    "STYLE.md": "# Memphis podcast app (2016 to 2022)\n\n## Summary\n\nA podcast player in the Memphis revival look of 2016 to 2022, in its dark form: a deep navy ground with a thin grid, and neon pink, mint, yellow and violet used as flat blocks and loud patterns of rings, teeth and confetti. Nothing is outlined, nothing glows and nothing casts a shadow: colour blocks touch and overlap, and near-white is used as one more flat colour. Playful products, music and podcast apps and event microsites of the period were dressed this way; the whole app sits on one flat sheet on the patterned page, with an app bar in one loud colour on top, three working columns and a player bar that stays at the foot.\n\n## Layout\n\n- One flat sheet (`.ds-sheet`) holds the whole app: at most `--size-page` (1320px) wide, centred on the patterned page with `--space-7` above and `--space-gutter` (24px) at the sides. It is `--color-canvas` with square corners, no frame and no shadow. Two large shapes lie on the page and disappear behind its edges. Designed at a 1440px viewport.\n- Inside the sheet, top to bottom: the app bar (`.ds-nav`, `--size-nav` 60px, flat `--fill-bar`), the main area (`.ds-main`), the player bar (`.ds-player`, flat `--fill-bar`, sticky at the foot of the window) and a slim footer of pattern.\n- The home view is a `.ds-dash` of three columns: the library (`--size-sidebar` 216px: the library sidebar, which ends in a band of pattern, and a second block of voices), the main column and the queue (`--size-aside` 304px: the numbered list, a panel, a carousel). Columns are `--space-6` apart and blocks in a column `--space-5` apart.\n- The main column is the poster of this layout. The hero is a block of `--color-fill-4` whose right 36% is a field of pattern, with shapes lying across the seam. Three stat blocks of unequal width (5:4:3) and height, touching, are set in from the left by `--space-7` and pulled up so that they climb over the foot of the hero. The episode grid has tiles of unequal size: a wide one with a large cover, two small ones with disc covers, a wide one on a tinted fill with its cover at the right.\n- Inner pages keep the app bar, the player and the footer and drop the hero. They start with a `.ds-page-header` closed by a row of accent dots: the breadcrumb, then a row with an optional tilted cover, the `--text-h1` title and one line of lead on the left and the actions on the right. Below it a `.ds-dash--two` (main column and the 304px aside) or `.ds-dash--even` (two halves): the main column starts with a `.ds-row` holding the `.ds-tabs` and a count, then the table and its pagination; the aside holds a notice, a panel and a `.ds-sidebar`.\n- Spacing scale: `--space-1` 4px, `--space-2` 6px (gaps between chips, label to control), `--space-3` 10px (row padding, gaps in the app bar), `--space-4` 14px (panel padding, gap between buttons), `--space-5` 18px (gap between stacked blocks and tiles), `--space-6` 24px (gap between columns, hero side padding, main padding), `--space-7` 32px (page padding above the sheet, overlay padding, hero top padding, inset of the stat row), `--space-8` 44px (with `--space-5`, the climb of the stat row), `--space-9` 64px (reserved). `--space-nudge` 2px.\n- Fixed sizes: `--size-control` 40px, `--size-control-large` 48px, `--size-control-small` 30px, `--size-logo` 32px, `--size-avatar` 36px, `--size-art` 104px (cover of an episode tile and of a page header), `--size-shape` 64px, `--size-dot` 14px, `--size-stroke` 3px (weight of drawn lines), `--size-track` 12px, `--size-dialog` 440px.\n- Below 1100px the library column moves above the other two and the search field is hidden. Below 800px the sheet fills the screen, every column stacks, the links of the app bar wrap under the brand, the hero pattern becomes a strip above the words, the stats stack below the hero, every tile takes a small cover on the left, the player bar stops being sticky and wraps, buttons may wrap and `.ds-table__extra` columns are hidden, so nothing scrolls sideways. The account name beside the avatar (`.ds-avatar__text`) is hidden there, and a `.ds-menu__list` is at most 80vw wide.\n- Views: four. `home` is Listen now. `show` is one show: tabs, the episode table with a tooltip, pagination and the status key, a notice, the hosts and facts. `episode` is one episode: the four buttons in the page header, an error notice, the show notes and further links, chapters as progress bars. `settings` has the account form, playback switches, an accordion and an empty state, with the confirmation dialog on an overlay block. The app bar marks the current view through `:has()` rules, one per view.\n\n## Typography and colour roles\n\n- Type: headings in a heavy grotesque set in capitals (`--font-heading`: Archivo Black, then Arial Black), text in Space Grotesk or Inter, controls and labels in a monospace (`--font-ui`: Space Mono, IBM Plex Mono) in capitals. `--text-base` 15px at 1.5, `--text-small` 12px, `--text-ui` 13px, `--text-large` 19px. `--text-display` 92px, used at 62% for the hero title of this layout because the hero is one block in the middle column; `--text-h1` 52px (inner page titles, stat figures), `--text-h2` 34px, `--text-h3` 19px (column labels, sidebar titles, the title of the wide tile). Links are not underlined until hovered.\n- Palette: a deep navy page `--color-page` #12163f, a slightly lighter `--color-canvas` #161b4b for the sheet, navy surfaces rising from #1c2259 through `--color-surface-alt` #272e70 to `--color-surface-strong` #343c88. The four fills are neon pink #ff5fd2, mint #3df5d0, yellow #f5ff4a and violet #9c8aff; `--color-accent` is the pink, `--color-accent-alt` the mint, the primary button the yellow, the fifth ornament colour `--color-shadow` orange #ff8f3d. `--color-accent-text` is the page navy, so every loud fill carries dark text. `--color-bar` is the mint with navy text (app bar, player, table heads); `--color-bar-alt` is the yellow. Near-white #f4f1ff is the light flat colour: the secondary button, the menu, the footer chips. Text is near-white; `--color-heading-alt` and links are mint, link hover pink.\n- Surface: no outlines, no shadows and no glow. `--border-width` and `--border-width-strong` are a 1px dotted hairline, used only round form controls and between rows; all five shadow tokens are `none`. `--radius-control` rounds the right end only (buttons, inputs and avatar tiles are bullet shapes), `--radius-panel` and `--radius-pill` are 0 (square blocks and tags), and `--radius-page` rounds one corner only, the bottom right, to a 48px quarter circle (the hero, the wide tile). `--fill-page` draws a quiet 48px grid of thin lines; `--fill-bar-alt` is loud pink teeth on yellow; `--fill-inverse` is a violet grid on near-white. `--fill-button-hover` is the mint. No text shadow, no blur.\n- Which text sits on which fill (the era's convention; every Memphis layout and token set keeps to it):\n  - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` carry `--color-text`, headings in `--color-heading` or `--color-heading-alt`, links in the `--color-link-*` tokens and secondary text in `--color-text-muted`.\n  - `--color-fill-1` to `--color-fill-4`, `--color-accent` (`--fill-accent`), `--color-accent-alt`, `--color-success` and `--color-warning` are the loud fills. They carry `--color-accent-text` and nothing else: headings and links on them inherit it (use `.ds-link--plain`), and there is no muted text on a loud fill.\n  - `--color-danger` is readable as text on any surface. Used as a fill (destructive button, danger badge) it carries `--color-surface`. `--color-danger-surface` carries `--color-text`.\n  - `--color-bar` carries `--color-bar-text`, `--color-bar-alt` carries `--color-bar-alt-text`, `--color-inverse` carries `--color-inverse-text`, `--color-notice` carries `--color-notice-text`, buttons carry their own text tokens and `--color-disabled` carries `--color-disabled-text`. The bar is a loud colour of its own, so the primary and the secondary button must both read on it.\n  - A box is a flat block of one colour. It has no outline and nothing behind it: every `--shadow-*` token is `none` and `components.css` never sets `box-shadow`. Two blocks are told apart by their fills, so a block never sits on a ground of its own colour: panels (`--fill-panel`) go on the page, on `--color-surface-alt` or on a fill; tinted blocks (`--color-surface-alt`, `--color-surface-strong`) go on the page or on a surface. The secondary button and the menu use the darkest or lightest colour of the palette (`--color-button-secondary`, `--color-inverse`) so that they read on every ground.\n  - The only borders are hairlines: `--border-width` in `--color-input-border` around a form control (a white field on a white block would vanish without it) and in `--color-border-muted` between rows of a table or list, drawn in the set's `--border-style`. `--color-border` and `--color-border-strong` are the ink of drawn ornaments (`.ds-shape--ink`, the specks in the terrazzo and confetti patterns), not of frames. `--color-shadow` is the fifth ornament colour (`.ds-shape--c5`, confetti); it is never a shadow.\n  - Patterns come in two strengths. `--fill-page` is the quiet one, drawn in a faint tint of the ground, and text may sit on it. The loud ones (`--fill-bar-alt`, `--fill-inverse` and every `.ds-cover`) are drawn in a second, clashing colour and never carry text directly: text goes on a flat block or chip laid over the pattern (`.ds-cover__chip`, the label of a tile, the footer block), in `--color-bar-alt`, `--color-inverse` or a surface. The only exceptions are the faint tints of `.ds-avatar__pic` and `.ds-progress__bar`, which mix `--color-accent-text` at under 30% into the fill.\n\n## Components\n\n- `.ds-page`: on `<body>`: the patterned page, the base font and colour. Its children are two free `.ds-shape` (`.ds-shape--far`, `.ds-shape--near`) and the `.ds-sheet`, the flat sheet that holds everything else.\n- `.ds-brand`: the mark and name, first in the app bar, linking home. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button (flat fill, text colour, radius, no outline) and tilted 8 degrees; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own.\n- `.ds-nav`: the app bar, one flat colour: the brand, `.ds-nav__bar` with `.ds-nav__links` of `.ds-nav__link` (the current one is a flat accent chip, tilted; a hovered one takes `--color-surface`), `.ds-nav__search` with a search field, and `.ds-nav__actions` with the account `.ds-menu` (`.ds-menu--end` opens it from the right edge; `.ds-nav__account` is its toggle and holds an avatar).\n- `.ds-main`: the main area. `.ds-dash` is its column grid (`.ds-dash--two`, `.ds-dash--even`); `.ds-stack` stacks blocks (`.ds-stack--lib` and `.ds-stack--side` are the outer columns of the home view); `.ds-row` puts a `.ds-label` (a small heading) and a link or count on one line; `.ds-overlay` is the dialog backdrop.\n- `.ds-hero`: the featured item: a flat block of `--color-fill-4` with `--color-accent-text` and `--radius-page`. It holds a tilted plain badge, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (a secondary button and a `.ds-link--plain`). `.ds-hero__art` is also a `.ds-cover`: a field of pattern over its right 36%, with five shapes placed by their order, two of them lying across its left edge onto the flat part.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: the breadcrumb, then `.ds-page-header__row` with `.ds-page-header__main` (an optional tilted `.ds-cover`, `.ds-page-header__title`, `.ds-page-header__lead`) and `.ds-page-header__actions`, closed by a row of dots in `--color-accent`.\n- `.ds-stat`: the row of figures: three `.ds-stat__cell` blocks of unequal width and height, each one flat fill with `--color-accent-text`, touching, the row climbing over the foot of the hero; a `.ds-stat__value` at `--text-h1` over a small `.ds-stat__label`. `.ds-stat` is the row.\n- `.ds-grid`: episode tiles in two columns, flat `--fill-panel` blocks with no frame. In each run of four `.ds-grid__cell` the first spans both columns with a large cover and `--radius-page`, the second and third have a disc cover, the fourth spans both columns on `--color-surface-alt` with its cover at the right. Each has a `.ds-cover` with one shape and `.ds-grid__body` with `.ds-grid__title`, a muted `.ds-grid__text` and a `.ds-progress`.\n- `.ds-list`: the queue: numbered `.ds-list__item` rows on one flat block, divided by hairlines; the number is drawn on a flat disc or a tilted square in turn; `.ds-list__main` (`.ds-list__title`, `.ds-list__text`) and a monospace `.ds-list__meta` for the length.\n- `.ds-panel`: a flat `--fill-panel` block with a `.ds-panel__title` strip on flat `--color-bar-alt` in the UI font and a `.ds-panel__body`.\n- `.ds-sidebar`: the library column: a flat `--color-surface-alt` block, `.ds-sidebar__title`, a `.ds-sidebar__list` of `.ds-sidebar__item` rows (the current one has `is-current` and sits on `--color-surface-strong`) and optionally `.ds-sidebar__art`, a band of `--fill-bar-alt` pattern across its foot with three small shapes and no text. `.ds-sidebar--plain` sets it on the panel fill.\n- `.ds-player`: the bar at the foot of the sheet, flat `--fill-bar`: `.ds-player__now` (a small cover, `.ds-player__title`, `.ds-player__show`), `.ds-player__keys` (flat `.ds-player__key` buttons in the secondary button colours, the middle one `.ds-player__key--play` dressed like the primary button) and `.ds-player__bar` (two times around a `.ds-progress`).\n- `.ds-footer`: a slim strip of `--fill-inverse` pattern; `.ds-footer__brand`, the `.ds-footer__list` of `.ds-footer__link` and `.ds-footer__legal` each sit on a flat `--color-inverse` chip.\n- `.ds-shape`: an ornament. An empty `aria-hidden` span, absolutely placed in a section that has `position: relative`, behind the content or across the edge of two blocks. Filled kinds, with no outline: `.ds-shape--disc`, `.ds-shape--half`, `.ds-shape--quarter`, `.ds-shape--tri` (clipped box), `.ds-shape--block`. Line-only kinds: `.ds-shape--ring` (a thick circle) and `.ds-shape--hoop` (a thin one), both drawn with a radial gradient and not with a border; `.ds-shape--line`, which holds an inline SVG squiggle or zigzag, and `.ds-shape--draw`, which holds an inline SVG triangle, cross or arc, all stroked in `currentColor` at one and a half times `--size-stroke`. Pattern kinds: `.ds-shape--dots`, `.ds-shape--grid`, `.ds-shape--bars`, `.ds-shape--stripes`. Colour: `.ds-shape--c1` to `.ds-shape--c4` (the four fills), `.ds-shape--c5` (`--color-shadow`), `.ds-shape--ink` (`--color-border-strong`), `.ds-shape--paper` (`--color-surface`). A shape is either filled or a line, never a filled shape with an outline round it. Size: `.ds-shape--s`, none, `.ds-shape--l`, `.ds-shape--xl`, `.ds-shape--xxl` (0.5, 1, 2, 3 and 4.5 times `--size-shape`). `.ds-shape--tilt`, `.ds-shape--turn`, `.ds-shape--flip` and `.ds-shape--side` rotate it. Place with `.ds-shape--tl`, `--tr`, `--bl`, `--br`, `--edge-l`, `--edge-r`. Free shapes are hidden on narrow screens so they never cover text; keep them out of the way of buttons.\n- `.ds-cover`: a field of pattern, for pictures and for whole grounds: a fill with a pattern in a clashing colour. Colour pairs: `.ds-cover--1` to `.ds-cover--4` (each fill with the next one), `.ds-cover--5` (`--color-surface-strong` with the accent), `.ds-cover--6` (`--color-inverse` with `--color-fill-1`). Patterns: `.ds-cover--dots`, `.ds-cover--stripes`, `.ds-cover--grid`, `.ds-cover--zig` (rows of teeth), `.ds-cover--dash` (short strokes in rows), `.ds-cover--rings`, `.ds-cover--terrazzo` and `.ds-cover--confetti`, all at the pitch of `--size-dot`. As a picture it holds one to four `.ds-shape` (in a row, not absolutely) or a `.ds-avatar`, and may carry a `.ds-cover__chip` label on a solid surface. `.ds-cover--ground` makes it an absolutely placed layer behind the content of a section; the layout places it with a class of its own. Use patterns big: a band, a rail foot, a third of a hero.\n- `.ds-squiggle`: the short wavy rule under a section title, an inline SVG in `--color-accent`. It is the style's rule: there are no straight heavy rules.\n- `.ds-prose`: long text: h1, h2, h3 (in `--color-heading-alt`), paragraphs, lists with coloured markers, strong, inline code on a flat `--color-surface-alt` chip, and links. `.ds-prose__lead` is the first, larger paragraph.\n- `.ds-link`: a link in content, bold, in `--color-link` with the `--link-decoration` underline as thick as `--space-nudge`; on hover it takes `--color-link-hover` and the underline turns wavy. `.ds-link--quiet` for titles, breadcrumbs and lists; `.ds-link--plain` inherits its colour and is the only link allowed on a loud fill. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` is a wrapping row of them.\n- `.ds-button`: one flat block of `--fill-button` with `--radius-control` corners, no outline and no shadow. `.ds-button--secondary` uses the secondary fill; `.ds-button--danger` is `--color-danger` with `--color-surface` text, once per view; `.ds-button--large` and `.ds-button--small` change height and text size. `is-hover` swaps the fill (`--fill-button-hover`; the secondary button takes the accent) and tilts the block 2 degrees, `is-active` drops it by `--space-nudge`, `is-disabled` is `--color-disabled`, `is-focus` shows `--focus-ring`. On a block of the button's own colour use the other button. `.ds-buttons` is a row.\n- `.ds-badge`: a small flat tag in the UI font with `--radius-pill` corners and no outline; `--fill-accent` by default. `.ds-badge--alt` (`--color-accent-alt`), `.ds-badge--plain` (`--color-surface-strong`, for counts and neutral tags), and the status variants `.ds-badge--success`, `.ds-badge--warning` (both with `--color-accent-text`) and `.ds-badge--danger` (`--color-danger` with `--color-surface` text). `.ds-badge--tilt` turns it 4 degrees. `.ds-badges` is a row.\n- `.ds-form`: stacked `.ds-form__field` blocks, a bold small `.ds-form__label` over a `.ds-form__control` (input, select; `.ds-form__control--area` for a textarea, which takes `--radius-panel`), then `.ds-form__hint` or `.ds-form__error`. A control is `--fill-input` with the hairline in `--color-input-border`. `.ds-form__row` puts two fields side by side. `is-focus` adds the focus ring, `is-invalid` turns the control `--color-danger-surface` with a `--color-danger` hairline, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` (checked: the accent fill with a small square in it) and its text.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the label), a flat `.ds-switch__track` with a flat thumb in `--color-button-secondary`, `.ds-switch__label` and an optional `.ds-switch__hint`. On, the track is `--fill-accent`. `.ds-switch--end` puts the track at the right end of a full-width row. `is-on` shows the on state statically.\n- `.ds-table`: one flat `--color-surface` block. The head row is `--color-bar` with `--color-bar-text`; rows alternate `--color-surface` and `--color-surface-alt` and are divided by a hairline in `--color-border-muted`; `is-current` on a row makes it `--color-surface-strong` and bold. `.ds-table__num` right-aligns figures, `.ds-table__extra` marks a column that is dropped on a phone, `.ds-table__meta` is a muted second line in a cell.\n- `.ds-tabs`: a wrapping row of flat `--color-surface-strong` chips (`.ds-tabs__tab`); the current one (`is-current`) is `--fill-accent` and tilted 3 degrees. `is-hover` tints and tilts. Use for two to four views of one block, as the first row of the main column of an inner page.\n- `.ds-notice`: a flat `--color-notice` block with a striped end drawn in its own text colour; `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is `--color-danger-surface` with `--color-text` and `--color-danger` stripes.\n- `.ds-pagination`: a row of flat `--color-surface-strong` counters (`.ds-pagination__link`, `--radius-pill`); the current page (`is-current`) is `--fill-accent` and tilted, `is-disabled` is grey, `is-hover` takes `--color-accent-alt` and tilts the other way.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` separated by accent dots; the last has `is-current`. It is the first line of an inner page.\n- `.ds-dialog`: a flat `--fill-panel` block on the overlay, with no frame: `.ds-dialog__bar` on `--color-surface-strong` with `.ds-dialog__title` and a `.ds-dialog__close` in the secondary button colours, `.ds-dialog__body`, `.ds-dialog__actions` with the buttons at the right.\n- `.ds-empty`: a flat `--color-surface-alt` block, centred: `.ds-empty__art` (three small `.ds-shape` in a row), `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-menu`: a drop-down under a navigation item, a `<details>` with a `.ds-menu__toggle` summary and a `.ds-menu__list` of `.ds-menu__link`, each with an optional `.ds-menu__note`. The list is a flat `--color-inverse` block, tilted 1 degree, so it reads on any ground without a frame or a shadow; a hovered link takes the accent fill.\n- `.ds-tooltip`: wraps its trigger; `.ds-tooltip__tip` is a small flat `--color-inverse` chip above it, tilted, shown on hover and focus (`is-open` shows it statically). Do not leave it open over other content.\n- `.ds-accordion`: `.ds-accordion__item` (`<details>`) with a `.ds-accordion__head` summary on `--color-surface-alt` ending in a `.ds-accordion__sign`: an accent disc that becomes a diamond in `--color-accent-alt` when open. The open head sits on `--color-surface-strong`; `.ds-accordion__body` holds the answer on the panel fill.\n- `.ds-progress`: a flat `--color-disabled` track with a `.ds-progress__bar` in `--fill-accent`, striped; `.ds-progress--alt` is dotted `--color-accent-alt`. Width by `.ds-progress--0`, `--25`, `--40`, `--60`, `--75`, `--90` (50% without). `.ds-progress__legend` is the label and figure above it.\n- `.ds-avatar`: a face (inline SVG) or initials in `.ds-avatar__pic`, a tile with `--radius-control` corners on a fill with a faint pattern (`.ds-avatar--1` to `.ds-avatar--4`), optionally with `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. `.ds-avatar--large` for a cover or a byline.\n- `.ds-carousel`: `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` on one flat `--color-surface-strong` block (a `.ds-carousel__quote` and an avatar in each); `.ds-carousel__foot` holds `.ds-carousel__dots` (a disc, a diamond and a square in `--color-border`; `is-current` is the accent) and two `.ds-carousel__arrow` buttons in the secondary button colours.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch and are divided by hairlines.\n- `block-gap <= 24px`: blocks are 18px apart and columns 24px; it is a dense tool.\n- `content-width >= 85%`: the sheet fills the viewport but for its gutters.\n- `palette-colours <= 20`: four navies, near-white, four neon fills, the status colours and their tints.\n- `font-size <= 57px`: the hero title, at 62% of the display size, is the largest text of this layout.\n- `font-size >= 12px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: a heavy grotesque for headings, a sans for text and a monospace for controls.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 30%`: headings, navigation, buttons and labels are capitals; running text never is.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `box-shadow = none`: no box has anything behind it, neither a soft shadow nor a hard offset block. A block of colour behind every box is another style; depth here comes from one shape or block overlapping another.\n- `border-width <= 1px`: the only borders are hairlines round form controls and between rows. No card, button, tag, tile or bar is outlined; a thick line is a drawn squiggle or zigzag, never a frame.\n- `text-shadow = none`: type is flat.\n- `gradient-fills <= 7%`: gradients only draw patterns on covers, fields and small tints; no box fades from one colour to another.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A box is one flat fill with a radius token: no border, no `box-shadow`, no outline. If it would vanish on its ground, change its fill or the ground's, do not frame it. Follow the convention above for its text: `--color-accent-text` on the loud fills, `--color-text` on the surfaces. Give depth by overlap: pull a block over the edge of a pattern field or of the section above with a negative margin, let a `.ds-shape` cross from one block onto the next, set neighbouring blocks of different fills edge to edge and make them unequal in size. Decoration is the point of this style: a new section gets a `.ds-cover` pattern as part of its ground or a few `.ds-shape` in its empty corners, mixing filled shapes with line-only ones; draw both from the fill tokens so that every palette repaints them, and keep text on flat blocks, off the loud patterns. Corners are square or fully round (discs, arches, quarters, pills) and come from the radius tokens, some of which round a single corner; never give boxes a uniform medium radius. Tilt small things (tags, the current tab, a featured panel, one tile of a row) by 1 to 6 degrees with `transform: rotate()`; never tilt running text or a form. For a size the vocabulary lacks use `calc()` over an existing token; `--size-stroke` is the weight of every drawn line.\n",
    "components.css": "/* Layout tokens (structure part) */\n:root {\n  --size-page: 1320px;\n  --size-measure: 560px;\n  --size-nav: 60px;\n  --size-control: 40px;\n  --size-control-large: 48px;\n  --size-control-small: 30px;\n  --size-logo: 32px;\n  --size-check: 18px;\n  --size-thumb: 16px;\n  --size-track: 12px;\n  --size-avatar: 36px;\n  --size-art: 104px;\n  --size-shape: 64px;\n  --size-dot: 14px;\n  --size-stroke: 3px;\n  --size-sidebar: 216px;\n  --size-aside: 304px;\n  --size-dialog: 440px;\n  --space-1: 4px;\n  --space-2: 6px;\n  --space-3: 10px;\n  --space-4: 14px;\n  --space-5: 18px;\n  --space-6: 24px;\n  --space-7: 32px;\n  --space-8: 44px;\n  --space-9: 64px;\n  --space-gutter: 24px;\n  --space-nudge: 2px;\n}\n\n/* shell: the patterned page shows around one flat sheet that holds the whole app; shapes cross its edges */\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: var(--space-7) var(--space-gutter);\n  overflow-x: clip;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-sheet {\n  position: relative;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  background: var(--color-canvas);\n}\n.ds-page > .ds-shape--far {\n  top: var(--space-3);\n  right: var(--space-5);\n}\n.ds-page > .ds-shape--near {\n  top: 40vh;\n  left: calc(var(--size-shape) * -0.5);\n}\n\n/* views: one screen shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: the app bar along the top of the sheet */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  min-height: var(--size-nav);\n  padding: var(--space-2) var(--space-gutter);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n  color: var(--color-bar-text);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-text);\n  background: var(--color-surface);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#show:target) .ds-nav__link[href=\"#show\"],\n.ds-page:has(#episode:target) .ds-nav__link[href=\"#episode\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  transform: rotate(-2deg);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-nav__search {\n  flex: 1;\n  max-width: 34ch;\n  margin-left: auto;\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-nav__account {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: 0;\n  color: var(--color-bar-text);\n}\n.ds-menu--end .ds-menu__list {\n  right: 0;\n  left: auto;\n}\n\n/* app body: a library column, the main column, a queue column */\n.ds-main {\n  padding: var(--space-6) var(--space-gutter) var(--space-7);\n}\n.ds-dash {\n  display: grid;\n  grid-template-columns: var(--size-sidebar) minmax(0, 1fr) var(--size-aside);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-dash--two {\n  grid-template-columns: minmax(0, 1fr) var(--size-aside);\n}\n.ds-dash--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-5);\n  align-content: start;\n  min-width: 0;\n}\n.ds-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-label {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-overlay {\n  margin-top: var(--space-6);\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n\n/* hero: the featured episode on a block of flat colour; a field of pattern fills its right end and the shapes lie across the seam */\n.ds-hero {\n  position: relative;\n  display: grid;\n  gap: var(--space-4);\n  justify-items: start;\n  padding: var(--space-7) var(--space-6) calc(var(--space-8) + var(--space-6));\n  padding-right: 42%;\n  overflow: hidden;\n  color: var(--color-accent-text);\n  background: var(--color-fill-4);\n  border-radius: var(--radius-page);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-display) * 0.62);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  max-width: var(--size-measure);\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-hero .ds-hero__art {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  display: block;\n  width: 36%;\n  min-height: 0;\n  overflow: visible;\n}\n.ds-hero .ds-hero__art .ds-shape {\n  position: absolute;\n}\n.ds-hero__art .ds-shape:nth-child(1) {\n  top: 10%;\n  left: -24%;\n}\n.ds-hero__art .ds-shape:nth-child(2) {\n  right: 6%;\n  bottom: 0;\n}\n.ds-hero__art .ds-shape:nth-child(3) {\n  top: 8%;\n  right: 8%;\n}\n.ds-hero__art .ds-shape:nth-child(4) {\n  bottom: 4%;\n  left: -12%;\n}\n.ds-hero__art .ds-shape:nth-child(5) {\n  top: 46%;\n  left: 44%;\n}\n\n/* page header: the head of an inner page; a title row over a row of dots */\n.ds-page-header {\n  position: relative;\n  margin: 0 0 var(--space-6);\n  padding: 0 0 var(--space-7);\n  background: radial-gradient(var(--color-accent) 30%, transparent 34%) left bottom / var(--size-dot) var(--size-dot) repeat-x;\n}\n.ds-page-header__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n.ds-page-header__main {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-page-header__main .ds-cover {\n  flex: none;\n  width: var(--size-art);\n  border-radius: var(--radius-panel);\n  transform: rotate(-3deg);\n}\n.ds-page-header__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-page-header__lead {\n  max-width: var(--size-measure);\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* stats: three colour blocks of unequal size that touch, set in from the left and climbing over the foot of the hero */\n.ds-stat {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);\n  align-items: end;\n  margin: calc((var(--space-8) + var(--space-5)) * -1) 0 0 var(--space-7);\n}\n.ds-stat__cell {\n  display: flex;\n  flex-direction: column-reverse;\n  gap: var(--space-1);\n  padding: var(--space-6) var(--space-4) var(--space-3);\n  color: var(--color-accent-text);\n  background: var(--color-fill-2);\n}\n.ds-stat__cell:nth-child(2) {\n  padding-top: var(--space-3);\n  background: var(--color-fill-3);\n}\n.ds-stat__cell:nth-child(3) {\n  padding-top: var(--space-8);\n  background: var(--color-fill-1);\n}\n.ds-stat__value {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n}\n.ds-stat__label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.35;\n  text-transform: var(--ui-transform);\n}\n\n/* grid: episode tiles of unequal size, flat blocks with a patterned cover cut as a square or a disc beside the title and a progress bar */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: flex;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-grid__cell:nth-child(4n + 1),\n.ds-grid__cell:nth-child(4n) {\n  grid-column: 1 / -1;\n}\n.ds-grid__cell:nth-child(4n + 1) {\n  border-radius: var(--radius-page);\n}\n.ds-grid__cell:nth-child(4n) {\n  flex-direction: row-reverse;\n  background: var(--color-surface-alt);\n}\n.ds-grid__cell .ds-cover {\n  flex: none;\n  width: var(--size-art);\n}\n.ds-grid__cell:nth-child(4n + 1) .ds-cover {\n  width: 38%;\n  min-height: calc(var(--size-art) * 1.5);\n}\n.ds-grid__cell:nth-child(4n) .ds-cover {\n  width: 26%;\n}\n.ds-grid__cell:nth-child(4n + 2) .ds-cover,\n.ds-grid__cell:nth-child(4n + 3) .ds-cover {\n  align-self: center;\n  min-height: 0;\n  aspect-ratio: 1;\n  margin-left: var(--space-4);\n  border-radius: 50%;\n}\n.ds-grid__body {\n  display: grid;\n  flex: 1;\n  gap: var(--space-2);\n  align-content: center;\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n}\n.ds-grid__cell:nth-child(4n + 1) .ds-grid__body {\n  padding: var(--space-5) var(--space-6);\n}\n.ds-grid__cell:nth-child(4n + 1) .ds-grid__title {\n  font-size: var(--text-h3);\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  line-height: 1.25;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* list: the queue, numbered rows on one flat block */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  counter-reset: queue;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  counter-increment: queue;\n}\n.ds-list__item::before {\n  content: counter(queue);\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  color: var(--color-accent-text);\n  background: var(--color-accent-alt);\n  border-radius: 50%;\n}\n.ds-list__item:nth-child(even)::before {\n  border-radius: 0;\n  background: var(--color-fill-3);\n  transform: rotate(8deg);\n}\n.ds-list__item + .ds-list__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__main {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-list__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-list__meta {\n  flex: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-muted);\n}\n\n/* panel */\n.ds-panel {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1.5;\n  text-transform: var(--ui-transform);\n  color: var(--color-bar-alt-text);\n  background: var(--color-bar-alt);\n}\n.ds-panel__body {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  padding: var(--space-4);\n}\n.ds-panel__body > * {\n  margin: 0;\n}\n.ds-panel__body > .ds-form,\n.ds-panel__body > .ds-progress,\n.ds-panel__body > .ds-progress__legend,\n.ds-panel__body > .ds-switch,\n.ds-panel__body > .ds-accordion {\n  width: 100%;\n}\n\n/* sidebar: the library column */\n.ds-sidebar {\n  padding: var(--space-4);\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n}\n.ds-sidebar__item.is-current {\n  margin: 0 calc(var(--space-2) * -1);\n  padding: var(--space-1) var(--space-2);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-sidebar--plain {\n  background: var(--fill-panel);\n}\n.ds-sidebar__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n  margin: var(--space-5) calc(var(--space-4) * -1) calc(var(--space-4) * -1);\n  padding: var(--space-5) var(--space-4);\n  background: var(--fill-bar-alt);\n}\n.ds-sidebar__art .ds-shape {\n  position: relative;\n}\n\n/* player: the bar that stays at the foot of the sheet */\n.ds-player {\n  position: sticky;\n  bottom: 0;\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-3) var(--space-gutter);\n  color: var(--color-bar-text);\n  background: var(--fill-bar);\n}\n.ds-player__now {\n  display: flex;\n  flex: 0 1 30%;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-player__now .ds-cover {\n  flex: none;\n  width: var(--size-control);\n  min-height: var(--size-control);\n  border-radius: var(--radius-panel);\n}\n.ds-player__title {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-player__show {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.3;\n}\n.ds-player__keys {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-player__key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-player__key--play {\n  width: var(--size-control);\n  height: var(--size-control);\n  color: var(--color-button-text);\n  background: var(--fill-button);\n}\n.ds-player__key:hover,\n.ds-player__key.is-hover {\n  transform: rotate(-6deg);\n}\n.ds-player__key svg {\n  width: 50%;\n  height: 50%;\n}\n.ds-player__bar {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-variant-numeric: tabular-nums;\n}\n.ds-player__bar .ds-progress {\n  flex: 1;\n}\n\n/* footer: a slim strip of pattern under the app, its words on flat inverted chips */\n.ds-footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-6);\n  padding: var(--space-4) var(--space-gutter);\n  color: var(--color-inverse-text);\n  background: var(--fill-inverse);\n}\n.ds-footer__brand,\n.ds-footer__list,\n.ds-footer__legal {\n  padding: var(--space-1) var(--space-3);\n  background: var(--color-inverse);\n}\n.ds-footer__brand {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-footer__list {\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  font-size: var(--text-small);\n  line-height: 1.45;\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline wavy;\n  text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n  flex: 0 1 auto;\n  margin: 0 auto 0 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n\n/* ornaments: shapes that float free of the layout; they paint with currentColor */\n.ds-shape {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  width: var(--size-shape);\n  aspect-ratio: 1;\n  color: var(--color-fill-1);\n  pointer-events: none;\n}\n.ds-shape--disc {\n  background: currentColor;\n  border-radius: 50%;\n}\n.ds-shape--ring {\n  background: radial-gradient(closest-side, transparent 56%, currentColor 58% 98%, transparent 100%);\n}\n.ds-shape--hoop {\n  background: radial-gradient(closest-side, transparent 84%, currentColor 86% 98%, transparent 100%);\n}\n.ds-shape--half {\n  aspect-ratio: 2 / 1;\n  background: currentColor;\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-shape--quarter {\n  background: currentColor;\n  border-radius: 100% 0 0 0;\n}\n.ds-shape--tri {\n  background: currentColor;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-shape--block {\n  background: currentColor;\n  border-radius: var(--radius-panel);\n}\n.ds-shape--dots {\n  background: radial-gradient(currentColor 30%, transparent 34%) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--grid {\n  background:\n    linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot),\n    linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--bars {\n  aspect-ratio: 3 / 2;\n  background: repeating-linear-gradient(currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3.5));\n}\n.ds-shape--stripes {\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n  border-radius: 50%;\n}\n.ds-shape--line {\n  width: calc(var(--size-shape) * 1.6);\n  aspect-ratio: 5 / 1;\n}\n.ds-shape svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-shape svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.5);\n}\n.ds-shape--draw {\n  background: none;\n}\n.ds-shape--c5 {\n  color: var(--color-shadow);\n}\n.ds-shape--paper {\n  color: var(--color-surface);\n}\n.ds-shape--c1 {\n  color: var(--color-fill-1);\n}\n.ds-shape--c2 {\n  color: var(--color-fill-2);\n}\n.ds-shape--c3 {\n  color: var(--color-fill-3);\n}\n.ds-shape--c4 {\n  color: var(--color-fill-4);\n}\n.ds-shape--ink {\n  color: var(--color-border-strong);\n}\n.ds-shape--s {\n  width: calc(var(--size-shape) * 0.5);\n}\n.ds-shape--l {\n  width: calc(var(--size-shape) * 2);\n}\n.ds-shape--xl {\n  width: calc(var(--size-shape) * 3);\n}\n.ds-shape--xxl {\n  width: calc(var(--size-shape) * 4.5);\n}\n.ds-shape--flip {\n  transform: rotate(180deg);\n}\n.ds-shape--side {\n  transform: rotate(90deg);\n}\n.ds-shape--tilt {\n  transform: rotate(-14deg);\n}\n.ds-shape--turn {\n  transform: rotate(28deg);\n}\n.ds-shape--tl {\n  top: var(--space-5);\n  left: var(--space-5);\n}\n\n/* covers and pattern grounds: a flat fill with a pattern drawn in a second, clashing fill.\n   Text never sits straight on one: it goes on a flat block laid over the pattern */\n.ds-cover {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  overflow: hidden;\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--1 {\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--2 {\n  background-color: var(--color-fill-2);\n  color: var(--color-fill-3);\n}\n.ds-cover--3 {\n  background-color: var(--color-fill-3);\n  color: var(--color-fill-4);\n}\n.ds-cover--4 {\n  background-color: var(--color-fill-4);\n  color: var(--color-fill-1);\n}\n.ds-cover--5 {\n  background-color: var(--color-surface-strong);\n  color: var(--color-accent);\n}\n.ds-cover--6 {\n  background-color: var(--color-inverse);\n  color: var(--color-fill-1);\n}\n.ds-cover--dots {\n  background-image: radial-gradient(currentColor 28%, transparent 31%);\n  background-size: var(--size-dot) var(--size-dot);\n}\n.ds-cover--stripes {\n  background-image: repeating-linear-gradient(-45deg, currentColor 0 calc(var(--size-stroke) * 1.5), transparent calc(var(--size-stroke) * 1.5) var(--size-dot));\n}\n.ds-cover--grid {\n  background-image:\n    linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)),\n    linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke));\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--zig {\n  background-image:\n    linear-gradient(135deg, currentColor 25%, transparent 25%),\n    linear-gradient(225deg, currentColor 25%, transparent 25%);\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--terrazzo {\n  background-image:\n    radial-gradient(ellipse 10% 6% at 18% 24%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 11% at 72% 16%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 9% 9% at 46% 58%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 12% 5% at 84% 70%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 8% at 14% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 6% 4% at 56% 92%, var(--color-surface) 96%, transparent);\n  background-size: calc(var(--size-dot) * 7) calc(var(--size-dot) * 6);\n}\n.ds-cover--dash {\n  background-image:\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent),\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 2) calc(var(--size-dot) * 1.5);\n  background-position: 0 0, var(--size-dot) calc(var(--size-dot) * 0.75);\n}\n.ds-cover--rings {\n  background-image:\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%),\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%);\n  background-size: calc(var(--size-dot) * 3) calc(var(--size-dot) * 3);\n  background-position: 0 0, calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--confetti {\n  background-image:\n    radial-gradient(ellipse 4% 4% at 12% 16%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 44% 10%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 2% 9% at 80% 22%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 5% 5% at 66% 52%, var(--color-shadow) 96%, transparent),\n    radial-gradient(ellipse 2% 8% at 26% 48%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 16% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 3% 3% at 50% 78%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 8% 2% at 84% 86%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 8) calc(var(--size-dot) * 8);\n}\n.ds-cover--ground {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  min-height: 0;\n}\n.ds-cover .ds-shape {\n  position: relative;\n  flex: none;\n}\n.ds-cover__chip {\n  position: absolute;\n  left: var(--space-3);\n  bottom: var(--space-3);\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-pill);\n}\n\n/* brand */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-logo);\n  height: var(--size-logo);\n  padding: var(--space-1);\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border-radius: var(--radius-control);\n  transform: rotate(-8deg);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-bar-text);\n}\n\n/* typography */\n.ds-prose {\n  max-width: 66ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-prose h1 {\n  margin: 0 0 var(--space-5);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin: var(--space-6) 0 var(--space-3);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-prose a {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n}\n.ds-prose a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n  line-height: 1.45;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-decoration-thickness: var(--space-nudge);\n  text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--plain {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link--plain:visited {\n  color: inherit;\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n  text-decoration-style: wavy;\n}\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n  color: inherit;\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* buttons: one flat block of colour, no outline and nothing behind it; hover swaps the fill and tilts the block */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-5);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  cursor: pointer;\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border: 0;\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-button--secondary {\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  transition: var(--transition), background-color 0s;\n}\n.ds-button--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-size: var(--text-large);\n}\n.ds-button--small {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  color: var(--color-button-hover-text);\n  background: var(--fill-button-hover);\n  transform: rotate(-2deg);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n  transform: translateY(var(--space-nudge)) rotate(1deg);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n  transform: none;\n  cursor: not-allowed;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* badge: a small flat tag */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.6;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  vertical-align: middle;\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n  background: var(--color-accent-alt);\n}\n.ds-badge--plain {\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n}\n.ds-badge--success {\n  background: var(--color-success);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-badge--tilt {\n  transform: rotate(-4deg);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  align-content: start;\n}\n.ds-form__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-form__control {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  color: var(--color-input-text);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-form__control--area {\n  min-height: calc(var(--size-control) * 2.4);\n  border-radius: var(--radius-panel);\n  resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form__checkbox {\n  appearance: none;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n  background:\n    linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 44% 44% no-repeat,\n    var(--fill-accent);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* switch: a flat track with a flat thumb; on is the accent fill */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  cursor: pointer;\n}\n.ds-switch--end {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: calc(var(--size-thumb) * 2 + var(--space-nudge) * 2);\n  height: calc(var(--size-thumb) + var(--space-nudge) * 2);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: var(--space-nudge);\n  left: var(--space-nudge);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  background: var(--color-button-secondary);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n  left: auto;\n  right: var(--space-nudge);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-switch__label {\n  min-width: 0;\n}\n.ds-switch__hint {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* table */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-base);\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  text-align: left;\n  vertical-align: middle;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n  color: var(--color-bar-text);\n  background: var(--color-bar);\n  border-bottom: 0;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ds-table tbody tr.is-current td {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* tabs: a row of flat chips; the current one takes the accent fill and tilts */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-alt);\n  transform: rotate(-2deg);\n}\n.ds-tabs__tab.is-current {\n  font-weight: var(--weight-bold);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-3deg);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* notice: a flat block with a striped end */\n.ds-notice {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-3));\n  color: var(--color-notice-text);\n  background: var(--color-notice);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-notice::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--space-6);\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n}\n.ds-notice__title {\n  flex: none;\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n  flex: 1 1 24ch;\n  margin: 0;\n}\n.ds-notice--error {\n  color: var(--color-text);\n  background: var(--color-danger-surface);\n}\n.ds-notice--error::before {\n  color: var(--color-danger);\n}\n\n/* pagination: flat counters; the current one takes the accent fill and tilts */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control-small);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--color-accent-alt);\n  transform: rotate(-3deg);\n}\n.ds-pagination__link.is-current {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(6deg);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\";\n  width: var(--space-2);\n  height: var(--space-2);\n  background: var(--fill-accent);\n  border-radius: 50%;\n}\n.ds-breadcrumb__item.is-current {\n  font-weight: var(--weight-bold);\n}\n\n/* dialog */\n.ds-dialog {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-dialog);\n  margin: 0 auto;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-dialog__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-strong);\n}\n.ds-dialog__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  padding: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n}\n.ds-dialog__body {\n  padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  padding: 0 var(--space-4) var(--space-5);\n}\n\n/* empty state: a quiet flat block with a small cluster of shapes */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  text-align: center;\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-empty__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n}\n.ds-empty__art .ds-shape {\n  position: relative;\n}\n.ds-empty__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-empty__text {\n  max-width: 40ch;\n  margin: 0 0 var(--space-2);\n}\n\n/* menu: a drop-down under a navigation item */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle svg {\n  flex: none;\n  width: var(--space-3);\n  height: var(--space-3);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n  transform: rotate(180deg);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-3));\n  left: 0;\n  z-index: 8;\n  display: grid;\n  min-width: 24ch;\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-1deg);\n}\n.ds-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-menu__note {\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n\n/* tooltip */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 9;\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.5;\n  text-transform: none;\n  white-space: nowrap;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-2deg);\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* accordion */\n.ds-accordion {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-accordion__item {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  list-style: none;\n  cursor: pointer;\n  color: var(--color-heading);\n  background: var(--color-surface-alt);\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__item[open] .ds-accordion__head {\n  background: var(--color-surface-strong);\n}\n.ds-accordion__sign {\n  position: relative;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__sign {\n  background: var(--color-accent-alt);\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-accordion__body {\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* progress: a flat track, the done part striped over the accent */\n.ds-progress {\n  display: block;\n  height: var(--size-track);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  overflow: hidden;\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background:\n    repeating-linear-gradient(-45deg, transparent 0 var(--space-2), color-mix(in srgb, var(--color-accent-text) 28%, transparent) var(--space-2) calc(var(--space-2) + var(--size-stroke))),\n    var(--fill-accent);\n}\n.ds-progress--alt .ds-progress__bar {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 32%, transparent) 26%, transparent 30%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-accent-alt);\n}\n.ds-progress--0 .ds-progress__bar {\n  width: 0;\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--75 .ds-progress__bar {\n  width: 75%;\n}\n.ds-progress--90 .ds-progress__bar {\n  width: 90%;\n}\n.ds-progress__legend {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n}\n\n/* avatar: a face or initials on a patterned tile */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-avatar__pic {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  color: var(--color-accent-text);\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n  border-radius: var(--radius-control);\n}\n.ds-avatar--1 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-2);\n}\n.ds-avatar--3 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-3);\n}\n.ds-avatar--4 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-4);\n}\n.ds-avatar--large .ds-avatar__pic {\n  width: calc(var(--size-avatar) * 1.75);\n  height: calc(var(--size-avatar) * 1.75);\n}\n.ds-avatar__pic svg {\n  display: block;\n  width: 70%;\n  height: 70%;\n}\n.ds-avatar__text {\n  min-width: 0;\n}\n.ds-avatar__name {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-avatar__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n\n/* carousel: one slide shows; the dots are a disc, a diamond and a square */\n.ds-carousel {\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-5);\n  scroll-snap-align: start;\n}\n.ds-carousel__quote {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.3;\n  color: var(--color-heading);\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-carousel__arrow svg {\n  width: var(--space-4);\n  height: var(--space-4);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-6deg);\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-carousel__dot {\n  width: var(--space-3);\n  height: var(--space-3);\n  background: var(--color-border);\n  border-radius: 50%;\n}\n.ds-carousel__dot:nth-child(3n + 2) {\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-carousel__dot:nth-child(3n) {\n  border-radius: 0;\n}\n.ds-carousel__dot.is-current {\n  background: var(--fill-accent);\n}\n\n/* squiggle: the wavy rule under a section title */\n.ds-squiggle {\n  display: block;\n  width: calc(var(--size-shape) * 1.25);\n  height: var(--space-4);\n  color: var(--color-accent);\n}\n.ds-squiggle svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-squiggle svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.25);\n}\n\n@media (max-width: 1100px) {\n  .ds-dash {\n    grid-template-columns: minmax(0, 1fr) var(--size-aside);\n  }\n  .ds-dash > .ds-stack--lib,\n  .ds-dash > .ds-stack--side {\n    grid-column: 1 / -1;\n  }\n  .ds-sidebar__art,\n  .ds-sidebar--plain {\n    display: none;\n  }\n  .ds-nav__search {\n    display: none;\n  }\n  .ds-nav__actions {\n    margin-left: auto;\n  }\n}\n\n@media (max-width: 800px) {\n  .ds-page {\n    padding: var(--space-3) var(--space-2) var(--space-5);\n  }\n  .ds-page > .ds-shape {\n    display: none;\n  }\n  .ds-dash,\n  .ds-dash--two,\n  .ds-dash--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-nav {\n    flex-wrap: wrap;\n    gap: var(--space-2) var(--space-3);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__bar {\n    order: 3;\n    flex: 0 0 100%;\n  }\n  .ds-nav__links {\n    flex-wrap: wrap;\n  }\n  .ds-nav__link {\n    padding: 0 var(--space-2);\n  }\n  .ds-nav__account .ds-avatar__text {\n    display: none;\n  }\n  .ds-main {\n    padding: var(--space-5) var(--space-4) var(--space-6);\n  }\n  .ds-hero {\n    padding: var(--space-5);\n    padding-top: calc(var(--size-shape) * 1.6);\n  }\n  .ds-hero .ds-hero__art {\n    bottom: auto;\n    width: 100%;\n    height: calc(var(--size-shape) * 1.5);\n    overflow: hidden;\n  }\n  .ds-hero__art .ds-shape:nth-child(1),\n  .ds-hero__art .ds-shape:nth-child(4) {\n    left: 4%;\n  }\n  .ds-stat {\n    margin: 0;\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(3) {\n    padding-top: var(--space-3);\n  }\n  .ds-grid__cell:nth-child(4n) {\n    flex-direction: row;\n  }\n  .ds-grid__cell .ds-cover,\n  .ds-grid__cell:nth-child(4n + 1) .ds-cover,\n  .ds-grid__cell:nth-child(4n) .ds-cover {\n    width: calc(var(--size-art) * 0.7);\n    min-height: calc(var(--size-art) * 0.7);\n  }\n  .ds-grid__cell:nth-child(4n + 1) .ds-grid__body {\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-hero__art .ds-shape {\n    width: calc(var(--size-shape) * 0.7);\n  }\n  .ds-hero__art .ds-shape--l,\n  .ds-hero__art .ds-shape--xl {\n    width: var(--size-shape);\n  }\n  .ds-hero__art .ds-shape--line {\n    width: var(--size-shape);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.38);\n  }\n  .ds-hero__actions .ds-button {\n    flex: 1 1 100%;\n  }\n  .ds-stat,\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-page-header__main {\n    align-items: flex-start;\n  }\n  .ds-page-header__main .ds-cover {\n    width: calc(var(--size-art) * 0.6);\n    min-height: calc(var(--size-art) * 0.6);\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-prose h2 {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-button {\n    white-space: normal;\n  }\n  .ds-table {\n    font-size: var(--text-small);\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-2);\n  }\n  .ds-table .ds-table__extra {\n    display: none;\n  }\n  .ds-menu__list {\n    min-width: 0;\n    width: 26ch;\n    max-width: 80vw;\n  }\n  .ds-player {\n    position: static;\n    flex-wrap: wrap;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-player__now {\n    flex: 1 1 50%;\n  }\n  .ds-player__bar {\n    flex: 0 0 100%;\n  }\n  .ds-footer {\n    padding: var(--space-4);\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: memphis podcast app specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n<span class=\"ds-shape ds-shape--ring ds-shape--l ds-shape--c2 ds-shape--far\"></span>\n<span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--c3 ds-shape--near ds-shape--turn\"></span>\n<div class=\"ds-sheet\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n    <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2.8 18q2.3-5.6 4.6 0t4.6 0t4.6 0t4.6 0\" stroke-width=\"2.4\"/><circle cx=\"6.5\" cy=\"7\" r=\"3.4\" fill=\"currentColor\" stroke=\"none\"/><polygon points=\"16.8,3.6 21.2,10.6 12.4,10.6\"/></svg></span>\n    <span class=\"ds-brand__name\">chronoskin</span>\n  </a>\n  <nav class=\"ds-nav__bar\" aria-label=\"Main\">\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Listen now</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#show\">Shows</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#episode\">Episode</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#settings\">Settings</a></li>\n    </ul>\n  </nav>\n  <div class=\"ds-nav__search\">\n    <input class=\"ds-form__control\" type=\"search\" aria-label=\"Search shows and episodes\" placeholder=\"Search shows and episodes\">\n  </div>\n  <div class=\"ds-nav__actions\">\n    <details class=\"ds-menu ds-menu--end\" data-component=\"menu\">\n      <summary class=\"ds-nav__link ds-nav__account ds-menu__toggle\"><span class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Aino</span></span></span> <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 6 5 5 5-5\"/></svg></summary>\n      <ul class=\"ds-menu__list\">\n        <li><a class=\"ds-menu__link\" href=\"#settings\">Your account</a></li>\n        <li><a class=\"ds-menu__link\" href=\"#settings\">Downloads <span class=\"ds-menu__note\">0</span></a></li>\n        <li><a class=\"ds-menu__link\" href=\"#show\">Followed shows <span class=\"ds-menu__note\">12</span></a></li>\n        <li><a class=\"ds-menu__link\" href=\"#home\">Sign out</a></li>\n      </ul>\n    </details>\n  </div>\n</header>\n\n<main class=\"ds-main\">\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-dash\">\n    <div class=\"ds-stack ds-stack--lib\">\n    <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n      <h2 class=\"ds-sidebar__title\">Your library</h2>\n      <ul class=\"ds-sidebar__list\">\n        <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Listen now</a><span class=\"ds-badge\">3</span></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#show\">Followed shows</a><span class=\"ds-badge ds-badge--plain\">12</span></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">In progress</a><span class=\"ds-badge ds-badge--plain\">4</span></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#settings\">Downloads</a><span class=\"ds-badge ds-badge--plain\">0</span></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#show\">Saved for later</a><span class=\"ds-badge ds-badge--plain\">9</span></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#show\">History</a></li>\n      </ul>\n      <div class=\"ds-sidebar__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--half ds-shape--c2\"></span><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c1\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--c4\"></span></div>\n    </aside>\n    <aside class=\"ds-sidebar ds-sidebar--plain\">\n      <h2 class=\"ds-sidebar__title\">Voices</h2>\n      <ul class=\"ds-sidebar__list\">\n        <li class=\"ds-sidebar__item\"><a class=\"ds-avatar ds-avatar--1\" href=\"#show\"><span class=\"ds-avatar__pic\">IM</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Ines</span><span class=\"ds-avatar__meta\">2 shows</span></span></a></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-avatar ds-avatar--4\" href=\"#show\"><span class=\"ds-avatar__pic\">TO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tunde</span><span class=\"ds-avatar__meta\">1 show</span></span></a></li>\n        <li class=\"ds-sidebar__item\"><a class=\"ds-avatar ds-avatar--3\" href=\"#show\"><span class=\"ds-avatar__pic\">PH</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Petra</span><span class=\"ds-avatar__meta\">1 show</span></span></a></li>\n      </ul>\n    </aside>\n    </div>\n\n    <div class=\"ds-stack\">\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <span class=\"ds-badge ds-badge--plain ds-badge--tilt\">New today</span>\n        <h1 class=\"ds-hero__title\">The colour of loud</h1>\n        <p class=\"ds-hero__lead\">Shapes and Noise, episode 48. Two designers argue about whether yellow can be quiet. 42 minutes.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#episode\">Play episode</a>\n          <a class=\"ds-link ds-link--plain\" href=\"#show\">Go to the show</a>\n        </div>\n        <div class=\"ds-hero__art ds-cover ds-cover--1 ds-cover--rings\" aria-hidden=\"true\">\n          <span class=\"ds-shape ds-shape--disc ds-shape--xl ds-shape--c3\"></span>\n          <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c4\"></span>\n          <span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--paper ds-shape--turn\"></span>\n          <span class=\"ds-shape ds-shape--dots ds-shape--l ds-shape--ink\"></span>\n          <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tilt\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n        </div>\n      </section>\n\n      <dl class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">hours this week</dt><dd class=\"ds-stat__value\">6.5</dd></div>\n        <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">shows followed</dt><dd class=\"ds-stat__value\">12</dd></div>\n        <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">day streak</dt><dd class=\"ds-stat__value\">19</dd></div>\n      </dl>\n\n      <div class=\"ds-row\">\n        <h2 class=\"ds-label\">Keep listening</h2>\n        <a class=\"ds-link\" href=\"#show\">All in progress</a>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n            <li class=\"ds-grid__cell\">\n              <div class=\"ds-cover ds-cover--2 ds-cover--dots\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--ink\"></span></div>\n              <div class=\"ds-grid__body\">\n                <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">A short history of the squiggle</a></h3>\n                <p class=\"ds-grid__text\">Shapes and Noise, 18 min left</p>\n                <span class=\"ds-progress ds-progress--60\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Listened\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n            </li>\n            <li class=\"ds-grid__cell\">\n              <div class=\"ds-cover ds-cover--3 ds-cover--stripes\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c1\"></span></div>\n              <div class=\"ds-grid__body\">\n                <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Why the bus is orange</a></h3>\n                <p class=\"ds-grid__text\">Street Furniture, 31 min left</p>\n                <span class=\"ds-progress ds-progress--25\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Listened\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n            </li>\n            <li class=\"ds-grid__cell\">\n              <div class=\"ds-cover ds-cover--4 ds-cover--zig\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c2 ds-shape--turn\"></span></div>\n              <div class=\"ds-grid__body\">\n                <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Terrazzo, explained by a tiler</a></h3>\n                <p class=\"ds-grid__text\">Floor Notes, 9 min left</p>\n                <span class=\"ds-progress ds-progress--75\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Listened\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n            </li>\n            <li class=\"ds-grid__cell\">\n              <div class=\"ds-cover ds-cover--1 ds-cover--terrazzo\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--ring ds-shape--s ds-shape--ink\"></span></div>\n              <div class=\"ds-grid__body\">\n                <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Forty chairs nobody sat on</a></h3>\n                <p class=\"ds-grid__text\">Shapes and Noise, 4 min left</p>\n                <span class=\"ds-progress ds-progress--90\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Listened\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n            </li>\n      </ul>\n    </div>\n\n    <div class=\"ds-stack ds-stack--side\">\n      <div class=\"ds-row\">\n        <h2 class=\"ds-label\">Up next</h2>\n        <a class=\"ds-link\" href=\"#show\">Edit queue</a>\n      </div>\n      <ol class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">The colour of loud</a></h3><p class=\"ds-list__text\">Shapes and Noise</p></div>\n          <span class=\"ds-list__meta\">42:10</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">A bench is a sentence</a></h3><p class=\"ds-list__text\">Street Furniture</p></div>\n          <span class=\"ds-list__meta\">28:45</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Grout lines</a></h3><p class=\"ds-list__text\">Floor Notes</p></div>\n          <span class=\"ds-list__meta\">35:02</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Stickers on everything</a></h3><p class=\"ds-list__text\">Shapes and Noise</p></div>\n          <span class=\"ds-list__meta\">51:30</span>\n        </li>\n      </ol>\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <h3 class=\"ds-panel__title\">Weekly goal</h3>\n        <div class=\"ds-panel__body\">\n          <p>Eight hours of listening. You are an hour and a half away.</p>\n          <div class=\"ds-progress__legend\"><span>6.5 of 8 hours</span><span>75%</span></div>\n          <span class=\"ds-progress ds-progress--75 ds-progress--alt\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Weekly goal\"><span class=\"ds-progress__bar\"></span></span>\n        </div>\n      </section>\n      <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"New shows\">\n        <div class=\"ds-carousel__track\">\n          <figure class=\"ds-carousel__slide\">\n            <blockquote class=\"ds-carousel__quote\">Floor Notes: a tiler and an architect look down.</blockquote>\n            <figcaption class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Milan Dvorak</span><span class=\"ds-avatar__meta\">host, 24 episodes</span></span></figcaption>\n          </figure>\n          <figure class=\"ds-carousel__slide\">\n            <blockquote class=\"ds-carousel__quote\">Street Furniture: the things a city sits on.</blockquote>\n            <figcaption class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Petra Halloran</span><span class=\"ds-avatar__meta\">host, 61 episodes</span></span></figcaption>\n          </figure>\n        </div>\n        <div class=\"ds-carousel__foot\">\n          <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n          <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n          <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"show\">\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\" aria-label=\"Breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Listen now</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#show\">Shows</a></li>\n      <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Shapes and Noise</li>\n    </ol>\n    <div class=\"ds-page-header__row\">\n      <div class=\"ds-page-header__main\">\n        <div class=\"ds-cover ds-cover--2 ds-cover--dots\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--tri ds-shape--ink ds-shape--tilt\"></span></div>\n        <div>\n          <h1 class=\"ds-page-header__title\">Shapes and Noise</h1>\n          <p class=\"ds-page-header__lead\">Two designers and one loud opinion, every Thursday.</p>\n        </div>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#settings\">Notify me</a>\n        <a class=\"ds-button\" href=\"#episode\">Play latest</a>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-dash ds-dash--two\">\n    <div class=\"ds-stack\">\n      <div class=\"ds-row\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#show\" role=\"tab\" aria-selected=\"true\">Episodes</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#show\" role=\"tab\">Unplayed <span class=\"ds-badge ds-badge--plain\">3</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#show\" role=\"tab\">About</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#show\" role=\"tab\">Reviews</a></li>\n        </ul>\n        <span class=\"ds-list__meta\">41 to 48 of 48</span>\n      </div>\n      <table class=\"ds-table\" data-component=\"table\">\n        <thead>\n          <tr><th class=\"ds-table__num\">No.</th><th>Episode</th><th class=\"ds-table__extra\">Out</th><th>State</th><th class=\"ds-table__num\">Minutes</th></tr>\n        </thead>\n        <tbody>\n          <tr class=\"is-current\"><td class=\"ds-table__num\">48</td><td><a class=\"ds-link ds-link--quiet\" href=\"#episode\">The colour of loud</a></td><td class=\"ds-table__extra\">Today</td><td><span class=\"ds-badge ds-badge--alt\">New</span></td><td class=\"ds-table__num\">42</td></tr>\n          <tr><td class=\"ds-table__num\">47</td><td><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Stickers on everything</a></td><td class=\"ds-table__extra\">7 March</td><td><span class=\"ds-badge ds-badge--warning\">Queued</span></td><td class=\"ds-table__num\">52</td></tr>\n          <tr><td class=\"ds-table__num\">46</td><td><span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#episode\">A short history of the squiggle</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">18 minutes left</span></span></td><td class=\"ds-table__extra\">29 February</td><td><span class=\"ds-badge\">Playing</span></td><td class=\"ds-table__num\">45</td></tr>\n          <tr><td class=\"ds-table__num\">45</td><td><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Forty chairs nobody sat on</a></td><td class=\"ds-table__extra\">22 February</td><td><span class=\"ds-badge ds-badge--success\">Played</span></td><td class=\"ds-table__num\">38</td></tr>\n          <tr><td class=\"ds-table__num\">44</td><td><a class=\"ds-link ds-link--quiet\" href=\"#episode\">The grid is a lie</a></td><td class=\"ds-table__extra\">15 February</td><td><span class=\"ds-badge ds-badge--success\">Played</span></td><td class=\"ds-table__num\">47</td></tr>\n          <tr><td class=\"ds-table__num\">43</td><td><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Live from the print shop</a></td><td class=\"ds-table__extra\">8 February</td><td><span class=\"ds-badge ds-badge--danger\">Failed</span></td><td class=\"ds-table__num\">63</td></tr>\n          <tr><td class=\"ds-table__num\">42</td><td><a class=\"ds-link ds-link--quiet\" href=\"#episode\">Pink is a neutral</a></td><td class=\"ds-table__extra\">1 February</td><td><span class=\"ds-badge ds-badge--success\">Played</span></td><td class=\"ds-table__num\">40</td></tr>\n        </tbody>\n      </table>\n      <div class=\"ds-row\">\n        <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#show\" aria-disabled=\"true\">Newer</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#show\" aria-current=\"page\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#show\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#show\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#show\">Older</a></li>\n        </ul>\n        <div class=\"ds-badges\" data-component=\"badge\">\n          <span class=\"ds-badge\">Playing</span>\n          <span class=\"ds-badge ds-badge--alt\">New</span>\n          <span class=\"ds-badge ds-badge--plain\">Saved</span>\n          <span class=\"ds-badge ds-badge--success\">Played</span>\n          <span class=\"ds-badge ds-badge--warning\">Queued</span>\n          <span class=\"ds-badge ds-badge--danger\">Failed</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"ds-stack\">\n      <div class=\"ds-notice\" role=\"status\">\n        <strong class=\"ds-notice__title\">Season 5</strong>\n        <p class=\"ds-notice__text\">New episodes every Thursday until June.</p>\n      </div>\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Hosts</h2>\n        <div class=\"ds-panel__body\">\n          <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Ines Marchetti</span><span class=\"ds-avatar__meta\">says yellow is loud</span></span></span>\n          <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tunde Okafor</span><span class=\"ds-avatar__meta\">says it depends</span></span></span>\n          <a class=\"ds-link\" href=\"#episode\">Start with episode 48</a>\n        </div>\n      </section>\n      <aside class=\"ds-sidebar\">\n        <h2 class=\"ds-sidebar__title\">About the show</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\">Episodes <span>48</span></li>\n          <li class=\"ds-sidebar__item\">Since <span>2018</span></li>\n          <li class=\"ds-sidebar__item\">Out on <span>Thursdays</span></li>\n          <li class=\"ds-sidebar__item\">You played <span class=\"ds-badge ds-badge--plain\">39</span></li>\n        </ul>\n      </aside>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"episode\">\n  <header class=\"ds-page-header\">\n    <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#show\">Shows</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#show\">Shapes and Noise</a></li>\n      <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Episode 48</li>\n    </ol>\n    <div class=\"ds-page-header__row\">\n      <div class=\"ds-page-header__main\">\n        <div class=\"ds-cover ds-cover--3 ds-cover--stripes\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--c1\"></span></div>\n        <div>\n          <h1 class=\"ds-page-header__title\">The colour of loud</h1>\n          <p class=\"ds-page-header__lead\">Episode 48, out today, 42 minutes.</p>\n        </div>\n      </div>\n      <div class=\"ds-buttons\" data-component=\"buttons\">\n        <button class=\"ds-button\" type=\"button\">Play</button>\n        <button class=\"ds-button ds-button--secondary\" type=\"button\">Add to queue</button>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Remove download</button>\n        <button class=\"ds-button\" type=\"button\" disabled>Share clip</button>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-dash ds-dash--two\">\n    <div class=\"ds-stack\">\n      <div class=\"ds-notice ds-notice--error\" role=\"alert\" data-component=\"notice\">\n        <strong class=\"ds-notice__title\">Download failed</strong>\n        <p class=\"ds-notice__text\">The file stopped at 60%. Playing now will stream it instead.</p>\n      </div>\n      <article class=\"ds-prose\" data-component=\"typography\">\n        <h1>Show notes</h1>\n        <p class=\"ds-prose__lead\">Ines thinks yellow shouts. Tunde thinks it only shouts next to violet. Forty minutes later nobody has moved.</p>\n        <h2>In this episode</h2>\n        <p>They test the claim on a real poster, swap one colour at a time and read the listener letters. The file they argue over is named <code>poster-final-loud.pdf</code>.</p>\n        <ul>\n          <li>Why pink and teal fight and still look friendly</li>\n          <li>What a black outline does to a quiet colour</li>\n          <li>The letter about a yellow kitchen</li>\n        </ul>\n        <h3>Mentioned</h3>\n        <p>A book of wrapping paper, a tram seat fabric and <strong>one very orange bus</strong>.</p>\n      </article>\n      <ul class=\"ds-links\" data-component=\"links\">\n        <li><a class=\"ds-link\" href=\"#show\">More from this show</a></li>\n        <li><a class=\"ds-link is-visited\" href=\"#episode\">Episode 47</a></li>\n        <li><a class=\"ds-link is-hover\" href=\"#show\">Why the bus is orange</a></li>\n        <li><a class=\"ds-link is-active\" href=\"#home\">Back to listen now</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-stack\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Chapters</h2>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-progress__legend\"><span>Yellow shouts</span><span>00:00</span></div>\n          <span class=\"ds-progress ds-progress--90\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Chapter one\"><span class=\"ds-progress__bar\"></span></span>\n          <div class=\"ds-progress__legend\"><span>The poster test</span><span>14:20</span></div>\n          <span class=\"ds-progress ds-progress--25 ds-progress--alt\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Chapter two\"><span class=\"ds-progress__bar\"></span></span>\n          <div class=\"ds-progress__legend\"><span>Letters</span><span>31:05</span></div>\n          <span class=\"ds-progress ds-progress--0\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Chapter three\"><span class=\"ds-progress__bar\"></span></span>\n        </div>\n      </section>\n      <aside class=\"ds-sidebar\">\n        <h2 class=\"ds-sidebar__title\">Details</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\">Show <a class=\"ds-link ds-link--quiet\" href=\"#show\">Shapes and Noise</a></li>\n          <li class=\"ds-sidebar__item\">Length <span>42:10</span></li>\n          <li class=\"ds-sidebar__item\">File <span class=\"ds-badge ds-badge--danger\">60%</span></li>\n        </ul>\n      </aside>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"settings\">\n  <header class=\"ds-page-header\">\n    <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Listen now</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#settings\">Settings</a></li>\n      <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Account and playback</li>\n    </ol>\n    <div class=\"ds-page-header__row\">\n      <div>\n        <h1 class=\"ds-page-header__title\">Settings</h1>\n        <p class=\"ds-page-header__lead\">Your account, how episodes play and what stays on this device.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#home\">Done</a>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-dash ds-dash--even\">\n    <section class=\"ds-panel\">\n      <h2 class=\"ds-panel__title\">Account</h2>\n      <div class=\"ds-panel__body\">\n        <form class=\"ds-form\" data-component=\"form\">\n          <div class=\"ds-form__row\">\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"s-name\">Display name</label>\n              <input class=\"ds-form__control\" id=\"s-name\" type=\"text\" value=\"Aino\">\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"s-mail\">Email</label>\n              <input class=\"ds-form__control is-invalid\" id=\"s-mail\" type=\"email\" value=\"aino@example\" aria-invalid=\"true\" aria-describedby=\"s-mail-err\">\n              <p class=\"ds-form__error\" id=\"s-mail-err\">Enter a full address, such as name@example.org.</p>\n            </div>\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"s-speed\">Playback speed</label>\n            <select class=\"ds-form__control\" id=\"s-speed\">\n              <option>Normal</option>\n              <option>A little faster</option>\n              <option>Much faster</option>\n            </select>\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"s-note\">About you</label>\n            <textarea class=\"ds-form__control ds-form__control--area\" id=\"s-note\">Listens on the tram. Skips intros.</textarea>\n            <p class=\"ds-form__hint\">Shown next to your reviews.</p>\n          </div>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Email me when a followed show returns</label>\n          <div class=\"ds-buttons\">\n            <button class=\"ds-button\" type=\"button\">Save changes</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#home\">Cancel</a>\n          </div>\n        </form>\n      </div>\n    </section>\n    <div class=\"ds-stack\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Playback</h2>\n        <div class=\"ds-panel__body\">\n          <label class=\"ds-switch ds-switch--end\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Download new episodes<span class=\"ds-switch__hint\">On wifi only</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\">Skip silences<span class=\"ds-switch__hint\">Saves about four minutes an hour</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\">Keep played episodes<span class=\"ds-switch__hint\">Otherwise removed after a day</span></span></label>\n        </div>\n      </section>\n      <div class=\"ds-accordion\" data-component=\"accordion\">\n        <details class=\"ds-accordion__item\" open>\n          <summary class=\"ds-accordion__head\">Where are downloads kept? <span class=\"ds-accordion__sign\"></span></summary>\n          <div class=\"ds-accordion__body\"><p>On this device only. Signing out removes them.</p></div>\n        </details>\n        <details class=\"ds-accordion__item\">\n          <summary class=\"ds-accordion__head\">Can I move my queue to another device? <span class=\"ds-accordion__sign\"></span></summary>\n          <div class=\"ds-accordion__body\"><p>Yes, the queue follows your account.</p></div>\n        </details>\n        <details class=\"ds-accordion__item\">\n          <summary class=\"ds-accordion__head\">What does the streak count? <span class=\"ds-accordion__sign\"></span></summary>\n          <div class=\"ds-accordion__body\"><p>Any day with ten minutes of listening.</p></div>\n        </details>\n      </div>\n      <div class=\"ds-empty\" data-component=\"empty\">\n        <div class=\"ds-empty__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c2\"></span><span class=\"ds-shape ds-shape--half ds-shape--s ds-shape--c4\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--c1\"></span></div>\n        <h3 class=\"ds-empty__title\">No downloads yet</h3>\n        <p class=\"ds-empty__text\">Episodes you download for the tram appear here.</p>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#show\">Browse your shows</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-overlay\">\n    <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n      <div class=\"ds-dialog__bar\">\n        <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Clear listening history?</h2>\n        <a class=\"ds-dialog__close\" href=\"#settings\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>Your streak of 19 days and the played marks on 212 episodes will be removed. Followed shows stay.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#settings\">Keep it</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Clear history</button>\n      </div>\n    </div>\n  </div>\n</section>\n</main>\n\n<div class=\"ds-player\" aria-label=\"Now playing\">\n  <div class=\"ds-player__now\">\n    <div class=\"ds-cover ds-cover--2 ds-cover--dots\" aria-hidden=\"true\"></div>\n    <div><span class=\"ds-player__title\">A short history of the squiggle</span><span class=\"ds-player__show\">Shapes and Noise, episode 46</span></div>\n  </div>\n  <div class=\"ds-player__keys\">\n    <button class=\"ds-player__key\" type=\"button\" aria-label=\"Back 15 seconds\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n    <button class=\"ds-player__key ds-player__key--play\" type=\"button\" aria-label=\"Play\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M4 2.5v11l9-5.5z\"/></svg></button>\n    <button class=\"ds-player__key\" type=\"button\" aria-label=\"Forward 30 seconds\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n  </div>\n  <div class=\"ds-player__bar\">\n    <span>27:04</span>\n    <span class=\"ds-progress ds-progress--60\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Position\"><span class=\"ds-progress__bar\"></span></span>\n    <span>45:00</span>\n  </div>\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <p class=\"ds-footer__brand\">chronoskin</p>\n  <ul class=\"ds-footer__list\">\n    <li><a class=\"ds-footer__link\" href=\"#home\">Listen now</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#show\">Shows</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#settings\">Settings</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#settings\">Help</a></li>\n  </ul>\n  <p class=\"ds-footer__legal\">Specimen page. All shows, names and figures are placeholders.</p>\n</footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.app.s03.p03.t03.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-me-3333\",\n  \"short\": \"v1-me-3333\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #12163f;\n  --color-canvas: #161b4b;\n  --color-surface: #1c2259;\n  --color-surface-alt: #272e70;\n  --color-surface-strong: #343c88;\n  --color-bar: #3df5d0;\n  --color-bar-text: #12163f;\n  --color-bar-alt: #f5ff4a;\n  --color-bar-alt-text: #12163f;\n  --color-inverse: #f4f1ff;\n  --color-inverse-text: #12163f;\n  --color-text: #f1f0ff;\n  --color-text-muted: #b1b6e6;\n  --color-heading: #ffffff;\n  --color-heading-alt: #3df5d0;\n  --color-link: #3df5d0;\n  --color-link-quiet: #f1f0ff;\n  --color-link-visited: #c9a6ff;\n  --color-link-hover: #ff7bdc;\n  --color-link-active: #f5ff4a;\n  --color-border: #f1f0ff;\n  --color-border-strong: #ffffff;\n  --color-border-muted: #4a52a3;\n  --color-accent: #ff5fd2;\n  --color-accent-text: #12163f;\n  --color-accent-alt: #3df5d0;\n  --color-fill-1: #ff5fd2;\n  --color-fill-2: #3df5d0;\n  --color-fill-3: #f5ff4a;\n  --color-fill-4: #9c8aff;\n  --color-button: #f5ff4a;\n  --color-button-text: #12163f;\n  --color-button-hover-text: #12163f;\n  --color-button-secondary: #f4f1ff;\n  --color-button-secondary-text: #12163f;\n  --color-input: #0c0f2e;\n  --color-input-text: #ffffff;\n  --color-input-border: #f1f0ff;\n  --color-disabled: #2a2f66;\n  --color-disabled-text: #9297cc;\n  --color-danger: #ff7389;\n  --color-danger-surface: #4a1d4f;\n  --color-success: #5dfc8f;\n  --color-warning: #ffb347;\n  --color-notice: #3df5d0;\n  --color-notice-text: #12163f;\n  --color-focus: #f5ff4a;\n  --color-shadow: #ff8f3d;\n  --color-overlay: rgb(5 7 28 / 0.72);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Space Grotesk\", \"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: \"Archivo Black\", \"Arial Black\", \"Helvetica Neue\", Impact, sans-serif;\n  --font-ui: \"Space Mono\", \"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace;\n  --font-mono: \"Space Mono\", \"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 92px;\n  --text-h1: 52px;\n  --text-h2: 34px;\n  --text-h3: 19px;\n  --line-body: 1.5;\n  --line-heading: 1.02;\n  --line-display: 0.92;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 900;\n  --weight-display: 900;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.01em;\n  --display-tracking: -0.02em;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: dotted;\n  --radius-control: 0 999px 999px 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0 0 48px 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: linear-gradient(90deg, color-mix(in srgb, var(--color-border-muted) 40%, transparent) 1px, transparent 0) 0 0 / 48px 48px, linear-gradient(color-mix(in srgb, var(--color-border-muted) 40%, transparent) 1px, transparent 0) 0 0 / 48px 48px, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: linear-gradient(135deg, var(--color-accent) 25%, transparent 25%) 0 0 / 20px 20px, linear-gradient(225deg, var(--color-accent) 25%, transparent 25%) 0 0 / 20px 20px, var(--color-bar-alt);\n  --fill-inverse: linear-gradient(90deg, var(--color-fill-4) 3px, transparent 0) 0 0 / 28px 28px, linear-gradient(var(--color-fill-4) 3px, transparent 0) 0 0 / 28px 28px, var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-fill-2);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px dashed var(--color-focus);\n  --transition: transform 0.1s linear, background-color 0.1s linear;\n  --backdrop-blur: 0px;\n}\n"
  }
}