{
  "id": "v1-w2-3bbb",
  "long_id": "v1.web-2-0-gloss.portal.s03.p11.t11.u11",
  "name": "Web 2.0 gloss media front page",
  "era": {
    "slug": "web-2-0-gloss",
    "code": "w2",
    "name": "Web 2.0 gloss",
    "years": [
      2005,
      2009
    ],
    "description": "The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new."
  },
  "archetype": "portal",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": false
  },
  "summary": "The front page of a media community in the Web 2.0 look: one sheet between two hairlines, opened by a two-row coloured bar with large word links, then a coloured box with a search-and-go field, a grid of item tiles under a tabbed strip, a grey band of three equal columns and a tall inverted footer of link columns. It was common from about 2005 to 2009 on music, video and photo sites built around charts and what members were playing. Inner pages keep the sheet and put a menu column on the left of the working area.",
  "url": "https://chrono.skin/s/v1-w2-3bbb",
  "preview_url": "https://chrono.skin/s/v1-w2-3bbb/specimen.html",
  "files": {
    "STYLE.md": "# Web 2.0 gloss media front page\n\n## Summary\n\nThe front page of a media community in the Web 2.0 look: one sheet between two hairlines, opened by a two-row coloured bar with large word links, then a coloured box with a search-and-go field, a grid of item tiles under a tabbed strip, a grey band of three equal columns and a tall inverted footer of link columns. It was common from about 2005 to 2009 on music, video and photo sites built around charts and what members were playing. Inner pages keep the sheet and put a menu column on the left of the working area.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 920px, centred in a 1024px viewport. It does not stretch.\n- Everything, header and footer included, lives in `.ds-page__sheet`, a 920px sheet with a 1px `--color-border-strong` rule down each side. Nothing spans the viewport and no text sits on the page outside the sheet.\n- The header is the top of the sheet: `.ds-nav`, a bar in two rows. The first row (`--size-nav` 44px) has the brand, a small tagline, the section links as large bold words and the log-in line at the right; the second (`--size-subnav` 28px), under a faint rule, has one link on the left and help links and the search field on the right.\n- Content sits in `.ds-page__body`, padded `--size-pad` (30px) at the sides, so the working width is 858px. Top to bottom on the home page: the hero (a bar-coloured box `--size-hero` 390px wide on the left, a claim on the right), a `.ds-head` strip with the tabs, the tile grid of five columns, then `.ds-band`, a grey field that bleeds to both edges of the sheet and holds three equal columns: the dated list, the ranked list, and a panel over a run of tags. The home page has no sidebar column.\n- Spacing scale: `--space-1` 2px (inside controls, between a title and its meta line), `--space-2` 4px (control padding, gaps between buttons, menu links), `--space-3` 8px (tile padding, table cell padding, gap between a date leaf and its text), `--space-4` 12px (gap between tiles, panel padding, between list entries, under a section head), `--space-5` 20px (bar padding, gap between hero and claim, footer padding, gap above the inner columns), `--space-6` 30px (gap between the three band columns, between the menu and the main column, above a section head and between sections; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 22px tall, the hero field and button `--size-control-large` 30px, the bar's search field `--size-search` 150px, the picture area of a tile `--size-art` 86px tall with a `--size-icon` 22px glyph, the calendar leaf `--size-date` 36px, the rank numeral column `--size-rank` 26px, the form label column `--size-label` 110px, the dialog `--size-dialog` 380px.\n- Views: the specimen is one example site of six screens, each a `.ds-view` section inside `.ds-page__body`, with the header bar and the footer written once around them in the sheet. `home` is the front page (hero, the tile grid under its head strip and tabs, the grey band with the dated list, the ranked list, the panel and the tags). `film` is the page of one film, where every tile and title leads (stats line, the menu column with the credits, the `.ds-player` screen, a line about the film with its badges, viewers' comments as a dated list under a head strip; the Films link stays marked). `crew` is the page of one crew (stats line, the menu column, a toolbar, the table of films with status badges and their key, pagination, the confirming dialog). `screenings` is the list of evenings (the dated list under a head strip, then the empty state for a crew with none planned). `send` is the form for sending in a film (notices, the head strip with tabs, the form; the menu column lists the steps). `help` is a help article (prose and onward links beside the help menu). Links are plain `href=\"#name\"`. The bar's section link of the showing view is marked by a `.ds-page:has(#name:target)` rule, Films also when no view is named; for `send` and `help` the link in the bar's second row loses its underline.\n- Inner pages drop the hero, the tile grid and the band. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` in the hero's place across the full 858px (title and one line on the left, buttons on the right, a rule under it), then `.ds-stats` as one line of figures, then `.ds-page__columns` 20px below: `.ds-page__aside`, a menu column of `--size-menu` (170px) on the left holding `.ds-sidebar` blocks, a 30px gap, and `.ds-page__main` (658px). The main column starts with the table or list (under a `.ds-buttons--bar` toolbar when it has one) or with the notices above a form; `.ds-tabs` never stand alone but sit at the right end of a `.ds-head` strip directly above the block they switch (a form, a list). Further blocks follow as `.ds-section` blocks 30px apart. The sidebar is always on the left. Blocks that do not belong to the side column's subject (long help text, a full-width notice or dialog) go below the columns as `.ds-section` blocks across the full width, so the side column never ends far above the main one.\n- List entries are separated by 12px of space, not by rules or boxes; table rows are ruled both ways inside a frame; tiles are the only cards.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- A serif set: `--font-body` and `--font-heading` are Georgia, \"Times New Roman\", serif. `--font-ui` is \"Lucida Grande\", Arial, Helvetica, sans-serif for buttons, tabs, fields and table text. `--font-mono` (\"Courier New\") for inline code only.\n- `--text-base` 13px at `--line-body` 1.3; `--text-small` 11px for meta lines and the footer; `--text-ui` 11px bold (`--weight-ui` 700).\n- Headings are Georgia in regular weight (`--weight-heading` and `--weight-display` 400): `--text-display` 22px (the name in the header, hero title), `--text-h1` 20px, `--text-h2` 17px, `--text-h3` 14px, at `--line-heading` 1.2. `--text-large` 15px for the hero lead and the large button. Emphasis inside text is `--weight-bold` 700.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- No link is underlined at rest: `--link-decoration` and `--link-decoration-quiet` are none, `--link-decoration-hover` underline.\n\n- Olive, cream and rust on a white page. `--color-page`, `--color-canvas` and `--color-surface` are #ffffff; `--color-surface-alt` is the cream #f3f3cc (alternate rows, quoted lines, the empty state) and `--color-surface-strong` a light olive tint #dde7b0 (title strips, tags, inactive tabs).\n- `--color-bar` #666633, a dark olive with cream `--color-bar-text` #ffffcc, fills the site bar, the table head and the dialog title. `--color-bar-alt` is the cream #f3f3cc with `--color-bar-alt-text` #333300. `--color-inverse` #333300 with #ffffcc text is the footer band.\n- Text is a warm near-black: `--color-text` and `--color-heading` #333300, `--color-text-muted` #999999. `--color-heading-alt` #933100, a rust, for panel and sidebar titles and prose h2.\n- `--color-link` #336699, a slate blue; hover turns rust (#933100), visited #666666, active #333300. `--color-link-quiet` #666633 for names, tags and minor tools.\n- `--color-button` #a94400, a burnt orange with white text, is the primary button; `--color-button-secondary` is cream with #333300 text in a `--color-border-strong` #999966 outline. Fields are a very pale blue (`--color-input` #f8fdff) in the same olive outline.\n- `--color-accent` #9eb847, a leaf green with #333300 `--color-accent-text`: count blocks, the pill badge, the current page. `--color-accent-alt` is the rust: the NEW marker only.\n- Block fills: `--color-fill-1` #f3f3cc (hero), `--color-fill-2` #f8fdff, `--color-fill-3` #dde7b0, `--color-fill-4` #ffffcc.\n- Borders: `--color-border` #aaaaaa, `--color-border-strong` #999966, `--color-border-muted` #d6d6ad (the cream, darkened) between rows.\n- Status: `--color-danger` #aa0000 on `--color-danger-surface` #fde8dc, `--color-success` #5c7a1a, `--color-warning` #ffe840, as error text and badge fills only. `--color-notice` #ffffcc with #333300 text. `--color-focus` #336699; `--color-shadow` #333300.\n\n- Matte, not glossy: `--fill-bar-alt`, `--fill-inverse`, `--fill-accent`, `--fill-panel` and `--fill-button-secondary` are flat colours. Only `--fill-bar` (12% lighter at the top) and `--fill-button` (18% lighter at the top) carry a soft sheen with no hard break.\n- Softly rounded boxes, nearly square controls: `--radius-panel` and `--radius-page` 6px, `--radius-control` and `--radius-pill` 3px.\n- No shadows of any kind: `--shadow-panel`, `--shadow-control*`, `--shadow-dialog` and `--shadow-text` are none.\n- `--border-width` and `--border-width-strong` are 1px solid. `--focus-ring` is a 1px dotted outline in `--color-focus`. `--transition` none.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets page fill, base font and colour. All content goes in `.ds-page__sheet` (920px, ruled at the sides); below the header it goes in `.ds-page__body`. On inner pages `.ds-page__columns` holds the left `.ds-page__aside` and `.ds-page__main`. `.ds-section` with a `.ds-section__label` separates blocks by 30px. `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first); only the view named in the address shows.\n- `.ds-nav`: the two-row bar at the top of the sheet. `.ds-nav__row` holds the `.ds-brand`, `.ds-nav__tagline`, `.ds-nav__tabs` of large bold `.ds-nav__tab` words (current: `is-current`, a darker block) and `.ds-nav__account` at the right. `.ds-nav__sub` holds one `.ds-nav__tool` link (it and the Help link take the same darker block when their page shows) and, at the right, `.ds-nav__aux` of `.ds-nav__aux-item` entries (first: `is-first`) with `.ds-nav__tool` links and `.ds-nav__search` with its `.ds-nav__input`.\n- `.ds-brand`: the site's mark and name, at the left end of the header, linking home; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` on `--color-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.25 times the size of the name, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` in `--weight-display`, coloured `--color-bar-text` for the bar it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-player`: the screen on the page of one film: a framed box of `--radius-panel` holding `.ds-player__screen` (a block of `--color-fill-1` three tile heights tall with a `.ds-player__icon` glyph) over `.ds-player__bar`, a strip in `--fill-bar-alt` with the running time on the left and two links on the right. One per detail page, at the top of the main column, with `--space-4` under it.\n- `.ds-hero`: the page introduction: `.ds-hero__box`, a box in the bar colour with a centred `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__action` (a `.ds-form__input--large` and a large secondary button side by side), and beside it `.ds-hero__side` with a `.ds-hero__claim` in the second heading colour and a `.ds-hero__note`. One per site, on the front page only.\n- `.ds-head`: a pale strip that titles a block: `.ds-head__title` on the left and `.ds-tabs` on the right. Above the tile grid and above any block with several views. `.ds-head--first` drops the top margin when the strip opens a column; `.ds-head--after` sets it to 20px when the strip follows notices.\n- `.ds-tabs`: small segments at the right end of a `.ds-head`: `.ds-tabs__tab` is a bold link; `is-current` is a white key with a hairline; `.ds-tabs__count` for a regular-weight number. Two to four views of the block below.\n- `.ds-grid`: item tiles, five to a row. Each `.ds-grid__cell` is a rounded hairline box holding a `.ds-grid__art` picture area (`.ds-grid__cell--1` to `--4` give it a block colour; a `.ds-grid__icon` glyph in the middle), a centred bold `.ds-grid__title` link and a `.ds-grid__meta` line. Repeat the four fills in order.\n- `.ds-band`: the grey field across the sheet: `.ds-band__columns` holds three equal columns, each under a `.ds-band__title` with an optional small `.ds-band__more` link. Once per page, last on the front page: there it adds `.ds-band--last`, which lets it run into the footer with no white strip between.\n- `.ds-list`: dated entries. Each `.ds-list__item` is a `.ds-list__date` calendar leaf (`.ds-list__month` strip over a `.ds-list__day` numeral) beside `.ds-list__body`: a bold `.ds-list__title` link and one or two small `.ds-list__meta` lines. Entries are separated by space only.\n- `.ds-rank`: a ranked list: each `.ds-rank__item` has a large `.ds-rank__number` and a `.ds-rank__body` with `.ds-rank__title` and `.ds-rank__meta`. For charts of up to ten.\n- `.ds-tags`: a run of bold `.ds-link--quiet` links divided by slashes.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__actions` on the right holds one primary button and at most one secondary. A rule under it. One per inner page.\n- `.ds-stat`: one summary figure, a `.ds-stat__number` followed on the same line by its small `.ds-stat__label`; three to five sit in a `.ds-stats` line directly under the page header, with no box and no dividers.\n- `.ds-prose`: long text: h1, h2 (second heading colour), h3, p, ul, ol, code, strong, mark and links inside it are styled.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. Variant `.ds-link--title` for titles; `.ds-link--quiet` for names and tags. `.ds-links` lays several out in a row.\n- `.ds-button`: primary action, 22px tall. Variants `.ds-button--secondary` (the usual button), `.ds-button--danger` (a fade in `--color-danger`; only for an action that withdraws or deletes) and `.ds-button--large` (30px; the hero only). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row of them; `.ds-buttons--bar` is that row as the toolbar above a table, with 12px under it.\n- `.ds-form`: a tinted rounded box with labels in a left column: `.ds-form__row` with a bold `.ds-form__label` and a `.ds-form__field` holding `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea`; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` aligned with the fields. `.ds-form__input--large` is the hero field.\n- `.ds-table`: framed data table ruled both ways: `.ds-table__head` cells form a bar; `.ds-table__row` with `is-alt` for alternate rows; `.ds-table__cell`; `is-numeric` right-aligns and bolds numbers; `is-rank` is the narrow centred position column.\n- `.ds-panel`: a white rounded box on the band for a short pitch: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text` and `.ds-panel__actions` (one button, then a link).\n- `.ds-badge`: small bold label. Base is the accent pill. Variants `.ds-badge--count`, `.ds-badge--tag`, `.ds-badge--new`, and the status variants `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`, one per table row in a status column. `.ds-badges` lays several out in a row; `.ds-badges--key` is that row as a small grey key under a table, each badge followed by a few words.\n- `.ds-sidebar`: a block of the left menu on an inner page: a small bold `.ds-sidebar__title`, then `.ds-sidebar__list` of block `.ds-sidebar__link` entries (current: `is-current`, a filled rounded row) with an optional `.ds-sidebar__count`.\n- `.ds-notice`: one-line message under the hero or page header, with `.ds-notice__title` in bold. Variant `.ds-notice--error`. `is-first` on the first notice of a column removes its top margin.\n- `.ds-pagination`: centred under a table: bordered `.ds-pagination__link` keys, current page `is-current`, unavailable `is-disabled`, `.ds-pagination__gap` for an ellipsis.\n- `.ds-breadcrumb`: small trail of `.ds-link` items with `.ds-breadcrumb__sep` (a slash) and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: rounded bordered box with a `.ds-dialog__title` bar (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and a tinted `.ds-dialog__actions` strip with the buttons centred. Sits on `.ds-dialog__backdrop`.\n- `.ds-empty`: tinted rounded box with a `.ds-empty__title`, a `.ds-empty__text` line and one button.\n- `.ds-footer`: the inverted block that closes the sheet: a `.ds-footer__news` line over a faint rule, `.ds-footer__columns` of five link columns (each a `.ds-footer__head` over a `.ds-footer__list` of `.ds-footer__item` entries with `.ds-footer__link`), and a `.ds-footer__legal` line.\n- `.ds-menu`: a drop-down under a main tab, for the lists a visitor asks for most. The `li` carries `.ds-menu`, its tab gets a `.ds-menu__caret`, and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above the last row. A white hairline box with rounded lower corners that hangs from the tab and opens on hover and on keyboard focus (`is-open` shows it statically). One level only.\n- `.ds-progress`: how far something is: an optional `.ds-progress__label` line (what is measured on the left, the figure on the right) over `progress.ds-progress__bar`, a pill-shaped grey track filled with the glossy button fill. Under an entry of `.ds-rank` the bare bar shows the share of viewers who finished a film, with the figure written in the line above it; `.ds-progress--inline` is the bare bar that stretches inside `.ds-player__bar` between the time and the links. Variants of the bar: `.ds-progress__bar--success`, `--warning`, `--danger`.\n- `.ds-avatar`: the picture of a person: a 20px rounded tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4`. It sits before a name inside a `.ds-sidebar__link` that also carries `.ds-sidebar__link--person`, as in the list of who made a film; `.ds-avatar--large` doubles it for the head of a crew page. Decorative: the name is always written beside it.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a grey glossy `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. `.ds-accordion--prose` sets it off from the `.ds-prose` text above it. For the short questions at the foot of a help page.\n\n## Never\n\n- `row-gap <= 20px`: list entries sit 12px apart and table rows touch.\n- `block-gap <= 30px`: sections are at most 30px apart.\n- `content-width <= 920px`: all text is inside the 920px sheet; nothing spans the viewport.\n- `palette-colours <= 32`: olive in three steps, cream, rust, burnt orange, one slate blue, greys and the status colours.\n- `font-size <= 22px`: the name in the header and the hero title are the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Georgia, Lucida Grande and a monospace for inline code.\n- `line-height <= 1.3`: body text is 13px on 17px.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 6px`: corners are 3 or 6px.\n- `border-width <= 1px`: every border and rule is a 1px hairline.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat on its bar.\n- `gradient-fills <= 10%`: only the bar, the table head and the primary button carry a sheen.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything that shows items with pictures is a row of `.ds-grid` tiles under a `.ds-head`; anything that lists, ranks or invites on the front page becomes a column of the `.ds-band`; a new view of an inner page is an entry in the left `.ds-sidebar` menu, and a new view of one block is a tab in that block's `.ds-head`. A new coloured box takes `--fill-bar` with `--color-bar-text` and `--radius-page`; a new picture area takes one `--color-fill-*`. On the grey band use `--color-heading`, `--color-link` and `--color-link-quiet` for text. Keep text at `--text-base`, `--text-ui` or `--text-small`, and make any extra shade with `color-mix()` over existing colour tokens rather than adding a colour.\n",
    "components.css": ":root {\n  --size-page: 920px;\n  --size-pad: 30px;\n  --size-menu: 170px;\n  --size-nav: 44px;\n  --size-subnav: 28px;\n  --size-control: 22px;\n  --size-control-large: 30px;\n  --size-search: 150px;\n  --size-hero: 390px;\n  --size-art: 86px;\n  --size-icon: 22px;\n  --size-date: 36px;\n  --size-rank: 26px;\n  --size-label: 110px;\n  --size-textarea: 70px;\n  --size-dialog: 380px;\n  --space-1: 2px;\n  --space-2: 4px;\n  --space-3: 8px;\n  --space-4: 12px;\n  --space-5: 20px;\n  --space-6: 30px;\n  --size-drop: 160px;\n  --size-meter: 10px;\n  --size-avatar: 20px;\n}\n\n/* shell: one sheet between two hairlines; header, bands and footer all live inside it */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__sheet {\n  width: var(--size-page);\n  margin: 0 auto;\n  border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n  background: var(--color-canvas);\n}\n.ds-page__body { padding: var(--space-5) var(--size-pad) var(--space-6); }\n.ds-page__columns {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-6);\n  margin: var(--space-5) 0 0;\n}\n.ds-page__aside {\n  flex: 0 0 var(--size-menu);\n  width: var(--size-menu);\n}\n.ds-page__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-section { margin: var(--space-6) 0 0; }\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.ds-section__label {\n  margin: 0 0 var(--space-3);\n  color: var(--color-link-quiet);\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\n/* nav: a two-row bar at the top of the sheet; large word links above, tools and search below */\n.ds-nav {\n  margin: 0;\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__row {\n  display: flex;\n  align-items: center;\n  height: var(--size-nav);\n  padding: 0 var(--space-5);\n}\n.ds-brand {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-display) * 1.25);\n  height: calc(var(--text-display) * 1.25);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__tagline {\n  margin: 0 var(--space-5) 0 var(--space-3);\n  font-size: var(--text-small);\n}\n.ds-nav__tabs {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__tab {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-control);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-nav__tab:hover,\n.ds-nav__tab.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__tab.is-current {\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__tab[href=\"#home\"] {\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:has(#home:target) .ds-nav__tab[href=\"#home\"] {\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:has(#film:target) .ds-nav__tab[href=\"#home\"] {\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:has(#crew:target) .ds-nav__tab[href=\"#crew\"] {\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:has(#screenings:target) .ds-nav__tab[href=\"#screenings\"] {\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:has(#send:target) .ds-nav__sub .ds-nav__tool[href=\"#send\"] {\n  padding: var(--space-1) var(--space-3);\n  border-radius: var(--radius-control);\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n  text-decoration: none;\n}\n.ds-page:has(#help:target) .ds-nav__sub .ds-nav__tool[href=\"#help\"] {\n  padding: var(--space-1) var(--space-3);\n  border-radius: var(--radius-control);\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n  text-decoration: none;\n}\n.ds-nav__account {\n  margin: 0 0 0 auto;\n  font-size: var(--text-small);\n}\n.ds-nav__tool {\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__sub {\n  display: flex;\n  align-items: center;\n  height: var(--size-subnav);\n  padding: 0 var(--space-5);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n}\n.ds-nav__aux {\n  display: flex;\n  align-items: center;\n  margin: 0 0 0 auto;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__aux-item {\n  padding: 0 var(--space-3);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  line-height: 1;\n}\n.ds-nav__aux-item.is-first { border-left: 0; }\n.ds-nav__search {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  text-shadow: none;\n}\n.ds-nav__input {\n  width: var(--size-search);\n  height: calc(var(--size-control) - var(--space-2));\n  margin: 0;\n  padding: 0 var(--space-2);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 45%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus { outline: var(--focus-ring); }\n\n/* hero: a bar-coloured box with the title and a search-and-go field, a claim beside it */\n.ds-hero {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  margin: var(--space-3) 0 0;\n}\n.ds-hero__box {\n  flex: 0 0 var(--size-hero);\n  width: var(--size-hero);\n  padding: var(--space-4) var(--space-5) var(--space-5);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  border-radius: var(--radius-page);\n  background: var(--fill-bar);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-text);\n  text-align: center;\n  text-shadow: var(--shadow-text);\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-bar-text);\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}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-hero__action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  text-shadow: none;\n}\n.ds-hero__side {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-hero__claim {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-hero__note {\n  margin: 0;\n  color: var(--color-link-quiet);\n}\n\n/* section head: a pale strip with the title on the left and the tabs on the right */\n.ds-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: var(--space-6) 0 var(--space-4);\n  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-head--first { margin-top: 0; }\n.ds-head--after { margin-top: var(--space-5); }\n.ds-head__title {\n  margin: 0;\n  color: var(--color-bar-alt-text);\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\n/* tabs: small segments inside the section head; the current one is a white key */\n.ds-tabs {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-tabs__tab.is-current {\n  border-color: var(--color-border);\n  background: var(--color-canvas);\n  color: var(--color-bar-alt-text);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n\n/* grid: five tiles to a row, each a framed block of colour over a centred caption */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-grid__cell {\n  padding: var(--space-3) var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-page);\n  background: var(--fill-panel);\n  text-align: center;\n}\n.ds-grid__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--size-art);\n  margin: 0 0 var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-alt);\n  color: var(--color-link-quiet);\n}\n.ds-grid__cell--1 .ds-grid__art { background: var(--color-fill-1); }\n.ds-grid__cell--2 .ds-grid__art { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__art { background: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__art { background: var(--color-fill-4); }\n.ds-grid__icon {\n  display: block;\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-grid__meta {\n  margin: var(--space-1) 0 0;\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n}\n\n/* player: the screen of one film on its own page, a block of colour over a strip of controls */\n.ds-player {\n  margin: 0 0 var(--space-4);\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-panel);\n  overflow: hidden;\n}\n.ds-player__screen {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--size-art) * 3);\n  background: var(--color-fill-1);\n  color: var(--color-link-quiet);\n}\n.ds-player__icon {\n  display: block;\n  width: calc(var(--size-icon) * 2);\n  height: calc(var(--size-icon) * 2);\n}\n.ds-player__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-4);\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  font-size: var(--text-small);\n}\n\n/* band: a grey field across the whole sheet holding three equal columns */\n.ds-band {\n  margin: var(--space-6) calc(0px - var(--size-pad)) 0;\n  padding: var(--space-5) var(--size-pad) var(--space-6);\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-strong);\n}\n.ds-band--last { margin-bottom: calc(0px - var(--space-6)); border-bottom: 0; }\n.ds-band__columns {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-6);\n}\n.ds-band__title {\n  margin: 0 0 var(--space-4);\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-band__more {\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n\n/* list: dated entries, a calendar leaf beside three short lines; space between, no rules */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-4);\n}\n.ds-list__date {\n  flex: 0 0 var(--size-date);\n  width: var(--size-date);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  background: var(--color-surface);\n  line-height: var(--line-heading);\n  text-align: center;\n  overflow: hidden;\n}\n.ds-list__month {\n  display: block;\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-list__day {\n  display: block;\n  color: var(--color-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-list__meta {\n  margin: 0;\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n\n/* ranked list: a large numeral, then title and maker */\n.ds-rank {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-rank__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-4);\n}\n.ds-rank__number {\n  flex: 0 0 var(--size-rank);\n  width: var(--size-rank);\n  color: var(--color-link-quiet);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-align: center;\n}\n.ds-rank__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-rank__title {\n  margin: 0;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-rank__meta {\n  margin: 0;\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n\n/* tag run: bold quiet links divided by slashes */\n.ds-tags {\n  margin: var(--space-5) 0 0;\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-bold);\n}\n\n/* page header: title and line on the left, action on the right, a rule under all of it */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: var(--space-3) 0 0;\n  padding: 0 0 var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-link-quiet);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* stats: figures written in a line, number first, label after it */\n.ds-stats {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-2) var(--space-6);\n  margin: var(--space-3) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n.ds-stat__number {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-stat__label {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-4) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose mark {\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n\n/* links */\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title { text-decoration: var(--link-decoration-quiet); }\n.ds-link--quiet {\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 { color: var(--color-link); }\n\n/* buttons */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-buttons--bar { margin: 0 0 var(--space-4); }\n.ds-button {\n  display: inline-block;\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 75%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n  text-align: center;\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--color-button);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--large {\n  height: var(--size-control-large);\n  padding: 0 var(--space-5);\n  font-size: var(--text-large);\n  line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\n.ds-button--secondary {\n  border-color: var(--color-border-strong);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-body);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-link-quiet);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n  border-color: color-mix(in srgb, var(--color-danger) 75%, var(--color-shadow));\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 24%) 0, var(--color-danger) 100%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 36%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 10%) 100%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  cursor: default;\n}\n\n/* form: a tinted box, labels in a left column */\n.ds-form {\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n}\n.ds-form__row {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n  flex: 0 0 var(--size-label);\n  padding-top: var(--space-1);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__field {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  box-shadow: var(--shadow-control);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { width: auto; padding: 0 var(--space-1); }\n.ds-form__input--large {\n  width: calc(var(--size-search) + var(--size-search) - var(--space-6));\n  height: var(--size-control-large);\n  font-size: var(--text-large);\n}\n.ds-form__textarea {\n  display: block;\n  height: var(--size-textarea);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n  outline: var(--focus-ring);\n  border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n}\n.ds-form__error {\n  margin: var(--space-1) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  margin: var(--space-1) 0 0;\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding-top: var(--space-1);\n  font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n  display: flex;\n  gap: var(--space-2);\n  margin: var(--space-4) 0 0;\n  padding-left: calc(var(--size-label) + var(--space-4));\n}\n\n/* table: framed, ruled both ways, a bar for a head, a narrow rank column */\n.ds-table {\n  width: 100%;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-table__head {\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n  padding: var(--space-2) var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface);\n  color: var(--color-text);\n  vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__cell.is-rank {\n  width: var(--size-date);\n  color: var(--color-text-muted);\n  font-weight: var(--weight-bold);\n  text-align: center;\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-3);\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-bold);\n  line-height: calc(var(--text-small) + var(--space-3));\n  text-decoration: none;\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n.ds-badge--count {\n  border-radius: 0;\n  background: var(--color-button);\n  color: var(--color-button-text);\n}\n.ds-badge--tag {\n  border-radius: 0;\n  background: var(--color-surface-strong);\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-body);\n}\n.ds-badge--tag:hover,\n.ds-badge--tag.is-hover { color: var(--color-link); }\n.ds-badge--new {\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-control);\n  background: var(--color-accent-alt);\n  color: var(--color-button-text);\n}\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-button-text);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-accent-text);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-badges--key {\n  gap: var(--space-2) var(--space-4);\n  margin: var(--space-4) 0 0;\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n\n/* panel: a white box on the band */\n.ds-panel {\n  margin: 0;\n  padding: var(--space-4);\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__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\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-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* sidebar: the left menu of an inner page; a small heading over block links */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  padding: 0 var(--space-3);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__link {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-control);\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-sidebar__link.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n  margin: var(--space-4) 0 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) 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-ui);\n}\n.ds-notice.is-first { margin-top: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n\n/* pagination: centred keys */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: var(--space-4) 0 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--color-surface);\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-link); }\n.ds-pagination__link.is-current {\n  border-color: var(--color-button);\n  background: var(--color-button);\n  color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n  border-color: var(--color-border-muted);\n  color: var(--color-disabled-text);\n  font-weight: var(--weight-body);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog */\n.ds-dialog__backdrop {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-5);\n  background: var(--color-overlay);\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  border: var(--border-width-strong) 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  overflow: hidden;\n}\n.ds-dialog__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-body);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  text-decoration: var(--link-decoration);\n}\n.ds-dialog__body { padding: var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface-alt);\n}\n\n/* empty state */\n.ds-empty {\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-page);\n  background: var(--color-surface-alt);\n  text-align: center;\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-text-muted);\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}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n  color: var(--color-link-quiet);\n  font-size: var(--text-ui);\n}\n\n/* footer: an inverted block closing the sheet; a news line, link columns, small print */\n.ds-footer {\n  margin: 0;\n  padding: var(--space-5) var(--size-pad);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-size: var(--text-small);\n}\n.ds-footer__news {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n  font-size: var(--text-base);\n}\n.ds-footer__columns {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: var(--space-5);\n}\n.ds-footer__head {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-footer__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__item { margin: 0 0 var(--space-1); }\n.ds-footer__link {\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-footer__legal { margin: var(--space-5) 0 0; }\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n  display: inline-block;\n  width: calc(var(--text-small) * 0.6);\n  height: calc(var(--text-small) * 0.36);\n  background: currentColor;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n  margin-left: var(--space-1);\n  font-size: var(--text-small);\n  vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__list {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  width: var(--size-drop);\n  margin: 0;\n  padding: var(--space-1) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n  text-align: left;\n  text-shadow: none;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list { display: block; }\n.ds-menu__item.is-ruled {\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-menu__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-link-hover);\n}\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-focus { outline: var(--focus-ring); }\n\n/* accordion: questions that open and close, one glossy strip each */\n.ds-accordion {\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  overflow: hidden;\n}\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-accordion__item.is-first { border-top: 0; }\n.ds-accordion__title {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker { display: none; }\n.ds-accordion__title::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-ui) * 0.7);\n  height: calc(var(--text-ui) * 0.7);\n  margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.7));\n  background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-ui) * 0.12)) 100% no-repeat;\n  color: var(--color-link-quiet);\n}\n.ds-accordion__item[open] > .ds-accordion__title::before { background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat; }\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover { color: var(--color-link); }\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus { outline: var(--focus-ring); }\n.ds-accordion__body {\n  margin: 0;\n  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-4));\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n}\n\n/* progress: a glossy bar in a track, with a line saying what it measures */\n.ds-progress { margin: 0 0 var(--space-3); }\n.ds-progress__label {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--size-meter);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n  appearance: none;\n}\n.ds-progress__bar::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress__bar::-webkit-progress-value { background: var(--fill-button); }\n.ds-progress__bar::-moz-progress-bar { background: var(--fill-button); }\n.ds-progress__bar--success::-webkit-progress-value { background: var(--color-success); }\n.ds-progress__bar--success::-moz-progress-bar { background: var(--color-success); }\n.ds-progress__bar--warning::-moz-progress-bar { background: var(--color-warning); }\n.ds-progress__bar--danger::-moz-progress-bar { background: var(--color-danger); }\n\n/* avatar: the picture of a member who has not sent one, a head and shoulders on a small tile */\n.ds-avatar {\n  display: inline-block;\n  flex: 0 0 auto;\n  position: relative;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n  vertical-align: middle;\n}\n.ds-avatar::before,\n.ds-avatar::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background: var(--color-text-muted);\n  opacity: 0.55;\n}\n.ds-avatar::before {\n  top: 16%;\n  left: 32%;\n  width: 36%;\n  height: 36%;\n}\n.ds-avatar::after {\n  top: 58%;\n  left: 12%;\n  width: 76%;\n  height: 76%;\n}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--3 { background: var(--color-fill-3); }\n.ds-avatar--large {\n  width: calc(var(--size-avatar) * 2);\n  height: calc(var(--size-avatar) * 2);\n}\n\n/* where the added pieces sit in this layout */\n.ds-progress--inline {\n  flex: 1 1 0;\n  margin: 0;\n}\n.ds-rank__body .ds-progress { margin: var(--space-1) 0 0; }\n.ds-sidebar__link--person {\n  align-items: center;\n  justify-content: flex-start;\n}\n.ds-sidebar__link--person .ds-sidebar__count { margin-left: auto; }\n.ds-accordion--prose { margin-top: var(--space-5); }\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin: Web 2.0 gloss media front page 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<div class=\"ds-page__sheet\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__row\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#\"><span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2.5 10.5V8a5 5 0 0 1 5-5h9a5 5 0 0 1 5 5v2.5z\" opacity=\".55\"/><path d=\"M2.5 10.5h19V13a5 5 0 0 1-5 5H12l-4.5 3.8V18a5 5 0 0 1-5-5z\"/></svg></span><span class=\"ds-brand__name\">chronoskin</span></a>\n    <span class=\"ds-nav__tagline\">short films from small crews</span>\n    <ul class=\"ds-nav__tabs\">\n      <li class=\"ds-menu\" data-component=\"menu\"><a class=\"ds-nav__tab\" href=\"#home\">Films <span class=\"ds-menu__caret\"></span></a>\n        <ul class=\"ds-menu__list\">\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#home\">Being watched now</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#home\">New this week</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#home\">Festival picks</a></li>\n          <li class=\"ds-menu__item is-ruled\"><a class=\"ds-menu__link\" href=\"#send\">Send in a film</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__tab\" href=\"#crew\">Crews</a></li>\n      <li><a class=\"ds-nav__tab\" href=\"#screenings\">Screenings</a></li>\n    </ul>\n    <p class=\"ds-nav__account\"><a class=\"ds-nav__tool\" href=\"#crew\">Log in</a> or <a class=\"ds-nav__tool\" href=\"#help\">Join</a></p>\n  </div>\n  <div class=\"ds-nav__sub\">\n    <a class=\"ds-nav__tool\" href=\"#send\">Send in a film</a>\n    <ul class=\"ds-nav__aux\">\n      <li class=\"ds-nav__aux-item is-first\"><a class=\"ds-nav__tool\" href=\"#help\">Help</a></li>\n      <li class=\"ds-nav__aux-item\"><a class=\"ds-nav__tool\" href=\"#screenings\">Evenings</a></li>\n      <li class=\"ds-nav__aux-item\">\n        <form class=\"ds-nav__search\" action=\"#\">\n          <input class=\"ds-nav__input\" type=\"text\" placeholder=\"Find a film\" aria-label=\"Find a film\">\n        </form>\n      </li>\n    </ul>\n  </div>\n</header>\n\n<div class=\"ds-page__body\">\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <div class=\"ds-hero__box\">\n        <h1 class=\"ds-hero__title\">Ten minutes, well spent</h1>\n        <p class=\"ds-hero__lead\">Whole short films, free to watch</p>\n        <form class=\"ds-hero__action\" action=\"#\">\n          <input class=\"ds-form__input ds-form__input--large\" type=\"text\" value=\"A town, a crew or a mood\" aria-label=\"Search films\">\n          <button class=\"ds-button ds-button--secondary ds-button--large\" type=\"button\">Watch</button>\n        </form>\n      </div>\n      <div class=\"ds-hero__side\">\n        <p class=\"ds-hero__claim\">chronoskin shows the films that never reach a cinema, and learns from what you finish which ones to show you next.</p>\n        <p class=\"ds-hero__note\">It costs nothing. <a class=\"ds-link\" href=\"#help\">Join</a> to keep a list of what you have seen.</p>\n      </div>\n    </div>\n\n    <div class=\"ds-head\">\n      <h2 class=\"ds-head__title\">Being watched now</h2>\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#home\">Right now</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#home\">This week</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#home\">New <span class=\"ds-tabs__count\">(46)</span></a></li>\n      </ul>\n    </div>\n\n    <div class=\"ds-grid\" data-component=\"grid\">\n        <div class=\"ds-grid__cell ds-grid__cell--1\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">The Night Ferry</a></h3>\n          <p class=\"ds-grid__meta\">214 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Salt and Wire</a></h3>\n          <p class=\"ds-grid__meta\">187 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--3\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Grandmother's Radio</a></h3>\n          <p class=\"ds-grid__meta\">151 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--4\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Eleven Bus Stops</a></h3>\n          <p class=\"ds-grid__meta\">98 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--1\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">A Field in March</a></h3>\n          <p class=\"ds-grid__meta\">77 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Paper Moons</a></h3>\n          <p class=\"ds-grid__meta\">64 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--3\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">The Last Projectionist</a></h3>\n          <p class=\"ds-grid__meta\">61 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--4\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Low Tide Letters</a></h3>\n          <p class=\"ds-grid__meta\">55 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--1\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Two Chairs</a></h3>\n          <p class=\"ds-grid__meta\">40 watching</p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <div class=\"ds-grid__art\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Kiln</a></h3>\n          <p class=\"ds-grid__meta\">32 watching</p>\n        </div>\n    </div>\n\n    <div class=\"ds-band ds-band--last\">\n      <div class=\"ds-band__columns\">\n        <div>\n          <h2 class=\"ds-band__title\">Screenings near you <a class=\"ds-link ds-band__more\" href=\"#screenings\">(see more)</a></h2>\n          <ol class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\">\n              <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">7</span></div>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#screenings\">Shorts in the boathouse</a></h3>\n                <p class=\"ds-list__meta\">Old Quay Rowing Club</p>\n                <p class=\"ds-list__meta\">38 people going</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">12</span></div>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#screenings\">First films night</a></h3>\n                <p class=\"ds-list__meta\">The Lantern Room</p>\n                <p class=\"ds-list__meta\">21 people going</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">20</span></div>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#screenings\">Animation by hand</a></h3>\n                <p class=\"ds-list__meta\">Mill Street Library</p>\n                <p class=\"ds-list__meta\">9 people going</p>\n              </div>\n            </li>\n          </ol>\n        </div>\n        <div>\n          <h2 class=\"ds-band__title\">Most finished <a class=\"ds-link ds-band__more\" href=\"#crew\">(see more)</a></h2>\n          <ol class=\"ds-rank\">\n            <li class=\"ds-rank__item\"><span class=\"ds-rank__number\">1</span><div class=\"ds-rank__body\"><p class=\"ds-rank__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">The Night Ferry</a></p><p class=\"ds-rank__meta\">by Harbour Lights, 92% watch to the end</p><div class=\"ds-progress\" data-component=\"progress\"><progress class=\"ds-progress__bar\" value=\"92\" max=\"100\">92%</progress></div></div></li>\n            <li class=\"ds-rank__item\"><span class=\"ds-rank__number\">2</span><div class=\"ds-rank__body\"><p class=\"ds-rank__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Eleven Bus Stops</a></p><p class=\"ds-rank__meta\">by Pocket Tripod, 88% watch to the end</p><div class=\"ds-progress\"><progress class=\"ds-progress__bar\" value=\"88\" max=\"100\">88%</progress></div></div></li>\n            <li class=\"ds-rank__item\"><span class=\"ds-rank__number\">3</span><div class=\"ds-rank__body\"><p class=\"ds-rank__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Paper Moons</a> <span class=\"ds-badge ds-badge--new\">NEW</span></p><p class=\"ds-rank__meta\">by Annika Dorn, 85% watch to the end</p><div class=\"ds-progress\"><progress class=\"ds-progress__bar\" value=\"85\" max=\"100\">85%</progress></div></div></li>\n            <li class=\"ds-rank__item\"><span class=\"ds-rank__number\">4</span><div class=\"ds-rank__body\"><p class=\"ds-rank__title\"><a class=\"ds-link ds-link--title\" href=\"#film\">Kiln</a></p><p class=\"ds-rank__meta\">by Clay Yard Films, 81% watch to the end</p><div class=\"ds-progress\"><progress class=\"ds-progress__bar\" value=\"81\" max=\"100\">81%</progress></div></div></li>\n          </ol>\n        </div>\n        <div>\n          <section class=\"ds-panel\" data-component=\"panel\">\n            <h2 class=\"ds-panel__title\">Made a film?</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Someone has probably asked for it already. Send it in and it gets a page of its own, with the crew named on it.</p>\n              <div class=\"ds-panel__actions\">\n                <a class=\"ds-button\" href=\"#send\">Send it in</a>\n                <a class=\"ds-link\" href=\"#help\">How it works</a>\n              </div>\n            </div>\n          </section>\n          <p class=\"ds-tags\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">animation</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">documentary</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">silent</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">comedy</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">first film</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">one take</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">coast</a> / <a class=\"ds-link ds-link--quiet\" href=\"#home\">under five minutes</a></p>\n        </div>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"film\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Films</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li><a class=\"ds-link\" href=\"#crew\">Harbour Lights</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li class=\"ds-breadcrumb__current\">The Night Ferry</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The Night Ferry</h1>\n        <p class=\"ds-page-header__text\">A documentary of nine minutes by <a class=\"ds-link\" href=\"#crew\">Harbour Lights</a>, sent in last March.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <button class=\"ds-button ds-button--secondary\" type=\"button\">Keep for later</button>\n        <a class=\"ds-button\" href=\"#film\">Watch it</a>\n      </div>\n    </div>\n\n    <ul class=\"ds-stats\">\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">24,106</span><span class=\"ds-stat__label\">times watched</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">81%</span><span class=\"ds-stat__label\">watched to the end</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">214</span><span class=\"ds-stat__label\">watching now</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">12</span><span class=\"ds-stat__label\">comments</span></li>\n    </ul>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">This film</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#film\">Watch</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">Comments <span class=\"ds-sidebar__count\">12</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">Screenings <span class=\"ds-sidebar__count\">2</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">The crew</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Who made it</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link ds-sidebar__link--person\" href=\"#crew\"><span class=\"ds-avatar ds-avatar--1\" data-component=\"avatar\"></span>Ines Varga <span class=\"ds-sidebar__count\">camera</span></a></li>\n            <li><a class=\"ds-sidebar__link ds-sidebar__link--person\" href=\"#crew\"><span class=\"ds-avatar ds-avatar--2\"></span>Tobias Renn <span class=\"ds-sidebar__count\">sound</span></a></li>\n            <li><a class=\"ds-sidebar__link ds-sidebar__link--person\" href=\"#crew\"><span class=\"ds-avatar ds-avatar--3\"></span>Maren Holt <span class=\"ds-sidebar__count\">edit</span></a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">More by this crew</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">Salt and Wire</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">Low Tide Letters</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">Two Chairs</a></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">On a wall</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Shown on 7 November in the boathouse.</p>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-link\" href=\"#screenings\">See the evening</a>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-player\">\n          <div class=\"ds-player__screen\"><svg class=\"ds-player__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 2l10 6-10 6z\"/></svg></div>\n          <div class=\"ds-player__bar\">\n            <span>3:04 of 9:12</span>\n            <div class=\"ds-progress ds-progress--inline\"><progress class=\"ds-progress__bar\" value=\"184\" max=\"552\">3:04 of 9:12</progress></div>\n            <span><a class=\"ds-link\" href=\"#film\">Larger</a> / <a class=\"ds-link\" href=\"#help\">Trouble playing?</a></span>\n          </div>\n        </div>\n\n        <div class=\"ds-prose\">\n          <p>The last crossing of the night, filmed from the car deck over one winter: the deckhands, the three regular passengers and the cook who has not missed a sailing in eleven years.</p>\n        </div>\n        <p class=\"ds-badges ds-badges--key\">\n          <span><span class=\"ds-badge ds-badge--success\">Showing</span></span>\n          <span><span class=\"ds-badge\">Festival pick</span></span>\n          <span><a class=\"ds-badge ds-badge--tag\" href=\"#home\">documentary</a> <a class=\"ds-badge ds-badge--tag\" href=\"#home\">coast</a> <a class=\"ds-badge ds-badge--tag\" href=\"#home\">night</a></span>\n        </p>\n\n        <div class=\"ds-head\">\n          <h2 class=\"ds-head__title\">What viewers wrote</h2>\n          <ul class=\"ds-tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#film\">Newest</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#film\">Most liked</a></li>\n          </ul>\n        </div>\n        <ol class=\"ds-list\">\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">4</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#crew\">quietharbour</a></h3>\n              <p class=\"ds-list__meta\">I took that boat to school for six years and never once looked at the engine room. Thank you.</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">2</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#crew\">Annika Dorn</a></h3>\n              <p class=\"ds-list__meta\">The sound of the ramp coming down is the best cut in the film.</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">OCT</span><span class=\"ds-list__day\">29</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#crew\">Pocket Tripod</a></h3>\n              <p class=\"ds-list__meta\">Nine minutes and not a word of narration. More of this, please.</p>\n            </div>\n          </li>\n        </ol>\n        <div class=\"ds-buttons\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#film\">All 12 comments</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#help\">Join to write one</a>\n        </div>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"crew\">\n\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Films</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li><a class=\"ds-link\" href=\"#crew\">Crews</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li class=\"ds-breadcrumb__current\">Harbour Lights</li>\n    </ol>\n\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Harbour Lights</h1>\n        <p class=\"ds-page-header__text\">A crew of five from the north quay, sending in films since 2006.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <button class=\"ds-button ds-button--secondary\" type=\"button\">Follow this crew</button>\n        <a class=\"ds-button\" href=\"#send\">Add a film</a>\n      </div>\n    </div>\n\n    <ul class=\"ds-stats\" data-component=\"stats\">\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">14</span><span class=\"ds-stat__label\">films</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">61,480</span><span class=\"ds-stat__label\">times watched</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">72%</span><span class=\"ds-stat__label\">watched to the end</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">318</span><span class=\"ds-stat__label\">followers</span></li>\n    </ul>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">This crew</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#crew\">Films <span class=\"ds-sidebar__count\">14</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">Screenings <span class=\"ds-sidebar__count\">0</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#send\">Send in a film</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">House rules</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Crews like this</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Pocket Tripod</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Clay Yard Films</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Annika Dorn</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Their films by kind</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Documentary <span class=\"ds-sidebar__count\">8</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Fiction <span class=\"ds-sidebar__count\">4</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Animation <span class=\"ds-sidebar__count\">2</span></a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Most watched</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">The Night Ferry</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">Salt and Wire</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#film\">Low Tide Letters</a></li>\n          </ul>\n        </nav>\n      </div>\n\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-buttons ds-buttons--bar\" data-component=\"buttons\">\n          <a class=\"ds-button\" href=\"#send\">Edit the details</a>\n          <button class=\"ds-button ds-button--secondary\" type=\"button\">Download the figures</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Show again</button>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Withdraw a film</button>\n        </div>\n\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\">No.</th>\n              <th class=\"ds-table__head\">Film</th>\n              <th class=\"ds-table__head\">Length</th>\n              <th class=\"ds-table__head\">Status</th>\n              <th class=\"ds-table__head is-numeric\">Watched</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-rank\">1</td>\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#film\">The Night Ferry</a></td>\n              <td class=\"ds-table__cell\">9 min</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Showing</span></td>\n              <td class=\"ds-table__cell is-numeric\">24,106</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-rank\">2</td>\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#film\">Salt and Wire</a></td>\n              <td class=\"ds-table__cell\">12 min</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Showing</span></td>\n              <td class=\"ds-table__cell is-numeric\">15,932</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-rank\">3</td>\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#film\">Low Tide Letters</a></td>\n              <td class=\"ds-table__cell\">6 min</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">In review</span></td>\n              <td class=\"ds-table__cell is-numeric\">4,870</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-rank\">4</td>\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#film\">Two Chairs</a></td>\n              <td class=\"ds-table__cell\">4 min</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">Withdrawn</span></td>\n              <td class=\"ds-table__cell is-numeric\">1,215</td>\n            </tr>\n          </tbody>\n        </table>\n\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><span class=\"ds-pagination__link is-disabled\">Previous</span></li>\n          <li><span class=\"ds-pagination__link is-current\">1</span></li>\n          <li><a class=\"ds-pagination__link\" href=\"#crew\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#crew\">3</a></li>\n          <li class=\"ds-pagination__gap\">&hellip;</li>\n          <li><a class=\"ds-pagination__link\" href=\"#crew\">Next</a></li>\n        </ul>\n\n        <p class=\"ds-badges ds-badges--key\" data-component=\"badge\">\n          <span><span class=\"ds-badge ds-badge--success\">Showing</span> can be played</span>\n          <span><span class=\"ds-badge ds-badge--warning\">In review</span> with the volunteers</span>\n          <span><span class=\"ds-badge ds-badge--danger\">Withdrawn</span> page only</span>\n          <span><span class=\"ds-badge ds-badge--new\">NEW</span> sent this week</span>\n          <span><span class=\"ds-badge\">Festival pick</span></span>\n          <span><span class=\"ds-badge ds-badge--count\">14</span> films in all</span>\n          <span><a class=\"ds-badge ds-badge--tag\" href=\"#home\">coast</a> <a class=\"ds-badge ds-badge--tag\" href=\"#home\">silent</a></span>\n        </p>\n\n        <div class=\"ds-section\">\n      <div class=\"ds-dialog__backdrop\">\n        <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n          <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Withdraw this film? <a class=\"ds-dialog__close\" href=\"#crew\">close</a></h2>\n          <div class=\"ds-dialog__body\">\n            <p class=\"ds-dialog__text\">Its page stays, with the credits, but the film can no longer be played. You can show it again later.</p>\n          </div>\n          <div class=\"ds-dialog__actions\">\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Withdraw</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#crew\">Cancel</a>\n          </div>\n        </div>\n      </div>\n        </div>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"screenings\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Films</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li class=\"ds-breadcrumb__current\">Screenings</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Screenings</h1>\n        <p class=\"ds-page-header__text\">Evenings where these films are shown on a wall, with the crews in the room.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#send\">Announce an evening</a>\n      </div>\n    </div>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Where</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#screenings\">Near you <span class=\"ds-sidebar__count\">5</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">North quay <span class=\"ds-sidebar__count\">2</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">Old town <span class=\"ds-sidebar__count\">3</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">Everywhere <span class=\"ds-sidebar__count\">41</span></a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Crews showing</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Harbour Lights</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Pocket Tripod</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Clay Yard Films</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">When</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">This week <span class=\"ds-sidebar__count\">1</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">This month <span class=\"ds-sidebar__count\">5</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#screenings\">Next month <span class=\"ds-sidebar__count\">4</span></a></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Got a wall?</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">A sheet, a projector and ten chairs make an evening.</p>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-link\" href=\"#help\">How to hold one</a>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-head ds-head--first\">\n          <h2 class=\"ds-head__title\">This month near you</h2>\n          <ul class=\"ds-tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#screenings\">By date</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#screenings\">By place</a></li>\n          </ul>\n        </div>\n        <ol class=\"ds-list\">\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">7</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#screenings\">Shorts in the boathouse</a></h3>\n              <p class=\"ds-list__meta\">Old Quay Rowing Club, doors at seven</p>\n              <p class=\"ds-list__meta\">38 people going</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">12</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#screenings\">First films night</a></h3>\n              <p class=\"ds-list__meta\">The Lantern Room, bring a cushion</p>\n              <p class=\"ds-list__meta\">21 people going</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">20</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#screenings\">Animation by hand</a></h3>\n              <p class=\"ds-list__meta\">Mill Street Library, free</p>\n              <p class=\"ds-list__meta\">9 people going</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">NOV</span><span class=\"ds-list__day\">28</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#screenings\">Films about work</a></h3>\n              <p class=\"ds-list__meta\">Clay Yard, in the drying shed</p>\n              <p class=\"ds-list__meta\">14 people going</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__date\"><span class=\"ds-list__month\">DEC</span><span class=\"ds-list__day\">3</span></div>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#screenings\">The year in ten minutes</a></h3>\n              <p class=\"ds-list__meta\">The Lantern Room</p>\n              <p class=\"ds-list__meta\">6 people going</p>\n            </div>\n          </li>\n        </ol>\n\n        <div class=\"ds-head\">\n          <h2 class=\"ds-head__title\">Evenings by Harbour Lights</h2>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <h2 class=\"ds-empty__title\">No screenings planned</h2>\n          <p class=\"ds-empty__text\">This crew has not announced an evening yet.</p>\n          <a class=\"ds-button\" href=\"#send\">Announce one</a>\n        </div>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"send\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Films</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li><a class=\"ds-link\" href=\"#crew\">Harbour Lights</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li class=\"ds-breadcrumb__current\">Send in a film</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Send in a film</h1>\n        <p class=\"ds-page-header__text\">Tell us about the film first. The file itself is sent on the next page.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#help\">Read the house rules</a>\n      </div>\n    </div>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Four steps</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#send\">1. Details</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#send\">2. The file</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#send\">3. Credits</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#send\">4. Send</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Good to read</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">What to send</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">Music and rights</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#crew\">Your crew page</a></li>\n          </ul>\n        </nav>\n      </div>\n\n      <div class=\"ds-page__main\">\n\n        <div data-component=\"notice\">\n          <p class=\"ds-notice ds-notice--error is-first\"><span class=\"ds-notice__title\">Not saved yet.</span> One of the details below needs another look.</p>\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Draft kept.</span> What you have typed stays here for a week, so you can come back to it.</p>\n        </div>\n\n        <div class=\"ds-head ds-head--after\">\n          <h2 class=\"ds-head__title\">Film details</h2>\n          <ul class=\"ds-tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#send\">About</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#send\">Credits</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#send\">Files</a></li>\n          </ul>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#\">\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-title\">Title</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input\" id=\"f-title\" type=\"text\" value=\"Low Tide Letters\">\n            </div>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-len\">Length</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input is-error\" id=\"f-len\" type=\"text\" value=\"about six\">\n              <p class=\"ds-form__error\">Give the length in minutes, as a number.</p>\n            </div>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-kind\">Kind</label>\n            <div class=\"ds-form__field\">\n              <select class=\"ds-form__select\" id=\"f-kind\">\n                <option>Documentary</option>\n                <option>Animation</option>\n                <option>Fiction</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-about\">In a few words</label>\n            <div class=\"ds-form__field\">\n              <textarea class=\"ds-form__textarea\" id=\"f-about\">Letters found in a beach hut, read aloud by the people who live nearby.</textarea>\n              <p class=\"ds-form__hint\">Shown under the player. Two sentences are plenty.</p>\n            </div>\n          </div>\n          <div class=\"ds-form__row\">\n            <span class=\"ds-form__label\">Comments</span>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Let viewers leave comments</label>\n            </div>\n          </div>\n          <div class=\"ds-form__actions\">\n            <button class=\"ds-button\" type=\"button\">Save details</button>\n            <button class=\"ds-button ds-button--secondary\" type=\"button\">Preview page</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#crew\">Cancel</a>\n          </div>\n        </form>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"help\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Films</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li><a class=\"ds-link\" href=\"#help\">Help</a></li>\n      <li class=\"ds-breadcrumb__sep\">/</li>\n      <li class=\"ds-breadcrumb__current\">Sending in a film</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Help</h1>\n        <p class=\"ds-page-header__text\">How films get here, who looks at them first and what happens after.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#send\">Send in a film</a>\n      </div>\n    </div>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Help</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#help\">Sending in a film</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">House rules</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">Player trouble</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">Joining</a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#help\">Who runs this</a></li>\n          </ul>\n        </nav>\n      </div>\n\n      <div class=\"ds-page__main\">\n      <div class=\"ds-prose\" data-component=\"typography\">\n        <h1>Sending in a film</h1>\n        <p>Any crew can send a film of twenty minutes or less. It is watched by two volunteers first, and <mark>nearly everything is accepted</mark>; see the <a href=\"#help\">house rules</a> for the few exceptions.</p>\n        <h2>What to send</h2>\n        <p>One file, with the sound mixed in. <strong>Do not add our name to the titles</strong>; the film is yours and stays yours.</p>\n        <h3>Before you send</h3>\n        <ul>\n          <li>Name everyone who worked on it.</li>\n          <li>Check that the music is yours to use.</li>\n          <li>Write two sentences about the film.</li>\n        </ul>\n        <p>Every crew page has a feed; add <code>/feed</code> to its address.</p>\n        <h2>After it is accepted</h2>\n        <p>The film gets a page of its own with the crew named on it, and it joins the list on <a href=\"#crew\">your crew page</a>. You can withdraw it at any time; the page stays, the film stops playing.</p>\n      </div>\n\n        <div class=\"ds-accordion ds-accordion--prose\" data-component=\"accordion\">\n          <details class=\"ds-accordion__item is-first\" open>\n            <summary class=\"ds-accordion__title\">How long until my film shows?</summary>\n            <p class=\"ds-accordion__body\">Two volunteers watch it within a week. You get a message either way.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__title\">Can I replace the file later?</summary>\n            <p class=\"ds-accordion__body\">Yes, from your crew page. The comments and the count stay.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__title\">The player stops halfway</summary>\n            <p class=\"ds-accordion__body\">Pause it for a minute and let the grey bar run ahead of the red one.</p>\n          </details>\n        </div>\n\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">Where to go from here</h2>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#send\">Send in your film</a>\n            <a class=\"ds-link is-visited\" href=\"#crew\">See a crew page</a>\n            <a class=\"ds-link is-hover\" href=\"#screenings\">Find a screening</a>\n            <a class=\"ds-link is-active\" href=\"#home\">Back to the films</a>\n          </p>\n        </section>\n      </div>\n    </div>\n\n  </section>\n\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <p class=\"ds-footer__news\">New this month: every crew page now has a feed, and films can carry subtitles.</p>\n  <div class=\"ds-footer__columns\">\n      <div>\n        <h2 class=\"ds-footer__head\">Send a film</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#send\">For crews</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">For schools</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__head\">Watch</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">New this week</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Most watched</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Festival picks</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">By length</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__head\">Around town</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#screenings\">Screenings</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#screenings\">Film clubs</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#screenings\">Add an evening</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__head\">About</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">Who runs this</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">Contact</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">Notebook</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__head\">Help</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">Questions</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">Player trouble</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#help\">House rules</a></li>\n        </ul>\n      </div>\n  </div>\n  <p class=\"ds-footer__legal\">Films belong to the crews who made them. chronoskin is run by volunteers.</p>\n</footer>\n\n</div>\n</body>\n</html>",
    "style.json": "{\n  \"id\": \"v1.web-2-0-gloss.portal.s03.p11.t11.u11\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"web-2-0-gloss\",\n    \"years\": [\n      2005,\n      2009\n    ]\n  },\n  \"archetype\": \"portal\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-w2-3bbb\",\n  \"short\": \"v1-w2-3bbb\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f3f3cc;\n  --color-surface-strong: #dde7b0;\n  --color-bar: #666633;\n  --color-bar-text: #ffffcc;\n  --color-bar-alt: #f3f3cc;\n  --color-bar-alt-text: #333300;\n  --color-inverse: #333300;\n  --color-inverse-text: #ffffcc;\n  --color-text: #333300;\n  --color-text-muted: #999999;\n  --color-heading: #333300;\n  --color-heading-alt: #933100;\n  --color-link: #336699;\n  --color-link-quiet: #666633;\n  --color-link-visited: #666666;\n  --color-link-hover: #933100;\n  --color-link-active: #333300;\n  --color-border: #aaaaaa;\n  --color-border-strong: #999966;\n  --color-border-muted: #d6d6ad;\n  --color-accent: #9eb847;\n  --color-accent-text: #333300;\n  --color-accent-alt: #933100;\n  --color-fill-1: #f3f3cc;\n  --color-fill-2: #f8fdff;\n  --color-fill-3: #dde7b0;\n  --color-fill-4: #ffffcc;\n  --color-button: #a94400;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffcc;\n  --color-button-secondary: #f3f3cc;\n  --color-button-secondary-text: #333300;\n  --color-input: #f8fdff;\n  --color-input-text: #333300;\n  --color-input-border: #999966;\n  --color-disabled: #eeeeee;\n  --color-disabled-text: #999999;\n  --color-danger: #aa0000;\n  --color-danger-surface: #fde8dc;\n  --color-success: #5c7a1a;\n  --color-warning: #ffe840;\n  --color-notice: #ffffcc;\n  --color-notice-text: #333300;\n  --color-focus: #336699;\n  --color-shadow: #333300;\n  --color-overlay: rgba(51, 51, 0, 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Georgia, \"Times New Roman\", serif;\n  --font-heading: Georgia, \"Times New Roman\", serif;\n  --font-ui: \"Lucida Grande\", Arial, Helvetica, sans-serif;\n  --font-mono: \"Courier New\", Courier, monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 11px;\n  --text-large: 15px;\n  --text-display: 22px;\n  --text-h1: 20px;\n  --text-h2: 17px;\n  --text-h3: 14px;\n  --line-body: 1.3;\n  --line-heading: 1.2;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0.1em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 3px;\n  --radius-panel: 6px;\n  --radius-pill: 3px;\n  --radius-page: 6px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 12%) 0, var(--color-bar) 100%);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%) 0, var(--color-button) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 6%) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}