{ "id": "v1-yk-1111", "long_id": "v1.y2k-futurism.portal.s01.p01.t01.u01", "name": "Y2K futurism portal, 1999 to 2003", "era": { "slug": "y2k-futurism", "code": "yk", "name": "Y2K futurism", "years": [ 1999, 2003 ], "description": "The turn of the millennium, 1999 to 2003: techno blues and silvers, glassy aqua buttons, tiny pixel-sharp type, thin tech lines and rounded capsule shapes on dark or brushed backgrounds." }, "archetype": "portal", "mode": "pure", "viewport": { "width": 1024, "fluid": false }, "summary": "The \"techno\" start page that software, music and hardware sites ran around the turn of the millennium: a fixed 740px sheet of deep blue centred on a navy screen, cut into a link column, a main column and a rail of small modules. Bars are black glass, buttons are silver capsules, section headings are small round-shouldered tabs standing on hairlines, and everything is set in 9px to 13px Arial and Verdana with one 18px headline. The shapes were drawn as images at the time and are rebuilt here with gradients, 1px borders and radii; the look gave way to wider, lighter glossy layouts from about 2004.", "url": "https://chrono.skin/s/v1-yk-1111", "preview_url": "https://chrono.skin/s/v1-yk-1111/specimen.html", "files": { "STYLE.md": "# Y2K futurism portal, 1999 to 2003\n\n## Summary\n\nThe \"techno\" start page that software, music and hardware sites ran around the turn of the millennium: a fixed 740px sheet of deep blue centred on a navy screen, cut into a link column, a main column and a rail of small modules. Bars are black glass, buttons are silver capsules, section headings are small round-shouldered tabs standing on hairlines, and everything is set in 9px to 13px Arial and Verdana with one 18px headline. The shapes were drawn as images at the time and are rebuilt here with gradients, 1px borders and radii; the look gave way to wider, lighter glossy layouts from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 740px; `.ds-page__frame` is a sheet of that width centred horizontally in the viewport (`margin: 0 auto`) with a 1px outline and `--radius-page` corners, and `--fill-page` shows on both sides and below. Do not pin it to the left edge and do not stretch it. All text sits on the sheet; nothing is written directly on the page background.\n- `.ds-page` pads the viewport by `--space-5` (10px) above and `--space-3` (4px) at the sides. Order from the top: `.ds-nav` (utility strip with search, masthead with wordmark and status read-out, glass link bar), then `.ds-page__columns`, then `.ds-footer`. The home page has no breadcrumb.\n- `.ds-page__columns` is three columns padded `--space-4` from the sheet edge: `--size-sidebar` 144px (`.ds-sidebar`), a fluid main column (`.ds-page__main`, 400px at this width) and `--size-rail` 164px (`.ds-page__rail`, a stack of `.ds-panel`). Column gutters and the gap between stacked blocks are both `--space-4` (6px). Columns start at the top and do not stretch to equal height; fill the link column and the rail so that all three end close together, and give a long article a page of its own; `.ds-page__wide` is a full-width row below the columns for a block that has to run the width of the sheet.\n- Inner pages (every page below the home page) keep the same sheet, header and footer but have no hero and no rail. `.ds-breadcrumb` sits directly under the link bar, as the first thing of the page, across the full sheet. Below it `.ds-page__columns--inner` has two columns: the 144px `.ds-sidebar`, now holding the links of the current section, and a 570px main column. The main column opens with `.ds-page-header` in place of the hero, then an optional `.ds-stat` row, then the working blocks stacked `--space-4` apart: `.ds-tabs` touching the `.ds-table` or list they switch, and each form or further block under its own `.ds-section` tab. The link column of an inner page is a `.ds-page__side` stack: the `.ds-sidebar` first, then one to four small `.ds-panel` modules that belong to the page, so that it ends near the main column.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs and navigation capsules; `--space-2` 2px is the vertical padding of bars, title strips, tabs and table cells; `--space-3` 4px is the padding of list rows and notices and the gap between grid cells and stat cells; `--space-4` 6px is the side padding of cells and panels, the column gutter and the gap between blocks; `--space-5` 10px is the side padding of bars, buttons and tabs, the gap between paragraphs and the padding of the hero and dialog; `--space-6` 14px is list indent only. There is no step above 14px.\n- Fixed sizes: `--size-figure` 96px is the hero ring graphic; `--size-mark` 26px the tile of the brand mark; `--size-search` 104px a search or e-mail input in a bar or rail; `--size-field` 180px a form text input; `--size-label` 96px the label column of a form; `--size-area` 56px the height of a textarea; `--size-dialog` 300px a dialog; `--size-led` 5px a status lamp; `--size-dot` 6px the pitch of the dot-matrix runs.\n- Blocks are separated by a 6px gutter and marked by a 1px outline, a title bar or a tab on a hairline. Rows inside a block touch.\n- Views. The specimen is one example site, a download portal, in five views. `home` is the front page: link column, hero, latest list, top downloads table, channel grid and the rail. `downloads` is the list page: the top 50 as a tabbed table with pagination. `feature` is an article page: the prose with a row of further links, and no page header because the article carries its own title. `mylist` is the member's download list: page header, stats, notices, tabbed table with status badges, the button row, the remove dialog it opens and the empty state of the files sent in. `submit` is the form page for sending a file in.\n\n## Typography and colour roles\n\n- `--font-body` and `--font-heading` are Arial, Helvetica. `--font-ui` is Verdana, used for navigation, tabs, buttons, inputs, table heads and all 9px text. `--font-mono` is Courier New for code and for numeric table columns. Several references set their small text in Geneva and drew bar labels in commercial extended faces; Verdana bold uppercase is the stand-in.\n- `--text-base` 11px is body text and links. `--text-small` 9px (Verdana) is meta lines, the utility strip, breadcrumb, footer, table heads, badges, hints and pagination. `--text-ui` 10px bold uppercase (`--ui-transform`, `--weight-ui` 700) is the navigation bar, tabs and buttons. `--text-large` 13px is lead paragraphs. `--text-h3` 11px, `--text-h2` 13px, `--text-h1` 16px, `--text-display` 18px: 18px bold is the largest text and is used for the wordmark and the hero title only.\n- Line heights are `normal`. Headings are bold, not uppercased, not tracked.\n- `--color-page` #000030 is outside the sheet. `--color-canvas` and `--color-surface` #003399 are the sheet and panel bodies. `--color-surface-alt` #1048b8 fills the link column, forms, stat cells, alternate table rows and the breadcrumb strip. `--color-surface-strong` #000030 is darker than the sheet and is used for title strips inside the link column.\n- `--color-bar` #000000 with `--color-bar-text` white, filled by `--fill-bar` (a two-band glass gradient), is the navigation bar, panel and dialog titles, table heads and the current tab. `--color-bar-alt` #1850c8 with white text, filled by `--fill-bar-alt`, is the utility strip, section tabs, inactive tabs, `.ds-panel--alt` titles and the footer strip. `--shadow-text`, a hard 1px offset, is applied to text on these two bars only, not to buttons.\n- `--color-inverse` #c0c0d0 with `--color-inverse-text` #000030 is the silver block: one `.ds-panel--inverse` per page and the closing band of the footer. Links inside it take the inverse text colour.\n- `--color-text` #e0e0e8; `--color-text-muted` #a8a8b8 for dates, counts and captions; `--color-heading` white; `--color-heading-alt` #ffcc00 for h3.\n- `--color-link` white, underlined (`--link-decoration`): links in running text, list titles, table cells. `--color-link-quiet` #d0d0d0 without underline: link column, breadcrumb, grid sub-links, tool links in tables, pagination. Links on bars take the bar text colour without underline. Hover #ffcc00, active #98ff00, visited #a8a8b8.\n- `--color-accent` #ffcc00 with `--color-accent-text` black, filled by `--fill-accent`, is the current navigation capsule, the badge, the hero kicker and the current page number. `--color-accent-alt` #98ff00 is a lamp colour only.\n- `--color-fill-1` to `--color-fill-4` are four blues of the sheet's family (#0840a8, #1048b8, #1850c8, #0038a0) for the hero and grid cells.\n- The primary button is `--color-button` #d0d0d0 with black text under the capsule gloss of `--fill-button`; the secondary is `--color-button-secondary` #1048b8 with white text. Inputs are white with black text and a `--color-input-border` line, with the same capsule radius.\n- Each text colour is used only on its own fill: bar text on the bar, accent text on the accent, button text on the button, inverse text on the inverse block, notice text on the notice. `--color-danger` #cc6633 is text only on `--color-danger-surface` #000000 (error notice, field error chip) and otherwise a rim or lamp colour. `--color-success` #98ff00 and `--color-warning` #ffcc00 are lamp and rim colours and never carry or colour text.\n- One-off values built in `components.css` without a token: `dotted` on the empty-state outline, `radial-gradient()` dot patterns sized by `--size-dot`, and `calc()` of two layout tokens for the form action offset.\n- Visited, hover, active and focus colours cannot be measured on a static capture; they are colours measured elsewhere in the references assigned to those roles.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Wrap everything in `.ds-page__frame`. `.ds-page__columns` holds `.ds-sidebar`, `.ds-page__main` and `.ds-page__rail`; `.ds-page__columns--inner` is the two-column inner page. `.ds-block` groups a section tab or tab row with the block it heads so they touch. `.ds-page__side` is the stack in the link column of an inner page (sidebar, then small panels). `.ds-page__wide` is a full-width row under the columns. `.ds-view` wraps one screen of the specimen; `.ds-view--home` marks the first.\n- `.ds-nav`: site header. `.ds-nav__utility` is the blue strip with `.ds-nav__utility-links` (`.ds-nav__utility-link`) and the `.ds-nav__search` form (`.ds-nav__search-label`, a small input, a button). `.ds-nav__masthead` holds `.ds-nav__brand` (the `.ds-brand` over a 9px `.ds-nav__tagline`) and `.ds-nav__status`, a framed 9px read-out. `.ds-nav__links` is the glass bar of `.ds-nav__link` entries; `is-current` turns the entry into an accent capsule. The three `.ds-view` rules show one view at a time, and one rule per view lights the navigation entry whose `href` names the view that is showing (the home entry when none is named); in a real multi-page site set `is-current` on the entry instead.\n- `.ds-brand`: the site's mark and name, at the left of the masthead, linking home. `.ds-brand__mark` is a 26px glass capsule tile dressed like the primary button (`--fill-button` gloss, `--color-button-text` for the drawing, 1px `--color-border-strong` rim, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px wordmark in `--color-heading`, with the heading font, weight, tracking and transform tokens. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo, keeping the tile.\n- `.ds-breadcrumb`: inner pages only. 9px trail on a strip under the link bar, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-sidebar`: the left link column, outlined. Repeats `.ds-sidebar__title` (dark strip, bold 11px) over a `.ds-sidebar__list` of `.ds-sidebar__item` rows holding `.ds-link--quiet` links; mark a promoted entry with a `.ds-badge` after the link.\n- `.ds-section`: the heading of a block in the main column: `.ds-section__title`, a small tab with rounded shoulders, standing on a hairline, with an optional `.ds-section__more` link at the right end of the line (written with a trailing `>>`).\n- `.ds-hero`: the lead module of the home page, one per page. `.ds-hero__body` is two columns: text and `.ds-hero__figure`, an inline SVG ring graphic. The text is `.ds-hero__kicker` (accent capsule, 9px), `.ds-hero__title` (18px), `.ds-hero__text` (13px) and `.ds-hero__actions` with one `.ds-button` and one link. `.ds-hero__dots` closes it with a dot-matrix run. No photograph, no full-width banner.\n- `.ds-page-header`: head of an inner page, first thing in the main column, once per page. `.ds-page-header__title` (16px bold, the page's only h1) over one line of `.ds-page-header__text`, with `.ds-page-header__action` at the right holding one `.ds-button`; a hairline closes it.\n- `.ds-stat`: the row of three to five summary figures under the page header. `.ds-stat` is the row; each figure is a `.ds-stat__item`, an outlined cell holding a 16px bold `.ds-stat__value` over a 9px uppercase `.ds-stat__label`. No icons, no trend arrows; do not enlarge the figure.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose--columns` sets it in two columns where it runs the width of the sheet; `.ds-prose__lead` for the 13px first paragraph and `.ds-prose__byline` for the 9px credit.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the pale, not underlined link for navigation inside content. `.ds-links` lays a row of links out.\n- `.ds-button`: glass capsule, 10px bold uppercase, for the main action. `.ds-button--secondary` is the blue capsule. `.ds-button--danger` is the secondary capsule with a rim and a lamp in `--color-danger`, for remove and delete; the label keeps the secondary text colour. `disabled` or `is-disabled` flattens it to `--color-disabled`; `is-hover` brightens the gloss. Group with `.ds-buttons`.\n- `.ds-form`: outlined block of `.ds-form__row` pairs: bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small` 104px, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the button row aligned under the controls.\n- `.ds-table`: outlined data table: glass `th` in 9px uppercase, rows alternating the two surfaces without rules, `.ds-table__num` right-aligned in the monospace for figures. `.ds-table__caption` is the 9px line under it.\n- `.ds-tabs`: row of `.ds-tabs__tab` links with rounded shoulders on a 2px rule in the bar colour; `is-current` takes the bar fill and is 2px taller. Use it directly above the list or table it switches.\n- `.ds-list`: item list. Each `.ds-list__item` has a bold underlined `.ds-list__title`, a `.ds-list__text` summary and a 9px `.ds-list__meta` line; rows touch and are divided by a faint hairline. `.ds-list--compact` is the one-line variant for rail panels. Add `.ds-list--noted` to it when the note after the title is longer than a count (a file size, a date): the note then takes its own line under the title.\n- `.ds-panel`: rail module: outlined, `.ds-panel__title` glass bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list`, `.ds-panel__small`, `.ds-panel__option` (poll choice), `.ds-panel__field` (input with button), `.ds-panel__actions`. `.ds-panel--alt` has the blue title; `.ds-panel--inverse` is the silver block with a 13px title, at most one per page.\n- `.ds-grid`: two-column directory of `.ds-grid__cell` modules 4px apart, tinted with `--1`, `--2`, `--3` or the base fill; each has a 13px `.ds-grid__title` link, which keeps `--color-heading` because a cell fill may be close to the link colour, and a 9px `.ds-grid__text` line of quiet sub-links.\n- `.ds-badge`: 9px bold uppercase accent capsule (\"NEW\"). `.ds-badge--count` is a bare muted count. Status labels are a plain outlined chip with a lamp: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `.ds-badge--alt` for a neutral \"live\" marker; the lamp and rim take the status colour, the word stays in `--color-text`. One word each, in a table's status column or after a title. The lamp has a 1px ring in `--color-text`, so it shows on a chip of any colour.\n- `.ds-notice`: one-line message in an outlined box, starting with a `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rim on the danger surface. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small outlined boxes: `.ds-pagination__link` on quiet links (`<< Previous`, numbers, `Next >>`), the current page as accent-filled `.ds-pagination__current`.\n- `.ds-dialog`: a small window in the page flow: 300px, 2px outline, glass `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat dark area it sits on. No blur, no soft shadow, no floating.\n- `.ds-empty`: dotted-outline block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: `.ds-footer__bar`, a centred strip of `.ds-footer__link` entries, then `.ds-footer__band`, the inverse band with the copyright line and `.ds-footer__band-link` links.\n\n## Never\n\n- `row-gap <= 2px`: rows of lists and tables touch.\n- `block-gap <= 14px`: neighbouring blocks sit 6px apart.\n- `content-width <= 740px`: text stays inside the fixed sheet.\n- `palette-colours <= 18`: navy, four blues, black, silver, white, one yellow, plus lime and orange lamps.\n- `font-size <= 18px`: the wordmark and the hero title are the largest text.\n- `font-size >= 9px`: small text is 9px and nothing is smaller.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 3`: Arial, Verdana for small and interface text, a monospace for code and figures.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 20%`: only interface labels are uppercased: navigation, tabs, buttons, table heads, badges.\n- `border-radius <= 10px`: tabs and panels are 6px, the sheet, hero and grid cells 10px; capsules are shapes.\n- `border-width <= 2px`: hairlines everywhere, 2px on the dialog frame and the tab rule.\n- `box-shadow = none`: nothing casts a box shadow; depth is gloss and outline.\n- `gradient-fills <= 16%`: gradients are for bars, title strips, tabs, buttons and accent capsules; surfaces and cells are flat.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new rail module copies `.ds-panel` (1px outline, glass title in `--fill-bar` or `--fill-bar-alt`, body padded `--space-4`); a new main-column block starts with a `.ds-section` tab on its hairline and puts flat content under it; a new inner page copies one of the specimen's inner views (breadcrumb, `.ds-page-header`, blocks); a new control copies `.ds-button` or `.ds-form__input` with its capsule radius; a new status mark copies the lamp chip of `.ds-badge--success`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Pair every text token with its own fill and with no other, and never use a status colour as a text colour. Keep text between 9px and 13px apart from 16px page titles and one 18px headline, keep modules small and 6px apart, and separate things with an outline, a bar or a hairline, never with whitespace, soft shadows or large cards.\n", "components.css": "/* Layout tokens (structure part). Taken from the references' block widths,\n gutters and cell paddings. */\n:root {\n --size-page: 740px;\n --size-sidebar: 144px;\n --size-rail: 164px;\n --size-figure: 96px;\n --size-mark: 26px;\n --size-search: 104px;\n --size-label: 96px;\n --size-field: 180px;\n --size-area: 56px;\n --size-dialog: 300px;\n --size-led: 5px;\n --size-dot: 6px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 14px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) var(--space-3);\n background: var(--fill-page);\n background-color: var(--color-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/* The fixed sheet, centred in the window. Everything that carries text sits\n on it; the page colour only shows around it. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr) var(--size-rail);\n gap: var(--space-4);\n align-items: start;\n padding: var(--space-4);\n}\n.ds-page__main,\n.ds-page__side,\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n/* Inner page: the link column stays, the rail goes. The link column is a\n stack (.ds-page__side) of the section's links and small modules. */\n.ds-page__columns--inner {\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n}\n.ds-block {\n display: block;\n}\n/* A full-width row under the columns, for the home page's feature. */\n.ds-page__wide {\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* ---------- views ---------- */\n/* The specimen is one example site; one view 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/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n\n/* ---------- brand ---------- */\n/* The site's mark and name. The mark sits on a small tile dressed like\n the primary button, so every palette and surface reskins it. */\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 box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-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\n/* ---------- nav ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__utility {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-5);\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-shadow: var(--shadow-text);\n}\n.ds-nav__utility-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__utility-link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__utility-link:hover,\n.ds-nav__utility-link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search-label {\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__masthead {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n}\n.ds-nav__tagline {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* Small status read-out at the right of the masthead: a framed line of\n label and value pairs. */\n.ds-nav__status {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-5);\n color: var(--color-bar-text);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The current section is a lit capsule set into the bar. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#downloads:target) .ds-nav__link[href=\"#downloads\"],\n.ds-page:has(#feature:target) .ds-nav__link[href=\"#feature\"],\n.ds-page:has(#mylist:target) .ds-nav__link[href=\"#mylist\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-2) var(--space-5);\n list-style: none;\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n overflow: hidden;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) 0 var(--space-3);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) var(--space-4);\n}\n\n/* ---------- section head ---------- */\n/* A small tab that sits on a thin line: the heading of a block. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-section__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-section__more {\n padding: 0 var(--space-2) var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- hero ---------- */\n/* A tinted module with a ring graphic, the lead title and one capsule\n button; a dot-matrix run closes it. */\n.ds-hero {\n overflow: hidden;\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-hero__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-figure);\n gap: var(--space-5);\n align-items: center;\n padding: var(--space-5);\n}\n.ds-hero__kicker {\n display: inline-block;\n margin: 0 0 var(--space-3);\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\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__text {\n margin: var(--space-2) 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-hero__figure {\n display: block;\n width: var(--size-figure);\n height: var(--size-figure);\n color: var(--color-border-strong);\n}\n.ds-hero__dots {\n height: var(--size-dot);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background-image: radial-gradient(circle, var(--color-border-strong) 34%, transparent 40%);\n background-size: var(--size-dot) var(--size-dot);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-2) 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* A row of read-out cells: figure over a small label. */\n.ds-stat {\n display: flex;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-3);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: var(--space-4) var(--space-2);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); color: var(--color-heading-alt); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose ul {\n list-style: square;\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n/* The article set in two columns, where it runs the width of the sheet. */\n.ds-prose--columns {\n column-count: 2;\n column-gap: var(--space-6);\n}\n.ds-prose--columns p,\n.ds-prose--columns ul,\n.ds-prose--columns ol {\n break-inside: avoid;\n}\n.ds-prose--columns h1,\n.ds-prose--columns h2,\n.ds-prose--columns h3 {\n break-after: avoid;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n.ds-prose__byline {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n/* The glass capsule that was drawn as an image. */\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-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\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}\n/* Destructive action: the secondary capsule with a danger-coloured rim and\n lamp. The label keeps the secondary text colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-danger);\n}\n.ds-button--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n background: var(--color-danger);\n border-radius: var(--radius-pill);\n vertical-align: middle;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-2) 0;\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n margin: 0;\n padding: var(--space-1) var(--space-4);\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 line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n font-size: var(--text-small);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n/* Error text always sits on its own chip of the error surface. */\n.ds-form__error {\n display: inline-block;\n margin: var(--space-2) 0 0;\n padding: 0 var(--space-4);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-danger);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) 0 var(--space-2) calc(var(--size-label) + var(--space-4));\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table td.ds-table__num {\n font-family: var(--font-mono);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* Round-shouldered tabs standing on a rule in the bar colour. */\n.ds-tabs {\n display: flex;\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-strong) var(--border-style) var(--color-bar);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n padding-top: var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n}\n.ds-list__meta {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* One line per item, for rails. */\n.ds-list--compact .ds-list__item {\n padding: var(--space-2) var(--space-4);\n}\n.ds-list--compact .ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list--compact .ds-list__title {\n font-weight: var(--weight-body);\n}\n.ds-list--compact .ds-list__meta {\n display: inline;\n}\n/* A compact list whose note is longer than a count: the note takes its own\n line under the title instead of breaking in the middle. */\n.ds-list--noted .ds-list__meta {\n display: block;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\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-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Inverted panel: the one block in the opposite tone. Everything in it,\n links included, takes the inverse text colour. */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-panel__title {\n background: transparent;\n color: var(--color-inverse-text);\n font-size: var(--text-h2);\n text-shadow: none;\n}\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited,\n.ds-panel--inverse .ds-link:hover,\n.ds-panel--inverse .ds-link.is-hover {\n color: var(--color-inverse-text);\n}\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-panel__option {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-panel__field {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- grid ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell--1 { background: var(--color-fill-1); }\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__title {\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n/* Titles keep the heading colour: a cell fill may be close to the link\n colour. */\n.ds-grid__title .ds-link,\n.ds-grid__title .ds-link:visited {\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n/* Status labels: a lamp in the status colour on a plain chip. The lamp has\n a ring in the text colour so that it shows on any chip, and the status\n colour never carries text. */\n.ds-badge--alt,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-body);\n}\n.ds-badge--alt::before,\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: var(--radius-pill);\n vertical-align: middle;\n}\n.ds-badge--alt { border-color: var(--color-accent-alt); }\n.ds-badge--success { border-color: var(--color-success); }\n.ds-badge--warning { border-color: var(--color-warning); }\n.ds-badge--danger { border-color: var(--color-danger); }\n.ds-badge--alt::before { background: var(--color-accent-alt); }\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* ---------- notice ---------- */\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-border-strong);\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.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 justify-content: center;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-pagination__link,\n.ds-pagination__current {\n display: block;\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-pagination__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\n/* ---------- dialog ---------- */\n/* A small window in the page flow: title bar, message, capsules. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\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-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\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-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) dotted var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: block;\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-5);\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-shadow: var(--shadow-text);\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The closing band in the inverse tone, holding the copyright line. */\n.ds-footer__band {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__band-link,\n.ds-footer__band-link:visited {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration);\n}\n", "specimen.html": "\n\n\n\n\nY2K futurism portal, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n \n chronoskin\n \n downloads, sound and hardware for the wired home\n
\n

12,408 members onlinebuild 2.6

\n
\n \n
\n\n
\n
\n\n \n\n
\n\n
\n
\n
\n Version 2.6 is out\n

Your whole collection, one small window.

\n

The chronoskin player now reads every common format, wears any skin and fits on a floppy.

\n
\n Download now\n What is new >>\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n\n
\n \n
    \n
  • \n Pulse visualiser pack 3 New\n Twelve new scopes and tunnels that follow the beat, tuned for slower graphics cards.\n 1.2 MB | posted 31 May by the sound desk | 86 comments\n
    • \n
  • \n Chromeshell desktop theme\n Brushed panels, blue lamps and a matching set of 40 icons.\n 640 KB | posted 30 May by the skins desk | 41 comments\n
    • \n
  • \n Modem tune-up utility 1.4\n Finds the settings that keep a 56k line steady during long transfers.\n 310 KB | posted 29 May by the hardware desk | 19 comments\n
    • \n
  • \n Feature: building a jukebox from an old desktop\n A retired machine, a sound card and one free evening put every disc behind one remote.\n posted 31 May by the hardware desk | 54 comments\n
    • \n
\n
\n\n
\n
\n

Top downloads

\n full chart >>\n
\n \n \n \n \n \n \n \n \n \n \n
TitleSizeThis week
chronoskin player 2.61.4 MB48,210
Pulse visualiser pack 31.2 MB19,774
Chromeshell theme640 KB12,035
Tracker studio lite2.8 MB9,460
\n
\n\n
\n
\n

Channels

\n all channels >>\n
\n
\n
\n
\n

Sound

\n

Players, Encoders, Radio

\n
\n
\n

Desktop

\n

Themes, Icons, Savers

\n
\n
\n

Handhelds

\n

Organisers, Phones, Sync

\n
\n
\n

Web tools

\n

Editors, Transfer, Chat

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

Member login

\n
\n

Sign in to keep a download list and post on the boards.

\n Sign in\n

Not a member? Join free

\n
\n
\n\n
\n

Now on live radio

\n \n
\n\n
\n

Quick poll

\n
\n

How do you connect at home?

\n \n \n \n
\n \n Results\n
\n
\n
\n\n
\n

Newsletter

\n
\n

New releases every Friday.

\n
\n \n \n
\n

We never pass addresses on.

\n
\n
\n\n
\n

On the boards

\n \n
\n\n
\n

Top rated

\n \n
\n\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Downloads
    4. \n
  4. >
    5. \n
  5. Top 50
    6. \n
\n
\n\n
\n \n
\n

Your list

\n
\n

3 files queued, 14 listed.

\n Open list\n
\n
\n
\n\n
\n\n
\n
\n

Top 50 downloads

\n

The files members fetched most, counted every night at midnight.

\n
\n
\n Submit a file\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
No.TitleDepartmentSizeThis week 
11chronoskin player 2.6 NewPlayers1.4 MB48,210Add to list
12Pulse visualiser pack 3Visualisers1.2 MB19,774Add to list
13Chromeshell themeDesktop themes640 KB12,035Add to list
14Tracker studio liteWeb tools2.8 MB9,460Add to list
15Modem tune-up utility 1.4Drivers310 KB8,902Add to list
16Starfield screen saverScreen savers220 KB7,118Add to list
17Pocket sync 3Handheld software880 KB6,340Add to list
18Night drive skinDesktop themes310 KB5,871Add to list
19Transfer agent 1.1Web tools540 KB5,206Add to list
20Scope tunnel plug-inVisualisers96 KB4,655Add to list
\n \n
\n\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Features
    4. \n
  4. >
    5. \n
  5. Building a jukebox
    6. \n
\n
\n\n
\n \n
\n

Used in this feature

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

Feature

\n back to the front page >>\n
\n
\n

Building a jukebox from an old desktop

\n

By the hardware desk, 31 May

\n

A retired machine, a sound card and one free evening are enough to put every disc you own behind a single remote.

\n

What you need

\n

Any processor from the last four years will do. Spend the money on disk space instead: a full shelf of discs needs about twenty gigabytes.

\n
    \n
  • A desktop with a spare drive bay
    • \n
  • A sound card with line out
    • \n
  • A network card or a long cable
    • \n
\n

Setting it up

\n

Copy the discs one shelf at a time and let the player name the tracks. Keep the machine out of sight: it only needs power, the network and a cable to the amplifier.

\n

Checking the output

\n

Start the player from a prompt with chronoskin --test-tone. A steady tone on both speakers means the card is set up.

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

Read next

\n
\n

\n Encoders compared\n Getting more from 56k\n Your first home network\n Fetch the player\n Front page\n

\n
\n\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Downloads
    4. \n
  4. >
    5. \n
  5. My download list
    6. \n
\n
\n\n
\n \n
\n

Now fetching

\n
\n

Starfield screen saver, 41% of 220 KB at 4.1 KB/s.

\n \n
\n
\n
\n

Mirror in use

\n \n
\n
\n

Disk space

\n
\n

38.2 MB fetched this month. Finished files stay listed for 30 days.

\n

How the queue works

\n
\n
\n
\n

On the boards

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

My download list

\n

Files you have queued, fetched or lost along the way.

\n
\n
\n Add a file\n
\n
\n\n
    \n
  • 14Files listed
    • \n
  • 38.2 MBFetched this month
    • \n
  • 3In the queue
    • \n
  • 4.1 KB/sAverage speed
    • \n
\n\n
\n

Note: The file servers restart on Sunday between 02:00 and 04:00.

\n

Error: The mirror did not answer for Tracker studio lite. Pick another one and try again.

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
FileDepartmentSizeStatus 
chronoskin player 2.6Players1,412 KBFinishedFetch again
Pulse visualiser pack 3Visualisers1,208 KBQueuedStart
Chromeshell themeDesktop themes640 KBFinishedFetch again
Tracker studio liteWeb tools2,790 KBBrokenRemove
Modem tune-up 1.4Drivers310 KBFinishedFetch again
\n
\n \n \n \n \n
\n
\n\n
\n
\n

Remove from list

\n
\n

Take Tracker studio lite off your download list? The file itself stays on your disk.

\n
\n Remove\n Keep it\n
\n
\n
\n
\n\n
\n
\n

Sent in by you

\n submit a file >>\n
\n
\n

You have not sent in a file yet.

\n Submit a file\n
\n
\n\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Downloads
    4. \n
  4. >
    5. \n
  5. Submit a file
    6. \n
\n
\n\n
\n \n
\n

House rules

\n
\n
    \n
  • Your own work only.
    • \n
  • Zip files, 3 MB at most.
    • \n
  • A read-me in plain text.
    • \n
  • No installers that change system files.
    • \n
\n

The desk checks every file. Allow two days.

\n
\n
\n
\n

Listed this week

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

Submit a file

\n

Send your skin, plug-in or utility to the desk for listing.

\n
\n
\n Back to my list\n
\n
\n\n

Error: One field needs another look before the file can be sent.

\n\n
\n
\n

File details

\n how listing works >>\n
\n
\n
\n \n
\n
\n
\n \n
\n \n Enter a complete address.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.portal.s01.p01.t01.u01\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"y2k-futurism\",\n \"years\": [\n 1999,\n 2003\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-1111\",\n \"short\": \"v1-yk-1111\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000030;\n --color-canvas: #003399;\n --color-surface: #003399;\n --color-surface-alt: #1048b8;\n --color-surface-strong: #000030;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #1850c8;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #c0c0d0;\n --color-inverse-text: #000030;\n --color-text: #e0e0e8;\n --color-text-muted: #a8a8b8;\n --color-heading: #ffffff;\n --color-heading-alt: #ffcc00;\n --color-link: #ffffff;\n --color-link-quiet: #d0d0d0;\n --color-link-visited: #a8a8b8;\n --color-link-hover: #ffcc00;\n --color-link-active: #98ff00;\n --color-border: #1850c8;\n --color-border-strong: #808098;\n --color-border-muted: #0840a8;\n --color-accent: #ffcc00;\n --color-accent-text: #000000;\n --color-accent-alt: #98ff00;\n --color-fill-1: #0840a8;\n --color-fill-2: #1048b8;\n --color-fill-3: #1850c8;\n --color-fill-4: #0038a0;\n --color-button: #d0d0d0;\n --color-button-text: #000000;\n --color-button-hover-text: #000030;\n --color-button-secondary: #1048b8;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808098;\n --color-disabled: #404068;\n --color-disabled-text: #a8a8b8;\n --color-danger: #cc6633;\n --color-danger-surface: #000000;\n --color-success: #98ff00;\n --color-warning: #ffcc00;\n --color-notice: #000030;\n --color-notice-text: #e0e0e8;\n --color-focus: #ffcc00;\n --color-shadow: #000000;\n --color-overlay: #000030;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Verdana, Geneva, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 9px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\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: 0;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 9px;\n --radius-panel: 6px;\n --radius-pill: 7px;\n --radius-page: 10px;\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: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: linear-gradient(to bottom, color-mix(in srgb, var(--color-page) 82%, white) 0, var(--color-page) 220px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 62%, white) 0, color-mix(in srgb, var(--color-bar) 86%, white) 48%, var(--color-bar) 52%, color-mix(in srgb, var(--color-bar) 88%, black) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt) 78%, white) 0, var(--color-bar-alt) 55%, color-mix(in srgb, var(--color-bar-alt) 86%, black) 100%);\n --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse) 55%, white) 0, var(--color-inverse) 50%, color-mix(in srgb, var(--color-inverse) 86%, black) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 55%, white) 0, var(--color-accent) 60%);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 50%, white) 0, color-mix(in srgb, var(--color-button) 84%, white) 46%, var(--color-button) 52%, color-mix(in srgb, var(--color-button) 80%, white) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 35%, white) 0, color-mix(in srgb, var(--color-button) 70%, white) 46%, color-mix(in srgb, var(--color-button) 88%, white) 52%, color-mix(in srgb, var(--color-button) 65%, white) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary) 68%, white) 0, var(--color-button-secondary) 52%, color-mix(in srgb, var(--color-button-secondary) 86%, white) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }