{
  "id": "v1-hp-4334-dc",
  "long_id": "v1.home-pages-90s.shop.s04.p03.t03.u04.dc",
  "name": "Personal home page: the shareware author's page, 1998",
  "era": {
    "slug": "home-pages-90s",
    "code": "hp",
    "name": "Personal home pages",
    "years": [
      1996,
      2001
    ],
    "description": "The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts."
  },
  "archetype": "shop",
  "mode": "mix",
  "viewport": {
    "width": 800,
    "fluid": false
  },
  "density": "compact",
  "summary": "The page of one person who writes small programs and gives them away to try, as such pages looked between 1996 and 2001: the whole site dressed as a program window, a grey framed sheet on a dithered grey desktop with a blue title banner, a toolbar of raised keys and a status bar at the foot. Text is black Arial on silver and white, headings are navy and maroon, links are the default blue and underlined, boxes have 2px grooved borders and the bars fade from dark to light like a title bar. Rows of programs with file sizes, a \"why register\" table, dated news and a printed order form are its furniture; it faded when download sites and on-line shops took the author's place.",
  "url": "https://chrono.skin/s/v1-hp-4334-dc",
  "preview_url": "https://chrono.skin/s/v1-hp-4334-dc/specimen.html",
  "files": {
    "STYLE.md": "# Personal home page: the shareware author's page, 1998\n\n## Summary\n\nThe page of one person who writes small programs and gives them away to try, as such pages looked between 1996 and 2001: the whole site dressed as a program window, a grey framed sheet on a dithered grey desktop with a blue title banner, a toolbar of raised keys and a status bar at the foot. Text is black Arial on silver and white, headings are navy and maroon, links are the default blue and underlined, boxes have 2px grooved borders and the bars fade from dark to light like a title bar. Rows of programs with file sizes, a \"why register\" table, dated news and a printed order form are its furniture; it faded when download sites and on-line shops took the author's place.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 760px. `.ds-page__frame` is one sheet in `--color-canvas` with a `--border-width-strong` border in `--color-border-strong` and `--shadow-dialog`, centred in an 800px window with `--space-4` above it. Everything, header and footer included, is inside the sheet and left-aligned.\n- `.ds-nav` is written once at the top of the sheet: `.ds-nav__top`, a banner on `--fill-bar` with the `.ds-brand` (mark and name at `--text-display`) at the left and `.ds-nav__aside` (tagline and one line) right-aligned; under it `.ds-nav__links`, a toolbar of bevelled keys on `--color-surface-strong` with the date of the last update at the right end.\n- The specimen is one example site, a shareware author's page, of four views.\n- Home view, `.ds-page__main`: the `.ds-hero` (words and buttons at the left, `.ds-shot`, a drawing of the program's window `--size-shot` 230px wide, at the right), the `.ds-stat` strip of four figures, a `.ds-heading` over the `.ds-list` of program rows, then `.ds-page__pair` at three parts to two: a heading over the two by two `.ds-grid` and the `.ds-construction` strip at the left, a `.ds-panel` of dated news at the right.\n- Inner pages keep the banner, toolbar and status bar and drop the hero and the figures. `.ds-page__inner` opens with `.ds-page__head`: the `.ds-breadcrumb` and the `.ds-page-header` (title and one italic line at the left, a button at the right, a thick line under). Below it: a `.ds-tabs` row sitting on the table it sorts, then page numbers and a section with the empty state; or `.ds-page__columns`, a `--size-side` (190px) `.ds-sidebar` of fact boxes at the left and `.ds-prose` at the right; or notices over a `.ds-page__pair` of the form and a column with a panel and the message box.\n- Views: `home`; `programs` (tabs, the table of programs with its badge key, page numbers, the empty list of beta versions); `clock` (one program: sidebar, running text, link states); `register` (notices, the order form, where to send it, the confirm message box).\n- Spacing: `--space-1` 2px between toolbar keys and inside strips; `--space-2` 4px cell and strip padding; `--space-3` 8px between a title and its block, between buttons, form rows and grid cells; `--space-4` 12px box padding and paragraph spacing; `--space-5` 16px sheet padding and the gap between blocks and columns; `--space-6` 24px list indent and the space under the sheet.\n- Fixed sizes: `--size-label` 150px form labels, `--size-field` 240px inputs, `--size-area` 360px textarea, `--size-check` 16px, `--size-dialog` 380px, `--size-icon` 40px program icon, `--size-meta` 132px version column of a program row.\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\nThe conventions for which text sits on which fill are those of the era's first layout: text, heading, link and status colours are legible on page, canvas, surfaces and the four fills; bars, the inverse, the accent and notices bring their own text colour; status colours as fills are lettered in `--color-canvas`. This layout adds one: the menu frame is `--fill-bar-alt`, so everything on it that is not a button uses `--color-bar-alt-text`.\n\n- `--font-body` Verdana 12px at line height 1.4, small print 10px. `--font-heading` Arial Black (weight 900), uppercase by `--heading-transform`: 14, 20 and 30px, the front-page title 44px with -1px tracking. `--font-ui` Arial 11px bold uppercase sets buttons, menu bars, table heads, tabs, the path and figure labels. `--font-mono` (Andale Mono, Courier New) sets code and the counter. Links in text are underlined; quiet links are not (`--link-decoration-quiet: none`).\n- `--color-page` navy `#00004d` under the bricks, `--color-surface` `#000066` for boxes and rows, `--color-surface-alt` `#1a1a80` alternate rows, `--color-surface-strong` `#33338f` inactive tabs, the closing row of a table and the ground between figures.\n- `--color-text` white; `--color-heading` orange `#ff9933` (titles, h1, h3); `--color-heading-alt` gold `#ffcc00` (figures, h2, dates, icons, form labels). Links sky `#66ccff`, visited lilac, hover yellow. `--color-accent-alt` aqua is the \"Updated!\" word and bullets.\n- `--fill-bar` orange with navy text is section heading bars, table heads, the current tab and the dialog title. `--fill-bar-alt` brick red with pale gold text is the menu frame and title strips. `--fill-inverse` white with navy text is awards, the counter and the current page number. `--fill-accent` gold with navy text is the pressed menu bar and the \"New!\" badge. `--color-fill-1` to `-4` (maroon, brown, teal, plum) are the shelves and the table swatches and carry white text and sky links.\n- Buttons are red `--color-button` with white text; the secondary is blue.\n- Surface: `--border-style` `outset`, 2px for boxes, 4px for the frame border, the title box, awards and the dialog. Boxes cast a hard 3px black shadow (`--shadow-panel`), the title box and dialog 5px, buttons 1px; nothing is blurred. `--shadow-text` is a 1px hard shadow on bars, titles and the name. Bars and buttons are top-lit gradients; `--fill-input` has a 2px inner shade; `--fill-page` is a 48 by 32px brick pattern over `--color-page`. Radius 0, no transitions.\n- Written literally: `outset` and `inset` bevels on buttons, menu bars, swatches and controls, `solid` row rules and the tab base line, italic for the tagline and lead lines, the `letter-spacing` of the counter (`--space-1`), and `.ds-blink`.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on `<body>`; the tiled page and body type. `.ds-page__frame` the sheet; `.ds-page__main` and `.ds-page__inner` stack blocks `--space-5` apart inside it; `.ds-page__head` stacks path and page header; `.ds-page__columns` sidebar plus text; `.ds-page__pair` two blocks at three parts to two; `.ds-section` a heading with its block.\n- `.ds-nav`: banner and toolbar. `.ds-nav__top` the banner, `.ds-nav__aside` with `.ds-nav__tagline` and `.ds-nav__note`; `.ds-nav__links` the toolbar of `.ds-nav__item` / `.ds-nav__link` keys, `.ds-nav__item--end` a note pushed to the right. The key of the view that shows is pressed in on `--fill-accent` (one selector per view, or `is-current`).\n- `.ds-brand`: mark and name on the banner. `.ds-brand__mark` is a tile dressed like the button (`--fill-button`, `--color-button-text`, outset bevel, `--radius-control`, `--shadow-control`) holding the mark as inline SVG with square caps; `.ds-brand__name` is the name at `--text-display`. Name and mark are placeholders for the installing project's own.\n- `.ds-hero`: the featured program on `--fill-panel`: `.ds-hero__text` with `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large` and a secondary button) and `.ds-hero__hint`; beside it `.ds-shot`, a small window: `.ds-shot__title` strip, `.ds-shot__body`, `.ds-shot__readout` on `--fill-inverse`, `.ds-shot__caption`.\n- `.ds-page-header`: `.ds-page-header__text` with `.ds-page-header__title` and the italic `.ds-page-header__lead`, `.ds-page-header__action` at the right, a thick line under.\n- `.ds-heading`: a left-aligned section title in `--color-heading-alt` over a full-width line.\n- `.ds-rule`: a plain carved rule.\n- `.ds-table`: every cell ruled, the borders collapsed: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num` in the monospace, `--group` a closing row on `--color-fill-2`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: the strip of figures; each `.ds-stat__item` is a `.ds-stat__value` over a `.ds-stat__label`, with a rule between items.\n- `.ds-list`: one row for each program: `.ds-list__item` with a `.ds-list__icon` tile (`--2`, `--3`, `--4` pick the fill), a `.ds-list__body` holding the `.ds-list__title` link and `.ds-list__text`, and `.ds-list__meta` (version and size) over the `.ds-list__get` link. `.ds-list__more` under it.\n- `.ds-panel`: a small window: `.ds-panel__title` strip on `--fill-bar-alt`, `.ds-panel__body`, `.ds-panel__text`. `.ds-news` with `.ds-news__item` and `.ds-news__date` is the dated news inside it.\n- `.ds-grid`: two cells to a row: `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) with a `.ds-grid__title` and a `.ds-grid__text`.\n- `.ds-tabs`: property-sheet tabs on a base line, `.ds-tabs__item` / `.ds-tabs__tab`, the current one (`is-current`) taller and on `--fill-bar`.\n- `.ds-sidebar`: a column of `.ds-sidebar__block` boxes, each a `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` lines.\n- `.ds-footer`: the foot of the window on `--color-surface-strong`: `.ds-footer__links` with `.ds-footer__item`, then `.ds-footer__status`, three sunken `.ds-footer__cell` boxes.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` the italic opening line, `.ds-prose__code` a block to copy.\n- `.ds-link`: every link; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` small, `.ds-link--strong` bold, `.ds-link--plain` on a coloured fill. `.ds-links` wraps a line of them. `.ds-icon` holds a small drawing before a link.\n- `.ds-bullets`: a link list with small square marks, `.ds-bullets__item` holding a `.ds-bullets__text`.\n- `.ds-button`: a bevelled key; `.ds-button--secondary`, `.ds-button--danger`, `.ds-button--large`; states `is-hover`, `is-pressed`, `is-focus`, `is-disabled`. `.ds-buttons` lays out a row.\n- `.ds-form`: two columns, right-aligned `.ds-form__label` and `.ds-form__field`; `.ds-form__input` (`--short`, `is-error`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check`, `.ds-form__hint`, `.ds-form__error`, `.ds-form__actions`.\n- `.ds-badge`: a solid \"NEW!\" label on `--fill-accent`; `.ds-badge--text` an italic coloured word, `.ds-badge--count` a muted count, `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` status labels; `.ds-badges` the key line under a table.\n- `.ds-notice`: a line on `--color-notice`; `.ds-notice__label`; `.ds-notice--error`. `.ds-notices` stacks them.\n- `.ds-pagination`: a centred line: `.ds-pagination__label`, `.ds-pagination__link` with `is-current` (on `--fill-accent`) and `is-disabled`.\n- `.ds-breadcrumb`: a small path, `.ds-breadcrumb__item` separated by a coloured mark, the last `is-current`.\n- `.ds-dialog`: a message box in the page flow: `.ds-dialog__title` bar on `--fill-bar`, `.ds-dialog__body`, `.ds-dialog__actions`. No backdrop.\n- `.ds-empty`: `.ds-empty__title`, `.ds-empty__text` and a button on `--color-surface-alt`.\n- `.ds-construction`: the diagonal-striped strip with `.ds-construction__text` on it. `.ds-blink`: add to one small mark for the slow blink.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n\n## Never\n\n- `content-width <= 760px`: everything is inside the 760px sheet.\n- `font-size <= 44px`: the front-page title is the largest text.\n- `font-size >= 10px`: small print is 10px.\n- `font-weight >= 400`: regular, bold and black only.\n- `font-families <= 4`: Verdana, Arial Black, Arial and one monospace.\n- `border-radius <= 0px`: every box, key and field is square.\n- `box-shadow-blur <= 0px`: the only shadows are hard 1px and 2px edges.\n- `text-shadow = none`: text is flat.\n- `border-width <= 3px`: the sheet's groove is the thickest line.\n- `transition = none`: nothing eases on hover.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new program is a row of `.ds-list` and a row of `.ds-table`; a new page gets a key in the toolbar; a new block on the sheet is a `.ds-heading` over a grooved box, or a `.ds-panel` when it needs a title strip; a new figure joins `.ds-stat`. Keep everything inside the one sheet and left-aligned, keep the banner and the status bar, keep links underlined, and never add radius, soft shadows, hover transitions, centred columns of text or a menu down the side.\n",
    "components.css": "/* Layout tokens (structure part). A shareware author's page of 1998 dressed\n   as a program window: one 760px framed sheet in an 800px window, a banner\n   with the name, a toolbar of keys under it, wide left-aligned rows inside\n   and a status bar at the foot. */\n:root {\n  --size-page: 760px;\n  --size-side: 190px;\n  --size-shot: 230px;\n  --size-label: 150px;\n  --size-field: 240px;\n  --size-area: 360px;\n  --size-check: 16px;\n  --size-dialog: 380px;\n  --size-icon: 40px;\n  --size-meta: 132px;\n  --space-1: 2px;\n  --space-2: 3px;\n  --space-3: 6px;\n  --space-4: 10px;\n  --space-5: 13px;\n  --space-6: 19px;\n}\n\n/* ---------- shell: the whole site is one framed window on the tile ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-4) 0 var(--space-6);\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__frame {\n  box-sizing: border-box;\n  width: var(--size-page);\n  margin: 0 auto;\n  background: var(--color-canvas);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-dialog);\n  text-align: left;\n}\n.ds-page__main,\n.ds-page__inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n  padding: var(--space-5);\n}\n.ds-page__head {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n/* A program's own page: a narrow column of fact boxes at the left, the text at the right. */\n.ds-page__columns {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  column-gap: var(--space-5);\n  align-items: start;\n}\n/* Two unequal blocks side by side: three parts to two. */\n.ds-page__pair {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-width: 0;\n}\n\n/* Section title: left-aligned over a full-width line. */\n.ds-heading {\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  color: var(--color-heading-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- nav: a banner with the name, then a toolbar of keys ---------- */\n.ds-nav {\n  display: block;\n}\n.ds-nav__top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-brand {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--text-display);\n  height: var(--text-display);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) outset var(--color-button);\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-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__aside {\n  min-width: 0;\n  text-align: right;\n}\n.ds-nav__tagline {\n  display: block;\n  font-size: var(--text-large);\n  font-style: italic;\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__note {\n  display: block;\n  font-size: var(--text-small);\n}\n/* The toolbar: raised keys on a grey ground, the current one pressed in. */\n.ds-nav__links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  list-style: none;\n  background: var(--color-surface-strong);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__item {\n  display: flex;\n}\n.ds-nav__item--end {\n  margin: 0 0 0 auto;\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) outset var(--color-button);\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-bold);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n}\n/* The page that is showing: the key stays down, in the accent fill. One\n   selector for each view, and the home key when the address names no view. */\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(#programs:target) .ds-nav__link[href=\"#programs\"],\n.ds-page:has(#clock:target) .ds-nav__link[href=\"#clock\"],\n.ds-page:has(#register:target) .ds-nav__link[href=\"#register\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-style: inset;\n  border-color: var(--color-accent);\n  box-shadow: var(--shadow-control-pressed);\n}\n\n/* ---------- hero: the featured program, words at the left, its window at the right ---------- */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-shot);\n  column-gap: var(--space-5);\n  align-items: center;\n  padding: var(--space-4) var(--space-5);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-hero__text {\n  min-width: 0;\n}\n.ds-hero__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-hero__lead {\n  margin: var(--space-3) 0;\n  font-size: var(--text-large);\n}\n.ds-hero__action {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-hero__hint {\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n/* A drawing of the program's window: title strip, a read-out, a caption. */\n.ds-shot {\n  background: var(--color-surface-alt);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  text-align: center;\n}\n.ds-shot__title {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n.ds-shot__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-3);\n}\n.ds-shot__readout {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border: var(--border-width) inset var(--color-border);\n  font-family: var(--font-mono);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-display);\n}\n.ds-shot__caption {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- page header: title and one line at the left, a key at the right ---------- */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: 0 0 var(--space-3);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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: var(--space-1) 0 0;\n  color: var(--color-heading-alt);\n  font-style: italic;\n}\n.ds-page-header__action {\n  flex: none;\n}\n\n/* ---------- table: every cell ruled, as a table with a border was ---------- */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  background: var(--color-surface);\n  color: var(--color-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  box-shadow: var(--shadow-panel);\n  font-size: var(--text-base);\n}\n.ds-table__head {\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n  text-align: right;\n}\n.ds-table__cell--num {\n  font-family: var(--font-mono);\n}\n.ds-table__row--alt .ds-table__cell {\n  background: var(--color-surface-alt);\n}\n.ds-table__cell--group {\n  background: var(--color-fill-2);\n}\n.ds-table__desc {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding: var(--space-3) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-small);\n  text-align: left;\n}\n\n/* ---------- stats: one ruled strip of figures ---------- */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\n}\n.ds-stat__item {\n  padding: var(--space-3) var(--space-2);\n}\n.ds-stat__item + .ds-stat__item {\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__value {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n}\n.ds-stat__label {\n  display: block;\n  padding: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- list: one row for each program ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\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);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  font-size: var(--text-base);\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-icon) minmax(0, 1fr) var(--size-meta);\n  column-gap: var(--space-4);\n  align-items: center;\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-list__item:last-child {\n  border-bottom: 0;\n}\n.ds-list__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  padding: var(--space-2);\n  background: var(--color-fill-1);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__icon--2 {\n  background: var(--color-fill-2);\n}\n.ds-list__icon--3 {\n  background: var(--color-fill-3);\n}\n.ds-list__icon--4 {\n  background: var(--color-fill-4);\n}\n.ds-list__icon svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-list__body {\n  min-width: 0;\n}\n.ds-list__title {\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n}\n.ds-list__text {\n  display: block;\n}\n.ds-list__meta {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  text-align: right;\n}\n.ds-list__get {\n  display: block;\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-list__more {\n  margin: 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: right;\n}\n\n/* ---------- panel: a small window with a title strip ---------- */\n.ds-panel {\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-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n  padding: var(--space-3) var(--space-4);\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n  margin: 0;\n}\n/* Dated lines of news inside a panel. */\n.ds-news {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-news__item {\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-news__item:last-child {\n  border-bottom: 0;\n}\n.ds-news__date {\n  display: block;\n  color: var(--color-heading-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- grid: two by two reasons, each on its own colour ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-3);\n}\n.ds-grid__cell {\n  min-width: 0;\n  padding: var(--space-3) 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  box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  margin: 0;\n}\n\n/* ---------- tabs: the tabs of a property sheet, on a base line ---------- */\n.ds-tabs {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0 var(--space-3);\n  list-style: none;\n  border-bottom: var(--border-width) solid var(--color-border-strong);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n  display: flex;\n}\n.ds-tabs__tab {\n  padding: var(--space-1) var(--space-4);\n  background: var(--color-surface-alt);\n  color: var(--color-link);\n  border: var(--border-width) outset var(--color-border);\n  border-bottom: 0;\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n}\n\n/* ---------- sidebar: a column of small windows ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-sidebar__block {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-sidebar__item {\n  padding: var(--space-1) 0;\n}\n.ds-sidebar__item + .ds-sidebar__item {\n  border-top: var(--border-width) dotted var(--color-border-muted);\n}\n\n/* ---------- footer: links, then a status bar of sunken cells ---------- */\n.ds-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3);\n  background: var(--color-surface-strong);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__item + .ds-footer__item::before {\n  content: \"|\";\n  padding: 0 var(--space-3);\n  color: var(--color-text-muted);\n}\n.ds-footer__status {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);\n  gap: var(--space-1);\n}\n.ds-footer__cell {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--color-canvas);\n  color: var(--color-text);\n  border: var(--border-width) inset var(--color-border);\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/* ---------- rule: the plain carved line ---------- */\n.ds-rule {\n  box-sizing: border-box;\n  width: 100%;\n  height: 0;\n  margin: 0 auto;\n  border: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- under construction: a strip of diagonal stripes ---------- */\n.ds-construction {\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2);\n  background: repeating-linear-gradient(-45deg, var(--color-notice) 0 var(--space-4), var(--color-notice-text) var(--space-4) calc(var(--space-4) * 2));\n  border: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\n}\n.ds-construction__text {\n  display: inline-block;\n  padding: var(--space-1) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- blink: a slow two-step dim, only when motion is welcome ---------- */\n@media (prefers-reduced-motion: no-preference) {\n  .ds-blink {\n    animation: ds-blink 1.6s steps(2, jump-none) infinite;\n  }\n}\n@keyframes ds-blink {\n  from { opacity: 1; }\n  to { opacity: 0.6; }\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  font-size: var(--text-small);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n/* A link on a bar, a notice or another coloured fill takes that fill's text colour. */\n.ds-link--plain,\n.ds-link--plain:visited,\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n  color: inherit;\n  text-decoration: underline;\n}\n.ds-links {\n  margin: 0 0 var(--space-4);\n}\n/* The little drawing before an e-mail link or a download. */\n.ds-icon {\n  display: inline-block;\n  width: var(--text-large);\n  height: var(--text-large);\n  vertical-align: middle;\n  color: var(--color-accent-alt);\n}\n.ds-icon svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* ---------- bullets: a link list with small square marks ---------- */\n.ds-bullets {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  text-align: left;\n}\n.ds-bullets__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n}\n.ds-bullets__item::before {\n  content: \"\";\n  flex: none;\n  width: var(--space-3);\n  height: var(--space-3);\n  background: var(--color-accent-alt);\n}\n.ds-bullets__item:nth-child(even)::before {\n  background: var(--color-heading-alt);\n}\n.ds-bullets__text {\n  min-width: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n  min-width: 0;\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n  text-align: left;\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  color: var(--color-heading-alt);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\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 var(--space-6);\n}\n.ds-prose li::marker {\n  color: var(--color-accent-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading-alt);\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  color: var(--color-heading-alt);\n  font-size: var(--text-large);\n  font-style: italic;\n}\n/* A block of text to copy: a command line, a code, a key. */\n.ds-prose__code {\n  margin: 0 0 var(--space-4);\n  padding: var(--space-3);\n  overflow: hidden;\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  white-space: pre-wrap;\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.ds-button {\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-1) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) outset var(--color-button);\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-transform: var(--ui-transform);\n  text-decoration: none;\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  border-style: inset;\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-button-secondary);\n}\n.ds-button--large {\n  padding: var(--space-2) var(--space-5);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n}\n/* Destructive action: the danger colour as the fill, the sheet colour as the label. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-danger);\n  color: var(--color-canvas);\n  border-color: var(--color-danger);\n  font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: var(--color-disabled);\n  box-shadow: none;\n}\n\n/* ---------- form: labels at the left, fields at the right ---------- */\n.ds-form {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  column-gap: var(--space-3);\n  row-gap: var(--space-3);\n  align-items: baseline;\n  margin: 0;\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  text-align: left;\n}\n.ds-form__label {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n  text-align: right;\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  margin: 0;\n  padding: var(--space-1) var(--space-2);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) inset var(--color-input-border);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  transition: var(--transition);\n}\n.ds-form__input {\n  width: var(--size-field);\n  max-width: 100%;\n}\n.ds-form__input--short {\n  width: calc(var(--size-field) / 2);\n}\n.ds-form__select {\n  max-width: 100%;\n}\n.ds-form__textarea {\n  display: block;\n  width: var(--size-area);\n  max-width: 100%;\n  font-family: var(--font-mono);\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}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\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__check {\n  appearance: none;\n  box-sizing: border-box;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0 var(--space-2) 0 0;\n  padding: var(--space-1);\n  vertical-align: middle;\n  background-color: var(--color-input);\n  border: var(--border-width) inset var(--color-input-border);\n  border-radius: var(--radius-control);\n}\n/* The tick is a block of the field's text colour inside the field's own 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-color: var(--color-input-text);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__error {\n  display: block;\n  color: var(--color-danger);\n  font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n  grid-column: 2;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-2) 0 0;\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-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-body);\n  text-transform: var(--ui-transform);\n  vertical-align: baseline;\n}\n/* A loud italic word with no box. */\n.ds-badge--text {\n  padding: 0;\n  background: transparent;\n  color: var(--color-accent-alt);\n  font-style: italic;\n}\n.ds-badge--count {\n  padding: 0;\n  background: transparent;\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n/* Status labels: the status colour as the fill, the sheet colour as the word. */\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-canvas);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-canvas);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-canvas);\n}\n.ds-badges {\n  display: block;\n  padding: 0 0 var(--space-2);\n}\n\n/* ---------- notice ---------- */\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);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  text-align: left;\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/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n  position: static;\n  box-sizing: border-box;\n  width: var(--size-dialog);\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n}\n.ds-dialog__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n.ds-dialog__body {\n  margin: 0;\n  padding: var(--space-4) var(--space-4) var(--space-3);\n  text-align: center;\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-3) var(--space-4);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  padding: var(--space-4);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-base);\n  text-align: center;\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-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: baseline;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-pagination__label {\n  color: var(--color-heading-alt);\n  font-style: italic;\n  font-weight: var(--weight-body);\n}\n.ds-pagination__link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n  padding: 0 var(--space-2);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  text-decoration: none;\n}\n\n/* ---------- breadcrumb: \"you are here\", small ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\\00bb\";\n  padding: 0 var(--space-3);\n  color: var(--color-accent-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__item.is-current {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\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: a shareware author's page, 1996 to 2001: 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__frame\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__top\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M12.00 2.00L13.66 5.82L17.00 3.34L16.53 7.47L20.66 7.00L18.18 10.34L22.00 12.00L18.18 13.66L20.66 17.00L16.53 16.53L17.00 20.66L13.66 18.18L12.00 22.00L10.34 18.18L7.00 20.66L7.47 16.53L3.34 17.00L5.82 13.66L2.00 12.00L5.82 10.34L3.34 7.00L7.47 7.47L7.00 3.34L10.34 5.82ZM9.4 12a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <div class=\"ds-nav__aside\">\n        <span class=\"ds-nav__tagline\">Small programs for Windows</span>\n        <span class=\"ds-nav__note\">Written by one person. Try before you buy.</span>\n      </div>\n    </div>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#programs\">All Programs</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#clock\">chronoskin Clock</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#register\">Register</a></li>\n      <li class=\"ds-nav__item ds-nav__item--end\">Last updated 9 November 1998</li>\n    </ul>\n  </header>\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n    <main class=\"ds-page__main\">\n\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <div class=\"ds-hero__text\">\n          <h1 class=\"ds-hero__title\">chronoskin Clock 2.1 is here</h1>\n          <p class=\"ds-hero__lead\">A desktop clock with alarms, a stopwatch and a counter for your time on line. It fits on one floppy and it is yours to try for 30 days.</p>\n          <div class=\"ds-hero__action\">\n            <a class=\"ds-button ds-button--large\" href=\"#clock\">Download (412 K)</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#register\">How to Register</a>\n          </div>\n          <p class=\"ds-hero__hint\">For Windows 95, 98 and NT 4. No time limit on the freeware programs.</p>\n        </div>\n        <div class=\"ds-shot\">\n          <span class=\"ds-shot__title\">chronoskin Clock</span>\n          <div class=\"ds-shot__body\">\n            <span class=\"ds-shot__readout\">14:32:07</span>\n            <span class=\"ds-shot__caption\">The main window, actual size</span>\n          </div>\n        </div>\n      </section>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">4</span> <span class=\"ds-stat__label\">programs to download</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">61,204</span> <span class=\"ds-stat__label\">downloads since 1996</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">1,318</span> <span class=\"ds-stat__label\">registered users</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">$10</span> <span class=\"ds-stat__label\">to register any program</span></li>\n      </ul>\n\n      <section class=\"ds-section\">\n        <h2 class=\"ds-heading\">The Programs</h2>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 6v6l4 3\"/></svg></span>\n            <span class=\"ds-list__body\"><a class=\"ds-link ds-list__title\" href=\"#clock\">chronoskin Clock</a> <span class=\"ds-badge ds-blink\">NEW!</span> <span class=\"ds-list__text\">Clock, alarms, stopwatch and an on-line time counter in the corner of your screen.</span></span>\n            <span class=\"ds-list__meta\">v2.1, 412 K <a class=\"ds-link ds-list__get\" href=\"#clock\">Download</a></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__icon ds-list__icon--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 3h14v18H5zM9 8h6M9 12h6M9 16h3\"/></svg></span>\n            <span class=\"ds-list__body\"><a class=\"ds-link ds-list__title\" href=\"#programs\">chronoskin Notes</a> <span class=\"ds-list__text\">Yellow notes that stay on the desktop and come back after a restart.</span></span>\n            <span class=\"ds-list__meta\">v1.4, 188 K <a class=\"ds-link ds-list__get\" href=\"#programs\">Download</a></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__icon ds-list__icon--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M3 6h7l2 3h9v10H3zM8 14h8M13 11l3 3-3 3\"/></svg></span>\n            <span class=\"ds-list__body\"><a class=\"ds-link ds-list__title is-visited\" href=\"#programs\">chronoskin Renamer</a> <span class=\"ds-badge ds-badge--text\">Updated!</span> <span class=\"ds-list__text\">Renames a whole folder of files by a pattern, with a preview before it does anything.</span></span>\n            <span class=\"ds-list__meta\">v3.0, 256 K <a class=\"ds-link ds-list__get\" href=\"#programs\">Download</a></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__icon ds-list__icon--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 5h16v11H4zM9 20h6M12 16v4M8 9h3M8 12h6\"/></svg></span>\n            <span class=\"ds-list__body\"><a class=\"ds-link ds-list__title\" href=\"#programs\">chronoskin Dialer</a> <span class=\"ds-list__text\">Adds up your telephone bill while the modem is connected. Freeware.</span></span>\n            <span class=\"ds-list__meta\">v1.0, 97 K <a class=\"ds-link ds-list__get\" href=\"#programs\">Download</a></span>\n          </li>\n        </ul>\n        <p class=\"ds-list__more\"><a class=\"ds-link\" href=\"#programs\">The full list, with old versions...</a></p>\n      </section>\n\n      <div class=\"ds-page__pair\">\n        <section class=\"ds-section\">\n          <h2 class=\"ds-heading\">Why Register?</h2>\n          <div class=\"ds-grid\" data-component=\"grid\">\n            <div class=\"ds-grid__cell\">\n              <h3 class=\"ds-grid__title\">No more reminder</h3>\n              <p class=\"ds-grid__text\">The \"please register\" box at start-up goes away for good.</p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\">\n              <h3 class=\"ds-grid__title\">Free updates</h3>\n              <p class=\"ds-grid__text\">Your key works for every later version of the program.</p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\">\n              <h3 class=\"ds-grid__title\">An answer by e-mail</h3>\n              <p class=\"ds-grid__text\">Registered users get a reply within two days.</p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\">\n              <h3 class=\"ds-grid__title\">More programs</h3>\n              <p class=\"ds-grid__text\">Ten dollars keeps the next one coming.</p>\n            </div>\n          </div>\n          <p class=\"ds-construction\"><span class=\"ds-construction__text\">Under construction: the page for chronoskin Notes</span></p>\n        </section>\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">What's New</h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-news\">\n              <li class=\"ds-news__item\"><span class=\"ds-news__date\">09 Nov 98</span> Clock 2.1: the alarm now plays any <a class=\"ds-link\" href=\"#clock\">sound file</a>.</li>\n              <li class=\"ds-news__item\"><span class=\"ds-news__date\">21 Oct 98</span> Renamer 3.0 has an undo. <a class=\"ds-link\" href=\"#programs\">Get it here</a></li>\n              <li class=\"ds-news__item\"><span class=\"ds-news__date\">02 Sep 98</span> You can now <a class=\"ds-link is-visited\" href=\"#register\">register by post</a> from any country.</li>\n            </ul>\n          </div>\n        </section>\n      </div>\n\n    </main>\n  </section>\n\n  <section class=\"ds-view\" id=\"programs\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"You are here\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Home</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#programs\">All Programs</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">For Windows 95 and 98</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\" data-component=\"page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">All Programs</h1>\n            <p class=\"ds-page-header__lead\">Every file is a self-extracting archive. Run it and follow the three steps.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button\" href=\"#register\">Register a Program</a>\n          </div>\n        </header>\n      </div>\n\n      <section class=\"ds-section\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab is-current\" href=\"#programs\">Windows 95 and 98</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#programs\">Windows 3.1</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#programs\">Old Versions</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#programs\">Beta Versions</a></li>\n        </ul>\n        <table class=\"ds-table\" data-component=\"table\">\n          <caption class=\"ds-table__caption\">\n            <span class=\"ds-badges\" data-component=\"badge\">Key: <span class=\"ds-badge ds-badge--success\">FREEWARE</span> free for ever <span class=\"ds-badge ds-badge--warning\">SHAREWARE</span> try for 30 days <span class=\"ds-badge ds-badge--danger\">WITHDRAWN</span> no longer kept up <span class=\"ds-badge\">NEW!</span> out this month</span>\n            All files were checked for viruses before they were put here.\n          </caption>\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\" scope=\"col\">Program</th>\n              <th class=\"ds-table__head\" scope=\"col\">Kind</th>\n              <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Version</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>\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--strong\" href=\"#clock\">chronoskin Clock</a> <span class=\"ds-badge\">NEW!</span> <span class=\"ds-table__desc\">Clock, alarms, stopwatch, on-line counter.</span></td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">SHAREWARE</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">2.1</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">412 K</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">27,410</td>\n            </tr>\n            <tr class=\"ds-table__row--alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--strong\" href=\"#programs\">chronoskin Notes</a> <span class=\"ds-table__desc\">Notes that stay on the desktop.</span></td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">SHAREWARE</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">1.4</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">188 K</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">14,952</td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--strong is-visited\" href=\"#programs\">chronoskin Renamer</a> <span class=\"ds-table__desc\">Renames many files by a pattern.</span></td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">SHAREWARE</span></td>\n              <td class=\"ds-table__cell ds-table__cell--num\">3.0</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">256 K</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">11,306</td>\n            </tr>\n            <tr class=\"ds-table__row--alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--strong\" href=\"#programs\">chronoskin Dialer</a> <span class=\"ds-table__desc\">Counts the cost of a telephone connection.</span></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\">1.0</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">97 K</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">6,871</td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__cell\">chronoskin Saver <span class=\"ds-table__desc\">A screen saver. It does not run on Windows 98.</span></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\">0.9</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">64 K</td>\n              <td class=\"ds-table__cell ds-table__cell--num\">665</td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__cell ds-table__cell--group\" colspan=\"5\">Slow line? Every program is also on the two <a class=\"ds-link\" href=\"#register\">floppy disks I post to registered users</a>.</td>\n            </tr>\n          </tbody>\n        </table>\n      </section>\n\n      <ol class=\"ds-pagination\" data-component=\"pagination\">\n        <li class=\"ds-pagination__label\">Page:</li>\n        <li><span class=\"ds-pagination__link is-disabled\">&lt;&lt; Back</span></li>\n        <li><span class=\"ds-pagination__link is-current\">1</span></li>\n        <li><a class=\"ds-pagination__link\" href=\"#programs\">2</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#programs\">3</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#programs\">Next &gt;&gt;</a></li>\n      </ol>\n\n      <section class=\"ds-section\">\n        <h2 class=\"ds-heading\">Beta Versions</h2>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <h3 class=\"ds-empty__title\">No beta versions this month</h3>\n          <p class=\"ds-empty__text\">Nothing is being tested at the moment. Registered users are told first when there is something to try.</p>\n          <a class=\"ds-button\" href=\"#register\">Register and Be Told</a>\n        </div>\n      </section>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"clock\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"You are here\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Home</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#programs\">All Programs</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">chronoskin Clock</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">chronoskin Clock 2.1</h1>\n            <p class=\"ds-page-header__lead\">A clock, three alarms, a stopwatch and an on-line counter.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--large\" href=\"#clock\">Download (412 K)</a>\n          </div>\n        </header>\n      </div>\n\n      <div class=\"ds-page__columns\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <section class=\"ds-sidebar__block\">\n            <h2 class=\"ds-sidebar__title\">The File</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\">Name: cclock21.exe</li>\n              <li class=\"ds-sidebar__item\">Size: 412 K</li>\n              <li class=\"ds-sidebar__item\">Date: 9 November 1998</li>\n              <li class=\"ds-sidebar__item\">Price: $10 after 30 days</li>\n            </ul>\n          </section>\n          <section class=\"ds-sidebar__block\">\n            <h2 class=\"ds-sidebar__title\">You Need</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\">Windows 95, 98 or NT 4</li>\n              <li class=\"ds-sidebar__item\">8 MB of memory</li>\n              <li class=\"ds-sidebar__item\">1 MB on the hard disk</li>\n              <li class=\"ds-sidebar__item\">A sound card, for alarms</li>\n            </ul>\n          </section>\n          <section class=\"ds-sidebar__block\">\n            <h2 class=\"ds-sidebar__title\">Other Programs</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#programs\">chronoskin Notes</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link is-visited\" href=\"#programs\">chronoskin Renamer</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#programs\">chronoskin Dialer</a> <span class=\"ds-badge ds-badge--count\">(free)</span></li>\n            </ul>\n          </section>\n        </aside>\n\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>What it does</h1>\n          <p class=\"ds-prose__lead\">The clock that Windows forgot to give you.</p>\n          <p>chronoskin Clock sits in a corner of the desktop and shows the time in figures large enough to read from across the room. It uses <strong>less than 1% of the processor</strong> and stays out of the way of other windows.</p>\n          <h2>What is new in 2.1</h2>\n          <ul>\n            <li>an alarm can play any sound file, not only the beep;</li>\n            <li>the on-line counter starts by itself when the modem connects;</li>\n            <li>the window remembers where you left it.</li>\n          </ul>\n          <h3>Installing it</h3>\n          <p>Run the file you downloaded and choose a folder. To start the clock with a different colour, add a switch to the shortcut, for example <code>cclock.exe /green</code>. To take it off again:</p>\n          <pre class=\"ds-prose__code\">Start, Settings, Control Panel\nAdd/Remove Programs, chronoskin Clock, Remove</pre>\n          <h3>How the links look</h3>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#clock\">A link you have not followed</a>,\n            <a class=\"ds-link is-visited\" href=\"#clock\">one you have visited</a>,\n            <a class=\"ds-link is-hover\" href=\"#clock\">one under the pointer</a>,\n            <a class=\"ds-link is-active\" href=\"#clock\">one as you click it</a>,\n            <a class=\"ds-link ds-link--strong\" href=\"#clock\">a bold link</a> and\n            <a class=\"ds-link ds-link--quiet\" href=\"#clock\">a small link</a>.\n          </p>\n          <h3>If you like it</h3>\n          <p>After 30 days, please <a class=\"ds-link\" href=\"#register\">register your copy</a>. It costs ten dollars and the reminder box goes away.</p>\n        </article>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"register\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"You are here\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Home</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#register\">Register</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Order Form</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Register a Program</h1>\n            <p class=\"ds-page-header__lead\">Fill in the form, print it and post it with your payment. Your key comes by e-mail.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#programs\">Back to the Programs</a>\n          </div>\n        </header>\n      </div>\n\n      <div class=\"ds-notices\" data-component=\"notice\">\n        <p class=\"ds-notice\"><span class=\"ds-notice__label\">Please note:</span> this page does not take card numbers. Payment is by cheque or money order, sent by post.</p>\n        <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__label\">The form is not complete.</span> Please type the name the key should be made out to.</p>\n      </div>\n\n      <div class=\"ds-page__pair\">\n        <form class=\"ds-form\" data-component=\"form\" action=\"#register\">\n          <label class=\"ds-form__label\" for=\"r-name\">Name for the key:</label>\n          <div class=\"ds-form__field\">\n            <input class=\"ds-form__input is-error\" id=\"r-name\" type=\"text\">\n            <span class=\"ds-form__error\">A key cannot be made without a name.</span>\n          </div>\n          <label class=\"ds-form__label\" for=\"r-mail\">Your e-mail:</label>\n          <div class=\"ds-form__field\">\n            <input class=\"ds-form__input\" id=\"r-mail\" type=\"text\" value=\"you@example.net\">\n            <span class=\"ds-form__hint\">(the key is sent here)</span>\n          </div>\n          <label class=\"ds-form__label\" for=\"r-prog\">Program:</label>\n          <div class=\"ds-form__field\">\n            <select class=\"ds-form__select\" id=\"r-prog\">\n              <option>chronoskin Clock 2.1</option>\n              <option>chronoskin Notes 1.4</option>\n              <option>chronoskin Renamer 3.0</option>\n            </select>\n          </div>\n          <label class=\"ds-form__label\" for=\"r-copies\">Copies:</label>\n          <div class=\"ds-form__field\">\n            <input class=\"ds-form__input ds-form__input--short\" id=\"r-copies\" type=\"text\" value=\"1\">\n          </div>\n          <span class=\"ds-form__label\">Also:</span>\n          <div class=\"ds-form__field\">\n            <label><input class=\"ds-form__check\" type=\"checkbox\" checked>Post me the two floppy disks ($3)</label>\n          </div>\n          <label class=\"ds-form__label\" for=\"r-note\">Anything to add:</label>\n          <div class=\"ds-form__field\">\n            <textarea class=\"ds-form__textarea\" id=\"r-note\" rows=\"3\">Please send the key to</textarea>\n          </div>\n          <div class=\"ds-form__actions\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"button\">Print the Order</button>\n            <button class=\"ds-button ds-button--secondary\" type=\"button\">Work Out the Total</button>\n            <button class=\"ds-button\" type=\"button\" disabled>Send by E-mail</button>\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Clear the Form</button>\n          </div>\n        </form>\n\n        <div class=\"ds-section\">\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">Where to Send It</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Make the cheque out to the author of chronoskin and post it with the printed form. The address is printed at the foot of the order.</p>\n              <p class=\"ds-panel__text\">Keys are sent within a week of the post arriving.</p>\n            </div>\n          </section>\n          <section class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"d-title\">\n            <h2 class=\"ds-dialog__title\" id=\"d-title\">Clear the form?</h2>\n            <p class=\"ds-dialog__body\">Everything you have typed on this page will be thrown away.</p>\n            <div class=\"ds-dialog__actions\">\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Clear It</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Keep It</button>\n            </div>\n          </section>\n        </div>\n      </div>\n\n    </div>\n  </section>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <ul class=\"ds-footer__links\">\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#programs\">All Programs</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#clock\">chronoskin Clock</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#register\">Register</a></li>\n      <li class=\"ds-footer__item\"><span class=\"ds-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M3 6h18v12H3zM3 6l9 7 9-7\"/></svg></span> <a class=\"ds-link\" href=\"#register\">E-mail the author</a></li>\n    </ul>\n    <div class=\"ds-footer__status\">\n      <p class=\"ds-footer__cell\">Copyright 1996 to 1998 chronoskin. All programs are supplied as they are.</p>\n      <p class=\"ds-footer__cell\">Best viewed at 800 by 600</p>\n      <p class=\"ds-footer__cell\">You are visitor 061,204</p>\n    </div>\n  </footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.home-pages-90s.shop.s04.p03.t03.u04.dc\",\n  \"library\": \"2026.10.09-1036\",\n  \"era\": {\n    \"slug\": \"home-pages-90s\",\n    \"years\": [\n      1996,\n      2001\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 800,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-hp-4334-dc\",\n  \"short\": \"v1-hp-4334-dc\",\n  \"density\": \"compact\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #00004d;\n  --color-canvas: #000033;\n  --color-surface: #000066;\n  --color-surface-alt: #1a1a80;\n  --color-surface-strong: #33338f;\n  --color-bar: #ff6600;\n  --color-bar-text: #000033;\n  --color-bar-alt: #800000;\n  --color-bar-alt-text: #ffcc66;\n  --color-inverse: #ffffff;\n  --color-inverse-text: #000066;\n  --color-text: #ffffff;\n  --color-text-muted: #b3b3d9;\n  --color-heading: #ff9933;\n  --color-heading-alt: #ffcc00;\n  --color-link: #66ccff;\n  --color-link-quiet: #ffcc99;\n  --color-link-visited: #cc99ff;\n  --color-link-hover: #ffff00;\n  --color-link-active: #ff3300;\n  --color-border: #9999cc;\n  --color-border-strong: #ff6600;\n  --color-border-muted: #333380;\n  --color-accent: #ffcc00;\n  --color-accent-text: #000033;\n  --color-accent-alt: #00ffcc;\n  --color-fill-1: #800000;\n  --color-fill-2: #804000;\n  --color-fill-3: #005c5c;\n  --color-fill-4: #4d004d;\n  --color-button: #cc3300;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffff00;\n  --color-button-secondary: #333399;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #ffffff;\n  --color-input-text: #000033;\n  --color-input-border: #9999cc;\n  --color-disabled: #333366;\n  --color-disabled-text: #8c8cb3;\n  --color-danger: #ff5050;\n  --color-danger-surface: #4d0000;\n  --color-success: #33ff66;\n  --color-warning: #ffaa00;\n  --color-notice: #ffe0b3;\n  --color-notice-text: #000033;\n  --color-focus: #ffff00;\n  --color-shadow: #000000;\n  --color-overlay: rgba(0, 0, 51, 0.7);\n}\n\n/* @part type */\n:root {\n  --font-body: Verdana, Geneva, Arial, sans-serif;\n  --font-heading: \"Arial Black\", \"Arial Bold\", Gadget, Impact, sans-serif;\n  --font-ui: Arial, Helvetica, sans-serif;\n  --font-mono: \"Andale Mono\", \"Courier New\", monospace;\n  --text-base: 12px;\n  --text-small: 10px;\n  --text-ui: 11px;\n  --text-large: 15px;\n  --text-display: 44px;\n  --text-h1: 30px;\n  --text-h2: 20px;\n  --text-h3: 14px;\n  --line-body: 1.4;\n  --line-heading: 1.05;\n  --line-display: 0.95;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 900;\n  --weight-display: 900;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 2px;\n  --border-width-strong: 3px;\n  --border-style: groove;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: 1px 1px 0 var(--color-shadow);\n  --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n  --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n  --shadow-dialog: 2px 2px 0 var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: repeating-conic-gradient(color-mix(in srgb, var(--color-border-muted) 55%, transparent) 0 25%, transparent 0 50%) 0 0 / 4px 4px, var(--color-page);\n  --fill-bar: linear-gradient(90deg, var(--color-bar), color-mix(in srgb, var(--color-bar) 45%, white));\n  --fill-bar-alt: linear-gradient(90deg, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 45%, white));\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}