{
  "id": "v1-gf-5341",
  "long_id": "v1.game-fantasy.landing.s05.p03.t04.u01",
  "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-5341",
  "preview_url": "https://chrono.skin/s/v1-gf-5341/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 small-capital old-style serif (Alegreya SC or Cormorant SC where installed, else Hoefler Text, Baskerville, Palatino), not transformed, tracked 0.5px, for headings, navigation, buttons, labels and prices. `--font-body` is Tahoma for everything read. The references set titles in a commercial small-capitals face; these are the closest free stacks.\n- Sizes: `--text-base` 13px at `--line-body` 1.55; `--text-small` 11px for meta, badges and the strip; `--text-ui` 15px; `--text-large` 18px for navigation, the banner lead and large buttons; `--text-h3` 16px, `--text-h2` 22px, `--text-h1` 30px; `--text-display` 44px with 1.5px tracking for the banner title only.\n- Palette: black iron page and sheet, three grey-black surfaces, a warm iron bar with pale ember lettering (`--color-bar`), charred brown for the strip, the key art and the footer (`--color-bar-alt`), ash-grey text under bone-white headings, ember orange for second headings, links and the primary button, and a spark yellow (`--color-accent-alt`) for frame brackets and glows. The inverse block is ash.\n- Surface: 2px iron frames with a dark inner line (`--shadow-panel`), corners of 2px to 4px and 8px badges, a chequer-plate page with a faint ember glow at its foot (`--fill-page`), brushed bars, buttons lit from above, and a hover that glows in the spark colour (`--shadow-control-hover`). Hover eases over 0.15s.\n- The era's rule for text on fills is kept: on `--color-canvas` and the three surfaces (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`. No text is written on `--color-page`.\n- `--color-fill-1` to `--color-fill-4`, the three status colours and `--color-accent-alt` are inks and lights: item names by rarity (`.ds-item`), class crests, status badges on a 16% tint of themselves, grid cells as the surface tinted 24% by their fill, bars of a progress track. They are never a fill under text.\n- `--color-border-strong` is the iron of every frame and of the sheet's edges; `--color-border` the ordinary rule; `--color-border-muted` the rule between rows. `--fill-accent` marks the current navigation item, tab and page number, the ribbon and the default badge.\n- The key art (`.ds-scene`) is filled with `--fill-bar-alt` and written in `--color-bar-alt-text`. Its ground and silhouettes are `--color-bar-alt` mixed toward `--color-shadow`; the light behind the gate is `--color-accent-alt` inside `--color-accent`; the far glow is `--color-fill-3`; the other two skies use `--color-fill-1` (a moon) and `--color-fill-2` (a rift). So every palette repaints the picture.\n- One-off values built in `components.css` from tokens: the mixes named above, percentages inside `clip-path` polygons and gradients of the scene, `50%` radius for lamps and the play plate, `aspect-ratio` for pictures, a 45 degree turn for the crest and for diamonds. The month on a date plate is always uppercase.\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 <= 44px`: the banner title is the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `font-families <= 3`: a small-capital serif, Tahoma and a monospace.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `letter-spacing <= 1.5px`: headings are tracked half a pixel, the banner title 1.5px.\n- `uppercase-text <= 5%`: capitals come from the small-capital face, not from a transform.\n- `border-radius <= 3px`: frames and plates are cut square; only lamps and the play plate are round.\n- `border-width <= 2px`: the frame metal is 2px, every rule 1px.\n- `box-shadow-blur <= 20px`: shadows are lips and short glows, not soft floating cards.\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.p03.t04.u01\",\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-5341\",\n  \"short\": \"v1-gf-5341\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #070e18;\n  --color-canvas: #cdd5dc;\n  --color-surface: #e1e7ec;\n  --color-surface-alt: #d3dbe2;\n  --color-surface-strong: #b9c5d0;\n  --color-bar: #1c456e;\n  --color-bar-text: #eaf4fd;\n  --color-bar-alt: #26313d;\n  --color-bar-alt-text: #c3d2e0;\n  --color-inverse: #0d1a28;\n  --color-inverse-text: #cfe6f8;\n  --color-text: #232b33;\n  --color-text-muted: #5b6875;\n  --color-heading: #12324f;\n  --color-heading-alt: #2d4a66;\n  --color-link: #175a94;\n  --color-link-quiet: #44566a;\n  --color-link-visited: #54507c;\n  --color-link-hover: #0a78b8;\n  --color-link-active: #0b2238;\n  --color-border: #a3b0bc;\n  --color-border-strong: #8494a3;\n  --color-border-muted: #c3ccd5;\n  --color-accent: #0c7fbc;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #8f6a12;\n  --color-fill-1: #1558b0;\n  --color-fill-2: #7334a8;\n  --color-fill-3: #b3570c;\n  --color-fill-4: #0f7a80;\n  --color-button: #1c5d8f;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #e3f4ff;\n  --color-button-secondary: #c4ced8;\n  --color-button-secondary-text: #1f2c3a;\n  --color-input: #f3f6f9;\n  --color-input-text: #1b242d;\n  --color-input-border: #8d9cab;\n  --color-disabled: #c7cfd6;\n  --color-disabled-text: #8a96a2;\n  --color-danger: #a82424;\n  --color-danger-surface: #edd3d3;\n  --color-success: #23753a;\n  --color-warning: #9a6500;\n  --color-notice: #d3e6f3;\n  --color-notice-text: #173a56;\n  --color-focus: #0c8fd0;\n  --color-shadow: #02060c;\n  --color-overlay: rgba(4, 10, 18, 0.65);\n}\n\n/* @part type */\n:root {\n  --font-body: Tahoma, \"Segoe UI\", \"DejaVu Sans\", Geneva, sans-serif;\n  --font-heading: \"Alegreya SC\", \"Cormorant SC\", \"Hoefler Text\", \"Baskerville Old Face\", Baskerville, \"Palatino Linotype\", Georgia, serif;\n  --font-ui: \"Alegreya SC\", \"Cormorant SC\", \"Hoefler Text\", \"Baskerville Old Face\", Baskerville, \"Palatino Linotype\", Georgia, serif;\n  --font-mono: Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 15px;\n  --text-large: 18px;\n  --text-display: 44px;\n  --text-h1: 30px;\n  --text-h2: 22px;\n  --text-h3: 16px;\n  --line-body: 1.55;\n  --line-heading: 1.2;\n  --line-display: 1.08;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 500;\n  --weight-display: 500;\n  --weight-ui: 500;\n  --heading-transform: none;\n  --heading-tracking: 0.5px;\n  --display-tracking: 1.5px;\n  --figure-shift: -0.01em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 3px;\n  --radius-panel: 2px;\n  --radius-pill: 2px;\n  --radius-page: 0;\n  --shadow-panel: inset 0 0 0 1px color-mix(in srgb, black 80%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--color-border-strong) 55%, transparent), inset 0 0 14px color-mix(in srgb, black 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-shadow) 90%, transparent), 0 3px 10px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 38%, transparent), inset 0 -2px 0 color-mix(in srgb, black 38%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), inset 0 -2px 0 color-mix(in srgb, black 38%, transparent), 0 0 8px color-mix(in srgb, var(--color-focus) 85%, transparent);\n  --shadow-control-pressed: inset 0 2px 4px color-mix(in srgb, black 65%, transparent);\n  --shadow-dialog: inset 0 0 0 1px color-mix(in srgb, black 80%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--color-border-strong) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-shadow) 90%, transparent), 0 0 18px color-mix(in srgb, var(--color-focus) 50%, transparent), 0 8px 20px color-mix(in srgb, var(--color-shadow) 85%, transparent);\n  --shadow-text: 1px 1px 1px color-mix(in srgb, var(--color-shadow) 90%, transparent);\n  --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72'%3E%3Cpath d='M0 20l18-6 22 8 20-10 36 8M18 14l-6 30 22 12 14-10 -8-24M48 46l24 6 24-14M34 56l-6 16M72 52l8 20M60 12l12-12M12 44l-12 8' fill='none' stroke='white' stroke-opacity='.045'/%3E%3Cpath d='M0 21l18-6 22 8 20-10 36 8M18 15l-6 30 22 12 14-10 -8-24M48 47l24 6 24-14M34 57l-6 16M72 53l8 20' fill='none' stroke='black' stroke-opacity='.6'/%3E%3C/svg%3E\"), radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--color-page), white 9%) 0, var(--color-page) 70%), var(--color-page);\n  --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, black 10%, transparent) 0, color-mix(in srgb, black 10%, transparent) 1px, transparent 1px, transparent 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 45%, color-mix(in srgb, var(--color-bar), black 45%) 100%);\n  --fill-bar-alt: repeating-linear-gradient(135deg, color-mix(in srgb, white 3%, transparent) 0, color-mix(in srgb, white 3%, transparent) 2px, transparent 2px, transparent 6px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 10%) 0, var(--color-bar-alt) 40%, color-mix(in srgb, var(--color-bar-alt), black 45%) 100%);\n  --fill-inverse: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, white 22%, transparent) 0, transparent 55%), radial-gradient(ellipse at 80% 90%, color-mix(in srgb, black 22%, transparent) 0, transparent 60%), var(--color-inverse);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 32%) 0, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 30%) 100%);\n  --fill-panel: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1h1v1H1zM5 3h1v1H5zM3 6h1v1H3zM7 7h1v1H7z' fill='black' fill-opacity='.28'/%3E%3Cpath d='M4 0h1v1H4zM0 4h1v1H0zM6 5h1v1H6z' fill='white' fill-opacity='.035'/%3E%3C/svg%3E\"), linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 5%) 0, var(--color-surface) 30%, color-mix(in srgb, var(--color-surface), black 22%) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%) 0, var(--color-button) 48%, color-mix(in srgb, var(--color-button), black 22%) 52%, color-mix(in srgb, var(--color-button), black 45%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 14%) 48%, var(--color-button) 52%, color-mix(in srgb, var(--color-button), black 30%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 22%) 0, var(--color-button-secondary) 48%, color-mix(in srgb, var(--color-button-secondary), black 20%) 52%, color-mix(in srgb, var(--color-button-secondary), black 42%) 100%);\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 45%) 0, var(--color-input) 5px);\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}