{
  "id": "v1-wk-1222",
  "long_id": "v1.wiki-2000s.docs.s01.p02.t02.u02",
  "name": "Wiki encyclopaedia, side column and tabbed sheet, 2003 to 2010",
  "era": {
    "slug": "wiki-2000s",
    "code": "wk",
    "name": "Wiki",
    "years": [
      2003,
      2010
    ],
    "description": "Collaborative reference sites of 2003 to 2010: a narrow column of links at the left, tabs above a white article sheet, blue and red links, grey bordered boxes for contents and facts, small sans text and tables of plain data."
  },
  "archetype": "docs",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": true
  },
  "summary": "This is the collaborative reference site of the middle 2000s: a narrow column of small links under a square mark at the left, and beside it a white article sheet that stretches with the window and carries a row of tabs on its top edge. Text is small sans-serif at 13px with blue links, red links for pages nobody has written, serif titles over hairlines, and grey bordered boxes for contents, facts and plain ruled tables. Every box is square and flat: no shadow, no gradient, no rounded corner and no motion.",
  "url": "https://chrono.skin/s/v1-wk-1222",
  "preview_url": "https://chrono.skin/s/v1-wk-1222/specimen.html",
  "files": {
    "STYLE.md": "# Wiki encyclopaedia, side column and tabbed sheet, 2003 to 2010\n\n## Summary\n\nThis is the collaborative reference site of the middle 2000s: a narrow column of small links under a square mark at the left, and beside it a white article sheet that stretches with the window and carries a row of tabs on its top edge. Text is small sans-serif at 13px with blue links, red links for pages nobody has written, serif titles over hairlines, and grey bordered boxes for contents, facts and plain ruled tables. Every box is square and flat: no shadow, no gradient, no rounded corner and no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page__frame` is a grid of a fixed `--size-side` (158px) side column and a main column that takes the rest, `--space-5` (12px) apart. Designed at 1024px; it does not reflow for phones.\n- Side column `.ds-page__side`, from the top: the header `.ds-nav` (the brand block, the navigation box, the search box), then the tool boxes `.ds-sidebar`. Boxes are `--space-5` apart.\n- Main column `.ds-page__main`, from the top: the personal links line `.ds-personal`, right-aligned; the current view (its `.ds-tabs` row and, joined to it, the `.ds-sheet`); the footer box. The main column is a grid whose middle row takes the height left by the side column, and the sheet has a minimum height of that row less the tab row, so a short page still reaches the foot of the side column.\n- No text sits on the page colour. The brand block and the personal line are painted with `--fill-bar-alt`; everything else is a box or the sheet.\n- Views. The specimen is a four-screen example reference; the navigation box has one link per view and marks the current one in bold. `main` (home) is the main page: site notice, welcome box, two tinted columns (featured article and \"did you know\" at the left, news and \"on this day\" at the right), the figures line and the grid of other shelves. `article` is one article: trail, title, floated fact box, contents box, sections with bracketed edit links, a thumbnail, a notice, a data table, see also, references and the category strip. `history` is the revision table with its legend, paging line and compare buttons. `edit` is the edit form: two notices, the empty preview box, toolbar and tall text field, summary row, buttons, and the delete confirmation.\n- Each view starts with its own tab row. The current tab is taller, bold, in the sheet colour and open at the bottom, so it reads as part of the sheet; idle tabs are `--color-surface` with link-coloured text. A tab to a page that does not exist takes `is-missing`.\n- Inner pages (every view but `main`) open the sheet with `.ds-breadcrumb`, then `.ds-page-header` in place of the welcome box (serif title on a hairline, the action bottom-aligned at the right) and one muted line `.ds-page-header__desc`; then the working blocks. Blocks that are not running text sit in `.ds-sheet__stack`, `--space-5` apart.\n- In an article the fact box `.ds-infobox` (`--size-infobox`, 250px) and thumbnails `.ds-thumb` (`--size-thumb`, 180px) float right and text flows around them; the contents box `.ds-toc` is at least `--size-toc` (280px) wide and sits in the text flow.\n- Spacing scale: `--space-1` 2px, `--space-2` 4px, `--space-3` 6px, `--space-4` 8px, `--space-5` 12px, `--space-6` 16px, `--space-7` 24px.\n  - `--space-1`: vertical padding of tabs, buttons, title strips; gap under a heading rule.\n  - `--space-2`: gap between tabs, between inline items, vertical padding of table cells.\n  - `--space-3`: padding inside tinted panels, gap between buttons.\n  - `--space-4`: horizontal padding of cells, strips and boxes; gap between the two tinted columns and between grid cells.\n  - `--space-5`: gap between blocks, between the columns of the page, padding of notices.\n  - `--space-6`: padding of the sheet, margin above a section heading, gap between a float and the text.\n  - `--space-7`: list indent.\n- Text inputs are `--size-field` (320px); the edit box is `--size-editor` (260px) tall and full width. A dialog is `--size-dialog` (440px) wide, centred in a band in the flow.\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- Text on fills follows the era's conventions (see the first layout of this era): no text on `--color-page`; body, heading and link colours on the canvas, the three surfaces, `--fill-panel` and the four fills; only `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-notice-text` on `--color-notice`, and `--color-text` on `--color-danger-surface`.\n- `--color-page` is charcoal with fine scan lines from `--fill-page`; the sheet `--color-canvas` is white. `--color-surface` fills the navigation boxes, the profile box and alternate news rows; `--color-surface-alt` (lavender) the breadcrumb, label cells, idle tabs, counters and alternate table rows; `--color-surface-strong` (pale blue) letter heads and plain panel titles.\n- `--fill-bar` (near black, shaded) with amber `--color-bar-text` is the section bar, table heads, the profile title, the current tab, the dialog title, tile icons and the footer. `--fill-bar-alt` (deep blue) with white `--color-bar-alt-text` titles every navigation box, panel and form and the group strips of the profile box. `--fill-inverse` (dark maroon) with `--color-inverse-text` is the banner.\n- `--color-heading` (maroon) is for page and section titles and figures, `--color-heading-alt` (blue) for third-level headings and news dates. Links are `--color-link` (blue), tool links `--color-link-quiet` (olive), hover `--color-link-hover` (burnt orange); a missing page is `.ds-link--new` in `--color-danger`.\n- `--color-border-strong` (tan) frames the sheet, the header, the boxes and the buttons and rules the headings; `--color-border` (grey) is for ordinary box outlines and dotted row rules; `--color-border-muted` for panel feet.\n- `--color-accent` (amber) with dark `--color-accent-text` marks the current bar item, the current page number and badges; `--color-accent-alt` is the left bar of an information notice.\n- `--color-fill-1` to `--color-fill-4` are the lavender, cream, sage and sand of the browse tiles; the welcome box is `--color-fill-1`.\n- Body and controls are `--font-body` / `--font-ui` (Verdana); headings, box titles, the wordmark and tile names are `--font-heading` (Trebuchet MS), bold. `--font-mono` is for code.\n- Sizes: `--text-base` 11px; `--text-small` and `--text-ui` 10px for meta, bar items, tabs, buttons and badges; `--text-large` 13px for the lead, panel titles and tile names; `--text-h3` 12px, `--text-h2` 15px, `--text-h1` 20px, `--text-display` 22px for the wordmark and the welcome title. `--weight-ui` is 700.\n- Bars, buttons and the accent are short vertical gradients from the surface set; panels, boxes and the sheet are flat. Row rules inside boxes are `dotted`.\n- One-off choices outside the token set: the dividers between bar items are `--color-bar-text` at 25%; the notice's left bar is `calc(var(--border-width-strong) * 2)`; status badges are an 18 to 26% `color-mix()` of the status colour over `--color-surface`; `dotted` is used for row rules and the empty state instead of `--border-style`.\n\n## Components\n\n- `.ds-page`: on `<body>`. `.ds-page__frame` is the two-column grid, `.ds-page__side` the side column, `.ds-page__main` the main column. `.ds-view` sections hold a tab row and a `.ds-sheet`; `.ds-sheet__stack` spaces blocks inside it; `.ds-clear` ends floats. `.ds-sprite` hides the SVG symbol sheet and `.ds-icon` sizes an inline icon.\n- `.ds-nav`: the head of the side column. It holds the brand, then `.ds-nav__block` boxes with a `.ds-nav__title` strip. `.ds-nav__menu` lists `.ds-nav__item` entries; a `.ds-nav__link` leads to a view and takes `is-current` (bold, text colour). `.ds-nav__search` is the search box with `.ds-nav__go` for its two small buttons.\n- `.ds-brand`: the mark and name stacked and centred at the top of the side column, on `--fill-bar-alt`. `.ds-brand__mark` is a square tile 2.5 times `--text-display`, dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` outline, `--radius-control`, `--shadow-control`). `.ds-brand__name` is the serif name, `.ds-brand__tag` an italic line under it. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-personal`: the line of account links at the top right, each a `.ds-personal__link`.\n- `.ds-hero`: the welcome box of the main page: centred `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__count`, one button in `.ds-hero__action`, and `.ds-hero__aside`, a three-column list of shelf links. Never a banner.\n- `.ds-sitenotice`: one inverted line above the welcome box; its link is `.ds-sitenotice__link`.\n- `.ds-page-header`: the head of an inner page. `.ds-page-header__title` over a hairline, `.ds-page-header__action` at the right, and `.ds-page-header__desc` as the next line.\n- `.ds-breadcrumb`: the small trail above the title, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-tabs`: the views of one page, above the sheet. `.ds-tabs__tab` with `is-current` and `is-missing`; `.ds-tabs__gap` separates the watch tab.\n- `.ds-prose`: the article body: h1, h2 (serif on a hairline), h3 (bold sans), p, ul, ol, strong, code, sup. `.ds-edit` is the bracketed edit link inside a heading; `.ds-hatnote` the italic pointer line.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--new` for a missing page, `.ds-link--quiet` for outside and tool links, `.ds-link--strong` for bold.\n- `.ds-toc`: the contents box, with `.ds-toc__title`, `.ds-toc__toggle`, nested `.ds-toc__list` and `.ds-toc__num`.\n- `.ds-infobox`: the fact box floated right: `.ds-infobox__title`, `.ds-infobox__image`, `.ds-infobox__caption`, `.ds-infobox__group` and a `.ds-infobox__rows` table of label and value.\n- `.ds-thumb`: a framed picture with `.ds-thumb__image` and `.ds-thumb__caption`; `.ds-thumb--left` is the small left-floated one.\n- `.ds-refs` is the small numbered reference list and `.ds-catlinks` the bordered category strip at the foot of an article.\n- `.ds-columns`: the two tinted columns of the main page.\n- `.ds-panel`: a tinted bordered box holding one or more pairs of `.ds-panel__title` and `.ds-panel__body`. `.ds-panel--1`, `--2`, `--3` choose the tint. `.ds-panel__line` is a paragraph, `.ds-panel__items` a bullet list, `.ds-panel__more` the bold right-aligned closing line.\n- `.ds-list`: dated entries: `.ds-list__item` with a bold `.ds-list__date` and text with a `.ds-list__meta` line.\n- `.ds-grid`: four cells in a row, each `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` letter, a `.ds-grid__name` link and `.ds-grid__meta`.\n- `.ds-stat`: the row; one bordered line of `.ds-stat__item` figures divided by faint rules, each a serif `.ds-stat__value` over a small `.ds-stat__label`.\n- `.ds-table`: a plain ruled table: grey head, every cell bordered. `.ds-table__num` right-aligns numbers, `.ds-table__tools` keeps a cell on one line, `.ds-table__row--alt` is the alternate row, `.ds-table__plus` and `.ds-table__minus` colour byte changes, `.ds-table__summary` is the italic edit summary.\n- `.ds-badge`: a small square amber label (the \"m\" of a minor edit, \"new\"). `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted status labels with a 1px outline in the status colour.\n- `.ds-notice`: a box with a thick left bar in `--color-accent`; `.ds-notice--error` has the bar in `--color-danger` on `--color-danger-surface`. `.ds-notice__title` is the bold first phrase, `.ds-notice__link` an underlined link in the text colour.\n- `.ds-pagination`: a line of small bordered steps: `.ds-pagination__label`, `.ds-pagination__link` with `is-current` and `is-disabled`.\n- `.ds-button`: primary action. `.ds-button--secondary` is the plain grey button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--small` for the side column. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-toolbar`: the strip of markup keys over the edit box: `.ds-toolbar__key` (`--bold`, `--italic`) and `.ds-toolbar__hint`.\n- `.ds-form`: the edit form. `.ds-form__editor` wraps toolbar and text field; `.ds-form__row` is a line of `.ds-form__label` and `.ds-form__input` (`--wide`, `--auto`, `--text` for the tall field; `is-invalid`, `is-disabled`), with `.ds-form__error` and `.ds-form__hint`; `.ds-form__check` and `.ds-form__checkbox`; `.ds-form__legal`; `.ds-form__actions` with `.ds-form__spacer` pushing the destructive button to the right.\n- `.ds-dialog`: a confirmation box in the page flow inside `.ds-dialog__backdrop`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a dashed box with `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-sidebar`: the tool boxes of the side column: `.ds-sidebar__block`, `.ds-sidebar__title`, `.ds-sidebar__list`, `.ds-sidebar__item`.\n- `.ds-section` is a serif heading on a hairline outside prose; `.ds-legend` a small muted explanatory line.\n- `.ds-footer`: the small-print box under the sheet: `.ds-footer__badge`, `.ds-footer__body`, `.ds-footer__text`, `.ds-footer__row` and `.ds-footer__link`.\n\n## Never\n\n- `row-gap <= 6px`: table rows touch and list rows are a few pixels apart.\n- `block-gap <= 24px`: blocks are 12px apart; 24px is the widest gap.\n- `content-width >= 75%`: the sheet stretches with the window.\n- `font-size <= 22px`: the wordmark and the welcome title, 22px, are the largest text.\n- `font-size >= 10px`: meta text and controls are 10px; nothing is smaller.\n- `font-families <= 3`: Verdana, Trebuchet MS for headings, monospace for code.\n- `letter-spacing <= 1px`: only the wordmark is tracked, by 1px.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `border-radius <= 0px`: no reference has a rounded corner in CSS; every box is square.\n- `box-shadow = none`: no box shadow was measured in any reference.\n- `text-shadow = none`: no text shadow was measured in any reference.\n- `transition = none`: hover states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 6px`: borders are 1px, edges 3px, and only the top of the sheet and the left bar of a notice reach 6px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new box in the side column from `.ds-sidebar__block`, a box inside an article from `.ds-toc` or `.ds-infobox`, a tinted main-page section from `.ds-panel`, a message from `.ds-notice`. Build it as a 1px `--color-border` outline on `--color-surface`, keep text on fills as the conventions above say, and use tokens only: no raw colours or lengths, no radius, shadow, gradient or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n",
    "components.css": "/* Layout tokens (structure part). Column widths, gaps and paddings measured\n   on reference-wiki pages captured 2005 to 2008. */\n:root {\n  --size-page: 100%;\n  --size-side: 158px;\n  --size-infobox: 250px;\n  --size-thumb: 180px;\n  --size-toc: 280px;\n  --size-field: 320px;\n  --size-editor: 260px;\n  --size-dialog: 440px;\n  --size-icon: 14px;\n  --space-1: 2px;\n  --space-2: 4px;\n  --space-3: 6px;\n  --space-4: 8px;\n  --space-5: 12px;\n  --space-6: 16px;\n  --space-7: 24px;\n}\n\n/* ---------- shell: a fixed side column and a fluid main column ---------- */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page__frame {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  column-gap: var(--space-5);\n  width: var(--size-page);\n  box-sizing: border-box;\n  padding: 0 var(--space-5) var(--space-6) var(--space-4);\n}\n.ds-page__side {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-4) 0 0;\n}\n.ds-page__main {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: auto 1fr auto;\n  min-width: 0;\n}\n.ds-sprite {\n  position: absolute;\n}\n.ds-icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  vertical-align: middle;\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/* The white article sheet under the tabs. */\n.ds-sheet {\n  display: flow-root;\n  padding: var(--space-5) var(--space-6) var(--space-6);\n  background: var(--color-canvas);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 0 var(--radius-page) var(--radius-page) var(--radius-page);\n  /* The sheet fills the height the side column gives the view: the view's\n     height less the tab row above it. */\n  box-sizing: border-box;\n  min-height: calc(100% - var(--text-ui) * var(--line-body) - var(--space-2) * 2 - var(--space-4) - var(--border-width));\n}\n.ds-sheet__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n.ds-clear {\n  clear: both;\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/* External, tool and meta links. */\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--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n/* A link to a page that does not exist yet. */\n.ds-link--new,\n.ds-link--new:visited,\n.ds-link--new.is-visited {\n  color: var(--color-danger);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- nav: the head of the side column ---------- */\n.ds-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n/* The site's mark and name, stacked and centred like a logo. The tile is\n   dressed like the primary button. */\n.ds-brand {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-5) var(--space-2);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-radius: var(--radius-panel);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-display) * 2.5);\n  height: calc(var(--text-display) * 2.5);\n  box-sizing: border-box;\n  background: var(--color-button);\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: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\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-brand__tag {\n  font-family: var(--font-heading);\n  font-size: var(--text-small);\n  font-style: italic;\n  line-height: var(--line-heading);\n}\n.ds-nav__block,\n.ds-sidebar__block {\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-nav__title,\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n}\n.ds-nav__menu,\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-2) var(--space-4) var(--space-3) var(--space-7);\n  list-style: square;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-nav__item,\n.ds-sidebar__item {\n  padding: var(--space-1) 0 0;\n}\n.ds-nav__link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n/* The current view's item, and the main page item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#main\"] {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n.ds-page:has(#main:target) .ds-nav__link[href=\"#main\"] {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n.ds-page:has(#article:target) .ds-nav__link[href=\"#article\"] {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n.ds-page:has(#history:target) .ds-nav__link[href=\"#history\"] {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n.ds-page:has(#edit:target) .ds-nav__link[href=\"#edit\"] {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n/* The search box of the side column. */\n.ds-nav__search {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-3) var(--space-3) var(--space-4);\n}\n.ds-nav__go {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-2);\n}\n\n/* ---------- sidebar: the tool boxes under the navigation ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n\n/* ---------- personal links: one line at the top right ---------- */\n.ds-personal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--space-1) var(--space-5);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  list-style: none;\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-transform: var(--ui-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-personal__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-bar-alt-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-personal__link:hover,\n.ds-personal__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- tabs: joined to the sheet below ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  gap: var(--space-2);\n  margin: var(--space-4) 0 calc(var(--border-width) * -1);\n  padding: 0 var(--space-5);\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  background: var(--color-surface);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-canvas);\n  color: var(--color-link-hover);\n}\n/* The current tab is taller and open at the bottom. */\n.ds-tabs__tab.is-current {\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-canvas);\n  color: var(--color-text);\n  border-bottom-color: var(--color-canvas);\n  font-weight: var(--weight-bold);\n}\n.ds-tabs__tab.is-missing {\n  color: var(--color-danger);\n}\n.ds-tabs__gap {\n  width: var(--space-5);\n}\n\n/* ---------- breadcrumb: the trail above the title ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-2);\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n  color: var(--color-text);\n}\n\n/* ---------- site notice: one inverted line above the welcome box ---------- */\n.ds-sitenotice {\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-small);\n  text-align: center;\n}\n.ds-sitenotice__link {\n  color: var(--color-inverse-text);\n  font-weight: var(--weight-bold);\n  text-decoration: underline;\n}\n\n/* ---------- hero: the welcome box of the main page ---------- */\n.ds-hero {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-7);\n  padding: var(--space-5) var(--space-6);\n  background: var(--fill-panel);\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  flex: 1 1 0;\n  text-align: center;\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading);\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}\n.ds-hero__count {\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-hero__action {\n  margin: var(--space-4) 0 0;\n}\n.ds-hero__aside {\n  flex: none;\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n  gap: var(--space-1) var(--space-7);\n  margin: 0;\n  padding: 0 0 0 var(--space-6);\n  list-style: square;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- page header: title over a hairline ---------- */\n.ds-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  gap: var(--space-6);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\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__action {\n  flex: none;\n  padding: 0 0 var(--space-2);\n}\n.ds-page-header__desc {\n  margin: var(--space-1) 0 var(--space-5);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- two tinted columns of the main page ---------- */\n.ds-columns {\n  display: grid;\n  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);\n  gap: var(--space-4);\n  align-items: stretch;\n}\n\n/* ---------- panel: a tinted box of titled sections ---------- */\n.ds-panel {\n  padding: var(--space-3) var(--space-3) var(--space-2);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel--1 {\n  background: var(--color-fill-1);\n  border-color: color-mix(in srgb, var(--color-fill-1), var(--color-border-strong) 45%);\n}\n.ds-panel--2 {\n  background: var(--color-fill-2);\n  border-color: color-mix(in srgb, var(--color-fill-2), var(--color-border-strong) 45%);\n}\n.ds-panel--3 {\n  background: var(--color-fill-3);\n  border-color: color-mix(in srgb, var(--color-fill-3), var(--color-border-strong) 45%);\n}\n/* The title strip is the box tint mixed with the strong border colour. */\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-4);\n  background: color-mix(in srgb, var(--color-surface-strong), transparent 30%);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  font-family: var(--font-body);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-panel--1 .ds-panel__title {\n  background: color-mix(in srgb, var(--color-fill-1), var(--color-success) 16%);\n  border-color: color-mix(in srgb, var(--color-fill-1), var(--color-border-strong) 45%);\n}\n.ds-panel--2 .ds-panel__title {\n  background: color-mix(in srgb, var(--color-fill-2), var(--color-link) 16%);\n  border-color: color-mix(in srgb, var(--color-fill-2), var(--color-border-strong) 45%);\n}\n.ds-panel--3 .ds-panel__title {\n  background: color-mix(in srgb, var(--color-fill-3), var(--color-link-visited) 18%);\n  border-color: color-mix(in srgb, var(--color-fill-3), var(--color-border-strong) 45%);\n}\n.ds-panel__body {\n  display: flow-root;\n  padding: var(--space-4) var(--space-2) var(--space-5);\n}\n.ds-panel__line {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__items {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 0 var(--space-7);\n  list-style: square;\n}\n.ds-panel__more {\n  margin: 0;\n  font-weight: var(--weight-bold);\n  text-align: right;\n}\n\n/* ---------- thumbnail: a framed picture with a caption ---------- */\n.ds-thumb {\n  float: right;\n  clear: right;\n  width: var(--size-thumb);\n  box-sizing: border-box;\n  margin: var(--space-1) 0 var(--space-4) var(--space-6);\n  padding: var(--space-1);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-thumb--left {\n  float: left;\n  clear: left;\n  width: calc(var(--size-thumb) * 0.6);\n  margin: var(--space-1) var(--space-5) var(--space-2) 0;\n}\n.ds-thumb__image {\n  display: block;\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-thumb__image svg {\n  display: block;\n  width: 100%;\n}\n.ds-thumb__caption {\n  display: block;\n  padding: var(--space-2) var(--space-1) var(--space-1);\n}\n\n/* ---------- list: dated entries ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  column-gap: var(--space-4);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n  border-bottom: 0;\n}\n.ds-list__date {\n  min-width: 7ch;\n  font-weight: var(--weight-bold);\n}\n.ds-list__meta {\n  display: block;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- grid: the other shelves of the site ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  column-gap: var(--space-4);\n  align-items: start;\n  padding: var(--space-4);\n  background: var(--color-fill-1);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-page);\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__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-base) * 2.2);\n  height: calc(var(--text-base) * 2.2);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n}\n.ds-grid__name {\n  display: block;\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n\n/* ---------- stats: one bordered line of figures ---------- */\n.ds-stat {\n  display: flex;\n  margin: 0;\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n  flex: 1 1 0;\n  padding: var(--space-2) var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-align: center;\n}\n.ds-stat__item:first-child {\n  border-left: 0;\n}\n.ds-stat__value {\n  display: block;\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-stat__label {\n  display: block;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- typography: the article body ---------- */\n.ds-prose {\n  line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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: 0 0 var(--space-4);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin: var(--space-6) 0 var(--space-3);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-1);\n  font-family: var(--font-body);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-2) 0 var(--space-4);\n  padding: 0 0 0 var(--space-7);\n}\n.ds-prose ul {\n  list-style: square;\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);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose sup {\n  font-size: var(--text-small);\n  line-height: 1;\n}\n/* The bracketed edit link beside a heading. */\n.ds-edit {\n  float: right;\n  margin: 0 0 0 var(--space-5);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-transform: none;\n}\n/* The italic line that points to another article. */\n.ds-hatnote {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 0 var(--space-7);\n  font-style: italic;\n}\n\n/* ---------- contents box ---------- */\n.ds-toc {\n  display: inline-block;\n  min-width: var(--size-toc);\n  box-sizing: border-box;\n  margin: var(--space-2) 0 var(--space-4);\n  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-ui);\n}\n.ds-toc__title {\n  margin: 0 0 var(--space-2);\n  font-weight: var(--weight-bold);\n  text-align: center;\n}\n.ds-toc__toggle {\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n.ds-toc .ds-toc__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-toc .ds-toc__list .ds-toc__list {\n  padding: 0 0 0 var(--space-7);\n}\n.ds-toc__num {\n  padding: 0 var(--space-2) 0 0;\n  color: var(--color-text);\n}\n\n/* ---------- fact box: floated right, label and value rows ---------- */\n.ds-infobox {\n  float: right;\n  clear: right;\n  width: var(--size-infobox);\n  box-sizing: border-box;\n  margin: 0 0 var(--space-5) var(--space-6);\n  padding: var(--space-1);\n  background: var(--color-surface);\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-small);\n  line-height: var(--line-body);\n}\n.ds-infobox__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  text-align: center;\n}\n.ds-infobox__image {\n  display: block;\n  margin: var(--space-1) 0;\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n}\n.ds-infobox__image svg {\n  display: block;\n  width: 100%;\n}\n.ds-infobox__caption {\n  display: block;\n  padding: 0 var(--space-3) var(--space-2);\n  text-align: center;\n}\n.ds-infobox__group {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--color-surface-alt);\n  font-weight: var(--weight-bold);\n  text-align: center;\n}\n.ds-infobox__rows {\n  width: 100%;\n  border-collapse: collapse;\n}\n.ds-infobox__rows th,\n.ds-infobox__rows td {\n  padding: var(--space-1) var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-infobox__rows th {\n  width: 40%;\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- references and categories ---------- */\n.ds-refs {\n  margin: var(--space-2) 0 var(--space-4);\n  padding: 0 0 0 var(--space-7);\n  font-size: var(--text-small);\n}\n.ds-catlinks {\n  clear: both;\n  margin: var(--space-6) 0 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-ui);\n}\n\n/* ---------- table: plain ruled data ---------- */\n.ds-table {\n  width: 100%;\n  box-sizing: border-box;\n  border-collapse: collapse;\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-table th {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  white-space: nowrap;\n}\n.ds-table .ds-table__tools {\n  white-space: nowrap;\n}\n.ds-table__row--alt td {\n  background: var(--color-surface-alt);\n}\n.ds-table__plus {\n  color: var(--color-success);\n  font-weight: var(--weight-bold);\n}\n.ds-table__minus {\n  color: var(--color-danger);\n  font-weight: var(--weight-bold);\n}\n.ds-table__summary {\n  color: var(--color-text-muted);\n  font-style: italic;\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-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n/* Status labels: a tint of the status colour over the surface, body text,\n   and the status colour as the outline. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  color: var(--color-text);\n  font-weight: var(--weight-body);\n  border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n  border-color: var(--color-warning);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n  border-color: var(--color-danger);\n}\n\n/* ---------- notice: a box with a coloured left bar ---------- */\n.ds-notice {\n  display: flow-root;\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: calc(var(--border-width-strong) * 4) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-ui);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-text);\n  border-left-color: var(--color-danger);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-notice--error .ds-notice__title {\n  color: var(--color-danger);\n}\n.ds-notice__link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n/* ---------- pagination: a line of bracketed steps ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n}\n.ds-pagination__label {\n  padding: 0 var(--space-2) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-pagination__link {\n  display: block;\n  padding: 0 var(--space-3);\n  background: var(--color-surface);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-control);\n  text-decoration: var(--link-decoration);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-color: var(--color-border);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n  background: transparent;\n  color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\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) 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-bold);\n  line-height: var(--line-body);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  transition: var(--transition);\n  cursor: pointer;\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-active {\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-input-border);\n  font-weight: var(--weight-body);\n  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-border-strong);\n}\n/* Destructive action: the error pair. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n  text-shadow: none;\n}\n.ds-button--small {\n  padding: 0 var(--space-3);\n  font-size: var(--text-small);\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-text);\n  box-shadow: none;\n  text-shadow: none;\n  cursor: default;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* ---------- toolbar: the strip of markup buttons over the edit box ---------- */\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  padding: var(--space-2);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: 0;\n  font-size: var(--text-small);\n}\n.ds-toolbar__key {\n  min-width: calc(var(--text-ui) * 2);\n  padding: 0 var(--space-2);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\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  line-height: var(--line-body);\n  text-align: center;\n}\n.ds-toolbar__key--bold {\n  font-weight: var(--weight-bold);\n}\n.ds-toolbar__key--italic {\n  font-style: italic;\n}\n.ds-toolbar__hint {\n  margin: 0 0 0 auto;\n  padding: 0 var(--space-2);\n}\n\n/* ---------- form: the edit form ---------- */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-form__editor {\n  display: block;\n}\n.ds-form__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-2) var(--space-4);\n}\n.ds-form__label {\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-form__input {\n  box-sizing: border-box;\n  width: var(--size-field);\n  max-width: 100%;\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) var(--border-style) var(--color-input-border);\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-body);\n  line-height: var(--line-body);\n}\n.ds-form__input--wide {\n  width: 100%;\n}\n.ds-form__input--auto {\n  width: auto;\n}\n.ds-form__input--text {\n  display: block;\n  width: 100%;\n  height: var(--size-editor);\n  border-radius: 0;\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n  resize: vertical;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\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__input.is-invalid {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  flex: 0 0 100%;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__check {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n  margin: 0;\n}\n.ds-form__legal {\n  margin: 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form__spacer {\n  flex: 1 1 0;\n}\n\n/* ---------- dialog: a confirmation box in the page flow ---------- */\n.ds-dialog__backdrop {\n  padding: var(--space-6);\n  background: var(--color-overlay);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  box-sizing: border-box;\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-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n  padding: var(--space-5);\n}\n.ds-dialog__text {\n  margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-3);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  padding: var(--space-6) var(--space-5);\n  background: var(--color-surface);\n  border: var(--border-width) dashed var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* ---------- section label inside the sheet ---------- */\n.ds-section {\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  color: var(--color-heading);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-legend {\n  margin: 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- footer: small print under the sheet ---------- */\n.ds-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  margin: var(--space-5) 0 0;\n  padding: var(--space-4) var(--space-6);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-footer__body {\n  flex: 1 1 0;\n}\n.ds-footer__text {\n  margin: 0;\n}\n.ds-footer__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-5);\n  margin: var(--space-1) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__badge {\n  flex: none;\n  padding: var(--space-1) 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);\n  font-weight: var(--weight-bold);\n  text-align: center;\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: wiki encyclopaedia 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<svg class=\"ds-sprite\" width=\"0\" height=\"0\" aria-hidden=\"true\">\n  <symbol id=\"i-pic\" viewBox=\"0 0 40 30\">\n    <path d=\"M0 24l10-10 7 6 9-11 14 15v6H0z\" fill=\"currentColor\"/>\n    <circle cx=\"9\" cy=\"7\" r=\"3\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol id=\"i-clock\" viewBox=\"0 0 40 30\">\n    <path d=\"M12 3h16v5l-5 7 5 7v5H12v-5l5-7-5-7z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n    <path d=\"M15 25h10l-5-6z\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol id=\"i-user\" viewBox=\"0 0 14 14\">\n    <circle cx=\"7\" cy=\"4.5\" r=\"2.5\" fill=\"currentColor\"/>\n    <path d=\"M2 13c0-3 2-5 5-5s5 2 5 5z\" fill=\"currentColor\"/>\n  </symbol>\n</svg>\n\n<div class=\"ds-page__frame\">\n\n  <div class=\"ds-page__side\">\n    <header class=\"ds-nav\" data-component=\"nav\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#main\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n        <span class=\"ds-brand__tag\">The open reference</span>\n      </a>\n      <nav class=\"ds-nav__block\">\n        <h2 class=\"ds-nav__title\">Navigation</h2>\n        <ul class=\"ds-nav__menu\">\n          <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#main\">Main page</a></li>\n          <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#article\">Featured article</a></li>\n          <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#history\">Page history</a></li>\n          <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#edit\">Edit a page</a></li>\n          <li class=\"ds-nav__item\"><a class=\"ds-link\" href=\"#article\">Random article</a></li>\n          <li class=\"ds-nav__item\"><a class=\"ds-link\" href=\"#main\">Help</a></li>\n        </ul>\n      </nav>\n      <div class=\"ds-nav__block\">\n        <h2 class=\"ds-nav__title\">Search</h2>\n        <form class=\"ds-nav__search\" action=\"#article\">\n          <input class=\"ds-form__input ds-form__input--wide\" type=\"text\" aria-label=\"Search chronoskin\">\n          <span class=\"ds-nav__go\">\n            <button class=\"ds-button ds-button--small\" type=\"submit\">Go</button>\n            <button class=\"ds-button ds-button--secondary ds-button--small\" type=\"submit\">Search</button>\n          </span>\n        </form>\n      </div>\n    </header>\n\n    <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">Toolbox</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#article\">What links here</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#history\">Related changes</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#edit\">Upload file</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Special pages</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#article\">Printable version</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#history\">Permanent link</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">Taking part</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Community desk</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#history\">Recent changes</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#edit\">Sandbox</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--new\" href=\"#edit\">Wanted pages</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Style guide</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">Shelves</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Instruments</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Calendars</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Makers</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#main\">Observatories</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--strong\" href=\"#main\">All shelves</a></li>\n        </ul>\n      </div>\n    </aside>\n  </div>\n\n  <div class=\"ds-page__main\">\n\n    <ul class=\"ds-personal\">\n      <li><a class=\"ds-personal__link\" href=\"#edit\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-user\"/></svg>Halvard</a></li>\n      <li><a class=\"ds-personal__link\" href=\"#main\">My talk</a></li>\n      <li><a class=\"ds-personal__link\" href=\"#edit\">My preferences</a></li>\n      <li><a class=\"ds-personal__link\" href=\"#history\">My watchlist</a></li>\n      <li><a class=\"ds-personal__link\" href=\"#history\">My contributions</a></li>\n      <li><a class=\"ds-personal__link\" href=\"#main\">Log out</a></li>\n    </ul>\n\n    <!-- ============ main page ============ -->\n    <section class=\"ds-view ds-view--home\" id=\"main\">\n      <ul class=\"ds-tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#main\">Main page</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#main\">Discussion</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#edit\">View source</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#history\">History</a></li>\n      </ul>\n      <div class=\"ds-sheet\">\n        <div class=\"ds-sheet__stack\">\n\n          <p class=\"ds-sitenotice\">The spring writing drive runs until the end of the month: <a class=\"ds-sitenotice__link\" href=\"#edit\">pick a stub and help finish it</a>.</p>\n\n          <section class=\"ds-hero\" data-component=\"hero\">\n            <div class=\"ds-hero__text\">\n              <h1 class=\"ds-hero__title\">Welcome to chronoskin,</h1>\n              <p class=\"ds-hero__lead\">the open reference on timekeeping that <a class=\"ds-link\" href=\"#edit\">anyone can edit</a>.</p>\n              <p class=\"ds-hero__count\"><a class=\"ds-link\" href=\"#history\">12,480</a> articles, written by their readers</p>\n              <p class=\"ds-hero__action\"><a class=\"ds-button\" href=\"#edit\">Start a new article</a></p>\n            </div>\n            <ul class=\"ds-hero__aside\">\n              <li><a class=\"ds-link\" href=\"#article\">Instruments</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">History</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">Astronomy</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">Calendars</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">Makers</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">Navigation</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">Mechanics</a></li>\n              <li><a class=\"ds-link\" href=\"#article\">Standards</a></li>\n              <li><a class=\"ds-link ds-link--strong\" href=\"#main\">All shelves</a></li>\n            </ul>\n          </section>\n\n          <div class=\"ds-columns\">\n            <section class=\"ds-panel ds-panel--1\" data-component=\"panel\">\n              <h2 class=\"ds-panel__title\">Today's featured article</h2>\n              <div class=\"ds-panel__body\">\n                <span class=\"ds-thumb ds-thumb--left\"><span class=\"ds-thumb__image\"><svg viewBox=\"0 0 40 30\" aria-hidden=\"true\"><use href=\"#i-clock\"/></svg></span></span>\n                <p class=\"ds-panel__line\">A <a class=\"ds-link ds-link--strong\" href=\"#article\">water clock</a> measures time by the regulated flow of liquid into or out of a vessel. Together with the <a class=\"ds-link\" href=\"#article\">sundial</a> it is among the oldest timekeeping instruments, and it stayed in use where the sky was overcast or the hour fell at night. Outflow clocks are marked on the inside of a draining bowl; inflow clocks read a float that rises in a second vessel fed at a steady rate.</p>\n                <p class=\"ds-panel__line\">Later builders added <a class=\"ds-link\" href=\"#article\">gear trains</a>, bells and moving figures, and a constant-level tank to keep the pressure even. The instrument was only displaced by the <a class=\"ds-link ds-link--new\" href=\"#edit\">verge escapement</a> and, later, the pendulum. (<a class=\"ds-link ds-link--strong\" href=\"#article\">more...</a>)</p>\n                <p class=\"ds-panel__more\"><a class=\"ds-link\" href=\"#history\">Archive</a> &middot; <a class=\"ds-link\" href=\"#article\">All featured articles</a></p>\n              </div>\n              <h2 class=\"ds-panel__title\">Did you know...</h2>\n              <div class=\"ds-panel__body\">\n                <ul class=\"ds-panel__items\">\n                  <li>...that some town clocks kept <a class=\"ds-link\" href=\"#article\">unequal hours</a>, twelve to the day and twelve to the night, whatever the season?</li>\n                  <li>...that a <a class=\"ds-link\" href=\"#article\">candle clock</a> could drop a nail into a dish to sound the hour?</li>\n                  <li>...that the <a class=\"ds-link ds-link--new\" href=\"#edit\">equation of time</a> lets a sundial disagree with a watch by a quarter of an hour?</li>\n                  <li>...that railway timetables, not astronomers, pushed most towns onto a <a class=\"ds-link\" href=\"#article\">shared standard time</a>?</li>\n                </ul>\n                <p class=\"ds-panel__more\"><a class=\"ds-link\" href=\"#history\">Archive</a> &middot; <a class=\"ds-link\" href=\"#edit\">Start a new article</a></p>\n              </div>\n            </section>\n\n            <section class=\"ds-panel ds-panel--2\">\n              <h2 class=\"ds-panel__title\">In the news</h2>\n              <div class=\"ds-panel__body\">\n                <ul class=\"ds-panel__items\">\n                  <li>A restored <a class=\"ds-link\" href=\"#article\">turret clock</a> is set running again after forty years at rest.</li>\n                  <li>The <a class=\"ds-link\" href=\"#article\">leap second</a> scheduled for the end of June is confirmed.</li>\n                  <li>Divers recover a bronze <a class=\"ds-link ds-link--new\" href=\"#edit\">gearwork calendar</a> fragment from a harbour wreck.</li>\n                  <li>A museum puts its entire <a class=\"ds-link\" href=\"#article\">pocket watch</a> collection on open shelves.</li>\n                </ul>\n                <p class=\"ds-panel__more\"><a class=\"ds-link\" href=\"#history\">More current events...</a></p>\n              </div>\n              <h2 class=\"ds-panel__title\">On this day...</h2>\n              <div class=\"ds-panel__body\">\n                <ul class=\"ds-list\" data-component=\"list\">\n                  <li class=\"ds-list__item\"><span class=\"ds-list__date\"><a class=\"ds-link\" href=\"#article\">1582</a></span><span>The <a class=\"ds-link\" href=\"#article\">reformed calendar</a> drops ten days in a single night. <span class=\"ds-list__meta\">Calendars &middot; edited 2 hours ago</span></span></li>\n                  <li class=\"ds-list__item\"><span class=\"ds-list__date\"><a class=\"ds-link\" href=\"#article\">1657</a></span><span>The first working <a class=\"ds-link\" href=\"#article\">pendulum clock</a> is finished. <span class=\"ds-list__meta\">Mechanics &middot; edited yesterday</span></span></li>\n                  <li class=\"ds-list__item\"><span class=\"ds-list__date\"><a class=\"ds-link\" href=\"#article\">1761</a></span><span>A <a class=\"ds-link\" href=\"#article\">marine timekeeper</a> sails on its proving voyage. <span class=\"ds-list__meta\">Navigation &middot; edited 3 days ago</span></span></li>\n                  <li class=\"ds-list__item\"><span class=\"ds-list__date\"><a class=\"ds-link\" href=\"#article\">1884</a></span><span>Delegates agree on a single <a class=\"ds-link\" href=\"#article\">prime meridian</a>. <span class=\"ds-list__meta\">Standards &middot; edited last week</span></span></li>\n                </ul>\n              </div>\n            </section>\n          </div>\n\n          <dl class=\"ds-stat\" data-component=\"stats\">\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">12,480</dd><dt class=\"ds-stat__label\">Articles</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">310,224</dd><dt class=\"ds-stat__label\">Edits</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">1,905</dd><dt class=\"ds-stat__label\">Contributors</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">86</dd><dt class=\"ds-stat__label\">Featured articles</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">2,317</dd><dt class=\"ds-stat__label\">Wanted pages</dt></div>\n          </dl>\n\n          <h2 class=\"ds-section\">Other shelves of chronoskin</h2>\n          <ul class=\"ds-grid\" data-component=\"grid\">\n            <li class=\"ds-grid__cell\"><span class=\"ds-grid__icon\">H</span><span><a class=\"ds-grid__name\" href=\"#main\">Help desk</a><span class=\"ds-grid__meta\">Questions about using and editing the reference.</span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__icon\">R</span><span><a class=\"ds-grid__name\" href=\"#article\">Reading room</a><span class=\"ds-grid__meta\">Volunteers help you find a source. <span class=\"ds-badge\" data-component=\"badge\">new</span></span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--3\"><span class=\"ds-grid__icon\">W</span><span><a class=\"ds-grid__name\" href=\"#edit\">Workshop</a><span class=\"ds-grid__meta\">Drafts, stubs and pages that need a second pair of eyes.</span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--4\"><span class=\"ds-grid__icon\">G</span><span><a class=\"ds-grid__name\" href=\"#history\">Gazette</a><span class=\"ds-grid__meta\">Announcements and the monthly round-up of changes.</span></span></li>\n          </ul>\n\n        </div>\n      </div>\n    </section>\n\n    <!-- ============ article ============ -->\n    <section class=\"ds-view\" id=\"article\">\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#article\">Article</a></li>\n        <li><a class=\"ds-tabs__tab is-missing\" href=\"#edit\">Discussion</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#edit\">Edit this page</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#history\">History</a></li>\n        <li class=\"ds-tabs__gap\"></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#history\">Watch</a></li>\n      </ul>\n      <div class=\"ds-sheet\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#main\">Contents</a></li>\n          <li class=\"ds-breadcrumb__sep\">&gt;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#main\">Instruments</a></li>\n          <li class=\"ds-breadcrumb__sep\">&gt;</li>\n          <li class=\"ds-breadcrumb__current\">Water clock</li>\n        </ol>\n        <header class=\"ds-page-header\" data-component=\"page-header\">\n          <h1 class=\"ds-page-header__title\">Water clock</h1>\n          <p class=\"ds-page-header__action\"><a class=\"ds-button ds-button--secondary\" href=\"#edit\">Edit this page</a></p>\n        </header>\n        <p class=\"ds-page-header__desc\">From chronoskin, the open reference on timekeeping</p>\n\n        <aside class=\"ds-infobox\">\n          <h2 class=\"ds-infobox__title\">Water clock</h2>\n          <span class=\"ds-infobox__image\"><svg viewBox=\"0 0 40 30\" aria-hidden=\"true\"><use href=\"#i-clock\"/></svg></span>\n          <span class=\"ds-infobox__caption\">An inflow clock with a float and a marked rod</span>\n          <p class=\"ds-infobox__group\">Classification</p>\n          <table class=\"ds-infobox__rows\">\n            <tr><th scope=\"row\">Type</th><td>Timekeeping instrument</td></tr>\n            <tr><th scope=\"row\">Principle</th><td>Regulated flow of liquid</td></tr>\n            <tr><th scope=\"row\">Main forms</th><td>Outflow, inflow, sinking bowl</td></tr>\n            <tr><th scope=\"row\">In use</th><td>Antiquity to the 1600s</td></tr>\n            <tr><th scope=\"row\">Typical error</th><td>10 to 15 minutes a day</td></tr>\n            <tr><th scope=\"row\">Replaced by</th><td><a class=\"ds-link\" href=\"#article\">Pendulum clock</a></td></tr>\n            <tr><th scope=\"row\">Related</th><td><a class=\"ds-link\" href=\"#article\">Sundial</a>, <a class=\"ds-link\" href=\"#article\">sandglass</a>, <a class=\"ds-link ds-link--new\" href=\"#edit\">incense clock</a></td></tr>\n          </table>\n        </aside>\n\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <p class=\"ds-hatnote\">For the sinking-bowl timer used to share out irrigation turns, see <a class=\"ds-link\" href=\"#article\">Water clock (irrigation)</a>.</p>\n          <p>A <strong>water clock</strong> is an instrument that measures time by the regulated flow of liquid into or out of a vessel, where the amount is then read against a scale. With the <a class=\"ds-link\" href=\"#article\">sundial</a> it is among the oldest instruments for telling the hour, and unlike the sundial it works indoors, under cloud and at night.<sup><a class=\"ds-link\" href=\"#article\">[1]</a></sup></p>\n          <p>The simplest form is a bowl with a small hole near its base. Makers soon found that the flow slows as the level falls, and much of the later history of the instrument is the search for an even rate.<sup><a class=\"ds-link\" href=\"#article\">[2]</a></sup></p>\n\n          <div class=\"ds-toc\">\n            <p class=\"ds-toc__title\">Contents <span class=\"ds-toc__toggle\">[<a class=\"ds-link\" href=\"#article\">hide</a>]</span></p>\n            <ul class=\"ds-toc__list\">\n              <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">1</span>Principle</a>\n                <ul class=\"ds-toc__list\">\n                  <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">1.1</span>Outflow clocks</a></li>\n                  <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">1.2</span>Inflow clocks</a></li>\n                </ul>\n              </li>\n              <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">2</span>Accuracy</a></li>\n              <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">3</span>Surviving examples</a></li>\n              <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">4</span>See also</a></li>\n              <li><a class=\"ds-link\" href=\"#article\"><span class=\"ds-toc__num\">5</span>References</a></li>\n            </ul>\n          </div>\n\n          <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#edit\">edit</a>]</span>Principle</h2>\n          <h3><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#edit\">edit</a>]</span>Outflow clocks</h3>\n          <p>An outflow clock is a vessel that drains through a narrow opening. Hours are marked on its inner wall, and the wall is often sloped so that equal drops in level stand for nearly equal times. A formula of the form <code>t = k * sqrt(h)</code> describes the emptying of a straight-sided vessel.</p>\n          <span class=\"ds-thumb\"><span class=\"ds-thumb__image\"><svg viewBox=\"0 0 40 30\" aria-hidden=\"true\"><use href=\"#i-pic\"/></svg></span><span class=\"ds-thumb__caption\">A reconstructed clock tower with its feed tank on the upper floor</span></span>\n          <h3><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#edit\">edit</a>]</span>Inflow clocks</h3>\n          <p>An inflow clock collects the water in a second, straight-sided vessel in which a float carries a pointer. Because the receiving vessel does not affect the rate, the scale can be evenly divided, provided the supply is steady. The usual remedies were:</p>\n          <ul>\n            <li>an overflow tank that keeps the head of water constant;</li>\n            <li>a conical float valve that closes the inlet as the level rises;</li>\n            <li>a set of interchangeable scales, one for each month, where hours varied with the season.</li>\n          </ul>\n\n          <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#edit\">edit</a>]</span>Accuracy</h2>\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">This section needs more sources.</span> Figures below come from a single modern reconstruction. <a class=\"ds-notice__link\" href=\"#edit\">Help improve it</a> by adding measurements from published tests.</p>\n          <p>Temperature changes the thickness of water and so the rate of flow; a clock set in summer runs slow in winter. Tests on modern replicas give the figures below.<sup><a class=\"ds-link\" href=\"#article\">[3]</a></sup></p>\n          <table class=\"ds-table\">\n            <thead>\n              <tr><th scope=\"col\">Form</th><th scope=\"col\">Regulator</th><th scope=\"col\">Run time (h)</th><th scope=\"col\">Error per day (min)</th></tr>\n            </thead>\n            <tbody>\n              <tr><td>Plain outflow bowl</td><td>None</td><td class=\"ds-table__num\">6</td><td class=\"ds-table__num\">45</td></tr>\n              <tr><td>Sloped outflow vessel</td><td>Wall profile</td><td class=\"ds-table__num\">12</td><td class=\"ds-table__num\">20</td></tr>\n              <tr><td>Inflow with overflow tank</td><td>Constant head</td><td class=\"ds-table__num\">24</td><td class=\"ds-table__num\">12</td></tr>\n              <tr><td>Inflow with float valve</td><td>Feedback valve</td><td class=\"ds-table__num\">24</td><td class=\"ds-table__num\">10</td></tr>\n            </tbody>\n          </table>\n\n          <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#edit\">edit</a>]</span>See also</h2>\n          <ul data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#article\">Sundial</a> (a link to an article)</li>\n            <li><a class=\"ds-link is-visited\" href=\"#article\">Sandglass</a> (an article you have already read)</li>\n            <li><a class=\"ds-link is-hover\" href=\"#article\">Candle clock</a> (under the pointer)</li>\n            <li><a class=\"ds-link is-active\" href=\"#article\">Pendulum clock</a> (while pressed)</li>\n            <li><a class=\"ds-link ds-link--new\" href=\"#edit\">Incense clock</a> (a page nobody has written yet)</li>\n            <li><a class=\"ds-link ds-link--quiet\" href=\"#article\">Museum catalogue of flow instruments</a> (an outside link)</li>\n          </ul>\n\n          <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#edit\">edit</a>]</span>References</h2>\n          <ol class=\"ds-refs\">\n            <li><a class=\"ds-link\" href=\"#article\">^</a> Aldous, M. <i>Instruments of the Hour</i>, 2nd ed., pp. 14 to 31.</li>\n            <li><a class=\"ds-link\" href=\"#article\">^</a> Brandt, K. \"Flow and level in draining vessels\", <i>Journal of Early Mechanics</i> 12, pp. 201 to 219.</li>\n            <li><a class=\"ds-link\" href=\"#article\">^</a> Field notes of the replica trials, <a class=\"ds-link ds-link--quiet\" href=\"#article\">open workshop archive</a>. Retrieved on 4 March 2007.</li>\n          </ol>\n        </div>\n\n        <p class=\"ds-catlinks\"><a class=\"ds-link\" href=\"#main\">Categories</a>: <a class=\"ds-link\" href=\"#main\">Timekeeping instruments</a> | <a class=\"ds-link\" href=\"#main\">Clocks</a> | <a class=\"ds-link\" href=\"#main\">Ancient inventions</a> | <a class=\"ds-link ds-link--new\" href=\"#edit\">Hydraulic devices</a></p>\n      </div>\n    </section>\n\n    <!-- ============ history ============ -->\n    <section class=\"ds-view\" id=\"history\">\n      <ul class=\"ds-tabs\">\n        <li><a class=\"ds-tabs__tab\" href=\"#article\">Article</a></li>\n        <li><a class=\"ds-tabs__tab is-missing\" href=\"#edit\">Discussion</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#edit\">Edit this page</a></li>\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#history\">History</a></li>\n        <li class=\"ds-tabs__gap\"></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#history\">Watch</a></li>\n      </ul>\n      <div class=\"ds-sheet\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#main\">Contents</a></li>\n          <li class=\"ds-breadcrumb__sep\">&gt;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#article\">Water clock</a></li>\n          <li class=\"ds-breadcrumb__sep\">&gt;</li>\n          <li class=\"ds-breadcrumb__current\">Revision history</li>\n        </ol>\n        <header class=\"ds-page-header\">\n          <h1 class=\"ds-page-header__title\">Revision history of \"Water clock\"</h1>\n          <p class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#history\">Compare selected versions</a></p>\n        </header>\n        <p class=\"ds-page-header__desc\">From chronoskin, the open reference on timekeeping</p>\n\n        <div class=\"ds-sheet__stack\">\n          <p class=\"ds-legend\">Legend: (cur) = difference with the current version, (last) = difference with the version before, <span class=\"ds-badge\">m</span> = minor edit. Sizes are in bytes.</p>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li class=\"ds-pagination__label\">View</li>\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#history\">newer</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#history\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#history\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#history\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#history\">4</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#history\">older</a></li>\n            <li class=\"ds-pagination__label\">&nbsp; 10 of 37 versions</li>\n          </ul>\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th scope=\"col\">Compare</th><th scope=\"col\">Date</th><th scope=\"col\">Editor</th><th scope=\"col\">Size</th><th scope=\"col\">Change</th><th scope=\"col\">Summary</th></tr>\n            </thead>\n            <tbody>\n              <tr><td class=\"ds-table__tools\">(cur) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">09:14, 4 March 2007</a></td><td><a class=\"ds-link\" href=\"#history\">Halvard</a> (<a class=\"ds-link\" href=\"#main\">talk</a>)</td><td class=\"ds-table__num\">8,412</td><td class=\"ds-table__num\"><span class=\"ds-table__plus\">+236</span></td><td><span class=\"ds-table__summary\">Accuracy: added replica trial figures</span> <span class=\"ds-badge ds-badge--warning\">unchecked</span></td></tr>\n              <tr class=\"ds-table__row--alt\"><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">21:50, 2 March 2007</a></td><td><a class=\"ds-link\" href=\"#history\">Ines Corbel</a> (<a class=\"ds-link\" href=\"#main\">talk</a>)</td><td class=\"ds-table__num\">8,176</td><td class=\"ds-table__num\"><span class=\"ds-table__plus\">+12</span></td><td><span class=\"ds-badge\">m</span> <span class=\"ds-table__summary\">spelling</span> <span class=\"ds-badge ds-badge--success\">checked</span></td></tr>\n              <tr><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">18:03, 2 March 2007</a></td><td><a class=\"ds-link ds-link--new\" href=\"#edit\">Tamsin R</a> (<a class=\"ds-link ds-link--new\" href=\"#edit\">talk</a>)</td><td class=\"ds-table__num\">8,164</td><td class=\"ds-table__num\"><span class=\"ds-table__minus\">-1,940</span></td><td><span class=\"ds-table__summary\">removed the section on float valves</span> <span class=\"ds-badge ds-badge--danger\">reverted</span></td></tr>\n              <tr class=\"ds-table__row--alt\"><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">11:27, 27 February 2007</a></td><td><a class=\"ds-link\" href=\"#history\">Oduya</a> (<a class=\"ds-link\" href=\"#main\">talk</a>)</td><td class=\"ds-table__num\">10,104</td><td class=\"ds-table__num\"><span class=\"ds-table__plus\">+1,318</span></td><td><span class=\"ds-table__summary\">Inflow clocks: constant-head tank, with a source</span> <span class=\"ds-badge ds-badge--success\">checked</span></td></tr>\n              <tr><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">08:41, 19 February 2007</a></td><td><a class=\"ds-link\" href=\"#history\">Halvard</a> (<a class=\"ds-link\" href=\"#main\">talk</a>)</td><td class=\"ds-table__num\">8,786</td><td class=\"ds-table__num\"><span class=\"ds-table__plus\">+402</span></td><td><span class=\"ds-table__summary\">fact box, picture caption</span> <span class=\"ds-badge ds-badge--success\">checked</span></td></tr>\n              <tr class=\"ds-table__row--alt\"><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">16:12, 3 February 2007</a></td><td>81.0.2.117 (<a class=\"ds-link ds-link--new\" href=\"#edit\">talk</a>)</td><td class=\"ds-table__num\">8,384</td><td class=\"ds-table__num\"><span class=\"ds-table__minus\">-58</span></td><td><span class=\"ds-badge\">m</span> <span class=\"ds-table__summary\">tidied the see also list</span> <span class=\"ds-badge ds-badge--success\">checked</span></td></tr>\n              <tr><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (<a class=\"ds-link\" href=\"#history\">last</a>)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">22:35, 28 January 2007</a></td><td><a class=\"ds-link\" href=\"#history\">Ines Corbel</a> (<a class=\"ds-link\" href=\"#main\">talk</a>)</td><td class=\"ds-table__num\">8,442</td><td class=\"ds-table__num\"><span class=\"ds-table__plus\">+2,077</span></td><td><span class=\"ds-table__summary\">rewrote the lead and the principle section</span> <span class=\"ds-badge ds-badge--success\">checked</span></td></tr>\n              <tr class=\"ds-table__row--alt\"><td class=\"ds-table__tools\">(<a class=\"ds-link\" href=\"#history\">cur</a>) (last)</td><td class=\"ds-table__tools\"><a class=\"ds-link\" href=\"#article\">14:06, 11 December 2006</a></td><td><a class=\"ds-link\" href=\"#history\">Oduya</a> (<a class=\"ds-link\" href=\"#main\">talk</a>)</td><td class=\"ds-table__num\">6,365</td><td class=\"ds-table__num\"><span class=\"ds-table__plus\">+6,365</span></td><td><span class=\"ds-table__summary\">new page, moved from the workshop</span></td></tr>\n            </tbody>\n          </table>\n          <div class=\"ds-buttons\">\n            <a class=\"ds-button\" href=\"#history\">Compare selected versions</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#article\">Back to the article</a>\n            <a class=\"ds-link\" href=\"#edit\">Edit the current version</a>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <!-- ============ edit ============ -->\n    <section class=\"ds-view\" id=\"edit\">\n      <ul class=\"ds-tabs\">\n        <li><a class=\"ds-tabs__tab\" href=\"#article\">Article</a></li>\n        <li><a class=\"ds-tabs__tab is-missing\" href=\"#edit\">Discussion</a></li>\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#edit\">Edit this page</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#history\">History</a></li>\n        <li class=\"ds-tabs__gap\"></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#history\">Watch</a></li>\n      </ul>\n      <div class=\"ds-sheet\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#main\">Contents</a></li>\n          <li class=\"ds-breadcrumb__sep\">&gt;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#article\">Water clock</a></li>\n          <li class=\"ds-breadcrumb__sep\">&gt;</li>\n          <li class=\"ds-breadcrumb__current\">Editing</li>\n        </ol>\n        <header class=\"ds-page-header\">\n          <h1 class=\"ds-page-header__title\">Editing Water clock (section)</h1>\n          <p class=\"ds-page-header__action\"><a class=\"ds-button ds-button--secondary\" href=\"#main\">Editing help</a></p>\n        </header>\n        <p class=\"ds-page-header__desc\">From chronoskin, the open reference on timekeeping</p>\n\n        <div class=\"ds-sheet__stack\">\n          <div class=\"ds-sheet__stack\" data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__title\">You are editing an old version of this section.</span> If you save it, the two changes made since then will be lost. <a class=\"ds-notice__link\" href=\"#history\">Compare the versions</a> first.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Your edit was not saved.</span> The summary is empty, and this page asks for one. Add a line that says what you changed and save again.</p>\n          </div>\n\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <p class=\"ds-empty__title\">Nothing to preview yet</p>\n            <p class=\"ds-empty__text\">You have not asked for a preview of this edit. A preview shows the section as readers will see it, before anything is saved.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#edit\">Show preview</a>\n          </div>\n\n          <form class=\"ds-form\" data-component=\"form\" action=\"#article\">\n            <div class=\"ds-form__editor\">\n              <div class=\"ds-toolbar\">\n                <span class=\"ds-toolbar__key ds-toolbar__key--bold\">B</span>\n                <span class=\"ds-toolbar__key ds-toolbar__key--italic\">I</span>\n                <span class=\"ds-toolbar__key\">Ab</span>\n                <span class=\"ds-toolbar__key\">[[ ]]</span>\n                <span class=\"ds-toolbar__key\">== ==</span>\n                <span class=\"ds-toolbar__key\">{{ }}</span>\n                <span class=\"ds-toolbar__key\">ref</span>\n                <span class=\"ds-toolbar__key\">~~~~</span>\n                <span class=\"ds-toolbar__hint\">Section 2 of 5: Accuracy</span>\n              </div>\n              <textarea class=\"ds-form__input ds-form__input--text\" aria-label=\"Page text\">== Accuracy ==\n{{more sources}}\nTemperature changes the thickness of water and so the rate of flow; a clock set in summer runs slow in winter. Tests on modern replicas give the figures below.&lt;ref&gt;Field notes of the replica trials.&lt;/ref&gt;\n\n{| border=1\n! Form !! Regulator !! Run time (h) !! Error per day (min)\n|-\n| Plain outflow bowl || None || 6 || 45\n|-\n| Sloped outflow vessel || Wall profile || 12 || 20\n|-\n| Inflow with [[overflow tank]] || Constant head || 24 || 12\n|}</textarea>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"e-summary\">Summary:</label>\n              <input class=\"ds-form__input is-invalid\" id=\"e-summary\" type=\"text\" value=\"\">\n              <label class=\"ds-form__label\" for=\"e-kind\">Kind of change:</label>\n              <select class=\"ds-form__input ds-form__input--auto\" id=\"e-kind\"><option>Content</option><option>Copy edit</option><option>Revert</option></select>\n              <span class=\"ds-form__error\">Please say in a few words what you changed.</span>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> This is a minor edit</label>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Watch this page</label>\n              <span class=\"ds-form__hint\">Signed in as Halvard</span>\n            </div>\n            <p class=\"ds-form__legal\">By saving you agree to release your text under the open documentation licence. Do not paste work that is not yours. If you do not want your writing to be edited by others, do not submit it.</p>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"submit\">Save page</button>\n              <a class=\"ds-button ds-button--secondary\" href=\"#edit\">Show preview</a>\n              <button class=\"ds-button is-disabled\" type=\"button\" disabled>Show changes</button>\n              <a class=\"ds-link\" href=\"#article\">Cancel</a>\n              <span class=\"ds-form__spacer\"></span>\n              <a class=\"ds-button ds-button--danger\" href=\"#edit\">Delete this page</a>\n            </div>\n          </form>\n\n          <div class=\"ds-dialog__backdrop\">\n            <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n              <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Delete \"Water clock\"?</h2>\n              <div class=\"ds-dialog__body\">\n                <p class=\"ds-dialog__text\">You are about to delete this page together with all 37 versions of its history. Sysops can restore it; readers will see a red link.</p>\n                <div class=\"ds-dialog__actions\">\n                  <a class=\"ds-button ds-button--secondary\" href=\"#article\">Keep the page</a>\n                  <a class=\"ds-button ds-button--danger\" href=\"#main\">Delete page and history</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <footer class=\"ds-footer\" data-component=\"footer\">\n      <span class=\"ds-footer__badge\">open<br>text</span>\n      <div class=\"ds-footer__body\">\n        <p class=\"ds-footer__text\">This page was last modified 09:14, 4 March 2007. All text of chronoskin is available under the terms of an open documentation licence.</p>\n        <ul class=\"ds-footer__row\">\n          <li><a class=\"ds-footer__link\" href=\"#main\">Privacy policy</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#main\">About chronoskin</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#main\">Disclaimers</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#history\">Recent changes</a></li>\n        </ul>\n      </div>\n    </footer>\n\n  </div>\n</div>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.wiki-2000s.docs.s01.p02.t02.u02\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"wiki-2000s\",\n    \"years\": [\n      2003,\n      2010\n    ]\n  },\n  \"archetype\": \"docs\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-wk-1222\",\n  \"short\": \"v1-wk-1222\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #2e2e33;\n  --color-canvas: #ffffff;\n  --color-surface: #f8f8f8;\n  --color-surface-alt: #eeeeff;\n  --color-surface-strong: #a6caf0;\n  --color-bar: #222222;\n  --color-bar-text: #ffd942;\n  --color-bar-alt: #15317e;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #331818;\n  --color-inverse-text: #ffe9a8;\n  --color-text: #111111;\n  --color-text-muted: #686868;\n  --color-heading: #660000;\n  --color-heading-alt: #15317e;\n  --color-link: #15317e;\n  --color-link-quiet: #808040;\n  --color-link-visited: #778899;\n  --color-link-hover: #d2691e;\n  --color-link-active: #660000;\n  --color-border: #cccccc;\n  --color-border-strong: #e0c080;\n  --color-border-muted: #e8e8e8;\n  --color-accent: #ffd942;\n  --color-accent-text: #222222;\n  --color-accent-alt: #d2691e;\n  --color-fill-1: #eeeeff;\n  --color-fill-2: #f8f8f0;\n  --color-fill-3: #eef3e2;\n  --color-fill-4: #fbf1d6;\n  --color-button: #15317e;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffd942;\n  --color-button-secondary: #a6caf0;\n  --color-button-secondary-text: #191970;\n  --color-input: #fffdf6;\n  --color-input-text: #111111;\n  --color-input-border: #989898;\n  --color-disabled: #d0d0d0;\n  --color-disabled-text: #787878;\n  --color-danger: #a11b1b;\n  --color-danger-surface: #f6e2dc;\n  --color-success: #3f7d1d;\n  --color-warning: #c98a00;\n  --color-notice: #fff4c2;\n  --color-notice-text: #331818;\n  --color-focus: #d2691e;\n  --color-shadow: #181820;\n  --color-overlay: #202020;\n}\n\n/* @part type */\n:root {\n  --font-body: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n  --font-heading: \"Trebuchet MS\", Verdana, Geneva, sans-serif;\n  --font-ui: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n  --font-mono: \"Lucida Console\", Monaco, monospace;\n  --text-base: 11px;\n  --text-small: 10px;\n  --text-ui: 10px;\n  --text-large: 13px;\n  --text-display: 22px;\n  --text-h1: 20px;\n  --text-h2: 15px;\n  --text-h3: 12px;\n  --line-body: 1.45;\n  --line-heading: 1.2;\n  --line-display: 1.1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 1px;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 14%) 0, color-mix(in srgb, var(--color-page), black 14%) 1px, var(--color-page) 1px, var(--color-page) 3px);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%), var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 25%));\n  --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 16%), var(--color-bar-alt) 60%);\n  --fill-inverse: linear-gradient(to right, var(--color-inverse), color-mix(in srgb, var(--color-inverse), black 45%));\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%), var(--color-accent));\n  --fill-panel: var(--color-canvas);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 28%), var(--color-button) 55%);\n  --fill-button-hover: linear-gradient(to bottom, var(--color-button), color-mix(in srgb, var(--color-button), black 25%));\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 45%), var(--color-button-secondary));\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 6%), var(--color-input) 30%);\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
