{
  "id": "v1-ci-8474",
  "long_id": "v1.cinematic.app.s08.p04.t07.u04",
  "name": "Cinematic documentary player",
  "era": {
    "slug": "cinematic",
    "code": "ci",
    "name": "Cinematic",
    "years": [
      2015,
      2026
    ],
    "description": "The immersive site of 2015 to 2026 for a band, a film, a fashion house or a game: one scene to a screen, edge to edge and mostly dark, enormous condensed capitals set tight, almost no chrome, thin rules and small tracked labels, one colour used like a light."
  },
  "archetype": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the site of a documentary released in chapters, as film and album microsites were built between 2015 and 2026: the whole site is a player, with the navigation as a bar fixed to the foot of the window that also shows what is playing and how far it has run. The home view opens on one scene with the title high in its sky and then hangs the chapters from a single line down the middle of the page, a frame on one side and the text on the other, turn and turn about. The page is cold white and the pictures are ink-dark, set in a heavy typewriter face with a book serif for reading, and one green, the northern lights, is the only colour.",
  "url": "https://chrono.skin/s/v1-ci-8474",
  "preview_url": "https://chrono.skin/s/v1-ci-8474/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic documentary player\n\n## Summary\n\nThis is the site of a documentary released in chapters, as film and album microsites were built between 2015 and 2026: the whole site is a player, with the navigation as a bar fixed to the foot of the window that also shows what is playing and how far it has run. The home view opens on one scene with the title high in its sky and then hangs the chapters from a single line down the middle of the page, a frame on one side and the text on the other, turn and turn about. The page is cold white and the pictures are ink-dark, set in a heavy typewriter face with a book serif for reading, and one green, the northern lights, is the only colour.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1240px) wide with `--space-6` side padding (`--space-4` on a phone). Sections pad themselves with `--space-9` (120px), `--tight` with `--space-8`; `--alt` is a section on `--color-surface-alt` between two hairlines. Section heads, figures, the voices and the footer are centred on the middle line of the page.\n- Navigation is `.ds-nav`, the player: a bar `--size-nav` (68px) tall on `--fill-bar-alt`, fixed to the foot of the window, with the brand at the left, four label links in the middle (the current one stands on an accent mark) and at the right a round play button, the chapter and time now playing, and the word Chapters (a `.ds-menu` that opens upwards). A `.ds-progress__bar` runs along its upper edge as the scrubber. Nothing stands at the top of the page.\n- The home view stacks: `.ds-hero`, a scene `--size-scene` (800px) tall from the top edge of the window, with a line of labels across its head, the two-line title under it, the six chapters as a rail of ticks at the right edge and lead, two buttons and a badge in the dark foot; a section with the `.ds-list`, the spine; the `.ds-stat` row; a tight section with the `.ds-carousel` of voices; an `--alt` section with the `.ds-grid` of four ways to watch; the `.ds-band`; the footer, which keeps `--size-nav` clear at its foot for the player.\n- Inner pages have no hero and no picture at their head. Each opens inside `.ds-wrap` with `.ds-top` (under a strong rule, the breadcrumb at the left and the page's number such as `02 / 04` at the right) and the `.ds-page-header`: the title, one line of text, at most two buttons at the right. Then `.ds-main` with `.ds-cols`: a wide column and at the right a narrow one `--size-side` (320px) with the `.ds-sidebar`; `--wide` is 7 to 5, `--even` two halves. A chapter page puts its `.ds-player` across the whole column first. Tabs sit in a `.ds-toolbar` at the top of the wide column with a switch at its right end, above the notices and the table.\n- Views. The specimen is the film's site. `home` is the landing page. `chapters` lists the six: tabs and a subtitles switch, two notices, the table with badges and a tooltip, the pagination, and at the right a sidebar, two progress lines and an empty state. `chapter` is one chapter: the player with its scrubber, notes as prose, links, an accordion, a panel of facts, two people as avatars and what plays next. `watch` asks for a screening: the form with its error and all four buttons, a panel of three switches and the open dialog.\n- Below 1100px the columns stack, the figures go two by two and the player drops the title of what is playing; below 800px the player is two rows (brand and controls, then the links, which scroll sideways), the hero loses its rail and stacks its foot, the spine moves to the left edge with each frame above its text, and the grid is one column; a wide table scrolls inside `.ds-table__wrap`. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps), `--space-2` 8px (label to text, between tabs), `--space-3` 12px (between buttons, table cells), `--space-4` 16px (panel padding, grid gap), `--space-5` 22px (cell padding, gaps in rows), `--space-6` 32px (page gutter, stack gap, spine to frame), `--space-7` 52px (section head to content, columns, between chapters), `--space-8` 76px (tight sections, the band), `--space-9` 120px (sections). `--space-track` 1px is the tracking of labels.\n- Other sizes: `--size-mark` 30px, `--size-control` 46px, `--size-dialog` 500px, `--size-node` 64px (a node of the spine and the play ring).\n- On a phone (800px and below) the player has two rows: the `.ds-brand` and its controls above, `.ds-nav__links` below on a hairline, one row that scrolls sideways without a scrollbar; `.ds-nav__now` is not shown from 1100px down. The `.ds-menu` stays in the player and opens upwards. At 520px and below the chapters table lets its cells and titles wrap.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of five grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. A scene (a picture, and the bars of a frame around it) stands on the bar: `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer stands on `--fill-bar-alt` and carries `--color-bar-alt-text`. The inverted block (`--fill-inverse`, class `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a picture `--color-bar` is the darkness and every solid shape (a tower, a roof, a column, a chair) is a silhouette in it; `--color-accent` is the light (lit windows, the underside of a roof, the end of a tunnel); `--color-accent-alt` is the second light (one far lamp, a sign); `--color-fill-1` to `--color-fill-4` are the tones between (far blocks, walls, hills, a floor); `--color-bar-text` is the hottest point of a light. The grain of a picture comes from `--fill-bar`, which shows wherever the sky or a wall is left open.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; with a pale bar colour the pictures turn into prints.\n- `--color-fill-1` to `--color-fill-4` are also the grounds of grid cells and carry `--color-text` and `--color-heading`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` and `.ds-button--secondary`. On a picture or a frame only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, list numbers, panel and sidebar titles and h3 in prose.\n- The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token, 2px). Years, timecodes, counts and plate numbers are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour is text, outline and a small dot on a transparent ground. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders are hairlines: `--border-width` in `--color-border` between rows and around panels and cells, `--color-border-strong` above the list, a table and each figure and under the page header, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, sidebar, tabs, pagination), the progress line and the notice edge.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the menu and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for stills and grid cells. A still that fills a frame has no radius. Shapes inside a drawing use percentages and `clip-path`, never a radius token.\n- Shadows: `--shadow-panel` on panels and grid cells, `--shadow-control` on buttons and the brand tile, `--shadow-control-hover` on hovered buttons and cells, `--shadow-dialog` on the dialog and an open menu. `--backdrop-blur` blurs what lies behind the dialog's veil.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights are a light token mixed with `transparent` at 10 to 90%; hairlines on a picture are `--color-bar-text` at 22 to 60%; the shade under the reel's title is `--color-bar` at 66 to 70%; the hovered list row is washed with `--color-accent` at 12%; the display size steps down as `--text-display` times 0.7, 0.46 and 0.3 at 1100px, 800px and 520px, with `--display-tracking` scaled by the same factors, and `--text-h1` times 0.6 and 0.46; the page title is `--text-h1` times 1.3. Opacity 0.7 to 0.86 dims secondary text on pictures and far shapes.\n- Here: graphite page, near-black pictures, silver text. The light `--color-accent` is silver, so buildings are lit without colour; the one warm tone, `--color-accent-alt` and `--color-heading-alt`, is the lamp on the mast, the sign, the small labels, the focus ring and the hovered button. The fills are three greys and one warm dark. The primary button is brushed silver with dark text; the inverted block is a sheet of silver.\n- Three families. `--font-heading` and `--font-ui` are one light condensed grotesque (Barlow Condensed, Avenir Next Condensed, Roboto Condensed, Arial Narrow; the references used commercial condensed faces): titles at `--weight-heading` 300 and `--weight-display` 200, always in capitals, labels at `--weight-ui` 500. `--font-body` is IBM Plex Sans at `--text-base` 15px and `--line-body` 1.55. `--font-mono` (IBM Plex Mono, Menlo) sets figures.\n- `--text-display` 208px with `--line-display` 0.86 and `--display-tracking` -1px (the hero title); `--text-h1` 88px (list titles, figures, the reel's title, the band, the footer line; the page title is 1.3 times that); `--text-h2` 46px (section and cell titles, the next project); `--text-h3` 24px (table titles, dialog title); `--text-large` 19px (leads).\n- Surface: hairlines of 1px and marks of 2px; corners of 2px on controls and panels and 3px on pictures, pills for badges; buttons and badges are brushed metal (a vertical gradient with a light upper edge), panels sink a little towards the bottom; the page carries fine vertical brush lines and `--fill-bar` a denser brush with one slanted sheen; a slow eased `--transition`; a dashed focus ring; no blur. Links in running text are underlined; navigation and titles are not.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column, `--size-page` wide.\n- `.ds-label`: the small tracked line. `--muted`, `--accent` (in `--color-heading-alt`), `--mono` for figures.\n- `.ds-brand`: the site's mark and name, in the player and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name, set as a label. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--arrow` is a label led by a hairline that grows on hover. `.ds-linkrow` lays links in a row.\n- `.ds-button`: a box with a tracked label. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (scenes), `--inverse` (the inverted block), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-badge`: small tracked label on `--fill-accent`. `--quiet` outlined. Status variants: `--success`, `--warning`, `--danger`, each an outline with a dot. `.ds-badgerow` for several.\n- `.ds-notice`: a ruled message with a strong left edge; `--error` in the danger colours. `.ds-notice__title` is the tracked lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` labels; `is-current` is underlined with `--color-accent`, `is-disabled` is grey. Page numbers are written with two digits.\n- `.ds-breadcrumb`: a label trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block of `--color-overlay` centring `.ds-dialog__box`, a panel with a strong outline and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a drawn cross `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a hairline box with a short accent rule (`.ds-empty__icon`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input`, `.ds-switch__track` with its knob, `.ds-switch__label` with an optional `small` line. On is `is-on` or `:checked`: outline and knob in `--color-accent`. In a `.ds-toolbar` it is one line with a label.\n- `.ds-tooltip`: a dotted-underlined trigger holding `.ds-tooltip__tip`, a small inverted box shown on hover, focus or `is-open`; `--end` aligns it to the right edge.\n- `.ds-avatar`: a person drawn as a backlit head and shoulders from the scene colours. `--2` is lit from the left with `--color-accent-alt`, `--3` from above with `--color-bar-text`; `--large` doubles it. `.ds-person` sets one beside `.ds-person__name` and `.ds-person__role`; `.ds-people` stacks them.\n- `.ds-progress`: `.ds-progress__head` (a label and a `.ds-progress__value` in mono) over `.ds-progress__bar`, a `<progress>` drawn as a line of `--border-width-strong` with the value in `--color-accent`. The bar alone, with `.ds-nav__scrub`, is the scrubber on the player's upper edge.\n- `.ds-accordion`: ruled `<details>`: `.ds-accordion__item` with a `.ds-accordion__head` label that ends in a plus (a cross when open) and a `.ds-accordion__body`.\n- `.ds-scene`: the picture. A positioned box on `--fill-bar` in `--color-bar-text` whose first children are three empty layers, `.ds-scene__sky`, `.ds-scene__far` and `.ds-scene__near`, and where text lies on it a fourth, `.ds-scene__shade` (a dark head and foot). The variant is the picture: `--aurora` (two arcs of northern lights over the plain, a hut with a lit window beside its mast; it holds at any shape and is the hero), `--mast` (a radio mast in ice fog, its lamp with a halo, four stays), `--hut` (the hut's window from outside, with a curtain, a pot, snow, icicles and its light on the drift), `--ice` (the low sun on the sea ice, a line of stakes with two flags). `--frame` makes a scene a picture of 16 to 9 with a hairline, `--radius-page` and `--shadow-panel`; `.ds-scene__play` is a ring with a triangle in its middle.\n- `.ds-nav`: the player at the foot of the window. `.ds-nav__scrub` on a `.ds-progress__bar`, then `.ds-nav__inner` with the brand, `.ds-nav__links` of `.ds-nav__link` (`is-current` fully bright on an accent mark) and `.ds-nav__player`: `.ds-nav__play`, `.ds-nav__now` (two labels) and the menu. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-menu`: a `<details>` in the player: `.ds-menu__toggle` (three short lines and the word) and `.ds-menu__list` of `.ds-menu__item`, each with a time in a `span`; the sheet opens upwards. Closed until clicked.\n- `.ds-hero`: the scene of the home view: `.ds-hero__head` (a line of labels on a hairline), `.ds-hero__title` of two `span` lines, `.ds-hero__rail` (an ordered list of `.ds-hero__tick` links, the current one with a long accent mark) and `.ds-hero__foot` with `.ds-hero__lead` and `.ds-hero__actions`. One per site.\n- `.ds-section`: a block of the page; `--tight`, `--alt`. `.ds-section__head` is centred: a `.ds-section__kicker`, the `.ds-section__title` and an optional `.ds-section__text`.\n- `.ds-list`: the spine, an ordered list on one vertical line. Each `.ds-list__item` has a `.ds-list__node` (the number in a circle on the line), a `.ds-list__picture` (a framed scene, a link) and `.ds-list__copy` with `.ds-list__meta` (a status badge and a time), the `.ds-list__title`, `.ds-list__text` and an arrow link; even items put the picture at the right. `.ds-list__item--short` is a chapter not yet out: a small node and one line of title and date, no picture. A hovered item (`is-hover`) fills its node with the accent.\n- `.ds-stat`: the row of four figures under a strong rule; each `.ds-stat__item` centres a `.ds-stat__figure` over a `.ds-stat__label`, parted by vertical hairlines.\n- `.ds-carousel`: voices from the film, one to a slide: `.ds-carousel__track` of `.ds-carousel__slide` (a `.ds-carousel__quote` in the reading face and a `.ds-person`), then `.ds-carousel__nav` with two round `.ds-carousel__arrow` either side of `.ds-carousel__dots` of `.ds-carousel__dot`.\n- `.ds-grid`: four low, wide cells two by two, one on each fill, each lit from a different corner; a `.ds-grid__cell` is a link with a `.ds-grid__number`, `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__more`, an arrow at the right.\n- `.ds-band`: the inverted block, centred: `.ds-band__inner` with a mono label, `.ds-band__title` and one `--inverse` button.\n- `.ds-top`: the first line of an inner page: breadcrumb and page number under a strong rule.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__main` with the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` at the right.\n- `.ds-main`: the body of an inner page. `.ds-cols`: wide and narrow column; `--wide`, `--even`. `.ds-stack` stacks blocks one step apart; `--tight` closer.\n- `.ds-player`: a chapter as one framed scene across the column, with `.ds-player__bar` in its dark foot: a `.ds-progress` as the scrubber and a label.\n- `.ds-sidebar`: `.ds-sidebar__title` label and a `.ds-sidebar__list`, a rounded box of `.ds-sidebar__item` labels with a `.ds-sidebar__count`; the current row is tinted and marked at its left.\n- `.ds-toolbar`: the line above a table: `.ds-tabs` at the left, one `.ds-switch` at the right.\n- `.ds-tabs`: a row of small boxes; the current `.ds-tabs__tab` (`is-current`) is filled and stands on an accent mark.\n- `.ds-table`: a sheet in a rounded box: a label head on `--color-surface-alt` under a strong rule, faint lines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns figures in mono; `.ds-table__title` is the row's link in the heading face. Wrap it in `.ds-table__wrap`, which draws the box; `.ds-table__foot` holds a count and the pagination.\n- `.ds-panel`: a rounded box: `.ds-panel__head` with a label `.ds-panel__title` and an optional badge, and `.ds-panel__body`; `.ds-panel__text` is a paragraph. `.ds-facts` is a `dl` of label and value pairs inside it.\n- `.ds-queue`: what plays next: `.ds-queue__item` links, each a small framed scene beside `.ds-queue__title` and a mono label.\n- `.ds-footer`: the closing strip on `--fill-bar-alt`, centred: `.ds-footer__inner` with the brand, `.ds-footer__about` and a `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal`. It leaves room for the player below it.\n\n## Never\n\n- `font-size >= 12px`: labels are the smallest text.\n- `font-size <= 208px`: the hero title is the largest.\n- `font-weight <= 600`: titles are light; only `strong` is heavier.\n- `font-families <= 3`: one condensed face for titles and labels, one sans-serif for reading, one monospace for figures.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `border-radius <= 0px`: every box is square; only pills and circles are round.\n- `box-shadow-blur <= 0px`: a shadow is a hard offset block, never soft.\n- `text-shadow = none`: type is flat, also on pictures.\n- `border-width <= 4px`: rules are hairlines; 4px is the heavy bar.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; scene; inverted block; player or footer strip) and take the text token and the buttons of that ground; never put a primary button on a scene or `--color-bar-text` on a fill. A new picture is a new variant of `.ds-scene` built the way the existing ones are: the bar colour for darkness and every solid shape, the accent for the one light, the alternate accent for a small second light, the fills for the ground between, positions and sizes in percentages, gradients with hard stops and `clip-path`, and the sky left open so the grain of `--fill-bar` shows; do not load an image and do not write a colour. Where text lies on a picture, add `.ds-scene__shade`. If the installing project has film or photographs, they replace the three layers of a scene and everything around them (the shade, the play ring, the scrubber, the spine) stays. Keep type on the `--text-*` tokens, the largest sizes stepped down with the same factors as the specimen, labels tracked by `--space-track`, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1240px;\n  --size-nav: 68px;\n  --size-mark: 30px;\n  --size-control: 46px;\n  --size-dialog: 500px;\n  --size-scene: 800px;\n  --size-side: 320px;\n  --size-node: 64px;\n  --space-track: 1px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 22px;\n  --space-6: 32px;\n  --space-7: 52px;\n  --space-8: 76px;\n  --space-9: 120px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\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  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-6);\n}\n\n/* label: the small tracked line of the era. Dates, numbers, credits,\n   coordinates and every caption are set in it. */\n.ds-label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-label--muted {\n  color: var(--color-text-muted);\n}\n.ds-label--accent {\n  color: var(--color-heading-alt);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 64ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\n}\n.ds-linkrow {\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: flat labels in a box. The filled one is the single bright\n   object of a screen. */\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: var(--space-2) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\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  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\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  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n  right: 0;\n  left: auto;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* avatar: a backlit head and shoulders, drawn from the scene colours.\n   Each dark shape lies on a lit copy of itself, moved a little towards\n   the light, which leaves a rim. */\n.ds-avatar {\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  overflow: hidden;\n  border-radius: var(--radius-pill);\n  background:\n    radial-gradient(ellipse 15% 19% at 50% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 19% at 52% 40%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 50% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 50% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 52% 99%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 50% at 86% 14%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-bar));\n}\n.ds-avatar--2 {\n  background:\n    radial-gradient(ellipse 14% 19% at 47% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 14% 19% at 45% 40%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 47% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 46% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 44% 99%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 60% at 8% 20%, color-mix(in srgb, var(--color-accent-alt) 70%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-2), var(--color-bar));\n}\n.ds-avatar--3 {\n  background:\n    radial-gradient(ellipse 15% 20% at 54% 43%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 20% at 54% 41%, color-mix(in srgb, var(--color-bar-text) 80%, var(--color-accent)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 54% 62%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 36% 28% at 54% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 36% 28% at 54% 98%, color-mix(in srgb, var(--color-bar-text) 80%, var(--color-accent)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 50% 46% at 54% 0%, color-mix(in srgb, var(--color-bar-text) 50%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-3), var(--color-bar));\n}\n.ds-avatar--large {\n  width: calc(var(--size-control) * 2);\n  height: calc(var(--size-control) * 2);\n}\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-person__name {\n  display: block;\n  color: var(--color-heading);\n}\n.ds-person__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n\n/* progress: a hairline with the light running along it */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-progress__value {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--border-width-strong);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0;\n  background: color-mix(in srgb, currentColor 24%, transparent);\n  color: var(--color-accent);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: transparent;\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n\n/* accordion */\n.ds-accordion {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after {\n  rotate: 45deg;\n}\n.ds-accordion__body {\n  max-width: 60ch;\n  margin: 0;\n  padding: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n\n/* scene: a picture drawn from tokens. The ground is the bar fill with its\n   grain; the accent is the light, the alternate accent the second, small\n   light; every solid shape is a silhouette in the bar colour and the\n   fills are the tones between (the plain, haze, snow). Text on a scene is\n   the bar text colour. Three layers lie back to front, then a shade. */\n.ds-scene {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  overflow: hidden;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-scene__sky,\n.ds-scene__far,\n.ds-scene__near,\n.ds-scene__shade {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n}\n/* shade: the dark head and foot that carry text */\n.ds-scene__shade {\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-bar) 74%, transparent) 16%, transparent 36%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 70%, transparent) 0, transparent 34%);\n}\n/* frame: a scene as a picture of fixed shape, in a hairline */\n.ds-scene--frame {\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n/* play: a ring with a triangle, in the middle of a frame */\n.ds-scene__play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-node);\n  height: var(--size-node);\n  border: var(--border-width) var(--border-style) var(--color-bar-text);\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--color-bar) 50%, transparent);\n  transform: translate(-50%, -50%);\n  transition: var(--transition);\n}\n.ds-scene__play::before {\n  content: \"\";\n  width: var(--space-4);\n  height: var(--space-4);\n  margin-left: var(--space-1);\n  background: var(--color-bar-text);\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n}\n/* aurora: a station on the plain under the northern lights. Two arcs of\n   light with their rays, the far edge of the ice, the plain, and a hut\n   with one lit window beside its mast. */\n.ds-scene--aurora .ds-scene__sky {\n  background:\n    repeating-linear-gradient(93deg, transparent 0 0.7%, color-mix(in srgb, var(--color-bar) 40%, transparent) 0.7% 1.2%, transparent 1.2% 2.3%, color-mix(in srgb, var(--color-bar) 24%, transparent) 2.3% 2.6%),\n    radial-gradient(ellipse 74% 78% at 34% 100%, transparent 56%, color-mix(in srgb, var(--color-accent) 80%, transparent) 64%, color-mix(in srgb, var(--color-accent) 30%, transparent) 76%, transparent 94%),\n    radial-gradient(ellipse 104% 100% at 72% 100%, transparent 60%, color-mix(in srgb, var(--color-accent-alt) 44%, transparent) 67%, color-mix(in srgb, var(--color-accent) 16%, transparent) 78%, transparent 92%);\n}\n.ds-scene--aurora .ds-scene__far {\n  background:\n    radial-gradient(ellipse 46% 12% at 40% 64%, color-mix(in srgb, var(--color-accent) 46%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 60%, color-mix(in srgb, var(--color-fill-2) 84%, var(--color-bar)) 60%, color-mix(in srgb, var(--color-fill-1) 50%, var(--color-bar)) 82%, var(--color-bar) 100%);\n  clip-path: polygon(0% 64%, 10% 62.4%, 22% 63.6%, 34% 61.6%, 47% 63%, 60% 61.8%, 74% 63.4%, 88% 61.4%, 100% 63%, 100% 100%, 0% 100%);\n}\n.ds-scene--aurora .ds-scene__far::after {\n  content: \"\";\n  position: absolute;\n  top: 70%;\n  left: 60%;\n  width: 22%;\n  height: 9%;\n  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--color-accent-alt) 50%, transparent), transparent 100%);\n}\n.ds-scene--aurora .ds-scene__near {\n  inset: auto auto 27% 58%;\n  width: 20%;\n  aspect-ratio: 2 / 1;\n  background:\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt) 60%, var(--color-bar-text)), var(--color-accent-alt)) 68.9% 81% / 10% 16% no-repeat,\n    var(--color-bar);\n  clip-path: polygon(8% 100%, 8% 0%, 9.2% 0%, 9.2% 3%, 17% 3%, 17% 9%, 15.6% 9%, 15.6% 5.4%, 9.2% 5.4%, 9.2% 100%, 34% 100%, 34% 58%, 30% 58%, 60% 34%, 72% 43.6%, 72% 30%, 77% 30%, 77% 47.6%, 90% 58%, 86% 58%, 86% 100%);\n}\n/* mast: a radio mast in ice fog. The lamp at its top is the light, with\n   a halo round it, and four stays run down to the snow. */\n.ds-scene--mast .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 0.9% 1.6% at 50% 9%, var(--color-bar-text) 0 40%, var(--color-accent) 80%, transparent 100%),\n    radial-gradient(ellipse 30% 53% at 50% 9%, transparent 76%, color-mix(in srgb, var(--color-accent) 34%, transparent) 84%, transparent 93%),\n    radial-gradient(ellipse 24% 43% at 50% 9%, color-mix(in srgb, var(--color-accent) 66%, transparent), transparent 100%),\n    linear-gradient(to top right, transparent calc(50% - var(--border-width)), color-mix(in srgb, var(--color-bar-text) 44%, transparent) 50%, transparent calc(50% + var(--border-width))) 28.6% 35.3% / 30% 66% no-repeat,\n    linear-gradient(to top left, transparent calc(50% - var(--border-width)), color-mix(in srgb, var(--color-bar-text) 44%, transparent) 50%, transparent calc(50% + var(--border-width))) 71.4% 35.3% / 30% 66% no-repeat,\n    linear-gradient(to top right, transparent calc(50% - var(--border-width)), color-mix(in srgb, var(--color-bar-text) 30%, transparent) 50%, transparent calc(50% + var(--border-width))) 40.5% 63.3% / 16% 40% no-repeat,\n    linear-gradient(to top left, transparent calc(50% - var(--border-width)), color-mix(in srgb, var(--color-bar-text) 30%, transparent) 50%, transparent calc(50% + var(--border-width))) 59.5% 63.3% / 16% 40% no-repeat;\n}\n.ds-scene--mast .ds-scene__far {\n  background:\n    radial-gradient(ellipse 40% 9% at 50% 80%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 76%, color-mix(in srgb, var(--color-fill-2) 84%, var(--color-bar)) 76%, color-mix(in srgb, var(--color-fill-1) 40%, var(--color-bar)) 100%);\n  clip-path: polygon(0% 79%, 14% 78%, 30% 78.6%, 52% 77.6%, 70% 78.4%, 86% 77.6%, 100% 78.6%, 100% 100%, 0% 100%);\n}\n.ds-scene--mast .ds-scene__near {\n  background:\n    repeating-linear-gradient(64deg, var(--color-bar) 0 0.36%, transparent 0.36% 1.3%),\n    repeating-linear-gradient(-64deg, var(--color-bar) 0 0.36%, transparent 0.36% 1.3%),\n    linear-gradient(90deg, transparent 0 49.82%, var(--color-bar) 49.82% 50.18%, transparent 50.18%);\n  clip-path: polygon(49.5% 9.6%, 50.5% 9.6%, 52.8% 78.6%, 47.2% 78.6%);\n}\n/* hut: the wall of the hut with its one window. The window is the light;\n   a curtain, a pot on the sill, snow on the ledge and the eave, icicles,\n   and the light lying on the drift below. */\n.ds-scene--hut .ds-scene__sky {\n  background:\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 56%, var(--color-bar-text)), var(--color-accent) 64%, color-mix(in srgb, var(--color-accent) 70%, var(--color-accent-alt))) 50% 36.4% / 40% 56% no-repeat,\n    radial-gradient(ellipse 54% 76% at 50% 44%, color-mix(in srgb, var(--color-accent) 36%, transparent), transparent 100%),\n    repeating-linear-gradient(0deg, transparent 0 8.5%, color-mix(in srgb, var(--color-bar-text) 10%, transparent) 8.5% 9%);\n}\n.ds-scene--hut .ds-scene__far {\n  background:\n    radial-gradient(ellipse 4.4% 7% at 61% 67.4%, var(--color-bar) 0 96%, transparent 100%),\n    linear-gradient(var(--color-bar), var(--color-bar)) 61.4% 58% / 0.6% 8% no-repeat,\n    linear-gradient(90deg, color-mix(in srgb, var(--color-bar) 86%, transparent) 0 34%, color-mix(in srgb, var(--color-bar) 30%, transparent) 37%, transparent 40%),\n    linear-gradient(90deg, transparent 0 49.3%, var(--color-bar) 49.3% 50.7%, transparent 50.7%),\n    linear-gradient(to bottom, transparent 0 42.6%, var(--color-bar) 42.6% 44.6%, transparent 44.6%);\n  clip-path: inset(16% 30% 28% 30%);\n}\n.ds-scene--hut .ds-scene__near {\n  background:\n    radial-gradient(ellipse 24% 3.4% at 50% 72.6%, var(--color-fill-1) 0 96%, transparent 100%),\n    linear-gradient(var(--color-bar), var(--color-bar)) 50% 76.6% / 46% 2.6% no-repeat,\n    conic-gradient(from -7deg at 50% 100%, var(--color-fill-2) 0 14deg, transparent 14deg) 0 5.4% / 2.6% 7% repeat-x,\n    conic-gradient(from -5deg at 50% 100%, var(--color-fill-1) 0 10deg, transparent 10deg) 1.3% 4.8% / 4.2% 11% repeat-x,\n    linear-gradient(to bottom, var(--color-fill-1) 0 5%, transparent 5%),\n    radial-gradient(ellipse 60% 15% at 28% 104%, var(--color-fill-2) 0 97%, transparent 100%),\n    radial-gradient(ellipse 54% 12% at 84% 104%, var(--color-fill-1) 0 97%, transparent 100%);\n}\n.ds-scene--hut .ds-scene__near::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 50%, transparent) 78%, color-mix(in srgb, var(--color-accent) 16%, transparent) 100%);\n  clip-path: polygon(33% 78%, 67% 78%, 82% 100%, 18% 100%);\n}\n/* ice: the sea ice at noon in midwinter. The sun is the light and does\n   not clear the horizon; a path of it lies on the ice, two bars of cloud\n   above, and a line of stakes with two flags leads out to it. */\n.ds-scene--ice .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 5% 8.9% at 50% 57%, var(--color-bar-text) 0 40%, var(--color-accent) 84%, transparent 100%),\n    linear-gradient(to bottom, transparent 0 34%, color-mix(in srgb, var(--color-bar) 60%, transparent) 36% 38%, transparent 40% 45%, color-mix(in srgb, var(--color-bar) 50%, transparent) 46.4% 47.6%, transparent 49%),\n    radial-gradient(ellipse 64% 60% at 50% 58%, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent 100%);\n}\n.ds-scene--ice .ds-scene__far {\n  background:\n    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-bar) 18%, transparent) 0 0.5%, transparent 0.5% 3.2%),\n    radial-gradient(ellipse 7% 46% at 50% 58%, color-mix(in srgb, var(--color-accent) 90%, transparent), transparent 100%),\n    radial-gradient(ellipse 40% 30% at 50% 58%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 56%, color-mix(in srgb, var(--color-fill-2) 84%, var(--color-bar)) 56%, color-mix(in srgb, var(--color-fill-1) 40%, var(--color-bar)) 100%);\n  clip-path: polygon(0% 58%, 8% 57%, 12% 58%, 30% 58%, 33% 56.2%, 37% 58%, 62% 58%, 66% 56.8%, 69% 58%, 100% 58%, 100% 100%, 0% 100%);\n}\n.ds-scene--ice .ds-scene__near {\n  background:\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) 17.5% 55.7% / 3% 3% no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) 29.1% 57.1% / 1.8% 1.9% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 16.2% 93.1% / 1% 42% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 28.2% 73.7% / 0.6% 24% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 36.1% 65.5% / 0.4% 13% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 41.1% 62.1% / 0.3% 7.6% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 44.6% 60.3% / 0.2% 4.4% no-repeat;\n}\n\n/* nav: the player. A bar fixed to the foot of the window: the brand, the\n   views, and what is playing, with the scrubber along its upper edge. */\n.ds-nav {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__scrub {\n  position: absolute;\n  top: calc(var(--border-width-strong) * -1);\n  left: 0;\n}\n.ds-nav__inner {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-5);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-6);\n}\n.ds-nav__inner > .ds-brand {\n  justify-self: start;\n}\n.ds-nav__links {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  height: var(--size-nav);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n  opacity: 0.74;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\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(#chapters:target) .ds-nav__link[href=\"#chapters\"],\n.ds-page:has(#chapter:target) .ds-nav__link[href=\"#chapter\"],\n.ds-page:has(#watch:target) .ds-nav__link[href=\"#watch\"] {\n  opacity: 1;\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n.ds-nav__player {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-nav__play {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-control) - var(--space-3));\n  height: calc(var(--size-control) - var(--space-3));\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: 50%;\n  color: inherit;\n}\n.ds-nav__play::before {\n  content: \"\";\n  width: var(--space-3);\n  height: var(--space-3);\n  margin-left: var(--space-1);\n  background: currentColor;\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n}\n.ds-nav__now {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n.ds-nav__now .ds-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* menu: the chapters, a sheet that opens upwards from the player */\n.ds-menu {\n  position: relative;\n  flex: none;\n}\n.ds-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  height: var(--size-nav);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle::before {\n  content: \"\";\n  width: var(--space-4);\n  height: calc(var(--space-2) + var(--border-width) * 3);\n  border-top: var(--border-width) var(--border-style) currentColor;\n  border-bottom: var(--border-width) var(--border-style) currentColor;\n  background: linear-gradient(currentColor, currentColor) 0 50% / 100% var(--border-width) no-repeat;\n}\n.ds-menu__list {\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  z-index: 8;\n  min-width: calc(var(--size-control) * 6);\n  margin: 0;\n  padding: var(--space-2) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n}\n.ds-menu__item {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-menu__item span {\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n\n/* hero: the scene of the home view. There is no bar above it: a line of\n   labels, the title high in the sky, the six chapters as a rail at the\n   right edge, and lead and actions in the dark foot. */\n.ds-hero {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--size-scene);\n  padding: 0 var(--space-6) var(--space-6);\n}\n.ds-hero__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-5);\n  min-height: var(--size-control);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 24%, transparent);\n}\n.ds-hero__title {\n  margin: var(--space-7) 0 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__title span {\n  display: block;\n}\n.ds-hero__rail {\n  position: absolute;\n  top: 50%;\n  right: var(--space-6);\n  display: grid;\n  gap: var(--space-3);\n  justify-items: end;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transform: translateY(-50%);\n}\n.ds-hero__tick {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  text-decoration: none;\n  opacity: 0.6;\n}\n.ds-hero__tick::after {\n  content: \"\";\n  width: var(--space-4);\n  height: var(--border-width);\n  background: currentColor;\n}\n.ds-hero__tick.is-current {\n  opacity: 1;\n}\n.ds-hero__tick.is-current::after {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-hero__foot {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  align-items: end;\n  gap: var(--space-6);\n  margin-top: auto;\n  padding-top: var(--space-7);\n}\n.ds-hero__lead {\n  max-width: 42ch;\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-3) var(--space-4);\n}\n\n/* section: every head is centred on the spine of the page */\n.ds-section {\n  padding: var(--space-9) 0;\n}\n.ds-section--tight {\n  padding: var(--space-8) 0;\n}\n.ds-section--alt {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-alt);\n}\n.ds-section__head {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: center;\n  margin-bottom: var(--space-7);\n  text-align: center;\n}\n.ds-section__kicker {\n  color: var(--color-heading-alt);\n}\n.ds-section__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-section__text {\n  max-width: 52ch;\n  margin: 0;\n  color: var(--color-text);\n}\n\n/* list: the spine. The chapters hang from one line down the middle of\n   the page, each from its numbered node: a frame on one side, the text\n   on the other, turn and turn about. Chapters not yet out are short\n   rows without a picture. */\n.ds-list {\n  position: relative;\n  display: grid;\n  gap: var(--space-7);\n  margin: 0;\n  padding: var(--space-5) 0;\n  list-style: none;\n}\n.ds-list::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc(50% - var(--border-width) / 2);\n  width: var(--border-width);\n  background: var(--color-border-strong);\n}\n.ds-list__item {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-node) minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-6);\n}\n.ds-list__node {\n  grid-column: 2;\n  grid-row: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-node);\n  height: var(--size-node);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  background: var(--color-page);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  transition: var(--transition);\n}\n.ds-list__item:hover .ds-list__node,\n.ds-list__item.is-hover .ds-list__node {\n  border-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-list__picture {\n  grid-column: 1;\n  grid-row: 1;\n}\n.ds-list__copy {\n  grid-column: 3;\n  grid-row: 1;\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  min-width: 0;\n}\n.ds-list__item:nth-child(even) .ds-list__picture {\n  grid-column: 3;\n}\n.ds-list__item:nth-child(even) .ds-list__copy {\n  grid-column: 1;\n  justify-items: end;\n  text-align: right;\n}\n.ds-list__meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n  margin: 0;\n  color: var(--color-text-muted);\n}\n.ds-list__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-list__text {\n  max-width: 44ch;\n  margin: 0;\n}\n.ds-list__item--short:nth-child(even) .ds-list__copy {\n  justify-content: end;\n}\n.ds-list__item--short .ds-list__node {\n  width: calc(var(--size-node) * 0.6);\n  height: calc(var(--size-node) * 0.6);\n  justify-self: center;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__item--short .ds-list__title {\n  color: var(--color-text);\n  font-size: var(--text-h3);\n}\n.ds-list__item--short .ds-list__copy {\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: start;\n  gap: var(--space-4);\n}\n\n/* stats: four figures centred in four ruled cells */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__item {\n  display: grid;\n  gap: var(--space-2);\n  justify-items: center;\n  padding: var(--space-6) var(--space-3);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\n}\n.ds-stat__item:first-child {\n  border-left: 0;\n}\n.ds-stat__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* carousel: voices from the film, one to a slide, centred */\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  list-style: none;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  display: grid;\n  flex: 0 0 100%;\n  gap: var(--space-5);\n  justify-items: center;\n  min-width: 0;\n  text-align: center;\n  scroll-snap-align: start;\n}\n.ds-carousel__quote {\n  max-width: 30ch;\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-body);\n  font-size: calc(var(--text-large) * 1.7);\n  line-height: 1.25;\n}\n.ds-carousel__slide .ds-person {\n  text-align: left;\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  color: var(--color-text);\n}\n.ds-carousel__dots {\n  display: flex;\n  gap: var(--space-2);\n}\n.ds-carousel__dot {\n  width: var(--space-2);\n  height: var(--space-2);\n  border-radius: 50%;\n  background: var(--color-border);\n}\n.ds-carousel__dot.is-current {\n  background: var(--color-accent);\n  box-shadow: 0 0 0 var(--border-width) var(--color-border-strong);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  text-decoration: none;\n}\n.ds-carousel__arrow::before {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-ui) * 0.5);\n  height: calc(var(--text-ui) * 0.5);\n  border-left: calc(var(--space-2) / 4) solid currentColor;\n  border-bottom: calc(var(--space-2) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n}\n.ds-carousel__arrow + .ds-carousel__arrow::before {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-carousel__arrow.is-disabled {\n  border-color: var(--color-border);\n  color: var(--color-disabled-text);\n}\n\n/* grid: four ways to watch, two by two, each a low wide cell on a fill */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--space-2) var(--space-5);\n  height: 100%;\n  padding: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  background:\n    linear-gradient(120deg, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 40%),\n    var(--color-fill-1);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(2) .ds-grid__cell {\n  background:\n    linear-gradient(240deg, color-mix(in srgb, var(--color-accent-alt) 22%, transparent), transparent 40%),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background:\n    linear-gradient(60deg, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 40%),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background:\n    linear-gradient(300deg, color-mix(in srgb, var(--color-heading) 12%, transparent), transparent 40%),\n    var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  border-color: var(--color-border-strong);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__number {\n  grid-row: 1 / span 2;\n  color: var(--color-heading-alt);\n}\n.ds-grid__title {\n  display: block;\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  display: block;\n  grid-column: 2;\n  max-width: 40ch;\n  margin: 0;\n}\n.ds-grid__more {\n  grid-column: 3;\n  grid-row: 1 / span 2;\n  align-self: center;\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-large);\n}\n\n/* band: the inverted block, centred like everything on the spine */\n.ds-band {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-band__inner {\n  display: grid;\n  gap: var(--space-5);\n  justify-items: center;\n  padding-top: var(--space-8);\n  padding-bottom: var(--space-8);\n  text-align: center;\n}\n.ds-band__title {\n  max-width: 22ch;\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-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* inner pages: nothing stands above them. A line of breadcrumb and index\n   under a strong rule, then the title. */\n.ds-top {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: var(--space-6);\n  padding: var(--space-4) 0;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text-muted);\n}\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-7) 0 var(--space-6);\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: 54ch;\n  margin: var(--space-3) 0 0;\n  color: var(--color-text);\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  gap: var(--space-3);\n}\n.ds-main {\n  padding: 0 0 var(--space-9);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-side);\n  align-items: start;\n  gap: var(--space-7);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-cols--wide {\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-stack--tight {\n  gap: var(--space-4);\n}\n\n/* player: the chapter itself, one frame as wide as the column, with the\n   scrubber and the time in its dark foot */\n.ds-player {\n  position: relative;\n  margin-bottom: var(--space-7);\n}\n.ds-player__bar {\n  position: absolute;\n  right: var(--space-5);\n  bottom: var(--space-4);\n  left: var(--space-5);\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: var(--space-5);\n  color: var(--color-bar-text);\n}\n\n/* sidebar: a box of ruled label rows at the right */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-sidebar__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\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-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-sidebar__item:first-child {\n  border-top: 0;\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover,\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-alt);\n  box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n}\n\n/* toolbar: tabs at the left, one switch at the right */\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n}\n.ds-toolbar > .ds-switch {\n  padding: 0;\n  border-bottom: 0;\n}\n.ds-toolbar > .ds-switch .ds-switch__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n/* tabs: a row of boxes; the current one is filled like a node */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-2);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  list-style: none;\n  scrollbar-width: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  border-color: var(--color-border-strong);\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  border-color: var(--color-border-strong);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n\n/* table: the chapters as a sheet in a rounded box */\n.ds-table__wrap {\n  overflow-x: auto;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-align: left;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  vertical-align: middle;\n}\n.ds-table tbody tr:first-child td {\n  border-top: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n.ds-table td.ds-table__num {\n  font-size: var(--text-ui);\n}\n.ds-table__title {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  color: var(--color-text-muted);\n}\n\n/* panel */\n.ds-panel {\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__text {\n  margin: 0;\n}\n.ds-facts {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n}\n.ds-facts dt {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-facts dd {\n  margin: 0;\n  color: var(--color-heading);\n  text-align: right;\n}\n.ds-people {\n  display: grid;\n  gap: var(--space-4);\n}\n/* queue: what plays next, two small frames with their titles */\n.ds-queue {\n  display: grid;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-queue__item {\n  display: grid;\n  grid-template-columns: calc(var(--size-side) * 0.5) minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-4);\n  color: var(--color-text-muted);\n  text-decoration: none;\n}\n.ds-queue__title {\n  display: block;\n  margin-bottom: var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* footer: centred, and clear of the player */\n.ds-footer {\n  padding-bottom: var(--size-nav);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__inner {\n  display: grid;\n  gap: var(--space-5);\n  justify-items: center;\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-6);\n  text-align: center;\n}\n.ds-footer__about {\n  max-width: 48ch;\n  margin: 0;\n}\n.ds-footer__list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline;\n}\n.ds-footer__legal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-5);\n  padding-top: var(--space-4);\n  padding-bottom: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 26%, transparent);\n}\n\n/* narrower windows: the type steps down with the display size itself,\n   and its tracking with it */\n@media (max-width: 1100px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.7);\n    letter-spacing: calc(var(--display-tracking) * 0.7);\n  }\n  .ds-cols,\n  .ds-cols--wide {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item:nth-child(3) {\n    border-left: 0;\n  }\n  .ds-stat__item:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-nav__now {\n    display: none;\n  }\n}\n@media (max-width: 800px) {\n  .ds-wrap {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\n  }\n  .ds-nav__inner {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 0 var(--space-4);\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__inner > .ds-brand {\n    min-height: calc(var(--size-nav) - var(--space-4));\n  }\n  .ds-nav__links {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    gap: var(--space-5);\n    overflow-x: auto;\n    border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n    scrollbar-width: none;\n  }\n  .ds-nav__link,\n  .ds-menu__toggle {\n    height: calc(var(--size-nav) - var(--space-5));\n  }\n  .ds-footer {\n    padding-bottom: calc(var(--size-nav) * 2 - var(--space-6));\n  }\n  .ds-hero {\n    padding: 0 var(--space-4) var(--space-5);\n  }\n  .ds-hero__head > :nth-child(n + 3) {\n    display: none;\n  }\n  .ds-hero__title {\n    margin-top: var(--space-6);\n    font-size: calc(var(--text-display) * 0.46);\n    letter-spacing: calc(var(--display-tracking) * 0.46);\n  }\n  .ds-hero__rail {\n    display: none;\n  }\n  .ds-hero__foot,\n  .ds-cols--even,\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-scene--aurora .ds-scene__near {\n    bottom: 36.4%;\n    left: 50%;\n    width: 38%;\n  }\n  .ds-scene--aurora .ds-scene__far::after {\n    top: 60%;\n    left: 52%;\n    width: 40%;\n    height: 6%;\n  }\n  .ds-hero > .ds-scene__shade {\n    background:\n      linear-gradient(to top, var(--color-bar) 0 30%, color-mix(in srgb, var(--color-bar) 60%, transparent) 34%, transparent 40%),\n      linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 70%, transparent) 0, transparent 34%);\n  }\n  .ds-section,\n  .ds-section--tight {\n    padding: var(--space-7) 0;\n  }\n  .ds-section__head {\n    margin-bottom: var(--space-6);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-stat__figure,\n  .ds-band__title {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-list {\n    gap: var(--space-6);\n  }\n  .ds-list::before {\n    left: calc(var(--size-node) * 0.3);\n  }\n  .ds-list__item,\n  .ds-list__item:nth-child(even) {\n    grid-template-columns: calc(var(--size-node) * 0.6) minmax(0, 1fr);\n    align-items: start;\n    gap: var(--space-3) var(--space-4);\n  }\n  .ds-list__node {\n    grid-column: 1;\n    width: calc(var(--size-node) * 0.6);\n    height: calc(var(--size-node) * 0.6);\n    font-size: var(--text-small);\n  }\n  .ds-list__picture,\n  .ds-list__item:nth-child(even) .ds-list__picture {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  .ds-list__copy,\n  .ds-list__item:nth-child(even) .ds-list__copy {\n    grid-column: 2;\n    grid-row: 2;\n    justify-items: start;\n    text-align: left;\n  }\n  .ds-list__item--short .ds-list__copy,\n  .ds-list__item--short:nth-child(even) .ds-list__copy {\n    grid-row: 1;\n    justify-content: start;\n    grid-auto-flow: row;\n    gap: var(--space-2);\n  }\n  .ds-carousel__quote {\n    font-size: calc(var(--text-large) * 1.2);\n  }\n  .ds-band__inner {\n    padding-top: var(--space-7);\n    padding-bottom: var(--space-7);\n  }\n  .ds-page-header {\n    padding: var(--space-6) 0 var(--space-5);\n  }\n  .ds-main {\n    padding-bottom: var(--space-8);\n  }\n  .ds-player {\n    margin-bottom: var(--space-6);\n  }\n  .ds-player__bar {\n    right: var(--space-3);\n    bottom: var(--space-2);\n    left: var(--space-3);\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-player__bar > .ds-label {\n    display: none;\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.3);\n    letter-spacing: calc(var(--display-tracking) * 0.3);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text {\n    font-size: var(--text-base);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-stat__figure,\n  .ds-band__title {\n    font-size: calc(var(--text-h1) * 0.5);\n  }\n  .ds-list__title,\n  .ds-grid__title {\n    font-size: calc(var(--text-h2) * 0.7);\n  }\n  .ds-grid__cell {\n    padding: var(--space-4);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stat__item {\n    padding: var(--space-4) var(--space-2);\n  }\n  .ds-scene__play {\n    width: calc(var(--size-node) * 0.6);\n    height: calc(var(--size-node) * 0.6);\n  }\n  .ds-scene__play::before {\n    width: var(--space-3);\n    height: var(--space-3);\n  }\n}\n\n/* Phones: the table keeps the columns that matter, so its last one is in view. */\n@media (max-width: 520px) {\n  #chapters .ds-table th:nth-child(3),\n  #chapters .ds-table td:nth-child(3),\n  #chapters .ds-table th:nth-child(4),\n  #chapters .ds-table td:nth-child(4),\n  #chapters .ds-table th:nth-child(5),\n  #chapters .ds-table td:nth-child(5) {\n    display: none;\n  }\n  #chapters .ds-table th,\n  #chapters .ds-table td {\n    padding-right: var(--space-3);\n    padding-left: var(--space-3);\n  }\n  #chapters .ds-table td,\n  #chapters .ds-table .ds-table__title,\n  #chapters .ds-table .ds-tooltip {\n    white-space: normal;\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: cinematic documentary player specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <progress class=\"ds-progress__bar ds-nav__scrub\" value=\"58\" max=\"100\">58%</progress>\n  <div class=\"ds-nav__inner\">\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=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">The film</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#chapters\">Chapters</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#chapter\">Now playing</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#watch\">Watch</a></li>\n    </ul>\n    <div class=\"ds-nav__player\">\n      <a class=\"ds-nav__play\" href=\"#chapter\" aria-label=\"Play\"></a>\n      <span class=\"ds-nav__now\"><span class=\"ds-label\">01 The mast</span><span class=\"ds-label ds-label--mono\">12:14 / 21:05</span></span>\n      <details class=\"ds-menu\">\n        <summary class=\"ds-menu__toggle\">Chapters</summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#chapter\">01 The mast <span>21 min</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#chapter\">02 The hut <span>17 min</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#chapter\">03 The ice <span>Friday</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#chapters\">All six chapters</a></li>\n        </ul>\n      </details>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero ds-scene ds-scene--aurora\" data-component=\"hero\">\n    <span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span><span class=\"ds-scene__shade\" aria-hidden=\"true\"></span>\n    <p class=\"ds-hero__head ds-label\"><span>A film in six chapters</span><span class=\"ds-label--mono\">94 minutes</span><span class=\"ds-label--mono\">70.98 N 25.97 E</span></p>\n    <h1 class=\"ds-hero__title\"><span>Past the</span><span>last lamp</span></h1>\n    <ol class=\"ds-hero__rail\" aria-label=\"Chapters\">\n      <li><a class=\"ds-hero__tick is-current\" href=\"#chapter\">01</a></li>\n      <li><a class=\"ds-hero__tick\" href=\"#chapter\">02</a></li>\n      <li><a class=\"ds-hero__tick\" href=\"#chapters\">03</a></li>\n      <li><a class=\"ds-hero__tick\" href=\"#chapters\">04</a></li>\n      <li><a class=\"ds-hero__tick\" href=\"#chapters\">05</a></li>\n      <li><a class=\"ds-hero__tick\" href=\"#chapters\">06</a></li>\n    </ol>\n    <div class=\"ds-hero__foot\">\n      <p class=\"ds-hero__lead\">One winter at a weather station where the road, the power line and the daylight all stop. Told by the four people who keep it running.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--onscene\" href=\"#chapter\">Play chapter one</a>\n        <a class=\"ds-button ds-button--ghost\" href=\"#watch\">Ways to watch</a>\n        <span class=\"ds-badge\">Chapter 03 on Friday</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">The chapters</p>\n        <h2 class=\"ds-section__title\">Six parts, one winter</h2>\n        <p class=\"ds-section__text\">A new chapter every Friday until the sun is back. Each stands alone; together they run for ninety-four minutes.</p>\n      </div>\n      <ol class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item is-hover\">\n          <span class=\"ds-list__node\">01</span>\n          <a class=\"ds-list__picture ds-scene ds-scene--frame ds-scene--mast\" href=\"#chapter\" aria-label=\"Play The mast\"><span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span><span class=\"ds-scene__play\"></span></a>\n          <div class=\"ds-list__copy\">\n            <p class=\"ds-list__meta ds-label\"><span class=\"ds-badge ds-badge--success\">Out now</span><span class=\"ds-label--mono\">21 min</span></p>\n            <a class=\"ds-list__title\" href=\"#chapter\">The mast</a>\n            <p class=\"ds-list__text\">Sixty metres of steel and one lamp. Every third day somebody climbs it to knock the ice off.</p>\n            <a class=\"ds-link ds-link--arrow\" href=\"#chapter\">Play chapter</a>\n          </div>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__node\">02</span>\n          <a class=\"ds-list__picture ds-scene ds-scene--frame ds-scene--hut\" href=\"#chapter\" aria-label=\"Play The hut\"><span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span><span class=\"ds-scene__play\"></span></a>\n          <div class=\"ds-list__copy\">\n            <p class=\"ds-list__meta ds-label\"><span class=\"ds-badge ds-badge--success\">Out now</span><span class=\"ds-label--mono\">17 min</span></p>\n            <a class=\"ds-list__title\" href=\"#chapter\">The hut</a>\n            <p class=\"ds-list__text\">Four bunks, one stove, a window that is kept lit so the hut can be found.</p>\n            <a class=\"ds-link ds-link--arrow\" href=\"#chapter\">Play chapter</a>\n          </div>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__node\">03</span>\n          <a class=\"ds-list__picture ds-scene ds-scene--frame ds-scene--ice\" href=\"#chapters\" aria-label=\"The ice\"><span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span></a>\n          <div class=\"ds-list__copy\">\n            <p class=\"ds-list__meta ds-label\"><span class=\"ds-badge ds-badge--warning\">This Friday</span><span class=\"ds-label--mono\">14 min</span></p>\n            <a class=\"ds-list__title\" href=\"#chapters\">The ice</a>\n            <p class=\"ds-list__text\">A line of stakes runs two kilometres out to the instruments. At noon the sun almost rises.</p>\n            <a class=\"ds-link ds-link--arrow\" href=\"#watch\">Remind me</a>\n          </div>\n        </li>\n        <li class=\"ds-list__item ds-list__item--short\">\n          <span class=\"ds-list__node\">04</span>\n          <div class=\"ds-list__copy\"><a class=\"ds-list__title\" href=\"#chapters\">The supply flight</a><span class=\"ds-label ds-label--mono ds-label--muted\">12 December</span></div>\n        </li>\n        <li class=\"ds-list__item ds-list__item--short\">\n          <span class=\"ds-list__node\">05</span>\n          <div class=\"ds-list__copy\"><a class=\"ds-list__title\" href=\"#chapters\">The long night</a><span class=\"ds-label ds-label--mono ds-label--muted\">19 December</span></div>\n        </li>\n        <li class=\"ds-list__item ds-list__item--short\">\n          <span class=\"ds-list__node\">06</span>\n          <div class=\"ds-list__copy\"><a class=\"ds-list__title\" href=\"#chapters\">First light</a><span class=\"ds-label ds-label--mono ds-label--muted\">26 December</span></div>\n        </li>\n      </ol>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">6</p><p class=\"ds-label ds-stat__label\">Chapters</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">94</p><p class=\"ds-label ds-stat__label\">Minutes</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">58</p><p class=\"ds-label ds-stat__label\">Days without sun</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">-41</p><p class=\"ds-label ds-stat__label\">Coldest night, Celsius</p></div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-carousel\">\n        <ul class=\"ds-carousel__track\">\n          <li class=\"ds-carousel__slide\">\n            <p class=\"ds-carousel__quote\">&ldquo;You do not notice the dark. You notice the day the lamp on the mast is out.&rdquo;</p>\n            <div class=\"ds-person\"><span class=\"ds-avatar\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The technician</span><span class=\"ds-person__role\">Chapter 01</span></span></div>\n          </li>\n          <li class=\"ds-carousel__slide\">\n            <p class=\"ds-carousel__quote\">&ldquo;The window is not for us. It is for whoever is walking back.&rdquo;</p>\n            <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--2\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The cook</span><span class=\"ds-person__role\">Chapter 02</span></span></div>\n          </li>\n        </ul>\n        <div class=\"ds-carousel__nav\">\n          <a class=\"ds-carousel__arrow is-disabled\" href=\"#home\" aria-label=\"Previous voice\"></a>\n          <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n          <a class=\"ds-carousel__arrow\" href=\"#home\" aria-label=\"Next voice\"></a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--alt\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">Ways to watch</p>\n        <h2 class=\"ds-section__title\">Wherever it is dark enough</h2>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li><a class=\"ds-grid__cell\" href=\"#chapter\"><span class=\"ds-label ds-label--mono ds-grid__number\">A</span><span class=\"ds-grid__title\">Here</span><span class=\"ds-grid__text\">Every chapter on this site, free, from the Friday it comes out.</span><span class=\"ds-grid__more\" aria-hidden=\"true\">&gt;</span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#watch\"><span class=\"ds-label ds-label--mono ds-grid__number\">B</span><span class=\"ds-grid__title\">In a cinema</span><span class=\"ds-grid__text\">All six in one sitting, from January, with the sound it was mixed for.</span><span class=\"ds-grid__more\" aria-hidden=\"true\">&gt;</span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#watch\"><span class=\"ds-label ds-label--mono ds-grid__number\">C</span><span class=\"ds-grid__title\">At school</span><span class=\"ds-grid__text\">A classroom cut of forty minutes with notes for teachers.</span><span class=\"ds-grid__more\" aria-hidden=\"true\">&gt;</span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#watch\"><span class=\"ds-label ds-label--mono ds-grid__number\">D</span><span class=\"ds-grid__title\">Your own room</span><span class=\"ds-grid__text\">A hall, a library, a ship. Ask and we send the file and a poster.</span><span class=\"ds-grid__more\" aria-hidden=\"true\">&gt;</span></a></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-band__inner\">\n      <span class=\"ds-label ds-label--mono\">Friday, 20:00</span>\n      <h2 class=\"ds-band__title\">Chapter three: the ice</h2>\n      <a class=\"ds-button ds-button--inverse\" href=\"#watch\">Remind me on Friday</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"chapters\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">The film</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#chapters\">Chapters</a></li>\n        <li class=\"ds-breadcrumb__current\">All six</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">02 / 04</span>\n    </div>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Chapters</h1>\n        <p class=\"ds-page-header__text\">Six chapters, one each Friday. Two are out, one comes this week.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#chapter\">Carry on watching</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#chapters\">All <span class=\"ds-badge ds-badge--quiet\">06</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#chapters\">Out now</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#chapters\">Still to come</a></li>\n          </ul>\n          <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Subtitles</span></label>\n        </div>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Sound</span>The film is quiet for long stretches. That is the film, not your speakers.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Delayed</span>Chapter 04 moves from 5 to 12 December. The supply flight was late too.</p>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>No.</th><th>Chapter</th><th>Told by</th><th class=\"ds-table__num\">Minutes</th><th class=\"ds-table__num\">Watched</th><th>State</th></tr>\n            </thead>\n            <tbody>\n              <tr class=\"is-hover\"><td class=\"ds-label ds-label--mono\">01</td><td><a class=\"ds-table__title\" href=\"#chapter\">The mast</a></td><td>The technician</td><td class=\"ds-table__num\">21</td><td class=\"ds-table__num\">58%</td><td><span class=\"ds-badge\" data-component=\"badge\">Playing</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">02</td><td><a class=\"ds-table__title\" href=\"#chapter\">The hut</a></td><td>The cook</td><td class=\"ds-table__num\">17</td><td class=\"ds-table__num\">0%</td><td><span class=\"ds-badge ds-badge--success\">Out now</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">03</td><td><a class=\"ds-table__title\" href=\"#chapters\">The ice</a></td><td>The observer</td><td class=\"ds-table__num\">14</td><td class=\"ds-table__num\">0%</td><td><span class=\"ds-badge ds-badge--warning\">This Friday</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">04</td><td><a class=\"ds-table__title\" href=\"#chapters\">The supply flight</a></td><td>The pilot</td><td class=\"ds-table__num\">16</td><td class=\"ds-table__num\">0%</td><td><span class=\"ds-badge ds-badge--danger\">Delayed</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">05</td><td><a class=\"ds-table__title\" href=\"#chapters\">The long night</a></td><td>All four</td><td class=\"ds-table__num\">15</td><td class=\"ds-table__num\">0%</td><td><span class=\"ds-badge ds-badge--quiet\">19 December</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">06</td><td><a class=\"ds-table__title\" href=\"#chapters\">First light</a></td><td>The observer</td><td class=\"ds-table__num\">11</td><td class=\"ds-table__num\">0%</td><td><span class=\"ds-tooltip ds-tooltip--end ds-label ds-label--muted\" tabindex=\"0\">When the sun is back<span class=\"ds-tooltip__tip\">Planned for 26 December. If the sky is clouded on the day, it waits for the next clear noon.</span></span></td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span class=\"ds-label\">Chapters 1 to 6 of 6</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#chapters\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#chapters\">01</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#chapters\">02</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#chapters\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <p class=\"ds-label ds-sidebar__title\">Also here</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item is-current\" href=\"#chapters\">The chapters <span class=\"ds-sidebar__count\">06</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#chapters\">Extras <span class=\"ds-sidebar__count\">03</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#chapters\">Field recordings <span class=\"ds-sidebar__count\">11</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#watch\">Screenings <span class=\"ds-sidebar__count\">24</span></a>\n          </div>\n        </div>\n        <div class=\"ds-stack ds-stack--tight\">\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>You have watched</span><span class=\"ds-progress__value\">12 of 94 min</span></p>\n            <progress class=\"ds-progress__bar\" value=\"13\" max=\"100\">13%</progress>\n          </div>\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>Released so far</span><span class=\"ds-progress__value\">2 of 6</span></p>\n            <progress class=\"ds-progress__bar\" value=\"33\" max=\"100\">33%</progress>\n          </div>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\" aria-hidden=\"true\"></span>\n          <p class=\"ds-empty__title\">Nothing saved yet</p>\n          <p class=\"ds-empty__text\">Chapters you keep for a place without a connection are listed here.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#watch\">How saving works</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"chapter\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">The film</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#chapters\">Chapters</a></li>\n        <li class=\"ds-breadcrumb__current\">01 The mast</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">03 / 04</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The mast</h1>\n        <p class=\"ds-page-header__text\">Chapter one. Sixty metres of steel, one lamp, and the person who climbs it.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#chapter\">Play from 12:14</a>\n        <a class=\"ds-button ds-button--secondary\" href=\"#chapter\">From the start</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-player\">\n        <div class=\"ds-scene ds-scene--frame ds-scene--mast\"><span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span><span class=\"ds-scene__shade\" aria-hidden=\"true\"></span><span class=\"ds-scene__play\"></span></div>\n        <div class=\"ds-player__bar\">\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>Paused</span><span class=\"ds-progress__value\">12:14 / 21:05</span></p>\n            <progress class=\"ds-progress__bar\" value=\"58\" max=\"100\">58%</progress>\n          </div>\n          <span class=\"ds-label ds-label--mono\">Subtitles on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"ds-wrap ds-cols ds-cols--wide\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>What the mast is for</h1>\n          <p class=\"ds-prose__lead\">It carries four instruments, one aerial and the only lamp for ninety kilometres.</p>\n          <p>Ice grows on the stays at about a centimetre a day. Left alone, it would bring the mast down in a month, so <strong>every third day</strong> somebody goes up with a wooden mallet and a line.</p>\n          <h2>How this chapter was filmed</h2>\n          <p>One camera stayed on the ground and one went up in a chest harness. The climb is shown at full length; the log entry for the day reads <code>M3 cleared 11:40</code>.</p>\n          <h3>In this chapter</h3>\n          <ul>\n            <li>The climb, in one take of nine minutes</li>\n            <li>The halo round the lamp in ice fog</li>\n            <li>The first radio call of the winter</li>\n          </ul>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#chapter\">Read the transcript</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#chapter\">The trailer (seen)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#chapters\">All chapters</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#watch\">Show it in a room</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#chapter\">Credits</a></li>\n        </ul>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Subtitles and languages</summary>\n            <p class=\"ds-accordion__body\">Spoken in two languages, with subtitles in seven. Choose them under Watch.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Audio description</summary>\n            <p class=\"ds-accordion__body\">A described version of every chapter comes out on the same Friday.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Credits for this chapter</summary>\n            <p class=\"ds-accordion__body\">Filmed by a crew of three over eleven days in November.</p>\n          </details>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Chapter sheet</h2><span class=\"ds-badge ds-badge--quiet\">01 / 06</span></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Length</dt><dd>21 min 5 s</dd>\n              <dt>Out since</dt><dd>21 November</dd>\n              <dt>Filmed</dt><dd>Eleven days, no daylight</dd>\n              <dt>Sound</dt><dd>Stereo and 5.1</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-people\">\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The technician</span><span class=\"ds-person__role\">Climbs the mast</span></span></div>\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--3 ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The observer</span><span class=\"ds-person__role\">Holds the line</span></span></div>\n        </div>\n        <div class=\"ds-stack ds-stack--tight\">\n          <p class=\"ds-label ds-label--accent\">Up next</p>\n          <ul class=\"ds-queue\">\n            <li><a class=\"ds-queue__item\" href=\"#chapter\"><span class=\"ds-scene ds-scene--frame ds-scene--hut\" aria-hidden=\"true\"><span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span></span><span><span class=\"ds-queue__title\">02 The hut</span><span class=\"ds-label ds-label--mono\">17 min</span></span></a></li>\n            <li><a class=\"ds-queue__item\" href=\"#chapters\"><span class=\"ds-scene ds-scene--frame ds-scene--ice\" aria-hidden=\"true\"><span class=\"ds-scene__sky\" aria-hidden=\"true\"></span><span class=\"ds-scene__far\" aria-hidden=\"true\"></span><span class=\"ds-scene__near\" aria-hidden=\"true\"></span></span><span><span class=\"ds-queue__title\">03 The ice</span><span class=\"ds-label ds-label--mono\">Friday</span></span></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"watch\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">The film</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#watch\">Watch</a></li>\n        <li class=\"ds-breadcrumb__current\">Ask for a screening</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">04 / 04</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Show it in a room</h1>\n        <p class=\"ds-page-header__text\">Any room that can be made dark. We send the film, a poster and a page of notes.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--even\">\n      <form class=\"ds-form\" data-component=\"form\" action=\"#watch\">\n        <div class=\"ds-noticerow\">\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Check</span>One field needs another look before this can be sent.</p>\n        </div>\n        <div class=\"ds-form__row\">\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"room-name\">Name</label>\n            <input class=\"ds-form__input\" id=\"room-name\" type=\"text\" value=\"A. Visitor\">\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"room-kind\">Kind of room</label>\n            <select class=\"ds-form__select\" id=\"room-kind\">\n              <option>A cinema</option>\n              <option>A school</option>\n              <option>A library or hall</option>\n              <option>Somewhere else</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"room-mail\">E-mail address</label>\n          <input class=\"ds-form__input is-error\" id=\"room-mail\" type=\"email\" value=\"visitor@example\">\n          <p class=\"ds-form__error\">This address is missing its ending, for example .org.</p>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"room-note\">The room and the evening</label>\n          <textarea class=\"ds-form__textarea\" id=\"room-note\" placeholder=\"How many seats, which date, what the screen is\"></textarea>\n          <p class=\"ds-form__hint\">Screenings are free for schools and for rooms of fewer than fifty seats.</p>\n        </div>\n        <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Nobody will be charged to get in.</label>\n        <div class=\"ds-form__actions\" data-component=\"buttons\">\n          <button class=\"ds-button\" type=\"submit\">Ask for the film</button>\n          <a class=\"ds-button ds-button--secondary\" href=\"#chapters\">Watch it first</a>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Cancel a screening</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Sent</button>\n        </div>\n      </form>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">On this device</h2></div>\n          <div class=\"ds-panel__body\">\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Subtitles<small>In the language of this page</small></span></label>\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Play the next chapter<small>After ten seconds of dark</small></span></label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Remind me on Fridays<small>One message when a chapter is out</small></span></label>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"cancel-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"cancel-title\">Cancel the screening?</h2><a class=\"ds-dialog__close\" href=\"#watch\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>The link to the film stops working and the forty seats you announced are released.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Cancel it</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#watch\">Keep it</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap ds-footer__inner\">\n    <a class=\"ds-brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <p class=\"ds-footer__about\">chronoskin is a film in six chapters, made over one winter and given away one Friday at a time.</p>\n    <ul class=\"ds-footer__list\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">The film</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#chapters\">Chapters</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#chapter\">Now playing</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#watch\">Screenings</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#watch\">Press</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#home\">Privacy</a></li>\n    </ul>\n  </div>\n  <div class=\"ds-wrap\">\n    <div class=\"ds-footer__legal ds-label\">\n      <span>2026 chronoskin. Free to watch, not to resell.</span>\n      <span>70.98 N 25.97 E</span>\n    </div>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.app.s08.p04.t07.u04\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-ci-8474\",\n  \"short\": \"v1-ci-8474\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ece9e2;\n  --color-canvas: #ece9e2;\n  --color-surface: #f4f2ec;\n  --color-surface-alt: #e1ddd3;\n  --color-surface-strong: #d2cdc1;\n  --color-bar: #dfdbd1;\n  --color-bar-text: #0b0c10;\n  --color-bar-alt: #e1ddd3;\n  --color-bar-alt-text: #4c4a44;\n  --color-inverse: #0b0c10;\n  --color-inverse-text: #ece9e2;\n  --color-text: #2b2a27;\n  --color-text-muted: #706d65;\n  --color-heading: #0b0c10;\n  --color-heading-alt: #1c2fd2;\n  --color-link: #1c2fd2;\n  --color-link-quiet: #56534c;\n  --color-link-visited: #5b3fae;\n  --color-link-hover: #0b0c10;\n  --color-link-active: #0f1c7a;\n  --color-border: #bdb8ab;\n  --color-border-strong: #0b0c10;\n  --color-border-muted: #d7d3c8;\n  --color-accent: #3355ff;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #0f1c7a;\n  --color-fill-1: #d5d7dc;\n  --color-fill-2: #c2c9d8;\n  --color-fill-3: #ded7c7;\n  --color-fill-4: #b1bbd3;\n  --color-button: #0b0c10;\n  --color-button-text: #f4f2ec;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ece9e2;\n  --color-button-secondary-text: #0b0c10;\n  --color-input: #f4f2ec;\n  --color-input-text: #0b0c10;\n  --color-input-border: #8d897e;\n  --color-disabled: #d7d3c8;\n  --color-disabled-text: #99958a;\n  --color-danger: #b3261e;\n  --color-danger-surface: #f1d8d2;\n  --color-success: #1e6b45;\n  --color-warning: #8a5a00;\n  --color-notice: #dde1f5;\n  --color-notice-text: #18206a;\n  --color-focus: #3355ff;\n  --color-shadow: rgb(15 28 122 / 0.2);\n  --color-overlay: rgb(11 12 16 / 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: \"IBM Plex Sans\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: \"Barlow Condensed\", \"Avenir Next Condensed\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif;\n  --font-ui: \"Barlow Condensed\", \"Avenir Next Condensed\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif;\n  --font-mono: \"IBM Plex Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 208px;\n  --text-h1: 88px;\n  --text-h2: 46px;\n  --text-h3: 24px;\n  --line-body: 1.55;\n  --line-heading: 1.02;\n  --line-display: 0.86;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 300;\n  --weight-display: 200;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: 1px;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\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: 4px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 999px;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: 6px 6px 0 var(--color-shadow);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 12px 12px 0 var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: radial-gradient(circle at 50% 50%, color-mix(in srgb, black 16%, transparent) 0 0.7px, transparent 1.2px) 0 0 / 5px 5px, radial-gradient(circle at 50% 50%, color-mix(in srgb, white 12%, transparent) 0 0.7px, transparent 1.2px) 2.5px 2.5px / 5px 5px, var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt) 92%, black), var(--color-bar-alt) 24px);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-accent);\n  --fill-button-secondary: transparent;\n  --fill-input: transparent;\n  --focus-ring: 4px solid var(--color-focus);\n  --transition: all 0.3s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}