{ "id": "v1-wk-7344", "long_id": "v1.wiki-2000s.docs.s07.p03.t04.u04", "name": "Software project wiki, button tiles and download box, 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 wiki of a free software project in the middle 2000s, the kind that served as home page, manual and workshop at once: one white sheet from edge to edge with the name at the top, a row of small bevelled button tiles for navigation and a strip that traces the pages just visited, and no column of links at either side. The start page puts the introduction beside a box of current versions, then hubs for each kind of reader, dated news and small boxes of links; manual pages float a contents box at the right and end, like every page, in a second row of tiles for the page itself. Text is 12px Lucida with bold Palatino titles, plum and lilac boxes with an amber edge, square corners, hard one-pixel bevels and offsets instead of soft shadows, and no motion.", "url": "https://chrono.skin/s/v1-wk-7344", "preview_url": "https://chrono.skin/s/v1-wk-7344/specimen.html", "files": { "STYLE.md": "# Software project wiki, button tiles and download box, 2003 to 2010\n\n## Summary\n\nThis is the wiki of a free software project in the middle 2000s, the kind that served as home page, manual and workshop at once: one white sheet from edge to edge with the name at the top, a row of small bevelled button tiles for navigation and a strip that traces the pages just visited, and no column of links at either side. The start page puts the introduction beside a box of current versions, then hubs for each kind of reader, dated news and small boxes of links; manual pages float a contents box at the right and end, like every page, in a second row of tiles for the page itself. Text is 12px Lucida with bold Palatino titles, plum and lilac boxes with an amber edge, square corners, hard one-pixel bevels and offsets instead of soft shadows, and no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-6` (18px) around the single sheet `.ds-page__sheet`, which is `--color-canvas` with a 1px `--color-border-strong` outline and `--space-6` of side padding. Designed at 1024px; it does not reflow for phones.\n- Everything is inside the sheet, from the top: the header `.ds-nav` (the masthead `.ds-nav__top` with the brand at the left and the account line and search at the right; the menu `.ds-nav__menu`, a row of tiles closed by a `--border-width-strong` rule); the trace strip `.ds-trace` in the secondary bar fill; the current view; the page tools `.ds-pagetools`, a second row of tiles over a strong rule; the footer box. No text sits on the page colour. There are no bars as chrome and no side column: `--fill-bar` is the head of tables and dialogs, `--fill-inverse` the title of the download box.\n- Views. The specimen is a four-screen example project wiki; the menu has one tile per view and the current one takes the primary button fill. `home` is the start page: the introduction beside the download box (`.ds-hero`, a fluid column and `--size-download`, 276px), four figure cells, four hub cells, then news beside a `--size-side` (232px) column of link boxes. `manual` is one manual page: trail, title, page tabs, text flowing round a floated `--size-toc` (236px) column with the contents box and a requirements panel, a command block, a notice, and the chapter paging. `releases` is the release table with its legend, paging and an empty nightly-build section. `report` is the ticket form with two notices, its buttons and the discard confirmation.\n- Inner pages (every view but `home`) start with `.ds-breadcrumb`, then `.ds-page-header` in place of the introduction (title and one muted line at the left, the action at the right, on a 2px rule), then `.ds-tabs` when the page has several faces, then the working blocks. All blocks of a view are in `.ds-view__body`, `--space-5` (12px) apart.\n- Form rows are a right-aligned `--size-label` (136px) label cell and a field cell; inputs are `--size-field` (320px), the search field `--size-search` (168px), a text area `--size-editor` (112px) tall. A dialog is `--size-dialog` (440px) wide, centred in a band in the flow.\n- Spacing scale: `--space-1` 2px, `--space-2` 4px, `--space-3` 6px, `--space-4` 9px, `--space-5` 12px, `--space-6` 18px, `--space-7` 26px.\n - `--space-1`: vertical padding of tiles, buttons, tabs, strips and inputs.\n - `--space-2`: vertical padding of table cells, gap between tabs and page numbers.\n - `--space-3`: gap between tiles and between buttons, vertical padding of news rows and notices.\n - `--space-4`: horizontal padding of cells, boxes and strips; gap between figure and hub cells.\n - `--space-5`: gap between blocks; horizontal padding of tiles and notices; padding of the masthead.\n - `--space-6`: padding of the sheet and the page, gap between columns, margin above a section heading.\n - `--space-7`: list indent, padding under the sheet.\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, muted, heading and link colours, `--color-danger` and `--color-success` 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`. Links on a bar take the bar's text colour and are told apart by underline.\n- `--color-page` is kraft brown with fine vertical lines from `--fill-page`; the sheet `--color-canvas` is cream. `--color-surface` fills margin boxes, tables and the calendar leaf; `--color-surface-alt` the letter strip, idle tabs, language headings and alternate rows; `--color-surface-strong` panel titles, translation bars and the current letter.\n- `--fill-bar` (dark brown) with `--color-bar-text` is the section bar, table heads and the dialog title. `--fill-bar-alt` (straw) with `--color-bar-alt-text` is the masthead and the titles of margin boxes. `--fill-inverse` is the footer band.\n- `--color-heading` is for titles and headwords; `--color-heading-alt` (rust) for part-of-speech headings, panel titles, figures and the drop capitals of the grid. Links are `--color-link` (ink blue) and underlined; a missing entry is `.ds-link--new`.\n- `--color-border-strong` frames the book and rules the page header (as a `double` line of `--border-width-strong`); `--color-border` outlines boxes; `--color-border-muted` rules rows.\n- `--color-accent` with `--color-accent-text` is the current bar item, the month strip of the calendar leaf, the current page number and badges; `--color-accent-alt` is the top rule of a notice.\n- `--color-fill-1` to `--color-fill-4` are the straw, sage, clay and stone of the shelf cells.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are all Georgia, headings at weight 400; italic marks parts of speech, labels and quotations. `--font-mono` is for respellings.\n- Sizes: `--text-base` 14px; `--text-ui` 12px for bar, tabs, buttons, tables and margin boxes; `--text-small` 11px for meta and the footer; `--text-large` 16px for the definition of the day, panel titles and shelf names; `--text-h3` 15px, `--text-h2` 20px, `--text-h1` 25px, `--text-display` 30px for the wordmark and the word of the day.\n- One-off choices outside the token set: `double` rules on the hero, page header and footer; `dotted` row rules in tables; the notice's top rule is `--border-width-strong`; status badges are tints made with `color-mix()`.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__sheet` is the one sheet. `.ds-view` sections hold a `.ds-view__body`, the column of blocks; `.ds-flow` contains floats and `.ds-clear` ends them.\n- `.ds-nav`: the header. `.ds-nav__top` is the masthead; `.ds-nav__tools` stacks `.ds-nav__account` (the account line) over `.ds-nav__search` (a `.ds-nav__field` input and two small buttons). `.ds-nav__menu` is the row of tiles: `.ds-nav__link` leads to a view and takes `is-current`; `.ds-nav__tool` is the lighter tile for site tools, right of `.ds-nav__spacer`.\n- `.ds-brand`: the mark and name in a row at the left of the masthead. `.ds-brand__mark` is a square tile 1.7 times `--text-display`, dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` outline, `--radius-control`, `--shadow-control`). `.ds-brand__text` holds `.ds-brand__name` in the heading colour and the muted `.ds-brand__tag`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-trace`: the strip of pages just visited, with `.ds-trace__label`, `.ds-trace__link` and `.ds-trace__note` at the right.\n- `.ds-hero`: the introduction of the start page: `.ds-hero__text` (a `--fill-panel` box with `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__line`, the buttons in `.ds-hero__action` and the bold link line `.ds-hero__jump` with `.ds-hero__sep`) beside the download box. Never a banner.\n- `.ds-download`: the box of current versions: `.ds-download__title` in the inverse fill, a `.ds-table--plain`, then `.ds-download__body` with `.ds-download__note` and one button.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title` and `.ds-page-header__desc` at the left, `.ds-page-header__action` at the right, on a 2px rule.\n- `.ds-breadcrumb`: the small trail above the title, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-tabs`: the faces of one page, on a rule. `.ds-tabs__tab` with `is-current` (sheet colour, amber top edge, open at the bottom) and `is-missing`.\n- `.ds-prose`: manual text: h1, h2 (on a hairline), h3 (in `--color-heading-alt`), p, ul, ol, strong, code. `.ds-code` is a block of commands; `.ds-edit` the bracketed edit link in a heading.\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-aside`: the floated right column of a manual page; it holds `.ds-toc` (the contents box: `.ds-toc__title`, nested `.ds-toc__list`) and panels.\n- `.ds-panel`: a box with a `.ds-panel__title` strip and a `.ds-panel__body`; `.ds-panel__line` is a paragraph and `.ds-panel__rows` a small table of label and value.\n- `.ds-stat`: the row; four cells `.ds-stat__item`, each a Palatino `.ds-stat__value` and a small `.ds-stat__label` on one line, with an amber left edge.\n- `.ds-grid`: four hub cells in a row, each `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with `.ds-grid__head` (a `.ds-grid__icon` tile, `.ds-grid__name`, `.ds-grid__meta`) and a `.ds-grid__links` list.\n- `.ds-columns`: news beside the link boxes; `.ds-columns__main` stacks the news blocks. `.ds-section` is a heading on a hairline outside prose; `.ds-legend` a small muted line.\n- `.ds-list`: dated news: `.ds-list__item` with a monospace `.ds-list__date`, a bold `.ds-list__title` link and a `.ds-list__meta` line.\n- `.ds-sidebar`: the column of link boxes: `.ds-sidebar__block`, `.ds-sidebar__title`, `.ds-sidebar__list`, `.ds-sidebar__item`.\n- `.ds-table`: a ruled table with a bar-coloured head. `.ds-table__num` right-aligns numbers, `.ds-table__nowrap` keeps a cell on one line, `.ds-table__row--alt` is the alternate row, `.ds-table__version` a monospace version number. `.ds-table--plain` drops the outer frame inside another box.\n- `.ds-badge`: a small amber label. `.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 message framed in `--color-accent` with a thicker top edge; `.ds-notice--error` is framed 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; `.ds-notices` stacks several.\n- `.ds-pagination`: 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 pale button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--large` the download button, `.ds-button--small` for the search box. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-form`: a boxed form. `.ds-form__row` is a `.ds-form__label` cell and a `.ds-form__field` cell holding `.ds-form__input` (`--wide`, `--auto`, `--text` for the text area; `is-invalid`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, and `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the button row, 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-pagetools`: the row of `.ds-nav__tool` tiles at the foot of every page, with `.ds-pagetools__note` at the right.\n- `.ds-footer`: the small-print box: `.ds-footer__text`, `.ds-footer__row` of `.ds-footer__link`, and `.ds-footer__badges`, a stack of two-part `.ds-footer__badge` labels (`.ds-footer__key` on the accent fill, `.ds-footer__value`).\n- `ds-accordion` (with `__summary`, `__body`): a collapsible box, a `
` section for contents, tips or rules.\n- `ds-menu` (with `__summary`, `__list`, `__item`): a page-actions or language drop-down, a `
` opened by click.\n- `ds-tooltip` (with `__tip`): a small hint box on a link, shown on hover or focus.\n- `ds-progress` (inside `ds-meter`): a native progress bar for completeness or a drive.\n\n## Never\n\n- `block-gap <= 26px`: blocks are 12px apart.\n- `content-width >= 80%`: the sheet fills the window.\n- `font-size <= 30px`: the word of the day, 30px, is the largest text.\n- `font-size >= 11px`: meta text is 11px; nothing is smaller.\n- `font-families <= 2`: one serif for everything, monospace for respellings.\n- `letter-spacing <= 0px`: no reference tracks its text.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `border-radius <= 2px`: every box is square; only badges have 2px corners.\n- `box-shadow-blur <= 0px`: shadows are hard one-pixel offsets, never soft.\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 <= 3px`: rules are 1px; double rules and the notice edge are 3px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a navigation or tool link from `.ds-nav__tool`, a box of links from `.ds-sidebar__block`, a box beside manual text from `.ds-toc` or `.ds-panel` inside `.ds-aside`, a message from `.ds-notice`. Build it as a 1px `--color-border` outline on `--color-surface` or one of the four fills, keep text on fills as the conventions above say, and use tokens only: no raw colours or lengths, no radius, blur or transition of its own, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). Widths, gaps and paddings measured on\n software project wikis captured 2005 to 2008. */\n:root {\n --size-page: 100%;\n --size-download: 276px;\n --size-toc: 236px;\n --size-side: 232px;\n --size-search: 168px;\n --size-label: 136px;\n --size-field: 320px;\n --size-editor: 112px;\n --size-dialog: 440px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 6px;\n --space-4: 9px;\n --space-5: 12px;\n --space-6: 18px;\n --space-7: 26px;\n}\n\n/* ---------- shell: one sheet that holds everything, no side column ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-6) var(--space-6) var(--space-7);\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__sheet {\n width: var(--size-page);\n box-sizing: border-box;\n padding: 0 var(--space-6) var(--space-5);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\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.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-flow {\n display: flow-root;\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.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: masthead and a row of button tiles, on the sheet ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) 0 var(--space-4);\n}\n/* The mark is a tile dressed like the primary button; the name sits beside it\n on the sheet. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-heading);\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) * 1.7);\n height: calc(var(--text-display) * 1.7);\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__text {\n display: block;\n}\n.ds-brand__name {\n display: block;\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-brand__tag {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-nav__tools {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-3);\n}\n.ds-nav__account {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-nav__search .ds-nav__field {\n width: var(--size-search);\n}\n/* The menu: tiles in a row, closed by a strong rule. */\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-4);\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-nav__spacer {\n flex: 1 1 0;\n}\n.ds-nav__link,\n.ds-nav__tool {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-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-weight: var(--weight-ui);\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__tool {\n padding: var(--space-1) var(--space-4);\n font-weight: var(--weight-body);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover,\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover {\n border-color: var(--color-accent);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-nav__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n/* The current view's tile, and the home tile when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-page:has(#manual:target) .ds-nav__link[href=\"#manual\"] {\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-page:has(#releases:target) .ds-nav__link[href=\"#releases\"] {\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-page:has(#report:target) .ds-nav__link[href=\"#report\"] {\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- trace: the pages visited, one strip under the menu ---------- */\n.ds-trace {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1) var(--space-3);\n margin: var(--space-4) 0 0;\n padding: var(--space-1) var(--space-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n}\n.ds-trace__label {\n font-weight: var(--weight-bold);\n}\n.ds-trace__link {\n color: var(--color-bar-alt-text);\n text-decoration: underline;\n}\n.ds-trace__note {\n margin: 0 0 0 auto;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\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-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 font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the introduction beside the download box ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-download);\n gap: var(--space-6);\n align-items: stretch;\n}\n.ds-hero__text {\n padding: var(--space-5) var(--space-6) 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__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-3) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__line {\n margin: var(--space-3) 0 0;\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n margin: var(--space-5) 0 0;\n}\n.ds-hero__jump {\n margin: var(--space-5) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-weight: var(--weight-bold);\n}\n.ds-hero__sep {\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n\n/* ---------- download box: current versions ---------- */\n.ds-download {\n display: flex;\n flex-direction: column;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-download__title {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-download .ds-table {\n border-width: 0 0 var(--border-width);\n}\n.ds-download__body {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4);\n}\n.ds-download__note {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- stats: a row of figure cells ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n margin: 0;\n}\n.ds-stat__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: calc(var(--border-width-strong) * 2) var(--border-style) var(--color-accent);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\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 font-size: var(--text-small);\n color: var(--color-text-muted);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- grid: the hubs, one tinted cell per kind of reader ---------- */\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 padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h2) * 1.7);\n height: calc(var(--text-h2) * 1.7);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-grid__icon svg {\n display: block;\n width: 64%;\n height: 64%;\n}\n.ds-grid__name {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-grid__links {\n margin: 0;\n padding: 0 0 0 var(--space-6);\n list-style: square;\n color: var(--color-text-muted);\n}\n\n/* ---------- columns: news beside the link boxes ---------- */\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-columns__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n\n/* ---------- section heading on a rule ---------- */\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/* ---------- list: dated news ---------- */\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-5);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__date {\n min-width: 10ch;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: calc(var(--line-body) * var(--text-base) / var(--text-small));\n}\n.ds-list__title {\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/* ---------- sidebar: boxes of links ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\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}\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);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\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-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-4) var(--space-7);\n list-style: square;\n color: var(--color-text-muted);\n}\n.ds-sidebar__item {\n padding: 0;\n}\n\n/* ---------- page header: title on a strong rule ---------- */\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-2);\n border-bottom: var(--border-width-strong) 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__desc {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- tabs: the faces of one page, on a rule ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n margin: 0 0 calc(var(--border-width) * -1);\n padding: var(--space-1) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom-color: var(--color-border-strong);\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-surface);\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n padding: var(--space-2) var(--space-5);\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border-strong);\n border-top: var(--border-width-strong) var(--border-style) var(--color-accent);\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\n/* ---------- typography: a manual page ---------- */\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 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 h2:first-child {\n margin-top: 0;\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\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-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n/* A block of commands. */\n.ds-code {\n margin: var(--space-3) 0 var(--space-4);\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n line-height: var(--line-body);\n white-space: pre-wrap;\n overflow: hidden;\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-muted);\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\n/* ---------- contents box, floated right ---------- */\n.ds-aside {\n float: right;\n clear: right;\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n width: var(--size-toc);\n margin: 0 0 var(--space-5) var(--space-6);\n}\n.ds-toc {\n padding: var(--space-3) var(--space-4) 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 box-shadow: var(--shadow-panel);\n font-size: var(--text-small);\n}\n.ds-toc__title {\n margin: 0 0 var(--space-2);\n padding: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-toc .ds-toc__list {\n margin: 0;\n padding: 0 0 0 var(--space-6);\n list-style: square;\n color: var(--color-text-muted);\n}\n\n/* ---------- panel: a titled box ---------- */\n.ds-panel {\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__title {\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__rows {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-small);\n}\n.ds-panel__rows th,\n.ds-panel__rows td {\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n text-align: left;\n vertical-align: top;\n}\n.ds-panel__rows th {\n width: 44%;\n font-weight: var(--weight-bold);\n}\n\n/* ---------- table: 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 border-color: var(--color-border-strong);\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__nowrap {\n white-space: nowrap;\n}\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table__version {\n font-family: var(--font-mono);\n font-weight: var(--weight-bold);\n}\n.ds-table--plain th:first-child,\n.ds-table--plain td:first-child {\n border-left: 0;\n}\n.ds-table--plain th:last-child,\n.ds-table--plain td:last-child {\n border-right: 0;\n}\n.ds-table--plain th {\n border-top: 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-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 framed message with a bold first phrase ---------- */\n.ds-notice {\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-accent);\n border-top-width: var(--border-width-strong);\n border-radius: var(--radius-panel);\n}\n.ds-prose .ds-notice {\n display: flow-root;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-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.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\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-3);\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);\n border-radius: var(--radius-control);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n border-color: var(--color-accent);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-text-muted);\n border-color: var(--color-border-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-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\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--large {\n padding: var(--space-2) var(--space-6);\n font-size: var(--text-large);\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 text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-accent);\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}\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/* ---------- form: a label cell and a field cell per row ---------- */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\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-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: baseline;\n}\n.ds-form__label {\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-1) var(--space-4);\n min-width: 0;\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 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 font-family: var(--font-mono);\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}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-5));\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\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);\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) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n 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-5) var(--space-6);\n background: var(--color-surface);\n border: var(--border-width) dashed var(--color-border-strong);\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-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- page tools: the tiles again at the foot of every page ---------- */\n.ds-pagetools {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) 0;\n list-style: none;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-pagetools__note {\n margin: 0 0 0 auto;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n\n/* ---------- footer: small print and the little two-part badges ---------- */\n.ds-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-5);\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__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__badges {\n display: flex;\n flex: none;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__badge {\n display: flex;\n background: var(--color-canvas);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-footer__key {\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n.ds-footer__value {\n padding: 0 var(--space-3);\n}\n\n/* Components of the period: collapsible boxes, page-action menu, hint box, meter. */\n.ds-extras {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: var(--space-4) var(--space-5);\n margin: var(--space-4) 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-extras > .ds-accordion { flex: 1 1 var(--size-fold); }\n.ds-accordion {\n box-sizing: border-box;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n cursor: pointer;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-accordion[open] > .ds-accordion__summary {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body { padding: var(--space-3) var(--space-4); }\n.ds-accordion__body p { margin: 0; }\n.ds-menu { position: relative; display: inline-block; }\n.ds-menu__summary {\n cursor: pointer;\n list-style: none;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-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-weight: var(--weight-ui);\n}\n.ds-menu__summary::-webkit-details-marker { display: none; }\n.ds-menu__summary::after { content: \"\"; display: inline-block; width: 0; height: 0; border: calc(var(--text-base) * 0.3) solid transparent; border-top: calc(var(--text-base) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: calc(var(--text-base) * 0.45); vertical-align: calc(var(--text-base) * 0.12); }\n.ds-menu__list {\n position: absolute;\n z-index: 5;\n top: 100%;\n left: 0;\n min-width: var(--size-menu);\n margin: var(--space-1) 0 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-2) var(--space-4);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n white-space: nowrap;\n}\n.ds-menu__item:hover, .ds-menu__item:focus {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-tooltip { position: relative; display: inline-block; }\n.ds-tooltip__tip {\n position: absolute;\n z-index: 5;\n bottom: 100%;\n left: 0;\n width: var(--size-tip);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip, .ds-tooltip:focus-within > .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n.ds-meter { display: inline-flex; align-items: center; gap: var(--space-3); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n width: var(--size-meter);\n height: var(--size-meter-h);\n box-sizing: border-box;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n overflow: hidden;\n vertical-align: middle;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--color-accent); }\n.ds-progress::-moz-progress-bar { background: var(--color-accent); }\n\n:root {\n --size-fold: 18em;\n --size-menu: 12em;\n --size-tip: 15em;\n --size-meter: 14em;\n --size-meter-h: 1em;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: software project wiki specimen\n\n\n\n\n\n
\n\n
\n
\n \n \n \n chronoskin\n The project wiki: manual, downloads and development notes\n \n \n
\n \n
\n \n \n \n
\n
\n
\n \n
\n\n
    \n
  1. Trace:
    2. \n
  2. Start
    3. \n
  3. »
    4. \n
  4. Installing
    5. \n
  5. »
    6. \n
  6. Releases
    7. \n
  7. »
    8. \n
  8. Report a problem
    9. \n
  9. 412 pages, 3 changed today
    10. \n
\n\n \n
\n
\n\n
\n
\n

Welcome to the chronoskin wiki

\n

chronoskin is a free time server for small networks: one quiet program that keeps every clock in the building in step.

\n

This wiki is its manual and its workshop. Everything here is written by the people who run the program, and anyone with an account can improve a page. Pages that nobody has written yet show in red.

\n

\n Download version 2.4.1\n Read the manual\n new what changed in 2.4\n

\n

About the project|Installing|Download|Help and support

\n
\n \n
\n\n
\n
412
Manual pages
\n
58,300
Downloads of 2.4
\n
37
Open tickets
\n
19
Languages
\n
\n\n \n\n
\n
\n

News

\n \n

Older news...

\n
\n \n
\n\n
\n
\n\n \n
\n
\n
    \n
  1. Start
    2. \n
  2. »
    3. \n
  3. Manual
    4. \n
  4. »
    5. \n
  5. Installing
    6. \n
\n
\n
\n

Installing chronoskin

\n

Manual, chapter 2 of 9. Applies to version 2.4; last changed 2 March 2007 by Merrin

\n
Chapters of the manual [show]

1 Overview, 2 Installing, 3 Configuration, 4 Monitoring, 5 Upgrading, 6 Security, 7 Packaging, 8 Support, 9 Glossary.

See --prefixSets the install directory. The default is /usr/local.
\n
\n

Edit this page

\n
\n \n\n
\n
\n
\n

Table of contents

\n \n
\n
\n

Requirements

\n
\n \n \n \n \n \n \n
SystemAny Unix-like system, or a recent desktop
Memory4 MB
Disk6 MB with the manual
NetworkOne free port, 123 by default
RightsAdministrator, to set the clock
\n
\n
\n
\n\n
\n

[edit]Before you start

\n

You need a machine that stays switched on and a reference clock to follow: a public time server, a radio receiver or simply the most trusted machine you have. Check that no other time service is running, because two programs that both set the clock will fight over it.

\n

Upgrading from 1.9? The configuration file changed its name. Read the upgrade notes first; the steps below are for a fresh machine.

\n\n

[edit]Unpacking and building

\n

From a package

\n

Most systems carry a package. Install it with your usual tool and skip to the first run. Packages lag a few weeks behind the release list.

\n

From source

\n

Fetch the archive, unpack it and build. The default prefix is /usr/local; pass --prefix to change it.

\n
tar xzf chronoskin-2.4.1.tar.gz\ncd chronoskin-2.4.1\n./configure --prefix=/opt/chronoskin\nmake && make install
\n

The build needs only a C compiler and make. If configure stops, it says which header it could not find:

\n
    \n
  1. install the missing development package;
    2. \n
  2. remove config.cache;
    3. \n
  3. run configure again.
    4. \n
\n\n

[edit]First run

\n

Start the server once in the foreground, so that you see what it does. It should name its reference within a minute and report an offset that shrinks.

\n
    \n
  • An offset under 50 ms after ten minutes is healthy.
    • \n
  • An offset that grows means the reference cannot be reached.
    • \n
\n\n

[edit]See also

\n \n
\n
\n\n \n
\n
\n\n \n
\n
\n
    \n
  1. Start
    2. \n
  2. »
    3. \n
  3. Download
    4. \n
  4. »
    5. \n
  5. Releases
    6. \n
\n
\n
\n

Releases

\n

Every version since 1.9, newest first. Sizes are for the source archive

\n
Download
\n
\n

Download 2.4.1

\n
\n \n\n

Status: stable recommended for everyone, testing for a spare machine, withdrawn do not install, new released this month.

\n \n \n \n \n \n \n \n \n \n \n \n \n
VersionReleasedStatusSize (KB)DownloadsNotes
2.5.0-rc12007-03-09testing1,9021,140First candidate of the next branch. Roadmap for 2.5
2.4.12007-03-02stable new1,84621,774Fixes the leap second handling. Upgrade notes
2.4.02007-02-11withdrawn1,84336,526Replaced by 2.4.1 after three weeks.
2.3.62007-01-18stable1,7109,208Drift fix for virtual machines.
2.3.52006-10-27stable1,70644,015Translations updated, no code changes.
1.9.122006-08-30stable1,2043,377Last planned release of the legacy branch.
\n \n\n

Nightly builds

\n
\n

No nightly build today

\n

Last night's build did not pass its tests, so nothing was published. The log says which test failed.

\n Read the build log\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Start
    2. \n
  2. »
    3. \n
  3. Support desk
    4. \n
  4. »
    5. \n
  5. Report a problem
    6. \n
\n
\n
\n

Report a problem

\n

A report becomes a ticket that everyone can read. Leave out passwords and addresses

\n
\n
\n

How to write a good report

\n
\n\n
\n

Look before you write. Thirty-seven tickets are open. Search them first: adding a line to an existing ticket helps more than a second one.

\n

The report was not sent. It needs a version number, so that we know which code to read.

\n
\n\n
\n
\n \n
\n
\n
\n \n
\n \n As printed when the server starts\n Please give the version you are running.\n
\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n \n Wiki markup works here. Paste log lines between two lines of three braces.\n
\n
\n
\n \n Preview\n \n Cancel\n \n Discard draft\n
\n
\n\n
\n
\n

Discard this draft?

\n
\n

The summary and the description you typed will be thrown away. Nothing has been sent yet, so there is no ticket to return to.

\n
\n Keep writing\n Discard draft\n
\n
\n
\n
\n
\n
\n\n \n\n \n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.wiki-2000s.docs.s07.p03.t04.u04\",\n \"library\": \"2026.10.09-1346\",\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-7344\",\n \"short\": \"v1-wk-7344\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f6f9ed;\n --color-canvas: #ffffff;\n --color-surface: #f8f8f8;\n --color-surface-alt: #eef3e2;\n --color-surface-strong: #e0e0c0;\n --color-bar: #5b8c2a;\n --color-bar-text: #ffffff;\n --color-bar-alt: #e7edff;\n --color-bar-alt-text: #1c3d5a;\n --color-inverse: #2f4a14;\n --color-inverse-text: #f6f9ed;\n --color-text: #111111;\n --color-text-muted: #6a6a6a;\n --color-heading: #1f1f1f;\n --color-heading-alt: #3f6a12;\n --color-link: #006398;\n --color-link-quiet: #3f6a12;\n --color-link-visited: #5b4a8c;\n --color-link-hover: #1068a0;\n --color-link-active: #802b28;\n --color-border: #dddddd;\n --color-border-strong: #bbbbbb;\n --color-border-muted: #eeeeee;\n --color-accent: #e8770e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #802b28;\n --color-fill-1: #e7edff;\n --color-fill-2: #eef3e2;\n --color-fill-3: #fff3d0;\n --color-fill-4: #f0f0f0;\n --color-button: #5b8c2a;\n --color-button-text: #ffffff;\n --color-button-hover-text: #f6f9ed;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #111111;\n --color-input: #ffffff;\n --color-input-text: #111111;\n --color-input-border: #999999;\n --color-disabled: #e6e6e6;\n --color-disabled-text: #989898;\n --color-danger: #c0392b;\n --color-danger-surface: #fdecea;\n --color-success: #3f8a1f;\n --color-warning: #e8a200;\n --color-notice: #e8f0f8;\n --color-notice-text: #111111;\n --color-focus: #e8770e;\n --color-shadow: #333333;\n --color-overlay: #d8e8f0;\n}\n\n/* @part type */\n:root {\n --font-body: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-heading: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-ui: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-mono: \"Andale Mono\", \"Courier New\", Courier, monospace;\n --text-base: 14px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 30px;\n --text-h1: 25px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 2px;\n --radius-page: 0;\n --shadow-panel: 1px 1px 0 var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: 3px 3px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(to right, var(--color-page) 0, var(--color-page) 3px, color-mix(in srgb, var(--color-page), black 4%) 3px, color-mix(in srgb, var(--color-page), black 4%) 4px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 10%), var(--color-bar));\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 22%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 5%), var(--color-input) 4px);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }