{ "id": "v1-yk-2122", "long_id": "v1.y2k-futurism.portal.s02.p01.t02.u02", "name": "Y2K futurism console, 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": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The \"console\" page that file-sharing, net radio and player sites ran around the turn of the millennium: the whole site is dressed as one machine, a 760px housing of bevelled grey metal on a black screen with a khaki sheet set into it. A header device carries the wordmark and a small display window, a strip of capsule keys under it is the navigation, and the body is a wide column of plated modules beside one rail of small ones. The metal was drawn as images at the time and is rebuilt here with tube gradients, 1px lines and hard bevels; the look gave way to lighter glossy layouts from about 2004.", "url": "https://chrono.skin/s/v1-yk-2122", "preview_url": "https://chrono.skin/s/v1-yk-2122/specimen.html", "files": { "STYLE.md": "# Y2K futurism console, 1999 to 2003\n\n## Summary\n\nThe \"console\" page that file-sharing, net radio and player sites ran around the turn of the millennium: the whole site is dressed as one machine, a 760px housing of bevelled grey metal on a black screen with a khaki sheet set into it. A header device carries the wordmark and a small display window, a strip of capsule keys under it is the navigation, and the body is a wide column of plated modules beside one rail of small ones. The metal was drawn as images at the time and is rebuilt here with tube gradients, 1px lines and hard bevels; the look gave way to lighter glossy layouts from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 760px; `.ds-page__frame` is one housing of that width centred horizontally in the viewport (`margin: 0 auto`), outlined by 1px and rounded by `--radius-page`, with `--fill-page` showing on both sides and below. Do not pin it to the left edge and do not stretch it. All text sits on the housing; nothing is written directly on the page background.\n- `.ds-page` pads the viewport by `--space-6` (14px) above and `--space-3` (4px) at the sides. Order from the top: `.ds-nav` (the housing with wordmark and display window, then the strip of capsule keys with the search at its right end), `.ds-page__columns`, `.ds-footer`. There is no utility strip above the wordmark and no link column on the left.\n- `.ds-page__columns` is two columns padded `--space-5` (10px) from the housing edge: a fluid main column (`.ds-page__main`, 528px at this width) on the left and `--size-rail` 190px (`.ds-page__rail`) on the right. The gutter and the gap between stacked blocks are both `--space-5`. Columns start at the top and do not stretch to equal height.\n- Home page main column, in order: `.ds-hero` (the screen with its transport strip), `.ds-grid` (four channel keys in one row), then blocks, each a `.ds-section` strip joined to a `.ds-section__body`. The rail stacks `.ds-panel` modules and one `.ds-sidebar` link block.\n- Inner pages (every page below the home page) keep the housing, the capsule strip, both columns and the footer, and have no hero and no grid. `.ds-breadcrumb` sits directly under the capsule strip, as the first thing of the page, across the full housing. The main column opens with `.ds-page-header`, a plate with the title, in place of the hero, then an optional `.ds-stat` plate, then the working blocks `--space-5` apart: `.ds-tabs` joined to the `.ds-section__body` holding the table it switches, and each form under its own `.ds-section` strip. The rail opens with the `.ds-sidebar` of the current section, then notices and small modules.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs, capsule keys and tab segments; `--space-2` 2px is the vertical padding of strips, title bars, table cells and rail rows; `--space-3` 4px is the padding of list rows, notices and the capsule strip, and the gap between capsules; `--space-4` 6px is the padding of panels and grid cells and the gap between grid cells and buttons; `--space-5` 10px is the side padding of strips and cells, the column gutter and the gap between blocks; `--space-6` 14px is the padding of the housing, the screen and prose, and list indent. There is no step above 14px.\n- Fixed sizes: `--size-display` 176px is the display window in the housing; `--size-figure` 120px by `--size-figure-height` 72px the level-meter graphic on the screen; `--size-mark` 28px the tile of the brand mark; `--size-icon` 30px the channel icons and the index column of the list; `--size-search` 96px a search or e-mail input in a strip or rail; `--size-field` 200px a form text input; `--size-label` 104px the label column of a form; `--size-area` 56px the height of a textarea; `--size-dialog` 320px a dialog; `--size-led` 5px a lamp.\n- Blocks are separated by a 10px gutter and marked by a 1px outline with a strip or title bar on top. Rows inside a block touch and are divided by hairlines.\n- Views. The specimen is one example site, a net radio console, in five views. `home` is the front page: the screen, four channel keys, the list of new stations, the table of what is on air, and the rail of modules. `stations` is the list page: every station as a tabbed table with pagination. `presets` is the member's page: page header, stats, tabbed table with status badges and the button row, the remove dialog it opens, the empty state of saved mixes, and notices in the rail. `suggest` is the form page for proposing a station. `guide` is an article page from the workbench: the prose and a row of further links, with no page header because the article carries its own title.\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- Arial throughout, with a heavy cut for headings: `--font-heading` is Arial Black at `--weight-heading` 900, uppercased by `--heading-transform`; `--font-body` and `--font-ui` are Arial. `--font-mono` (Courier) is used for the display window, numeric table columns, the list index and stat figures, as the read-out face of the machine. The references drew their bar labels in a commercial extended face; Arial Black uppercase is the stand-in.\n- `--text-base` 13px for body text, the largest body size of the era; `--text-ui` 11px bold for capsule keys, tab segments, buttons and form labels, not uppercased; `--text-small` 10px for meta lines, read-outs, table heads, the breadcrumb and the footer.\n- `--text-h3` 11px, `--text-h2` 13px, `--text-h1` 16px, `--text-display` 18px: headings are told apart by weight and capitals, not by size. 18px is the wordmark and the hero title only. Line heights are `normal`; nothing is tracked.\n- Every link is underlined, quiet and navigation links included (`--link-decoration` and `--link-decoration-quiet` are both `underline`).\n- Machined grey and khaki on black, with one aqua and one blue. `--color-page` #000000 surrounds the housing; `--color-canvas` and `--color-surface` #cccc99 are the sheet and panel bodies; `--color-surface-alt` #c0c090 fills forms, the page header plate, the stat plate, the rail link block, alternate table rows and the breadcrumb strip; `--color-surface-strong` #999999 with `--color-heading` is table heads and the title strips of the rail link block.\n- `--color-bar` #666666 with `--color-bar-text` white, filled by `--fill-bar`, is the housing, the capsule keys, tab segments and panel and dialog titles. `--color-bar-alt` #999999 with `--color-bar-alt-text` black, filled by `--fill-bar-alt`, is the capsule strip, section strips, the tab track, the transport strip of the hero, `.ds-panel--alt` titles and the footer bar. `--shadow-text` is applied to text on `--fill-bar` only.\n- `--color-inverse` #000000 with `--color-inverse-text` white is the screen tone: the display window, the hero screen, one `.ds-panel--inverse` per page and the closing band. Links inside it take the inverse text colour.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #484848; `--color-heading-alt` #000099 for third-level headings.\n- `--color-link` #000099; `--color-link-quiet` #000000 for the rail link block, breadcrumb, tool links in tables and pagination; visited #505050, hover #000000, active #282828. Links on a strip take that strip's text colour.\n- `--color-accent` #99cccc with `--color-accent-text` black is the lit capsule, the selected tab segment, badges, the hero kicker, the lamp of a section strip and the current page number; `--color-accent-alt` #3366cc is a lamp colour only.\n- `--color-fill-1` and `--color-fill-2` are the two khakis, `--color-fill-3` the aqua #99cccc, `--color-fill-4` grey #a0a0a0: the four channel keys of `.ds-grid`, which carry `--color-heading` and `--color-text`. Lines are grey: `--color-border` #999999, `--color-border-strong` #666666, `--color-border-muted` #a0a0a0.\n- `--color-button` #3366cc with white text is the one saturated control; `--color-button-secondary` #999999 with black text. Inputs are white with a #666666 line.\n- Each text colour is used only on its own fill: bar text on the bar, bar-alt text on the strip, accent text on the accent, button text on the button, inverse text on the screen tone, notice text on the notice. `--color-danger` #800000 is text only on `--color-danger-surface` #c8c898 (error notice, field error chip) and otherwise a rim or lamp colour; `--color-success` #709000 and `--color-warning` #ffcc00 are lamp and rim colours, never text. `--color-notice` is the aqua with black text.\n- Bevelled metal. `--fill-bar` and `--fill-bar-alt` are tube gradients: a light edge at the top, the flat colour through the middle, a dark edge at the bottom. `--fill-button` and `--fill-button-secondary` shade from a lighter to a darker mix of their colour. `--shadow-control` is a 1px inset bevel; `--shadow-control-pressed` swaps its two sides. `--shadow-panel` is a hard 1px offset and `--shadow-dialog` a hard 2px offset, without blur.\n- Corners are nearly square: `--radius-control` and `--radius-pill` 3px, `--radius-panel` 0. Only the largest containers are rounded, by `--radius-page` 18px: the housing, the hero and the channel keys. `--border-width` 1px, `--border-width-strong` 2px, solid. `--fill-page`, `--fill-inverse`, `--fill-accent` and `--fill-panel` are flat. `--focus-ring` is 1px dotted; `--transition` none.\n- One-off values built in `components.css` without a token: `dashed` on the empty-state outline, `50%` to make lamps round whatever the pill radius, and `calc()` over layout and border tokens for the form action offset and for joining tab segments and page keys.\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-page__main` and `.ds-page__rail`, on the home page and on inner pages alike. `.ds-block` groups a strip or tab track with the body it heads so they touch. `.ds-view` wraps one screen of the specimen; `.ds-view--home` marks the first.\n- `.ds-nav`: the header device. `.ds-nav__housing` is the metal top with `.ds-nav__brand` (the `.ds-brand` over a `.ds-nav__tagline`, both in the bar text colour) and `.ds-nav__display`, a small screen of two `.ds-nav__display-line` read-outs in the monospace. `.ds-nav__strip` holds `.ds-nav__links`, a row of `.ds-nav__link` capsule keys (`is-current` lights one in the accent;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), and the `.ds-nav__search` form (`.ds-nav__search-label`, a small input, a button).\n- `.ds-brand`: the site's mark and name, at the left of the housing, linking home. `.ds-brand__mark` is a 28px machined tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, 1px rim in `--color-bar-text` so the tile stands off the housing under any palette, `--radius-control`, the inset bevel of `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px wordmark in `--color-bar-text`, because it sits on the bar fill, 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. 10px trail on a strip under the capsule strip, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-section`: the label plate of a block: a full-width strip with a lamp before `.ds-section__title` and an optional `.ds-section__more` link at the right end (written with a trailing `>>`). `.ds-section__body` is the outlined area joined under a strip or under `.ds-tabs`.\n- `.ds-hero`: the screen, one per home page. `.ds-hero__screen` is the inverse-toned display with the text on the left and `.ds-hero__figure`, an inline SVG level meter, on the right. The text is `.ds-hero__kicker` (accent chip, 10px), `.ds-hero__title` (18px), `.ds-hero__text` and `.ds-hero__actions` with one `.ds-button` and one `.ds-hero__link`. `.ds-hero__strip` closes it with three `.ds-hero__readout` cells (label and bold `.ds-hero__readout-value`). No photograph, no full-width banner.\n- `.ds-page-header`: head of an inner page, first thing in the main column, once per page: a plate with a 2px left edge holding `.ds-page-header__title` (16px, 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`.\n- `.ds-stat`: the read-out plate under the page header. `.ds-stat` is the row, one outlined plate; each figure is a `.ds-stat__item`, a cell divided from the next by a hairline, with a 10px `.ds-stat__label` over a 16px bold monospace `.ds-stat__value`. Three to five cells; no icons, no trend arrows.\n- `.ds-prose`: article text inside a `.ds-section__body`: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the bold first paragraph and `.ds-prose__byline` for the 10px credit.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the text-coloured link for navigation inside content. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled key, 11px bold, for the main action. `.ds-button--secondary` is the grey key. `.ds-button--danger` is the secondary key 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` lightens it. Group with `.ds-buttons`.\n- `.ds-form`: block of `.ds-form__row` pairs divided by hairlines: a right-aligned bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small` 96px, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip beside the field marks a bad value. `.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`: data table inside a `.ds-section__body`: 10px bold `th` on `--color-surface-strong` over a strong line, rows alternating the two surfaces with faint vertical hairlines between cells, `.ds-table__num` right-aligned in the monospace for figures. `.ds-table__caption` is the 10px line under it.\n- `.ds-tabs`: a band switch. The row is a strip in `--fill-bar-alt`; each `.ds-tabs__item` holds a `.ds-tabs__tab` segment in `--fill-bar`, joined to its neighbours, the first and last rounded by `--radius-control`; `is-current` lights a segment in the accent. Use it in place of a section strip, directly above the table or list it switches.\n- `.ds-list`: numbered tracks. Each `.ds-list__item` has a monospace `.ds-list__index`, a `.ds-list__head` with the bold `.ds-list__title` link and an optional badge, a `.ds-list__text` summary and a 10px `.ds-list__meta` line; rows touch and are divided by a faint hairline. `.ds-list--compact` is the one-line variant for rail panels, title left and figure right, without an index.\n- `.ds-panel`: rail module: outlined, `.ds-panel__title` metal bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__small`, `.ds-panel__option` (poll choice), `.ds-panel__field` (input with button), `.ds-panel__actions`. `.ds-panel--alt` has the lighter strip as its title; `.ds-panel--inverse` is the screen-toned block, at most one per page.\n- `.ds-sidebar`: the link block of the rail, outlined. Repeats `.ds-sidebar__title` (strong strip, heading type) over a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines, each holding a `.ds-link--quiet` link and optionally a badge at the right end. On an inner page it is the first thing in the rail and lists the pages of the current section.\n- `.ds-grid`: four channel keys in one row, `--space-4` apart: each `.ds-grid__cell` is a rounded, centred block tinted with `--1`, `--2`, `--3` or the base fill, holding a `.ds-grid__icon` (inline SVG), a 13px `.ds-grid__title` whose `.ds-grid__title-link` keeps the heading colour, and one 10px `.ds-grid__text` line.\n- `.ds-badge`: 10px bold accent chip (\"New\"). Status labels are a plain outlined chip with a round lamp: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `.ds-badge--alt` for a neutral \"on air\" marker; the lamp and rim take the status colour, the word stays in `--color-text`. One or two words, 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`: short message in an outlined box with a 2px left edge, 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`; on an inner page they sit in the rail.\n- `.ds-pagination`: transport keys at the foot of a block: a joined row, right-aligned on a `--color-surface-alt` strip, of `.ds-pagination__link` on quiet links (`<< Previous`, numbers, `Next >>`) with the current page as accent-filled `.ds-pagination__current`.\n- `.ds-dialog`: a small window in the page flow: 320px, 2px outline, hard offset shadow, metal `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat area it sits on. No blur, no floating.\n- `.ds-empty`: dashed-outline block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: the base of the console: `.ds-footer__bar`, a strip with `.ds-footer__links` (`.ds-footer__link`) on the left and a `.ds-footer__status` read-out on the right, then `.ds-footer__band`, the screen-toned band with the copyright line and `.ds-footer__band-link` links.\n\n## Never\n\n- `content-width <= 760px`: text stays inside the fixed housing.\n- `palette-colours <= 18`: navy, four blues, black, silver, white, one yellow, plus lime and orange lamps.\n- `font-size <= 18px`: the wordmark and hero title are the largest text.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 900`: regular, bold, and the 900 cut for headings.\n- `font-families <= 3`: Arial, Arial Black and a monospace.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 20%`: only headings and panel titles are capitals.\n- `underlined-links >= 85%`: every link is underlined.\n- `border-radius <= 18px`: 3px on controls, 18px on the largest containers, nothing in between.\n- `border-width <= 2px`: 1px lines, a 2px dialog frame and plate edge.\n- `box-shadow-blur <= 0px`: shadows are hard bevels and hard offsets.\n- `gradient-fills <= 15%`: gradients are for the housing, strips, capsule keys, title bars and buttons.\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, title bar in `--fill-bar` or `--fill-bar-alt`, body padded `--space-4`); a new main-column block is a `.ds-section` strip joined to a `.ds-section__body` with flat content inside; a new inner page copies one of the specimen's inner views (breadcrumb under the capsule strip, `.ds-page-header`, blocks, the section's `.ds-sidebar` at the top of the rail); a new control copies `.ds-button` or `.ds-form__input`; a new read-out copies `.ds-stat` or `.ds-nav__display` and uses the monospace; 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, never use a status colour as a text colour, and never assume the sheet is light or the screen tone dark: another palette may reverse them. Keep text between 10px and 13px apart from 16px page titles and one 18px headline, keep the two columns, and separate things with an outline, a strip or a hairline, never with whitespace, soft shadows or large cards.\n", "components.css": "/* Layout tokens (structure part). The console page: a header device, a\n strip of capsule navigation, a wide main column and one module rail. */\n:root {\n --size-page: 760px;\n --size-rail: 190px;\n --size-display: 176px;\n --size-figure: 120px;\n --size-figure-height: 72px;\n --size-mark: 28px;\n --size-icon: 30px;\n --size-search: 96px;\n --size-label: 104px;\n --size-field: 200px;\n --size-area: 56px;\n --size-dialog: 320px;\n --size-led: 5px;\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-6) 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 console: one fixed housing centred in the window. The header device\n and the base are its two ends; the sheet between them carries the text. */\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: minmax(0, 1fr) var(--size-rail);\n gap: var(--space-5);\n align-items: start;\n padding: var(--space-5);\n}\n.ds-page__main,\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-block {\n display: block;\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-6);\n margin: 0;\n padding: var(--space-4) var(--space-5);\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-5);\n color: var(--color-bar-text);\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-bar-text);\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: the header device ---------- */\n.ds-nav {\n display: block;\n}\n/* The housing: wordmark on the left, a small display window on the right. */\n.ds-nav__housing {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\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}\n/* The display window: two read-out lines on the inverse tone. */\n.ds-nav__display {\n box-sizing: border-box;\n flex: none;\n width: var(--size-display);\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: none;\n}\n.ds-nav__display-line {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n}\n/* The strip under the housing: capsules on the left, search on the right. */\n.ds-nav__strip {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\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-nav__link {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The lit capsule. */\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(#stations:target) .ds-nav__link[href=\"#stations\"],\n.ds-page:has(#presets:target) .ds-nav__link[href=\"#presets\"],\n.ds-page:has(#suggest:target) .ds-nav__link[href=\"#suggest\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-nav__search {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search-label {\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\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-6);\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/* ---------- section strip ---------- */\n/* The head of a block: a full-width strip with a lamp, like the label\n plate of a module. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\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: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n}\n.ds-section__title {\n margin: 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}\n.ds-section__title::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-4);\n background: var(--color-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n vertical-align: middle;\n}\n.ds-section__more {\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration);\n}\n/* What stands under a section strip: joined to it, outlined on three sides. */\n.ds-section__body {\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n\n/* ---------- hero: the screen ---------- */\n.ds-hero {\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-hero__screen {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-figure);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\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-inverse-text);\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-3) 0 var(--space-5);\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__link,\n.ds-hero__link:visited {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration);\n}\n.ds-hero__figure {\n display: block;\n width: var(--size-figure);\n height: var(--size-figure-height);\n color: var(--color-inverse-text);\n}\n/* The transport strip under the screen: three read-outs. */\n.ds-hero__strip {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-hero__readout {\n flex: 1 1 0;\n padding: var(--space-2) var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__readout:first-child {\n border-left: 0;\n}\n.ds-hero__readout-value {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header ---------- */\n/* An inner page opens with a plate across the main column. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\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-strong);\n border-left-width: var(--border-width-strong);\n border-radius: var(--radius-panel);\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/* One read-out plate cut into cells by hairlines. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-3) var(--space-5) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left: 0;\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.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: var(--space-5) var(--space-6);\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.ds-prose__lead {\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\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.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 control with a danger rim and lamp. */\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: 50%;\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-4) var(--space-5) var(--space-5);\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}\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: start;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\n display: block;\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: 0 0 0 var(--space-3);\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-5) 0 var(--space-3) calc(var(--size-label) + var(--space-5));\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table td {\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface);\n color: var(--color-text);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table td:first-child {\n border-left: 0;\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-5);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* A band switch: joined segments in a strip, the selected one lit. */\n.ds-tabs {\n display: flex;\n align-items: center;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-1) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__item:first-child .ds-tabs__tab {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-tabs__item:last-child .ds-tabs__tab {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\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 background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n\n/* ---------- list ---------- */\n/* Numbered tracks: a figure column, then title, text and meta. */\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: var(--size-icon) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__index {\n grid-row: 1 / span 3;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-list__head {\n grid-column: 2;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n grid-column: 2;\n}\n.ds-list__meta {\n display: block;\n grid-column: 2;\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 rail modules. */\n.ds-list--compact .ds-list__item {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-4);\n}\n.ds-list--compact .ds-list__title {\n font-weight: var(--weight-body);\n}\n.ds-list--compact .ds-list__meta {\n flex: none;\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-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-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__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 text-shadow: none;\n}\n/* Inverted panel: everything in it, links included, takes the inverse text\n 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 text-shadow: none;\n}\n.ds-panel--inverse .ds-panel__small {\n color: var(--color-inverse-text);\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/* ---------- sidebar ---------- */\n/* The rail's link block: a keypad of rows under a strong title strip. */\n.ds-sidebar {\n overflow: hidden;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 border-bottom: var(--border-width) var(--border-style) var(--color-border);\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: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__list:last-child .ds-sidebar__item:last-child {\n border-bottom: 0;\n}\n\n/* ---------- grid ---------- */\n/* Four channel keys in one row. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-4) var(--space-4) var(--space-5);\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n text-align: center;\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__icon {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n margin: 0 auto var(--space-2);\n color: var(--color-heading);\n}\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.ds-grid__title-link,\n.ds-grid__title-link:visited {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__text {\n margin: var(--space-2) 0 0;\n color: var(--color-text);\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/* 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: 50%;\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-left-width: var(--border-width-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/* Transport keys: a joined row at the right end of a block's foot. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\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 margin-left: calc(var(--border-width) * -1);\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A small window in the page flow: title bar, message, buttons. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\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-5);\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-6) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) dashed 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: the base of the console ---------- */\n.ds-footer {\n display: block;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-6);\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}\n.ds-footer__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-footer__link,\n.ds-footer__link:visited {\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.ds-footer__status {\n margin: 0;\n}\n/* The closing band in the inverse tone, holding the copyright line. */\n.ds-footer__band {\n margin: 0;\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\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 console, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n net radio, mixes and player gear, around the clock\n
\n

\n on air41 stations\n listeners8,316\n

\n
\n
\n \n
\n \n \n \n
\n
\n
\n\n
\n
\n\n
\n\n
\n
\n
\n Player 3.1 released\n

Tune in to forty-one stations from one small deck.

\n

The chronoskin player holds a steady stream on a 56k line and remembers every station you keep.

\n
\n Get the player\n Read the release notes\n
\n
\n \n \n \n \n \n \n
\n
    \n
  • Version 3.1
    • \n
  • Size 980 KB
    • \n
  • Free for home use
    • \n
\n
\n\n
\n
\n \n

Stations

\n

41 live, by genre

\n
\n
\n \n

Mixes

\n

310 member sets

\n
\n
\n \n

Player

\n

Skins and plug-ins

\n
\n
\n \n

Gear

\n

Portables reviewed

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

New on the dial

\n all stations >>\n
\n
\n
    \n
  • \n 01\n Substation nine New\n Slow breakbeat and dub from a basement studio, live every night from ten.\n 56 kbps | added 31 May | 214 listening\n
    • \n
  • \n 02\n Glass harbour\n Ambient sets without talk, programmed by three members in rotation.\n 32 kbps | added 30 May | 163 listening\n
    • \n
  • \n 03\n Tape hiss weekly\n Four-track recordings sent in by listeners, with the stories behind them.\n 24 kbps | added 28 May | 71 listening\n
    • \n
  • \n 04\n Workbench: running a station from a spare room\n One machine, one line in and a steady connection carry a programme to a few hundred listeners.\n By the gear desk | 31 May\n
    • \n
\n
\n
\n\n
\n
\n

On air now

\n full dial >>\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StationNow playingRateListening
Low orbitSlow drift, part two56 kbps463
Night freightDub plates until dawn32 kbps377
Late loungeThe quiet hour56 kbps282
Substation nineBasement session 1456 kbps214
Glass harbourTide tables32 kbps163
Tape hiss weeklyLetters from the attic24 kbps71
Paper lanternSlow house, hour two56 kbps58
Signal northSpoken word at midnight32 kbps44
\n
\n
\n\n
\n\n
\n\n
\n

Member deck

\n
\n

Sign in to keep presets and post on the boards.

\n Sign in\n

Not a member? Join free

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

Most played

\n \n
\n\n
\n

Quick poll

\n
\n

How do you listen?

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

Programme guide

\n
\n

Tonight's schedule by mail, every afternoon at five.

\n
\n \n \n
\n

We never pass addresses on.

\n
\n
\n\n
\n

On the boards

\n \n
\n\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Stations
    4. \n
  4. >
    5. \n
  5. All genres
    6. \n
\n
\n\n
\n\n
\n
\n

Stations

\n

Forty-one stations on the relay tonight, busiest first.

\n
\n
\n Suggest a station\n
\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StationGenreRateListeningStatus
Low orbitAmbient56 kbps463On air
Night freightDub32 kbps377On air
Late loungeLounge56 kbps282On air
Substation nine NewBreakbeat56 kbps214On air
Glass harbourAmbient32 kbps163On air
Harbour staticDub24 kbps118Testing
Tape hiss weeklySpoken word24 kbps71Silent
Second floor houseHouse56 kbps64On air
\n \n
\n
\n\n
\n\n
\n \n
\n

New this week

\n \n
\n
\n

Your presets

\n
\n

Twelve saved, nine on air now.

\n Open presets\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Stations
    4. \n
  4. >
    5. \n
  5. My presets
    6. \n
\n
\n\n
\n\n
\n
\n

My presets

\n

Stations you have saved, and how each one is holding up.

\n
\n
\n Add a station\n
\n
\n\n
    \n
  • Presets12
    • \n
  • On air now9
    • \n
  • Hours this week26.5
    • \n
  • Dropped streams3
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
StationGenreRateStatus 
Low orbitAmbient56 kbpsOn airTune in
Night freightDub32 kbpsBufferingRetry
Late loungeLounge56 kbpsOn airTune in
Tape hiss weeklySpoken word24 kbpsSilentRemove
Substation nineBreakbeat56 kbpsOn airTune in
\n

Status is checked every five minutes.

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

Remove preset

\n
\n

Take Tape hiss weekly off your presets? You can add it again from the station list.

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

Saved mixes

\n browse >>\n
\n
\n
\n

No mixes saved yet.

\n Browse stations\n
\n
\n
\n\n
\n\n
\n\n \n\n
\n

Note: The relay restarts on Sunday between 02:00 and 04:00.

\n

Error: Night freight did not answer. Try again in a minute.

\n
\n\n
\n

Recently played

\n \n
\n\n
\n

Line check

\n
\n

Three dropped streams this week. Test your connection before the next show.

\n \n
\n
\n\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Stations
    4. \n
  4. >
    5. \n
  5. Suggest a station
    6. \n
\n
\n\n
\n\n
\n
\n

Suggest a station

\n

Tell the relay crew about a stream that belongs on the dial.

\n
\n
\n Back to stations\n
\n
\n\n
\n
\n

Station details

\n start your own >>\n
\n
\n
\n
\n \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 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

Before you send

\n
\n

A station is listed when it has run for a week, holds 24 kbps or better and plays its own programme.

\n

The crew answers within two days.

\n
\n
\n
\n

Listed this week

\n \n
\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Workbench
    4. \n
  4. >
    5. \n
  5. Running a station
    6. \n
\n
\n\n
\n\n
\n
\n

From the workbench

\n front page >>\n
\n
\n
\n

Running a station from a spare room

\n

By the gear desk, 31 May

\n

One machine, one line in and a steady connection will carry a programme to a few hundred listeners.

\n

What you need

\n

The encoder does the hard work, so give it the faster machine. Keep the bit rate low: most of your audience is still on a modem.

\n
    \n
  • A sound card with line in
    • \n
  • A mixer or a single deck
    • \n
  • An upstream of 128 kbps or better
    • \n
\n

Checking the signal

\n

Start the encoder with chronoskin --meter and watch the level. It should peak just under the top mark.

\n

Getting listed

\n

Run the programme for a week at the same hours, then send the stream address to the relay crew. They listen in before the station goes on the dial.

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

Read next

\n
\n
\n

\n Encoders compared\n Mixing on one deck\n Suggest your station\n On air now\n Front page\n

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

Ready to go on air?

\n
\n

Send the stream address and the crew will listen in.

\n Suggest a station\n
\n
\n
\n

On the boards

\n \n
\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.portal.s02.p01.t02.u02\",\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\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-2122\",\n \"short\": \"v1-yk-2122\"\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 Black\", \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: Courier, \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 10px;\n --text-ui: 11px;\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: 900;\n --weight-display: 900;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 0;\n --radius-pill: 3px;\n --radius-page: 18px;\n --shadow-panel: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, white 45%, transparent), inset -1px -1px 0 color-mix(in srgb, black 35%, transparent);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, white 60%, transparent), inset -1px -1px 0 color-mix(in srgb, black 35%, transparent);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, black 35%, transparent), inset -1px -1px 0 color-mix(in srgb, white 45%, transparent);\n --shadow-dialog: 2px 2px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-text: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 70%, white) 0, var(--color-bar) 30%, var(--color-bar) 65%, color-mix(in srgb, var(--color-bar) 68%, black) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt) 75%, white) 0, var(--color-bar-alt) 35%, var(--color-bar-alt) 70%, color-mix(in srgb, var(--color-bar-alt) 80%, black) 100%);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 78%, white) 0, color-mix(in srgb, var(--color-button) 85%, black) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 68%, white) 0, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary) 78%, white) 0, color-mix(in srgb, var(--color-button-secondary) 88%, black) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }