{
  "id": "v1-w9-8321",
  "long_id": "v1.windows-9x.shop.s08.p03.t02.u01",
  "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
  },
  "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-8321",
  "preview_url": "https://chrono.skin/s/v1-w9-8321/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- Two families and a code face. `--font-body` and `--font-ui` are a wide screen sans (Verdana, then Geneva, Arial), the face of the software company pages among the references; `--font-heading` is Times New Roman, bold for headings and regular (`--weight-display` 400) for the 28px welcome title; `--font-mono` is Lucida Console.\n- Sizes: `--text-base` and `--text-ui` 12px; `--text-small` 11px; `--text-large` 14px; `--text-h3` 14px, `--text-h2` 17px, `--text-h1` 21px; `--text-display` 28px. Line height 1.4 in text, 1.15 in headings and keys. Links in text are underlined; quiet links, labels of desktop icons and titles are not (`--link-decoration-quiet` is `none`).\n- Colour: cream windows (`--color-canvas`) and ivory wells on a slate blue desktop; forest green title bar and selection; headings forest green, second headings and icons rust; links blue with plum visited. Block colours are straw, sage, rose and pale blue. The lesser key (`--color-button-secondary`) is a shade darker than the window.\n- Surface: edges are a dark 1px line with a 2px light edge at the top left and a 2px shadow at the bottom right, 3px in all (`--border-width-strong`). The title bar is flat. The desktop (`--fill-page`) is a 4px checker of the page colour and a darker mix of it, and the inactive title bar (`--fill-inverse`) and the secondary bar (`--fill-bar-alt`: taskbar, toolbars, column heads) a 2px checker, as a 256-colour screen dithered them. A window throws a hard 3px shadow in `--color-shadow` and a dialog a 4px one, with no blur. The focus ring is a 1px dashed line.\n- This layout keeps the conventions the first layout of the era (the file manager) set for which text token sits on which fill and which edge token dresses what. They are repeated here.\n- The era's rule for which text sits on which fill, the same in every layout of the era and to be kept by every token set:\n  - The desktop (`--fill-page` over `--color-page`) is always dark enough to carry `--color-bar-text`. Text written straight on the desktop (icon labels, small print) uses `--color-bar-text`.\n  - The window face is `--color-canvas`; raised parts inside a window (sheets, notes, dialogs) are `--fill-panel`. Both carry `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n  - A sunken well (list view, tree, document, read-out, empty list) is `--color-surface` and carries the same text and link tokens as the window face, so every palette keeps text and links legible on both. `--color-surface-alt` is the alternate row and the fill of inline code and of a pressed toolbar key; `--color-surface-strong` is a group or total row. They carry `--color-text`.\n  - A title bar is `--fill-bar` with `--color-bar-text`; the title bar of a window without the focus is `--fill-inverse` with `--color-inverse-text`.\n  - Menu bar, toolbar and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n  - The selection (current tree row, selected table row, open menu, selected list-box row, 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` (`--color-button-hover-text` under the pointer); the lesser key is `--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 and the path field are `--fill-input` with `--color-input-text`; links inside the path field use the link tokens, so a palette keeps `--color-input` close to `--color-surface`. `--color-input-border` outlines the check box.\n  - `--color-fill-1` to `--color-fill-4` carry `--color-text` (icons drawn on them) and, in the help layout, `--color-link`.\n  - 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`, so each status colour must read on the well colour; none of them is used as a fill under text.\n  - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, title bars, block colours and selections.\n- Edges, the same in every layout of the era. 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`: the raised frame of a window. `--shadow-dialog`: the frame of a dialog.\n  - `--shadow-control`: every raised key: buttons, toolbar keys, caption buttons, column heads, tabs and their sheet, pagination keys, the brand tile.\n  - `--shadow-control-pressed`: everything sunken: fields, the path field, wells, read-outs, status cells, the check box, the progress bar, a pressed key, the current pagination key. Note that fields take the pressed token, not `--shadow-control`.\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: group boxes, the etched rule (`--color-border` over `--color-border-muted`), toolbar separators, table row lines (`--color-surface-alt`), the frame of notices, badges and the default button (`--color-border-strong`).\n  - `--color-border`, `--color-border-strong` and `--color-border-muted` are the three shades the edge tokens are built from: the mid shadow, the darkest outer line and the light edge. A palette sets them as a bevel set for its window face.\n- Not expressible by a token and written literally in `components.css`: the `dotted` guide lines of the tree (and of topic lists), the `solid` strokes of the caption-button glyphs, and `clip-path` on the current tab, which cuts off its lower edge so that it joins the sheet.\n- All radii are 0 and are still applied through `--radius-control`, `--radius-panel`, `--radius-pill` and `--radius-page`. `--shadow-text` is applied to title bars and buttons. `--transition` is `none`; `--backdrop-blur` is `0px` and nothing is translucent.\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 <= 8px`: rows of lists and list views touch or sit 1px to 4px apart.\n- `block-gap <= 16px`: 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`: small print is 11px, nothing smaller.\n- `font-size <= 28px`: the welcome title is the largest text.\n- `font-weight >= 400`: only regular and bold.\n- `font-families <= 3`: a sans, a serif for headings and a monospace face.\n- `letter-spacing = 0`: no tracking.\n- `uppercase-text <= 0%`: no text-transform.\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: 2px;\n  --space-2: 4px;\n  --space-3: 6px;\n  --space-4: 8px;\n  --space-5: 12px;\n  --space-6: 16px;\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.p03.t02.u01\",\n  \"library\": \"2026.10.09-1346\",\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-8321\",\n  \"short\": \"v1-w9-8321\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #2a2a2a;\n  --color-canvas: #000000;\n  --color-surface: #000000;\n  --color-surface-alt: #1c1c1c;\n  --color-surface-strong: #383838;\n  --color-bar: #800080;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #000000;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #ffffff;\n  --color-inverse-text: #000000;\n  --color-text: #ffffff;\n  --color-text-muted: #c0c0c0;\n  --color-heading: #ffff00;\n  --color-heading-alt: #00ffff;\n  --color-link: #ffff00;\n  --color-link-quiet: #ffffff;\n  --color-link-visited: #ff80ff;\n  --color-link-hover: #00ff00;\n  --color-link-active: #ff8000;\n  --color-border: #808080;\n  --color-border-strong: #ffffff;\n  --color-border-muted: #c0c0c0;\n  --color-accent: #ffff00;\n  --color-accent-text: #000000;\n  --color-accent-alt: #00ff00;\n  --color-fill-1: #000080;\n  --color-fill-2: #004a4a;\n  --color-fill-3: #4a004a;\n  --color-fill-4: #4a3a00;\n  --color-button: #000000;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffff00;\n  --color-button-secondary: #383838;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #000000;\n  --color-input-text: #ffffff;\n  --color-input-border: #ffffff;\n  --color-disabled: #1c1c1c;\n  --color-disabled-text: #808080;\n  --color-danger: #ff5050;\n  --color-danger-surface: #2a0000;\n  --color-success: #00ff00;\n  --color-warning: #ffb000;\n  --color-notice: #000080;\n  --color-notice-text: #ffffff;\n  --color-focus: #ffff00;\n  --color-shadow: #808080;\n  --color-overlay: rgba(255, 255, 255, 0.25);\n}\n\n/* @part type */\n:root {\n  --font-body: Verdana, Geneva, Arial, sans-serif;\n  --font-heading: \"Times New Roman\", Times, serif;\n  --font-ui: Verdana, Geneva, Arial, sans-serif;\n  --font-mono: \"Lucida Console\", Monaco, monospace;\n  --text-base: 12px;\n  --text-small: 11px;\n  --text-ui: 12px;\n  --text-large: 14px;\n  --text-display: 28px;\n  --text-h1: 21px;\n  --text-h2: 17px;\n  --text-h3: 14px;\n  --line-body: 1.4;\n  --line-heading: 1.15;\n  --line-display: 1.05;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 400;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 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"
  }
}
