{ "id": "v1-yk-5bb4", "long_id": "v1.y2k-futurism.landing.s05.p11.t11.u04", "name": "Y2K futurism stage, 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": "landing", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The front page that game studios, entertainment channels and console makers ran around the turn of the millennium: a dark 780px sheet whose bands run from edge to edge and touch, opened by one lit stage that shows the title of the season. Under the stage sits a strip of capsule sections, then the page is cut in two halves and a row of small modules, all divided by rules, not gutters. Bars fade sideways into the dark, buttons are glowing capsules, and the type is a small Helvetica with condensed bold headings and labels; the look gave way to wide video-led pages from about 2004.", "url": "https://chrono.skin/s/v1-yk-5bb4", "preview_url": "https://chrono.skin/s/v1-yk-5bb4/specimen.html", "files": { "STYLE.md": "# Y2K futurism stage, 1999 to 2003\n\n## Summary\n\nThe front page that game studios, entertainment channels and console makers ran around the turn of the millennium: a dark 780px sheet whose bands run from edge to edge and touch, opened by one lit stage that shows the title of the season. Under the stage sits a strip of capsule sections, then the page is cut in two halves and a row of small modules, all divided by rules, not gutters. Bars fade sideways into the dark, buttons are glowing capsules, and the type is a small Helvetica with condensed bold headings and labels; the look gave way to wide video-led pages from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 780px; `.ds-page__frame` is one sheet of that width centred horizontally in the viewport (`margin: 0 auto`) with a 1px outline in `--color-border-strong`, 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` (16px) above and `--space-3` (4px) at the sides. Order from the top: `.ds-nav` (one bar with the brand at the left and the section links as a line of text at the right, then a thin strip with the news line and the search), the bands of the page, `.ds-footer`. There are no side columns on the home page.\n- Bands are flush: each runs the full width of the sheet, touches the next and is divided from it by a rule. The home page bands, in order: `.ds-hero` (the stage, closed by a strip of four facts), `.ds-grid` (the strip of five capsule sections), `.ds-page__halves` (two equal halves divided by a hairline: a dated list at the left, a table at the right, each under a `.ds-section` heading), `.ds-page__band` (three equal modules on the alternate surface) and one `.ds-panel--inverse` band with a sign-up field.\n- The rhythm is one, five, two, three, one. Text is left-aligned throughout; nothing is centred except the empty state.\n- Inner pages (every page below the home page) keep the sheet, the bar with its strip and the footer, and have no stage, no capsule strip and no halves. `.ds-breadcrumb` sits directly under the strip as the first thing of the page. `.ds-page-header` follows as a low band in the stage's fill and replaces the hero; an article page leaves it out because the article carries its own title. Below it `.ds-page__split` has two columns without a gutter: `.ds-page__main` (583px), which stacks the working blocks `--space-5` apart (an optional `.ds-stat` row, notices, `.ds-tabs` joined to the `.ds-table` they filter with `.ds-pagination` or the button row under it, a form), and `.ds-page__side` at `--size-side` 196px on the right, a flush column on the alternate surface behind a hairline that holds the `.ds-sidebar` links of the section and one to three small `.ds-panel` modules. The side column always runs the full height of the page.\n- Spacing scale: `--space-1` 1px is the vertical padding of navigation links, tabs and small inputs; `--space-2` 2px is the vertical padding of buttons, inputs, strips, title bars and compact rows; `--space-3` 4px is the padding of table cells, notices and capsule sections and the gap between tabs; `--space-4` 6px is the padding of panels and list rows and the gap between buttons and capsule sections; `--space-5` 10px is the padding of the side column, the gap between stacked blocks and between modules; `--space-6` 16px is the side margin of every band and the padding of the dialog backdrop; `--space-7` 24px is the side padding of the stage only. There is no step above 24px.\n- Fixed sizes: `--size-stage` 196px is the least height of the stage; `--size-figure` 270px by `--size-figure-height` 180px the line drawing on it; `--size-mark` 30px the tile of the brand mark; `--size-icon` 24px the drawing in a capsule section; `--size-date` 48px the date column of the list; `--size-search` 100px a search or e-mail input; `--size-field` 210px a form text input; `--size-label` 112px the label column of a form; `--size-area` 60px the height of a textarea; `--size-dialog` 330px a dialog; `--size-led` 6px a status lamp.\n- Things are separated by rules: a 3px rule (`--border-width-strong`) under the stage, under every section heading, above tabs, forms and the footer, and hairlines between rows, halves and columns. Only modules, the dialog and the empty state are boxes.\n- Views. The specimen is one example site, a games studio, in five views. `home` is the front page: stage, capsule strip, the halves with the latest news and the release dates, three modules and the letter band. `games` is the catalogue: page header, a filtered table with pagination, and the side column with the kinds of game. `news` is an article of the studio diary: the prose, a row of further links, and the diary index in the side column. `club` is the member's shelf: page header, stats, notices, the filtered table with status badges and the button row, the remove dialog it opens, and in the side column the club links, two modules and the empty state of saved replays. `join` is the membership form.\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- Verdana for text, a monospace for headings and for the interface, like a terminal read-out. `--font-heading` is Courier New bold, uppercased by `--heading-transform`; `--font-ui` is Courier New too, so navigation, tabs, buttons, inputs and table heads are monospaced; `--font-body` is Verdana.\n- `--text-base` 10px, `--text-ui` 11px (the monospace runs small, so it is set one step up), `--text-small` 9px, `--text-large` 12px. `--text-h3` 11px, `--text-h2` 13px, `--text-h1` 16px, `--text-display` 18px.\n- Interface text is regular weight and not uppercased; nothing is tracked.\n- Links are not underlined (`--link-decoration` and `--link-decoration-quiet` are `none`); they are told from text by colour and underline on hover only.\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__halves` holds two `.ds-page__half` columns; `.ds-page__band` holds three equal modules; `.ds-page__split` is the inner page, `.ds-page__main` beside `.ds-page__side`. `.ds-block` groups a heading or filter strip with the block it heads so they touch. `.ds-view` wraps one screen of the specimen; `.ds-view--home` marks the first.\n- `.ds-nav`: site header. `.ds-nav__top` is the bar with the `.ds-brand` at the left and `.ds-nav__links` at the right: `.ds-nav__item` entries divided by hairlines, each a `.ds-nav__link`; `is-current` lights the entry in the accent colour. `.ds-nav__sub` is the thin strip under it with `.ds-nav__news` (a `.ds-nav__news-label` and one line with a `.ds-nav__sub-link`) and the `.ds-nav__search` form (`.ds-nav__search-label`, a small input, a button). The three `.ds-view` rules show one view at a time, and one rule per view lights the navigation entry whose `href` names the view that is showing (the home entry when none is named); in a real multi-page site set `is-current` on the entry instead.\n- `.ds-brand`: the site's mark and name, at the left of the bar, linking home. `.ds-brand__mark` is a 30px tile dressed like the primary button (`--fill-button` gloss, `--color-button-text` for the drawing, 1px `--color-border-strong` rim, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px wordmark in the bar text colour, with the heading font, weight, tracking and transform tokens. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo, keeping the tile.\n- `.ds-breadcrumb`: inner pages only. 10px trail on a strip under the header, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-sidebar`: an open block of links in the side column. Repeats `.ds-sidebar__title` (12px on a 3px rule) over a `.ds-sidebar__list` of `.ds-sidebar__item` rows on hairlines holding `.ds-link--quiet` links; mark a promoted entry with a `.ds-badge` after the link.\n- `.ds-section`: the heading of a half or block: `.ds-section__title` (14px) on a 3px rule in the bar colour, with an optional `.ds-section__more` link at the right end.\n- `.ds-hero`: the stage, one per home page, full width. `.ds-hero__body` is two columns: text and `.ds-hero__figure`, an inline SVG line drawing in the light. The text is `.ds-hero__kicker` (accent capsule), `.ds-hero__title` (18px), `.ds-hero__text` (14px) and `.ds-hero__actions` with one `.ds-button` and one link. `.ds-hero__facts` closes it: three or four `.ds-hero__fact` cells of 10px text divided by hairlines. No photograph.\n- `.ds-page-header`: head of an inner page, a low band in the stage's fill under the breadcrumb, once per page: `.ds-page-header__title` (18px, the page's only h1) over one line of `.ds-page-header__text`, with `.ds-page-header__action` at the right holding one `.ds-button`.\n- `.ds-stat`: the row of three to five counters at the top of the main column. `.ds-stat` is the row; each figure is a `.ds-stat__item`, a cell on the alternate surface with a 3px rule at its left, holding an 18px `.ds-stat__value` over a 10px muted `.ds-stat__label`. No icons, no trend arrows.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the 14px 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 pale link without underline for navigation inside content. `.ds-links` lays a row of links out.\n- `.ds-button`: glowing capsule, 12px condensed bold uppercase, for the main action. `.ds-button--secondary` is the grey capsule without glow. `.ds-button--danger` is the secondary capsule with a rim and a lamp in `--color-danger`, for remove and delete; the label keeps the secondary text colour. `disabled` or `is-disabled` flattens it to `--color-disabled`; `is-hover` brightens gloss and glow. Group with `.ds-buttons`.\n- `.ds-form`: outlined block under a 3px rule. `.ds-form__row` pairs on hairlines: bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small` 100px, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the button row aligned under the controls.\n- `.ds-table`: open data table: a head row in the bar fill with 12px uppercase labels, rows alternating the two surfaces on hairlines, `.ds-table__num` right-aligned in the monospace for figures. `.ds-table__caption` is the 10px line under it.\n- `.ds-tabs`: a filter strip on the alternate surface under a 3px rule, holding `.ds-tabs__tab` capsules in the secondary bar fill; `is-current` takes the accent. Use it directly above the table it filters.\n- `.ds-list`: dated list. Each `.ds-list__item` has a `.ds-list__date` in a 48px column, then a bold underlined `.ds-list__title`, a `.ds-list__text` summary and a 10px `.ds-list__meta` line; rows are divided by hairlines. `.ds-list--compact` is the one-line variant inside modules, title left and figure right, without the date.\n- `.ds-panel`: module: outlined, `.ds-panel__title` bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list`, `.ds-panel__small`, `.ds-panel__option` (poll choice), `.ds-panel__field` (input with button), `.ds-panel__actions`. `.ds-panel--alt` has the blue title. `.ds-panel--inverse` is the pale band across the sheet, title and one line at the left and a `.ds-panel__field` at the right, at most one per page.\n- `.ds-grid`: the strip of capsule sections under the stage: five `.ds-grid__cell` capsules in one row, 6px apart, tinted with `--1`, `--2`, `--3` or the base fill; each holds a `.ds-grid__icon` (inline SVG), a 12px `.ds-grid__title` link, which keeps `--color-heading` because a cell fill may be close to the link colour, and one 10px `.ds-grid__text` line.\n- `.ds-badge`: 10px bold uppercase accent capsule (\"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 marker; the lamp and rim take the status colour, the word stays in `--color-text`. One or two words each, in a table's status column or after a title. The lamp has a 1px ring in `--color-text`, so it shows on a chip of any colour.\n- `.ds-notice`: one-line message on a 3px rule at its left, starting with a `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rule on the danger surface. Stack several in `.ds-notices`.\n- `.ds-pagination`: right-aligned row of small outlined capsules: `.ds-pagination__link` on quiet links (`Previous`, numbers, `Next`), the current page as accent-filled `.ds-pagination__current`.\n- `.ds-dialog`: a small window in the page flow: 330px, 3px outline, `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat dark area it sits on. No blur behind it, 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 secondary bar fill under a 3px rule: `.ds-footer__links` with `.ds-footer__link` entries at the left, the `.ds-footer__text` copyright line at the right.\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` (`__tip`): a small label shown on hover or focus of a word.\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- `row-gap <= 2px`: rows of lists and tables touch.\n- `block-gap <= 16px`: bands touch; blocks in a column sit 10px apart.\n- `content-width <= 780px`: 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 >= 9px`: nothing is set below 9px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 2`: Verdana and one monospace, which also sets the headings and the interface.\n- `letter-spacing <= 0px`: no text is tracked.\n- `underlined-links <= 10%`: links are not underlined until hovered.\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 band copies `.ds-page__halves` or `.ds-page__band` (full width, flush, divided by a rule from its neighbours); a new stretch of content starts with a `.ds-section` heading on its 3px rule and puts flat content under it; a new module copies `.ds-panel` (1px outline, title bar in `--fill-bar` or `--fill-bar-alt`, body padded `--space-4`); a new inner page copies one of the specimen's inner views (breadcrumb, `.ds-page-header`, `.ds-page__split`); a new control copies `.ds-button` or `.ds-form__input` with its capsule radius; a new status mark copies the lamp chip of `.ds-badge--success`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Pair every text token with its own fill and with no other, and never use a status colour as a text colour. Keep text between 10px and 14px apart from 14px section headings and 18px titles, keep bands flush and left-aligned, and separate things with a rule, a bar or a hairline, never with whitespace, soft drop shadows or large cards.\n", "components.css": "/* Layout tokens (structure part). Taken from the references' band heights,\n strip paddings and column cuts. */\n:root {\n --size-page: 780px;\n --size-side: 196px;\n --size-stage: 196px;\n --size-figure: 270px;\n --size-figure-height: 180px;\n --size-mark: 30px;\n --size-icon: 24px;\n --size-date: 48px;\n --size-search: 100px;\n --size-label: 112px;\n --size-field: 210px;\n --size-area: 60px;\n --size-dialog: 330px;\n --size-led: 6px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 16px;\n --space-7: 24px;\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. Its bands run from edge to edge\n and touch; rules divide them, not gutters. */\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/* Two equal halves that share a band, divided by a hairline. */\n.ds-page__halves {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__half {\n min-width: 0;\n padding: var(--space-5) var(--space-6) var(--space-6);\n}\n.ds-page__half + .ds-page__half {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n/* A band of equal modules. */\n.ds-page__band {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6);\n background: var(--color-surface-alt);\n}\n/* Inner page: the working column and a flush side column on the right. */\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n}\n.ds-page__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n padding: var(--space-5) var(--space-6) var(--space-6);\n}\n.ds-page__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- views ---------- */\n/* The specimen is one example site; one view shows at a time. */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n margin: 0;\n padding: var(--space-4) 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-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-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 text-shadow: var(--shadow-text);\n}\n\n/* ---------- nav ---------- */\n/* One bar: the brand at the left, the section links as a line of text at\n the right. A thin strip under it carries the news line and the search. */\n.ds-nav {\n display: block;\n}\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item + .ds-nav__item {\n margin-left: var(--space-3);\n padding-left: var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-bar-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-bar-text);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: underline;\n}\n/* The current section is lit in the accent colour. */\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(#games:target) .ds-nav__link[href=\"#games\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#club:target) .ds-nav__link[href=\"#club\"],\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-nav__sub {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__news {\n margin: 0;\n min-width: 0;\n}\n.ds-nav__news-label {\n margin-right: var(--space-4);\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__sub-link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__search {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search-label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-6);\n list-style: none;\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- sidebar ---------- */\n/* An open block of links in the side column: a heading on a heavy rule,\n then rows divided by hairlines. */\n.ds-sidebar {\n display: block;\n}\n.ds-sidebar__title {\n margin: 0;\n padding: 0 0 var(--space-2);\n color: var(--color-heading);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list:last-child {\n margin-bottom: 0;\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- section head ---------- */\n/* A heading standing on a heavy rule in the bar colour. */\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-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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__more {\n font-size: var(--text-small);\n}\n\n/* ---------- hero ---------- */\n/* The stage: a lit band the width of the sheet, the title at the left and\n a line drawing in the light at the right. A strip of facts closes it. */\n.ds-hero {\n background-color: var(--color-fill-1);\n background-image: radial-gradient(circle at 76% 46%, color-mix(in srgb, var(--color-fill-3) 85%, transparent) 0, transparent 52%);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-figure);\n gap: var(--space-6);\n align-items: center;\n min-height: var(--size-stage);\n padding: var(--space-5) var(--space-7);\n}\n.ds-hero__kicker {\n display: inline-block;\n margin: 0 0 var(--space-4);\n padding: 0 var(--space-5);\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-ui);\n font-weight: var(--weight-ui);\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-6);\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__facts {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-hero__fact {\n flex: 1 1 0;\n padding: var(--space-3) var(--space-7);\n}\n.ds-hero__fact + .ds-hero__fact {\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__fact strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header ---------- */\n/* The stage of an inner page: a low band in the same fill, the title at\n the left and one action at the right. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6);\n background: var(--color-fill-1);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* A row of counters, each on a heavy rule at its left. */\n.ds-stat {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-2) var(--space-5) var(--space-3);\n background: var(--color-surface-alt);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-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-small);\n}\n.ds-prose strong {\n color: var(--color-heading);\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-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-2) 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 box-shadow: none;\n}\n/* Destructive action: the secondary button with a danger-coloured rim and\n lamp. The label keeps the secondary text colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-danger);\n box-shadow: none;\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 border-color: var(--color-border);\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) 0 0;\n}\n\n/* ---------- form ---------- */\n/* Rows of label and control, divided by hairlines, in an outlined block\n with a heavy rule on top. */\n.ds-form {\n margin: 0;\n padding: var(--space-3) var(--space-5) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-bar);\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-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\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-2) var(--space-5);\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-body);\n font-size: var(--text-base);\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 padding: var(--space-1) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n/* Error text always sits on its own chip of the error surface. */\n.ds-form__error {\n display: inline-block;\n margin: var(--space-3) 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-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 0 calc(var(--size-label) + var(--space-5));\n}\n\n/* ---------- table ---------- */\n/* An open schedule: a head in the bar fill, rows on hairlines. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-base);\n}\n/* Each head cell carries the bar fill with the bar text, as in the era's other layouts. */\n.ds-table thead tr {\n background: var(--fill-bar);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-4);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\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);\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table td.ds-table__num {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* A filter strip: capsules in a row, joined to the table under it. */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n border-top: var(--border-width-strong) var(--border-style) var(--color-bar);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: underline;\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n\n/* ---------- list ---------- */\n/* A dated list: the date in a narrow column, the entry beside it. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__date {\n color: var(--color-heading-alt);\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-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-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* One line per item, title left and figure right, for modules. */\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.ds-list--compact .ds-list__meta {\n flex: none;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0 0 0 var(--space-6);\n list-style: square;\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Inverted band: the one block in the opposite tone, text at the left and\n a field with its button at the right. Everything in it, links included,\n takes the inverse text colour. */\n.ds-panel--inverse {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-width: var(--border-width) 0;\n border-radius: 0;\n box-shadow: none;\n}\n.ds-panel--inverse .ds-panel__title {\n padding: 0;\n background: transparent;\n color: var(--color-inverse-text);\n font-size: var(--text-h2);\n text-shadow: none;\n}\n.ds-panel--inverse .ds-panel__text {\n margin: 0;\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-5);\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 flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- grid ---------- */\n/* The strip of capsule sections under the stage: five in a row. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n gap: var(--space-4);\n padding: var(--space-5) var(--space-6);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-width: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-fill-4);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-grid__cell--1 { background: var(--color-fill-1); }\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__icon {\n display: block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__title {\n margin: 0;\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/* Titles keep the heading colour: a cell fill may be close to the link\n colour. */\n.ds-grid__title .ds-link,\n.ds-grid__title .ds-link:visited {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\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 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: baseline;\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/* A message on a heavy rule at its left. */\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-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-left-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-ui);\n text-transform: var(--ui-transform);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) 0 0;\n list-style: none;\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-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A small window in the page flow: title bar, message, 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}\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-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/* A strip of links with the copyright line at its right end. */\n.ds-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__text {\n margin: 0;\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(#games:target) .ds-nav__link[href=\"#games\"]::before,\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"]::before,\n.ds-page:has(#club:target) .ds-nav__link[href=\"#club\"]::before,\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"]::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--50 .ds-progress__bar { width: 50%; }\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-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-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n box-sizing: border-box;\n padding: var(--space-2) var(--space-3);\n scroll-snap-align: start;\n font-size: var(--text-small);\n}\n.ds-carousel__title {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-carousel__text {\n margin: 0;\n}\n.ds-carousel__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-carousel__arrow {\n padding: 0 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}\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 stage, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n

Just in Orbit Runner 2 goes on sale 14 June. Read on

\n
\n \n \n \n
\n
\n
\n\n
\n\n
\n
\n
\n Out 14 June\n

Orbit Runner 2: the track now loops the whole planet.

\n

Twenty-four circuits, four players on one screen and a replay you can save to a memory card.

\n
\n See the game\n Read the making of\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
    \n
  • 1 to 4 players
    • \n
  • 24 circuits
    • \n
  • Racing, all ages
    • \n
  • Disc and download
    • \n
\n
\n\n
\n
\n \n
\n

Games

\n

38 titles

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

Trailers

\n

12 to watch

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

Demos

\n

9 to try

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

News

\n

Daily

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

Club

\n

Members

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

Latest news

\n all news\n
\n \n
\n
\n
\n

Release dates

\n all games\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TitleKindPlayersOut
Orbit Runner 2Racing1-414 Jun
Tide EngineStrategy1-205 Jul
Night CourierAction119 Jul
Static BloomPuzzle1-202 Aug
Paper Fleet 3Strategy1-830 Aug
Low Gravity GolfSport1-413 Sep
Neon HarbourAdventure104 Oct
Tin Orchestra 2Music1-225 Oct
\n

Dates are for shops; downloads open the same morning.

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

Club sign-in

\n
\n

Pulse visualiser

Twelve new scopes and tunnels.

Night drive skin

Dark glass, one small window.

Tracker studio

Pattern editor for the player.

<<Featured 01/03>>
\n\n

Members keep a shelf, save scores and get demos a week early.

\n Sign in\n

Not a member? Join free

\n
\n
\n
\n

Most played this week

\n \n
\n
\n

Quick poll

\n
\n

Server load46%

\n

Beta ladderRanked play is still in test

\n\n

How do you play most?

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

The chronoskin letter

\n

Release dates and demo codes by mail, every Friday. See last week's

\n
\n
\n \n \n
\n
\n\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Games
    4. \n
  4. >
    5. \n
  5. All titles
    6. \n
\n
\n
\n

All titles

\n

Every chronoskin game, out now or on its way, with its demo where there is one.

\n
\n
\n Open my shelf\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TitleKindPlayersScore 
Orbit RunnerRacing1-48.8Add to shelf
Glass Circuit New discPuzzle19.1Add to shelf
Paper Fleet 2Strategy1-88.4Add to shelf
Signal TowerAdventure17.9Add to shelf
Rooftop RelaySport1-47.6Add to shelf
Cold Harbour RunAction1-28.2Add to shelf
Tin OrchestraMusic1-28.0Add to shelf
Paper FleetStrategy1-48.1Add to shelf
Moth and LanternAdventure18.6Add to shelf
SwitchbackRacing1-27.2Add to shelf
\n \n
\n
\n
\n \n
\n

Out this week

\n
\n

Orbit Runner 2 reaches the shops on 14 June.

\n See the game\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. News
    4. \n
  4. >
    5. \n
  5. How the planet loop was built
    6. \n
\n
\n
\n
\n

How the planet loop was built

\n

Studio diary, 31 May, by the track team

\n

The first game ran on flat ribbons. For the second we wrapped every circuit round one small planet, so a race can end where the last one began.

\n

One globe, twenty-four circuits

\n

Each circuit is a path drawn on the same sphere. Drive far enough and you cross a road from another race, with its own weather still running.

\n
    \n
  • Six circuits on the night side
    • \n
  • Ten that cross the equator
    • \n
  • Eight polar loops for the patient
    • \n
\n

Four players, one screen

\n

Splitting the screen in four meant drawing the planet four times. The answer was to draw far roads as plain lines and keep detail for what is close.

\n

Try the debug view

\n

Hold both shoulder buttons on the title screen and enter loop --wire to see the planet as the engine does.

\n
\n
\n
\n

Read next

\n
\n

\n Tide Engine demo\n Club night final\n Second disc for Glass Circuit\n See the game\n Front page\n

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

In this story

\n \n
\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Club
    4. \n
  4. >
    5. \n
  5. My shelf
    6. \n
\n
\n
\n

My shelf

\n

The games you own, the ones you ordered and the scores you saved, rowan.

\n
\n
\n Add a game\n
\n
\n
\n
\n
    \n
  • 7Games on the shelf
    • \n
  • 2On order
    • \n
  • 41 hPlayed this month
    • \n
  • 312League rank
    • \n
\n
\n

Note: Score tables are closed on Sunday from 02:00 to 04:00.

\n

Error: The order for Night Courier could not be confirmed. Check the card and try again.

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
GameKindBest scoreStatus 
Orbit RunnerRacing48,210OwnedScores
Orbit Runner 2Racing0On orderCancel
Glass CircuitPuzzle19,774OwnedScores
Night CourierAction0FailedRemove
Tide Engine demoStrategy2,790DemoScores
\n
\n \n \n \n \n
\n
\n
\n
\n

Remove from shelf

\n
\n

Take Night Courier off your shelf? The failed order is cancelled for good.

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

Next club night

\n
\n

Paper Fleet league final, Friday at 20:00. Sixteen crews are in.

\n

How the league works

\n
\n
\n
\n

Friends online

\n \n
\n
\n

Saved replays

\n
\n

No replays saved yet.

\n How to save one\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Club
    4. \n
  4. >
    5. \n
  5. Join
    6. \n
\n
\n
\n

Join the club

\n

Free, and done in a minute: a name, an address and the machine you play on.

\n
\n
\n I am a member\n
\n
\n
\n
\n

Error: One field needs another look before we can sign you up.

\n
\n
\n \n
\n
\n
\n \n
\n \n Enter a complete address.\n
\n
\n
\n \n
\n \n
\n
\n
\n Send me\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n
\n
\n

What members get

\n
\n
    \n
  • A shelf for your games
    • \n
  • Saved scores and leagues
    • \n
  • Demos a week early
    • \n
  • Club nights every Friday
    • \n
\n

We never pass addresses on.

\n
\n
\n \n
\n

Joined this week

\n \n
\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.landing.s05.p11.t11.u04\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"y2k-futurism\",\n \"years\": [\n 1999,\n 2003\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-5bb4\",\n \"short\": \"v1-yk-5bb4\"\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: Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Courier New\", Courier, monospace;\n --font-ui: \"Courier New\", Courier, monospace;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 10px;\n --text-small: 9px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\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" } }