{ "id": "v1-yk-4444", "long_id": "v1.y2k-futurism.portal.s04.p04.t04.u04", "name": "Y2K futurism gallery, 1999 to 2003", "era": { "slug": "y2k-futurism", "code": "yk", "name": "Y2K futurism", "years": [ 1999, 2003 ], "description": "The turn of the millennium, 1999 to 2003: techno blues and silvers, glassy aqua buttons, tiny pixel-sharp type, thin tech lines and rounded capsule shapes on dark or brushed backgrounds." }, "archetype": "portal", "mode": "pure", "viewport": { "width": 1024, "fluid": false }, "summary": "The download and skins gallery that player, plug-in and desktop theme sites ran around the turn of the millennium: a 770px sheet with a control panel down its left side, holding the mark, a stack of navigation keys, a search box and a small read-out, and a content area that opens with one rounded pod for the pick of the week and continues as a tiled gallery of thumbnails. It is a white sheet on a charcoal screen with a dark brown head and outline, chartreuse keys and strips, one purple and one aqua, yellow buttons and teal underlined links, set in 13px Times with 10px Verdana capitals for everything that is interface. Keys, tabs and the pod were drawn as images at the time and are rebuilt here with borders, bevels and flat fills; the look gave way to wider glossy layouts from about 2004.", "url": "https://chrono.skin/s/v1-yk-4444", "preview_url": "https://chrono.skin/s/v1-yk-4444/specimen.html", "files": { "STYLE.md": "# Y2K futurism gallery, 1999 to 2003\n\n## Summary\n\nThe download and skins gallery that player, plug-in and desktop theme sites ran around the turn of the millennium: a 770px sheet with a control panel down its left side, holding the mark, a stack of navigation keys, a search box and a small read-out, and a content area that opens with one rounded pod for the pick of the week and continues as a tiled gallery of thumbnails. It is a white sheet on a charcoal screen with a dark brown head and outline, chartreuse keys and strips, one purple and one aqua, yellow buttons and teal underlined links, set in 13px Times with 10px Verdana capitals for everything that is interface. Keys, tabs and the pod were drawn as images at the time and are rebuilt here with borders, bevels and flat fills; the look gave way to wider glossy layouts from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 770px; `.ds-page__frame` is one sheet of that width centred horizontally in the viewport (`margin: 0 auto`), with a 2px outline in `--color-border-strong` and `--radius-page` corners, and `--fill-page` showing on both sides and below. Do not pin it to the left edge and do not stretch it. All text sits on the 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. Inside the sheet a page is one `.ds-page__deck`: two columns, the control panel `.ds-nav` at `--size-panel` 166px on the left and `.ds-page__content` (600px) on the right, with no gutter: a 1px line divides them and the panel's fill runs the full height of the page. `.ds-footer` closes the sheet across both columns.\n- There is no header across the top. The brand, the navigation, the search and the link blocks are all in the control panel; the only thing above the content is `.ds-topline`, a thin strip with a date or status on the left and tool links on the right.\n- `.ds-page__main` pads the content by `--space-5` (10px) and stacks blocks `--space-5` apart. Home page, in order: `.ds-hero` (the pod), a `.ds-section` heading over the `.ds-grid` gallery (four tiles across, two rows), a `.ds-page__pair` (three fifths and two fifths: a list beside a `.ds-page__stack` of two panels).\n- Inner pages (every page below the home page) keep the deck unchanged: the same control panel with its keys, search, read-out and `.ds-sidebar` link blocks, and the topline. The content has no pod and no gallery. It opens with `.ds-page-header`, which holds the `.ds-breadcrumb` above the title and replaces the hero, then an optional `.ds-stat` row, then `.ds-tabs` over the `.ds-table` they switch with `.ds-pagination` under it, then forms and further blocks, each under a `.ds-section` heading. Notices go between the stats and the tabs; a dialog and an empty state follow the table they belong to. A `.ds-page__pair` of a short list and one panel may close the page. Keep every page at least as tall as the control panel.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs, tabs and page keys; `--space-2` 2px is the gap between navigation keys and the vertical padding of keys, strips and title bars; `--space-3` 4px is the padding of table cells and list rows and the gap between tabs; `--space-4` 6px is the side margin inside the control panel, the gap between gallery tiles and stat cells, and the padding of panels and captions; `--space-5` 10px is the padding of the content area, the gap between blocks and between the groups of the control panel; `--space-6` 14px is the padding of the pod and list indent. There is no step above 14px.\n- Fixed sizes: `--size-mark` 34px is the tile of the brand mark; `--size-figure` 150px by `--size-figure-height` 104px the preview drawing in the pod; `--size-thumb` 58px the height of a gallery thumbnail; `--size-icon` 30px the drawing in it; `--size-search` 92px the search input; `--size-field` 200px a form text input; `--size-label` 104px the label column of a form; `--size-area` 56px the height of a textarea; `--size-dialog` 320px a dialog; `--size-led` 5px a lamp; `--size-bullet` 7px the square before a section heading.\n- Blocks on the content side are open: a heading on a 2px rule, then the content. Boxes are kept for things that are objects: the pod, gallery tiles, panels, the form, the table.\n- Views. The specimen is one example site, a gallery of player skins, in five views that share the control panel and the topline. `home` is the front page: the pod, the gallery of fresh skins, then the list of plug-ins beside the top five and the poll. `skins` is the list page: all skins as a tabbed table with pagination, then a short list of updates beside a panel. `myskins` is the member's page: page header with breadcrumb, stats, notices, tabbed table with status badges and the button row, the remove dialog it opens and the empty state of skins sent in. `submit` is the form page, closed by a pair of recent entries and the house rules. `workshop` is an article page: page header, the tutorial as prose and a row of further links.\n\n## Typography and colour roles\n\n- Serif text, sans-serif interface. `--font-body` and `--font-heading` are Times New Roman: running text, headings, the wordmark and link blocks. `--font-ui` is Verdana for keys, tabs, buttons, table heads, badges and all 10px text. `--font-mono` is Courier New for the read-out, code and numeric table columns.\n- `--text-base` 13px is body text and links. `--text-small` 10px (Verdana) is meta lines, the topline, the breadcrumb, table heads, captions under thumbnails, badges and the footer. `--text-ui` 10px bold capitals (`--ui-transform` uppercase, `--weight-ui` 700) is keys, tabs and buttons. `--text-large` 15px is the pod's line and lead paragraphs. `--text-h3` 13px (panel and link block titles), `--text-h2` 15px (section headings), `--text-h1` and `--text-display` 18px (page title, wordmark and pod title). Headings are bold, not uppercased, not tracked. Line heights are `normal`.\n- Links in running text, lists and tables are underlined (`--link-decoration`); quiet links in the control panel, the breadcrumb, tool columns and on strips are not (`--link-decoration-quiet` none).\n- `--color-page` #303030, charcoal, is outside the sheet. `--color-canvas` and `--color-surface` #ffffff are the content area, tiles, panels and table rows. `--color-surface-alt` #efefef fills the control panel, the foot of the pod, stat cells and the form. `--color-surface-strong` #e0e0e0 with `--color-heading` is the title strips of the link blocks.\n- `--color-bar` #482018, dark brown, with `--color-bar-text` white is the head of the control panel behind the brand, the pressed tab, the current page key, dialog titles and the footer. `--color-bar-alt` #d0d030, chartreuse, with `--color-bar-alt-text` black is the navigation keys, the topline, tabs, table heads and panel titles. Both are flat.\n- `--color-inverse` #303030 with `--color-inverse-text` white is the read-out in the control panel and one `.ds-panel--inverse` per page. Links inside it take the inverse text colour.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #686868 for dates, counts and captions; `--color-heading-alt` #623100, brown, for third-level headings and the bullet of section headings.\n- `--color-link` #006699, teal; `--color-link-quiet` #000000; visited #704090, hover #623100, active #482018. Links on a strip or bar take that strip's text colour.\n- `--color-accent` #704090, purple, with `--color-accent-text` white is the pressed navigation key, badges and the pod's kicker; `--color-accent-alt` #98d0d0 is a lamp colour only.\n- `--color-fill-1` to `--color-fill-4` (#efefef, the aqua #98d0d0, the chartreuse #d0d030, #e0e0e0) are the pod (`--color-fill-1`) and the thumbnails of the gallery tiles; they carry `--color-heading` drawings and text.\n- Lines: `--color-border` #c0c0c0 for quiet outlines and rules, `--color-border-strong` #482018, the brown, for the sheet outline, the pod, section rules, the page header rule, tiles, panels and the rim of buttons and keys; `--color-border-muted` #e0e0e0 between rows.\n- `--color-button` #ffc800, yellow, with black text is the primary button and the tile of the brand mark; `--color-button-secondary` #e0e0e0 with black text. Inputs are white with a #989898 line.\n- Each text colour is used only on its own fill: bar text on the bar, bar-alt text on the keys and strips, accent text on the accent, button text on the button, inverse text on the inverse block, notice text on the notice. `--color-danger` #ff0000 is text only on `--color-danger-surface` #ffffff (error notice, field error chip) and otherwise a rim or lamp colour; `--color-success` #709000 and `--color-warning` #ffc800 are lamp and rim colours, never text. `--color-notice` is the aqua with black text.\n- Surfaces: every fill is flat, with no gradient anywhere. Controls, panels and badges are square (`--radius-control`, `--radius-panel` and `--radius-pill` 0); only the sheet and the pod are rounded, by `--radius-page` 12px. `--border-width` 1px, `--border-width-strong` 2px, solid. `--shadow-control` is a 1px inset bevel, light on the top and left and dark on the bottom and right, and `--shadow-control-pressed` swaps the two; `--shadow-dialog` is a hard 3px offset; `--shadow-panel` and `--shadow-text` are `none`. `--focus-ring` is 1px dotted; `--transition` none.\n- Where the values come from: the charcoal, brown, chartreuse and aqua are one music channel's block colours; the teal link, the serif body text and the small bold Verdana labels come from two music and media player sites; the purple from a games console maker's front page; the yellow button from a player download site; square bevelled controls and flat fills are shared by the games and console sites; the large rounded sheet comes from a file-sharing client's page.\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()` 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__deck` is one page: `.ds-nav` and `.ds-page__content`. `.ds-page__main` stacks the blocks of the content area; `.ds-page__pair` puts two blocks side by side; `.ds-block` groups a heading with what it heads. `.ds-page__stack` stacks two small blocks in one column of a pair. `.ds-view` wraps one screen of the specimen, inside `.ds-page__content` under the topline; `.ds-view--home` marks the first. `.ds-topline` is the strip at the top of the content area, with `.ds-topline__links` of `.ds-topline__link` entries at its right end.\n- `.ds-brand`: the site's mark and name, at the head of the control panel, linking home, stacked and centred. `.ds-brand__mark` is a 34px tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, a 1px rim in `--color-bar-text` so that it stands off the bar under any palette, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px wordmark in `--color-bar-text`, because it sits on the bar fill, with the heading font, weight, tracking and transform tokens. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo, keeping the tile.\n- `.ds-nav`: the control panel, the full height of the page. `.ds-nav__head` is the bar-filled block with the `.ds-brand` and an optional `.ds-nav__tagline`. `.ds-nav__links` is the stack of `.ds-nav__link` keys, one per section, each with a small lamp at its right end; `is-current` presses one (accent fill, lamp lit). 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. Below the keys, in any order: the `.ds-nav__search` form (small input and a button), `.ds-nav__display` (a read-out of `.ds-nav__display-line` rows in the monospace on the inverse tone), `.ds-sidebar` blocks, and `.ds-nav__group`, a wrapper that gives a panel, notices or an empty state the panel's side margin.\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 block in the content area: `.ds-section__title` (15px, with a square bullet in the second heading colour) on a 2px rule, with an optional `.ds-section__more` link at the right end (written with a trailing `>>`).\n- `.ds-hero`: the pod, one per home page: a rounded box in `--color-fill-1` with a 2px outline. `.ds-hero__body` has the `.ds-hero__figure` (inline SVG drawing of the featured item) on the left and the pitch on the right: `.ds-hero__kicker` (accent chip), `.ds-hero__title` (18px), `.ds-hero__text` (15px) and `.ds-hero__actions` with one `.ds-button` and one link. `.ds-hero__orbit` is the foot of the pod: three `.ds-hero__satellite` chips, each a bold `.ds-hero__satellite-value` and a few words. No photograph, no full-width banner.\n- `.ds-page-header`: head of an inner page, first thing in the content area, once per page: the breadcrumb, `.ds-page-header__title` (18px, 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, on a 2px rule.\n- `.ds-stat`: the row of three to five gauges under the page header. `.ds-stat` is the row; each figure is a `.ds-stat__item`, a separate cell with a 2px left edge, holding an 18px bold `.ds-stat__value` over a 10px muted `.ds-stat__label`. 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 15px first paragraph and `.ds-prose__byline` for the 10px credit.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the text-coloured link, not underlined, for navigation inside content. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled yellow key, 10px bold capitals, for the main action. `.ds-button--secondary` is the grey key. `.ds-button--danger` is the secondary key with a rim and a lamp in `--color-danger`, for remove and delete; the label keeps the secondary text colour. `disabled` or `is-disabled` flattens it to `--color-disabled`; `is-hover` lightens it. Group with `.ds-buttons`.\n- `.ds-form`: outlined block of `.ds-form__row` pairs divided by hairlines: a right-aligned bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small` 92px, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip beside the field marks a bad value. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the button row aligned under the controls.\n- `.ds-table`: outlined data table: 10px bold `th` on the bar-alt strip, rows on the surface divided by faint hairlines, `.ds-table__num` right-aligned in the monospace for figures. `.ds-table__caption` is the 10px line under it.\n- `.ds-tabs`: a row of separate `.ds-tabs__tab` keys in the bar-alt fill; `is-current` takes the bar fill. Use it directly above the table or list it switches.\n- `.ds-list`: item list on the open sheet. Each `.ds-list__item` has a `.ds-list__head` line with the bold `.ds-list__title` link on the left and the 10px `.ds-list__meta` at the right end, and a `.ds-list__text` summary under it; rows are divided by a faint hairline. `.ds-list--compact` is the one-line variant inside panels, title left and figure right.\n- `.ds-panel`: outlined module: `.ds-panel__title` on the bar-alt strip over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__small`, `.ds-panel__option` (poll choice), `.ds-panel__actions`. `.ds-panel--inverse` is the dark block, at most one per page; in the control panel wrap it in or combine it with `.ds-nav__group`.\n- `.ds-sidebar`: a link block inside the control panel: repeats `.ds-sidebar__title` (strong strip, 13px bold) over a `.ds-sidebar__list` of `.ds-sidebar__item` rows holding `.ds-link--quiet` links, optionally followed by a badge. On an inner page it lists the pages of the current section and comes directly under the keys.\n- `.ds-grid`: the gallery, four tiles across, `--space-4` apart. Each `.ds-grid__cell` is an outlined tile: `.ds-grid__thumb`, a 58px thumbnail tinted with `--1`, `--2`, `--3` or the base fill and holding a `.ds-grid__icon` drawing, over `.ds-grid__caption` with a bold 13px `.ds-grid__title` link and a 10px muted `.ds-grid__text` line. Fill whole rows of four.\n- `.ds-badge`: 10px bold accent chip (\"NEW\"). Status labels are a plain outlined chip with a round lamp: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `.ds-badge--alt` for a neutral marker; the lamp and rim take the status colour, the word stays in `--color-text`. The lamp has a 1px ring in `--color-text`, so it shows on a chip of any colour. One or two words, in a table's status column or after a title.\n- `.ds-notice`: short message in an outlined box with a 2px left edge, starting with a `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rim on the danger surface. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of separate small keys: `.ds-pagination__link` on quiet links (`<< Previous`, numbers, `Next >>`), the current page as `.ds-pagination__current` in the bar fill.\n- `.ds-dialog`: a small window in the page flow: 320px, 2px outline, hard offset shadow, `.ds-dialog__title` in the bar fill, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat area it sits on. No blur, no floating.\n- `.ds-empty`: dashed-outline block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: one strip in the bar fill across the whole sheet: `.ds-footer__links` of `.ds-footer__link` entries on the left, the `.ds-footer__text` copyright line on the right.\n\n## Never\n\n- `content-width <= 770px`: text stays inside the fixed sheet.\n- `palette-colours <= 18`: white, greys, charcoal, brown, chartreuse, aqua, purple, yellow, teal, plus status lamps.\n- `font-size <= 18px`: the wordmark, the page title and the pod title are the largest text.\n- `font-size >= 10px`: small text is 10px and nothing is smaller.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 3`: Times, Verdana for interface text, a monospace.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 20%`: only interface labels are capitals: keys, tabs, buttons, table heads, badges.\n- `border-radius <= 12px`: controls and panels are square; 12px on the sheet and the pod.\n- `border-width <= 2px`: hairlines, and 2px for the sheet, the pod, section rules and the dialog.\n- `box-shadow-blur <= 0px`: the only shadows are hard bevels and a hard offset.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: every fill is flat.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new control for the left side copies a block of `.ds-nav` and keeps the panel's `--space-4` side margin; a new content block is a `.ds-section` heading on its rule with open content under it; a new kind of gallery copies `.ds-grid` and its tile; a new module copies `.ds-panel` (1px outline, title strip in `--fill-bar-alt`, body padded `--space-4`); a new inner page copies one of the specimen's inner views (`.ds-page-header` with the breadcrumb, blocks); 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 light or the bar dark: another palette may reverse them. Keep navigation in the control panel and never add a header bar across the top, keep one pod per home page, keep text between 10px and 15px apart from 18px titles, and separate things with rules and outlines, never with soft shadows or large cards.\n", "components.css": "/* Layout tokens (structure part). The gallery page: a control panel down\n the left side with the brand and the navigation keys, and a content\n area of one pod and a tiled gallery. */\n:root {\n --size-page: 770px;\n --size-panel: 166px;\n --size-mark: 34px;\n --size-figure: 150px;\n --size-figure-height: 104px;\n --size-thumb: 58px;\n --size-icon: 30px;\n --size-search: 92px;\n --size-label: 104px;\n --size-field: 200px;\n --size-area: 56px;\n --size-dialog: 320px;\n --size-led: 5px;\n --size-bullet: 7px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 14px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-6) var(--space-3);\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The fixed sheet, 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-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n/* One page: the control panel on the left, the content on the right. */\n.ds-page__deck {\n display: grid;\n grid-template-columns: var(--size-panel) minmax(0, 1fr);\n}\n.ds-page__content {\n min-width: 0;\n}\n.ds-page__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5);\n}\n/* Two blocks side by side in the content area. */\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n/* Small blocks stacked in one column of a pair. */\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-block {\n display: block;\n}\n/* The strip along the top of the content area: date left, tools right. */\n.ds-topline {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-topline__links {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-topline__link,\n.ds-topline__link:visited {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-topline__link:hover,\n.ds-topline__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- views ---------- */\n/* The specimen is one example site; one view shows at a time. */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n}\n\n/* ---------- brand ---------- */\n/* The site's mark and name, at the head of the control panel. The mark\n sits on a tile dressed like the primary button, so every palette and\n surface reskins it. */\n.ds-brand {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-bar-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- nav: the control panel ---------- */\n.ds-nav {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: 0 0 var(--space-5);\n background: var(--color-surface-alt);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__head {\n padding: var(--space-5) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tagline {\n display: block;\n margin: var(--space-3) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n/* The keys: one full-width key per section, stacked. */\n.ds-nav__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link::after {\n content: \"\";\n width: var(--size-led);\n height: var(--size-led);\n border: var(--border-width) var(--border-style) var(--color-bar-alt-text);\n border-radius: 50%;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The pressed key: accent fill, lamp lit. */\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(#skins:target) .ds-nav__link[href=\"#skins\"],\n.ds-page:has(#myskins:target) .ds-nav__link[href=\"#myskins\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"],\n.ds-page:has(#workshop:target) .ds-nav__link[href=\"#workshop\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-nav__link.is-current::after,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::after,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::after,\n.ds-page:has(#skins:target) .ds-nav__link[href=\"#skins\"]::after,\n.ds-page:has(#myskins:target) .ds-nav__link[href=\"#myskins\"]::after,\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"]::after,\n.ds-page:has(#workshop:target) .ds-nav__link[href=\"#workshop\"]::after {\n background: var(--color-accent-text);\n border-color: var(--color-accent-text);\n}\n.ds-nav__group {\n margin: 0;\n padding: 0 var(--space-4);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0 var(--space-4);\n}\n/* The display window: read-out lines on the inverse tone. */\n.ds-nav__display {\n margin: 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__display-line {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\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 on the sheet with a square bullet, standing on a rule. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__title::before {\n content: \"\";\n display: inline-block;\n width: var(--size-bullet);\n height: var(--size-bullet);\n margin-right: var(--space-4);\n background: var(--color-heading-alt);\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 pod ---------- */\n/* One large rounded pod: a preview window on the left, the pitch on the\n right, and a row of small satellites along its foot. */\n.ds-hero {\n overflow: hidden;\n background: var(--color-fill-1);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-hero__body {\n display: grid;\n grid-template-columns: var(--size-figure) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-6) var(--space-6) var(--space-5);\n}\n.ds-hero__figure {\n display: block;\n width: var(--size-figure);\n height: var(--size-figure-height);\n color: var(--color-heading);\n}\n.ds-hero__kicker {\n display: inline-block;\n margin: 0 0 var(--space-3);\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__text {\n margin: var(--space-3) 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-hero__orbit {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4) var(--space-6);\n list-style: none;\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-hero__satellite {\n flex: 1 1 0;\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n text-align: center;\n}\n.ds-hero__satellite-value {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-3) 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: var(--space-2) 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/* Gauges: separate cells, each with a strong left edge, figure beside\n its label. */\n.ds-stat {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__value {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n 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: 50%;\n vertical-align: middle;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n font-size: var(--text-small);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n/* Error text always sits on its own chip of the error surface. */\n.ds-form__error {\n display: inline-block;\n margin: 0 0 0 var(--space-3);\n padding: 0 var(--space-4);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-danger);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-5) 0 var(--space-3) calc(var(--size-label) + var(--space-5));\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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}\n\n/* ---------- tabs ---------- */\n/* Separate keys in a row; the pressed one takes the bar fill. */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\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__tab {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\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-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- list ---------- */\n/* Rows with the title on the left and the meta at the right end of the\n same line, the summary under them. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__head {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\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 flex: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list--compact .ds-list__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-4);\n}\n.ds-list--compact .ds-list__title {\n font-weight: var(--weight-body);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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);\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}\n.ds-panel--inverse .ds-panel__title {\n background: transparent;\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\n/* ---------- sidebar ---------- */\n/* A link block inside the control panel, under the keys. */\n.ds-sidebar {\n margin: 0 var(--space-4);\n overflow: hidden;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) 0 var(--space-3);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) var(--space-4);\n}\n\n/* ---------- grid ---------- */\n/* The gallery: tiles of a tinted thumbnail over a caption, four across. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n overflow: hidden;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n}\n.ds-grid__thumb {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--size-thumb);\n background: var(--color-fill-4);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell--1 .ds-grid__thumb { background: var(--color-fill-1); }\n.ds-grid__cell--2 .ds-grid__thumb { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__thumb { background: var(--color-fill-3); }\n.ds-grid__icon {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__caption {\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n/* Status labels: a lamp in the status colour on a plain chip. The lamp has\n a ring in the text colour so that it shows on any chip, and the status\n colour never carries text. */\n.ds-badge--alt,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-body);\n}\n.ds-badge--alt::before,\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n vertical-align: middle;\n}\n.ds-badge--alt { border-color: var(--color-accent-alt); }\n.ds-badge--success { border-color: var(--color-success); }\n.ds-badge--warning { border-color: var(--color-warning); }\n.ds-badge--danger { border-color: var(--color-danger); }\n.ds-badge--alt::before { background: var(--color-accent-alt); }\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-left-width: var(--border-width-strong);\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n/* Separate square keys, centred; the current page takes the bar fill. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) 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: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-pagination__current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A small window in the page flow: title bar, message, buttons. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n/* One strip across the whole sheet: links left, copyright right. */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link,\n.ds-footer__link:visited {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__text {\n margin: 0;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: Y2K futurism gallery, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n\n
\n
\n \n \n chronoskin\n \n skins, plug-ins and visuals for your player\n
\n \n
\n \n \n
\n

\n skins2,148\n plug-ins312\n online8,316\n

\n \n
\n\n
\n
\n Friday 1 June 2001 | signed in as rowan\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 Skin of the week\n

Chromeshell: your player in brushed metal.

\n

Forty hand-drawn parts, a working level meter and a matching desktop theme.

\n
\n Download skin\n See all screens >>\n
\n
\n
\n
    \n
  • 640 KB zipped
    • \n
  • 48,210 downloads
    • \n
  • 4.6 / 5 from 912 votes
    • \n
\n
\n\n
\n
\n

Fresh skins

\n all 2,148 >>\n
\n
\n
\n
\n
\n

Chromeshell

\n

by vantor | 640 KB

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

Night drive

\n

by rowan | 310 KB

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

Low orbit

\n

by kessa | 420 KB

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

Brushed steel

\n

by imre | 512 KB

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

Sinewave

\n

by dag | 280 KB

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

Capsule

\n

by oona | 390 KB

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

Blueprint

\n

by tavi | 450 KB

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

Meridian

\n

by sol | 365 KB

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

Latest plug-ins

\n more >>\n
\n
    \n
  • \n Pulse visualiser pack 3 New 31 May | 1.2 MB\n Twelve scopes and tunnels that follow the beat.\n
    • \n
  • \n Crossfader 2 30 May | 210 KB\n Blends the end of one track into the next.\n
    • \n
  • \n Tray remote 28 May | 96 KB\n Play, pause and skip from the system tray.\n
    • \n
  • \n Lyric sheet 26 May | 150 KB\n Shows the words in a small window as the song plays.\n
    • \n
\n
\n
\n
\n

Top five this week

\n \n
\n

Counted over the last seven days.

\n
\n
\n
\n

Quick poll

\n
\n

How many skins do you keep?

\n \n \n \n
\n \n Results\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. Skins
    4. \n
  4. >
    5. \n
  5. All styles
    6. \n
\n

Skins

\n

All 2,148 skins, the most fetched this week first.

\n
\n
\n Submit a skin\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SkinMakerStyleSizeThis week 
Chromeshell NewvantorMetal and chrome640 KB48,210Keep
Low orbitkessaGlass420 KB19,774Keep
Night driverowanSci-fi consoles310 KB12,035Keep
CapsuleoonaRetro hi-fi390 KB9,460Keep
BlueprinttaviMinimal450 KB7,118Keep
Brushed steelimreMetal and chrome512 KB6,340Keep
SinewavedagGlass280 KB5,871Keep
MeridiansolMinimal365 KB5,206Keep
Harbour staticrowanHand drawn298 KB4,655Keep
Valve glowimreRetro hi-fi471 KB4,102Keep
\n \n
\n\n
\n
\n
\n

Just updated

\n more >>\n
\n
    \n
  • \n Low orbit 1.2 31 May | 420 KB\n A new equaliser window and sharper small type.\n
    • \n
  • \n Capsule 2 29 May | 390 KB\n Now with a playlist window to match.\n
    • \n
\n
\n
\n

Your skins

\n
\n

Fourteen kept, three in the queue.

\n Open my skins\n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Skins
    4. \n
  4. >
    5. \n
  5. My skins
    6. \n
\n

My skins

\n

Skins you have fetched, queued or sent in.

\n
\n
\n Add a skin\n
\n
\n\n
    \n
  • 14Skins kept
    • \n
  • 6.2 MBOn disk
    • \n
  • 3In the queue
    • \n
  • 0Sent in by you
    • \n
\n\n
\n

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

\n

Error: The mirror did not answer for Blueprint. Pick another one.

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
SkinStyleSizeStatus 
ChromeshellMetal and chrome640 KBInstalledFetch again
Night driveSci-fi consoles310 KBQueuedStart
Low orbitGlass420 KBInstalledFetch again
BlueprintMinimal450 KBBrokenRemove
CapsuleRetro hi-fi390 KBInstalledFetch again
\n
\n \n \n \n \n
\n
\n\n
\n
\n

Remove skin

\n
\n

Take Blueprint off your list? The file itself stays on your disk.

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

Sent in by you

\n how to draw one >>\n
\n
\n

You have not sent in a skin yet.

\n Submit a skin\n
\n
\n\n
\n
\n\n \n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Skins
    4. \n
  4. >
    5. \n
  5. Submit a skin
    6. \n
\n

Submit a skin

\n

Send your skin to the desk. Good ones go in the gallery within a week.

\n
\n
\n Back to my skins\n
\n
\n\n
\n
\n

Skin details

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

Sent in this week

\n all skins >>\n
\n
    \n
  • \n Valve glow 30 May | 471 KB\n Warm dials and a wooden case, by imre.\n
    • \n
  • \n Meridian 28 May | 365 KB\n Thin lines on white, by sol.\n
    • \n
\n
\n
\n

House rules

\n
\n

Your own drawings only, one zip file, 1 MB at most.

\n

The desk looks at every skin. Allow a week.

\n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Workshop
    4. \n
  4. >
    5. \n
  5. Drawing your first skin
    6. \n
\n

Workshop

\n

Tutorials from the skins desk for people who make their own.

\n
\n
\n Submit a skin\n
\n
\n\n
\n
\n

Tutorial

\n archive >>\n
\n
\n

Drawing your first skin

\n

By the skins desk, 31 May

\n

A skin is a folder of small pictures and one text file. An evening is enough to make the player your own.

\n

What you need

\n

Any paint program that saves bitmaps will do. Work at actual size: the main window is only 275 pixels wide, so every pixel shows.

\n
    \n
  • The skin builder kit
    • \n
  • A paint program
    • \n
  • A zip tool
    • \n
\n

Drawing the parts

\n

Start with the main window and leave the buttons for last. Draw each button twice, up and pressed, and keep both on the same sheet.

\n

Testing it

\n

Zip the folder, rename it and start the player with chronoskin --skin test.zip. Broken parts show in plain grey.

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

Read next

\n
\n

\n Colour on small screens\n Installing a skin\n A working level meter\n Send yours in\n Front page\n

\n
\n\n
\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.portal.s04.p04.t04.u04\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"y2k-futurism\",\n \"years\": [\n 1999,\n 2003\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-4444\",\n \"short\": \"v1-yk-4444\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #303030;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #efefef;\n --color-surface-strong: #e0e0e0;\n --color-bar: #482018;\n --color-bar-text: #ffffff;\n --color-bar-alt: #d0d030;\n --color-bar-alt-text: #000000;\n --color-inverse: #303030;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #686868;\n --color-heading: #000000;\n --color-heading-alt: #623100;\n --color-link: #006699;\n --color-link-quiet: #000000;\n --color-link-visited: #704090;\n --color-link-hover: #623100;\n --color-link-active: #482018;\n --color-border: #c0c0c0;\n --color-border-strong: #482018;\n --color-border-muted: #e0e0e0;\n --color-accent: #704090;\n --color-accent-text: #ffffff;\n --color-accent-alt: #98d0d0;\n --color-fill-1: #efefef;\n --color-fill-2: #98d0d0;\n --color-fill-3: #d0d030;\n --color-fill-4: #e0e0e0;\n --color-button: #ffc800;\n --color-button-text: #000000;\n --color-button-hover-text: #482018;\n --color-button-secondary: #e0e0e0;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #989898;\n --color-disabled: #e0e0e0;\n --color-disabled-text: #989898;\n --color-danger: #ff0000;\n --color-danger-surface: #ffffff;\n --color-success: #709000;\n --color-warning: #ffc800;\n --color-notice: #98d0d0;\n --color-notice-text: #000000;\n --color-focus: #006699;\n --color-shadow: #303030;\n --color-overlay: #989898;\n}\n\n/* @part type */\n:root {\n --font-body: \"Times New Roman\", Times, serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 15px;\n --text-display: 18px;\n --text-h1: 18px;\n --text-h2: 15px;\n --text-h3: 13px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 12px;\n --shadow-panel: none;\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, white 60%, transparent), inset -1px -1px 0 color-mix(in srgb, black 30%, transparent);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, white 80%, transparent), inset -1px -1px 0 color-mix(in srgb, black 30%, transparent);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, black 30%, transparent), inset -1px -1px 0 color-mix(in srgb, white 60%, transparent);\n --shadow-dialog: 3px 3px 0 color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 70%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }