{ "id": "v1-yk-3b23", "long_id": "v1.y2k-futurism.portal.s03.p11.t02.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-3b23", "preview_url": "https://chrono.skin/s/v1-yk-3b23/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- 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- Black with acid green, one aqua and one blue. `--color-page` #000000 surrounds a near-black sheet: `--color-canvas` and `--color-surface` #181818, `--color-surface-alt` #282828 for forms, the link column and alternate rows. `--color-surface-strong` #000000 is darker than the sheet, for title strips inside the link column.\n- `--color-bar` #98ff00 with black text is the navigation bar, panel and dialog titles, table heads and the current tab; `--color-bar-alt` #484848 with white text is the utility strip, section tabs, inactive tabs and the footer strip. `--color-inverse` #ffffff with black text is the one white panel and the closing band.\n- `--color-text` #e0e0e8; `--color-text-muted` #c0c0c0; `--color-heading` #ffffff; `--color-heading-alt` #98ff00.\n- `--color-link` #98ff00; `--color-link-quiet` #e0e0e8; visited #98d0d0, hover #ffffff, active #a8ff00. `--color-accent` #98d0d0, aqua, with black text is the current navigation item, badges and the current page number; `--color-accent-alt` #a8ff00 is a lamp colour.\n- `--color-fill-1` to `--color-fill-3` are near-blacks and a grey (#282828, #202020, #484848) and `--color-fill-4` is a steel blue #385090. Lines: `--color-border` #686868, `--color-border-strong` #98ff00, `--color-border-muted` #484848.\n- `--color-button` #98ff00 with black text; `--color-button-secondary` #686868 with white text. Inputs are black with green text and a #989898 line, like a terminal field.\n- `--color-danger` #ff0000 is only used as text on `--color-danger-surface` #ffffff and as a rim or lamp; `--color-success` #98ff00 and `--color-warning` #ffc800 are lamp and rim colours, never text. `--color-notice` is the steel blue with white text.\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 <= 18`: black, greys, white, acid green, aqua, steel blue, plus status 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 <= 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.p11.t02.u03\",\n \"library\": \"2026.10.09-1036\",\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-3b23\",\n \"short\": \"v1-yk-3b23\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #181818;\n --color-surface: #181818;\n --color-surface-alt: #282828;\n --color-surface-strong: #000000;\n --color-bar: #98ff00;\n --color-bar-text: #000000;\n --color-bar-alt: #484848;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #ffffff;\n --color-inverse-text: #000000;\n --color-text: #e0e0e8;\n --color-text-muted: #c0c0c0;\n --color-heading: #ffffff;\n --color-heading-alt: #98ff00;\n --color-link: #98ff00;\n --color-link-quiet: #e0e0e8;\n --color-link-visited: #98d0d0;\n --color-link-hover: #ffffff;\n --color-link-active: #a8ff00;\n --color-border: #686868;\n --color-border-strong: #98ff00;\n --color-border-muted: #484848;\n --color-accent: #98d0d0;\n --color-accent-text: #000000;\n --color-accent-alt: #a8ff00;\n --color-fill-1: #282828;\n --color-fill-2: #202020;\n --color-fill-3: #484848;\n --color-fill-4: #385090;\n --color-button: #98ff00;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #686868;\n --color-button-secondary-text: #ffffff;\n --color-input: #000000;\n --color-input-text: #98ff00;\n --color-input-border: #989898;\n --color-disabled: #282828;\n --color-disabled-text: #989898;\n --color-danger: #ff0000;\n --color-danger-surface: #ffffff;\n --color-success: #98ff00;\n --color-warning: #ffc800;\n --color-notice: #385090;\n --color-notice-text: #ffffff;\n --color-focus: #98d0d0;\n --color-shadow: #000000;\n --color-overlay: #000000;\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 --figure-shift: 0em;\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: 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" } }