{
  "id": "v1-w9-1188-dr",
  "long_id": "v1.windows-9x.app.s01.p01.t08.u08.dr",
  "name": "Desktop grey file manager, 1998",
  "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": "app",
  "mode": "mix",
  "viewport": {
    "width": 800,
    "fluid": false
  },
  "density": "roomy",
  "summary": "A shareware catalogue dressed as the file manager of a late 1990s desktop: one silver-grey window on a teal desktop, with a navy title bar, a menu bar with underlined access keys, a toolbar of raised keys, a tree of folders at the left and icon and list views at the right, closed by a status bar of sunken cells. Every edge is a two-step bevel, light at the top left and dark at the bottom right, text is an 11px pixel-sized sans, and nothing is rounded, blurred or animated. Software sites, download libraries and intranet tools borrowed this look from the operating system between 1995 and 2001, when a page that looked like a program felt trustworthy.",
  "url": "https://chrono.skin/s/v1-w9-1188-dr",
  "preview_url": "https://chrono.skin/s/v1-w9-1188-dr/specimen.html",
  "files": {
    "STYLE.md": "# Desktop grey file manager, 1998\n\n## Summary\n\nA shareware catalogue dressed as the file manager of a late 1990s desktop: one silver-grey window on a teal desktop, with a navy title bar, a menu bar with underlined access keys, a toolbar of raised keys, a tree of folders at the left and icon and list views at the right, closed by a status bar of sunken cells. Every edge is a two-step bevel, light at the top left and dark at the bottom right, text is an 11px pixel-sized sans, and nothing is rounded, blurred or animated. Software sites, download libraries and intranet tools borrowed this look from the operating system between 1995 and 2001, when a page that looked like a program felt trustworthy.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 760px, 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. Nothing is wider than the window and nothing reflows.\n- The specimen is one example site, a software library, of four views. `.ds-nav` (title bar, menu bar, toolbar) 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- Home view, from the top inside `.ds-page__body` (blocks `--space-4` apart): the `.ds-hero` banner in a white well, the `.ds-stat` row of four read-outs, then `.ds-page__columns`: the `.ds-sidebar` tree pane (`--size-tree`, 184px) at the left and `.ds-page__main` at the right, `--space-2` apart and stretched to the same height. The main column holds a `.ds-pane` with the `.ds-grid` large-icon view, a `.ds-panel` group box with the `.ds-list` of new arrivals, and a `.ds-table` of the most downloaded programs.\n- Inner pages keep the title bar, menu bar, toolbar and status bar and drop the hero, the read-outs and the tree. In their place: a `.ds-address` line with the `.ds-breadcrumb` path field directly under the toolbar, then `.ds-page__inner`, one full-width column that opens with the `.ds-page-header` (large icon, name and one line, the action at the right) and continues with the working components `--space-4` apart. Where a page has tabs they sit directly under the page header with their `.ds-sheet`.\n- Views: `home` is the catalogue. `program` is one program: page header, a property sheet of four tabs holding the property rows, the status labels, a group box, the list view of files and the download dialog, then the read-me document in a well. `search` is a find window: a group box with the search row, a tip, the result list view with a selected row, the pagination keys and the empty state of a second pane. `submit` is a wizard page: the picture band with the steps at the left (`.ds-wizard`, `--size-band` 132px), notices, the form, an etched rule and the row of keys. The menu entry of the view that is showing is drawn in the selection colours; the home entry is marked when the address names no view.\n- Spacing scale: `--space-0` 1px is the hairline step (tick inset, row padding in trees and list boxes); `--space-1` 2px the gap between keys and the padding of bars; `--space-2` 4px the padding of keys, the gap between an icon and its word and between panes; `--space-3` 6px cell and field padding and the gap between keys in a row; `--space-4` 8px the gap between blocks inside a window and the padding of group boxes; `--space-5` 12px the padding of sheets and dialogs and the gap between windows; `--space-6` 16px the margin of the desktop round a window and the gutter of two-column sheets.\n- Fixed sizes: `--size-ctl` 16px caption button and `--size-glyph` 8px glyph; `--size-icon` 32px and `--size-icon-small` 16px icons; `--size-check` 13px check box; `--size-label` 116px form label column; `--size-field` 220px text field and `--size-search` 190px search field; `--size-dialog` 350px; `--size-button` 75px least key width; `--size-block` 8px progress block.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-body` and `--font-ui` are the narrow sans at `--text-base` and `--text-ui` (13px); keys are `--weight-ui`. `--font-heading` is the heavy condensed face, set in capitals by `--heading-transform` with `--heading-tracking`: the title of the large display (`--text-display`, 32px, `--display-tracking`), page titles (`--text-h1`, 22px), panel and section titles (`--text-h2`, 16px) and the brand name. `--font-mono` is the lettering of displays: both lines of the deck display, the small line of the large display, counters, key numbers and chart positions. `--text-small` (11px) is for artists, weeks, counts and the breadcrumb. Bold is `--weight-bold`; nothing is lighter than `--weight-body`.\n- Links in text are `--color-link`, underlined by `--link-decoration`, and lose the line under the pointer (`--link-decoration-hover`); quiet links and the rows of the list box use `--link-decoration-quiet`.\n- Which text sits on which fill, the same in every layout of the era:\n  - The window face is `--color-canvas` (`--fill-panel` for windows, cases and dialogs) and carries `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n  - A sunken well (panels, the list box, list views, the basket read-out, the review, the empty state) is `--color-surface` and carries the same text and link tokens. `--color-surface-alt` is the alternate row, a preset key held down, inline code and the position field of the chart; `--color-surface-strong` is a total row and a lamp that is off. They carry `--color-text`.\n  - A display (the deck display, the large display, the figure of a counter) is `--fill-inverse` with `--color-inverse-text` and nothing else: no heading, muted or link colour is used on it.\n  - The title bar is `--fill-bar` with `--color-bar-text`. The deck, the page header band and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n  - The selection (the current band key, the open shelf, a selected row, a lit lamp, progress blocks, the plain badge) is `--fill-accent` with `--color-accent-text`; links and icons inside a selection inherit that colour.\n  - Keys are `--fill-button` with `--color-button-text` (`--fill-button-hover` and `--color-button-hover-text` under the pointer); the lesser key and the band keys are `--fill-button-secondary` with `--color-button-secondary-text`; a disabled key is `--color-disabled` with `--color-disabled-text`; the destructive key is `--fill-button` with a bold label in `--color-danger`.\n  - Fields are `--fill-input` with `--color-input-text`; `--color-input-border` outlines the check box and the radio button.\n  - `--color-fill-1` to `--color-fill-4` are the sleeves and carry `--color-text` (the drawing on them).\n  - Prices are `--color-heading-alt`, bold. Notices are `--color-notice` with `--color-notice-text` inside a line of `--color-border-strong`; the error notice is `--color-danger` on `--color-danger-surface`.\n  - Status labels print `--color-success`, `--color-warning` and `--color-danger` as text and frame on `--color-surface`.\n  - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, sleeves and selections.\n- Edges. Nothing has a border of its own except thin lines; every raised or sunken edge is a `box-shadow` token drawn inside the box:\n  - `--shadow-panel` frames the window, `--shadow-dialog` a dialog. Both also throw a hard shadow.\n  - `--shadow-control` is every raised part: buttons, preset keys, band keys, caption buttons, the page header band, column heads, the cases of the discs, pagination keys, the brand tile. `--shadow-control-hover` replaces it under the pointer.\n  - `--shadow-control-pressed` is everything sunken: displays, counters, fields, wells, panels, the list box, status cells, the check box, the progress bar, a key held down, the current band key and pagination key.\n  - `--border-width-strong` is the thickness of those edges: padding that must clear an edge is written `calc(var(--border-width-strong) + var(--space-N))`.\n  - `--border-width`, `--border-style` and `--color-border` draw the thin lines: the line under a panel title, the frame of a lamp and of a chart position, group boxes, the etched rule (over `--color-border-muted`); a sleeve is framed in `--color-border-strong`; table row lines are `--color-surface-alt`.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on `<body>`; the desktop. `.ds-page__window` is the one window at `--size-page`; `.ds-page__body` stacks the blocks of a view; `.ds-page__columns` is the tree pane beside `.ds-page__main`; `.ds-page__inner` is the single column of an inner page.\n- `.ds-nav`: the chrome of the window, written once: the title bar (a `.ds-window__title` holding the `.ds-brand`, the caption and the caption buttons), the menu bar `.ds-nav__links` of `.ds-nav__link` entries, each with one underlined `.ds-nav__key` letter, and the `.ds-toolbar`. The entry of the current view (`is-current`, or one selector per view) is drawn in the selection colours, as an open menu is.\n- `.ds-brand`: the site's mark and name at the left of the title bar. `.ds-brand__mark` is the window's icon: a small tile dressed like the default button (`--fill-button`, `--color-button-text`, a line of `--color-border-strong`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG with a 3 unit stroke and square caps. `.ds-brand__name` is the name in bold `--font-heading` at `--text-ui`, in the bar's text colour. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the banner of the open folder, the era's page introduction: a white well with a large icon, `.ds-hero__text` (`.ds-hero__title` at `--text-display` in `--color-heading-alt`, `.ds-hero__lead`), and `.ds-hero__action`, a labelled search field (`.ds-hero__row`, `.ds-hero__field`) with the default button. Never a tall banner.\n- `.ds-page-header`: the head of an inner page: a large icon, `.ds-page-header__text` with `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__lead`, and `.ds-page-header__action` with one key at the right. No fill of its own; it stands on the window face.\n- `.ds-sidebar`: the tree pane: `.ds-sidebar__title`, a raised strip like a column head, over `.ds-sidebar__body`, a white well holding the `.ds-tree` of folder links. `.ds-pane` with `.ds-pane__title` is the same strip over any other pane.\n- `.ds-grid`: the large-icon view of a folder: a white well of four columns. Each `.ds-grid__cell` is a link with a `.ds-grid__icon` tile (a 32px icon on one of the four block colours: `--2`, `--3`, `--4` on the cell), a `.ds-grid__title` and a small `.ds-grid__text` count.\n- `.ds-list`: rows on the window face: a small icon, `.ds-list__text` (a link and one line) and a right-aligned `.ds-list__meta` (size and date). `.ds-list__item` is the row.\n- `.ds-panel`: a group box, the same thing as `.ds-group`: a `<fieldset>` with its `.ds-panel__title` legend cut into the frame and a `.ds-panel__body`.\n- `.ds-wizard`: a wizard page: `.ds-wizard__band`, the sunken picture band in the inverse colours listing each `.ds-wizard__step` (`is-current` bold and underlined), beside `.ds-wizard__main`.\n- `.ds-footer`: the status bar of the window, a `.ds-status` row: one wide cell with the site line and quiet links, then short cells.\n- `.ds-window`: the raised frame of a window (`--fill-panel`, `--shadow-panel`). `.ds-window__title` is the title bar (`--fill-bar`, bold `--font-ui` in `--color-bar-text`), `.ds-window__title--inactive` the bar of a window without the focus, `.ds-window__caption` the title text, `.ds-window__controls` the group of caption buttons. `.ds-window__ctl` is one caption button, a small raised square with its glyph drawn in CSS: `--min`, `--max`, `--close`. `.ds-window__body` pads plain content.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, and `.ds-view--home` when none is named. No box of its own.\n- `.ds-prose`: running text: styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `li`, `strong` and `code`; `.ds-prose__lead` is the lead line at `--text-large`. Used inside a well or on a sheet.\n- `.ds-link`: every link in text, underlined. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` (`--color-link-quiet`, `--link-decoration-quiet`) for tool and footer links, `.ds-link--strong` for a bold link. `.ds-links` wraps a line of links.\n- `.ds-button`: a raised key at least `--size-button` wide, on a `<button>` or on a link that leads to another view. The plain class is the default button of its window: one more line of `--color-border-strong` round the key. `.ds-button--secondary` is every other key, `.ds-button--danger` the destructive one (bold `--color-danger` label, never a red key), `.ds-button--large` a bigger one. States `is-hover`, `is-pressed` (the edge turns inward), `is-focus` (dotted ring inside the key), `is-disabled` or `disabled`. `.ds-buttons` lays out a row; a `.ds-find__fill` spacer pushes the confirming keys to the right.\n- `.ds-form`: two columns, `.ds-form__label` at the left (`--size-label`) and `.ds-form__field` at the right. Controls: `.ds-form__input` (`--short`, `--wide`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check` inside a `.ds-form__option` label. All are sunken fields. `.ds-form__hint` is a small muted line under a field, `.ds-form__error` a bold line in `--color-danger` under it (the field itself does not change), `.ds-form__actions` a right-aligned row of keys.\n- `.ds-table`: a list view: a sunken well of `--color-surface` whose column heads (`.ds-table__head`, `--num` for a right-aligned one) are raised keys. Rows are `.ds-table__row`; `.ds-table__row--alt` tints a row, `is-selected` puts it in the selection colours. `.ds-table__cell`, with `--num` for figures and `--group` for a total or group row. `.ds-table__caption` is the small line under the well.\n- `.ds-stat`: the row of summary figures; each `.ds-stat__item` is a sunken read-out with a `.ds-stat__value` (`--text-h1`, `--color-heading-alt`) over a `.ds-stat__label` (`--text-small`, muted). Three or four in a row, never large numerals or cards.\n- `.ds-tabs`: a property sheet. `.ds-tabs__item` holds a `.ds-tabs__tab`, a raised key whose lower edge slides under the sheet; the current tab (`is-current`) is taller, bold and joined to the sheet. `.ds-sheet` is the raised sheet under the tabs and always follows them.\n- `.ds-badge`: a small bold label in the selection colours with a dark line round it. `.ds-badge--count` is a plain muted count in brackets. Status: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, the status colour as text and frame on the well colour. `.ds-badges` lays out a row of them.\n- `.ds-notice`: the pale tip box inside a dark line; `.ds-notice__label` is the bold lead word. `.ds-notice--error` is the error form. `.ds-notices` stacks several.\n- `.ds-pagination`: a row of small raised keys: `.ds-pagination__label`, then `.ds-pagination__link` for previous, the page numbers and next; `is-current` is pressed and bold, `is-disabled` greyed.\n- `.ds-breadcrumb`: the path, written in a sunken field with a backslash between the `.ds-breadcrumb__item`s; the last is `is-current` and bold.\n- `.ds-dialog`: a small window `--size-dialog` wide, shown in the page flow where it would open. `.ds-dialog__title` is its title bar (with a `.ds-window__ctl--close`), `.ds-dialog__content` holds a large icon and the `.ds-dialog__body` message, `.ds-dialog__actions` centres the keys. No backdrop.\n- `.ds-empty`: an empty well with `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-icon`: a 16px inline SVG pixel icon; `.ds-icon--large` is 32px, `.ds-icon--plain` takes the surrounding text colour.\n- `.ds-well`: a sunken field of `--color-surface` for a document or a list. `.ds-rule`: the etched line. `.ds-group` with `.ds-group__title`: a group box, a `<fieldset>` whose `<legend>` is cut into the thin frame. `.ds-props` with `.ds-props__label` and `.ds-props__value`: rows of a property page. `.ds-progress` with `.ds-progress__block` (`--empty` for the rest): a progress bar made of blocks.\n- `.ds-tree`: the tree list: `.ds-tree__item` rows, `.ds-tree__link` (icon and name, not underlined, `is-current` in the selection colours), nested `.ds-tree__list` joined by a dotted guide line.\n- `.ds-toolbar`: a row of `.ds-toolbar__button` keys (icon and word; `is-pressed`, `is-disabled`) with `.ds-toolbar__sep` etched separators. `.ds-address` puts an `.ds-address__label` before the path field. `.ds-status` is a row of sunken `.ds-status__cell`s (`--wide` takes the free width).\n- `.ds-heading`: a section title at `--text-h2`. `.ds-split`: two equal columns. `.ds-stack`: a column of blocks `--space-4` apart. `.ds-find`: a row of labels, fields and a key.\n- `.ds-menu`: a pull-down under a menu-bar entry: an `<li class=\"ds-menu\">` holding a `<details>` whose `<summary class=\"ds-nav__link\">` is the entry and whose `.ds-menu__list` of `.ds-menu__item` links opens on a click, in the selection colours while open. `.ds-menu--up` opens it upward, from a task bar.\n- `.ds-tooltip`: a hint on hover or focus: the element gets the class, and holds a `.ds-tooltip__text` (`role=\"tooltip\"`) drawn as the pale yellow tool tip; `.ds-tooltip--up` shows it above.\n\n## Never\n\n- `row-gap <= 10px`: rows of lists, trees and list views touch or sit 1px to 4px apart.\n- `block-gap <= 20px`: blocks inside the window are 8px apart, never more than 16px.\n- `content-width <= 760px`: everything is inside the one 760px window.\n- `font-size >= 11px`: artists and counts are 11px, nothing smaller.\n- `font-size <= 32px`: the title in the large display is the largest text; page titles stop at 22px.\n- `font-weight >= 400`: only regular and bold.\n- `font-families <= 3`: the narrow sans, the condensed heading face and a monospace.\n- `letter-spacing <= 1px`: headings are tracked by half a pixel, the largest title by one.\n- `uppercase-text <= 12%`: only headings are set in capitals.\n- `border-radius <= 0px`: the desktop had no rounded corner; the radio button is a circle.\n- `box-shadow-blur <= 0px`: edges are hard lines and the shadow of a window is hard; nothing is blurred.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 20%`: keys, bars, displays and lamps are shaded; wells, panels and the window face are flat.\n- `border-width <= 3px`: thin lines are 1px; nothing is drawn thicker than the 3px edge of a key.\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. Anything that holds content is a `.ds-window` with a title bar or a `.ds-group` with its caption; anything that lists is a `.ds-table`, a `.ds-tree` or a list in a `.ds-well`; 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 text at `--text-base` or `--text-ui`, and never add a radius, a blurred shadow, a gradient outside `--fill-*` tokens, a hover animation or a colour of your own.\n",
    "components.css": "/* Layout tokens (structure part). One window of 760px centred on the desktop\n   of an 800px screen; a 180px tree pane; 2px bevels need 2px steps of space. */\n:root {\n  --size-page: 760px;\n  --size-tree: 184px;\n  --size-ctl: 16px;\n  --size-glyph: 8px;\n  --size-icon: 32px;\n  --size-icon-small: 16px;\n  --size-check: 13px;\n  --size-label: 116px;\n  --size-field: 220px;\n  --size-search: 190px;\n  --size-dialog: 350px;\n  --size-button: 75px;\n  --size-block: 8px;\n  --size-band: 132px;\n  --space-0: 1px;\n  --space-1: 3px;\n  --space-2: 5px;\n  --space-3: 8px;\n  --space-4: 10px;\n  --space-5: 15px;\n  --space-6: 20px;\n}\n\n/* ---------- shell: the desktop and the one window on it ---------- */\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.ds-page__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-1) 0 var(--space-4);\n}\n/* Tree pane and contents pane, the same height. */\n.ds-page__columns {\n  display: grid;\n  grid-template-columns: var(--size-tree) minmax(0, 1fr);\n  gap: var(--space-2);\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-page__inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: 0 var(--space-2);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-heading {\n  margin: 0 0 var(--space-2);\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__title--inactive {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\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.ds-window__body {\n  padding: var(--space-4);\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.ds-icon--plain {\n  color: inherit;\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/* Toolbar: a row of raised keys between etched lines. */\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  padding: var(--space-1) 0;\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-toolbar__button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: calc(var(--border-width-strong) + var(--space-1)) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  cursor: default;\n}\n.ds-toolbar__button:active,\n.ds-toolbar__button.is-pressed {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-toolbar__button.is-disabled {\n  color: var(--color-disabled-text);\n}\n.ds-toolbar__button .ds-icon {\n  color: inherit;\n}\n.ds-toolbar__sep {\n  align-self: stretch;\n  width: 0;\n  margin: 0 var(--space-2);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  border-right: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n/* Address line: a label and the path field. */\n.ds-address {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-1) 0 var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-address__label {\n  flex: none;\n  padding: 0 0 0 var(--space-2);\n}\n.ds-address .ds-breadcrumb {\n  flex: 1;\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 {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n}\n.ds-tree__list {\n  margin: 0 0 0 calc(var(--size-icon-small) / 2);\n  padding: 0 0 0 var(--space-4);\n  list-style: none;\n  border-left: var(--border-width) dotted var(--color-border);\n}\n.ds-tree__item {\n  padding: var(--space-0) 0;\n}\n.ds-tree__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: 0 var(--space-1);\n  color: var(--color-text);\n  text-decoration: none;\n}\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__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__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/* ---------- stats: sunken read-outs ---------- */\n.ds-stat {\n  display: flex;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__item {\n  flex: 1;\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-1)) calc(var(--border-width-strong) + var(--space-3));\n  background: var(--color-surface);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-stat__value {\n  display: block;\n  color: var(--color-heading-alt);\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}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- tabs: a property sheet ---------- */\n.ds-tabs {\n  display: flex;\n  align-items: flex-end;\n  margin: 0;\n  padding: 0 var(--space-1);\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  align-items: flex-end;\n}\n/* A tab is a raised key whose lower edge slides under the sheet. */\n.ds-tabs__tab {\n  display: block;\n  margin: 0 0 calc(var(--border-width-strong) * -1);\n  padding: var(--space-2) var(--space-4) calc(var(--space-2) + var(--border-width-strong));\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-control);\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  color: var(--color-link-hover);\n}\n/* The current tab is taller, stands in front of the sheet and loses its own\n   lower edge, so it reads as one piece with the sheet. */\n.ds-tabs__tab.is-current {\n  position: relative;\n  z-index: 1;\n  margin: 0 0 calc(var(--border-width-strong) * -2);\n  padding: var(--space-3) var(--space-4) calc(var(--space-2) + var(--border-width-strong) * 2);\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  clip-path: inset(0 0 var(--border-width-strong) 0);\n}\n.ds-sheet {\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--border-width-strong) + var(--space-5));\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-control);\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/* ---------- breadcrumb: the path, written in a sunken field ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: calc(var(--border-width-strong) + var(--space-1)) calc(var(--border-width-strong) + var(--space-2));\n  list-style: none;\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\\005C\";\n  padding: 0 var(--space-2);\n  color: var(--color-input-text);\n}\n.ds-breadcrumb__item.is-current {\n  font-weight: var(--weight-bold);\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/* ---------- empty state: a message in an empty well ---------- */\n.ds-empty {\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: 0 0 var(--space-2);\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}\n.ds-empty__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* ---------- nav: title bar, menu bar and toolbar of the window ---------- */\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.ds-nav__links {\n  display: flex;\n  margin: 0;\n  padding: var(--space-1) 0;\n  list-style: none;\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  color: var(--color-bar-alt-text);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n}\n/* The access key of a menu: one underlined letter. */\n.ds-nav__key {\n  text-decoration: underline;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover,\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(#program:target) .ds-nav__link[href=\"#program\"],\n.ds-page:has(#search:target) .ds-nav__link[href=\"#search\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n\n/* ---------- hero: the banner of the open folder, in a white well ---------- */\n.ds-hero {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\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-page);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-hero__text {\n  flex: 1;\n  min-width: 0;\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading-alt);\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: var(--space-2) 0 0;\n  font-size: var(--text-large);\n}\n.ds-hero__action {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-hero__row {\n  display: flex;\n  gap: var(--space-2);\n}\n.ds-hero__field {\n  width: var(--size-search);\n}\n\n/* ---------- page header: icon, name and one line, the action at the right ---------- */\n.ds-page-header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-2) var(--space-1);\n}\n.ds-page-header__text {\n  flex: 1;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n  margin: 0;\n}\n.ds-page-header__action {\n  display: flex;\n  flex: none;\n  gap: var(--space-3);\n}\n\n/* ---------- sidebar: the tree pane ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.ds-sidebar__title,\n.ds-pane__title {\n  margin: 0;\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  line-height: var(--line-heading);\n}\n.ds-sidebar__body {\n  flex: 1;\n  padding: calc(var(--border-width-strong) + var(--space-2));\n  background: var(--color-surface);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-pane {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n/* ---------- grid: the large-icon view of a folder ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5) var(--space-2);\n  padding: calc(var(--border-width-strong) + var(--space-4)) calc(var(--border-width-strong) + var(--space-2));\n  background: var(--color-surface);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-1);\n  min-width: 0;\n  color: var(--color-text);\n  text-align: center;\n  text-decoration: none;\n}\n/* The icon stands on a small tile of one of the four block colours. */\n.ds-grid__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-icon) + var(--space-4));\n  height: calc(var(--size-icon) + var(--space-4));\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n}\n.ds-grid__cell--2 .ds-grid__icon {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__icon {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__icon {\n  background: var(--color-fill-4);\n}\n.ds-grid__title {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__text {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- list: rows with a small icon, a line of text and a date ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n}\n.ds-list__item .ds-icon {\n  align-self: 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 group box ---------- */\n.ds-panel {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-2) var(--space-4) var(--space-4);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-panel__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.ds-panel__body {\n  margin: 0;\n}\n\n/* ---------- search row and wizard ---------- */\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.ds-wizard {\n  display: grid;\n  grid-template-columns: var(--size-band) minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: stretch;\n}\n/* The picture band at the left of a wizard page. */\n.ds-wizard__band {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  margin: 0;\n  padding: calc(var(--border-width-strong) + var(--space-5)) calc(var(--border-width-strong) + var(--space-4));\n  list-style: none;\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-wizard__step.is-current {\n  font-weight: var(--weight-bold);\n  text-decoration: underline;\n}\n.ds-wizard__main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\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/* ---------- menu: a pull-down under a menu-bar entry (details), opened by a click ---------- */\n.ds-menu {\n  position: relative;\n}\n.ds-menu summary {\n  list-style: none;\n  cursor: default;\n}\n.ds-menu summary::-webkit-details-marker {\n  display: none;\n}\n.ds-menu details[open] > summary {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 30;\n  box-sizing: border-box;\n  min-width: 100%;\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-dialog);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-transform: none;\n  white-space: nowrap;\n}\n.ds-menu--up .ds-menu__list {\n  top: auto;\n  bottom: 100%;\n}\n.ds-menu__item {\n  display: block;\n  padding: var(--space-1) var(--space-5);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n\n/* ---------- tooltip: the pale yellow tip under the pointer, on hover or focus ---------- */\n.ds-tooltip {\n  position: relative;\n}\n.ds-tooltip__text {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 40;\n  margin-top: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  text-transform: none;\n  white-space: nowrap;\n}\n.ds-tooltip--up .ds-tooltip__text {\n  top: auto;\n  bottom: 100%;\n  margin: 0 0 var(--space-1);\n}\n.ds-tooltip:hover > .ds-tooltip__text,\n.ds-tooltip:focus-within > .ds-tooltip__text {\n  display: block;\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 Software Library: desktop grey file manager, 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\">Software Library</span>\n      <span class=\"ds-window__controls\" aria-hidden=\"true\">\n        <span class=\"ds-window__ctl ds-window__ctl--min\"></span>\n        <span class=\"ds-window__ctl ds-window__ctl--max\"></span>\n        <span class=\"ds-window__ctl ds-window__ctl--close\"></span>\n      </span>\n    </div>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><span class=\"ds-nav__key\">C</span>atalogue</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#program\"><span class=\"ds-nav__key\">P</span>rogram</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#search\"><span class=\"ds-nav__key\">S</span>earch</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#submit\">S<span class=\"ds-nav__key\">u</span>bmit</a></li>\n      <li class=\"ds-menu\"><details><summary class=\"ds-nav__link\"><span class=\"ds-nav__key\">V</span>iew</summary><ul class=\"ds-menu__list\"><li><a class=\"ds-menu__item\" href=\"#home\">Catalogue</a></li><li><a class=\"ds-menu__item\" href=\"#search\">Find Results</a></li><li><a class=\"ds-menu__item\" href=\"#submit\">Submission</a></li></ul></details></li>\n      <li class=\"ds-menu\"><details><summary class=\"ds-nav__link\"><span class=\"ds-nav__key\">H</span>elp</summary><ul class=\"ds-menu__list\"><li><a class=\"ds-menu__item\" href=\"#program\">About this Program</a></li><li><a class=\"ds-menu__item\" href=\"#submit\">Submit a Program</a></li></ul></details></li>\n    </ul>\n    <div class=\"ds-toolbar\">\n      <a class=\"ds-toolbar__button ds-tooltip\" href=\"#home\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M8 3L3 8l5 5v-3h5V6H8z\"/></svg></span>Back<span class=\"ds-tooltip__text\" role=\"tooltip\">Back to the catalogue</span></a>\n      <span class=\"ds-toolbar__button is-disabled\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M8 3l5 5-5 5v-3H3V6h5z\"/></svg></span>Forward</span>\n      <a class=\"ds-toolbar__button\" href=\"#home\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M8 3l5 5h-3v5H6V8H3z\"/></svg></span>Up</a>\n      <span class=\"ds-toolbar__sep\"></span>\n      <a class=\"ds-toolbar__button\" href=\"#search\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M6 1a5 5 0 1 0 0 10a5 5 0 0 0 0-10z M6 3a3 3 0 1 1 0 6a3 3 0 0 1 0-6z M9.6 8.2l5 5-1.4 1.4-5-5z\"/></svg></span>Find</a>\n      <a class=\"ds-toolbar__button\" href=\"#program\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h10l2 2v10H2z M4 3v4h7V3z M9 4h1v2H9z M4 9v4h8V9z M5 10h6v1H5z\"/></svg></span>Download</a>\n      <a class=\"ds-toolbar__button\" href=\"#submit\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h14v10H1z M2.6 4L8 8.4 13.4 4z M2 5v7h12V5L8 9.8z\"/></svg></span>Submit</a>\n      <span class=\"ds-toolbar__sep\"></span>\n      <a class=\"ds-toolbar__button is-pressed\" href=\"#home\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span>Large Icons</a>\n      <a class=\"ds-toolbar__button\" href=\"#search\"><span class=\"ds-icon ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h12v12H2z M3 3v10h10V3z M4 5h2v2H4z M7 5h5v1H7z M4 9h2v2H4z M7 9h5v1H7z\"/></svg></span>Details</a>\n    </div>\n  </header>\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n    <div class=\"ds-page__body\">\n\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <span class=\"ds-icon ds-icon--large\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h12v9H2z M3 3v7h10V3z M5 12h6v1h2v1H3v-1h2z\"/></svg></span>\n        <div class=\"ds-hero__text\">\n          <h1 class=\"ds-hero__title\">Software Library</h1>\n          <p class=\"ds-hero__lead\">2,418 shareware and freeware programs, every one tested by hand.</p>\n        </div>\n        <form class=\"ds-hero__action\" action=\"#search\">\n          <label for=\"h-find\">Find a program by name:</label>\n          <span class=\"ds-hero__row\">\n            <input class=\"ds-form__input ds-hero__field\" id=\"h-find\" type=\"text\" value=\"text editor\">\n            <a class=\"ds-button\" href=\"#search\">Find Now</a>\n          </span>\n        </form>\n      </section>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">2,418</span> <span class=\"ds-stat__label\">programs in the library</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">36</span> <span class=\"ds-stat__label\">added this week</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">1.2 GB</span> <span class=\"ds-stat__label\">on four mirror servers</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">412,060</span> <span class=\"ds-stat__label\">downloads last month</span></li>\n      </ul>\n\n      <div class=\"ds-page__columns\">\n\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">All Folders</h2>\n          <div class=\"ds-sidebar__body\">\n            <ul class=\"ds-tree\">\n              <li class=\"ds-tree__item\"><a class=\"ds-tree__link is-current\" href=\"#home\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h6v2H4l-2 5V5H1z M4 8h11l-2 6H1z\"/></svg></span>Catalogue</a>\n                <ul class=\"ds-tree__list\">\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Business</a></li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Desktop</a>\n                    <ul class=\"ds-tree__list\">\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Icons</a></li>\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Screen Savers</a></li>\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Wallpaper</a></li>\n                    </ul>\n                  </li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Education</a></li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Games</a></li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Graphics</a></li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Internet</a>\n                    <ul class=\"ds-tree__list\">\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>File Transfer</a></li>\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Mail</a></li>\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Page Editors</a></li>\n                    </ul>\n                  </li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Programming</a></li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Sound</a></li>\n                  <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Utilities</a>\n                    <ul class=\"ds-tree__list\">\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Compression</a></li>\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Disk Tools</a></li>\n                      <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h5l1 2h8v9H1z\"/></svg></span>Text Editors</a></li>\n                    </ul>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#search\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M6 1a5 5 0 1 0 0 10a5 5 0 0 0 0-10z M6 3a3 3 0 1 1 0 6a3 3 0 0 1 0-6z M9.6 8.2l5 5-1.4 1.4-5-5z\"/></svg></span>Find Results</a></li>\n              <li class=\"ds-tree__item\"><a class=\"ds-tree__link\" href=\"#submit\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h14v10H1z M2.6 4L8 8.4 13.4 4z M2 5v7h12V5L8 9.8z\"/></svg></span>Submissions</a></li>\n            </ul>\n          </div>\n        </aside>\n\n        <div class=\"ds-page__main\">\n\n          <section class=\"ds-pane\">\n            <h2 class=\"ds-pane__title\">Contents of 'Catalogue'</h2>\n            <div class=\"ds-grid\" data-component=\"grid\">\n              <a class=\"ds-grid__cell\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M3 1h7l3 3v11H3z M4 2v12h8V5H9V2z M5 7h6v1H5z M5 9h6v1H5z M5 11h4v1H5z\"/></svg></span></span><span class=\"ds-grid__title\">Business</span><span class=\"ds-grid__text\">214 programs</span></a>\n              <a class=\"ds-grid__cell ds-grid__cell--2\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h12v9H2z M3 3v7h10V3z M5 12h6v1h2v1H3v-1h2z\"/></svg></span></span><span class=\"ds-grid__title\">Desktop</span><span class=\"ds-grid__text\">388 programs</span></a>\n              <a class=\"ds-grid__cell ds-grid__cell--3\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h5l1 1 1-1h5v11H9l-1 1-1-1H2z M3 3v9h4V3z M9 3v9h4V3z\"/></svg></span></span><span class=\"ds-grid__title\">Education</span><span class=\"ds-grid__text\">157 programs</span></a>\n              <a class=\"ds-grid__cell ds-grid__cell--4\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M8 1l2 5h5l-4 3.2 1.6 5.3L8 11.4 3.4 14.5 5 9.2 1 6h5z\"/></svg></span></span><span class=\"ds-grid__title\">Games</span><span class=\"ds-grid__text\">502 programs</span></a>\n              <a class=\"ds-grid__cell ds-grid__cell--3\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span></span><span class=\"ds-grid__title\">Graphics</span><span class=\"ds-grid__text\">196 programs</span></a>\n              <a class=\"ds-grid__cell ds-grid__cell--4\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><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 2.2a5.8 5.8 0 0 1 2 .4L9 5H6L5 3.2A5.8 5.8 0 0 1 8 2.2z M2.3 7l2.2-.6L7 8l-1 3 1.5 2.7A5.8 5.8 0 0 1 2.3 7z M13.7 7.5a5.8 5.8 0 0 1-3 5.5L10 10l1.2-2.5z\"/></svg></span></span><span class=\"ds-grid__title\">Internet</span><span class=\"ds-grid__text\">341 programs</span></a>\n              <a class=\"ds-grid__cell\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h12v12H2z M3 3v10h10V3z M4 5h2v2H4z M7 5h5v1H7z M4 9h2v2H4z M7 9h5v1H7z\"/></svg></span></span><span class=\"ds-grid__title\">Programming</span><span class=\"ds-grid__text\">173 programs</span></a>\n              <a class=\"ds-grid__cell ds-grid__cell--2\" href=\"#search\"><span class=\"ds-grid__icon\"><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M3 2h3v5h4V2h3v6l-3 2v5H6v-5L3 8z\"/></svg></span></span><span class=\"ds-grid__title\">Utilities</span><span class=\"ds-grid__text\">447 programs</span></a>\n            </div>\n          </section>\n\n          <fieldset class=\"ds-panel\" data-component=\"panel\">\n            <legend class=\"ds-panel__title\">New this week</legend>\n            <div class=\"ds-panel__body\">\n              <ul class=\"ds-list\" data-component=\"list\">\n                <li class=\"ds-list__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#program\">Tidepool Text 2.1</a> A fast plain text editor with tabs and a word count.</span> <span class=\"ds-list__meta\">412 KB, 14 Mar</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#program\">Lantern Transfer 1.4</a> Sends whole folders to your page host and resumes after a dropped line.</span> <span class=\"ds-list__meta\">688 KB, 13 Mar</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span><span class=\"ds-list__text\"><a class=\"ds-link is-visited\" href=\"#program\">Mothlight Saver</a> Twelve slow screen savers that are kind to old monitors.</span> <span class=\"ds-list__meta\">1,204 KB, 12 Mar</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span><span class=\"ds-list__text\"><a class=\"ds-link\" href=\"#program\">Tallybook 3.0</a> Household accounts with cheque printing.</span> <span class=\"ds-badge\">New</span> <span class=\"ds-list__meta\">950 KB, 11 Mar</span></li>\n              </ul>\n            </div>\n          </fieldset>\n\n          <table class=\"ds-table\">\n            <thead>\n              <tr>\n                <th class=\"ds-table__head\" scope=\"col\">Most downloaded</th>\n                <th class=\"ds-table__head\" scope=\"col\">Folder</th>\n                <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Size</th>\n                <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Downloads</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\"ds-table__row\">\n                <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Harbour Zip 4.2</a></td>\n                <td class=\"ds-table__cell\">Compression</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">306 KB</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">48,112</td>\n              </tr>\n              <tr class=\"ds-table__row\">\n                <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Kestrel Mail 1.6</a></td>\n                <td class=\"ds-table__cell\">Mail</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">1,480 KB</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">31,570</td>\n              </tr>\n              <tr class=\"ds-table__row\">\n                <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Pebble Paint 2.0</a></td>\n                <td class=\"ds-table__cell\">Graphics</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">774 KB</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">27,904</td>\n              </tr>\n              <tr class=\"ds-table__row\">\n                <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Tidepool Text 2.1</a></td>\n                <td class=\"ds-table__cell\">Text Editors</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">412 KB</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">19,266</td>\n              </tr>\n              <tr class=\"ds-table__row\">\n                <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Lantern Transfer 1.4</a></td>\n                <td class=\"ds-table__cell\">File Transfer</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">688 KB</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">16,031</td>\n              </tr>\n            </tbody>\n          </table>\n\n        </div>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"program\">\n    <div class=\"ds-page__body\">\n      <div class=\"ds-address\">\n        <span class=\"ds-address__label\">Address</span>\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Catalogue</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#search\">Utilities</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#search\">Text Editors</a></li>\n          <li class=\"ds-breadcrumb__item is-current\">Tidepool Text 2.1</li>\n        </ol>\n      </div>\n      <div class=\"ds-page__inner\">\n\n        <header class=\"ds-page-header\" data-component=\"page-header\">\n          <span class=\"ds-icon ds-icon--large\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span>\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Tidepool Text 2.1</h1>\n            <p class=\"ds-page-header__lead\">A fast plain text editor with tabs, a word count and no surprises.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button\" href=\"#program\">Download Now</a>\n          </div>\n        </header>\n\n        <div>\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab is-current\" href=\"#program\">General</a></li>\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#program\">Versions</a></li>\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#program\">Read Me</a></li>\n            <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#program\">Reviews (14)</a></li>\n          </ul>\n          <div class=\"ds-sheet\">\n            <div class=\"ds-split\">\n              <div class=\"ds-stack\">\n                <dl class=\"ds-props\">\n                  <dt class=\"ds-props__label\">Type:</dt>\n                  <dd class=\"ds-props__value\">Application, 32-bit</dd>\n                  <dt class=\"ds-props__label\">Location:</dt>\n                  <dd class=\"ds-props__value\"><a class=\"ds-link\" href=\"#search\">Catalogue\\Utilities\\Text Editors</a></dd>\n                  <dt class=\"ds-props__label\">Size:</dt>\n                  <dd class=\"ds-props__value\">412 KB (421,888 bytes)</dd>\n                  <dt class=\"ds-props__label\">Added:</dt>\n                  <dd class=\"ds-props__value\">Saturday, 14 March 1998</dd>\n                  <dt class=\"ds-props__label\">Author:</dt>\n                  <dd class=\"ds-props__value\"><a class=\"ds-link ds-link--quiet\" href=\"#search\">Marit Oakes</a></dd>\n                  <dt class=\"ds-props__label\">Rating:</dt>\n                  <dd class=\"ds-props__value\"><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\"></span><span class=\"ds-progress__block\"></span><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> 8 of 10</dd>\n                  <dt class=\"ds-props__label\">Status:</dt>\n                  <dd class=\"ds-props__value\"><span class=\"ds-badges\" data-component=\"badge\"><span class=\"ds-badge\">Shareware</span> <span class=\"ds-badge ds-badge--success\">Virus checked</span> <span class=\"ds-badge ds-badge--warning\">30 day trial</span> <span class=\"ds-badge ds-badge--danger\">Old version withdrawn</span></span></dd>\n                </dl>\n                <fieldset class=\"ds-group\">\n                  <legend class=\"ds-group__title\">You will need</legend>\n                  <ul class=\"ds-list\">\n                    <li class=\"ds-list__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h12v9H2z M3 3v7h10V3z M5 12h6v1h2v1H3v-1h2z\"/></svg></span><span class=\"ds-list__text\">A 486 processor or better, 8 MB of memory</span></li>\n                    <li class=\"ds-list__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h10l2 2v10H2z M4 3v4h7V3z M9 4h1v2H9z M4 9v4h8V9z M5 10h6v1H5z\"/></svg></span><span class=\"ds-list__text\">1 MB of free disk space</span></li>\n                  </ul>\n                </fieldset>\n              </div>\n              <div class=\"ds-stack\">\n                <table class=\"ds-table\" data-component=\"table\">\n                  <caption class=\"ds-table__caption\">4 object(s). The selected file is the one the Download button fetches.</caption>\n                  <thead>\n                    <tr>\n                      <th class=\"ds-table__head\" scope=\"col\">File</th>\n                      <th class=\"ds-table__head\" scope=\"col\">Version</th>\n                      <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Size</th>\n                      <th class=\"ds-table__head\" scope=\"col\">Modified</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr class=\"ds-table__row is-selected\">\n                      <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h10l2 2v10H2z M4 3v4h7V3z M9 4h1v2H9z M4 9v4h8V9z M5 10h6v1H5z\"/></svg></span> tide21.exe</td>\n                      <td class=\"ds-table__cell\">2.1</td>\n                      <td class=\"ds-table__cell ds-table__cell--num\">412 KB</td>\n                      <td class=\"ds-table__cell\">14/03/98</td>\n                    </tr>\n                    <tr class=\"ds-table__row\">\n                      <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h10l2 2v10H2z M4 3v4h7V3z M9 4h1v2H9z M4 9v4h8V9z M5 10h6v1H5z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">tide20.exe</a></td>\n                      <td class=\"ds-table__cell\">2.0</td>\n                      <td class=\"ds-table__cell ds-table__cell--num\">398 KB</td>\n                      <td class=\"ds-table__cell\">02/11/97</td>\n                    </tr>\n                    <tr class=\"ds-table__row\">\n                      <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 2h10l2 2v10H2z M4 3v4h7V3z M9 4h1v2H9z M4 9v4h8V9z M5 10h6v1H5z\"/></svg></span> <a class=\"ds-link is-visited\" href=\"#program\">tide16.zip</a></td>\n                      <td class=\"ds-table__cell\">1.6, 16-bit</td>\n                      <td class=\"ds-table__cell ds-table__cell--num\">287 KB</td>\n                      <td class=\"ds-table__cell\">19/05/97</td>\n                    </tr>\n                    <tr class=\"ds-table__row\">\n                      <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M3 1h7l3 3v11H3z M4 2v12h8V5H9V2z M5 7h6v1H5z M5 9h6v1H5z M5 11h4v1H5z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">readme.txt</a></td>\n                      <td class=\"ds-table__cell\">2.1</td>\n                      <td class=\"ds-table__cell ds-table__cell--num\">6 KB</td>\n                      <td class=\"ds-table__cell\">14/03/98</td>\n                    </tr>\n                  </tbody>\n                </table>\n                <section class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"d-title\">\n                  <h2 class=\"ds-dialog__title\" id=\"d-title\">File Download <span class=\"ds-window__ctl ds-window__ctl--close\" aria-hidden=\"true\"></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 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>\n                    <p class=\"ds-dialog__body\">Save <strong>tide21.exe</strong> (412 KB) to your disk? At 28.8 kbps this takes about 2 minutes.</p>\n                  </div>\n                  <div class=\"ds-dialog__actions\">\n                    <a class=\"ds-button\" href=\"#program\">Save</a>\n                    <a class=\"ds-button ds-button--secondary\" href=\"#program\">Cancel</a>\n                  </div>\n                </section>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <article class=\"ds-well ds-prose\" data-component=\"typography\">\n          <h1>Read me</h1>\n          <p class=\"ds-prose__lead\">Tidepool Text opens any plain file, however large, in under a second.</p>\n          <p>Thank you for trying <strong>Tidepool Text</strong>. This is the complete program, not a cut-down copy: you may use it for 30 days, and after that it asks you once a day to register.</p>\n          <h2>Installing</h2>\n          <p>Run <code>tide21.exe</code> and choose a folder. To start the editor with a file already open, type <code>tide notes.txt</code> at the command line.</p>\n          <ul>\n            <li>Nothing is written outside the folder you choose.</li>\n            <li>To remove the program, delete that folder.</li>\n          </ul>\n          <h3>Where to read more</h3>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#program\">The author's page</a>,\n            <a class=\"ds-link is-visited\" href=\"#program\">a review you have read</a>,\n            <a class=\"ds-link is-hover\" href=\"#program\">a link under the pointer</a>,\n            <a class=\"ds-link is-active\" href=\"#program\">a link as you click it</a> and\n            <a class=\"ds-link ds-link--quiet\" href=\"#search\">other programs in Text Editors</a>.\n          </p>\n        </article>\n\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"search\">\n    <div class=\"ds-page__body\">\n      <div class=\"ds-address\">\n        <span class=\"ds-address__label\">Address</span>\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Catalogue</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#search\">Find Results</a></li>\n          <li class=\"ds-breadcrumb__item is-current\">text editor</li>\n        </ol>\n      </div>\n      <div class=\"ds-page__inner\">\n\n        <header class=\"ds-page-header\">\n          <span class=\"ds-icon ds-icon--large\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" aria-hidden=\"true\"><path d=\"M6 1a5 5 0 1 0 0 10a5 5 0 0 0 0-10z M6 3a3 3 0 1 1 0 6a3 3 0 0 1 0-6z M9.6 8.2l5 5-1.4 1.4-5-5z\"/></svg></span>\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Find: Programs named 'text editor'</h1>\n            <p class=\"ds-page-header__lead\">23 programs found in 3 folders.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#home\">New Search</a>\n          </div>\n        </header>\n\n        <fieldset class=\"ds-group\">\n          <legend class=\"ds-group__title\">Look for</legend>\n          <form class=\"ds-find\" action=\"#search\">\n            <label for=\"s-name\">Named:</label>\n            <input class=\"ds-form__input\" id=\"s-name\" type=\"text\" value=\"text editor\">\n            <label for=\"s-in\">Look in:</label>\n            <select class=\"ds-form__select\" id=\"s-in\">\n              <option>Catalogue (all folders)</option>\n              <option>Utilities</option>\n              <option>Internet</option>\n            </select>\n            <label class=\"ds-form__option\"><input class=\"ds-form__check\" type=\"checkbox\" checked>Freeware only</label>\n            <span class=\"ds-find__fill\"></span>\n            <a class=\"ds-button\" href=\"#search\">Find Now</a>\n          </form>\n        </fieldset>\n\n        <p class=\"ds-notice\"><span class=\"ds-notice__label\">Tip:</span> put a phrase in quotation marks to find those words together, as in \"text editor\".</p>\n\n        <table class=\"ds-table\">\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\" scope=\"col\">Name</th>\n              <th class=\"ds-table__head\" scope=\"col\">In Folder</th>\n              <th class=\"ds-table__head\" scope=\"col\">Licence</th>\n              <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Size</th>\n              <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Downloads</th>\n              <th class=\"ds-table__head\" scope=\"col\">Modified</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"ds-table__row is-selected\">\n              <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Tidepool Text 2.1</a></td>\n              <td class=\"ds-table__cell\">Utilities\\Text Editors</td>\n              <td class=\"ds-table__cell\">Shareware</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">412 KB</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">19,266</td>\n              <td class=\"ds-table__cell\">14/03/98</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Quillnote 1.2</a></td>\n              <td class=\"ds-table__cell\">Utilities\\Text Editors</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Freeware</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">198 KB</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">11,402</td>\n              <td class=\"ds-table__cell\">30/01/98</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link is-visited\" href=\"#program\">Margin Notes 3.0</a></td>\n              <td class=\"ds-table__cell\">Business</td>\n              <td class=\"ds-table__cell\">Shareware</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">1,036 KB</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">8,750</td>\n              <td class=\"ds-table__cell\">08/12/97</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Page Smith 2.4</a></td>\n              <td class=\"ds-table__cell\">Internet\\Page Editors</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">Trial</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">2,210 KB</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">7,318</td>\n              <td class=\"ds-table__cell\">21/02/98</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Hexwright 1.0</a></td>\n              <td class=\"ds-table__cell\">Programming</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Freeware</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">144 KB</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">3,905</td>\n              <td class=\"ds-table__cell\">17/09/97</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><span class=\"ds-icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 2h14v12H1z M2 5v8h12V5z M3 6h5v3H3z M9 6h4v1H9z M9 8h4v1H9z M3 10h10v2H3z\"/></svg></span> <a class=\"ds-link\" href=\"#program\">Old Scribe 0.9</a></td>\n              <td class=\"ds-table__cell\">Utilities\\Text Editors</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">Withdrawn</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">96 KB</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">512</td>\n              <td class=\"ds-table__cell\">03/04/96</td>\n            </tr>\n          </tbody>\n        </table>\n\n        <ol class=\"ds-pagination\" data-component=\"pagination\">\n          <li class=\"ds-pagination__label\">Page 2 of 4:</li>\n          <li><a class=\"ds-pagination__link\" href=\"#search\">&lt; Previous</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#search\">1</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#search\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#search\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#search\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#search\">Next &gt;</a></li>\n        </ol>\n\n        <section class=\"ds-pane\">\n          <h2 class=\"ds-pane__title\">Matches in 'Submissions' (waiting to be tested)</h2>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <h3 class=\"ds-empty__title\">There are no items to show in this view.</h3>\n            <p class=\"ds-empty__text\">No program waiting to be tested matches 'text editor'. If you have written one, send it in.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#submit\">Submit a Program...</a>\n          </div>\n        </section>\n\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"submit\">\n    <div class=\"ds-page__body\">\n      <div class=\"ds-address\">\n        <span class=\"ds-address__label\">Address</span>\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Catalogue</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#submit\">Submissions</a></li>\n          <li class=\"ds-breadcrumb__item is-current\">Submit a Program Wizard</li>\n        </ol>\n      </div>\n      <div class=\"ds-page__inner\">\n\n        <header class=\"ds-page-header\">\n          <span class=\"ds-icon ds-icon--large\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M1 3h14v10H1z M2.6 4L8 8.4 13.4 4z M2 5v7h12V5L8 9.8z\"/></svg></span>\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Submit a Program Wizard</h1>\n            <p class=\"ds-page-header__lead\">Step 2 of 4: tell us about the program. A tester writes back within ten days.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#home\">Close</a>\n          </div>\n        </header>\n\n        <div class=\"ds-wizard\">\n          <ol class=\"ds-wizard__band\">\n            <li><span class=\"ds-icon ds-icon--large ds-icon--plain\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" fill-rule=\"evenodd\" shape-rendering=\"crispEdges\" aria-hidden=\"true\"><path d=\"M2 4h12v10H2z M3 5v8h10V5z M6 4h4v4H6z M1 2h14v2H1z\"/></svg></span></li>\n            <li class=\"ds-wizard__step\">1. About you</li>\n            <li class=\"ds-wizard__step is-current\">2. The program</li>\n            <li class=\"ds-wizard__step\">3. Send the file</li>\n            <li class=\"ds-wizard__step\">4. Finish</li>\n          </ol>\n          <div class=\"ds-wizard__main\">\n            <div class=\"ds-notices\" data-component=\"notice\">\n              <p class=\"ds-notice\"><span class=\"ds-notice__label\">Note:</span> files larger than 1.4 MB should be split so that each part fits on one floppy disk.</p>\n              <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__label\">Cannot continue.</span> The file name is longer than 8 characters. Shorten it and choose Next again.</p>\n            </div>\n            <form class=\"ds-form\" data-component=\"form\" action=\"#submit\">\n              <label class=\"ds-form__label\" for=\"f-name\">Program name:</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input\" id=\"f-name\" type=\"text\" value=\"Tidepool Text\">\n                <span class=\"ds-form__hint\">as it should appear in the catalogue</span>\n              </div>\n              <label class=\"ds-form__label\" for=\"f-file\">File name:</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input\" id=\"f-file\" type=\"text\" value=\"tidepool21.exe\">\n                <span class=\"ds-form__error\">Use at most 8 characters before the dot, for example tide21.exe.</span>\n              </div>\n              <label class=\"ds-form__label\" for=\"f-folder\">Folder:</label>\n              <div class=\"ds-form__field\">\n                <select class=\"ds-form__select\" id=\"f-folder\">\n                  <option>Utilities\\Text Editors</option>\n                  <option>Internet\\Page Editors</option>\n                  <option>Programming</option>\n                </select>\n              </div>\n              <span class=\"ds-form__label\">Licence:</span>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__option\"><input class=\"ds-form__check\" type=\"checkbox\" checked>Shareware</label>\n                <label class=\"ds-form__option\"><input class=\"ds-form__check\" type=\"checkbox\">Source code included</label>\n              </div>\n              <label class=\"ds-form__label\" for=\"f-desc\">Description:</label>\n              <div class=\"ds-form__field\">\n                <textarea class=\"ds-form__textarea\" id=\"f-desc\" rows=\"4\">A fast plain text editor with tabs and a word count.</textarea>\n              </div>\n            </form>\n            <hr class=\"ds-rule\">\n            <div class=\"ds-buttons\" data-component=\"buttons\">\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Discard Draft</button>\n              <span class=\"ds-find__fill\"></span>\n              <a class=\"ds-button ds-button--secondary\" href=\"#submit\">&lt; Back</a>\n              <a class=\"ds-button\" href=\"#submit\">Next &gt;</a>\n              <button class=\"ds-button\" type=\"button\" disabled>Finish</button>\n              <a class=\"ds-button ds-button--secondary\" href=\"#home\">Cancel</a>\n            </div>\n          </div>\n        </div>\n\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 Software Library, 1998. <a class=\"ds-link ds-link--quiet\" href=\"#submit\">Submit a program</a>, <a class=\"ds-link ds-link--quiet\" href=\"#search\">find a program</a> or read <a class=\"ds-link ds-link--quiet\" href=\"#program\">how programs are tested</a>.</li>\n      <li class=\"ds-status__cell\">2,418 object(s)</li>\n      <li class=\"ds-status__cell\">1.2 GB</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=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z M8 2.2a5.8 5.8 0 0 1 2 .4L9 5H6L5 3.2A5.8 5.8 0 0 1 8 2.2z M2.3 7l2.2-.6L7 8l-1 3 1.5 2.7A5.8 5.8 0 0 1 2.3 7z M13.7 7.5a5.8 5.8 0 0 1-3 5.5L10 10l1.2-2.5z\"/></svg></span> Mirror: north</li>\n    </ul>\n  </footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.windows-9x.app.s01.p01.t08.u08.dr\",\n  \"library\": \"2026.10.09-1036\",\n  \"era\": {\n    \"slug\": \"windows-9x\",\n    \"years\": [\n      1995,\n      2001\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 800,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-w9-1188-dr\",\n  \"short\": \"v1-w9-1188-dr\",\n  \"density\": \"roomy\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #008080;\n  --color-canvas: #c0c0c0;\n  --color-surface: #ffffff;\n  --color-surface-alt: #e8e8e8;\n  --color-surface-strong: #d0d0d0;\n  --color-bar: #000080;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #c0c0c0;\n  --color-bar-alt-text: #000000;\n  --color-inverse: #808080;\n  --color-inverse-text: #ffffff;\n  --color-text: #000000;\n  --color-text-muted: #505050;\n  --color-heading: #000000;\n  --color-heading-alt: #000080;\n  --color-link: #000080;\n  --color-link-quiet: #000000;\n  --color-link-visited: #800080;\n  --color-link-hover: #0000f0;\n  --color-link-active: #d00000;\n  --color-border: #808080;\n  --color-border-strong: #000000;\n  --color-border-muted: #dfdfdf;\n  --color-accent: #000080;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #d00000;\n  --color-fill-1: #ffffd0;\n  --color-fill-2: #98d0d0;\n  --color-fill-3: #98d0ff;\n  --color-fill-4: #ffd098;\n  --color-button: #c0c0c0;\n  --color-button-text: #000000;\n  --color-button-hover-text: #000000;\n  --color-button-secondary: #c0c0c0;\n  --color-button-secondary-text: #000000;\n  --color-input: #ffffff;\n  --color-input-text: #000000;\n  --color-input-border: #808080;\n  --color-disabled: #c0c0c0;\n  --color-disabled-text: #808080;\n  --color-danger: #a00000;\n  --color-danger-surface: #fff8e8;\n  --color-success: #006830;\n  --color-warning: #986800;\n  --color-notice: #ffffd0;\n  --color-notice-text: #000000;\n  --color-focus: #000000;\n  --color-shadow: #000000;\n  --color-overlay: rgba(0, 0, 0, 0.4);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Arial Narrow\", \"Helvetica Neue Condensed\", \"Nimbus Sans Narrow\", Arial, sans-serif;\n  --font-heading: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n  --font-ui: \"Arial Narrow\", \"Helvetica Neue Condensed\", \"Nimbus Sans Narrow\", Arial, sans-serif;\n  --font-mono: \"OCR A Std\", \"Lucida Console\", \"Courier New\", monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 13px;\n  --text-large: 15px;\n  --text-display: 32px;\n  --text-h1: 22px;\n  --text-h2: 16px;\n  --text-h3: 13px;\n  --line-body: 1.3;\n  --line-heading: 1.1;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.5px;\n  --display-tracking: 1px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: inset 0 0 0 1px var(--color-border-strong), inset 0 2px 0 0 color-mix(in srgb, var(--color-border-muted) 70%, white), inset 0 -3px 0 0 color-mix(in srgb, var(--color-shadow) 30%, transparent), 4px 4px 0 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n  --shadow-control: inset 0 0 0 1px var(--color-border-strong), inset 0 2px 0 0 color-mix(in srgb, var(--color-border-muted) 70%, white), inset 0 -3px 0 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n  --shadow-control-hover: inset 0 0 0 1px var(--color-border-strong), inset 0 2px 0 0 var(--color-accent), inset 0 -3px 0 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n  --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong), inset 0 3px 0 0 color-mix(in srgb, var(--color-shadow) 35%, transparent), inset 0 -2px 0 0 color-mix(in srgb, var(--color-border-muted) 45%, transparent);\n  --shadow-dialog: inset 0 0 0 1px var(--color-border-strong), inset 0 0 0 3px var(--color-accent), 6px 6px 0 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n  --shadow-text: none;\n  --fill-page: linear-gradient(color-mix(in srgb, var(--color-page), white 10%) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, color-mix(in srgb, var(--color-page), white 10%) 1px, transparent 1px) 0 0 / 16px 16px, var(--color-page);\n  --fill-bar: linear-gradient(180deg, color-mix(in srgb, var(--color-bar), white 32%), var(--color-bar) 48%, color-mix(in srgb, var(--color-bar), black 28%));\n  --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt), white 12%), color-mix(in srgb, var(--color-bar-alt), black 12%));\n  --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 2px, color-mix(in srgb, var(--color-inverse), black 7%) 2px 3px);\n  --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent), white 35%), var(--color-accent) 60%);\n  --fill-panel: var(--color-canvas);\n  --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button), white 18%), var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 16%));\n  --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button), white 32%), color-mix(in srgb, var(--color-button), white 8%));\n  --fill-button-secondary: linear-gradient(180deg, color-mix(in srgb, var(--color-button-secondary), white 18%), var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 16%));\n  --fill-input: var(--color-input);\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}