{
  "id": "v1-w9-8281-dr",
  "long_id": "v1.windows-9x.shop.s08.p02.t08.u01.dr",
  "name": "Desktop grey disc player shop, night, 1999",
  "era": {
    "slug": "windows-9x",
    "code": "w9",
    "name": "Desktop grey",
    "years": [
      1995,
      2001
    ],
    "description": "Web pages dressed as the desktop of 1995 to 2001: silver-grey windows with a navy title bar, raised and sunken bevels on every button and field, a small pixel-sized sans, and dialogs, tabs and tree lists borrowed from the operating system."
  },
  "archetype": "shop",
  "mode": "mix",
  "viewport": {
    "width": 800,
    "fluid": false
  },
  "density": "roomy",
  "summary": "A mail-order record shop laid out as the disc player program of a late 1990s desktop: one narrow window whose deck carries a display, a basket read-out and a row of numbered preset keys, with everything under it in full-width bands, the disc of the week in a large display first. This pack shows it in a night scheme: charcoal windows on a black squared desktop, a red title bar with a sheen, a pale display with dark lettering, amber selection and lamps, slab keys lit along the top edge and shaded along the bottom, and tall condensed capitals over a narrow sans. Music shops, radio stations and multimedia CD-ROM menus dressed themselves as the player on the visitor's own desktop from 1996 to 2001.",
  "url": "https://chrono.skin/s/v1-w9-8281-dr",
  "preview_url": "https://chrono.skin/s/v1-w9-8281-dr/specimen.html",
  "files": {
    "STYLE.md": "# Desktop grey disc player shop, night, 1999\n\n## Summary\n\nA mail-order record shop laid out as the disc player program of a late 1990s desktop: one narrow window whose deck carries a display, a basket read-out and a row of numbered preset keys, with everything under it in full-width bands, the disc of the week in a large display first. This pack shows it in a night scheme: charcoal windows on a black squared desktop, a red title bar with a sheen, a pale display with dark lettering, amber selection and lamps, slab keys lit along the top edge and shaded along the bottom, and tall condensed capitals over a narrow sans. Music shops, radio stations and multimedia CD-ROM menus dressed themselves as the player on the visitor's own desktop from 1996 to 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 720px, one window (`.ds-page__window`, also a `.ds-window`) centred on the desktop of an 800px screen with a `--space-6` margin above and below.\n- The specimen is one example site, the shop, of five views. `.ds-nav` (title bar, deck and preset keys) and `.ds-footer` (status bar) are written once, inside the window and outside the views; each view is a `.ds-view` and one shows at a time.\n- Navigation is at the top, in three rows: the title bar; the deck `.ds-nav__deck` with the display at the left and the basket read-out with its key at the right; the row of five preset keys `.ds-nav__links`, equal in width, each a number and a lamp over a name.\n- Every view is `.ds-page__body`: a single column of full-width bands `--space-4` apart. There is no side column, except in the catalogue.\n- Home view: the `.ds-hero` (the large display: a sleeve, the title, a lead and one line, two keys stacked at the right), the `.ds-stat` row of four counters, a `.ds-heading`, the `.ds-grid` of four discs in their cases, and a `.ds-split` of two `.ds-panel`s: the best sellers as a `.ds-list` and how the shop works.\n- Inner pages keep the title bar, the deck, the preset keys and the status bar and drop the large display, the counters and the cases. They open with the `.ds-breadcrumb` (small links), then the `.ds-page-header`: a raised band with the title and one line at the left and one key at the right. Tabs come after the page header, straight above the list view they filter; there is no sheet.\n- Views: `home` is new this week. `catalogue` is one shelf: under the page header, `.ds-page__columns` puts the `.ds-sidebar` list box of shelves (`--size-side`, 148px) beside `.ds-page__main` with the band keys, the list view of discs and the pagination keys beside the key of stock labels. `disc` is one disc: `.ds-split--cover` with the sleeve (`--size-cover`, 208px) over a panel of label details at the left, the track list and the review in a well at the right. `basket` is two notices, the list view of the basket, the row of keys, then the empty state beside the confirmation dialog and a panel. `order` is `.ds-split--wide`: the form in a group box beside a panel with the sum. The preset key of the view that is showing stays down, its name bold, with its lamp lit; key 1 is marked when the address names no view.\n- Fixed sizes: `--size-pos` 20px position field of the chart; `--size-ctl` 16px caption button and `--size-glyph` 8px glyph (a lamp is two glyphs wide); `--size-icon` 32px and `--size-icon-small` 16px icons (the sleeve of the large display is four icons wide); `--size-check` 13px check box and radio button; `--size-label` 104px form label column; `--size-field` 200px text field; `--size-dialog` 316px, also the narrow column of `.ds-split--wide`; `--size-button` 75px least key width; `--size-block` 8px progress block.\n- Spacing scale: `--space-0` 1px is the hairline step; `--space-1` 2px the gap between preset keys and between a counter and its label; `--space-2` 4px the padding of keys and the height of a lamp; `--space-3` 6px cell and field padding, the padding of the deck and the gap between keys in a row; `--space-4` 8px the gap between bands, between cases and between columns; `--space-5` 12px the padding of the large display, panels and dialogs; `--space-6` 16px the margin of the desktop round the window and the gap inside the large display.\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- `--font-body` and `--font-ui` are the narrow sans at `--text-base` and `--text-ui` (13px); keys are `--weight-ui`. `--font-heading` is the heavy condensed face, set in capitals by `--heading-transform` with `--heading-tracking`: the title of the large display (`--text-display`, 32px, `--display-tracking`), page titles (`--text-h1`, 22px), panel and section titles (`--text-h2`, 16px) and the brand name. `--font-mono` is the lettering of displays: both lines of the deck display, the small line of the large display, counters, key numbers and chart positions. `--text-small` (11px) is for artists, weeks, counts and the breadcrumb. Bold is `--weight-bold`; nothing is lighter than `--weight-body`.\n- Links in text are `--color-link`, underlined by `--link-decoration`, and lose the line under the pointer (`--link-decoration-hover`); quiet links and the rows of the list box use `--link-decoration-quiet`.\n- Which text sits on which fill, the same in every layout of the era:\n  - The window face is `--color-canvas` (`--fill-panel` for windows, cases and dialogs) and carries `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n  - A sunken well (panels, the list box, list views, the basket read-out, the review, the empty state) is `--color-surface` and carries the same text and link tokens. `--color-surface-alt` is the alternate row, a preset key held down, inline code and the position field of the chart; `--color-surface-strong` is a total row and a lamp that is off. They carry `--color-text`.\n  - A display (the deck display, the large display, the figure of a counter) is `--fill-inverse` with `--color-inverse-text` and nothing else: no heading, muted or link colour is used on it.\n  - The title bar is `--fill-bar` with `--color-bar-text`. The deck, the page header band and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n  - The selection (the current band key, the open shelf, a selected row, a lit lamp, progress blocks, the plain badge) is `--fill-accent` with `--color-accent-text`; links and icons inside a selection inherit that colour.\n  - Keys are `--fill-button` with `--color-button-text` (`--fill-button-hover` and `--color-button-hover-text` under the pointer); the lesser key and the band keys are `--fill-button-secondary` with `--color-button-secondary-text`; a disabled key is `--color-disabled` with `--color-disabled-text`; the destructive key is `--fill-button` with a bold label in `--color-danger`.\n  - Fields are `--fill-input` with `--color-input-text`; `--color-input-border` outlines the check box and the radio button.\n  - `--color-fill-1` to `--color-fill-4` are the sleeves and carry `--color-text` (the drawing on them).\n  - Prices are `--color-heading-alt`, bold. Notices are `--color-notice` with `--color-notice-text` inside a line of `--color-border-strong`; the error notice is `--color-danger` on `--color-danger-surface`.\n  - Status labels print `--color-success`, `--color-warning` and `--color-danger` as text and frame on `--color-surface`.\n  - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, sleeves and selections.\n- Edges. Nothing has a border of its own except thin lines; every raised or sunken edge is a `box-shadow` token drawn inside the box:\n  - `--shadow-panel` frames the window, `--shadow-dialog` a dialog. Both also throw a hard shadow.\n  - `--shadow-control` is every raised part: buttons, preset keys, band keys, caption buttons, the page header band, column heads, the cases of the discs, pagination keys, the brand tile. `--shadow-control-hover` replaces it under the pointer.\n  - `--shadow-control-pressed` is everything sunken: displays, counters, fields, wells, panels, the list box, status cells, the check box, the progress bar, a key held down, the current band key and pagination key.\n  - `--border-width-strong` is the thickness of those edges: padding that must clear an edge is written `calc(var(--border-width-strong) + var(--space-N))`.\n  - `--border-width`, `--border-style` and `--color-border` draw the thin lines: the line under a panel title, the frame of a lamp and of a chart position, group boxes, the etched rule (over `--color-border-muted`); a sleeve is framed in `--color-border-strong`; table row lines are `--color-surface-alt`.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\nThe name `chronoskin` and its mark are placeholders for the installing project's own name and mark.\n\n- `.ds-page`: the desktop, on `<body>`; `.ds-page__window` is the one window, `.ds-page__body` the column of bands of a view. `.ds-page__columns` with `.ds-page__main` is the one two-column arrangement, for a list box beside a list view.\n- `.ds-window`: a raised frame; `.ds-window__title` is its title bar (`--inactive` for a window without the focus) with `.ds-window__caption` and the `.ds-window__ctl` caption buttons (`--min`, `--max`, `--close`).\n- `.ds-nav`: the title bar, the deck and the preset keys. `.ds-nav__deck` holds `.ds-nav__display` (a `.ds-nav__small` line over a `.ds-nav__line`) and `.ds-nav__basket` (a sunken read-out with a secondary key). `.ds-nav__links` is the row of keys; each `.ds-nav__item` an equal share, `.ds-nav__link` a key with `.ds-nav__num` (the number and the `.ds-nav__lamp`) over `.ds-nav__name`. The current key is held down and its lamp is lit.\n- `.ds-brand`: the mark and the name at the left of the title bar. `.ds-brand__mark` is a small key dressed like the default button, `.ds-brand__name` the name in the heading face.\n- `.ds-hero`: the large display, home view only. `.ds-hero__sleeve` (a `.ds-sleeve`) at the left, `.ds-hero__body` with `.ds-hero__label` (monospace small print), `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__text`, and `.ds-hero__action`, a column of keys, at the right.\n- `.ds-page-header`: the head of an inner page, a raised band: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, and `.ds-page-header__action` at the right.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n- `.ds-prose`: running text in a well: `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `li`, `strong`, `code`; `.ds-prose__lead` is the lead line.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for tool and footer links, `.ds-link--strong` for a bold one. `.ds-links` wraps a line of links.\n- `.ds-button`: a raised key at least `--size-button` wide; the plain class is the default key, inside one more line. `.ds-button--secondary` is every other key, `.ds-button--danger` the destructive one, `.ds-button--large` a bigger one. States `is-hover`, `is-pressed`, `is-focus`, `is-disabled` or `disabled`. `.ds-buttons` lays out a row; a `.ds-find__fill` spacer pushes keys apart.\n- `.ds-form`: two columns, `.ds-form__label` and `.ds-form__field`. Controls: `.ds-form__input` (`--short`, `--wide`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check` and `.ds-form__radio` inside a `.ds-form__option`. `.ds-form__hint` is a small line under a field, `.ds-form__error` a bold line in the danger colour, `.ds-form__actions` the row of keys.\n- `.ds-table`: a list view: a well whose `.ds-table__head` cells are raised (`--num` right-aligned). `.ds-table__row` (`--alt` tinted, `is-selected` in the selection colours), `.ds-table__cell` (`--num`, `--group` for a total row), `.ds-table__caption`.\n- `.ds-list`: a chart. Each `.ds-list__item` is a `.ds-list__pos` (the position in a small framed field), a `.ds-list__text` and a `.ds-list__meta`.\n- `.ds-panel`: a sunken well with a `.ds-panel__title` in the heading face over a thin line; `.ds-panel__text` is a paragraph in it, `.ds-panel__body` a plain holder. `.ds-panel--fill` takes spare height.\n- `.ds-stat`: the row of counters; each `.ds-stat__item` is a `.ds-stat__value` (a small display, monospace, right-aligned) over its `.ds-stat__label`.\n- `.ds-grid`: discs in their cases, four to a row. A `.ds-grid__cell` is a raised card: a `.ds-sleeve`, `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__foot` with the `.ds-price` and a badge.\n- `.ds-sleeve`: a square of block colour with a drawing on it (`--2` to `--4` take the other block colours).\n- `.ds-tabs`: band keys joined in a row: `.ds-tabs__item` holds a `.ds-tabs__tab`; the current one (`is-current`) is held down in the selection colours. `.ds-tabs__fill` and `.ds-tabs__note` put a small count at the right end.\n- `.ds-badge`: a small bold label in the selection colours. `.ds-badge--count` is a plain muted count. Status: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`. `.ds-badges` lays out a row.\n- `.ds-sidebar`: a list box: `.ds-sidebar__title` over the sunken `.ds-sidebar__list`; each `.ds-sidebar__link` is a row with a `.ds-sidebar__count` at the right, the open one `is-current`.\n- `.ds-notice`: the tip box inside a dark line; `.ds-notice__label` is the bold lead word, `.ds-notice--error` the error form. `.ds-notices` stacks several.\n- `.ds-pagination`: a row of small keys: `.ds-pagination__label`, then `.ds-pagination__link`s; `is-current` is pressed and bold, `is-disabled` greyed.\n- `.ds-breadcrumb`: the path in small type, the `.ds-breadcrumb__item`s parted by a slash; the last is `is-current`.\n- `.ds-dialog`: a small window `--size-dialog` wide, shown where it would open: `.ds-dialog__title`, `.ds-dialog__content` with a large icon and the `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: an empty well with a large icon, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: the status bar, a `.ds-status` row of sunken `.ds-status__cell`s (`--wide` takes the free width).\n- `.ds-icon` (`--large`, `--plain`), `.ds-well`, `.ds-rule`, `.ds-group` with `.ds-group__title`, `.ds-props` with `.ds-props__label` and `.ds-props__value`, `.ds-progress` with `.ds-progress__block`: the small parts every layout of the era shares.\n- `.ds-heading`: a section title. `.ds-split`: two equal columns of the same height (`--cover` and `--wide` are the two uneven forms). `.ds-stack`: a column of blocks (`--tight` closer, `--fill` takes spare height). `.ds-find`: a row of a label, a field and keys.\n\n## Never\n\n- `row-gap <= 10px`: rows of lists and list views touch or sit 1px to 4px apart.\n- `block-gap <= 20px`: bands inside the window are 8px apart, never more than 16px.\n- `content-width <= 720px`: everything is inside the one 720px window.\n- `font-size >= 11px`: artists and counts are 11px, nothing smaller.\n- `font-size <= 32px`: the title in the large display is the largest text; page titles stop at 22px.\n- `font-weight >= 400`: only regular and bold.\n- `font-families <= 3`: the narrow sans, the condensed heading face and a monospace.\n- `letter-spacing <= 1px`: headings are tracked by half a pixel, the largest title by one.\n- `uppercase-text <= 12%`: only headings are set in capitals.\n- `border-radius <= 0px`: the desktop had no rounded corner.\n- `box-shadow-blur <= 0px`: every shadow is a hard 1px or 2px bevel line; nothing is blurred.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 3%`: the title bars are the only gradient.\n- `border-width <= 2px`: thin lines are 1px; the widest stroke is the 2px top of a caption glyph.\n- `transition = none`: nothing eases on hover.\n- `animation = none`: no CSS animation.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new page is a column of full-width bands under a `.ds-page-header`; anything that holds content is a `.ds-panel` or a `.ds-well`; anything that lists is a `.ds-table` or a `.ds-list`; anything that reads out a figure or a line of status is a display on `--fill-inverse` with `--color-inverse-text` and the monospace face. Anything pressed or typed into takes `--shadow-control-pressed`, anything pushed takes `--shadow-control`. Clear every edge with `calc(var(--border-width-strong) + ...)` padding, keep navigation in the preset keys and out of side columns, and never add a radius, a blurred shadow, a gradient outside the `--fill-*` tokens, a hover animation or a colour of your own.\n",
    "components.css": "/* Layout tokens (structure part). A record shop laid out as a disc player,\n   one 720px window on an 800px screen: a deck with a display and a row of\n   numbered preset keys at the top, then full-width bands, one under the other. */\n:root {\n  --size-page: 720px;\n  --size-side: 148px;\n  --size-cover: 208px;\n  --size-pos: 20px;\n  --size-ctl: 16px;\n  --size-glyph: 8px;\n  --size-icon: 32px;\n  --size-icon-small: 16px;\n  --size-check: 13px;\n  --size-label: 104px;\n  --size-field: 200px;\n  --size-dialog: 316px;\n  --size-button: 75px;\n  --size-block: 8px;\n  --space-0: 1px;\n  --space-1: 3px;\n  --space-2: 5px;\n  --space-3: 8px;\n  --space-4: 10px;\n  --space-5: 15px;\n  --space-6: 20px;\n}\n\n/* ---------- shell: the desktop and the player window ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-6) 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__window {\n  width: var(--size-page);\n  margin: 0 auto;\n  background: var(--color-canvas);\n  border-radius: var(--radius-page);\n}\n/* The bands of a view, one under the other. */\n.ds-page__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-3);\n}\n/* The one view with a side column: the list of shelves beside the catalogue. */\n.ds-page__columns {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  gap: var(--space-4);\n  align-items: stretch;\n}\n.ds-page__main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n  align-items: stretch;\n}\n/* A disc: its sleeve at the left, everything about it at the right. */\n.ds-split--cover {\n  grid-template-columns: var(--size-cover) minmax(0, 1fr);\n}\n/* The basket: the wide list at the left, the narrow column at the right. */\n.ds-split--wide {\n  grid-template-columns: minmax(0, 1fr) var(--size-dialog);\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-stack--tight {\n  gap: var(--space-2);\n}\n.ds-heading {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- window: a raised frame with a title bar ---------- */\n.ds-window {\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-1));\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-window__title {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);\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-bold);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n/* A window that does not have the focus. */\n.ds-window__caption {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ds-window__controls {\n  display: flex;\n  flex: none;\n  gap: var(--space-1);\n}\n/* Caption buttons: small raised squares, the glyph drawn in CSS. */\n.ds-window__ctl {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--size-ctl);\n  height: calc(var(--size-ctl) - var(--space-1));\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-window__ctl::before,\n.ds-window__ctl::after {\n  content: \"\";\n  position: absolute;\n  box-sizing: border-box;\n}\n.ds-window__ctl--min::before {\n  left: var(--space-2);\n  bottom: calc(var(--space-1) + var(--space-0));\n  width: calc(var(--size-glyph) - var(--space-1));\n  height: var(--space-1);\n  background: currentColor;\n}\n.ds-window__ctl--max::before {\n  left: calc(50% - var(--size-glyph) / 2);\n  top: calc(50% - var(--size-glyph) / 2);\n  width: var(--size-glyph);\n  height: var(--size-glyph);\n  border: var(--space-0) solid currentColor;\n  border-top-width: var(--space-1);\n}\n.ds-window__ctl--close::before,\n.ds-window__ctl--close::after {\n  left: calc(50% - var(--size-glyph) / 2 - var(--space-0));\n  top: calc(50% - var(--space-0));\n  width: calc(var(--size-glyph) + var(--space-1));\n  height: var(--space-1);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-window__ctl--close::after {\n  transform: rotate(-45deg);\n}\n\n/* ---------- small things used everywhere ---------- */\n/* Etched line: a dark rule over a light one. */\n.ds-rule {\n  height: 0;\n  margin: var(--space-4) 0;\n  border: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n/* Pixel icon: inline SVG painted with the text colour of its place. */\n.ds-icon {\n  display: inline-block;\n  flex: none;\n  width: var(--size-icon-small);\n  height: var(--size-icon-small);\n  vertical-align: text-bottom;\n  color: var(--color-heading-alt);\n}\n.ds-icon svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-icon--large {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n/* Sunken well: the white field that holds lists, trees and documents. */\n.ds-well {\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-3));\n  background: var(--color-surface);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n}\n/* Progress bar made of blocks. */\n.ds-progress {\n  display: inline-flex;\n  gap: var(--space-1);\n  box-sizing: border-box;\n  padding: calc(var(--border-width-strong) + var(--space-0));\n  background: var(--color-surface);\n  box-shadow: var(--shadow-control-pressed);\n  vertical-align: middle;\n}\n.ds-progress__block {\n  width: var(--size-block);\n  height: calc(var(--size-block) + var(--space-2));\n  background: var(--fill-accent);\n}\n.ds-progress__block--empty {\n  background: transparent;\n}\n/* Status bar: sunken cells. */\n.ds-status {\n  display: flex;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-status__cell {\n  padding: calc(var(--border-width-strong) + var(--space-0)) var(--space-3);\n  box-shadow: var(--shadow-control-pressed);\n  white-space: nowrap;\n}\n.ds-status__cell--wide {\n  flex: 1;\n  min-width: 0;\n  white-space: normal;\n}\n/* Group box: a thin frame with its caption cut into the top edge. */\n.ds-group {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-2) var(--space-4) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-group__title {\n  padding: 0 var(--space-2);\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}\n/* Property rows: a label column and a value column. */\n.ds-props {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  column-gap: var(--space-5);\n  row-gap: var(--space-2);\n  align-items: center;\n  margin: 0;\n}\n.ds-props__label {\n  color: var(--color-text-muted);\n}\n.ds-props__value {\n  margin: 0;\n}\n/* Tree list: nested rows joined by dotted guide lines. */\n.ds-tree__link:hover,\n.ds-tree__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-tree__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-tree__link.is-current .ds-icon {\n  color: inherit;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n.ds-links {\n  margin: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  margin-top: 0;\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 calc(var(--space-6) + var(--space-4));\n}\n.ds-prose li {\n  padding: 0 0 var(--space-1);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n}\n\n/* ---------- buttons ---------- */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n/* The primary button is the default button of a dialog: the same raised key\n   as every other, inside one more dark line. */\n.ds-button {\n  display: inline-block;\n  box-sizing: border-box;\n  min-width: var(--size-button);\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-align: center;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: default;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-pressed {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: calc(var(--space-2) * -1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  background-clip: padding-box;\n  color: var(--color-button-secondary-text);\n  border-color: transparent;\n}\n.ds-button--large {\n  padding: var(--space-3) var(--space-6);\n  font-size: var(--text-large);\n}\n/* Destructive action: the same key, the label in the bold danger colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--fill-button);\n  background-clip: padding-box;\n  color: var(--color-danger);\n  border-color: transparent;\n  font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  background-clip: padding-box;\n  color: var(--color-disabled-text);\n  border-color: transparent;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  column-gap: var(--space-4);\n  row-gap: var(--space-3);\n  align-items: baseline;\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__label {\n  color: var(--color-text);\n}\n.ds-form__field {\n  min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  box-sizing: border-box;\n  max-width: 100%;\n  margin: 0;\n  padding: calc(var(--border-width-strong) + var(--space-1)) calc(var(--border-width-strong) + var(--space-2));\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: 0;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  transition: var(--transition);\n}\n.ds-form__input {\n  width: var(--size-field);\n}\n.ds-form__input--short {\n  width: calc(var(--size-field) / 3);\n}\n.ds-form__input--wide {\n  width: 100%;\n}\n.ds-form__textarea {\n  display: block;\n  width: 100%;\n  resize: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: calc(var(--border-width-strong) * -1 - var(--space-0));\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__option {\n  display: inline-flex;\n  align-items: center;\n  margin: 0 var(--space-5) 0 0;\n}\n.ds-form__check {\n  appearance: none;\n  box-sizing: border-box;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0 var(--space-3) 0 0;\n  padding: calc(var(--border-width-strong) + var(--space-0));\n  background: var(--fill-input);\n  border: 0;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  outline: var(--border-width) var(--border-style) var(--color-input-border);\n  outline-offset: calc(var(--border-width) * -1);\n}\n/* The tick is a block of the field's text colour inside the field's fill. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--color-input-text);\n}\n.ds-form__hint {\n  display: block;\n  padding: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__error {\n  display: block;\n  padding: var(--space-1) 0 0;\n  color: var(--color-danger);\n  font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n  grid-column: 1 / -1;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-3);\n  padding: var(--space-2) 0 0;\n}\n\n/* ---------- table: a list view in a sunken well, raised column heads ---------- */\n.ds-table {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--border-width-strong);\n  border-collapse: separate;\n  border-spacing: 0;\n  background: var(--color-surface);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n}\n.ds-table__head {\n  padding: calc(var(--border-width-strong) + var(--space-0)) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-align: left;\n  white-space: nowrap;\n}\n.ds-table__head--num {\n  text-align: right;\n}\n.ds-table__cell {\n  padding: var(--space-1) var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-surface-alt);\n  text-align: left;\n  vertical-align: baseline;\n}\n.ds-table__cell--num {\n  text-align: right;\n  white-space: nowrap;\n}\n.ds-table__cell--group {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-table__row--alt .ds-table__cell {\n  background: var(--color-surface-alt);\n}\n/* The selected row of a list view. */\n.ds-table__row.is-selected .ds-table__cell {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-table__row.is-selected .ds-link,\n.ds-table__row.is-selected .ds-icon {\n  color: inherit;\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding: var(--space-2) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-small);\n  text-align: left;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-2);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n}\n.ds-badge--count {\n  padding: 0;\n  background: transparent;\n  color: var(--color-text-muted);\n  border-color: transparent;\n  font-weight: var(--weight-body);\n}\n/* Status labels: the status colour as text and frame on the well colour. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  background: var(--color-surface);\n  border-color: currentColor;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* ---------- notice: the pale tip box with a dark line round it ---------- */\n.ds-notices {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n.ds-notice {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-notice__label {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- pagination: a row of small keys ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-pagination__label {\n  padding: 0 var(--space-3) 0 0;\n}\n.ds-pagination__link {\n  display: block;\n  padding: calc(var(--border-width-strong) + var(--space-0)) calc(var(--border-width-strong) + var(--space-3));\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  cursor: default;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-button-hover-text);\n}\n.ds-pagination__link.is-current {\n  box-shadow: var(--shadow-control-pressed);\n  font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* ---------- dialog: a small window with an icon, a message and keys ---------- */\n.ds-dialog {\n  position: static;\n  box-sizing: border-box;\n  width: var(--size-dialog);\n  max-width: 100%;\n  margin: var(--space-5) auto var(--space-2);\n  padding: calc(var(--border-width-strong) + var(--space-1));\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-dialog__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);\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-bold);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__content {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-5);\n  padding: var(--space-5);\n}\n.ds-dialog__body {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-5) var(--space-5);\n}\n\n/* ---------- search row ---------- */\n.ds-find {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-find__fill {\n  flex: 1;\n}\n\n/* ---------- radio button: the round sunken field ---------- */\n.ds-form__radio {\n  appearance: none;\n  box-sizing: border-box;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0 var(--space-3) 0 0;\n  padding: calc(var(--border-width-strong) + var(--space-0));\n  background: var(--fill-input);\n  border: 0;\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-pressed);\n  outline: var(--border-width) var(--border-style) var(--color-input-border);\n  outline-offset: calc(var(--border-width) * -1);\n}\n.ds-form__radio:checked::before,\n.ds-form__radio.is-checked::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--color-input-text);\n  border-radius: 50%;\n}\n\n/* ---------- footer: the status bar of the window ---------- */\n.ds-footer {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n\n/* ---------- nav: the title bar, the deck with its display, the preset keys ---------- */\n.ds-nav {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  text-decoration: none;\n}\n/* The mark is the window's icon: a small key dressed like the default button. */\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  box-sizing: border-box;\n  width: calc(var(--size-ctl) + var(--space-2));\n  height: calc(var(--size-ctl) + var(--space-2));\n  padding: var(--border-width-strong);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n/* The deck: the display at the left, the basket read-out and its key at the right. */\n.ds-nav__deck {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-3);\n  padding: var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n/* The display: one line of small print over one line of running text. */\n.ds-nav__display {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-1)) calc(var(--border-width-strong) + var(--space-4));\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-mono);\n}\n.ds-nav__small {\n  font-size: var(--text-small);\n}\n.ds-nav__line {\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  white-space: nowrap;\n  overflow: hidden;\n}\n.ds-nav__basket {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-4);\n  padding: 0 calc(var(--border-width-strong) + var(--space-3));\n  background: var(--color-surface);\n  color: var(--color-text);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0 var(--space-3) var(--space-3);\n  list-style: none;\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__item {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n/* A preset key: its number over its name, a lamp along the top edge. */\n.ds-nav__link {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-1)) var(--space-4) calc(var(--border-width-strong) + var(--space-2));\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-nav__num {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-nav__lamp {\n  width: calc(var(--size-glyph) * 2);\n  height: var(--space-2);\n  background: var(--color-surface-strong);\n  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);\n}\n.ds-nav__name {\n  font-weight: var(--weight-bold);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n/* The key of the view that is showing stays down and its lamp is lit. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#catalogue:target) .ds-nav__link[href=\"#catalogue\"],\n.ds-page:has(#disc:target) .ds-nav__link[href=\"#disc\"],\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"],\n.ds-page:has(#order:target) .ds-nav__link[href=\"#order\"] {\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  box-shadow: var(--shadow-control-pressed);\n  font-weight: var(--weight-bold);\n}\n.ds-nav__link.is-current .ds-nav__lamp,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] .ds-nav__lamp,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] .ds-nav__lamp,\n.ds-page:has(#catalogue:target) .ds-nav__link[href=\"#catalogue\"] .ds-nav__lamp,\n.ds-page:has(#disc:target) .ds-nav__link[href=\"#disc\"] .ds-nav__lamp,\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"] .ds-nav__lamp,\n.ds-page:has(#order:target) .ds-nav__link[href=\"#order\"] .ds-nav__lamp {\n  background: var(--fill-accent);\n}\n\n/* ---------- hero: the large display with the disc of the week ---------- */\n.ds-hero {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-6);\n  padding: calc(var(--border-width-strong) + var(--space-5));\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-control-pressed);\n}\n/* The sleeve: a square of block colour with the disc drawn on it. */\n.ds-sleeve {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  aspect-ratio: 1;\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n}\n.ds-sleeve--2 {\n  background: var(--color-fill-2);\n}\n.ds-sleeve--3 {\n  background: var(--color-fill-3);\n}\n.ds-sleeve--4 {\n  background: var(--color-fill-4);\n}\n.ds-sleeve .ds-icon {\n  width: 50%;\n  height: 50%;\n  color: inherit;\n}\n.ds-hero__sleeve {\n  width: calc(var(--size-icon) * 4);\n}\n.ds-hero__body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-hero__label {\n  margin: 0;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n.ds-hero__text {\n  margin: 0;\n}\n.ds-hero__action {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--space-3);\n}\n\n/* ---------- stats: counters, the figure in a small display over its label ---------- */\n.ds-stat {\n  display: flex;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__item {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-width: 0;\n}\n.ds-stat__value {\n  padding: calc(var(--border-width-strong) + var(--space-0)) calc(var(--border-width-strong) + var(--space-3));\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-mono);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-align: right;\n}\n.ds-stat__label {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  text-align: right;\n}\n\n/* ---------- grid: discs in their cases, four to a row ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n/* A case: a raised card with the sleeve, the title, the artist and the price. */\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-3));\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control);\n  text-decoration: none;\n}\n.ds-grid__cell .ds-sleeve {\n  margin: 0 0 var(--space-2);\n}\n.ds-grid__title {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration);\n}\n.ds-grid__text {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-grid__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: auto 0 0;\n  padding: var(--space-2) 0 0;\n}\n.ds-price {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- list: a chart: the position in a small field, the disc, the weeks ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-1) 0;\n}\n.ds-list__pos {\n  flex: none;\n  box-sizing: border-box;\n  width: var(--size-pos);\n  padding: var(--border-width) 0;\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: center;\n}\n.ds-list__text {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__meta {\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  white-space: nowrap;\n}\n\n/* ---------- panel: a sunken well with a title over an etched line ---------- */\n.ds-panel {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding: calc(var(--border-width-strong) + var(--space-4)) calc(var(--border-width-strong) + var(--space-5));\n  background: var(--color-surface);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-panel__title {\n  margin: 0 0 var(--space-3);\n  padding: 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  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__body {\n  margin: 0;\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-3);\n}\n\n/* ---------- tabs: band keys, joined in a row, the current one held down ---------- */\n.ds-tabs {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n  display: flex;\n}\n.ds-tabs__tab {\n  display: block;\n  padding: calc(var(--border-width-strong) + var(--space-1)) var(--space-5);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: var(--shadow-control);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  box-shadow: var(--shadow-control-pressed);\n  font-weight: var(--weight-bold);\n}\n.ds-tabs__fill {\n  flex: 1;\n}\n.ds-tabs__note {\n  align-self: center;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- breadcrumb: the path, small, above the head of an inner page ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  padding: 0 var(--space-3);\n}\n.ds-breadcrumb__item.is-current {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- page header: a raised band with the title and one key ---------- */\n.ds-page-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: calc(var(--border-width-strong) + var(--space-3)) calc(var(--border-width-strong) + var(--space-5));\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-page-header__text {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n  margin: var(--space-1) 0 0;\n}\n.ds-page-header__action {\n  display: flex;\n  flex: none;\n  gap: var(--space-3);\n}\n\n/* ---------- sidebar: a list box of shelves, the open one selected ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n  flex: 1;\n  margin: 0;\n  padding: var(--border-width-strong);\n  list-style: none;\n  background: var(--color-surface);\n  color: var(--color-text);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-sidebar__link {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-3);\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n  font-size: var(--text-small);\n}\n\n/* ---------- empty state: a message in an empty well ---------- */\n.ds-empty {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-6) var(--space-5);\n  background: var(--color-surface);\n  color: var(--color-text);\n  box-shadow: var(--shadow-control-pressed);\n  text-align: center;\n  font-size: var(--text-base);\n}\n.ds-empty__title {\n  margin: var(--space-2) 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n/* A dialog shown beside another block starts level with it. */\n.ds-split > .ds-dialog {\n  margin: 0;\n}\n.ds-panel--fill,\n.ds-stack--fill {\n  flex: 1;\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin Music Shop: desktop grey disc player, specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<div class=\"ds-page__window ds-window\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-window__title\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"4\" y=\"3\" width=\"16\" height=\"2\"/><rect x=\"6\" y=\"5\" width=\"12\" height=\"2\"/><rect x=\"8\" y=\"7\" width=\"8\" height=\"2\"/><rect x=\"10\" y=\"9\" width=\"4\" height=\"2\"/><rect x=\"11\" y=\"11\" width=\"2\" height=\"2\"/><rect x=\"10\" y=\"13\" width=\"4\" height=\"2\"/><rect x=\"8\" y=\"15\" width=\"8\" height=\"2\"/><rect x=\"6\" y=\"17\" width=\"12\" height=\"2\"/><rect x=\"4\" y=\"19\" width=\"16\" height=\"2\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <span class=\"ds-window__caption\">Music Shop</span>\n      <span class=\"ds-window__controls\" aria-hidden=\"true\"><span class=\"ds-window__ctl ds-window__ctl--min\"></span><span class=\"ds-window__ctl ds-window__ctl--max\"></span><span class=\"ds-window__ctl ds-window__ctl--close\"></span></span>\n    </div>\n    <div class=\"ds-nav__deck\">\n      <div class=\"ds-nav__display\">\n        <span class=\"ds-nav__small\">DISCS 4812 &nbsp; SHELVES 09 &nbsp; OPEN 24 H</span>\n        <span class=\"ds-nav__line\">Compact discs, records and tapes by post</span>\n      </div>\n      <div class=\"ds-nav__basket\">\n        <span><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M1 2h2.5l.5 2H15l-2 6H5.5L4 4 3 3H1z M6 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z M12 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z\"/></svg></span> Basket: <strong>3 discs</strong>, 38.47</span>\n        <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Open</a>\n      </div>\n    </div>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#home\"><span class=\"ds-nav__num\">1<span class=\"ds-nav__lamp\"></span></span><span class=\"ds-nav__name\">New this week</span></a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#catalogue\"><span class=\"ds-nav__num\">2<span class=\"ds-nav__lamp\"></span></span><span class=\"ds-nav__name\">Catalogue</span></a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#disc\"><span class=\"ds-nav__num\">3<span class=\"ds-nav__lamp\"></span></span><span class=\"ds-nav__name\">Disc of the week</span></a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#basket\"><span class=\"ds-nav__num\">4<span class=\"ds-nav__lamp\"></span></span><span class=\"ds-nav__name\">Basket</span></a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#order\"><span class=\"ds-nav__num\">5<span class=\"ds-nav__lamp\"></span></span><span class=\"ds-nav__name\">Order by post</span></a></li>\n    </ul>\n  </header>\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n    <div class=\"ds-page__body\">\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <span class=\"ds-sleeve ds-hero__sleeve\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span></span>\n        <div class=\"ds-hero__body\">\n          <p class=\"ds-hero__label\">DISC OF THE WEEK &nbsp; 12 TRACKS &nbsp; 51:20</p>\n          <h1 class=\"ds-hero__title\">Night Train to the Coast</h1>\n          <p class=\"ds-hero__lead\">The harbour quartet, recorded in one evening in a boat shed.</p>\n          <p class=\"ds-hero__text\">Compact disc 12.99, record 14.50, tape 8.99. Posted the day you order.</p>\n        </div>\n        <div class=\"ds-hero__action\">\n          <a class=\"ds-button ds-button--large\" href=\"#basket\">Add to basket</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#disc\">Track list</a>\n        </div>\n      </section>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">4,812</span><span class=\"ds-stat__label\">discs on the shelves</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">64</span><span class=\"ds-stat__label\">new this week</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">210</span><span class=\"ds-stat__label\">labels</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">48 h</span><span class=\"ds-stat__label\">from order to your door</span></li>\n      </ul>\n\n      <h2 class=\"ds-heading\">New this week</h2>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <a class=\"ds-grid__cell\" href=\"#disc\"><span class=\"ds-sleeve\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span></span><span class=\"ds-grid__title\">Night Train to the Coast</span><span class=\"ds-grid__text\">The harbour quartet</span><span class=\"ds-grid__foot\"><span class=\"ds-price\">12.99</span><span class=\"ds-badge\">new</span></span></a>\n        <a class=\"ds-grid__cell\" href=\"#disc\"><span class=\"ds-sleeve ds-sleeve--2\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M6 2h8v9a2 2 0 1 1-1-1.7V4H7v8a2 2 0 1 1-1-1.7z\"/></svg></span></span><span class=\"ds-grid__title\">Songs for a Short Wave Radio</span><span class=\"ds-grid__text\">Ilse Brandt</span><span class=\"ds-grid__foot\"><span class=\"ds-price\">11.49</span><span class=\"ds-badge\">new</span></span></a>\n        <a class=\"ds-grid__cell\" href=\"#disc\"><span class=\"ds-sleeve ds-sleeve--3\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M1 3h14v10H1z M2 4v8h2l1-2h6l1 2h2V4z M5 6a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z M11 6a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z\"/></svg></span></span><span class=\"ds-grid__title\">Basement Tapes of a Typist</span><span class=\"ds-grid__text\">The carbon copies</span><span class=\"ds-grid__foot\"><span class=\"ds-price\">8.99</span><span class=\"ds-badge ds-badge--warning\">2 left</span></span></a>\n        <a class=\"ds-grid__cell\" href=\"#disc\"><span class=\"ds-sleeve ds-sleeve--4\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1l2 5h5l-4 3 1.5 5L8 11l-4.5 3L5 9 1 6h5z\"/></svg></span></span><span class=\"ds-grid__title\">Twelve Dances in Brass</span><span class=\"ds-grid__text\">Town band of the lower quay</span><span class=\"ds-grid__foot\"><span class=\"ds-price\">13.99</span><span class=\"ds-badge ds-badge--success\">in stock</span></span></a>\n      </div>\n\n      <div class=\"ds-split\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">Best sellers</h2>\n          <ol class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\"><span class=\"ds-list__pos\">1</span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#disc\">Night Train to the Coast</a>, the harbour quartet</span><span class=\"ds-list__meta\">3 weeks</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__pos\">2</span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#disc\">Paper Lanterns</a>, Odile Ferrand</span><span class=\"ds-list__meta\">7 weeks</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__pos\">3</span><span class=\"ds-list__text\"><a class=\"ds-link is-visited\" href=\"#disc\">Slow Dial</a>, the long distance operators</span><span class=\"ds-list__meta\">2 weeks</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__pos\">4</span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#disc\">Organ Works, volume 4</a>, Tomas Reuter</span><span class=\"ds-list__meta\">11 weeks</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__pos\">5</span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#disc\">Songs for a Short Wave Radio</a>, Ilse Brandt</span><span class=\"ds-list__meta\">new</span></li>\n          </ol>\n        </section>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">How the shop works</h2>\n          <p class=\"ds-panel__text\">Every disc on these pages is on a shelf in our store room. Put what you want in the basket, then order by post, fax or this form.</p>\n          <p class=\"ds-panel__text\">Postage is 1.50 for the first disc and 0.50 for each one after it. Anything can come back within 14 days.</p>\n          <p class=\"ds-panel__text\"><a class=\"ds-link\" href=\"#catalogue\">Browse the catalogue</a> or go straight to <a class=\"ds-link\" href=\"#order\">the order form</a>.</p>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"catalogue\">\n    <div class=\"ds-page__body\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Music Shop</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#catalogue\">Catalogue</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Jazz</li>\n      </ol>\n      <header class=\"ds-page-header\" data-component=\"page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Jazz</h1>\n          <p class=\"ds-page-header__lead\">612 discs on this shelf, by title. Prices include tax.</p>\n        </div>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#basket\">Open basket</a></div>\n      </header>\n      <div class=\"ds-page__columns\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Shelves</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Blues <span class=\"ds-sidebar__count\">318</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Brass bands <span class=\"ds-sidebar__count\">96</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Classical <span class=\"ds-sidebar__count\">1,140</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Folk <span class=\"ds-sidebar__count\">455</span></a></li>\n            <li><a class=\"ds-sidebar__link is-current\" href=\"#catalogue\">Jazz <span class=\"ds-sidebar__count\">612</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Film music <span class=\"ds-sidebar__count\">207</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Rock and pop <span class=\"ds-sidebar__count\">1,530</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">Spoken word <span class=\"ds-sidebar__count\">88</span></a></li>\n            <li><a class=\"ds-sidebar__link\" href=\"#catalogue\">World <span class=\"ds-sidebar__count\">366</span></a></li>\n          </ul>\n        </aside>\n        <div class=\"ds-page__main\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab is-current\" href=\"#catalogue\">Compact disc</a></li>\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#catalogue\">Record</a></li>\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#catalogue\">Tape</a></li>\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#catalogue\">All three</a></li>\n            <li class=\"ds-tabs__fill\"></li>\n            <li class=\"ds-tabs__note\">Titles 1 to 8 of 612</li>\n          </ul>\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th class=\"ds-table__head\">Title</th><th class=\"ds-table__head\">Artist</th><th class=\"ds-table__head\">Year</th><th class=\"ds-table__head\">Stock</th><th class=\"ds-table__head ds-table__head--num\">Price</th></tr>\n            </thead>\n            <tbody>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">After Hours at the Ferry</a></td><td class=\"ds-table__cell\">Odile Ferrand</td><td class=\"ds-table__cell\">1996</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">in stock</span></td><td class=\"ds-table__cell ds-table__cell--num\">11.99</td></tr>\n              <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link is-visited\" href=\"#disc\">Blue Ledger</a></td><td class=\"ds-table__cell\">The night clerks</td><td class=\"ds-table__cell\">1994</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">in stock</span></td><td class=\"ds-table__cell ds-table__cell--num\">9.99</td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Five Rooms, One Piano</a></td><td class=\"ds-table__cell\">Tomas Reuter</td><td class=\"ds-table__cell\">1997</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">2 left</span></td><td class=\"ds-table__cell ds-table__cell--num\">12.49</td></tr>\n              <tr class=\"ds-table__row ds-table__row--alt is-selected\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Night Train to the Coast</a></td><td class=\"ds-table__cell\">The harbour quartet</td><td class=\"ds-table__cell\">1998</td><td class=\"ds-table__cell\">in stock</td><td class=\"ds-table__cell ds-table__cell--num\">12.99</td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Paper Lanterns</a></td><td class=\"ds-table__cell\">Odile Ferrand</td><td class=\"ds-table__cell\">1998</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">in stock</span></td><td class=\"ds-table__cell ds-table__cell--num\">12.99</td></tr>\n              <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Quarter Past Blue</a></td><td class=\"ds-table__cell\">Sam Adeyemi trio</td><td class=\"ds-table__cell\">1992</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">sold out</span></td><td class=\"ds-table__cell ds-table__cell--num\">8.49</td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Slow Dial</a></td><td class=\"ds-table__cell\">The long distance operators</td><td class=\"ds-table__cell\">1998</td><td class=\"ds-table__cell\"><span class=\"ds-badge\">new</span></td><td class=\"ds-table__cell ds-table__cell--num\">13.49</td></tr>\n              <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link is-visited\" href=\"#disc\">Winter Set</a></td><td class=\"ds-table__cell\">Sam Adeyemi trio</td><td class=\"ds-table__cell\">1995</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">in stock</span></td><td class=\"ds-table__cell ds-table__cell--num\">9.99</td></tr>\n            </tbody>\n          </table>\n          <div class=\"ds-find\">\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li class=\"ds-pagination__label\">Page</li>\n              <li><a class=\"ds-pagination__link is-disabled\" href=\"#catalogue\">Previous</a></li>\n              <li><a class=\"ds-pagination__link is-current\" href=\"#catalogue\">1</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#catalogue\">2</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#catalogue\">3</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#catalogue\">77</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#catalogue\">Next</a></li>\n            </ul>\n            <span class=\"ds-find__fill\"></span>\n            <div class=\"ds-badges\" data-component=\"badge\">\n              <span class=\"ds-badge\">new</span>\n              <span class=\"ds-badge ds-badge--success\">in stock</span>\n              <span class=\"ds-badge ds-badge--warning\">2 left</span>\n              <span class=\"ds-badge ds-badge--danger\">sold out</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"disc\">\n    <div class=\"ds-page__body\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Music Shop</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#catalogue\">Jazz</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Night Train to the Coast</li>\n      </ol>\n      <header class=\"ds-page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Night Train to the Coast</h1>\n          <p class=\"ds-page-header__lead\">The harbour quartet, 1998. Compact disc, 12 tracks, 51:20.</p>\n        </div>\n        <div class=\"ds-page-header__action\"><span class=\"ds-price\">12.99</span><a class=\"ds-button\" href=\"#basket\">Add to basket</a></div>\n      </header>\n      <div class=\"ds-split ds-split--cover\">\n        <div class=\"ds-stack\">\n          <span class=\"ds-sleeve\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span></span>\n          <section class=\"ds-panel ds-panel--fill\">\n            <h2 class=\"ds-panel__title\">On the label</h2>\n            <dl class=\"ds-props\">\n              <dt class=\"ds-props__label\">Number</dt><dd class=\"ds-props__value\">CSK 98014</dd>\n              <dt class=\"ds-props__label\">Recorded</dt><dd class=\"ds-props__value\">October 1997</dd>\n              <dt class=\"ds-props__label\">Also as</dt><dd class=\"ds-props__value\"><a class=\"ds-link\" href=\"#catalogue\">record</a>, <a class=\"ds-link\" href=\"#catalogue\">tape</a></dd>\n              <dt class=\"ds-props__label\">Stock</dt><dd class=\"ds-props__value\"><span class=\"ds-badge ds-badge--success\">in stock</span></dd>\n            </dl>\n          </section>\n        </div>\n        <div class=\"ds-stack\">\n          <table class=\"ds-table\">\n            <thead>\n              <tr><th class=\"ds-table__head ds-table__head--num\">No.</th><th class=\"ds-table__head\">Track</th><th class=\"ds-table__head\">Written by</th><th class=\"ds-table__head ds-table__head--num\">Time</th></tr>\n            </thead>\n            <tbody>\n              <tr class=\"ds-table__row is-selected\"><td class=\"ds-table__cell ds-table__cell--num\">1</td><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M4 2l9 6-9 6z\"/></svg></span> Platform Nine, Ten Past Eleven</td><td class=\"ds-table__cell\">Lund</td><td class=\"ds-table__cell ds-table__cell--num\">4:12</td></tr>\n              <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell ds-table__cell--num\">2</td><td class=\"ds-table__cell\">Sleeper Car</td><td class=\"ds-table__cell\">Lund, Achebe</td><td class=\"ds-table__cell ds-table__cell--num\">5:40</td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--num\">3</td><td class=\"ds-table__cell\">The Signalman's Waltz</td><td class=\"ds-table__cell\">Traditional</td><td class=\"ds-table__cell ds-table__cell--num\">3:05</td></tr>\n              <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell ds-table__cell--num\">4</td><td class=\"ds-table__cell\">Salt on the Window</td><td class=\"ds-table__cell\">Achebe</td><td class=\"ds-table__cell ds-table__cell--num\">6:18</td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--num\">5</td><td class=\"ds-table__cell\">Last Stop Before the Sea</td><td class=\"ds-table__cell\">Lund</td><td class=\"ds-table__cell ds-table__cell--num\">4:47</td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--group\" colspan=\"3\">Tracks 1 to 5 of 12</td><td class=\"ds-table__cell ds-table__cell--group ds-table__cell--num\">51:20</td></tr>\n            </tbody>\n          </table>\n          <article class=\"ds-well ds-prose\" data-component=\"typography\">\n            <h1>One evening, one room</h1>\n            <p class=\"ds-prose__lead\">Four players, two microphones and a tide table.</p>\n            <p>The quartet set up in a boat shed and played the whole disc through twice. What you hear is the second pass, with the door open. The catalogue number is <code>CSK 98014</code>.</p>\n            <h2>Why we chose it</h2>\n            <ul>\n              <li>It sounds like a room, not like a desk</li>\n              <li>The slow tracks are the best ones</li>\n              <li>It is <strong>short</strong> enough to play again at once</li>\n            </ul>\n            <h3>If you like this</h3>\n            <p class=\"ds-links\" data-component=\"links\">\n              Try <a class=\"ds-link\" href=\"#catalogue\">Paper Lanterns</a>,\n              <a class=\"ds-link is-visited\" href=\"#catalogue\">a disc you have looked at</a>,\n              <a class=\"ds-link is-hover\" href=\"#catalogue\">a link under the pointer</a>,\n              <a class=\"ds-link is-active\" href=\"#catalogue\">a link as you click it</a> or\n              <a class=\"ds-link ds-link--quiet\" href=\"#catalogue\">the rest of the shelf</a>.\n            </p>\n          </article>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"basket\">\n    <div class=\"ds-page__body\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Music Shop</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#catalogue\">Catalogue</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Basket</li>\n      </ol>\n      <header class=\"ds-page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Your basket</h1>\n          <p class=\"ds-page-header__lead\">3 discs. Nothing is charged until you send the order.</p>\n        </div>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#order\">Order by post</a></div>\n      </header>\n      <div class=\"ds-notices\" data-component=\"notice\">\n        <p class=\"ds-notice\"><span class=\"ds-notice__label\">Postage:</span> one more disc costs only 0.50 to send with these three.</p>\n        <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__label\">Sold out:</span> Quarter Past Blue left the shelf while it was in your basket and has been taken out.</p>\n      </div>\n      <table class=\"ds-table\">\n        <thead>\n          <tr><th class=\"ds-table__head\">Disc</th><th class=\"ds-table__head\">Kind</th><th class=\"ds-table__head ds-table__head--num\">Copies</th><th class=\"ds-table__head ds-table__head--num\">Price</th></tr>\n        </thead>\n        <tbody>\n          <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Night Train to the Coast</a></td><td class=\"ds-table__cell\">Compact disc</td><td class=\"ds-table__cell ds-table__cell--num\">1</td><td class=\"ds-table__cell ds-table__cell--num\">12.99</td></tr>\n          <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Paper Lanterns</a></td><td class=\"ds-table__cell\">Compact disc</td><td class=\"ds-table__cell ds-table__cell--num\">1</td><td class=\"ds-table__cell ds-table__cell--num\">12.99</td></tr>\n          <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M1 3h14v10H1z M2 4v8h2l1-2h6l1 2h2V4z M5 6a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z M11 6a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z\"/></svg></span> <a class=\"ds-link\" href=\"#disc\">Winter Set</a></td><td class=\"ds-table__cell\">Tape</td><td class=\"ds-table__cell ds-table__cell--num\">1</td><td class=\"ds-table__cell ds-table__cell--num\">9.99</td></tr>\n          <tr class=\"ds-table__row ds-table__row--alt\"><td class=\"ds-table__cell\" colspan=\"2\">Postage, three discs</td><td class=\"ds-table__cell ds-table__cell--num\"></td><td class=\"ds-table__cell ds-table__cell--num\">2.50</td></tr>\n          <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--group\" colspan=\"2\">To pay</td><td class=\"ds-table__cell ds-table__cell--group ds-table__cell--num\">3</td><td class=\"ds-table__cell ds-table__cell--group ds-table__cell--num\">38.47</td></tr>\n        </tbody>\n      </table>\n      <div class=\"ds-buttons\" data-component=\"buttons\">\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Empty basket</button>\n        <span class=\"ds-find__fill\"></span>\n        <button class=\"ds-button ds-button--secondary\" type=\"button\" disabled>Update copies</button>\n        <a class=\"ds-button ds-button--secondary\" href=\"#catalogue\">Keep looking</a>\n        <a class=\"ds-button\" href=\"#order\">Order by post</a>\n      </div>\n      <div class=\"ds-split\">\n          <section class=\"ds-stack ds-stack--tight ds-stack--fill\">\n            <h2 class=\"ds-heading\">Put by for later</h2>\n            <div class=\"ds-empty\" data-component=\"empty\">\n              <span class=\"ds-icon ds-icon--large\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4z\"/></svg></span>\n              <h3 class=\"ds-empty__title\">Nothing put by</h3>\n              <p class=\"ds-empty__text\">Discs you set aside wait here for 30 days.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#catalogue\">Browse the shelves</a>\n            </div>\n          </section>\n        <div class=\"ds-stack\">\n          <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n            <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Empty basket<span class=\"ds-window__controls\" aria-hidden=\"true\"><span class=\"ds-window__ctl ds-window__ctl--close\"></span></span></h2>\n            <div class=\"ds-dialog__content\">\n              <span class=\"ds-icon ds-icon--large\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1l7 13H1z M7 6h2v4H7z M7 11h2v2H7z\"/></svg></span>\n              <p class=\"ds-dialog__body\">Take all 3 discs out of the basket? They go back on the shelf.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button\" href=\"#basket\">Keep them</a>\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Empty</a>\n            </div>\n          </div>\n          <section class=\"ds-panel ds-panel--fill\">\n            <h2 class=\"ds-panel__title\">Sending</h2>\n            <p class=\"ds-panel__text\">Orders in before four go out the same day, in a board sleeve.</p>\n            <p class=\"ds-panel__text\">Packed so far: <span class=\"ds-progress\"><span class=\"ds-progress__block\"></span><span class=\"ds-progress__block\"></span><span class=\"ds-progress__block\"></span><span class=\"ds-progress__block ds-progress__block--empty\"></span><span class=\"ds-progress__block ds-progress__block--empty\"></span><span class=\"ds-progress__block ds-progress__block--empty\"></span></span> 3 of 6 in a box</p>\n          </section>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"order\">\n    <div class=\"ds-page__body\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Music Shop</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#basket\">Basket</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Order by post</li>\n      </ol>\n      <header class=\"ds-page-header\">\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Order by post</h1>\n          <p class=\"ds-page-header__lead\">Tell us where to send the discs. Pay by cheque or on delivery.</p>\n        </div>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back to basket</a></div>\n      </header>\n      <div class=\"ds-split ds-split--wide\">\n        <fieldset class=\"ds-group\">\n          <legend class=\"ds-group__title\">Send to</legend>\n          <form class=\"ds-form\" data-component=\"form\" action=\"#order\">\n            <label class=\"ds-form__label\" for=\"o-name\">Name:</label>\n            <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"o-name\" type=\"text\" value=\"R. Halloran\"></div>\n            <label class=\"ds-form__label\" for=\"o-street\">Street:</label>\n            <div class=\"ds-form__field\"><input class=\"ds-form__input ds-form__input--wide\" id=\"o-street\" type=\"text\" value=\"14 Chandlers Row\"></div>\n            <label class=\"ds-form__label\" for=\"o-code\">Postcode:</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input ds-form__input--short\" id=\"o-code\" type=\"text\" value=\"\">\n              <span class=\"ds-form__error\">We cannot send without a postcode.</span>\n            </div>\n            <label class=\"ds-form__label\" for=\"o-country\">Country:</label>\n            <div class=\"ds-form__field\">\n              <select class=\"ds-form__select\" id=\"o-country\"><option>Ireland</option><option>United Kingdom</option><option>Elsewhere in Europe</option></select>\n            </div>\n            <span class=\"ds-form__label\">Pay by:</span>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__option\"><input class=\"ds-form__radio\" type=\"radio\" name=\"pay\" checked>Cheque</label>\n              <label class=\"ds-form__option\"><input class=\"ds-form__radio\" type=\"radio\" name=\"pay\">Cash on delivery</label>\n            </div>\n            <label class=\"ds-form__label\" for=\"o-note\">Note:</label>\n            <div class=\"ds-form__field\">\n              <textarea class=\"ds-form__textarea\" id=\"o-note\" rows=\"3\">Leave with the shop next door if nobody answers.</textarea>\n              <span class=\"ds-form__hint\">Read by the person who packs your order.</span>\n            </div>\n            <span class=\"ds-form__label\">Also:</span>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__option\"><input class=\"ds-form__check\" type=\"checkbox\" checked>Send me the printed catalogue</label>\n            </div>\n            <div class=\"ds-form__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back</a>\n              <a class=\"ds-button\" href=\"#home\">Send order</a>\n            </div>\n          </form>\n        </fieldset>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Your order</h2>\n          <dl class=\"ds-props\">\n            <dt class=\"ds-props__label\">Discs</dt><dd class=\"ds-props__value\">3</dd>\n            <dt class=\"ds-props__label\">Goods</dt><dd class=\"ds-props__value\">35.97</dd>\n            <dt class=\"ds-props__label\">Postage</dt><dd class=\"ds-props__value\">2.50</dd>\n            <dt class=\"ds-props__label\">To pay</dt><dd class=\"ds-props__value\"><span class=\"ds-price\">38.47</span></dd>\n          </dl>\n          <hr class=\"ds-rule\">\n          <p class=\"ds-panel__text\">Make cheques out to chronoskin Music Shop. Your discs are held for seven days while it arrives.</p>\n          <p class=\"ds-panel__text\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M7 10h2v2H7z M5.4 6a2.6 2.6 0 1 1 4.2 2c-.5.5-.6.7-.6 1.4H7c0-1.2.3-1.7 1-2.3a.8.8 0 1 0-1.3-.6z\"/></svg></span> <a class=\"ds-link\" href=\"#home\">How the shop works</a></p>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <ul class=\"ds-status\">\n      <li class=\"ds-status__cell ds-status__cell--wide\">chronoskin Music Shop, 1998. <a class=\"ds-link ds-link--quiet\" href=\"#catalogue\">Catalogue</a>, <a class=\"ds-link ds-link--quiet\" href=\"#basket\">basket</a>, <a class=\"ds-link ds-link--quiet\" href=\"#order\">order by post</a> and <a class=\"ds-link ds-link--quiet\" href=\"#home\">how the shop works</a>.</li>\n      <li class=\"ds-status__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M1 2h2.5l.5 2H15l-2 6H5.5L4 4 3 3H1z M6 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z M12 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3z\"/></svg></span> 3 discs</li>\n      <li class=\"ds-status__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M5 7V5a3 3 0 0 1 6 0v2h1v7H4V7z M6.5 7h3V5a1.5 1.5 0 0 0-3 0z\"/></svg></span> 38.47</li>\n    </ul>\n  </footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.windows-9x.shop.s08.p02.t08.u01.dr\",\n  \"library\": \"2026.10.09-1036\",\n  \"era\": {\n    \"slug\": \"windows-9x\",\n    \"years\": [\n      1995,\n      2001\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 800,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-w9-8281-dr\",\n  \"short\": \"v1-w9-8281-dr\",\n  \"density\": \"roomy\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #46587a;\n  --color-canvas: #ece0c4;\n  --color-surface: #fffbf0;\n  --color-surface-alt: #f4ecd8;\n  --color-surface-strong: #dccfae;\n  --color-bar: #2f5a3a;\n  --color-bar-text: #fffbf0;\n  --color-bar-alt: #dccfae;\n  --color-bar-alt-text: #201810;\n  --color-inverse: #8a8068;\n  --color-inverse-text: #fffbf0;\n  --color-text: #201810;\n  --color-text-muted: #6a5a48;\n  --color-heading: #2f4a30;\n  --color-heading-alt: #7a3a10;\n  --color-link: #1a4a8a;\n  --color-link-quiet: #201810;\n  --color-link-visited: #6b2a5b;\n  --color-link-hover: #0a6ac0;\n  --color-link-active: #c03000;\n  --color-border: #9a8c6c;\n  --color-border-strong: #2a2010;\n  --color-border-muted: #f6efd8;\n  --color-accent: #2f5a3a;\n  --color-accent-text: #fffbf0;\n  --color-accent-alt: #b04a00;\n  --color-fill-1: #f6e4a8;\n  --color-fill-2: #cfe0c0;\n  --color-fill-3: #e8c8d4;\n  --color-fill-4: #c8d8e4;\n  --color-button: #ece0c4;\n  --color-button-text: #201810;\n  --color-button-hover-text: #201810;\n  --color-button-secondary: #dccfae;\n  --color-button-secondary-text: #201810;\n  --color-input: #fffbf0;\n  --color-input-text: #201810;\n  --color-input-border: #9a8c6c;\n  --color-disabled: #ece0c4;\n  --color-disabled-text: #a09070;\n  --color-danger: #a01818;\n  --color-danger-surface: #fbe4d8;\n  --color-success: #2f6a3a;\n  --color-warning: #8a5a00;\n  --color-notice: #fff4b8;\n  --color-notice-text: #201810;\n  --color-focus: #2a2010;\n  --color-shadow: #2a2010;\n  --color-overlay: rgba(32, 24, 16, 0.4);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Arial Narrow\", \"Helvetica Neue Condensed\", \"Nimbus Sans Narrow\", Arial, sans-serif;\n  --font-heading: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n  --font-ui: \"Arial Narrow\", \"Helvetica Neue Condensed\", \"Nimbus Sans Narrow\", Arial, sans-serif;\n  --font-mono: \"OCR A Std\", \"Lucida Console\", \"Courier New\", monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 13px;\n  --text-large: 15px;\n  --text-display: 32px;\n  --text-h1: 22px;\n  --text-h2: 16px;\n  --text-h3: 13px;\n  --line-body: 1.3;\n  --line-heading: 1.1;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.5px;\n  --display-tracking: 1px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: inset -1px -1px var(--color-border-strong), inset 1px 1px var(--color-border-muted), inset -2px -2px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n  --shadow-control: inset -1px -1px var(--color-border-strong), inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 2px 2px var(--color-border-muted);\n  --shadow-control-hover: inset -1px -1px var(--color-border-strong), inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 2px 2px var(--color-border-muted);\n  --shadow-control-pressed: inset 1px 1px var(--color-border), inset -1px -1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset 2px 2px var(--color-border-strong), inset -2px -2px var(--color-border-muted);\n  --shadow-dialog: inset -1px -1px var(--color-border-strong), inset 1px 1px var(--color-border-muted), inset -2px -2px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(90deg, var(--color-bar), color-mix(in srgb, var(--color-bar) 45%, white));\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-canvas);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-button);\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"
  }
}
