{
  "id": "v1-gf-5233",
  "long_id": "v1.game-fantasy.landing.s05.p02.t03.u03",
  "name": "Game fantasy early access (forest green, bronze, moonlight)",
  "era": {
    "slug": "game-fantasy",
    "code": "gf",
    "name": "Game fantasy",
    "years": [
      2004,
      2026
    ],
    "description": "Game sites from 2004 to today: carved and gilded frames, parchment, dark stone and metal, ornate display capitals over a plain reading face, banners, crests and coloured item names. The older ones are built like the game's own windows; the newer ones are dark, wide and cinematic, with the ornament kept for titles, buttons and dividers."
  },
  "archetype": "landing",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "The early-access or launch page of a new fantasy game as the big studios have built them since about 2019: full-bleed cinematic sections stacked down the page, a thin clear top bar with one bright button, a huge title in display capitals over drawn key art, and feature sections with the picture on alternating sides. The heavy carved frames of the older game sites are gone; the ornament survives as thin gilded rules, diamond dividers, studded buttons and wide-tracked capitals. The page is responsive and the key art is drawn in CSS from the palette.",
  "url": "https://chrono.skin/s/v1-gf-5233",
  "preview_url": "https://chrono.skin/s/v1-gf-5233/specimen.html",
  "files": {
    "STYLE.md": "# Game fantasy early access (forest green, bronze, moonlight)\n\n## Summary\n\nThe early-access or launch page of a new fantasy game as the big studios have built them since about 2019: full-bleed cinematic sections stacked down the page, a thin clear top bar with one bright button, a huge title in display capitals over drawn key art, and feature sections with the picture on alternating sides. The heavy carved frames of the older game sites are gone; the ornament survives as thin gilded rules, diamond dividers, studded buttons and wide-tracked capitals. The page is responsive and the key art is drawn in CSS from the palette.\n\n## Layout\n\n- Full-bleed and fluid. Content sits in `.ds-wrap`, at most `--size-page` (1200px) wide with `--space-5` gutters; pictures, bands and dividers run from edge to edge. Designed at 1440px; under 1000px every two-column block becomes one column and the navigation links fold into the menu of the bar; under 640px grids become one column, figures two by two, and form labels sit above their fields. Nothing scrolls sideways at 390px.\n- Order of the home page: the top bar (`--size-nav`, 72px) lying over the hero; the hero (`--size-hero`, 920px): the picture in its upper half and, centred on its dark ground, a kicker, the title, a lead, the platform buttons, the main action and a note; a strip of four figures overlapping the hero's foot; a feature with the trailer; a divider; the carousel of classes on `--color-surface`; a divider; two features with the picture on alternating sides; a band on the page ground with a title plate, the four platform cells and three edition cards; the newsletter band; the footer.\n- Inner pages keep the top bar and the footer; the hero is left out. Each starts with `.ds-masthead`, a low picture (`--size-masthead`, 340px) that carries the breadcrumb and the `.ds-page-header` (title, one line, actions on the right) and ends in a gilded rule. Below it one `.ds-section--tight` holds the working parts: `.ds-tabs` across the top, then a `.ds-split` (`--wide` is 3 to 2) or `.ds-columns` (flexible column beside `--size-aside`, 340px), then full-width tables.\n- Views: `home`; `classes` (tabs by class, the description, attribute bars, an item window, the skill table); `editions` (the comparison table, the accordion of questions, platforms with status badges); `access` (notices, the account form with switches and buttons, the dialog that deletes an account, the chosen edition); `news` (the list of updates with pagination and links, the roadmap box with a progress bar, an empty streams slot).\n- Spacing scale: `--space-1` 4px (label to bar, badge), `--space-2` 8px (small gaps), `--space-3` 12px (between buttons, rows), `--space-4` 16px (inside controls and small boxes), `--space-5` 24px (gutters, panel padding, between cards), `--space-6` 40px (between blocks of a tight section), `--space-7` 64px (between the two sides of a feature, band padding, divider height), `--space-8` 104px (section padding).\n- Control heights: `--size-control-small` 30px, `--size-control` 44px, `--size-control-large` 60px. `--size-art` 440px is the least height of a feature picture, `--size-play` 84px the play button, `--size-brand` 40px the mark.\n- On a phone (1000px and below) `.ds-nav__links` is not shown and `.ds-nav__more`, a `.ds-menu` in the bar, opens a full-width list of every view as `.ds-menu__item` rows, the sub-pages indented as `.ds-menu__item--sub` and the open view marked by an accent bar at its left; `.ds-nav__action` is hidden, and at 640px and below the summary shows only its bars (`.ds-nav__label` is hidden). `.ds-tabs` becomes one row that scrolls sideways. A `.ds-tooltip__tip` opens under its line between the gutters; a table in `.ds-table__wrap` keeps its cells on one line and scrolls inside the wrapper.\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- Two families and a monospace. `--font-heading` and `--font-ui` are a Garamond (EB Garamond where installed, else Hoefler Text, Garamond, Times New Roman) at weight 600: headings in ordinary case, navigation, buttons and table heads in capitals (`--ui-transform`). `--font-body` is Trebuchet MS for everything read. The references used commercial book and inscriptional faces; this stack is the closest free one.\n- Sizes: `--text-base` 13px at `--line-body` 1.4; `--text-small` 11px; `--text-ui` 14px; `--text-large` 17px; `--text-h3` 17px, `--text-h2` 22px, `--text-h1` 30px; `--text-display` 42px with 1px tracking for the hero title only.\n- Palette: night-blue page, pale steel sheet and near-white slabs, a deep blue banner and table heads with ice-white lettering (`--color-bar`), dark slate pennants, hero and foot plate (`--color-bar-alt`), slate text, navy headings, steel frames, a blue primary plate and an ice-blue accent for the current pennant and tab. A dull gold (`--color-accent-alt`) is the one warm colour, in frame corners and \"new\" markers.\n- Surface: a 3px ridge border that the browser bevels into lit and dark halves, rounded corners (4px controls, 8px frames, 12px slabs and labels), deep soft shadows under frames, glossy plates and bars split at half height, slabs with a diagonal sheen (`--fill-panel`), a page of faint diagonal frost streaks under a pale glow.\n- The era's rule for text on fills, kept by every layout and every token set: on `--color-canvas` and on the three surfaces (`--color-surface`, `--color-surface-alt`, `--color-surface-strong`, and `--fill-panel`) text is `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours; on `--fill-bar` only `--color-bar-text`; on `--fill-bar-alt` only `--color-bar-alt-text`; on `--fill-inverse` only `--color-inverse-text`; on `--fill-accent` only `--color-accent-text`; on `--fill-button` `--color-button-text`, on `--fill-button-secondary` `--color-button-secondary-text`; in a form well `--color-input-text`; on `--color-notice` `--color-notice-text` and on `--color-danger-surface` `--color-danger`.\n- No text is written straight on `--color-page`: the page only shows as stone around the slabs.\n- `--color-fill-1` to `--color-fill-4`, `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` are inks: every palette of the era keeps them readable on its surfaces. They colour item names by rarity (`.ds-item`: common `--color-text`, uncommon `--color-success`, rare `--color-fill-1`, epic `--color-fill-2`, legendary `--color-fill-3`, set `--color-fill-4`), class crests, status labels and bars. They are never used as a fill under text; a grid cell is the surface tinted by 24% of its fill colour, and a status badge is the surface tinted by 16% of its status colour with the colour itself as ink and border.\n- `--color-border-strong` is the metal of every frame (gold, brass or steel); `--color-border` the ordinary rule; `--color-border-muted` the faint rule between rows. `--color-accent-alt` is the small stone set in each frame corner, the \"new\" marker and the edge of a learned or current cell; it is never a fill under text.\n- `--color-accent` (through `--fill-accent`) marks the current navigation plate, the current tab, the current page number, the default badge and the default bar of a progress bar.\n- The destructive button is the secondary plate lettered and edged in `--color-danger`, because the primary plate of a palette may itself be red.\n- Hero blocks are filled with `--fill-bar-alt` under a glow of `--color-accent` and written in `--color-bar-alt-text`; the banner and table heads take `--fill-bar`; the footer takes `--fill-bar-alt`. `--fill-inverse` with `--color-inverse-text` is the closing band of the home page (`.ds-band`): a strip of the opposite material, parchment on a dark set and dark stone on a light one.\n- One-off values built in `components.css` from tokens: the faceted corner caps of `.ds-frame` (the frame metal against the same colour mixed 45% toward `--color-shadow`), button and plate edges (the fill colour mixed 60% toward `--color-shadow`), the 24% and 16% tints named above, alternate rows and wells as `--color-surface-alt` at 70% over the panel fill, `50%` radius for lamps and the round play plate, and `clip-path` polygons for ribbons, pennants, standards and the drawn landscape.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints the page ground. `.ds-wrap` is the centred content column.\n- `.ds-nav`: the clear top bar over the picture: the brand, `.ds-nav__links` of `.ds-nav__link` (the current one underlined in the rule colour with a diamond; `is-current`, or in the specimen one selector per view), and `.ds-nav__end` with a `.ds-nav__action` link and one small primary button. One item is a `.ds-menu`.\n- `.ds-nav__more`: the phone navigation, a `.ds-menu` hidden above 1000px. Its summary (`.ds-menu__summary`: `.ds-nav__bars` and a `.ds-nav__label`) opens a sheet of every view, the sub-pages as `.ds-menu__item--sub`.\n- `.ds-brand`: `.ds-brand__mark`, a 40px tile dressed as the primary button (`--fill-button`, `--color-button-text`, its border, `--radius-control`, `--shadow-control`), and `.ds-brand__name` in the heading face. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the full picture of the home view, a `.ds-scene` with `.ds-hero__copy` centred on its ground: `.ds-kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-platforms` (a row of secondary buttons), `.ds-hero__actions` (one large button), `.ds-hero__note`.\n- `.ds-scene`: the drawn picture, used for the hero, mastheads, feature art and the class portrait. Ten empty spans in this order: `.ds-scene__sky`, `.ds-scene__light` (shafts), `.ds-scene__far` and `.ds-scene__mid` (two tree lines), `.ds-scene__arch` (the ruined arch, lit on its inner edges), `.ds-scene__mist`, `.ds-scene__near` (ground and a traveller), `.ds-scene__trunks` (trunks and canopy at the edges), `.ds-scene__flies`, `.ds-scene__shade`. Variants `.ds-scene--2`, `.ds-scene--3`.\n- `.ds-masthead`: the low scene that starts an inner page; holds a `.ds-wrap` with the breadcrumb and the page header.\n- `.ds-page-header`: `.ds-page-header__title`, `.ds-page-header__text`, `.ds-page-header__actions`; written in the scene's text colour.\n- `.ds-section`: a full-bleed band in `--color-canvas`; `--alt` in `--color-surface`, `--ground` clear so the page shows, `--tight` with less padding. `.ds-section__head` centres a `.ds-section__kicker`, `.ds-section__title`, a `.ds-rule` and perhaps a `.ds-section__lead`. `.ds-plate` is the title of a ground section, on `--fill-bar` with a diamond at each end. `.ds-divider` is a strip of page ground between two bands with a gilded rule and a diamond.\n- `.ds-feature`: a picture and text side by side; `.ds-feature--flip` puts the picture right. `.ds-feature__art` (a scene in a double gilded line; may hold a `.ds-play` button and a `.ds-feature__caption`), `.ds-feature__copy` with a kicker, `.ds-feature__title`, `.ds-feature__text`, `.ds-feature__points` (a list with diamond bullets).\n- `.ds-editions`: three `.ds-edition` cards (a `.ds-panel` each) with a `.ds-price`, points and a button; `.ds-edition--featured` is lit and may carry a `.ds-edition__flag` badge on its top edge.\n- `.ds-prose`: running text: h1, h2 (ruled underneath), h3 (in `--color-heading-alt`), paragraphs, lists, `code`, links. `.ds-prose__lead` is the opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet`. `.ds-links` is a wrapping row.\n- `.ds-button`: a flat plate with a diamond stud on each end, 44px high. `.ds-button--secondary`; `.ds-button--danger` (secondary plate, danger ink and edge); `.ds-button--large` (60px, heading face); `.ds-button--small` (30px, no studs). States `is-hover` (lit through `--shadow-control-hover`), `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row.\n- `.ds-form`: rows (`.ds-form__row`) of a `.ds-form__label` (170px; above the field on a phone) and a `.ds-form__field`. `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`; `.ds-form__input--short`; `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, `.ds-form__actions-end`. `.ds-form--inline` is one field and one button in a line (the newsletter band).\n- `.ds-switch`: an on and off row over a checkbox: `.ds-switch__label`, `.ds-switch__hint`, the hidden `.ds-switch__input` and the `.ds-switch__track`, which takes `--fill-accent` when on (`is-on` by class).\n- `.ds-table`: a data table in a flush panel body with `.ds-table__wrap` so that it scrolls inside itself on a phone. The head row takes `--fill-bar`; `is-numeric`, `is-centre`; `.ds-table__sub`, `.ds-table__who`; `is-own` marks a row.\n- `.ds-list`: ruled rows: `.ds-list__item` with an optional `.ds-list__date`, a `.ds-list__body` (`.ds-list__title`, `.ds-list__text`, `.ds-list__meta`) and perhaps a badge. `.ds-list--tight` is the dense form.\n- `.ds-panel`: a box with a gilded top edge: `.ds-panel__title`, `.ds-panel__body` (`--flush`), `.ds-panel__text`, `.ds-panel__foot`.\n- `.ds-stat`: one figure, `.ds-stat__value` over `.ds-stat__label`; four sit in the `.ds-stats` strip that overlaps the hero's foot.\n- `.ds-grid`: four `.ds-grid__cell` across (`--two`, `--three`; two, then one on narrow windows), tinted and edged by `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4`. Inside: `.ds-grid__icon`, `.ds-grid__title`, `.ds-grid__text`, a badge or `.ds-grid__more`.\n- `.ds-tabs`: a row of text tabs on a rule; `.ds-tabs__tab`, `is-current` underlined in the rule colour; `.ds-tabs__count`.\n- `.ds-badge`: a small label in `--fill-accent`; `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, `.ds-badge--quiet`, `.ds-badge--new`. `.ds-badges` is a row; `.ds-dot` with `--success`, `--warning`, `--danger` a lamp.\n- `.ds-item`: an item name in its rarity colour: plain, `--uncommon`, `--rare`, `--epic`, `--legendary`, `--set`.\n- `.ds-tooltip`: the item window: a trigger wrapping a `.ds-tooltip__tip` shown on hover or focus (`is-open`, `.ds-tooltip--end`), with `.ds-tooltip__name` and `.ds-tooltip__line` rows (`--bonus`, `--muted`, `--lore`). `.ds-tooltip--card` writes the window into the page.\n- `.ds-progress`: a track with a `.ds-progress__bar`; width by `--10` to `--100`, colour by `--health`, `--xp`, `--rep`, `--danger`; `.ds-progress__label` above.\n- `.ds-avatar`: a class crest (inline SVG) on a `--color-surface-strong` tile; `.ds-avatar--small`, `.ds-avatar--large`; `--1` to `--4` colour it.\n- `.ds-carousel`: the classes: `.ds-carousel__stage` holds one `.ds-carousel__slide` (`.ds-carousel__copy` with `.ds-carousel__name`, `.ds-carousel__text`, `.ds-carousel__bars`; and `.ds-carousel__portrait`, a scene with a `.ds-carousel__sigil`) between two `.ds-carousel__arrow`s (`--next`); `.ds-carousel__foot` holds `.ds-carousel__picks` (a `.ds-carousel__pick` crest per class, `is-current` lit) and `.ds-carousel__dots` of `.ds-carousel__dot`.\n- `.ds-accordion`: `<details>` sections: `.ds-accordion__item`, `.ds-accordion__summary`, `.ds-accordion__meta`, `.ds-accordion__body`.\n- `.ds-menu`: the drop-down under a navigation item: `.ds-menu__list` of `.ds-menu__item`, shown on hover or focus (`is-open`); `.ds-menu__caret`.\n- `.ds-columns`: a flexible column beside a 340px one. `.ds-sidebar`: a box of the narrow column: `.ds-sidebar__title`, a `.ds-sidebar__list` of `.ds-sidebar__item` rows with a `.ds-sidebar__link` and `.ds-sidebar__meta`.\n- `.ds-notice`: a ruled message with `.ds-notice__title` and `.ds-notice__text`; `.ds-notice--error`. `.ds-notices` stacks several.\n- `.ds-pagination`: `.ds-pagination__link`; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (a diamond), `.ds-breadcrumb__current`; it inherits the colour of the scene it lies on.\n- `.ds-dialog`: `.ds-dialog__title` on `--fill-bar` with `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`; `.ds-dialog__backdrop` behind it.\n- `.ds-empty`: an empty slot: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text`, one secondary button.\n- `.ds-band`: the newsletter call in `--fill-inverse` between two gilded rules: `.ds-band__title`, `.ds-band__text` and an inline form. At most one per page.\n- `.ds-footer`: the closing band in `--fill-bar-alt`: centred `.ds-footer__links` of `.ds-footer__link`, a `.ds-rule`, `.ds-footer__note`.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, the home view when none is.\n- `.ds-heading` (`--centre`), `.ds-rule`, `.ds-stack` (`--tight`), `.ds-split` (`--wide`), `.ds-row` (`--between`), `.ds-muted`, `.ds-icon`, `.ds-price`: helpers.\n\n## Never\n\n- `font-size <= 42px`: the hero title is the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `line-height <= 1.5`: body text is set at 1.4.\n- `font-families <= 3`: a Garamond, Trebuchet MS and a monospace.\n- `letter-spacing <= 1px`: only the hero title is tracked.\n- `border-radius <= 12px`: slabs and labels are rounded to 12px at most; only lamps and the foot of the crest are round.\n- `border-width <= 3px`: the ridge frame is 3px, every rule 1px.\n- `box-shadow-blur <= 24px`: shadows are deep but short; nothing floats on a wide haze.\n- `transition = none`: nothing on these pages eased; a plate changed its fill at once.\n- `animation = none`: movement belonged to the game, not to its site.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new part of the home page is a `.ds-section` with a centred head, separated from its neighbours by a `.ds-divider`; put pictures in a `.ds-feature` and alternate their side. A new picture is a `.ds-scene` with its ten spans and, for another light, a variant built from one fill colour. Boxes are panels with a gilded top edge, not frames; ornament is a hairline, a diamond or a stud. Keep the rule for text on fills, keep rarity and status colours as ink, and write nothing on the page ground without a plate. Do not add images, rounded cards, a second accent or movement.\n",
    "components.css": "/* Layout tokens (structure part). The early-access page of a new game,\n   2019 to today: full-bleed cinematic sections stacked down the page under\n   a thin clear top bar, a huge title over drawn key art, feature sections\n   with the picture on alternating sides, platform and edition blocks. */\n:root {\n  --size-page: 1200px;\n  --size-nav: 72px;\n  --size-hero: 920px;\n  --size-masthead: 340px;\n  --size-brand: 40px;\n  --size-hair: 1px;\n  --size-control: 44px;\n  --size-control-small: 30px;\n  --size-control-large: 60px;\n  --size-icon: 18px;\n  --size-dot: 9px;\n  --size-crest: 56px;\n  --size-crest-large: 120px;\n  --size-bar: 10px;\n  --size-label: 170px;\n  --size-field-short: 220px;\n  --size-textarea: 110px;\n  --size-dialog: 460px;\n  --size-tip: 300px;\n  --size-menu: 230px;\n  --size-switch: 46px;\n  --size-stat: 180px;\n  --size-art: 440px;\n  --size-play: 84px;\n  --size-aside: 340px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 40px;\n  --space-7: 64px;\n  --space-8: 104px;\n}\n\n/* ---------- views: one screen of the example site 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.ds-page {\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-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  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- small layout helpers ---------- */\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-stack--tight {\n  gap: var(--space-3);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-split--wide {\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n}\n.ds-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-row--between {\n  justify-content: space-between;\n}\n.ds-muted {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-icon {\n  display: inline-block;\n  flex: none;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  vertical-align: middle;\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 {\n  padding-bottom: var(--space-2);\n  font-size: var(--text-h2);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-prose h3 {\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n}\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding-left: var(--space-5);\n}\n.ds-prose li { margin-bottom: var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n  padding: 0 var(--space-2);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n  color: var(--color-heading-alt);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n\n/* ---------- links ---------- */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\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  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-5);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button), var(--color-shadow) 60%);\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: 1;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\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  border-color: color-mix(in srgb, var(--color-button-secondary), var(--color-shadow) 60%);\n  text-shadow: none;\n}\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-danger);\n  border-color: var(--color-danger);\n  text-shadow: none;\n}\n.ds-button--secondary.is-hover,\n.ds-button--secondary:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-button--small {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-size: var(--text-small);\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  text-shadow: none;\n  cursor: default;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  gap: var(--space-2) var(--space-4);\n  align-items: start;\n}\n.ds-form__label {\n  padding-top: var(--space-2);\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-form__field {\n  min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  display: block;\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\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  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: var(--size-textarea);\n  resize: vertical;\n}\n.ds-form__input--short {\n  width: var(--size-field-short);\n  max-width: 100%;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: var(--space-2) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin: 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__actions-end {\n  margin-left: auto;\n}\n.ds-form--inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form--inline .ds-form__input {\n  flex: 1 1 var(--size-field-short);\n  width: auto;\n  min-height: var(--size-control-large);\n}\n\n/* ---------- switch: an on and off control over a checkbox ---------- */\n.ds-switch {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  color: var(--color-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: var(--size-switch);\n  height: calc(var(--size-switch) / 2);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--size-switch) / 2 - var(--space-1) * 2 - var(--border-width) * 2);\n  background: var(--color-input-border);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background: var(--fill-accent);\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(var(--size-switch) / 2);\n  background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n}\n.ds-switch__label {\n  display: block;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-switch__hint {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- table ---------- */\n.ds-table__wrap {\n  max-width: 100%;\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\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-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  vertical-align: middle;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n}\n.ds-table .is-numeric {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table .is-centre {\n  text-align: center;\n}\n.ds-table__sub {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-table__who {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-table .is-own td {\n  background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n  border-top: 0;\n}\n.ds-list__body {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  display: block;\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  letter-spacing: var(--heading-tracking);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--heading-transform);\n}\n.ds-list__title:hover {\n  color: var(--color-link-hover);\n}\n.ds-list__text {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text);\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list--tight .ds-list__item {\n  align-items: center;\n  padding: var(--space-3) 0;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n  position: relative;\n  min-width: 0;\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-3) var(--space-4);\n  color: var(--color-heading-alt);\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__body--flush {\n  padding: 0;\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n  margin-bottom: 0;\n}\n.ds-panel__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- stats ---------- */\n.ds-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--size-stat), 1fr));\n}\n.ds-stat {\n  padding: var(--space-4) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat:first-child {\n  border-left: 0;\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  letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- grid: cells tinted by the four fill colours ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: var(--space-5);\n  background: color-mix(in srgb, var(--color-fill-1) 24%, var(--color-surface));\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 60%, var(--color-border));\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n  background: color-mix(in srgb, var(--color-fill-2) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-2) 60%, var(--color-border));\n}\n.ds-grid__cell--3 {\n  background: color-mix(in srgb, var(--color-fill-3) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-3) 60%, var(--color-border));\n}\n.ds-grid__cell--4 {\n  background: color-mix(in srgb, var(--color-fill-4) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-4) 60%, var(--color-border));\n}\n.ds-grid__icon {\n  width: var(--size-crest);\n  height: var(--size-crest);\n  color: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__icon { color: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__icon { color: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__icon { color: var(--color-fill-4); }\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  flex: 1;\n  margin: 0;\n}\n.ds-grid__more {\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-grid__more:hover {\n  color: var(--color-link-hover);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-5);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: 0;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-border-strong);\n}\n.ds-tabs__count {\n  opacity: 0.75;\n  font-size: var(--text-small);\n}\n\n/* ---------- badge, lamp and item name ---------- */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));\n  color: var(--color-success);\n  border-color: var(--color-success);\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));\n  color: var(--color-warning);\n  border-color: var(--color-warning);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-color: var(--color-border);\n}\n.ds-badge--new {\n  background: transparent;\n  color: var(--color-accent-alt);\n  border-color: var(--color-accent-alt);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-dot {\n  display: inline-block;\n  flex: none;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-text-muted);\n  border-radius: 50%;\n}\n.ds-dot--success { background: var(--color-success); }\n.ds-dot--warning { background: var(--color-warning); }\n.ds-item {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-item--uncommon { color: var(--color-success); }\n.ds-item--rare { color: var(--color-fill-1); }\n.ds-item--epic { color: var(--color-fill-2); }\n.ds-item--legendary { color: var(--color-fill-3); }\n\n/* ---------- tooltip: the item window ---------- */\n.ds-tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 30;\n  display: none;\n  width: var(--size-tip);\n  padding: var(--space-3) var(--space-4);\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-dialog);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n  right: 0;\n  left: auto;\n}\n.ds-tooltip--card {\n  display: block;\n  cursor: default;\n}\n.ds-tooltip--card .ds-tooltip__tip {\n  position: static;\n  display: block;\n  width: auto;\n  max-width: var(--size-tip);\n}\n.ds-tooltip__name {\n  display: block;\n  margin-bottom: var(--space-2);\n  padding-bottom: var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  line-height: var(--line-heading);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tooltip__line {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-tooltip__line--bonus { color: var(--color-success); }\n.ds-tooltip__line--muted { color: var(--color-text-muted); }\n.ds-tooltip__line--lore {\n  margin-top: var(--space-2);\n  padding-top: var(--space-2);\n  color: var(--color-heading-alt);\n  font-style: italic;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- progress ---------- */\n.ds-progress {\n  display: block;\n  height: var(--size-bar);\n  overflow: hidden;\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background: var(--fill-accent);\n}\n.ds-progress--25 .ds-progress__bar { width: 25%; }\n.ds-progress--40 .ds-progress__bar { width: 40%; }\n.ds-progress--60 .ds-progress__bar { width: 60%; }\n.ds-progress--75 .ds-progress__bar { width: 75%; }\n.ds-progress--90 .ds-progress__bar { width: 90%; }\n.ds-progress--health .ds-progress__bar { background: var(--color-success); }\n.ds-progress--xp .ds-progress__bar { background: var(--color-fill-2); }\n.ds-progress--rep .ds-progress__bar { background: var(--color-warning); }\n.ds-progress__label {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-1);\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-progress__label strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- avatar: a crest on a small tile ---------- */\n.ds-avatar {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-crest);\n  height: var(--size-crest);\n  padding: var(--space-2);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\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-avatar svg {\n  width: 100%;\n  height: 100%;\n}\n.ds-avatar--small {\n  width: var(--size-control);\n  height: var(--size-control);\n  padding: var(--space-1);\n}\n.ds-avatar--large {\n  width: var(--size-crest-large);\n  height: var(--size-crest-large);\n  padding: var(--space-3);\n}\n.ds-avatar--1 { color: var(--color-fill-1); }\n.ds-avatar--2 { color: var(--color-fill-2); }\n.ds-avatar--3 { color: var(--color-fill-3); }\n.ds-avatar--4 { color: var(--color-fill-4); }\n\n/* ---------- accordion ---------- */\n.ds-accordion {\n  display: flex;\n  flex-direction: column;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-accordion__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item:first-child {\n  border-top: 0;\n}\n.ds-accordion__summary {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__summary::before {\n  content: \"\";\n  display: block;\n  flex: none;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  background: linear-gradient(currentColor, currentColor) center / calc(calc(var(--space-1) / 2) * 5) calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) calc(calc(var(--space-1) / 2) * 5) no-repeat,\n    var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n  background: linear-gradient(currentColor, currentColor) center / calc(calc(var(--space-1) / 2) * 5) calc(var(--space-1) / 2) no-repeat,\n    var(--fill-button-secondary);\n}\n.ds-accordion__item[open] > .ds-accordion__summary {\n  color: var(--color-heading-alt);\n}\n.ds-accordion__meta {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n  text-transform: none;\n}\n.ds-accordion__body {\n  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + var(--size-control-small) + var(--space-3));\n  color: var(--color-text);\n}\n.ds-accordion__body p {\n  margin: 0 0 var(--space-3);\n}\n.ds-accordion__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* ---------- menu: the drop-down under a navigation item ---------- */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__caret {\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 40;\n  display: none;\n  min-width: var(--size-menu);\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n  display: block;\n}\n.ds-menu__item {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-link-hover);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 40%, transparent);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-notice-text);\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: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n}\n.ds-notice__title {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n  margin: var(--space-1) 0 0;\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  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  min-height: var(--size-control);\n  padding: calc(var(--figure-shift) * -2) var(--space-3) calc(var(--figure-shift) * 2);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: 1;\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n  opacity: 0.8;\n}\n.ds-breadcrumb__link:hover {\n  opacity: 1;\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n  opacity: 0.5;\n}\n.ds-breadcrumb__current {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n.ds-dialog {\n  width: 100%;\n  max-width: var(--size-dialog);\n  margin: 0 auto;\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  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-3) 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  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  color: inherit;\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: var(--radius-control);\n  font-size: 0;\n  text-decoration: none;\n  opacity: 0.8;\n}\n.ds-dialog__close::before {\n  content: \"\";\n  width: calc(calc(var(--space-1) / 2) * 5);\n  height: calc(calc(var(--space-1) / 2) * 5);\n  background: linear-gradient(currentColor, currentColor) center / 100% calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) 100% no-repeat;\n  rotate: 45deg;\n}\n.ds-dialog__body {\n  padding: var(--space-5);\n}\n.ds-dialog__text {\n  margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-3);\n}\n.ds-dialog__backdrop {\n  padding: var(--space-6) var(--space-4);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-crest);\n  height: var(--size-crest);\n  color: var(--color-text-muted);\n}\n.ds-empty__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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  margin: 0;\n  max-width: 48ch;\n  color: var(--color-text-muted);\n}\n\n/* ---------- carousel: one slide showing, arrows and diamond dots ---------- */\n.ds-carousel {\n  position: relative;\n  min-width: 0;\n}\n.ds-carousel__stage {\n  position: relative;\n}\n.ds-carousel__arrow {\n  position: absolute;\n  top: 50%;\n  left: var(--space-3);\n  z-index: 3;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-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-mono);\n  font-size: var(--text-base);\n  line-height: 1;\n  text-decoration: none;\n  transform: translateY(-50%);\n  transition: var(--transition);\n}\n.ds-carousel__arrow--next {\n  right: var(--space-3);\n  left: auto;\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-carousel__dots {\n  display: flex;\n  gap: var(--space-3);\n  padding: 0 var(--space-2);\n}\n.ds-carousel__dot {\n  display: block;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-border);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  transform: rotate(45deg);\n}\n.ds-carousel__dot.is-current {\n  background: var(--color-accent-alt);\n}\n\n/* ---------- ornament: a heading between rules, a rule with a diamond ---------- */\n.ds-heading {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-heading::after {\n  content: \"\";\n  flex: 1;\n  height: var(--size-hair);\n  background: linear-gradient(to right, var(--color-border-strong), transparent);\n}\n.ds-rule {\n  position: relative;\n  height: var(--size-hair);\n  margin: var(--space-3) 0;\n  background: linear-gradient(to right, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);\n}\n.ds-rule::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-border-strong);\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n/* ================= layout of this pack ================= */\n\n.ds-wrap {\n  width: 100%;\n  max-width: calc(var(--size-page) + var(--space-5) * 2);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n\n/* ---------- nav: one thin clear line over the picture ---------- */\n.ds-nav {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-6);\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt) 82%, transparent), color-mix(in srgb, var(--color-bar-alt) 30%, transparent));\n  color: var(--color-bar-alt-text);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 16%, transparent);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-4);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  opacity: 0.74;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link::after {\n  content: \"\";\n  position: absolute;\n  bottom: calc(var(--size-dot) / -2);\n  left: 50%;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n  opacity: 0;\n  transform: translateX(-50%) rotate(45deg);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#classes:target) .ds-nav__link[href=\"#classes\"],\n.ds-page:has(#editions:target) .ds-nav__link[href=\"#editions\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#access:target) .ds-nav__link[href=\"#access\"],\n.ds-page:has(#access:target) .ds-nav__action {\n  opacity: 1;\n  box-shadow: inset 0 calc(var(--border-width-strong) * -2) 0 var(--color-border-strong);\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(#classes:target) .ds-nav__link[href=\"#classes\"]::after,\n.ds-page:has(#editions:target) .ds-nav__link[href=\"#editions\"]::after,\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"]::after,\n.ds-page:has(#access:target) .ds-nav__link[href=\"#access\"]::after {\n  opacity: 1;\n}\n.ds-nav__end {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-nav__action {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.74;\n}\n.ds-nav__action:hover {\n  opacity: 1;\n}\n\n/* ---------- brand ---------- */\n.ds-brand {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-brand);\n  height: var(--size-brand);\n  padding: var(--space-2);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button), var(--color-shadow) 60%);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- buttons of this pack: a stud on each end ---------- */\n.ds-button {\n  position: relative;\n  padding: 0 var(--space-5);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-button::before,\n.ds-button::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-border-strong);\n  border: var(--border-width) var(--border-style) var(--color-shadow);\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n.ds-button::after {\n  right: 0;\n  left: auto;\n  transform: translate(50%, -50%) rotate(45deg);\n}\n.ds-button--small::before,\n.ds-button--small::after,\n.ds-button.is-disabled::before,\n.ds-button.is-disabled::after,\n.ds-button:disabled::before,\n.ds-button:disabled::after {\n  display: none;\n}\n.ds-button--small {\n  padding: 0 var(--space-4);\n}\n.ds-button--large {\n  padding: 0 var(--space-7);\n}\n.ds-buttons,\n.ds-form__actions,\n.ds-dialog__actions {\n  gap: var(--space-4);\n}\n.ds-table thead tr {\n  background: var(--fill-bar);\n}\n.ds-table th {\n  background: transparent;\n  letter-spacing: var(--heading-tracking);\n}\n\n/* ---------- scene: the key art, a ruined arch in a night forest ----------\n   Ground, trunks and silhouettes are the alternate bar colour mixed toward\n   the shadow colour; the moon and its shafts are the alternate accent; the\n   horizon takes the accent. */\n.ds-scene {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-scene__sky,\n.ds-scene__light,\n.ds-scene__far,\n.ds-scene__mid,\n.ds-scene__arch,\n.ds-scene__mist,\n.ds-scene__near,\n.ds-scene__trunks,\n.ds-scene__flies,\n.ds-scene__shade {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.ds-scene__sky {\n  background:\n    radial-gradient(circle at 50% 33%, color-mix(in srgb, var(--color-bar-alt-text) 96%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 96%, transparent) 4.4%, color-mix(in srgb, var(--color-accent-alt) 60%, transparent) 5.2%, color-mix(in srgb, var(--color-accent-alt) 24%, transparent) 15%, transparent 42%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 70%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 70%, transparent) 1.2%, transparent 2.2%) 0 0 / calc(var(--space-7) * 1.3) calc(var(--space-7) * 0.9),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 40%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 40%, transparent) 0.8%, transparent 1.6%) var(--space-5) var(--space-4) / calc(var(--space-7) * 1.9) calc(var(--space-7) * 1.5),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 55%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 20%) 55%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 36%) 100%);\n}\n/* shafts of moonlight falling through the arch and the trees */\n.ds-scene__light {\n  background: conic-gradient(from 122deg at 50% 33%, transparent 0deg, color-mix(in srgb, var(--color-accent-alt) 20%, transparent) 9deg, transparent 20deg, transparent 31deg, color-mix(in srgb, var(--color-accent-alt) 26%, transparent) 46deg, transparent 58deg, color-mix(in srgb, var(--color-accent-alt) 30%, transparent) 70deg, transparent 84deg, transparent 96deg, color-mix(in srgb, var(--color-accent-alt) 18%, transparent) 106deg, transparent 116deg, transparent 360deg);\n  -webkit-mask-image: linear-gradient(to bottom, var(--color-shadow) 30%, transparent 92%);\n  mask-image: linear-gradient(to bottom, var(--color-shadow) 30%, transparent 92%);\n}\n.ds-scene__far {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 30%) 40%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 12%) 80%);\n  clip-path: polygon(0 100%, 0.0% 60.0%, 1.5% 50.9%, 3.0% 60.0%, 4.8% 51.7%, 6.7% 60.0%, 8.4% 48.9%, 10.1% 60.0%, 11.3% 47.6%, 12.5% 60.0%, 13.6% 48.3%, 14.8% 60.0%, 16.0% 51.5%, 17.2% 60.0%, 18.8% 44.6%, 20.4% 60.0%, 21.6% 50.3%, 22.9% 60.0%, 24.7% 43.7%, 26.5% 60.0%, 28.3% 49.3%, 30.1% 60.0%, 32.3% 52.8%, 34.5% 60.0%, 36.6% 51.4%, 38.7% 60.0%, 40.0% 53.1%, 41.2% 60.0%, 42.7% 48.6%, 44.2% 60.0%, 45.5% 50.7%, 46.8% 60.0%, 48.6% 52.6%, 50.5% 60.0%, 52.2% 54.4%, 53.9% 60.0%, 55.1% 53.1%, 56.3% 60.0%, 58.2% 51.1%, 60.1% 60.0%, 61.6% 49.4%, 63.0% 60.0%, 64.7% 51.1%, 66.3% 60.0%, 68.3% 47.3%, 70.3% 60.0%, 71.7% 47.7%, 73.1% 60.0%, 74.8% 44.4%, 76.5% 60.0%, 78.4% 49.7%, 80.4% 60.0%, 82.6% 51.2%, 84.8% 60.0%, 86.4% 45.3%, 88.0% 60.0%, 89.3% 47.8%, 90.6% 60.0%, 91.7% 46.1%, 92.9% 60.0%, 94.9% 47.0%, 96.9% 60.0%, 99.0% 49.4%, 100% 60.0%, 100% 100%);\n}\n.ds-scene__mid {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 12%) 40%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 50%) 90%);\n  clip-path: polygon(0 100%, 0.0% 72.0%, 2.2% 47.1%, 4.5% 72.0%, 7.6% 50.6%, 10.8% 72.0%, 13.1% 45.4%, 15.5% 72.0%, 18.9% 50.0%, 22.4% 72.0%, 25.3% 55.3%, 28.2% 72.0%, 30.1% 56.1%, 32.1% 72.0%, 35.1% 62.4%, 38.2% 72.0%, 41.6% 64.1%, 45.1% 72.0%, 47.5% 68.1%, 49.8% 72.0%, 53.7% 64.0%, 57.5% 72.0%, 61.1% 59.2%, 64.7% 72.0%, 66.7% 58.5%, 68.7% 72.0%, 71.6% 58.7%, 74.5% 72.0%, 78.2% 52.4%, 82.0% 72.0%, 84.2% 45.0%, 86.5% 72.0%, 88.6% 43.2%, 90.8% 72.0%, 93.6% 49.4%, 96.4% 72.0%, 99.0% 50.5%, 100% 72.0%, 100% 100%);\n}\n.ds-scene__arch {\n  background: linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 38.5%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 44%) 43%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 44%) 57%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 61.5%);\n  clip-path: polygon(38.6% 84%, 39.4% 80%, 39.8% 39%, 39% 37.6%, 39.8% 36%, 41.4% 28%, 44.6% 19.6%, 50% 12%, 52% 14.6%, 51% 18%, 50% 16.6%, 46.4% 22.4%, 43.8% 30%, 42.8% 37%, 43.4% 38.4%, 42.8% 39.6%, 43% 80%, 43.8% 84%, 56.6% 84%, 57.2% 80%, 57.4% 46%, 56.6% 44.6%, 57.6% 43%, 57.8% 39.6%, 59% 41%, 60.2% 37%, 60.8% 42.6%, 61.4% 44.4%, 60.6% 46%, 60.8% 80%, 61.6% 84%);\n}\n.ds-scene__mist {\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent-alt) 34%, transparent), transparent 70%),\n    radial-gradient(ellipse 40% 8% at 20% 70%, color-mix(in srgb, var(--color-bar-alt-text) 20%, transparent), transparent 70%),\n    radial-gradient(ellipse 42% 7% at 82% 66%, color-mix(in srgb, var(--color-bar-alt-text) 18%, transparent), transparent 70%),\n    radial-gradient(ellipse 30% 5% at 62% 58%, color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent), transparent 70%);\n}\n/* the ground, and a traveller with a staff on the path to the arch */\n.ds-scene__near::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 66%) 78%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 90%) 100%);\n  clip-path: polygon(0 100%, 0 84%, 9% 80%, 20% 84%, 32% 87%, 44% 88.6%, 56% 88.6%, 70% 86%, 82% 82%, 92% 79%, 100% 83%, 100% 100%);\n}\n.ds-scene__near::after {\n  content: \"\";\n  position: absolute;\n  bottom: 11%;\n  left: 48%;\n  width: 4.6%;\n  height: 17%;\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 92%);\n  clip-path: polygon(38% 4%, 50% 0, 60% 5%, 60% 14%, 72% 19%, 76% 40%, 84% 40%, 86% 0, 91% 0, 91% 100%, 86% 100%, 85% 52%, 74% 54%, 78% 100%, 58% 100%, 52% 68%, 44% 68%, 38% 100%, 16% 100%, 24% 54%, 22% 30%, 30% 19%, 40% 14%);\n}\n/* trunks and canopy at both edges, the nearest things in the picture */\n.ds-scene__trunks {\n  background:\n    radial-gradient(ellipse 26% 30% at 4% 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 68%, transparent 70%),\n    radial-gradient(ellipse 14% 18% at 20% 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 68%, transparent 70%),\n    radial-gradient(ellipse 28% 26% at 97% 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 68%, transparent 70%),\n    radial-gradient(ellipse 12% 16% at 78% 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 68%, transparent 70%),\n    linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 90%) 70%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 26%)) 3.4% 0 / 5.6% 100% no-repeat,\n    linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 84%) 70%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 22%)) 14.6% 0 / 2.2% 100% no-repeat,\n    linear-gradient(to left, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 90%) 70%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 26%)) 95.4% 0 / 6.2% 100% no-repeat,\n    linear-gradient(to left, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 84%) 70%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent-alt) 22%)) 83% 0 / 2.4% 100% no-repeat;\n}\n.ds-scene__flies {\n  background:\n    radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 2.4%, transparent 4.4%) 0 0 / calc(var(--space-7) * 1.4) calc(var(--space-7) * 1.1),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 1.6%, transparent 3.4%) var(--space-5) var(--space-6) / calc(var(--space-7) * 2.1) calc(var(--space-7) * 1.7);\n  -webkit-mask-image: radial-gradient(ellipse 44% 30% at 50% 72%, var(--color-shadow) 0, transparent 100%);\n  mask-image: radial-gradient(ellipse 44% 30% at 50% 72%, var(--color-shadow) 0, transparent 100%);\n}\n.ds-scene__shade {\n  background:\n    radial-gradient(ellipse 85% 95% at 50% 50%, transparent 52%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 100%),\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 0, transparent 30%);\n}\n/* other lights: a violet rift behind the arch, a fire on the path */\n.ds-scene--2 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 3% 22% at 50% 40%, color-mix(in srgb, var(--color-bar-alt-text) 96%, transparent) 0, color-mix(in srgb, var(--color-fill-2) 80%, transparent) 70%, transparent 100%),\n    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--color-fill-2) 55%, transparent) 0, color-mix(in srgb, var(--color-fill-2) 16%, transparent) 22%, transparent 46%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 55%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 30%) 100%);\n}\n.ds-scene--2 .ds-scene__light {\n  background: conic-gradient(from 240deg at 50% 40%, transparent 0deg, color-mix(in srgb, var(--color-fill-2) 26%, transparent) 14deg, transparent 30deg, transparent 60deg, color-mix(in srgb, var(--color-fill-2) 22%, transparent) 76deg, transparent 92deg, transparent 148deg, color-mix(in srgb, var(--color-fill-2) 26%, transparent) 164deg, transparent 180deg, transparent 360deg);\n}\n.ds-scene--2 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 30%);\n}\n.ds-scene--2 .ds-scene__arch {\n  background: linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 38.5%, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 50%) 43%, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 50%) 57%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 61.5%);\n}\n.ds-scene--3 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 4% 6% at 50% 84%, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 0, var(--color-fill-3) 60%, transparent 100%),\n    radial-gradient(ellipse 44% 40% at 50% 86%, color-mix(in srgb, var(--color-fill-3) 85%, transparent) 0, color-mix(in srgb, var(--color-fill-3) 30%, transparent) 45%, transparent 100%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 70%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 70%, transparent) 1.2%, transparent 2.2%) 0 0 / calc(var(--space-7) * 1.3) calc(var(--space-7) * 0.9),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 22%) 100%);\n}\n.ds-scene--3 .ds-scene__light {\n  background: conic-gradient(from 300deg at 50% 88%, transparent 0deg, color-mix(in srgb, var(--color-fill-3) 22%, transparent) 20deg, transparent 44deg, transparent 76deg, color-mix(in srgb, var(--color-fill-3) 22%, transparent) 100deg, transparent 120deg, transparent 360deg);\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n.ds-scene--3 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 16%);\n}\n.ds-scene--3 .ds-scene__arch {\n  background: linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 50%) 16%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 60%);\n}\n.ds-scene--3 .ds-scene__mist {\n  background:\n    radial-gradient(ellipse 30% 8% at 50% 86%, color-mix(in srgb, var(--color-fill-3) 60%, transparent), transparent 70%),\n    radial-gradient(ellipse 40% 8% at 20% 70%, color-mix(in srgb, var(--color-bar-alt-text) 16%, transparent), transparent 70%);\n}\n\n/* ---------- hero: the full picture of the home view ---------- */\n.ds-hero {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: var(--size-hero);\n  padding: calc(var(--size-nav) + var(--space-6)) var(--space-5) var(--space-7);\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 90%);\n  text-align: center;\n}\n/* the picture fills the upper part; its dark ground carries the text */\n.ds-hero > .ds-scene__sky,\n.ds-hero > .ds-scene__light,\n.ds-hero > .ds-scene__far,\n.ds-hero > .ds-scene__mid,\n.ds-hero > .ds-scene__arch,\n.ds-hero > .ds-scene__mist,\n.ds-hero > .ds-scene__near,\n.ds-hero > .ds-scene__flies {\n  bottom: 46%;\n}\n.ds-hero__copy {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  width: 100%;\n  max-width: var(--size-page);\n}\n.ds-kicker {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--ui-transform);\n}\n.ds-kicker::before,\n.ds-kicker::after {\n  content: \"\";\n  flex: none;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n  transform: rotate(45deg);\n}\n.ds-hero__title {\n  margin: 0;\n  max-width: 100%;\n  font-family: var(--font-heading);\n  font-size: min(calc(var(--text-display) * 1.75), 10vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n  overflow-wrap: anywhere;\n}\n.ds-hero__lead {\n  margin: 0;\n  max-width: 60ch;\n  font-size: var(--text-large);\n  text-shadow: var(--shadow-text);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4) var(--space-5);\n  margin-top: var(--space-3);\n}\n.ds-hero__note {\n  margin: 0;\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n.ds-platforms {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3) var(--space-5);\n  margin: var(--space-3) 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* ---------- masthead: the low picture that starts an inner page ---------- */\n.ds-masthead {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--size-masthead);\n  padding: calc(var(--size-nav) + var(--space-5)) 0 var(--space-6);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-masthead > .ds-wrap {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n}\n.ds-page-header__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: min(var(--text-display), 10vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: var(--space-3) 0 0;\n  max-width: 60ch;\n  font-size: var(--text-large);\n  text-shadow: var(--shadow-text);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4) var(--space-5);\n  padding: 0 var(--space-2);\n}\n\n/* ---------- sections: full-bleed bands of the sheet colour ---------- */\n.ds-section {\n  padding: var(--space-8) 0;\n  background: var(--color-canvas);\n  color: var(--color-text);\n}\n.ds-section--alt {\n  background: var(--color-surface);\n}\n.ds-section--ground {\n  background: transparent;\n}\n.ds-section--tight {\n  padding: var(--space-7) 0;\n}\n.ds-section > .ds-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-7);\n}\n.ds-section--tight > .ds-wrap {\n  gap: var(--space-6);\n}\n.ds-section__head {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  text-align: center;\n}\n.ds-section__kicker {\n  margin: 0;\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  letter-spacing: var(--display-tracking);\n  text-transform: var(--ui-transform);\n}\n.ds-section__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: min(var(--text-display), 9vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-section__lead {\n  margin: 0;\n  max-width: 62ch;\n  font-size: var(--text-large);\n}\n.ds-section__head .ds-rule {\n  width: min(100%, var(--size-art));\n}\n/* plate: a section title for a band that stands on the page ground */\n.ds-plate {\n  position: relative;\n  align-self: center;\n  margin: 0;\n  padding: var(--space-4) var(--space-7);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\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  letter-spacing: var(--display-tracking);\n  text-align: center;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-plate::before,\n.ds-plate::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: var(--space-4);\n  height: var(--space-4);\n  background: var(--color-accent-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n.ds-plate::after {\n  right: 0;\n  left: auto;\n  transform: translate(50%, -50%) rotate(45deg);\n}\n/* divider: a strip of the page ground between two bands, with a gilded rule */\n.ds-divider {\n  position: relative;\n  height: var(--space-7);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-divider::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: 12%;\n  left: 12%;\n  height: var(--size-hair);\n  background: linear-gradient(to right, transparent, var(--color-border-strong) 30%, var(--color-border-strong) 70%, transparent);\n}\n.ds-divider::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--space-4);\n  height: var(--space-4);\n  background: var(--color-accent-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  box-shadow: 0 0 0 var(--space-1) var(--color-page), 0 0 0 calc(var(--space-1) + var(--border-width)) var(--color-border-strong);\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n/* ---------- feature: a picture on one side, the text on the other ---------- */\n.ds-feature {\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n  gap: var(--space-7);\n  align-items: center;\n}\n.ds-feature--flip {\n  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);\n}\n.ds-feature--flip .ds-feature__art {\n  order: 2;\n}\n.ds-feature__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  text-decoration: none;\n}\n.ds-feature__art::after {\n  content: \"\";\n  position: absolute;\n  inset: var(--space-2);\n  z-index: 3;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 55%, transparent);\n  pointer-events: none;\n}\n.ds-feature__copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.ds-feature__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: min(var(--text-display), 9vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-feature__text {\n  margin: 0;\n  font-size: var(--text-large);\n}\n.ds-feature__points {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-feature__points li {\n  position: relative;\n  padding-left: calc(var(--size-dot) + var(--space-3));\n}\n.ds-feature__points li::before {\n  content: \"\";\n  position: absolute;\n  top: calc(var(--text-base) * 0.45);\n  left: 0;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-border-strong);\n  transform: rotate(45deg);\n}\n.ds-play {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-play);\n  height: var(--size-play);\n  padding-left: var(--space-1);\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: 50%;\n  box-shadow: var(--shadow-control-hover);\n  font-size: var(--text-h1);\n  line-height: 1;\n}\n.ds-feature__caption {\n  position: absolute;\n  right: var(--space-5);\n  bottom: var(--space-4);\n  left: var(--space-5);\n  z-index: 2;\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- details of this pack on shared components ---------- */\n.ds-panel {\n  border-top-color: var(--color-border-strong);\n}\n.ds-panel__title {\n  padding: var(--space-4) var(--space-5);\n  color: var(--color-heading);\n  font-size: var(--text-h2);\n}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__body--flush {\n  padding: 0;\n}\n.ds-panel__foot {\n  padding: var(--space-4) var(--space-5);\n}\n.ds-stats {\n  position: relative;\n  z-index: 3;\n  margin-top: calc((var(--space-8) + var(--space-6)) * -1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-top-color: var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-stat {\n  padding: var(--space-5);\n  text-align: center;\n}\n.ds-stat__value {\n  font-size: var(--text-display);\n  line-height: var(--line-display);\n}\n.ds-stat__label {\n  margin-top: var(--space-2);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-grid__cell {\n  align-items: flex-start;\n}\n.ds-tabs {\n  gap: 0;\n  border-bottom-color: var(--color-border);\n}\n.ds-tabs__tab {\n  min-height: var(--size-control);\n  background: transparent;\n  color: var(--color-link-quiet);\n  border: 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-tabs__tab:hover {\n  color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n  background: transparent;\n  color: var(--color-heading);\n  border-color: var(--color-border-strong);\n  box-shadow: inset 0 calc(var(--space-1) * -1) 0 var(--color-border-strong);\n}\n.ds-breadcrumb {\n  font-family: var(--font-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n.ds-list__item {\n  padding: var(--space-5) 0;\n}\n.ds-list__title {\n  font-size: var(--text-h2);\n}\n.ds-list__date {\n  flex: none;\n  width: var(--size-crest-large);\n  padding-top: var(--space-1);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- carousel of classes: text beside a portrait, crests below ---------- */\n.ds-carousel__stage {\n  padding: 0 calc(var(--size-control) + var(--space-5));\n}\n.ds-carousel__slide {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);\n  gap: var(--space-7);\n  align-items: center;\n}\n.ds-carousel__copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.ds-carousel__name {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: min(calc(var(--text-display) * 1.3), 12vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__name span {\n  display: block;\n  color: var(--color-heading-alt);\n  font-size: var(--text-h1);\n}\n.ds-carousel__text {\n  margin: 0;\n  font-size: var(--text-large);\n}\n.ds-carousel__bars {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  align-self: stretch;\n}\n.ds-carousel__portrait {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-carousel__sigil {\n  position: relative;\n  z-index: 2;\n  width: 46%;\n  color: var(--color-bar-alt-text);\n  opacity: 0.92;\n}\n.ds-carousel__arrow {\n  left: 0;\n  width: var(--size-control);\n  height: var(--size-control);\n}\n.ds-carousel__arrow--next {\n  right: 0;\n  left: auto;\n}\n.ds-carousel__foot {\n  flex-direction: column;\n  gap: var(--space-4);\n  padding-top: var(--space-6);\n}\n.ds-carousel__picks {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-4);\n}\n.ds-carousel__pick {\n  opacity: 0.55;\n  transition: var(--transition);\n}\n.ds-carousel__pick:hover,\n.ds-carousel__pick.is-current {\n  opacity: 1;\n}\n.ds-carousel__pick.is-current .ds-avatar {\n  border-color: var(--color-accent-alt);\n  box-shadow: var(--shadow-control-hover);\n}\n\n/* ---------- editions: three cards, the middle one raised ---------- */\n.ds-editions {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n  align-items: stretch;\n}\n.ds-edition {\n  display: flex;\n  flex-direction: column;\n}\n.ds-edition .ds-panel__body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.ds-edition__flag {\n  position: absolute;\n  top: 0;\n  right: var(--space-5);\n  transform: translateY(-50%);\n}\n.ds-edition--featured {\n  border-color: var(--color-border-strong);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-edition .ds-feature__points {\n  flex: 1;\n}\n.ds-price {\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}\n.ds-price small {\n  margin-left: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* ---------- columns of an inner page ---------- */\n.ds-columns {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-aside);\n  gap: var(--space-7);\n  align-items: start;\n}\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-5);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-top-color: var(--color-border-strong);\n  box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-3) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__link {\n  flex: 1;\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover {\n  color: var(--color-link-hover);\n}\n.ds-sidebar__meta {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- band: the newsletter call, in the opposite material ---------- */\n.ds-band {\n  padding: var(--space-7) 0;\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-band > .ds-wrap {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5) var(--space-7);\n  align-items: center;\n}\n.ds-band__title {\n  margin: 0;\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-band__text {\n  margin: var(--space-2) 0 0;\n}\n.ds-band .ds-form {\n  padding: 0 var(--space-2);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n  padding: var(--space-7) 0 var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer > .ds-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-5);\n  text-align: center;\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3) var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.75;\n}\n.ds-footer__link:hover {\n  opacity: 1;\n}\n.ds-footer .ds-rule {\n  align-self: stretch;\n}\n.ds-footer__note {\n  margin: 0;\n  max-width: 70ch;\n  font-size: var(--text-small);\n  opacity: 0.7;\n}\n\n/* ---------- narrower windows ---------- */\n/* two columns of one height: the panel of the shorter one fills it */\n.ds-split--level {\n  align-items: stretch;\n}\n.ds-split--level > .ds-stack > .ds-panel {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n}\n.ds-split--level > .ds-stack > .ds-panel > .ds-panel__body {\n  flex: 1;\n  justify-content: space-around;\n}\n@media (max-width: 1000px) {\n  .ds-hero,\n  .ds-masthead {\n    padding-top: calc(var(--size-nav) + var(--space-6));\n  }\n  .ds-feature,\n  .ds-feature--flip,\n  .ds-carousel__slide,\n  .ds-columns,\n  .ds-split,\n  .ds-split--wide,\n  .ds-band > .ds-wrap {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-feature--flip .ds-feature__art {\n    order: 0;\n  }\n  .ds-feature__art,\n  .ds-carousel__portrait {\n    min-height: calc(var(--size-art) * 0.6);\n  }\n  .ds-grid,\n  .ds-editions {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-section {\n    padding: var(--space-7) 0;\n  }\n  .ds-stats {\n    margin-top: calc(var(--space-7) * -1 - var(--space-5));\n  }\n}\n@media (max-width: 640px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-brand__name {\n    font-size: var(--text-h3);\n  }\n  .ds-hero {\n    min-height: calc(var(--size-hero) * 0.82);\n    padding-right: var(--space-4);\n    padding-bottom: var(--space-6);\n    padding-left: var(--space-4);\n  }\n  .ds-kicker {\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-grid,\n  .ds-grid--two,\n  .ds-grid--three,\n  .ds-editions {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stats {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat:nth-child(odd) {\n    border-left: 0;\n  }\n  .ds-stat:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-stat__value {\n    font-size: var(--text-h1);\n  }\n  .ds-carousel__stage {\n    padding: 0;\n  }\n  .ds-carousel__arrow {\n    top: auto;\n    bottom: var(--space-3);\n    left: var(--space-3);\n    transform: none;\n  }\n  .ds-carousel__arrow--next {\n    right: var(--space-3);\n    left: auto;\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-form__label {\n    padding-top: 0;\n  }\n  .ds-form__actions-end {\n    margin-left: 0;\n  }\n  .ds-list__item {\n    flex-wrap: wrap;\n  }\n  .ds-list__date {\n    width: 100%;\n  }\n  .ds-plate {\n    padding: var(--space-3) var(--space-5);\n    font-size: var(--text-h2);\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-button--large {\n    padding: 0 var(--space-6);\n  }\n  .ds-page-header__actions,\n  .ds-hero__actions {\n    padding: 0 var(--space-2);\n  }\n  .ds-dialog__backdrop {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-masthead {\n    min-height: 0;\n  }\n  /* the picture keeps the top of the hero, the copy starts on its dark ground */\n  .ds-hero {\n    min-height: 0;\n    padding-top: calc(var(--size-art) * 0.62);\n  }\n  .ds-hero > .ds-scene__sky,\n  .ds-hero > .ds-scene__light,\n  .ds-hero > .ds-scene__far,\n  .ds-hero > .ds-scene__mid,\n  .ds-hero > .ds-scene__arch,\n  .ds-hero > .ds-scene__mist,\n  .ds-hero > .ds-scene__near,\n  .ds-hero > .ds-scene__flies {\n    bottom: auto;\n    height: calc(var(--size-art) * 0.8);\n  }\n  .ds-tabs {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n  }\n  .ds-tabs > li {\n    flex: none;\n  }\n  .ds-tabs__tab {\n    padding: 0 var(--space-4);\n    white-space: nowrap;\n  }\n  .ds-table td a,\n  .ds-table .ds-item {\n    white-space: nowrap;\n  }\n}\n@media (max-width: 1000px) {\n  .ds-tabs {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n  }\n  .ds-tabs > li {\n    flex: none;\n  }\n  .ds-tabs__tab {\n    white-space: nowrap;\n  }\n}\n\n/* ---------- the folded menu: a button in the bar, a sheet of every view under it ---------- */\n.ds-nav__more {\n  display: none;\n}\n.ds-menu__summary {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-3);\n  color: inherit;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 34%, transparent);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__summary::-webkit-details-marker {\n  display: none;\n}\n.ds-nav__bars {\n  width: var(--space-4);\n  height: var(--space-3);\n  background:\n    linear-gradient(currentColor, currentColor) top / 100% calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) center / 100% calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) bottom / 100% calc(var(--space-1) / 2) no-repeat;\n}\n.ds-nav__more[open] > .ds-menu__list {\n  display: block;\n}\n@media (max-width: 1000px) {\n  .ds-nav__links {\n    display: none;\n  }\n  .ds-nav__end {\n    margin-left: auto;\n  }\n  .ds-nav__more {\n    position: static;\n    display: block;\n  }\n  .ds-nav__more .ds-menu__list {\n    top: 100%;\n    right: 0;\n    left: 0;\n    min-width: 0;\n    padding: var(--space-2) var(--space-4) var(--space-4);\n    border-right-width: 0;\n    border-left-width: 0;\n    border-radius: 0;\n    transform: none;\n  }\n  .ds-nav__more .ds-menu__item {\n    padding: var(--space-3) var(--space-2);\n    border-bottom: var(--border-width) var(--border-style) var(--color-border);\n    border-radius: 0;\n    white-space: normal;\n  }\n  .ds-nav__more li:last-child > .ds-menu__item {\n    border-bottom: 0;\n  }\n  .ds-nav__more .ds-menu__item--sub {\n    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n    color: var(--color-text-muted);\n    font-size: var(--text-small);\n  }\n  .ds-page:has(#home:target) .ds-nav__more .ds-menu__item[href=\"#home\"]:not(.ds-menu__item--sub),\n.ds-page:has(#classes:target) .ds-nav__more .ds-menu__item[href=\"#classes\"]:not(.ds-menu__item--sub),\n.ds-page:has(#editions:target) .ds-nav__more .ds-menu__item[href=\"#editions\"]:not(.ds-menu__item--sub),\n.ds-page:has(#news:target) .ds-nav__more .ds-menu__item[href=\"#news\"]:not(.ds-menu__item--sub),\n.ds-page:has(#access:target) .ds-nav__more .ds-menu__item[href=\"#access\"]:not(.ds-menu__item--sub) {\n    color: var(--color-heading);\n    box-shadow: inset var(--space-1) 0 0 var(--color-accent);\n  }\n  .ds-nav {\n    flex-wrap: nowrap;\n    gap: var(--space-3);\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__action {\n    display: none;\n  }\n}\n\n/* ---------- phones: a tip opens under its trigger, between the gutters ---------- */\n@media (max-width: 700px) {\n  .ds-tooltip {\n    position: static;\n  }\n  .ds-tooltip__tip,\n  .ds-tooltip--end .ds-tooltip__tip {\n    top: auto;\n    right: var(--space-4);\n    bottom: auto;\n    left: var(--space-4);\n    width: auto;\n    max-width: var(--size-tip);\n    margin-top: var(--space-2);\n  }\n  .ds-tooltip--card .ds-tooltip__tip {\n    margin-top: 0;\n  }\n}\n@media (max-width: 640px) {\n  .ds-nav {\n    gap: var(--space-2);\n    padding: 0 var(--space-3);\n  }\n  .ds-nav .ds-brand {\n    flex: 0 1 auto;\n    min-width: 0;\n    gap: var(--space-2);\n  }\n  .ds-nav .ds-brand__name {\n    font-size: var(--text-ui);\n    letter-spacing: 0;\n  }\n  .ds-nav .ds-button--small {\n    padding: 0 var(--space-2);\n    letter-spacing: 0;\n    white-space: nowrap;\n  }\n  .ds-nav__label {\n    display: none;\n  }\n  .ds-menu__summary {\n    justify-content: center;\n    width: var(--size-control);\n    padding: 0;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: early access, specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" aria-hidden=\"true\"><polygon points=\"7,3 17,3 21.5,9 12,21.5 2.5,9\"/><polyline points=\"2.5,9 21.5,9\"/><polyline points=\"8.5,9 12,21 15.5,9\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Home</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#classes\">Classes</a></li>\n      <li class=\"ds-menu\">\n        <a class=\"ds-nav__link\" href=\"#editions\">Editions <span class=\"ds-menu__caret\">&#9662;</span></a>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#editions\">Compare editions</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#editions\">Questions</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#access\">Redeem a key</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#news\">News</a></li>\n    </ul>\n    <div class=\"ds-nav__end\">\n      <a class=\"ds-nav__action\" href=\"#access\">Sign in</a>\n      <a class=\"ds-button ds-button--small\" href=\"#access\">Get access</a>\n    </div>\n    <details class=\"ds-menu ds-nav__more\">\n      <summary class=\"ds-menu__summary\"><span class=\"ds-nav__bars\"></span><span class=\"ds-nav__label\">Menu</span></summary>\n      <ul class=\"ds-menu__list\">\n        <li><a class=\"ds-menu__item\" href=\"#home\">Home</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#classes\">Classes</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#editions\">Editions</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#editions\">Compare editions</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#editions\">Questions</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#access\">Redeem a key</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#news\">News</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#access\">Sign in</a></li>\n      </ul>\n    </details>\n  </header>\n\n  <main>\n\n    <section class=\"ds-view ds-view--home\" id=\"home\">\n      <div class=\"ds-scene ds-hero\" data-component=\"hero\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-hero__copy\">\n          <p class=\"ds-kicker\">Early access is live</p>\n          <h1 class=\"ds-hero__title\">The long dusk</h1>\n          <p class=\"ds-hero__lead\">The moon has not set in a hundred years. Walk the old forest road, wake what sleeps under the arch and decide what the morning will owe you.</p>\n          <ul class=\"ds-platforms\">\n            <li><a class=\"ds-button ds-button--secondary\" href=\"#editions\">PC</a></li>\n            <li><a class=\"ds-button ds-button--secondary\" href=\"#editions\">Mac</a></li>\n            <li><a class=\"ds-button ds-button--secondary\" href=\"#editions\">Console</a></li>\n            <li><a class=\"ds-button ds-button--secondary\" href=\"#editions\">Handheld</a></li>\n          </ul>\n          <div class=\"ds-hero__actions\">\n            <a class=\"ds-button ds-button--large\" href=\"#access\">Get access now</a>\n          </div>\n          <p class=\"ds-hero__note\">Early access holds three of six acts. Your characters carry over to the full release.</p>\n        </div>\n      </div>\n\n      <div class=\"ds-section\">\n        <div class=\"ds-wrap\">\n          <div class=\"ds-stats\" data-component=\"stats\">\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">6</span><span class=\"ds-stat__label\">Classes</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">3</span><span class=\"ds-stat__label\">Acts to play</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">240</span><span class=\"ds-stat__label\">Skills</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">1 to 6</span><span class=\"ds-stat__label\">Players</span></div>\n          </div>\n          <div class=\"ds-feature\">\n            <a class=\"ds-scene ds-feature__art\" href=\"#home\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-play\">&#9654;</span><span class=\"ds-feature__caption\"><span>Launch trailer</span><span>2:48</span></span></a>\n            <div class=\"ds-feature__copy\">\n              <p class=\"ds-section__kicker\">A new action role-playing game</p>\n              <h2 class=\"ds-feature__title\">Night without end</h2>\n              <p class=\"ds-feature__text\">chronoskin is a dark fantasy game of fast fights and slow choices. Every skill can be bent by the relics you set into it, and every relic is found, not bought.</p>\n              <ul class=\"ds-feature__points\">\n                <li>One purchase. No subscription, no paid power.</li>\n                <li>A campaign for one, built to be shared by six.</li>\n                <li>New acts and classes arrive during early access.</li>\n              </ul>\n              <a class=\"ds-button ds-button--secondary\" href=\"#news\">Read the roadmap</a>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-divider\"></div>\n\n      <div class=\"ds-section ds-section--alt\">\n        <div class=\"ds-wrap\">\n          <div class=\"ds-section__head\">\n            <p class=\"ds-section__kicker\">Six classes</p>\n            <h2 class=\"ds-section__title\">Choose who walks</h2>\n            <div class=\"ds-rule\"></div>\n          </div>\n          <div class=\"ds-carousel\">\n            <div class=\"ds-carousel__stage\">\n              <div class=\"ds-carousel__slide\">\n                <div class=\"ds-carousel__copy\">\n                  <h3 class=\"ds-carousel__name\"><span>The</span>Warden</h3>\n                  <p class=\"ds-carousel__text\">Raised at the forest wall, the Warden answers every blow with a heavier one. She holds a line alone and turns it into a door for her friends.</p>\n                  <div class=\"ds-carousel__bars\">\n                    <div><div class=\"ds-progress__label\"><strong>Might</strong><span>High</span></div><span class=\"ds-progress ds-progress--90\"><span class=\"ds-progress__bar\"></span></span></div>\n                    <div><div class=\"ds-progress__label\"><strong>Guile</strong><span>Low</span></div><span class=\"ds-progress ds-progress--25 ds-progress--xp\"><span class=\"ds-progress__bar\"></span></span></div>\n                    <div><div class=\"ds-progress__label\"><strong>Lore</strong><span>Middling</span></div><span class=\"ds-progress ds-progress--60 ds-progress--rep\"><span class=\"ds-progress__bar\"></span></span></div>\n                  </div>\n                  <a class=\"ds-button ds-button--secondary\" href=\"#classes\">See the Warden</a>\n                </div>\n                <div class=\"ds-scene ds-scene--2 ds-carousel__portrait\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-carousel__sigil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6zM12 7v10M8 11h8\"/></svg></span></div>\n              </div>\n              <a class=\"ds-carousel__arrow\" href=\"#home\">&#9664;</a>\n              <a class=\"ds-carousel__arrow ds-carousel__arrow--next\" href=\"#home\">&#9654;</a>\n            </div>\n            <div class=\"ds-carousel__foot\">\n              <div class=\"ds-carousel__picks\">\n                <a class=\"ds-carousel__pick is-current\" href=\"#classes\"><span class=\"ds-avatar ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z\"/></svg></span></a><a class=\"ds-carousel__pick\" href=\"#classes\"><span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2v14M8 16h8M12 16v6\"/></svg></span></a><a class=\"ds-carousel__pick\" href=\"#classes\"><span class=\"ds-avatar ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 19c0-9 5-14 14-14 0 9-5 14-14 14zM5 19l8-8\"/></svg></span></a><a class=\"ds-carousel__pick\" href=\"#classes\"><span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c4 5 6 7 6 11a6 6 0 0 1-12 0c0-3 2-4 3-7 1 2 2 2 3-4z\"/></svg></span></a><a class=\"ds-carousel__pick\" href=\"#classes\"><span class=\"ds-avatar ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 3c8 3 8 15 0 18M6 3v18M3 12h17M17 9l3 3-3 3\"/></svg></span></a><a class=\"ds-carousel__pick\" href=\"#classes\"><span class=\"ds-avatar ds-avatar--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M16 4a8 8 0 1 0 4 12 7 7 0 0 1-4-12z\"/></svg></span></a>\n              </div>\n              <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-divider\"></div>\n\n      <div class=\"ds-section\">\n        <div class=\"ds-wrap\">\n          <div class=\"ds-feature ds-feature--flip\">\n            <div class=\"ds-scene ds-scene--2 ds-feature__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span></div>\n            <div class=\"ds-feature__copy\">\n              <p class=\"ds-section__kicker\">Endgame</p>\n              <h2 class=\"ds-feature__title\">The hundred doors</h2>\n              <p class=\"ds-feature__text\">When the campaign ends the arch opens. Behind it lie a hundred rooms that rearrange themselves each night, and a keeper for every tenth.</p>\n              <ul class=\"ds-feature__points\">\n                <li>Rooms drop relics such as <span class=\"ds-tooltip\" tabindex=\"0\"><span class=\"ds-item ds-item--legendary\">Dusk Lantern</span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name ds-item ds-item--legendary\">Dusk Lantern</span><span class=\"ds-tooltip__line\"><span>Relic</span><span>Level 40</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Skills set here also blind</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>It was lit once and never again.</span></span></span></span>, found nowhere else.</li>\n                <li>Ten keepers, each with a ladder of its own.</li>\n              </ul>\n            </div>\n          </div>\n          <div class=\"ds-feature\">\n            <div class=\"ds-scene ds-scene--3 ds-feature__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span></div>\n            <div class=\"ds-feature__copy\">\n              <p class=\"ds-section__kicker\">Play together</p>\n              <h2 class=\"ds-feature__title\">Six at the fire</h2>\n              <p class=\"ds-feature__text\">Bring up to five friends on any platform. Loot falls for each player alone, and a camp fire lets the party trade what it found.</p>\n              <ul class=\"ds-feature__points\">\n                <li>Cross-play and one shared save.</li>\n                <li>Couch play for two on console.</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-section ds-section--ground\">\n        <div class=\"ds-wrap\">\n          <h2 class=\"ds-plate\">Platforms and editions</h2>\n          <div class=\"ds-grid\" data-component=\"grid\">\n            <div class=\"ds-grid__cell\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z\"/></svg></span><h3 class=\"ds-grid__title\">PC</h3><p class=\"ds-grid__text\">Out now. Runs on a six year old graphics card at sixty frames.</p><span class=\"ds-badge ds-badge--success\">Available</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M16 4a8 8 0 1 0 4 12 7 7 0 0 1-4-12z\"/></svg></span><h3 class=\"ds-grid__title\">Mac</h3><p class=\"ds-grid__text\">Out now for machines from 2021 on, with the same save.</p><span class=\"ds-badge ds-badge--success\">Available</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c4 5 6 7 6 11a6 6 0 0 1-12 0c0-3 2-4 3-7 1 2 2 2 3-4z\"/></svg></span><h3 class=\"ds-grid__title\">Console</h3><p class=\"ds-grid__text\">Out now on both current consoles, with couch play for two.</p><span class=\"ds-badge ds-badge--success\">Available</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 19c0-9 5-14 14-14 0 9-5 14-14 14zM5 19l8-8\"/></svg></span><h3 class=\"ds-grid__title\">Handheld</h3><p class=\"ds-grid__text\">In certification. Expected with the fourth act.</p><span class=\"ds-badge ds-badge--warning\">In review</span></div>\n          </div>\n          <div class=\"ds-editions\">\n            <div class=\"ds-panel ds-edition\">\n              <h3 class=\"ds-panel__title\">Early access</h3>\n              <div class=\"ds-panel__body\">\n                <span class=\"ds-price\">30 <small>USD</small></span>\n                <ul class=\"ds-feature__points\"><li>The game, now and at release</li><li>300 coins for the wardrobe</li></ul>\n                <a class=\"ds-button ds-button--secondary\" href=\"#access\">Choose</a>\n              </div>\n            </div>\n            <div class=\"ds-panel ds-edition ds-edition--featured\">\n              <span class=\"ds-badge ds-edition__flag\">Most chosen</span>\n              <h3 class=\"ds-panel__title\">Lantern edition</h3>\n              <div class=\"ds-panel__body\">\n                <span class=\"ds-price\">60 <small>USD</small></span>\n                <ul class=\"ds-feature__points\"><li>Everything in early access</li><li>The Lantern armour for every class</li><li>Two more stash tabs</li></ul>\n                <a class=\"ds-button\" href=\"#access\">Choose</a>\n              </div>\n            </div>\n            <div class=\"ds-panel ds-edition\">\n              <h3 class=\"ds-panel__title\">Keeper edition</h3>\n              <div class=\"ds-panel__body\">\n                <span class=\"ds-price\">100 <small>USD</small></span>\n                <ul class=\"ds-feature__points\"><li>Everything in the Lantern edition</li><li>The Keeper wings and hideout</li><li>The art book and the score</li></ul>\n                <a class=\"ds-button ds-button--secondary\" href=\"#editions\">Compare all three</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-band\">\n        <div class=\"ds-wrap\">\n          <div>\n            <h2 class=\"ds-band__title\">Hear when the fourth act opens</h2>\n            <p class=\"ds-band__text\">One letter for each large patch. Nothing else, and one click to leave.</p>\n          </div>\n          <form class=\"ds-form ds-form--inline\" action=\"#home\">\n            <input class=\"ds-form__input\" type=\"text\" placeholder=\"Your e-mail address\" aria-label=\"Your e-mail address\">\n            <button class=\"ds-button\" type=\"button\">Subscribe</button>\n          </form>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"classes\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#classes\">Classes</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li class=\"ds-breadcrumb__current\">The Warden</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">The Warden</h1>\n              <p class=\"ds-page-header__text\">Might and Lore. A shield, a mace and the patience of a wall.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#access\">Play the Warden</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-section ds-section--tight\">\n        <div class=\"ds-wrap\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#classes\">Warden</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#classes\">Reaver</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#classes\">Thornspeaker</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#classes\">Ember witch</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#classes\">Strider</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#classes\">Moon sage <span class=\"ds-tabs__count\">soon</span></a></li>\n          </ul>\n          <div class=\"ds-split ds-split--wide ds-split--level\">\n            <div class=\"ds-stack\">\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>She does not step back</h1>\n              <p class=\"ds-prose__lead\">The Warden fights where she stands and makes that place safe.</p>\n              <p>Her skills build <strong>resolve</strong> each time she blocks, and spend it in slams that stagger everything near. With a relic of the right kind a slam becomes a wall, a banner or a wave of fire.</p>\n              <h2>Three ways to grow</h2>\n              <ul>\n                <li>Bulwark: more block, and allies behind you share it.</li>\n                <li>Oathkeeper: banners that heal and brand.</li>\n                <li>Breaker: two-handed maces and no shield at all.</li>\n              </ul>\n              <h3>For those who plan ahead</h3>\n              <p>Builds can be saved as text and shared. A Warden build starts with <code>WRD</code> and its relics follow in order.</p>\n            </div>\n              <div class=\"ds-row\">\n                <span class=\"ds-avatar ds-avatar--large ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z\"/></svg></span>\n                <div class=\"ds-tooltip ds-tooltip--card\">\n                  <span class=\"ds-tooltip__tip\">\n                    <span class=\"ds-tooltip__name ds-item ds-item--rare\">Wallwarden's Oath</span>\n                    <span class=\"ds-tooltip__line\"><span>Tower shield</span><span>Level 38</span></span>\n                    <span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>+22% chance to block</span></span>\n                    <span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Blocking grants resolve</span></span>\n                    <span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Warden only</span></span>\n                    <span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>The wall is whoever stands.</span></span>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div class=\"ds-stack\">\n              <div class=\"ds-panel\" data-component=\"panel\">\n                <h2 class=\"ds-panel__title\">Attributes at level 40</h2>\n                <div class=\"ds-panel__body ds-stack ds-stack--tight\">\n                  <div><div class=\"ds-progress__label\"><strong>Might</strong><span>128</span></div><span class=\"ds-progress ds-progress--90\"><span class=\"ds-progress__bar\"></span></span></div>\n                  <div><div class=\"ds-progress__label\"><strong>Guile</strong><span>34</span></div><span class=\"ds-progress ds-progress--25 ds-progress--xp\"><span class=\"ds-progress__bar\"></span></span></div>\n                  <div><div class=\"ds-progress__label\"><strong>Lore</strong><span>81</span></div><span class=\"ds-progress ds-progress--60 ds-progress--rep\"><span class=\"ds-progress__bar\"></span></span></div>\n                  <div><div class=\"ds-progress__label\"><strong>Life</strong><span>2,140</span></div><span class=\"ds-progress ds-progress--75 ds-progress--health\"><span class=\"ds-progress__bar\"></span></span></div>\n                </div>\n                <div class=\"ds-panel__foot\"><span>With starting gear and no relics.</span></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"ds-panel\">\n            <div class=\"ds-panel__body ds-panel__body--flush ds-table__wrap\">\n              <table class=\"ds-table\" data-component=\"table\">\n                <thead><tr><th>Skill</th><th>Kind</th><th class=\"is-numeric\">Learned at</th><th class=\"is-numeric\">Resolve</th><th>Relic slots</th></tr></thead>\n                <tbody>\n                  <tr><td><span class=\"ds-item ds-item--uncommon\">Shield slam</span></td><td>Strike</td><td class=\"is-numeric\">1</td><td class=\"is-numeric\">0</td><td>2</td></tr>\n                  <tr><td><span class=\"ds-item ds-item--uncommon\">Hold the line</span></td><td>Stance</td><td class=\"is-numeric\">4</td><td class=\"is-numeric\">10</td><td>2</td></tr>\n                  <tr><td><span class=\"ds-item ds-item--rare\">Oath banner</span></td><td>Banner</td><td class=\"is-numeric\">12</td><td class=\"is-numeric\">25</td><td>3</td></tr>\n                  <tr><td><span class=\"ds-item ds-item--rare\">Quake</span></td><td>Slam</td><td class=\"is-numeric\">20</td><td class=\"is-numeric\">40</td><td>3</td></tr>\n                  <tr><td><span class=\"ds-item ds-item--epic\">The last wall</span></td><td>Ultimate</td><td class=\"is-numeric\">36</td><td class=\"is-numeric\">100</td><td>4</td></tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"editions\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#editions\">Editions</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li class=\"ds-breadcrumb__current\">Compare</li>\n          </ol>\n          <div class=\"ds-page-header\" data-component=\"page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Three editions</h1>\n              <p class=\"ds-page-header__text\">One game in each. The larger two add looks and room, never strength.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#access\">Get access</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-section ds-section--tight\">\n        <div class=\"ds-wrap\">\n          <div class=\"ds-panel\">\n            <div class=\"ds-panel__body ds-panel__body--flush ds-table__wrap\">\n              <table class=\"ds-table\">\n                <thead><tr><th>What you get</th><th class=\"is-centre\">Early access</th><th class=\"is-centre\">Lantern</th><th class=\"is-centre\">Keeper</th></tr></thead>\n                <tbody>\n                  <tr><td>The game, now and at release</td><td class=\"is-centre\">Yes</td><td class=\"is-centre\">Yes</td><td class=\"is-centre\">Yes</td></tr>\n                  <tr><td>Coins for the wardrobe</td><td class=\"is-centre\">300</td><td class=\"is-centre\">800</td><td class=\"is-centre\">1,500</td></tr>\n                  <tr><td>Lantern armour for every class</td><td class=\"is-centre\">No</td><td class=\"is-centre\">Yes</td><td class=\"is-centre\">Yes</td></tr>\n                  <tr><td>More stash tabs</td><td class=\"is-centre\">No</td><td class=\"is-centre\">2</td><td class=\"is-centre\">6</td></tr>\n                  <tr><td>Keeper wings and hideout</td><td class=\"is-centre\">No</td><td class=\"is-centre\">No</td><td class=\"is-centre\">Yes</td></tr>\n                  <tr><td>Price</td><td class=\"is-centre\"><strong>30 USD</strong></td><td class=\"is-centre\"><strong>60 USD</strong></td><td class=\"is-centre\"><strong>100 USD</strong></td></tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n          <div class=\"ds-split\">\n            <div class=\"ds-stack\">\n              <h2 class=\"ds-heading\">Questions</h2>\n              <div class=\"ds-accordion\">\n                <details class=\"ds-accordion__item\" open>\n                  <summary class=\"ds-accordion__summary\">Will my character be wiped at release</summary>\n                  <div class=\"ds-accordion__body\"><p>No. Characters, relics and stash carry over. Only the ladders start again.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">Can I upgrade my edition later</summary>\n                  <div class=\"ds-accordion__body\"><p>Yes, for the difference in price.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">Does one purchase cover every platform</summary>\n                  <div class=\"ds-accordion__body\"><p>The save is shared; the game is bought once per platform.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">How long will early access last</summary>\n                  <div class=\"ds-accordion__body\"><p>About a year. The roadmap names the acts in order.</p></div>\n                </details>\n              </div>\n            </div>\n            <div class=\"ds-stack\">\n              <h2 class=\"ds-heading\">Where it runs</h2>\n              <div class=\"ds-panel\">\n                <div class=\"ds-panel__body\">\n                  <ul class=\"ds-list ds-list--tight\">\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-list__title\">PC and Mac</span><span class=\"ds-list__meta\">Patch 0.3.2</span></div><span class=\"ds-badge ds-badge--success\">Available</span></li>\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-list__title\">Console</span><span class=\"ds-list__meta\">Patch 0.3.1, the next is with the platform holder</span></div><span class=\"ds-badge ds-badge--warning\">Patch in review</span></li>\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-list__title\">Handheld</span><span class=\"ds-list__meta\">Expected with the fourth act</span></div><span data-component=\"badge\"><span class=\"ds-badge\">Planned</span></span></li>\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-list__title\">Founder's keys</span><span class=\"ds-list__meta\">The first ten thousand are gone</span></div><span class=\"ds-badge ds-badge--danger\">Sold out</span></li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"access\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#editions\">Editions</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li class=\"ds-breadcrumb__current\">Get access</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Get access</h1>\n              <p class=\"ds-page-header__text\">Make an account, pick a platform and an edition. Two minutes, then the download.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#editions\">Compare editions</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-section ds-section--tight\">\n        <div class=\"ds-wrap\">\n          <div class=\"ds-notices\" data-component=\"notice\">\n            <div class=\"ds-notice\"><p class=\"ds-notice__title\">Keys from a shop work here too</p><p class=\"ds-notice__text\">Enter the key below instead of choosing an edition.</p></div>\n            <div class=\"ds-notice ds-notice--error\"><p class=\"ds-notice__title\">That key was not accepted</p><p class=\"ds-notice__text\">Keys have twenty characters in five groups. Check the third group.</p></div>\n          </div>\n          <div class=\"ds-split ds-split--wide\">\n            <div class=\"ds-panel\">\n              <h2 class=\"ds-panel__title\">Your account</h2>\n              <div class=\"ds-panel__body\">\n                <form class=\"ds-form\" data-component=\"form\" action=\"#access\">\n                  <div class=\"ds-form__row\">\n                    <label class=\"ds-form__label\" for=\"a-mail\">E-mail</label>\n                    <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"a-mail\" type=\"text\" value=\"warden@example.org\"></div>\n                  </div>\n                  <div class=\"ds-form__row\">\n                    <label class=\"ds-form__label\" for=\"a-platform\">Platform</label>\n                    <div class=\"ds-form__field\"><select class=\"ds-form__select\" id=\"a-platform\"><option>PC</option><option>Mac</option><option>Console</option></select></div>\n                  </div>\n                  <div class=\"ds-form__row\">\n                    <label class=\"ds-form__label\" for=\"a-key\">Key</label>\n                    <div class=\"ds-form__field\">\n                      <input class=\"ds-form__input is-error\" id=\"a-key\" type=\"text\" value=\"DUSK-7Q2M-0000-LANT-ERN1\">\n                      <p class=\"ds-form__error\">The third group is not valid.</p>\n                    </div>\n                  </div>\n                  <div class=\"ds-form__row\">\n                    <label class=\"ds-form__label\" for=\"a-note\">Anything else</label>\n                    <div class=\"ds-form__field\">\n                      <textarea class=\"ds-form__textarea\" id=\"a-note\" placeholder=\"For example, a friend who invited you\"></textarea>\n                      <p class=\"ds-form__hint\">Optional. A person reads it.</p>\n                    </div>\n                  </div>\n                  <div class=\"ds-form__row\">\n                    <span class=\"ds-form__label\">Letters</span>\n                    <div class=\"ds-form__field\">\n                      <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Patch notes by e-mail</span><span class=\"ds-switch__hint\">One letter for each large patch</span></span><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span></label>\n                      <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Offers and sales</span><span class=\"ds-switch__hint\">A few times a year</span></span><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span></label>\n                    </div>\n                  </div>\n                  <div class=\"ds-form__row\">\n                    <span class=\"ds-form__label\">Terms</span>\n                    <div class=\"ds-form__field\"><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I accept the terms of early access</label></div>\n                  </div>\n                  <div class=\"ds-form__actions\" data-component=\"buttons\">\n                    <button class=\"ds-button\" type=\"button\">Create account</button>\n                    <a class=\"ds-button ds-button--secondary\" href=\"#editions\">Back</a>\n                    <button class=\"ds-button is-disabled\" type=\"button\" disabled>Download</button>\n                    <span class=\"ds-form__actions-end\"><button class=\"ds-button ds-button--danger\" type=\"button\">Delete this account</button></span>\n                  </div>\n                </form>\n              </div>\n            </div>\n            <div class=\"ds-stack\">\n              <div class=\"ds-dialog__backdrop\">\n                <div class=\"ds-dialog\" data-component=\"dialog\">\n                  <h2 class=\"ds-dialog__title\"><span>Delete this account?</span><a class=\"ds-dialog__close\" href=\"#access\">x</a></h2>\n                  <div class=\"ds-dialog__body\">\n                    <p class=\"ds-dialog__text\">Characters, relics and purchases on it are lost for good. This cannot be undone.</p>\n                    <div class=\"ds-dialog__actions\">\n                      <a class=\"ds-button ds-button--secondary\" href=\"#access\">Keep it</a>\n                      <a class=\"ds-button ds-button--danger\" href=\"#home\">Delete</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"ds-panel\">\n                <h2 class=\"ds-panel__title\">Your choice</h2>\n                <div class=\"ds-panel__body ds-stack ds-stack--tight\">\n                  <div class=\"ds-row ds-row--between\"><span class=\"ds-item ds-item--legendary\">Lantern edition</span><span class=\"ds-price\">60 <small>USD</small></span></div>\n                  <p class=\"ds-panel__text ds-muted\">Charged once, when the account is created.</p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"news\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__light\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__mid\"></span><span class=\"ds-scene__arch\"></span><span class=\"ds-scene__mist\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__trunks\"></span><span class=\"ds-scene__flies\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#news\">News</a></li>\n            <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n            <li class=\"ds-breadcrumb__current\">Updates</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">News and roadmap</h1>\n              <p class=\"ds-page-header__text\">What changed, what comes next and when.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#access\">Get the letters</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-section ds-section--tight\">\n        <div class=\"ds-wrap\">\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\n              <ul class=\"ds-list\" data-component=\"list\">\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">2 October</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Patch 0.3.2: the Warden's banners</a><p class=\"ds-list__text\">Banners now follow the party, two keepers hit less hard and the stash opens faster.</p><span class=\"ds-list__meta\">Patch notes, 6 minutes to read</span></div><span class=\"ds-badge ds-badge--new\">New</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">18 September</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">What we learned in the first month</a><p class=\"ds-list__text\">Half of you play in a party, the third act is too long and the Strider is loved more than we planned.</p><span class=\"ds-list__meta\">From the developers, 9 minutes</span></div></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">4 September</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#classes\">The sixth class has a name</a><p class=\"ds-list__text\">The Moon sage arrives with the fourth act. A first look at her skills and her relics.</p><span class=\"ds-list__meta\">Preview, 4 minutes</span></div></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">20 August</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Early access is live</a><p class=\"ds-list__text\">Three acts, five classes, four platforms. Thank you for waiting.</p><span class=\"ds-list__meta\">Announcement, 2 minutes</span></div></li>\n              </ul>\n              <div class=\"ds-row ds-row--between\">\n                <ul class=\"ds-links\" data-component=\"links\">\n                  <li><a class=\"ds-link\" href=\"#news\">All patch notes</a></li>\n                  <li><a class=\"ds-link is-visited\" href=\"#news\">Known issues</a></li>\n                  <li><a class=\"ds-link is-hover\" href=\"#news\">Press kit</a></li>\n                  <li><a class=\"ds-link is-active\" href=\"#news\">Feed</a></li>\n                </ul>\n                <ul class=\"ds-pagination\" data-component=\"pagination\">\n                  <li><span class=\"ds-pagination__link is-disabled\">Newer</span></li>\n                  <li><span class=\"ds-pagination__link is-current\">1</span></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#news\">2</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#news\">3</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#news\">Older</a></li>\n                </ul>\n              </div>\n            </div>\n            <aside class=\"ds-stack\">\n              <div class=\"ds-sidebar\" data-component=\"sidebar\">\n                <h2 class=\"ds-sidebar__title\">Roadmap</h2>\n                <div><div class=\"ds-progress__label\"><strong>Road to release</strong><span>3 of 6 acts</span></div><span class=\"ds-progress ds-progress--40\"><span class=\"ds-progress__bar\"></span></span></div>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span><a class=\"ds-sidebar__link\" href=\"#news\">Acts one to three</a><span class=\"ds-sidebar__meta\">Live</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--warning\"></span><a class=\"ds-sidebar__link\" href=\"#classes\">Act four and the Moon sage</a><span class=\"ds-sidebar__meta\">Winter</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot\"></span><a class=\"ds-sidebar__link\" href=\"#news\">Act five and trade</a><span class=\"ds-sidebar__meta\">Spring</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot\"></span><a class=\"ds-sidebar__link\" href=\"#news\">Act six and release</a><span class=\"ds-sidebar__meta\">Next year</span></li>\n                </ul>\n              </div>\n              <div class=\"ds-empty\" data-component=\"empty\">\n                <span class=\"ds-empty__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M16 4a8 8 0 1 0 4 12 7 7 0 0 1-4-12z\"/></svg></span>\n                <h3 class=\"ds-empty__title\">No streams tonight</h3>\n                <p class=\"ds-empty__text\">The developers play on the first Thursday of the month. The next evening will show here.</p>\n                <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#news\">See past evenings</a>\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n    </section>\n\n  </main>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <div class=\"ds-wrap\">\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Home</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#classes\">Classes</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#editions\">Editions</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#news\">News</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#access\">Get access</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#access\">Support</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#access\">Privacy</a></li>\n      </ul>\n      <div class=\"ds-rule\"></div>\n      <p class=\"ds-footer__note\">chronoskin is a specimen site. Early access means the game is unfinished: acts, classes and numbers will change before release.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.game-fantasy.landing.s05.p02.t03.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"game-fantasy\",\n    \"years\": [\n      2004,\n      2026\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-gf-5233\",\n  \"short\": \"v1-gf-5233\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #1b130c;\n  --color-canvas: #e3d2a6;\n  --color-surface: #ecdfbb;\n  --color-surface-alt: #e0cd9c;\n  --color-surface-strong: #cfb67e;\n  --color-bar: #6e1a14;\n  --color-bar-text: #f4e3b5;\n  --color-bar-alt: #3a2a18;\n  --color-bar-alt-text: #e2cb94;\n  --color-inverse: #241a10;\n  --color-inverse-text: #ead9ab;\n  --color-text: #2e2112;\n  --color-text-muted: #6f5b3c;\n  --color-heading: #5e150f;\n  --color-heading-alt: #6b4313;\n  --color-link: #7b4f17;\n  --color-link-quiet: #5a4630;\n  --color-link-visited: #6d5a52;\n  --color-link-hover: #a3231a;\n  --color-link-active: #2e2112;\n  --color-border: #b79c62;\n  --color-border-strong: #8a6a2c;\n  --color-border-muted: #d1bd8a;\n  --color-accent: #2f5d34;\n  --color-accent-text: #f4e9c4;\n  --color-accent-alt: #a8551a;\n  --color-fill-1: #1d4f91;\n  --color-fill-2: #6b2a8c;\n  --color-fill-3: #a8480f;\n  --color-fill-4: #17695f;\n  --color-button: #7a1f17;\n  --color-button-text: #f8e7b8;\n  --color-button-hover-text: #fffbe8;\n  --color-button-secondary: #c9a85a;\n  --color-button-secondary-text: #2e2112;\n  --color-input: #f6ecd0;\n  --color-input-text: #2e2112;\n  --color-input-border: #9a8250;\n  --color-disabled: #d6c79d;\n  --color-disabled-text: #94835f;\n  --color-danger: #9c1c12;\n  --color-danger-surface: #efc9b0;\n  --color-success: #2f6b1f;\n  --color-warning: #9a6200;\n  --color-notice: #dfe0b4;\n  --color-notice-text: #3a3a16;\n  --color-focus: #1d4f91;\n  --color-shadow: #1a0f05;\n  --color-overlay: rgba(20, 12, 4, 0.6);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Trebuchet MS\", \"Lucida Grande\", \"Lucida Sans Unicode\", Tahoma, sans-serif;\n  --font-heading: \"EB Garamond\", \"Hoefler Text\", Garamond, \"Times New Roman\", Times, serif;\n  --font-ui: \"EB Garamond\", \"Hoefler Text\", Garamond, \"Times New Roman\", Times, serif;\n  --font-mono: Consolas, Menlo, \"DejaVu Sans Mono\", monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 14px;\n  --text-large: 17px;\n  --text-display: 42px;\n  --text-h1: 30px;\n  --text-h2: 22px;\n  --text-h3: 17px;\n  --line-body: 1.4;\n  --line-heading: 1.1;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 600;\n  --weight-display: 600;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 1px;\n  --figure-shift: -0.01em;\n  --ui-transform: uppercase;\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: 3px;\n  --border-style: ridge;\n  --radius-control: 4px;\n  --radius-panel: 8px;\n  --radius-pill: 12px;\n  --radius-page: 12px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 75%, transparent), 0 6px 16px color-mix(in srgb, var(--color-shadow) 65%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), inset 0 -1px 0 color-mix(in srgb, black 25%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), inset 0 -1px 0 color-mix(in srgb, black 25%, transparent), 0 0 7px color-mix(in srgb, white 70%, transparent);\n  --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, black 45%, transparent);\n  --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 30%, transparent), 0 10px 24px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n  --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --fill-page: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--color-page), white 20%) 0, transparent 60%), repeating-linear-gradient(115deg, color-mix(in srgb, white 3%, transparent) 0, transparent 2px, transparent 9px, color-mix(in srgb, white 2%, transparent) 10px, transparent 23px), var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 30%) 0, color-mix(in srgb, var(--color-bar), white 10%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n  --fill-bar-alt: repeating-linear-gradient(90deg, color-mix(in srgb, white 4%, transparent) 0, transparent 1px, transparent 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 22%) 0, var(--color-bar-alt) 55%, color-mix(in srgb, var(--color-bar-alt), black 25%) 100%);\n  --fill-inverse: linear-gradient(135deg, color-mix(in srgb, white 9%, transparent) 0, transparent 35%, color-mix(in srgb, white 5%, transparent) 36%, transparent 70%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 10%) 0, var(--color-inverse) 100%);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, color-mix(in srgb, var(--color-accent), white 12%) 50%, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 16%) 100%);\n  --fill-panel: linear-gradient(120deg, transparent 0, transparent 30%, color-mix(in srgb, white 30%, transparent) 42%, transparent 55%), linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 55%) 0, var(--color-surface) 35%, color-mix(in srgb, var(--color-surface), black 8%) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 14%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 20%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 56%) 0, color-mix(in srgb, var(--color-button), white 26%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, color-mix(in srgb, var(--color-button), black 10%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%) 0, color-mix(in srgb, var(--color-button-secondary), white 25%) 50%, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 12%) 100%);\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 10%) 0, var(--color-input) 4px);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}