{ "id": "v1-yk-3313", "long_id": "v1.y2k-futurism.portal.s03.p03.t01.u03", "name": "Y2K futurism showcase, 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 product showcase that hardware makers, music channels and software houses put on their front page around the turn of the millennium: one centred 720px column with a row of equal tabs across the top, a single framed stage showing the machine of the season, and a row of four small modules under it. Everything is square, hairlined and scan-lined, set in 10px Verdana with light lowercase Helvetica headings, in dark olive with lime, one blue and one orange. The stage and its line drawings were images at the time and are rebuilt here with inline SVG, 1px borders and dotted rules; the look gave way to wider, lighter glossy layouts from about 2004.", "url": "https://chrono.skin/s/v1-yk-3313", "preview_url": "https://chrono.skin/s/v1-yk-3313/specimen.html", "files": { "STYLE.md": "# Y2K futurism showcase, 1999 to 2003\n\n## Summary\n\nThe product showcase that hardware makers, music channels and software houses put on their front page around the turn of the millennium: one centred 720px column with a row of equal tabs across the top, a single framed stage showing the machine of the season, and a row of four small modules under it. Everything is square, hairlined and scan-lined, set in 10px Verdana with light lowercase Helvetica headings, in dark olive with lime, one blue and one orange. The stage and its line drawings were images at the time and are rebuilt here with inline SVG, 1px borders and dotted rules; 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 720px; `.ds-page__frame` is one sheet of that width centred horizontally in the viewport (`margin: 0 auto`) with a 1px outline, 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-6` (14px) above and `--space-3` (4px) at the sides. Order from the top: `.ds-nav` (a three-part masthead with tool links left, the centred wordmark and the search right; a row of equal tabs; one centred line of text links), `.ds-page__body`, `.ds-footer`. There are no side columns running the height of the page, on the home page or on inner pages.\n- `.ds-page__body` is a stack of full-width bands `--space-6` (14px) apart, padded `--space-7` (20px) from the sheet edge, so content is 678px wide. The home page bands, in order: `.ds-hero` (the stage), `.ds-ticker` (one line of news), `.ds-grid` (four modules in a row), a `.ds-page__band` of three equal columns (a list, two panels), and a second `.ds-page__band` of three small panels. Columns inside a band are `--space-6` apart and start at the top.\n- The rhythm is one, four, three, two: each band cuts the same width into a different number of equal parts. Much of the page is centred: the wordmark, the tab labels, the stage, the stats, tabs, pagination, buttons and the footer.\n- Inner pages (every page below the home page) keep the sheet, the tab row with its line of text links and the footer, and have no stage, no ticker and no module row. `.ds-page__body` opens with `.ds-page-header`, which holds the `.ds-breadcrumb` above the title and replaces the hero. Then come full-width bands: an optional `.ds-stat` row, `.ds-tabs` centred above the full-width `.ds-table` with its `.ds-pagination`, and a `.ds-page__band--split` with the form on the left two thirds and a `.ds-page__stack` on the right third that holds the `.ds-sidebar` index of the section and any notices. An article page keeps the page header for the section and sets the article in the left two thirds of a split band.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs and tab chips; `--space-2` 2px is the gap between navigation tabs and the padding of ticker parts and compact rows; `--space-3` 4px is the padding of table cells, list rows, navigation tabs and notices; `--space-4` 6px is the padding of modules and the gap between buttons; `--space-5` 10px is the side padding of panels, buttons and notices, the gap between grid modules and between stacked panels; `--space-6` 14px is the gap between bands and between columns in a band; `--space-7` 20px is the side margin of the sheet and the gap between the text links under the tabs. There is no step above 20px.\n- Fixed sizes: `--size-stage` 210px is the least height of the stage; `--size-figure` 300px by `--size-figure-height` 130px the line drawing on it; `--size-mark` 26px the tile of the brand mark; `--size-icon` 34px a module icon; `--size-search` 96px a search or e-mail input; `--size-field` 190px and `--size-label` 92px are kept for forms in a narrow column; `--size-area` 56px the height of a textarea; `--size-dialog` 310px a dialog; `--size-led` 5px a status lamp; `--size-dot` 4px the pitch of the dotted rules.\n- Things are separated by dotted rules and hairlines on the open sheet, not by boxes with title bars: section headings are written on the sheet, tables and lists are ruled, and only modules, the form and the stage are outlined.\n- Views. The specimen is one example site, a maker of pocket machines, in five views. `home` is the front page: stage, ticker, four product modules, a band of latest list, top downloads and poll, and a band of three small panels. `software` is the list page: the catalogue as a tabbed table with pagination. `mysoftware` is the owner's page: page header with breadcrumb, stats, notices, tabbed table with status badges and the button row, then the remove dialog it opens beside the empty state of submitted titles. `submit` is the form page, with the section index and a rules panel in the right third. `feature` is an article page: the prose beside a stack of panels, then a row of further links.\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- `--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__body` stacks the bands of one page. `.ds-page__band` cuts a band into three equal columns; `.ds-page__band--split` into two thirds and one third. `.ds-page__band--even` stretches the columns of a band to one height, for two outlined blocks side by side. `.ds-page__stack` stacks modules in one column of a band. `.ds-view` wraps one screen of the specimen; `.ds-view--home` marks the first.\n- `.ds-nav`: site header. `.ds-nav__masthead` has three parts: `.ds-nav__tools` (quiet links), the centred `.ds-nav__brand` (the `.ds-brand` over `.ds-nav__tagline`) and the `.ds-nav__search` form. `.ds-nav__tabs` is the row of equal `.ds-nav__tab` cells, each a `.ds-nav__link` with a centred label; `is-current` gives one the bar fill. 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. `.ds-nav__sub` is the centred line of quiet text links for the current section.\n- `.ds-brand`: the site's mark and name, centred in the masthead, linking home. `.ds-brand__mark` is a 26px square tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, 1px `--color-border-strong` outline, `--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. 10px trail inside `.ds-page-header`, above the title: quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-section`: the heading of a band or column, written on the sheet: `.ds-section__title` (14px), then `.ds-section__line`, a dotted run that fills the remaining width, then an optional `.ds-section__more` link (written with a trailing `>>`).\n- `.ds-hero`: the stage, one per home page, full width. `.ds-hero__stage` centres `.ds-hero__figure` (an inline SVG line drawing of the product with dotted lines to its companions), `.ds-hero__kicker` (accent chip), `.ds-hero__title` (18px) and one line of `.ds-hero__text`. `.ds-hero__actions` is the foot of the stage: one `.ds-button` and one or two links, centred on a hairline. No photograph; no text beside the figure.\n- `.ds-ticker`: one line of news under the stage: `.ds-ticker__label` plate, `.ds-ticker__text` with a quiet link, `.ds-ticker__date` at the right. One per page.\n- `.ds-page-header`: head of an inner page, first thing in `.ds-page__body`, once per page: the breadcrumb, `.ds-page-header__title` (16px, the page's only h1) and one line of `.ds-page-header__text` on the left, `.ds-page-header__action` with one `.ds-button` at the right, closed by a dotted rule.\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`, a bare centred cell divided from the next by a dotted line, with an 18px `.ds-stat__value` in the second heading colour over a 10px muted `.ds-stat__label`. No boxes, no icons, no trend arrows.\n- `.ds-prose`: article text on the open sheet: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the 12px first paragraph and `.ds-prose__byline` for the muted credit.\n- `.ds-link`: link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the text-coloured link for navigation. `.ds-links` lays a centred row of links out.\n- `.ds-button`: flat rectangular key 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`, centred.\n- `.ds-form`: outlined module. `.ds-form__grid` lays `.ds-form__row` fields out two abreast, each a bold 10px `.ds-form__label` (optional `.ds-form__hint`) standing above its control; `.ds-form__row--wide` spans both columns. Controls take `.ds-form__input` and fill their column (`--small` 96px for bars and panels, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip under the field marks a bad value. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the centred button row above a dotted rule.\n- `.ds-table`: ruled data table without an outer box, full width of the band: bold 10px `th` over a line in `--color-border-strong`, rows divided by faint hairlines with every other row on `--color-surface-alt`, `.ds-table__num` right-aligned in the monospace for figures. `.ds-table__caption` is the centred muted line under it.\n- `.ds-tabs`: a centred line of `.ds-tabs__item` entries divided by hairlines, each a `.ds-tabs__tab` quiet link; `is-current` is an accent chip. Use it directly above the table or list it switches. It is not the site navigation, which is `.ds-nav__tabs`.\n- `.ds-list`: item list on the open sheet. Each `.ds-list__item` has a bold `.ds-list__title` link, a `.ds-list__text` summary and a muted `.ds-list__meta` line; rows are divided by dotted rules. `.ds-list--compact` is the one-line variant inside panels, title left and figure right.\n- `.ds-panel`: outlined module with the title inside it: `.ds-panel__title` in the second heading colour over a hairline, then `.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--inverse` is the blue block, at most one per page. There is no title bar.\n- `.ds-sidebar`: the index block of an inner page, in the right third of a split band: `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` rows holding `.ds-link--quiet` links, optionally followed by a badge. It is a block the height of its links, not a column.\n- `.ds-grid`: the row of four modules under the stage, `--space-5` apart. Each `.ds-grid__cell` is tinted with `--1`, `--2`, `--3` or the base fill and holds a centred 14px `.ds-grid__title`, then a `.ds-grid__icon` (inline SVG, 34px) beside a 10px `.ds-grid__text` that ends in a `.ds-grid__more` link on its own line, bold in `--color-heading` because a cell fill may be close to the link colour.\n- `.ds-badge`: 10px bold accent chip (\"new\"). 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 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, 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 line of `.ds-pagination__link` quiet links (`<< Previous`, numbers, `Next >>`) with the current page as an accent chip, `.ds-pagination__current`. No boxes around the numbers.\n- `.ds-dialog`: a small window in the page flow: 310px, outlined in `--color-border-strong`, striped `.ds-dialog__title` bar with a centred title, `.ds-dialog__body` with centred `.ds-dialog__text` and `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat dark area it sits on. No blur, no shadow, no floating.\n- `.ds-empty`: dotted-outline block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: centred. `.ds-footer__links` is a row of quiet links under a dotted rule, `.ds-footer__text` the muted copyright line, and `.ds-footer__band` the thin closing band in the inverse tone with `.ds-footer__band-link` links.\n- `.ds-menu` (`.ds-menu__list`, `.ds-menu__link`): a nav item with a drop-down list on hover or focus.\n- `.ds-meter` (`.ds-meter__label`) with `.ds-progress` (`--30`, `--50`, `--70`, `--90`, `.ds-progress__bar`): a segmented loading or signal bar with its label.\n- `.ds-accordion` (`__summary`, `__body`): a `
` panel for specifications.\n- `.ds-tooltip`: a word with a dotted underline; its `.ds-tooltip__tip` is a small label on `--color-inverse` shown above it on hover or focus.\n- `.ds-carousel` (`__track`, `__slide`, `__title`, `__text`, `__bar`, `__arrow`): a scroll-snap featured viewer with a counter such as 01/03.\n- `.ds-avatar`: initials in a round badge beside a name.\n\n## Never\n\n- `content-width <= 720px`: text stays inside the fixed sheet.\n- `palette-colours <= 16`: olives, lime, one blue, one orange, white, plus status 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 <= 0px`: every box is square.\n- `border-width <= 1px`: every line is a hairline.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 8%`: stripes are for the page, the current tab, the dialog title and the inverse block.\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 module copies `.ds-panel` (1px outline, title inside over a hairline, body padded `--space-5`); a new stretch of content on the open sheet starts with a `.ds-section` heading and its dotted line; a new band is a `.ds-page__band` cut into equal parts, never a column that runs the height of the page; a new inner page copies one of the specimen's inner views (`.ds-page-header` with the breadcrumb, full-width bands, the `.ds-sidebar` block in the right third of a split band); a new control copies `.ds-button` or `.ds-form__input`; 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 dark: another palette may make it white. Keep one stage per home page, keep the bar fill for the current tab and dialog titles only, centre what the specimen centres, and separate things with dotted rules and hairlines, never with soft shadows, title bars on every box or large cards.\n", "components.css": "/* Layout tokens (structure part). The showcase page: one centred column,\n a row of equal tabs, one framed stage and bands of equal modules. */\n:root {\n --size-page: 720px;\n --size-stage: 210px;\n --size-figure: 300px;\n --size-figure-height: 130px;\n --size-mark: 26px;\n --size-icon: 34px;\n --size-search: 96px;\n --size-tip: 220px;\n --size-label: 92px;\n --size-field: 190px;\n --size-area: 56px;\n --size-dialog: 310px;\n --size-led: 5px;\n --size-dot: 4px;\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 --space-7: 20px;\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 sheet: one fixed column centred in the window. All text sits on 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/* The body of a page: full-width bands stacked with an even gap. */\n.ds-page__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n padding: var(--space-6) var(--space-7) var(--space-7);\n}\n/* A band cut into equal columns. */\n.ds-page__band {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__band--split {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n}\n/* Columns of equal height, for two outlined blocks side by side. */\n.ds-page__band--even {\n align-items: stretch;\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\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 justify-content: center;\n gap: var(--space-6);\n margin: 0;\n padding: var(--space-3) 0;\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/* Masthead: tools on the left, the wordmark in the middle, search on the\n right. */\n.ds-nav__masthead {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n gap: var(--space-5);\n align-items: center;\n padding: var(--space-5) var(--space-7) var(--space-4);\n}\n.ds-nav__tools {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-nav__tagline {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__search {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n/* The tab row: equal cells across the sheet, standing on a line in the bar\n colour. */\n.ds-nav__tabs {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-7);\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-nav__tab {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n text-align: center;\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.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(#software:target) .ds-nav__link[href=\"#software\"],\n.ds-page:has(#mysoftware:target) .ds-nav__link[href=\"#mysoftware\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"],\n.ds-page:has(#feature:target) .ds-nav__link[href=\"#feature\"] {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-bar);\n text-shadow: var(--shadow-text);\n}\n/* The line of text links under the tabs: the current section's pages. */\n.ds-nav__sub {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-7);\n margin: 0;\n padding: var(--space-3) var(--space-7);\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\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\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-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 head ---------- */\n/* A heading written on the sheet, with a dotted line running from it to\n the \"more\" link. */\n.ds-section {\n display: flex;\n align-items: baseline;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n}\n.ds-section__title {\n flex: none;\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-section__line {\n flex: 1 1 auto;\n height: var(--size-dot);\n background-image: radial-gradient(circle, var(--color-border-strong) 30%, transparent 36%);\n background-size: var(--size-dot) var(--size-dot);\n}\n.ds-section__more {\n flex: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- hero: the stage ---------- */\n.ds-hero {\n overflow: hidden;\n background: var(--color-fill-1);\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-hero__stage {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n min-height: var(--size-stage);\n padding: var(--space-6) var(--space-7) var(--space-5);\n}\n.ds-hero__figure {\n display: block;\n width: var(--size-figure);\n max-width: 100%;\n height: var(--size-figure-height);\n color: var(--color-border-strong);\n}\n.ds-hero__kicker {\n display: inline-block;\n margin: var(--space-4) 0 var(--space-2);\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 0;\n font-size: var(--text-large);\n}\n/* The foot of the stage: one button and a line of links, on a hairline. */\n.ds-hero__actions {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- ticker ---------- */\n/* One line of news in a capsule: a label plate, the headline, the date. */\n.ds-ticker {\n display: flex;\n align-items: stretch;\n overflow: hidden;\n margin: 0;\n background: var(--color-surface-alt);\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}\n.ds-ticker__label {\n flex: none;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-ticker__text {\n flex: 1 1 auto;\n padding: var(--space-2) var(--space-5);\n}\n.ds-ticker__date {\n flex: none;\n padding: var(--space-2) var(--space-5);\n color: var(--color-text-muted);\n}\n\n/* ---------- page header ---------- */\n/* An inner page opens with the trail and title on the left, one action on\n the right, closed by a dotted line. */\n.ds-page-header {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-5);\n align-items: end;\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width) dotted var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: var(--space-3) 0 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/* Bare centred figures, divided by dotted lines. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: center;\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);\n border-left: var(--border-width) dotted var(--color-border-strong);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading-alt);\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}\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}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: 0;\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}\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: 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 justify-content: center;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n}\n\n/* ---------- form ---------- */\n/* Labels stand above their controls; the form is an outlined module. */\n.ds-form {\n margin: 0;\n padding: var(--space-5) var(--space-6);\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-form__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4) var(--space-6);\n}\n.ds-form__row {\n min-width: 0;\n}\n.ds-form__row--wide {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: 100%;\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--area {\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 justify-content: center;\n gap: var(--space-4);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) dotted var(--color-border-strong);\n}\n\n/* ---------- table ---------- */\n/* Ruled rows without a box: a strong line under the head, hairlines\n between rows. */\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-3) var(--space-4);\n color: var(--color-heading);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-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-3) var(--space-4);\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr:nth-child(odd) 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-3) var(--space-4) 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* ---------- tabs ---------- */\n/* A centred line of text switches divided by hairlines; the current one is\n a filled chip. */\n.ds-tabs {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0 0 var(--space-3);\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-tabs__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__item:first-child {\n border-left: 0;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-link-quiet);\n border-radius: var(--radius-pill);\n text-decoration: var(--link-decoration-quiet);\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-decoration: none;\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) 0 var(--space-4);\n border-bottom: var(--border-width) dotted var(--color-border-strong);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\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: title left, figure right. */\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) 0;\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/* An outlined module: the title is written inside it, over a hairline. */\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 var(--space-5);\n padding: var(--space-4) 0 var(--space-3);\n color: var(--color-heading-alt);\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-panel__body {\n padding: var(--space-4) var(--space-5) var(--space-5);\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/* 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 border-color: var(--color-border-strong);\n}\n.ds-panel--inverse .ds-panel__title {\n color: var(--color-inverse-text);\n border-bottom-color: var(--color-inverse-text);\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 index block of an inner page: a heading strip and a column of\n links, in the last column of a split band. */\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-3) var(--space-5);\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-3) var(--space-5) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n}\n\n/* ---------- grid ---------- */\n/* The row of four modules under the stage. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: var(--size-icon) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-content: start;\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);\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 grid-column: 1 / -1;\n margin: 0 0 var(--space-3);\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 text-align: center;\n}\n.ds-grid__icon {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n/* The cell's link is bold in the heading colour: a cell fill may be close\n to the link colour. */\n.ds-grid__more,\n.ds-grid__more:visited {\n display: block;\n margin-top: var(--space-2);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\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: 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/* A centred line of numbers; the current page is a filled chip. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4) 0 0;\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}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\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);\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-3) 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 text-align: center;\n}\n.ds-dialog__body {\n padding: var(--space-5) var(--space-6);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: var(--space-6) var(--space-5);\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/* Centred lines on the sheet under a dotted rule, then a thin closing\n band in the inverse tone. */\n.ds-footer {\n display: block;\n text-align: center;\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 justify-content: center;\n gap: var(--space-3) var(--space-6);\n margin: 0 var(--space-7);\n padding: var(--space-5) 0 var(--space-2);\n list-style: none;\n border-top: var(--border-width) dotted var(--color-border-strong);\n}\n.ds-footer__text {\n margin: 0;\n padding: 0 var(--space-7) var(--space-5);\n color: var(--color-text-muted);\n}\n.ds-footer__band {\n margin: 0;\n padding: var(--space-3) var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\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\n/* current item also carries a marker that no token set can remove */\n.ds-nav__link.is-current::before,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#software:target) .ds-nav__link[href=\"#software\"]::before,\n.ds-page:has(#mysoftware:target) .ds-nav__link[href=\"#mysoftware\"]::before,\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"]::before,\n.ds-page:has(#feature:target) .ds-nav__link[href=\"#feature\"]::before {\n content: \">\";\n margin-right: var(--space-1);\n}\n\n/* ---------- period components: menu, progress, accordion, tooltip, carousel, avatar ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n text-shadow: none;\n text-transform: none;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus-visible {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-meter {\n margin: 0 0 var(--space-3);\n}\n.ds-meter__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-progress {\n display: block;\n height: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-progress__bar {\n display: block;\n height: 100%;\n background-color: var(--color-accent);\n background-image: repeating-linear-gradient(90deg, transparent 0, transparent var(--size-seg), var(--color-surface-strong) var(--size-seg), var(--color-surface-strong) var(--size-seg-gap));\n}\n.ds-progress--90 .ds-progress__bar { width: 90%; }\n.ds-accordion {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-accordion__summary {\n padding: var(--space-1) var(--space-3);\n cursor: pointer;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-accordion__body {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n.ds-tooltip {\n position: relative;\n border-bottom: var(--border-width) dotted var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-1) var(--space-2);\n background: var(--color-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-body);\n text-shadow: none;\n text-transform: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n display: block;\n}\n.ds-carousel {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n margin-right: var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: none;\n vertical-align: middle;\n}\n\n:root {\n --size-tip: 220px;\n --size-menu: 150px;\n --size-avatar: 24px;\n --size-seg: 6px;\n --size-seg-gap: 8px;\n}\n", "specimen.html": "\n\n\n\n\nY2K futurism showcase, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n
\n \n
\n \n \n chronoskin\n \n pocket machines and the software that runs them\n
\n
\n \n \n
\n
\n \n \n
\n\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n New for summer\n

Everything you carry. One pocket.

\n

The chronoskin P5 keeps your music, pictures and diary on a machine the size of a wallet.

\n
\n
\n Meet the P5\n Take the tour\n Compare models\n
\n
\n\n

\n Hot news\n Sync kit 2.0 adds wireless transfer for every P series model\n 1 June 2001\n

\n\n
\n
\n

P5 handheld

\n \n

Colour screen, 16 MB, two weeks on one charge. Details >>

\n
\n
\n

Tempo player

\n \n

Sixty songs in a case smaller than a disc. Details >>

\n
\n
\n

Iris camera

\n \n

Two megapixels, straight to the handheld. Details >>

\n
\n
\n

Sync kit 2.0

\n \n

Free for owners. Cable or wireless. Download >>

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

Latest

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

Top downloads

\n
\n
System needs

Any desktop from 1999 on, 32 MB of memory.

\n

Skin packWorks with every player build

\n\n \n

Counted over the last seven days.

\n
\n
\n\n
\n

Quick poll

\n
\n

Mirror signal88%

\n\n

What do you carry every day?

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

Owners club

\n
\n

Register your machine for free software and early news.

\n Sign in\n

Not a member? Register

\n
\n
\n
\n

Newsletter

\n
\n

One short letter every Friday.

\n
\n \n \n
\n

We never pass addresses on.

\n
\n
\n
\n

Where to buy

\n
\n

Find a dealer with the P5 on the shelf.

\n
\n \n \n
\n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Software
    4. \n
  4. >
    5. \n
  5. Catalogue
    6. \n
\n

Software catalogue

\n

Everything that runs on a P series machine, newest first.

\n
\n
\n Submit a title\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TitleKindAddedSizeThis week 
Tempo firmware 1.3 NewSystem31 May420 KB19,774Add to my machine
Sync kit 2.0System29 May1,412 KB48,210Add to my machine
Diary 4Organiser26 May1,108 KB12,035Add to my machine
Pocket atlasTravel22 May2,790 KB9,460Add to my machine
Iris albumPictures19 May640 KB7,118Add to my machine
Night sky chartTravel15 May880 KB5,871Add to my machine
Tile rallyGames11 May310 KB5,206Add to my machine
Expense padOrganiser8 May220 KB4,655Add to my machine
\n \n

Titles marked new were added in the last seven days.

\n
\n\n
\n
\n\n \n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Software
    4. \n
  4. >
    5. \n
  5. My software
    6. \n
\n

My software

\n

Titles registered to your machine, and what each one needs next.

\n
\n
\n Add a title\n
\n
\n\n
    \n
  • 14titles installed
    • \n
  • 9.6 MBmemory in use
    • \n
  • 3updates waiting
    • \n
  • 6.4 MBmemory free
    • \n
\n\n
\n

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

\n

Error: Iris album did not arrive whole. Repair it or fetch it again from another mirror.

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
TitleKindSizeStatus 
Sync kit 2.0System1,412 KBCurrentFetch again
Diary 4Organiser1,108 KBUpdate dueUpdate
Pocket atlasTravel2,790 KBCurrentFetch again
Iris albumPictures640 KBDamagedRemove
Tempo firmware 1.3System420 KBCurrentFetch again
\n

Updates install the next time the machine sits in its cradle.

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

Remove title

\n
\n

Take Iris album off your machine? Your pictures stay where they are.

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

You have not submitted a title yet.

\n Submit a title\n
\n
\n\n
\n
\n\n \n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Software
    4. \n
  4. >
    5. \n
  5. Submit a title
    6. \n
\n

Submit a title

\n

Wrote something for the P series? Send it in for the catalogue.

\n
\n
\n Back to the catalogue\n
\n
\n\n
\n
\n
\n

Title details

\n \n rules >>\n
\n
\n
\n
\n \n \n
\n
\n \n \n Enter a complete address.\n
\n
\n \n \n
\n
\n Options\n \n \n
\n
\n \n \n
\n
\n
\n \n Cancel\n
\n
\n
\n
\n \n
\n

Before you send

\n
\n

Titles must run on a stock P5 and fit in 3 MB. We test each one for a week.

\n

You hear from us within ten days.

\n
\n
\n
\n
\n\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. A week with a handheld
    6. \n
\n

Features

\n

Long reads from the review desk, one every Friday.

\n
\n
\n Front page\n
\n
\n\n
\n
\n
\n

This week

\n \n archive >>\n
\n
\n

A week with nothing but a handheld

\n

By the review desk, 31 May

\n

We left the laptop at the office and ran a full week of work from a coat pocket.

\n

What worked

\n

Mail, the diary and notes were never a problem. The surprise was battery life: one charge lasted until Friday.

\n
    \n
  • Mail over an infrared phone link
    • \n
  • Notes written with the stylus
    • \n
  • Music on the train
    • \n
\n

What to set first

\n

Open the sync panel and enter auto=hourly. The machine then keeps itself current whenever it sits in the cradle.

\n
\n
\n
\n
\n

Used in this feature

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

Newsletter

\n
\n

One short letter every Friday.

\n
\n \n \n
\n

We never pass addresses on.

\n
\n
\n
\n

Owners club

\n
\n

Register your machine for free software and early news.

\n Sign in\n
\n
\n
\n
\n\n
\n
\n

Read next

\n \n
\n

\n Tempo against the disc player\n Iris in low light\n Ten titles for travellers\n Fetch the sync kit\n Front page\n

\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.portal.s03.p03.t01.u03\",\n \"library\": \"2026.10.09-1346\",\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-3313\",\n \"short\": \"v1-yk-3313\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #181800;\n --color-canvas: #333300;\n --color-surface: #333300;\n --color-surface-alt: #404000;\n --color-surface-strong: #181800;\n --color-bar: #99cc00;\n --color-bar-text: #181800;\n --color-bar-alt: #656500;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #08296a;\n --color-inverse-text: #ffffff;\n --color-text: #ffffff;\n --color-text-muted: #c4c6b9;\n --color-heading: #ffffff;\n --color-heading-alt: #99cc00;\n --color-link: #3399ff;\n --color-link-quiet: #ffffff;\n --color-link-visited: #999966;\n --color-link-hover: #ff9900;\n --color-link-active: #a9ff0c;\n --color-border: #607800;\n --color-border-strong: #99cc00;\n --color-border-muted: #485800;\n --color-accent: #ff9900;\n --color-accent-text: #181800;\n --color-accent-alt: #3399ff;\n --color-fill-1: #404000;\n --color-fill-2: #405000;\n --color-fill-3: #345104;\n --color-fill-4: #08296a;\n --color-button: #99cc00;\n --color-button-text: #181800;\n --color-button-hover-text: #181800;\n --color-button-secondary: #666666;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #607800;\n --color-disabled: #404000;\n --color-disabled-text: #999966;\n --color-danger: #ff0000;\n --color-danger-surface: #ffffff;\n --color-success: #a9ff0c;\n --color-warning: #ff9900;\n --color-notice: #08296a;\n --color-notice-text: #ffffff;\n --color-focus: #ff9900;\n --color-shadow: #000000;\n --color-overlay: #181800;\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 --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-page) 92%, white) 0, color-mix(in srgb, var(--color-page) 92%, white) 2px, color-mix(in srgb, var(--color-page) 90%, black) 2px, color-mix(in srgb, var(--color-page) 90%, black) 4px);\n --fill-bar: repeating-linear-gradient(to bottom, var(--color-bar) 0, var(--color-bar) 2px, color-mix(in srgb, var(--color-bar) 84%, black) 2px, color-mix(in srgb, var(--color-bar) 84%, black) 4px);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: repeating-linear-gradient(to bottom, var(--color-inverse) 0, var(--color-inverse) 2px, color-mix(in srgb, var(--color-inverse) 86%, black) 2px, color-mix(in srgb, var(--color-inverse) 86%, black) 4px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 75%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }