{
  "id": "v1-gf-7174",
  "long_id": "v1.game-fantasy.landing.s07.p01.t07.u04",
  "name": "Game fantasy sky isles (porcelain, pale sky, thin gold)",
  "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 site of an anime-styled fantasy role-playing game as such sites have looked since about 2020: a clear top bar on a full-bleed daylight sky with floating islands, the version's title set low and centred above a sea of clouds, and one rounded sheet rising out of the clouds that holds numbered chapters. It is the light, airy end of the era: white and pale sky grounds, thin gold lines and rings, a high-contrast serif for titles over a soft sans, pill buttons and one rose accent, with heroes shown as backlit figures under arches. The page is responsive and every picture is drawn in CSS from the palette.",
  "url": "https://chrono.skin/s/v1-gf-7174",
  "preview_url": "https://chrono.skin/s/v1-gf-7174/specimen.html",
  "files": {
    "STYLE.md": "# Game fantasy sky isles (porcelain, pale sky, thin gold)\n\n## Summary\n\nThe site of an anime-styled fantasy role-playing game as such sites have looked since about 2020: a clear top bar on a full-bleed daylight sky with floating islands, the version's title set low and centred above a sea of clouds, and one rounded sheet rising out of the clouds that holds numbered chapters. It is the light, airy end of the era: white and pale sky grounds, thin gold lines and rings, a high-contrast serif for titles over a soft sans, pill buttons and one rose accent, with heroes shown as backlit figures under arches. The page is responsive and every picture is drawn in CSS from the palette.\n\n## Layout\n\n- Full-bleed pictures, one centred sheet. The hero and the mastheads run from edge to edge; their content sits in `.ds-wrap` (at most `--size-page`, 1160px, with `--space-6` gutters). Below them `.ds-sheet` is one column of the same width in `--color-canvas` with `--radius-page` corners and the panel shadow, pulled up by `--space-7` so that it overlaps the clouds; the page ground (`--fill-page`) shows at both sides of it and under it. The sheet is cut into `.ds-chapter` bands, alternately plain and `--alt`, with a small diamond on each dividing rule. Designed at 1440px; under 1380px the rail is hidden, under 1100px two-column blocks become one column, grids two across and the roster three across; under 700px grids become one column. Nothing scrolls sideways at 390px; tables scroll inside themselves.\n- Order of the home page: the top bar (`--size-nav`, 72px) lying on the hero; the hero (`--size-hero`, 800px) with a kicker, the title, a lead, the large button beside the round trailer button and a line of platform badges, all centred and set low; then the sheet: chapter 01 the banner carousel beside the news list with its category tabs, chapter 02 the featured hero (figure under an arch, name, traits, the cast of crests), chapter 03 the four regions, chapter 04 figures and two panels, and the closing band. The footer is a centred strip of sky. `.ds-rail`, a pill of diamond dots fixed at the right edge, repeats the navigation.\n- Inner pages keep the top bar, the rail and the footer; the hero is left out. Each starts with `.ds-masthead`, a low sky (`--size-masthead`, 300px) that carries the breadcrumb and the `.ds-page-header`, then the sheet with one or two chapters. Working parts sit in `.ds-columns` (a flexible column beside `--size-aside`, 340px) or a `.ds-split` (`--wide` is 3 to 2); `.ds-tabs` go at the top of a chapter.\n- Views: `home`; `news` (the version notes, more news, topics, links); `heroes` (tabs by element, the roster of arches, pagination, then one hero: skill crests with their windows, the skill table, traits and badges); `world` (the accordion of regions, the empty fifth region, travel notes); `redeem` (notices, the gift code form with switches and buttons, the dialog that unlinks a device, codes already used).\n- Spacing scale: `--space-1` 4px (label to bar, rings), `--space-2` 8px (small gaps), `--space-3` 12px (between buttons, tight stacks), `--space-4` 16px (between tiles, inside small boxes), `--space-5` 24px (between blocks, panel padding), `--space-6` 40px (chapter sides, gutters, columns), `--space-7` 64px (chapter top and bottom, the sheet's overlap), `--space-8` 96px (room for the clouds under the hero copy).\n- Control heights: `--size-control-small` 32px, `--size-control` 44px, `--size-control-large` 58px. `--size-figure` 400px is the widest arch, `--size-banner` 360px the carousel slide, `--size-vista` 150px a region picture, `--size-ring` 46px a chapter numeral.\n- On a phone (1000px and below) `.ds-nav__links` is not shown and `.ds-nav__more`, a `.ds-menu` placed first in the bar, opens a full-width list of every view as centred `.ds-menu__item` rows, the open view marked by an accent bar at its left; its summary is a round button. At 700px and below `.ds-nav__action` is hidden and is reached from the menu, where its row carries `.ds-menu__item--elsewhere` so that it is never marked as the open view. 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- Three families. `--font-heading` is a high-contrast serif (Playfair Display where installed, else Didot, Bodoni), in mixed case at regular weight, for titles, names and figures. `--font-body` and `--font-ui` are a soft humanist sans (Nunito Sans, Noto Sans, Avenir); labels, navigation, buttons, tabs and badges are small capitals of it, tracked by 1px to 3px. `--font-mono` only appears in inline code.\n- Sizes: `--text-base` 16px at `--line-body` 1.7; `--text-small` 13px; `--text-ui` 13px; `--text-large` 19px; `--text-h3` 21px, `--text-h2` 30px, `--text-h1` 44px for chapter titles; `--text-display` 64px for mastheads, hero names, figures and the band. The hero title is 1.3 times the display size, capped by the window width.\n- Palette: a pale sky page, a white sheet, three near-white surfaces, pale sky bars with deep blue lettering (`--color-bar`, `--color-bar-alt`), slate text under navy headings, gold for rules, rings and second headings (`--color-border-strong`, `--color-heading-alt`, `--color-accent-alt`), one rose accent, a warm gold primary button with dark lettering, and a twilight blue inverse block. `--color-shadow` is a soft blue, so shadows and distant shapes stay airy.\n- Surface: hairline borders, pill buttons and badges, 16px panels and a 28px sheet, a white gap and a gold hairline around every panel (`--shadow-panel`), soft blue drop shadows, a rose ring on hover, a page dotted with white (`--fill-page`), slow 0.25s easing. No glass: `--backdrop-blur` is 0.\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` (table heads, the dialog title); on `--fill-bar-alt` only `--color-bar-alt-text` (every `.ds-scene` and what lies on it: the top bar, hero copy, mastheads, the carousel title; and the footer); 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 status colours and `--color-accent-alt` are inks and lights: a hero's colour (the sky in the arch and the crest), region cells as the surface tinted 24% by their fill, status badges on a 16% tint of themselves, progress bars. Never a fill under text.\n- The pictures. `.ds-scene`: the sky is `--fill-bar-alt`; the sun, its rings and the falling water are `--color-accent-alt`; a low glow is `--color-accent`; islands, mountains and the traveller are `--color-bar-alt` mixed toward `--color-shadow`, less for what is further away; the clouds are `--color-canvas`, so the sheet seems to rise out of them. `.ds-scene--2` to `--5` wash the sky with `--color-fill-1`, `--color-fill-3`, `--color-fill-4` and `--color-fill-2`. `.ds-figure`: the arch is a fill colour over `--color-surface`, the figure that colour mixed far toward `--color-shadow` and lit at one edge by `--color-accent-alt`. Every palette repaints them.\n- One-off values built in `components.css` from tokens: the mixes named above, percentages in `clip-path` polygons, gradients and the arch radius, `50%` radius for avatars, rings and the play disc, 45 degree turns for diamonds, tracking of 1px to 3px built from `--size-hair` and `--space-1`, `min()` of a size token and a share of the window width for the largest titles.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints the page ground. `.ds-wrap` is the content column of the hero, mastheads and footer.\n- `.ds-nav`: the clear top bar in three parts: the brand, `.ds-nav__links` of `.ds-nav__link` in the middle with a small diamond between them (the current one underlined in `--color-accent-alt`; `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-rail`: the pill of diamond dots fixed at the right edge: `.ds-rail__item` holds a `.ds-rail__dot` link and a `.ds-rail__label` shown on hover; the current dot is filled.\n- `.ds-brand`: `.ds-brand__mark`, a 40px round 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 version's picture, a `.ds-scene` whose `.ds-hero__copy` holds a `.ds-kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (the large button and a `.ds-play`) and `.ds-hero__note`.\n- `.ds-scene`: the drawn sky, used for the hero, mastheads, the carousel slide and region pictures. Six empty spans in this order: `.ds-scene__sky`, `.ds-scene__sun`, `.ds-scene__far` (mountains), `.ds-scene__isle` (the great island, a small one, falling water), `.ds-scene__near` (a cliff and a traveller), `.ds-scene__cloud`. Variants `.ds-scene--2` to `--5`.\n- `.ds-kicker`: a small tracked line between two fading gold rules. `.ds-star`: a four-pointed gold star, used beside kickers and side box titles.\n- `.ds-play`: a round disc with a label, for the trailer; `.ds-play__disc`.\n- `.ds-masthead`: the low sky that starts an inner page; holds 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-sheet`: the column that holds the chapters. `.ds-chapter` one band (`--alt` in `--color-surface-alt` with a faint gold light) with a `.ds-chapter__head`: `.ds-chapter__index` (a numeral in a double ring), `.ds-chapter__title`, `.ds-chapter__line` and `.ds-chapter__more`.\n- `.ds-newsroom`: the carousel beside the news column. `.ds-carousel`: one slide showing: `.ds-carousel__stage` holds a `.ds-carousel__slide` (a scene with a badge, `.ds-carousel__title` and `.ds-carousel__meta`) and two round `.ds-carousel__arrow`s (`--next`); `.ds-carousel__foot` a caption and `.ds-carousel__dots` of `.ds-carousel__dot`.\n- `.ds-figure`: a hero as a backlit figure under an arch, three empty spans: `.ds-figure__arch`, `.ds-figure__body`, `.ds-figure__prop`. Plain is a mage with a great hat and a staff in `--color-fill-1`; `.ds-figure--2` an archer in `--color-fill-4`, `--3` a knight with a lit sword in `--color-fill-3`, `--4` a winged herald in `--color-fill-2`. It scales with its column.\n- `.ds-banner`: the featured hero: a figure beside `.ds-banner__copy` with `.ds-banner__role`, `.ds-banner__name`, `.ds-banner__epithet`, `.ds-banner__text`, `.ds-banner__traits` (two progress bars) and a button. `.ds-cast`: the row of crests under it, `.ds-cast__item`, the current one ringed.\n- `.ds-roster`: six arches across, each a `.ds-roster__item` link with a figure, `.ds-roster__name` and `.ds-roster__role`; `is-current` rings the arch.\n- `.ds-skills`: a row of round skill crests, each a `.ds-tooltip` trigger.\n- `.ds-who`: an avatar beside `.ds-who__name` and `.ds-who__meta`.\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 pill, 44px high, with a thin line inside its edge. `.ds-button--secondary` (white with a gold edge); `.ds-button--danger` (secondary pill, danger ink and edge); `.ds-button--large` (58px); `.ds-button--small` (32px). States `is-hover` (ring from `--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.\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`. The head row takes `--fill-bar`; `is-numeric`, `is-centre`; `.ds-table__sub` a second line; `.ds-table__who`; `is-own` marks the reader's 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 one-line form of the home page, title left and date right.\n- `.ds-panel`: a box inside the gold hairline: `.ds-panel__title` (may hold a badge at the right), `.ds-panel__body` (`--flush`), `.ds-panel__text`, `.ds-panel__foot`.\n- `.ds-stat`: one figure, `.ds-stat__value` in the serif at display size over a tracked `.ds-stat__label`, centred, with a gold rule at its left; four sit in a `.ds-stats` row.\n- `.ds-grid`: four `.ds-grid__cell` across (`--two`, `--three`), tinted and edged by `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4`. A region cell starts with a small `.ds-scene`, then a badge, `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__more`; `.ds-grid__icon` is available.\n- `.ds-tabs`: a row of pills; `.ds-tabs__tab`, `is-current` in `--fill-accent`; `.ds-tabs__count` a number.\n- `.ds-badge`: a pill 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 skill 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, as the selected skill's description.\n- `.ds-progress`: a thin track with a `.ds-progress__bar`; width by `--10` to `--100`, colour by `--health`, `--xp`, `--rep`, `--danger`; `.ds-progress__label` above. Used for a hero's traits, the festival and exploration.\n- `.ds-avatar`: a round crest (inline SVG) on a `--color-surface-strong` disc; `.ds-avatar--small`, `.ds-avatar--large`; `--1` to `--4` colour it.\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`: round `.ds-pagination__link`s; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: a small tracked trail: `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (a slash), `.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 closing call in `--fill-inverse`, centred, with two faint rings behind it: `.ds-band__title`, `.ds-band__text` and one large button. At most one per page.\n- `.ds-footer`: the closing strip in `--fill-bar-alt`, centred: the brand, `.ds-footer__links` of `.ds-footer__link` and a `.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`: helpers.\n\n## Never\n\n- `font-size >= 13px`: labels and meta text are the smallest text.\n- `font-size <= 84px`: the hero title is the largest text.\n- `font-weight <= 700`: titles are regular weight; bold belongs to labels and names in running text.\n- `font-families <= 3`: a high-contrast serif, a soft sans and a monospace for code.\n- `line-height >= 1.6`: body text is set open.\n- `letter-spacing <= 3px`: small capitals are tracked 1px to 3px, titles hardly at all.\n- `underlined-links <= 5%`: links are told apart by colour; only a hovered link is underlined.\n- `border-radius <= 8px`: plates and frames are nearly square; only badges reach 8px, and lamps and the play plate are round.\n- `border-width <= 2px`: frames are 2px iron, every rule 1px.\n- `box-shadow-blur <= 28px`: shadows are lips and short glows.\n- `animation = none`: nothing on the site moves by itself.\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-chapter` of the sheet with a numbered head; nothing floats on the page ground and no text is written on it. A box inside a chapter is a `.ds-panel` or a `.ds-sidebar`; a picture is a `.ds-scene` with its six spans and, for another light, a variant built from one fill colour; a new hero is a `.ds-figure` variant: one fill colour, one `clip-path` silhouette and one telling prop, never a face. Set titles in the serif at regular weight and everything small in tracked capitals of the sans. Keep the rule for text on fills and keep the fill and status colours as ink. Do not add images, heavy borders, dark slabs, a second accent or movement.\n",
    "components.css": "/* Layout tokens (structure part). The site of an anime-styled fantasy\n   role-playing game, 2020 to today: a clear top bar over a full-bleed sky\n   with floating islands, the title set low above a sea of clouds, then one\n   sheet rising out of the clouds that holds numbered chapters (news beside a\n   banner carousel, a character under an arch, regions, figures), with the\n   page ground at its sides and a rail of diamond dots at the right edge. */\n:root {\n  --size-page: 1160px;\n  --size-nav: 72px;\n  --size-hero: 800px;\n  --size-masthead: 300px;\n  --size-brand: 40px;\n  --size-hair: 1px;\n  --size-control: 44px;\n  --size-control-small: 32px;\n  --size-control-large: 58px;\n  --size-icon: 18px;\n  --size-dot: 8px;\n  --size-crest: 52px;\n  --size-crest-large: 104px;\n  --size-bar: 8px;\n  --size-label: 170px;\n  --size-field-short: 240px;\n  --size-textarea: 120px;\n  --size-dialog: 480px;\n  --size-tip: 300px;\n  --size-menu: 220px;\n  --size-switch: 46px;\n  --size-stat: 170px;\n  --size-aside: 340px;\n  --size-ring: 46px;\n  --size-figure: 400px;\n  --size-portrait: 150px;\n  --size-banner: 360px;\n  --size-vista: 150px;\n  --size-play: 58px;\n  --size-date: 92px;\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: 96px;\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-dot--danger { background: var(--color-danger); }\n.ds-item {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\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--10 .ds-progress__bar { width: 10%; }\n.ds-progress--25 .ds-progress__bar { width: 25%; }\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-6) * 2);\n  margin: 0 auto;\n  padding: 0 var(--space-6);\n}\n\n/* ---------- nav: a clear bar on the sky, links in the middle ---------- */\n.ds-nav {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 50;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\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) 72%, transparent), 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) 14%, transparent);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__links > li + li::before {\n  content: \"\";\n  display: inline-block;\n  width: var(--space-1);\n  height: var(--space-1);\n  margin-right: var(--space-4);\n  background: var(--color-accent-alt);\n  vertical-align: middle;\n  transform: rotate(45deg);\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-1);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--space-1) / 2);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  opacity: 0.78;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:has(#heroes:target) .ds-nav__link[href=\"#heroes\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#world:target) .ds-nav__link[href=\"#world\"],\n.ds-page:has(#redeem:target) .ds-nav__link[href=\"#redeem\"],\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  border-bottom-color: var(--color-accent-alt);\n  opacity: 1;\n}\n.ds-nav__end {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\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  letter-spacing: calc(var(--space-1) / 2);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.78;\n}\n.ds-nav__action:hover {\n  opacity: 1;\n}\n\n/* ---------- brand ---------- */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  justify-self: start;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\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) 40%);\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-transform: var(--heading-transform);\n}\n\n/* ---------- rail: diamond dots at the right edge, one per view ---------- */\n.ds-rail {\n  position: fixed;\n  top: 50vh;\n  right: var(--space-5);\n  z-index: 60;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n  padding: var(--space-4) var(--space-3);\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-pill);\n  box-shadow: var(--shadow-control);\n  transform: translateY(-50%);\n}\n.ds-rail__item {\n  position: relative;\n  display: flex;\n}\n.ds-rail__dot {\n  display: block;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-surface-strong);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  transform: rotate(45deg);\n  transition: var(--transition);\n}\n.ds-rail__label {\n  position: absolute;\n  top: 50%;\n  right: calc(100% + var(--space-4));\n  display: none;\n  padding: var(--space-1) var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\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  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transform: translateY(-50%);\n}\n.ds-rail__item:hover .ds-rail__label,\n.ds-rail__item:focus-within .ds-rail__label {\n  display: block;\n}\n.ds-rail__dot.is-current,\n.ds-page:has(#heroes:target) .ds-rail__dot[href=\"#heroes\"],\n.ds-page:has(#news:target) .ds-rail__dot[href=\"#news\"],\n.ds-page:has(#world:target) .ds-rail__dot[href=\"#world\"],\n.ds-page:has(#redeem:target) .ds-rail__dot[href=\"#redeem\"],\n.ds-page:not(:has(.ds-view:target)) .ds-rail__dot[href=\"#home\"],\n.ds-page:has(#home:target) .ds-rail__dot[href=\"#home\"] {\n  background: var(--color-accent-alt);\n  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent-alt) 28%, transparent);\n}\n\n/* ---------- buttons of this pack: a thin line inside the edge ---------- */\n.ds-button {\n  position: relative;\n  letter-spacing: var(--size-hair);\n  border-color: color-mix(in srgb, var(--color-button), var(--color-shadow) 40%);\n}\n.ds-button::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(var(--space-1) - var(--border-width));\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: inherit;\n  opacity: 0.3;\n  pointer-events: none;\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-border-strong);\n}\n.ds-button--large {\n  font-family: var(--font-ui);\n  font-size: var(--text-base);\n  letter-spacing: calc(var(--space-1) / 2);\n}\n.ds-button.is-disabled::before,\n.ds-button:disabled::before {\n  display: none;\n}\n\n/* ---------- scene: islands in the sky above a sea of clouds ----------\n   The sky is the alternate bar fill. The sun, its rings and the falling\n   water are the second accent, a low warm glow is the accent, islands and\n   mountains are the alternate bar colour mixed toward the shadow colour\n   (further is paler), and the clouds are the sheet colour, so the sheet\n   below seems to rise out of them. */\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__sun,\n.ds-scene__far,\n.ds-scene__isle,\n.ds-scene__near,\n.ds-scene__cloud {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.ds-scene__sky {\n  background:\n    radial-gradient(ellipse 44% 62% at 76% 24%, color-mix(in srgb, var(--color-accent-alt) 46%, transparent), transparent 70%),\n    radial-gradient(ellipse 52% 40% at 10% 74%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 34%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 34%, transparent) 1%, transparent 2%) 0 0 / calc(var(--space-7) * 2.1) calc(var(--space-7) * 1.3),\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) 0.8%, transparent 1.6%) var(--space-6) var(--space-5) / calc(var(--space-7) * 3.3) calc(var(--space-7) * 2.3),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 34%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 10%) 30%, transparent 62%);\n}\n/* the sun: a disc inside two thin rings */\n.ds-scene__sun {\n  background: radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--color-accent-alt), var(--color-bar-alt) 20%) 0, color-mix(in srgb, var(--color-accent-alt), var(--color-bar-alt) 36%) 4.4%, color-mix(in srgb, var(--color-accent-alt) 40%, transparent) 4.8%, color-mix(in srgb, var(--color-accent-alt) 12%, transparent) 9%, transparent 22%);\n}\n.ds-scene__sun::before,\n.ds-scene__sun::after {\n  content: \"\";\n  position: absolute;\n  top: 24%;\n  left: 76%;\n  width: 22%;\n  aspect-ratio: 1;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent-alt) 75%, transparent);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n.ds-scene__sun::after {\n  width: 31%;\n  border-color: color-mix(in srgb, var(--color-accent-alt) 34%, transparent);\n  border-left-color: transparent;\n  border-right-color: transparent;\n}\n.ds-scene__far {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 26%) 46%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 8%) 78%);\n  clip-path: polygon(0 100%, 0 60%, 5% 54%, 9% 58%, 15% 47%, 19% 53%, 23% 50%, 30% 61%, 37% 56%, 44% 65%, 52% 60%, 59% 66%, 66% 62%, 73% 67%, 80% 60%, 86% 64%, 92% 55%, 96% 59%, 100% 54%, 100% 100%);\n}\n/* the great island with its towers, a small one further off, falling water */\n.ds-scene__isle {\n  background:\n    linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 46%, transparent 72%) 81.6% 0 / calc(var(--size-hair) * 2) 100% no-repeat,\n    linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--color-accent-alt) 26%, transparent) 47%, transparent 66%) 81.6% 0 / 0.9% 100% no-repeat;\n}\n.ds-scene__isle::before {\n  content: \"\";\n  position: absolute;\n  top: 7%;\n  left: 68%;\n  width: 26%;\n  height: 30%;\n  background: linear-gradient(100deg, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 58%) 48%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 74%) 62%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 50%) 100%);\n  clip-path: polygon(0 47%, 8% 43%, 14% 44%, 17.5% 31%, 20% 31%, 21% 22%, 22% 31%, 24.5% 31%, 27% 41%, 36% 39%, 39.5% 21%, 42% 21%, 43% 7%, 44% 0, 45% 7%, 46% 21%, 48.5% 21%, 51% 37%, 58% 37%, 60% 27%, 62% 23%, 64% 27%, 66% 37%, 76% 41%, 84% 39%, 92% 43%, 100% 47%, 91% 54%, 83% 58%, 77% 70%, 69% 74%, 63% 88%, 55% 92%, 50% 100%, 45% 88%, 37% 84%, 31% 70%, 21% 66%, 12% 56%);\n}\n.ds-scene__isle::after {\n  content: \"\";\n  position: absolute;\n  top: 27%;\n  left: 15%;\n  width: 11%;\n  height: 15%;\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 40%);\n  clip-path: polygon(0 40%, 20% 34%, 27% 12%, 30% 0, 33% 12%, 38% 34%, 60% 30%, 72% 36%, 100% 42%, 84% 56%, 70% 60%, 60% 84%, 50% 100%, 40% 78%, 26% 64%, 10% 54%);\n}\n/* a cliff at the left with a traveller on it */\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) 72%) 50%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 46%) 100%);\n  clip-path: polygon(0 100%, 0 59%, 3% 56%, 6% 57.5%, 9% 55%, 12.5% 56%, 15% 60%, 17% 68%, 16% 78%, 19% 90%, 18% 100%);\n}\n.ds-scene__near::after {\n  content: \"\";\n  position: absolute;\n  bottom: 44.2%;\n  left: 8.4%;\n  width: 3.1%;\n  height: 13%;\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 86%);\n  clip-path: polygon(40% 0, 58% 0, 62% 9%, 58% 15%, 72% 19%, 78% 34%, 92% 30%, 92% 4%, 97% 4%, 97% 100%, 92% 100%, 92% 42%, 76% 48%, 74% 60%, 82% 100%, 62% 100%, 54% 68%, 46% 68%, 40% 100%, 6% 100%, 0 80%, 16% 40%, 26% 19%, 42% 15%, 38% 9%);\n}\n/* the sea of clouds: a pale far bank and a near one in the sheet colour */\n.ds-scene__cloud {\n  background:\n    radial-gradient(ellipse 13% 9% at 6% 100%, var(--color-canvas) 0, var(--color-canvas) 96%, transparent 100%),\n    radial-gradient(ellipse 15% 12% at 24% 102%, var(--color-canvas) 0, var(--color-canvas) 96%, transparent 100%),\n    radial-gradient(ellipse 12% 8% at 41% 101%, var(--color-canvas) 0, var(--color-canvas) 96%, transparent 100%),\n    radial-gradient(ellipse 16% 11% at 58% 103%, var(--color-canvas) 0, var(--color-canvas) 96%, transparent 100%),\n    radial-gradient(ellipse 12% 9% at 76% 101%, var(--color-canvas) 0, var(--color-canvas) 96%, transparent 100%),\n    radial-gradient(ellipse 14% 12% at 94% 102%, var(--color-canvas) 0, var(--color-canvas) 96%, transparent 100%),\n    radial-gradient(ellipse 18% 9% at 14% 96%, color-mix(in srgb, var(--color-canvas) 55%, transparent) 0, color-mix(in srgb, var(--color-canvas) 55%, transparent) 96%, transparent 100%),\n    radial-gradient(ellipse 20% 11% at 48% 97%, color-mix(in srgb, var(--color-canvas) 55%, transparent) 0, color-mix(in srgb, var(--color-canvas) 55%, transparent) 96%, transparent 100%),\n    radial-gradient(ellipse 18% 10% at 84% 96%, color-mix(in srgb, var(--color-canvas) 55%, transparent) 0, color-mix(in srgb, var(--color-canvas) 55%, transparent) 96%, transparent 100%),\n    radial-gradient(ellipse 22% 7% at 30% 91%, color-mix(in srgb, var(--color-canvas) 28%, transparent) 0, color-mix(in srgb, var(--color-canvas) 28%, transparent) 96%, transparent 100%),\n    radial-gradient(ellipse 24% 8% at 68% 90%, color-mix(in srgb, var(--color-canvas) 28%, transparent) 0, color-mix(in srgb, var(--color-canvas) 28%, transparent) 96%, transparent 100%);\n}\n/* other lights: each takes one of the fill colours */\n.ds-scene--2 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 44% 62% at 76% 24%, color-mix(in srgb, var(--color-accent-alt) 40%, transparent), transparent 70%),\n    radial-gradient(ellipse 70% 60% at 20% 60%, color-mix(in srgb, var(--color-fill-1) 38%, transparent), transparent 70%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-1) 30%) 0, transparent 70%);\n}\n.ds-scene--3 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 44% 62% at 76% 24%, color-mix(in srgb, var(--color-fill-3) 50%, transparent), transparent 70%),\n    radial-gradient(ellipse 70% 60% at 20% 70%, color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 70%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 26%) 0, transparent 70%);\n}\n.ds-scene--4 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 44% 62% at 76% 24%, color-mix(in srgb, var(--color-accent-alt) 40%, transparent), transparent 70%),\n    radial-gradient(ellipse 70% 60% at 20% 60%, color-mix(in srgb, var(--color-fill-4) 40%, transparent), transparent 70%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-4) 30%) 0, transparent 70%);\n}\n.ds-scene--5 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 44% 62% at 76% 24%, color-mix(in srgb, var(--color-accent-alt) 40%, transparent), transparent 70%),\n    radial-gradient(ellipse 70% 60% at 20% 60%, color-mix(in srgb, var(--color-fill-2) 40%, transparent), transparent 70%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 30%) 0, transparent 70%);\n}\n\n/* ---------- hero: the title set low, above the clouds ---------- */\n.ds-hero {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--size-hero);\n  padding: calc(var(--size-nav) + var(--space-7)) 0 calc(var(--space-8) + var(--space-7));\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  text-align: center;\n}\n.ds-kicker {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--space-1) * 0.75);\n  text-transform: var(--ui-transform);\n}\n.ds-kicker::before,\n.ds-kicker::after {\n  content: \"\";\n  width: var(--space-7);\n  height: var(--size-hair);\n  background: linear-gradient(to left, var(--color-accent-alt), transparent);\n}\n.ds-kicker::after {\n  background: linear-gradient(to right, var(--color-accent-alt), transparent);\n}\n.ds-star {\n  display: inline-block;\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  background: var(--color-accent-alt);\n  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);\n}\n.ds-hero__title {\n  margin: 0;\n  max-width: 18ch;\n  font-family: var(--font-heading);\n  font-size: min(calc(var(--text-display) * 1.3), 11vw);\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}\n.ds-hero__lead {\n  margin: 0;\n  max-width: 56ch;\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-2);\n}\n.ds-play {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--space-1) / 2);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n}\n.ds-play__disc {\n  display: inline-flex;\n  flex: none;\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-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-button-secondary) 40%, transparent), var(--shadow-control);\n  font-size: var(--text-base);\n  transition: var(--transition);\n}\n.ds-play:hover .ds-play__disc,\n.ds-play.is-hover .ds-play__disc {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-hero__note {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2) var(--space-3);\n  margin: 0;\n  font-size: var(--text-small);\n}\n\n/* ---------- masthead: the low sky 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 calc(var(--space-7) + var(--space-5));\n}\n.ds-masthead > .ds-wrap {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n.ds-masthead .ds-scene__isle::before {\n  top: 8%;\n  left: 68%;\n  width: 20%;\n  height: 56%;\n}\n.ds-masthead .ds-scene__isle,\n.ds-masthead .ds-scene__near {\n  background: none;\n}\n.ds-masthead .ds-scene__near::before,\n.ds-masthead .ds-scene__near::after,\n.ds-masthead .ds-scene__isle::after {\n  display: none;\n}\n.ds-masthead .ds-scene__sun::before {\n  width: 12%;\n}\n.ds-masthead .ds-scene__sun::after {\n  width: 17%;\n}\n.ds-masthead .ds-scene__cloud {\n  top: 40%;\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), 11vw);\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}\n.ds-page-header__text {\n  margin: var(--space-2) 0 0;\n  max-width: 60ch;\n  font-size: var(--text-large);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n.ds-breadcrumb {\n  font-family: var(--font-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--size-hair);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- sheet: one column rising out of the clouds ---------- */\n.ds-sheet {\n  position: relative;\n  z-index: 3;\n  max-width: calc(var(--size-page) + var(--space-6) * 2);\n  margin: calc(var(--space-7) * -1) auto var(--space-7);\n  background: var(--color-canvas);\n  color: var(--color-text);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-chapter {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-7) var(--space-6);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-chapter:first-child {\n  border-top: 0;\n  border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-chapter:last-child {\n  border-radius: 0 0 var(--radius-page) var(--radius-page);\n}\n.ds-chapter + .ds-chapter::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: var(--space-3);\n  height: var(--space-3);\n  background: var(--color-canvas);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n.ds-chapter--alt {\n  background:\n    radial-gradient(ellipse 50% 80% at 100% 0, color-mix(in srgb, var(--color-accent-alt) 12%, transparent), transparent 70%),\n    var(--color-surface-alt);\n}\n.ds-chapter__head {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-chapter__index {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-ring);\n  height: var(--size-ring);\n  color: var(--color-heading-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 var(--space-1) transparent, inset 0 0 0 calc(var(--space-1) + var(--size-hair)) color-mix(in srgb, var(--color-border-strong) 45%, transparent);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  line-height: 1;\n}\n.ds-chapter__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-chapter__line {\n  flex: 1;\n  min-width: var(--space-5);\n  height: var(--size-hair);\n  background: linear-gradient(to right, var(--color-border-strong), transparent);\n}\n.ds-chapter__more {\n  flex: none;\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--space-1) / 2);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-chapter__more:hover {\n  color: var(--color-link-hover);\n}\n\n/* ---------- newsroom: the banner carousel beside the news list ---------- */\n.ds-newsroom {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-carousel__stage {\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-carousel__slide {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  min-height: var(--size-banner);\n  padding: var(--space-5) calc(var(--size-control) + var(--space-5)) var(--space-7);\n  text-decoration: none;\n}\n.ds-carousel__slide > .ds-badge,\n.ds-carousel__title,\n.ds-carousel__meta {\n  position: relative;\n  z-index: 2;\n}\n.ds-carousel__title {\n  margin: 0;\n  max-width: 22ch;\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-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__meta {\n  font-size: var(--text-small);\n}\n.ds-carousel__arrow {\n  border-radius: 50%;\n}\n.ds-carousel__foot {\n  padding-top: var(--space-4);\n}\n.ds-list__date {\n  flex: none;\n  width: var(--size-date);\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(--size-hair);\n  text-transform: var(--ui-transform);\n}\n.ds-list--tight .ds-list__title {\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-transform: none;\n}\n.ds-list--tight .ds-list__date {\n  order: 2;\n  width: auto;\n  padding-top: 0;\n  color: var(--color-text-muted);\n  white-space: nowrap;\n}\n\n/* ---------- figure: a backlit hero under an arch ----------\n   The arch is a window of sky in the hero's colour (a fill colour); the\n   figure is that colour mixed far toward the shadow colour, lit at one edge\n   by the second accent, and carries one telling shape: a great hat and a\n   staff, a bow, a cape and a planted sword, or wings. */\n.ds-figure {\n  position: relative;\n  isolation: isolate;\n  width: 100%;\n  max-width: var(--size-figure);\n  aspect-ratio: 4 / 5;\n  margin: 0 auto;\n}\n.ds-figure::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(var(--space-2) * -1);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 70%, transparent);\n  border-radius: 50% 50% var(--radius-panel) var(--radius-panel) / 31% 31% var(--radius-panel) var(--radius-panel);\n  pointer-events: none;\n}\n.ds-figure__arch,\n.ds-figure__body,\n.ds-figure__prop {\n  position: absolute;\n  inset: 0;\n}\n.ds-figure__arch {\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-surface)) 0, color-mix(in srgb, var(--color-accent-alt) 46%, transparent) 17%, color-mix(in srgb, var(--color-accent-alt) 18%, transparent) 18%, transparent 46%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 1.4%, transparent 2.6%) 0 0 / 31% 23%,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-1) 52%, var(--color-surface)) 0, color-mix(in srgb, var(--color-fill-1) 16%, var(--color-surface)) 100%);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50% 50% var(--radius-panel) var(--radius-panel) / 30% 30% var(--radius-panel) var(--radius-panel);\n}\n.ds-figure__arch::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-1), var(--color-shadow) 30%) 60%, color-mix(in srgb, var(--color-fill-1) 30%, var(--color-surface)) 100%);\n  clip-path: polygon(0 100%, 0 74%, 9% 68%, 16% 73%, 26% 62%, 34% 70%, 44% 66%, 56% 72%, 66% 64%, 76% 71%, 86% 63%, 93% 68%, 100% 64%, 100% 100%);\n  opacity: 0.5;\n}\n.ds-figure__arch::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(ellipse 30% 9% at 12% 101%, var(--color-surface) 0, var(--color-surface) 96%, transparent 100%),\n    radial-gradient(ellipse 34% 11% at 52% 103%, var(--color-surface) 0, var(--color-surface) 96%, transparent 100%),\n    radial-gradient(ellipse 28% 9% at 90% 101%, var(--color-surface) 0, var(--color-surface) 96%, transparent 100%),\n    radial-gradient(ellipse 40% 9% at 30% 95%, color-mix(in srgb, var(--color-surface) 50%, transparent) 0, color-mix(in srgb, var(--color-surface) 50%, transparent) 96%, transparent 100%),\n    radial-gradient(ellipse 40% 9% at 74% 94%, color-mix(in srgb, var(--color-surface) 50%, transparent) 0, color-mix(in srgb, var(--color-surface) 50%, transparent) 96%, transparent 100%);\n}\n.ds-figure__body {\n  top: 15%;\n  right: 12%;\n  bottom: 3%;\n  left: 12%;\n  background: linear-gradient(105deg, color-mix(in srgb, var(--color-fill-1), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-fill-1), var(--color-shadow) 74%) 62%, color-mix(in srgb, var(--color-accent-alt), var(--color-shadow) 50%) 100%);\n  /* a mage: a great hat and a long robe */\n  clip-path: polygon(46% 0, 51% 7%, 55% 14%, 71% 19%, 73% 22%, 57% 22%, 56% 29%, 64% 34%, 73% 46%, 76% 44%, 79% 48%, 72% 55%, 66% 50%, 70% 76%, 80% 100%, 20% 100%, 30% 76%, 34% 52%, 28% 59%, 23% 56%, 33% 38%, 42% 33%, 43% 29%, 42% 22%, 26% 22%, 28% 19%, 44% 14%);\n}\n/* the staff with its lit stone */\n.ds-figure__prop {\n  background:\n    radial-gradient(circle at 80% 24%, color-mix(in srgb, var(--color-accent-alt), var(--color-surface) 30%) 0, var(--color-accent-alt) 2.4%, color-mix(in srgb, var(--color-accent-alt) 40%, transparent) 3%, transparent 12%),\n    linear-gradient(color-mix(in srgb, var(--color-fill-1), var(--color-shadow) 84%), color-mix(in srgb, var(--color-fill-1), var(--color-shadow) 84%)) 80% 100% / 1.4% 73% no-repeat;\n}\n/* an archer: a cape on the wind and a drawn bow */\n.ds-figure--2 .ds-figure__arch {\n  background:\n    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-surface)) 0, color-mix(in srgb, var(--color-accent-alt) 46%, transparent) 17%, color-mix(in srgb, var(--color-accent-alt) 18%, transparent) 18%, transparent 46%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 1.4%, transparent 2.6%) 0 0 / 31% 23%,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4) 52%, var(--color-surface)) 0, color-mix(in srgb, var(--color-fill-4) 16%, var(--color-surface)) 100%);\n}\n.ds-figure--2 .ds-figure__arch::before {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4), var(--color-shadow) 30%) 60%, color-mix(in srgb, var(--color-fill-4) 30%, var(--color-surface)) 100%);\n}\n.ds-figure--2 .ds-figure__body {\n  background: linear-gradient(105deg, color-mix(in srgb, var(--color-fill-4), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-fill-4), var(--color-shadow) 74%) 62%, color-mix(in srgb, var(--color-accent-alt), var(--color-shadow) 50%) 100%);\n  clip-path: polygon(46% 5%, 54% 5%, 56% 11%, 54% 18%, 62% 22%, 80% 30%, 81% 35%, 64% 33%, 60% 48%, 62% 57%, 68% 100%, 58% 100%, 54% 67%, 50% 67%, 46% 100%, 36% 100%, 41% 57%, 41% 42%, 30% 58%, 18% 66%, 10% 60%, 24% 44%, 31% 30%, 38% 22%, 46% 18%, 44% 11%);\n}\n.ds-figure--2 .ds-figure__prop {\n  top: 20%;\n  right: 12%;\n  bottom: auto;\n  left: auto;\n  width: 14%;\n  height: 46%;\n  background: linear-gradient(color-mix(in srgb, var(--color-accent-alt) 70%, transparent), color-mix(in srgb, var(--color-accent-alt) 70%, transparent)) 50% 0 / var(--size-hair) 100% no-repeat;\n  border-right: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-fill-4), var(--color-shadow) 84%);\n  border-radius: 0 50% 50% 0;\n}\n/* a knight: broad shoulders, a cape and a lit sword planted in front */\n.ds-figure--3 .ds-figure__arch {\n  background:\n    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-surface)) 0, color-mix(in srgb, var(--color-accent-alt) 46%, transparent) 17%, color-mix(in srgb, var(--color-accent-alt) 18%, transparent) 18%, transparent 46%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 1.4%, transparent 2.6%) 0 0 / 31% 23%,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3) 52%, var(--color-surface)) 0, color-mix(in srgb, var(--color-fill-3) 16%, var(--color-surface)) 100%);\n}\n.ds-figure--3 .ds-figure__arch::before {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3), var(--color-shadow) 30%) 60%, color-mix(in srgb, var(--color-fill-3) 30%, var(--color-surface)) 100%);\n}\n.ds-figure--3 .ds-figure__body {\n  background: linear-gradient(105deg, color-mix(in srgb, var(--color-fill-3), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-fill-3), var(--color-shadow) 74%) 62%, color-mix(in srgb, var(--color-accent-alt), var(--color-shadow) 50%) 100%);\n  clip-path: polygon(45% 4%, 50% 1%, 55% 4%, 58% 12%, 56% 20%, 72% 22%, 78% 32%, 68% 37%, 70% 54%, 64% 57%, 66% 62%, 84% 100%, 16% 100%, 34% 62%, 36% 57%, 30% 54%, 32% 37%, 22% 32%, 28% 22%, 44% 20%, 42% 12%);\n}\n.ds-figure--3 .ds-figure__prop {\n  background:\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-surface) 40%), var(--color-accent-alt)) 50% 96% / 1.6% 46% no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) 50% 52% / 12% 1.2% no-repeat,\n    radial-gradient(ellipse 12% 30% at 50% 74%, color-mix(in srgb, var(--color-accent-alt) 30%, transparent), transparent 70%);\n}\n/* a herald: two wings spread behind a slight figure */\n.ds-figure--4 .ds-figure__arch {\n  background:\n    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-surface)) 0, color-mix(in srgb, var(--color-accent-alt) 46%, transparent) 17%, color-mix(in srgb, var(--color-accent-alt) 18%, transparent) 18%, transparent 46%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 1.4%, transparent 2.6%) 0 0 / 31% 23%,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2) 52%, var(--color-surface)) 0, color-mix(in srgb, var(--color-fill-2) 16%, var(--color-surface)) 100%);\n}\n.ds-figure--4 .ds-figure__arch::before {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2), var(--color-shadow) 30%) 60%, color-mix(in srgb, var(--color-fill-2) 30%, var(--color-surface)) 100%);\n}\n.ds-figure--4 .ds-figure__body {\n  background: linear-gradient(105deg, color-mix(in srgb, var(--color-fill-2), var(--color-shadow) 88%) 0, color-mix(in srgb, var(--color-fill-2), var(--color-shadow) 74%) 62%, color-mix(in srgb, var(--color-accent-alt), var(--color-shadow) 50%) 100%);\n  clip-path: polygon(46% 8%, 54% 8%, 56% 15%, 53% 21%, 60% 24%, 70% 17%, 88% 3%, 97% 9%, 91% 21%, 95% 26%, 87% 35%, 89% 41%, 77% 48%, 64% 45%, 60% 56%, 72% 100%, 28% 100%, 40% 56%, 36% 45%, 23% 48%, 11% 41%, 13% 35%, 5% 26%, 9% 21%, 3% 9%, 12% 3%, 30% 17%, 40% 24%, 47% 21%, 44% 15%);\n}\n.ds-figure--4 .ds-figure__prop {\n  background: radial-gradient(ellipse 14% 4% at 50% 19%, transparent 0, transparent 62%, var(--color-accent-alt) 66%, var(--color-accent-alt) 82%, transparent 88%);\n}\n\n/* ---------- banner: the featured hero, figure beside the words ---------- */\n.ds-banner {\n  display: grid;\n  grid-template-columns: minmax(0, var(--size-figure)) minmax(0, 1fr);\n  gap: var(--space-7);\n  align-items: center;\n  padding: var(--space-3) var(--space-3) 0;\n}\n.ds-banner__copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-banner__role {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--space-1) / 2);\n  text-transform: var(--ui-transform);\n}\n.ds-banner__name {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: min(var(--text-display), 11vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-banner__epithet {\n  margin: 0;\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-style: italic;\n  line-height: var(--line-heading);\n}\n.ds-banner__text {\n  margin: 0;\n  max-width: 54ch;\n}\n.ds-banner__traits {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-3) var(--space-5);\n  width: 100%;\n  max-width: 54ch;\n}\n/* the cast: crests to pick a hero by, the current one ringed */\n.ds-cast {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-4) var(--space-5);\n  margin: 0;\n  padding: var(--space-5) 0 0;\n  list-style: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-cast__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--size-hair);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n}\n.ds-cast__item.is-current {\n  color: var(--color-heading);\n}\n.ds-cast__item.is-current .ds-avatar {\n  border-color: var(--color-accent-alt);\n  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent-alt) 30%, transparent), var(--shadow-control);\n}\n\n/* ---------- roster: every hero as a small arch ---------- */\n.ds-roster {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: var(--space-6) var(--space-5);\n  margin: 0;\n  padding: var(--space-3) var(--space-3) 0;\n  list-style: none;\n}\n.ds-roster__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  color: var(--color-heading);\n  text-align: center;\n  text-decoration: none;\n}\n.ds-roster__name {\n  display: block;\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-roster__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-roster__item.is-current .ds-figure::before {\n  border-color: var(--color-accent-alt);\n  border-width: var(--border-width-strong);\n  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent-alt) 24%, transparent);\n}\n.ds-roster__item:hover .ds-roster__name {\n  color: var(--color-link-hover);\n}\n\n/* ---------- skills: a row of round skill crests, each with its window ---------- */\n.ds-skills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-skills .ds-avatar {\n  border-radius: 50%;\n}\n.ds-skills .is-current .ds-avatar,\n.ds-skills .ds-tooltip:hover .ds-avatar {\n  border-color: var(--color-accent-alt);\n  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent-alt) 30%, transparent), var(--shadow-control);\n}\n\n/* ---------- who: a crest beside a name ---------- */\n.ds-who {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-who__name {\n  display: block;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-who__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- details of this pack on shared components ---------- */\n.ds-tooltip--card .ds-tooltip__tip {\n  max-width: none;\n}\n.ds-panel {\n  border-color: var(--color-border);\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  color: var(--color-heading);\n  border-bottom-color: var(--color-border-muted);\n}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__body--flush {\n  padding: 0;\n  overflow: hidden;\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n.ds-panel__foot {\n  padding: var(--space-3) var(--space-5);\n}\n.ds-stats {\n  gap: var(--space-4) 0;\n}\n.ds-stat {\n  padding: var(--space-2) var(--space-4);\n  text-align: center;\n  border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__value {\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n}\n.ds-stat__label {\n  margin-top: var(--space-2);\n  letter-spacing: calc(var(--space-1) / 2);\n}\n.ds-grid__cell {\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-3) var(--space-5);\n  border-radius: var(--radius-panel);\n}\n.ds-grid__cell > .ds-scene {\n  height: var(--size-vista);\n  margin-bottom: var(--space-2);\n  border-radius: calc(var(--radius-panel) / 2);\n}\n.ds-grid__cell > .ds-scene .ds-scene__cloud {\n  top: 30%;\n}\n.ds-grid__cell > :not(.ds-scene) {\n  margin-right: var(--space-3);\n  margin-left: var(--space-3);\n}\n.ds-grid__cell > .ds-badge,\n.ds-grid__cell > .ds-grid__more {\n  align-self: flex-start;\n}\n.ds-grid__title {\n  font-size: var(--text-h2);\n}\n.ds-tabs {\n  gap: var(--space-2);\n  padding-bottom: var(--space-3);\n  border-bottom-color: var(--color-border-muted);\n}\n.ds-tabs__tab {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  letter-spacing: var(--size-hair);\n}\n.ds-tabs__tab:hover {\n  border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n  border-color: transparent;\n}\n.ds-table th {\n  letter-spacing: var(--size-hair);\n}\n.ds-avatar {\n  border-radius: 50%;\n}\n.ds-menu__list {\n  left: 50%;\n  transform: translateX(-50%);\n}\n.ds-menu__item {\n  border-radius: var(--radius-control);\n  letter-spacing: var(--size-hair);\n}\n.ds-accordion {\n  overflow: hidden;\n}\n.ds-accordion__summary::before {\n  border-radius: 50%;\n}\n.ds-badge {\n  letter-spacing: var(--size-hair);\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-6);\n  align-items: start;\n}\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-5);\n  background: var(--fill-panel);\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-sidebar__title {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-2);\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-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 closing call, in the opposite material ---------- */\n.ds-band {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  overflow: hidden;\n  padding: var(--space-7) var(--space-6);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n  text-align: center;\n}\n.ds-band::before,\n.ds-band::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 54%;\n  aspect-ratio: 1;\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: 50%;\n  opacity: 0.16;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.ds-band::after {\n  width: 74%;\n  opacity: 0.08;\n}\n.ds-band > * {\n  position: relative;\n  z-index: 1;\n}\n.ds-band__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: min(var(--text-display), 11vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-band__text {\n  margin: 0;\n  max-width: 52ch;\n  font-size: var(--text-large);\n}\n\n/* ---------- footer: a strip of sky, everything centred ---------- */\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  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-footer > .ds-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  text-align: center;\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-2) var(--space-5);\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: calc(var(--space-1) / 2);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.8;\n}\n.ds-footer__link:hover {\n  opacity: 1;\n}\n.ds-footer__note {\n  margin: 0;\n  max-width: 60ch;\n  font-size: var(--text-small);\n  opacity: 0.7;\n}\n\n/* ---------- narrower windows ---------- */\n.ds-panel__body--flush.ds-table__wrap {\n  overflow-x: auto;\n}\n@media (max-width: 1380px) {\n  .ds-rail {\n    display: none;\n  }\n}\n@media (max-width: 1100px) {\n  .ds-newsroom,\n  .ds-columns,\n  .ds-split,\n  .ds-split--wide {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-banner {\n    gap: var(--space-6);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-roster {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\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-banner {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-banner .ds-figure {\n    max-width: 50%;\n  }\n}\n@media (max-width: 700px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-menu__list {\n    left: 0;\n    transform: none;\n  }\n  .ds-hero {\n    min-height: 0;\n    padding-bottom: calc(var(--space-8) + var(--space-5));\n  }\n  .ds-masthead {\n    min-height: 0;\n  }\n  .ds-hero {\n    padding-top: calc(var(--size-nav) + var(--size-control) * 2.5);\n  }\n  .ds-hero .ds-scene__isle::before {\n    top: var(--size-nav);\n    left: 54%;\n    width: 40%;\n    height: calc(var(--size-control) * 2.4);\n  }\n  .ds-hero .ds-scene__isle::after {\n    display: none;\n  }\n  .ds-nav__end {\n    gap: var(--space-2);\n  }\n  .ds-brand__name {\n    font-size: var(--text-h3);\n  }\n  .ds-table td a,\n  .ds-table .ds-item {\n    white-space: nowrap;\n  }\n  .ds-hero .ds-scene__isle {\n    background: none;\n  }\n  .ds-masthead .ds-scene__isle::before {\n    display: none;\n  }\n  .ds-kicker::before,\n  .ds-kicker::after {\n    width: var(--space-5);\n  }\n  .ds-kicker {\n    letter-spacing: calc(var(--space-1) / 2);\n  }\n  .ds-sheet {\n    margin-right: var(--space-2);\n    margin-left: var(--space-2);\n  }\n  .ds-chapter {\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-chapter__head {\n    flex-wrap: wrap;\n    gap: var(--space-3);\n  }\n  .ds-chapter__title {\n    font-size: var(--text-h2);\n  }\n  .ds-chapter__line {\n    display: none;\n  }\n  .ds-chapter__more {\n    width: 100%;\n  }\n  .ds-banner {\n    grid-template-columns: minmax(0, 1fr);\n    padding: var(--space-3) var(--space-3) 0;\n  }\n  .ds-banner .ds-figure {\n    max-width: 72%;\n  }\n  .ds-grid,\n  .ds-grid--two,\n  .ds-grid--three {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-roster {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-5);\n  }\n  .ds-stats {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__value,\n  .ds-band__title {\n    font-size: var(--text-h1);\n  }\n  .ds-carousel__title {\n    font-size: var(--text-h2);\n  }\n  .ds-band {\n    padding: var(--space-6) var(--space-4);\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-list--tight .ds-list__date {\n    order: 0;\n    width: 100%;\n  }\n  .ds-dialog__backdrop {\n    padding: var(--space-5) var(--space-3);\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(#news:target) .ds-nav__more .ds-menu__item[href=\"#news\"]:not(.ds-menu__item--sub),\n.ds-page:has(#heroes:target) .ds-nav__more .ds-menu__item[href=\"#heroes\"]:not(.ds-menu__item--sub),\n.ds-page:has(#world:target) .ds-nav__more .ds-menu__item[href=\"#world\"]:not(.ds-menu__item--sub),\n.ds-page:has(#redeem:target) .ds-nav__more .ds-menu__item[href=\"#redeem\"]:not(.ds-menu__item--sub):not(.ds-menu__item--elsewhere) {\n    color: var(--color-heading);\n    box-shadow: inset var(--space-1) 0 0 var(--color-accent);\n  }\n  .ds-nav {\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    gap: var(--space-3);\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__more {\n    order: -1;\n  }\n  .ds-menu__summary {\n    border-radius: 50%;\n    width: var(--size-control);\n    padding: 0;\n    justify-content: center;\n  }\n  .ds-nav__more .ds-menu__item {\n    text-align: center;\n  }\n  .ds-nav__more .ds-menu__item--sub {\n    padding-left: var(--space-2);\n  }\n}\n@media (max-width: 700px) {\n  .ds-nav__action {\n    display: none;\n  }\n  .ds-banner__name {\n    font-size: min(var(--text-h1), 8vw);\n    overflow-wrap: anywhere;\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",
    "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: the sky-island role-playing game, 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=\"#news\">News</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#heroes\">Heroes</a></li>\n      <li class=\"ds-menu\">\n        <a class=\"ds-nav__link\" href=\"#world\">World <span class=\"ds-menu__caret\">&#9662;</span></a>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#world\">Lantern Isles</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#world\">Glass Coast</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#world\">Amber Steppe</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#world\">Tidewood</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#redeem\">Redeem</a></li>\n    </ul>\n    <div class=\"ds-nav__end\">\n      <a class=\"ds-nav__action\" href=\"#redeem\">Log in</a>\n      <a class=\"ds-button ds-button--small\" href=\"#redeem\">Play free</a>\n    </div>\n    <details class=\"ds-menu ds-nav__more\">\n      <summary class=\"ds-menu__summary\" aria-label=\"Menu\"><span class=\"ds-nav__bars\"></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=\"#news\">News</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#heroes\">Heroes</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#world\">World</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#world\">Lantern Isles</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#world\">Glass Coast</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#world\">Amber Steppe</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--sub\" href=\"#world\">Tidewood</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#redeem\">Redeem</a></li>\n        <li><a class=\"ds-menu__item ds-menu__item--elsewhere\" href=\"#redeem\">Log in</a></li>\n      </ul>\n    </details>\n  </header>\n\n  <ul class=\"ds-rail\">\n    <li class=\"ds-rail__item\"><a class=\"ds-rail__dot\" href=\"#home\" aria-label=\"Home\"></a><span class=\"ds-rail__label\">Home</span></li>\n    <li class=\"ds-rail__item\"><a class=\"ds-rail__dot\" href=\"#news\" aria-label=\"News\"></a><span class=\"ds-rail__label\">News</span></li>\n    <li class=\"ds-rail__item\"><a class=\"ds-rail__dot\" href=\"#heroes\" aria-label=\"Heroes\"></a><span class=\"ds-rail__label\">Heroes</span></li>\n    <li class=\"ds-rail__item\"><a class=\"ds-rail__dot\" href=\"#world\" aria-label=\"World\"></a><span class=\"ds-rail__label\">World</span></li>\n    <li class=\"ds-rail__item\"><a class=\"ds-rail__dot\" href=\"#redeem\" aria-label=\"Redeem\"></a><span class=\"ds-rail__label\">Redeem</span></li>\n  </ul>\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__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></span>\n        <div class=\"ds-wrap ds-hero__copy\">\n          <span class=\"ds-kicker\"><span class=\"ds-star\"></span>Version 3.2 is here<span class=\"ds-star\"></span></span>\n          <h1 class=\"ds-hero__title\">The Lantern Isles</h1>\n          <p class=\"ds-hero__lead\">A new region drifts in from the east. Cross the cloud sea, light the old lamps one by one and learn who put them out.</p>\n          <div class=\"ds-hero__actions\">\n            <a class=\"ds-button ds-button--large\" href=\"#redeem\">Play free</a>\n            <a class=\"ds-play\" href=\"#news\"><span class=\"ds-play__disc\">&#9654;</span><span>Watch the trailer</span></a>\n          </div>\n          <p class=\"ds-hero__note\"><span class=\"ds-badge ds-badge--quiet\">PC</span><span class=\"ds-badge ds-badge--quiet\">Phone</span><span class=\"ds-badge ds-badge--quiet\">Console</span><span>One account, one journey on all three.</span></p>\n        </div>\n      </div>\n      <div class=\"ds-sheet\">\n        <div class=\"ds-chapter\">\n          <div class=\"ds-chapter__head\"><span class=\"ds-chapter__index\">01</span><h2 class=\"ds-chapter__title\">Latest</h2><span class=\"ds-chapter__line\"></span><a class=\"ds-chapter__more\" href=\"#news\">All news</a></div>\n          <div class=\"ds-newsroom\">\n            <div class=\"ds-carousel\" data-component=\"carousel\">\n              <div class=\"ds-carousel__stage\">\n                <a class=\"ds-scene ds-scene--3 ds-carousel__slide\" href=\"#news\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></span>\n                  <span class=\"ds-badge\">Version 3.2</span>\n                  <h3 class=\"ds-carousel__title\">The Lantern Isles open on 14 October</h3>\n                  <span class=\"ds-carousel__meta\">8 October, version notes</span>\n                </a>\n                <a class=\"ds-carousel__arrow\" href=\"#home\" aria-label=\"Previous\">&#9664;</a>\n                <a class=\"ds-carousel__arrow ds-carousel__arrow--next\" href=\"#home\" aria-label=\"Next\">&#9654;</a>\n              </div>\n              <div class=\"ds-carousel__foot\">\n                <span>Banner 1 of 4</span>\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>\n              </div>\n            </div>\n            <div class=\"ds-stack ds-stack--tight\">\n              <ul class=\"ds-tabs\" data-component=\"tabs\">\n                <li><a class=\"ds-tabs__tab is-current\" href=\"#home\">Latest</a></li>\n                <li><a class=\"ds-tabs__tab\" href=\"#news\">Notices</a></li>\n                <li><a class=\"ds-tabs__tab\" href=\"#news\">Events</a></li>\n                <li><a class=\"ds-tabs__tab\" href=\"#news\">Stories</a></li>\n              </ul>\n              <ul class=\"ds-list ds-list--tight\">\n                <li class=\"ds-list__item\"><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Version 3.2 notes: the Lantern Isles</a></span><span class=\"ds-list__date\">8 Oct</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Lantern week: fourteen days of gifts</a></span><span class=\"ds-list__date\">7 Oct</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#heroes\">Meet the Lamplighter, a frost support</a></span><span class=\"ds-list__date\">5 Oct</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Maintenance on 14 October</a></span><span class=\"ds-list__date\">3 Oct</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">A short story: the ferryman's ledger</a></span><span class=\"ds-list__date\">29 Sep</span></li>\n              </ul>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-chapter ds-chapter--alt\">\n          <div class=\"ds-chapter__head\"><span class=\"ds-chapter__index\">02</span><h2 class=\"ds-chapter__title\">Heroes</h2><span class=\"ds-chapter__line\"></span><a class=\"ds-chapter__more\" href=\"#heroes\">All 24 heroes</a></div>\n          <div class=\"ds-banner\">\n            <span class=\"ds-figure\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span>\n            <div class=\"ds-banner__copy\">\n              <span class=\"ds-banner__role\"><span class=\"ds-avatar ds-avatar--small 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 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9\"/></svg></span><span>Frost, support, staff</span><span class=\"ds-badge ds-badge--new\">New</span></span>\n              <h3 class=\"ds-banner__name\">The Lamplighter</h3>\n              <p class=\"ds-banner__epithet\">Keeper of the last warm window</p>\n              <p class=\"ds-banner__text\">She walked the isles for forty winters with one lamp and a long pole. Her light shields friends, slows what hunts them and shows the paths the clouds hide.</p>\n              <div class=\"ds-banner__traits\">\n                <div><div class=\"ds-progress__label\"><strong>Difficulty</strong><span>Gentle</span></div><span class=\"ds-progress ds-progress--25\"><span class=\"ds-progress__bar\"></span></span></div>\n                <div><div class=\"ds-progress__label\"><strong>Reach</strong><span>Long</span></div><span class=\"ds-progress ds-progress--75 ds-progress--xp\"><span class=\"ds-progress__bar\"></span></span></div>\n              </div>\n              <div class=\"ds-buttons\">\n                <a class=\"ds-button ds-button--secondary\" href=\"#heroes\">Meet the Lamplighter</a>\n              </div>\n            </div>\n          </div>\n          <ul class=\"ds-cast\">\n            <li><a class=\"ds-cast__item is-current\" href=\"#heroes\"><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 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9\"/></svg></span>Lamplighter</a></li>\n            <li><a class=\"ds-cast__item\" href=\"#heroes\"><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=\"M3 9h10a3 3 0 1 0-3-3M3 14h15a3 3 0 1 1-3 3M3 19h7\"/></svg></span>Fletcher</a></li>\n            <li><a class=\"ds-cast__item\" href=\"#heroes\"><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 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 1-3-1-5 1-9z\"/></svg></span>Oathkeeper</a></li>\n            <li><a class=\"ds-cast__item\" href=\"#heroes\"><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=\"M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z\"/></svg></span>Herald</a></li>\n            <li><a class=\"ds-cast__item\" href=\"#heroes\"><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 3c3 4 6 7 6 11a6 6 0 0 1-12 0c0-4 3-7 6-11z\"/></svg></span>Tidecaller</a></li>\n            <li><a class=\"ds-cast__item\" href=\"#heroes\"><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-8 5-14 14-14 0 9-6 14-14 14zM5 19l8-8\"/></svg></span>Gardener</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-chapter\">\n          <div class=\"ds-chapter__head\"><span class=\"ds-chapter__index\">03</span><h2 class=\"ds-chapter__title\">The world</h2><span class=\"ds-chapter__line\"></span><a class=\"ds-chapter__more\" href=\"#world\">Open the map</a></div>\n          <div class=\"ds-grid\" data-component=\"grid\">\n            <div class=\"ds-grid__cell\"><div class=\"ds-scene ds-scene--2\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></span></div><span class=\"ds-badge ds-badge--new\">Opens 14 October</span><h3 class=\"ds-grid__title\">Lantern Isles</h3><p class=\"ds-grid__text\">Nine islands tied by rope bridges, and a lamp on each that has not burned for an age.</p><a class=\"ds-grid__more\" href=\"#world\">Explore</a></div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\"><div class=\"ds-scene ds-scene--5\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></span></div><span class=\"ds-badge ds-badge--quiet\">Region two</span><h3 class=\"ds-grid__title\">Glass Coast</h3><p class=\"ds-grid__text\">Cliffs of sea glass where the scholars of the tide keep their drowned library.</p><a class=\"ds-grid__more\" href=\"#world\">Explore</a></div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\"><div class=\"ds-scene ds-scene--3\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></span></div><span class=\"ds-badge ds-badge--quiet\">Region three</span><h3 class=\"ds-grid__title\">Amber Steppe</h3><p class=\"ds-grid__text\">Grass to the horizon, wind riders, and a market that moves with the season.</p><a class=\"ds-grid__more\" href=\"#world\">Explore</a></div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\"><div class=\"ds-scene ds-scene--4\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></span></div><span class=\"ds-badge ds-badge--quiet\">Region one</span><h3 class=\"ds-grid__title\">Tidewood</h3><p class=\"ds-grid__text\">The forest where every journey starts, half of it under water at high tide.</p><a class=\"ds-grid__more\" href=\"#world\">Explore</a></div>\n          </div>\n        </div>\n        <div class=\"ds-chapter ds-chapter--alt\">\n          <div class=\"ds-chapter__head\"><span class=\"ds-chapter__index\">04</span><h2 class=\"ds-chapter__title\">The journey so far</h2><span class=\"ds-chapter__line\"></span></div>\n          <div class=\"ds-stats\" data-component=\"stats\">\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">4</span><span class=\"ds-stat__label\">Regions open</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">24</span><span class=\"ds-stat__label\">Heroes to meet</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">310</span><span class=\"ds-stat__label\">Lamps to light</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">1 to 4</span><span class=\"ds-stat__label\">Travellers</span></div>\n          </div>\n          <div class=\"ds-split\">\n            <div class=\"ds-panel\" data-component=\"panel\">\n              <h3 class=\"ds-panel__title\">Lantern week <span class=\"ds-badge ds-badge--success\">Day 5 of 14</span></h3>\n              <div class=\"ds-panel__body ds-stack ds-stack--tight\">\n                <p class=\"ds-panel__text\">Sign in on any seven days and the festival lamp, a frost staff, is yours to keep.</p>\n                <div><div class=\"ds-progress__label\"><strong>Days signed in</strong><span>5 of 7</span></div><span class=\"ds-progress ds-progress--75\"><span class=\"ds-progress__bar\"></span></span></div>\n                <div><div class=\"ds-progress__label\"><strong>Lamps lit by everyone</strong><span>1.9 of 3 million</span></div><span class=\"ds-progress ds-progress--60 ds-progress--rep\"><span class=\"ds-progress__bar\"></span></span></div>\n              </div>\n              <div class=\"ds-panel__foot\"><span>Ends on 21 October</span><a class=\"ds-link\" href=\"#news\">How the festival works</a></div>\n            </div>\n            <div class=\"ds-panel\">\n              <h3 class=\"ds-panel__title\">Free to try this week</h3>\n              <div class=\"ds-panel__body ds-stack ds-stack--tight\">\n                <span class=\"ds-who\"><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=\"M3 9h10a3 3 0 1 0-3-3M3 14h15a3 3 0 1 1-3 3M3 19h7\"/></svg></span><span><span class=\"ds-who__name\">The Fletcher</span><span class=\"ds-who__meta\">Gale, ranged damage</span></span></span>\n                <span class=\"ds-who\"><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 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 1-3-1-5 1-9z\"/></svg></span><span><span class=\"ds-who__name\">The Oathkeeper</span><span class=\"ds-who__meta\">Flame, front line</span></span></span>\n                <span class=\"ds-who\"><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=\"M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z\"/></svg></span><span><span class=\"ds-who__name\">The Herald</span><span class=\"ds-who__meta\">Star, healer</span></span></span>\n              </div>\n              <div class=\"ds-panel__foot\"><span>Changes every Monday</span><a class=\"ds-link\" href=\"#heroes\">All heroes</a></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-chapter\">\n          <div class=\"ds-band\">\n            <span class=\"ds-star\"></span>\n            <h2 class=\"ds-band__title\">The first lamp is yours</h2>\n            <p class=\"ds-band__text\">Make an account, choose a traveller and wake in Tidewood tonight. The game is free and so is every region.</p>\n            <a class=\"ds-button ds-button--large\" href=\"#redeem\">Begin the journey</a>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"news\">\n      <div class=\"ds-scene ds-scene--2 ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></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\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#news\">News</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">Version 3.2 notes</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">News</h1>\n              <p class=\"ds-page-header__text\">Version notes, notices, events and short stories from the isles.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#news\">Subscribe to the feed</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-sheet\">\n        <div class=\"ds-chapter\">\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\n              <div class=\"ds-prose\" data-component=\"typography\">\n                <h1>Version 3.2: the Lantern Isles</h1>\n                <p class=\"ds-prose__lead\">A fourth region, a new hero and a festival of fourteen days.</p>\n                <p>The update arrives on 14 October after a maintenance of about five hours. Everyone who has finished the second chapter can sail east at once; <a href=\"#world\">the world page</a> shows the way.</p>\n                <h2>What is new</h2>\n                <ul>\n                  <li>The Lantern Isles: nine islands, four story quests and forty lamps.</li>\n                  <li>The Lamplighter, a frost support who shields her friends.</li>\n                  <li>Lantern week, with a staff to keep for seven sign-ins.</li>\n                </ul>\n                <h3>A gift for the wait</h3>\n                <p>Enter the code <code>LANTERN-3200</code> on <a href=\"#redeem\">the redeem page</a> before 21 October for sixty lamp oil and three travel rations.</p>\n              </div>\n              <h2 class=\"ds-heading\">More news</h2>\n              <ul class=\"ds-list\" data-component=\"list\">\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">7 Oct</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Lantern week: fourteen days of gifts</a><p class=\"ds-list__text\">What each day gives, and how to catch up if you miss one.</p><span class=\"ds-list__meta\">Events, 3 minutes</span></span><span class=\"ds-badge\">Event</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">5 Oct</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#heroes\">Meet the Lamplighter</a><p class=\"ds-list__text\">Her skills, her story and the friends she works best beside.</p><span class=\"ds-list__meta\">Heroes, 5 minutes</span></span><span class=\"ds-badge ds-badge--quiet\">Hero</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">3 Oct</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Maintenance on 14 October</a><p class=\"ds-list__text\">From 06:00 to 11:00 UTC. Lamp oil for the hours lost is sent by mail.</p><span class=\"ds-list__meta\">Notices, 1 minute</span></span><span class=\"ds-badge ds-badge--warning\">Notice</span></li>\n              </ul>\n            </div>\n            <aside class=\"ds-stack\">\n              <div class=\"ds-sidebar\" data-component=\"sidebar\">\n                <h2 class=\"ds-sidebar__title\"><span class=\"ds-star\"></span>Topics</h2>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Version notes</a><span class=\"ds-sidebar__meta\">12</span></li>\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Notices</a><span class=\"ds-sidebar__meta\">31</span></li>\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Events</a><span class=\"ds-sidebar__meta\">18</span></li>\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Stories</a><span class=\"ds-sidebar__meta\">9</span></li>\n                </ul>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\"><span class=\"ds-star\"></span>Also useful</h2>\n                <ul class=\"ds-links\" data-component=\"links\">\n                  <li><a class=\"ds-link\" href=\"#news\">Known issues</a></li>\n                  <li><a class=\"ds-link is-visited\" href=\"#news\">Server status</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                <p class=\"ds-muted\">Normal, visited, hovered and pressed.</p>\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"heroes\">\n      <div class=\"ds-scene ds-scene--5 ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></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\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#heroes\">Heroes</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">The Lamplighter</li>\n          </ol>\n          <div class=\"ds-page-header\" data-component=\"page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Heroes</h1>\n              <p class=\"ds-page-header__text\">Twenty-four travellers, each with a calling, an element and a story.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#redeem\">Try this week's cast</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-sheet\">\n        <div class=\"ds-chapter\">\n          <ul class=\"ds-tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#heroes\">All <span class=\"ds-tabs__count\">24</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#heroes\">Frost <span class=\"ds-tabs__count\">5</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#heroes\">Flame <span class=\"ds-tabs__count\">6</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#heroes\">Gale <span class=\"ds-tabs__count\">4</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#heroes\">Verdant <span class=\"ds-tabs__count\">5</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#heroes\">Star <span class=\"ds-tabs__count\">4</span></a></li>\n          </ul>\n          <ul class=\"ds-roster\">\n            <li><a class=\"ds-roster__item is-current\" href=\"#heroes\"><span class=\"ds-figure\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span><span><span class=\"ds-roster__name\">The Lamplighter</span><span class=\"ds-roster__role\">Frost, support</span></span></a></li>\n            <li><a class=\"ds-roster__item\" href=\"#heroes\"><span class=\"ds-figure ds-figure--2\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span><span><span class=\"ds-roster__name\">The Fletcher</span><span class=\"ds-roster__role\">Gale, ranged</span></span></a></li>\n            <li><a class=\"ds-roster__item\" href=\"#heroes\"><span class=\"ds-figure ds-figure--3\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span><span><span class=\"ds-roster__name\">The Oathkeeper</span><span class=\"ds-roster__role\">Flame, front line</span></span></a></li>\n            <li><a class=\"ds-roster__item\" href=\"#heroes\"><span class=\"ds-figure ds-figure--4\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span><span><span class=\"ds-roster__name\">The Herald</span><span class=\"ds-roster__role\">Star, healer</span></span></a></li>\n            <li><a class=\"ds-roster__item\" href=\"#heroes\"><span class=\"ds-figure ds-figure--2\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span><span><span class=\"ds-roster__name\">The Gardener</span><span class=\"ds-roster__role\">Verdant, ranged</span></span></a></li>\n            <li><a class=\"ds-roster__item\" href=\"#heroes\"><span class=\"ds-figure ds-figure--3\"><span class=\"ds-figure__arch\"></span><span class=\"ds-figure__body\"></span><span class=\"ds-figure__prop\"></span></span><span><span class=\"ds-roster__name\">The Tidecaller</span><span class=\"ds-roster__role\">Frost, front line</span></span></a></li>\n          </ul>\n          <div class=\"ds-row ds-row--between\">\n            <span class=\"ds-muted\">Heroes 1 to 6 of 24</span>\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li><span class=\"ds-pagination__link is-disabled\">Prev</span></li>\n              <li><span class=\"ds-pagination__link is-current\">1</span></li>\n              <li><a class=\"ds-pagination__link\" href=\"#heroes\">2</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#heroes\">3</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#heroes\">4</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#heroes\">Next</a></li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-chapter ds-chapter--alt\">\n          <div class=\"ds-chapter__head\"><span class=\"ds-chapter__index\">01</span><h2 class=\"ds-chapter__title\">The Lamplighter</h2><span class=\"ds-chapter__line\"></span></div>\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\n              <div class=\"ds-skills\">\n                <span class=\"ds-tooltip is-current\" tabindex=\"0\"><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=\"M9 3h6M10 3v3l-3 4v7l3 3h4l3-3v-7l-3-4V3M12 11v5\"/></svg></span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Warm window</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Skill</span><span>12 s</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Shields the nearest friend.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>Somebody always left one lit for her.</span></span></span></span>\n                <span class=\"ds-tooltip\" tabindex=\"0\"><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 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9\"/></svg></span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Long pole</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Strike</span><span>No cooldown</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Every third strike chills.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>For lamps, and for wolves.</span></span></span></span>\n                <span class=\"ds-tooltip\" tabindex=\"0\"><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=\"M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z\"/></svg></span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Hush of snow</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Skill</span><span>20 s</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Slows everything near her by 30%.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>The isles go quiet when she asks.</span></span></span></span>\n                <span class=\"ds-tooltip\" tabindex=\"0\"><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 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z\"/></svg></span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Forty winters</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Great skill</span><span>80 s</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Lights every lamp in sight for 10 s.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>She counted each one.</span></span></span></span>\n              </div>\n              <div class=\"ds-tooltip ds-tooltip--card\">\n                <span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Warm window</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Skill</span><span>12 s cooldown</span></span><span class=\"ds-tooltip__line\"><span>Raises a pane of light that shields the nearest friend.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Shielded friends move 15% faster.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>Somebody always left one lit for her.</span></span></span>\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 level</th><th class=\"is-numeric\">Shield</th><th class=\"is-numeric\">Cooldown</th><th class=\"is-numeric\">Lamp oil</th></tr></thead>\n                    <tbody>\n                      <tr><td>1<span class=\"ds-table__sub\">From the start</span></td><td class=\"is-numeric\">1,200</td><td class=\"is-numeric\">12.0 s</td><td class=\"is-numeric\">0</td></tr>\n                      <tr><td>4<span class=\"ds-table__sub\">Hero level 20</span></td><td class=\"is-numeric\">1,950</td><td class=\"is-numeric\">11.5 s</td><td class=\"is-numeric\">120</td></tr>\n                      <tr><td>7<span class=\"ds-table__sub\">Hero level 40</span></td><td class=\"is-numeric\">2,800</td><td class=\"is-numeric\">11.0 s</td><td class=\"is-numeric\">480</td></tr>\n                      <tr><td>10<span class=\"ds-table__sub\">Hero level 60</span></td><td class=\"is-numeric\">3,900</td><td class=\"is-numeric\">10.0 s</td><td class=\"is-numeric\">1,600</td></tr>\n                    </tbody>\n                  </table>\n                </div>\n              </div>\n            </div>\n            <aside class=\"ds-stack\">\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\"><span class=\"ds-star\"></span>At a glance</h2>\n                <div><div class=\"ds-progress__label\"><strong>Difficulty</strong><span>Gentle</span></div><span class=\"ds-progress ds-progress--25\"><span class=\"ds-progress__bar\"></span></span></div>\n                <div><div class=\"ds-progress__label\"><strong>Reach</strong><span>Long</span></div><span class=\"ds-progress ds-progress--75 ds-progress--xp\"><span class=\"ds-progress__bar\"></span></span></div>\n                <div><div class=\"ds-progress__label\"><strong>Protection</strong><span>Very high</span></div><span class=\"ds-progress ds-progress--90 ds-progress--health\"><span class=\"ds-progress__bar\"></span></span></div>\n                <div class=\"ds-badges\" data-component=\"badge\">\n                  <span class=\"ds-badge\">Frost</span>\n                  <span class=\"ds-badge ds-badge--success\">Free this week</span>\n                  <span class=\"ds-badge ds-badge--warning\">Changes in 3.3</span>\n                  <span class=\"ds-badge ds-badge--danger\">Banner ends soon</span>\n                </div>\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"world\">\n      <div class=\"ds-scene ds-scene--4 ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></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\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#world\">World</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">Regions</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">The world</h1>\n              <p class=\"ds-page-header__text\">Four regions are open and every one of them is free to walk.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#news\">Read the travel guide</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-sheet\">\n        <div class=\"ds-chapter\">\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\n              <h2 class=\"ds-heading\">Regions</h2>\n              <div class=\"ds-accordion\">\n                <details class=\"ds-accordion__item\" open>\n                  <summary class=\"ds-accordion__summary\">Lantern Isles <span class=\"ds-accordion__meta\">Opens 14 October</span></summary>\n                  <div class=\"ds-accordion__body\"><p>Nine islands east of the cloud sea. You need the second chapter finished and a boat, which the ferryman lends.</p><div><div class=\"ds-progress__label\"><strong>Explored</strong><span>0 of 40 lamps</span></div><span class=\"ds-progress ds-progress--10\"><span class=\"ds-progress__bar\"></span></span></div></div>\n                </details>\n                <details class=\"ds-accordion__item\" open>\n                  <summary class=\"ds-accordion__summary\">Glass Coast <span class=\"ds-accordion__meta\">62% explored</span></summary>\n                  <div class=\"ds-accordion__body\"><p>Sea-glass cliffs and the drowned library.</p><div><div class=\"ds-progress__label\"><strong>Explored</strong><span>25 of 40 lamps</span></div><span class=\"ds-progress ds-progress--60\"><span class=\"ds-progress__bar\"></span></span></div></div>\n                </details>\n                <details class=\"ds-accordion__item\" open>\n                  <summary class=\"ds-accordion__summary\">Amber Steppe <span class=\"ds-accordion__meta\">88% explored</span></summary>\n                  <div class=\"ds-accordion__body\"><p>Open grassland and the moving market.</p><div><div class=\"ds-progress__label\"><strong>Explored</strong><span>35 of 40 lamps</span></div><span class=\"ds-progress ds-progress--90\"><span class=\"ds-progress__bar\"></span></span></div></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">Tidewood <span class=\"ds-accordion__meta\">100% explored</span></summary>\n                  <div class=\"ds-accordion__body\"><p>The forest where every journey starts.</p></div>\n                </details>\n              </div>\n            </div>\n            <aside class=\"ds-stack\">\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=\"M7 18a4 4 0 0 1 0-8 6 6 0 0 1 11 2 3 3 0 0 1 0 6z\"/></svg></span>\n                <h2 class=\"ds-empty__title\">The fifth region is under cloud</h2>\n                <p class=\"ds-empty__text\">Nothing has been charted north of the steppe yet. The first map arrives with version 4.0.</p>\n                <a class=\"ds-button ds-button--secondary\" href=\"#news\">Follow the news</a>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\"><span class=\"ds-star\"></span>Travel notes</h2>\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=\"#world\">Ferry to the isles</a><span class=\"ds-sidebar__meta\">Running</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--warning\"></span><a class=\"ds-sidebar__link\" href=\"#world\">Steppe market</a><span class=\"ds-sidebar__meta\">Moves in 2 days</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--danger\"></span><a class=\"ds-sidebar__link\" href=\"#world\">North pass</a><span class=\"ds-sidebar__meta\">Closed</span></li>\n                </ul>\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"redeem\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__sun\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__isle\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__cloud\"></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\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#redeem\">Account</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">Redeem a code</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Redeem a code</h1>\n              <p class=\"ds-page-header__text\">Gift codes come with letters, festivals and streams.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#news\">Where to find codes</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-sheet\">\n        <div class=\"ds-chapter\">\n          <div class=\"ds-notices\" data-component=\"notice\">\n            <div class=\"ds-notice\"><p class=\"ds-notice__title\">Gifts arrive by mail in the game</p><p class=\"ds-notice__text\">Allow a few minutes, then open the mailbox in any town.</p></div>\n            <div class=\"ds-notice ds-notice--error\"><p class=\"ds-notice__title\">That code was not accepted</p><p class=\"ds-notice__text\">It may have expired or been used on this account already.</p></div>\n          </div>\n          <div class=\"ds-split ds-split--wide\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#redeem\">\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"r-server\">Server</label>\n                <div class=\"ds-form__field\"><select class=\"ds-form__select\" id=\"r-server\"><option>Europe</option><option>Americas</option><option>Asia and Pacific</option></select></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"r-name\">Traveller</label>\n                <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"r-name\" type=\"text\" value=\"Wren of Tidewood\"></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"r-code\">Gift code</label>\n                <div class=\"ds-form__field\">\n                  <input class=\"ds-form__input ds-form__input--short is-error\" id=\"r-code\" type=\"text\" value=\"LANTERN-320\">\n                  <p class=\"ds-form__error\">A code has twelve characters. This one has eleven.</p>\n                </div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"r-note\">Note to support</label>\n                <div class=\"ds-form__field\">\n                  <textarea class=\"ds-form__textarea\" id=\"r-note\">The code came with the festival letter.</textarea>\n                  <p class=\"ds-form__hint\">Only read if the code fails twice.</p>\n                </div>\n              </div>\n              <div class=\"ds-form__row\">\n                <span class=\"ds-form__label\">Options</span>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Tell me when gifts arrive</span><span class=\"ds-switch__hint\">One e-mail for each code</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\">Festival letters</span><span class=\"ds-switch__hint\">A letter before each version</span></span><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span></label>\n                  <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> This is my own account</label>\n                </div>\n              </div>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"button\">Redeem</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#home\">Cancel</a>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Redeem all (0)</button>\n                <span class=\"ds-form__actions-end\"><button class=\"ds-button ds-button--danger\" type=\"button\">Unlink this device</button></span>\n              </div>\n            </form>\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>Unlink this device?</span><a class=\"ds-dialog__close\" href=\"#redeem\">x</a></h2>\n                  <div class=\"ds-dialog__body\">\n                    <p class=\"ds-dialog__text\">Your journey stays safe on the account. You will need to log in here again to play.</p>\n                    <div class=\"ds-dialog__actions\">\n                      <a class=\"ds-button ds-button--secondary\" href=\"#redeem\">Stay linked</a>\n                      <a class=\"ds-button ds-button--danger\" href=\"#redeem\">Unlink</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\"><span class=\"ds-star\"></span>Codes you redeemed</h2>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span><span class=\"ds-sidebar__link\">Tidewood welcome</span><span class=\"ds-sidebar__meta\">2 Sep</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span><span class=\"ds-sidebar__link\">Steppe fair</span><span class=\"ds-sidebar__meta\">19 Aug</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--danger\"></span><span class=\"ds-sidebar__link\">Summer letter</span><span class=\"ds-sidebar__meta\">Expired</span></li>\n                </ul>\n              </div>\n            </div>\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      <a class=\"ds-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-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#news\">News</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#heroes\">Heroes</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#world\">World</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#redeem\">Redeem a code</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#news\">Support</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#news\">Terms</a></li>\n      </ul>\n      <p class=\"ds-footer__note\">chronoskin is a specimen site. The game is free to play; nothing sold makes a traveller stronger.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.game-fantasy.landing.s07.p01.t07.u04\",\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-7174\",\n  \"short\": \"v1-gf-7174\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #090807;\n  --color-canvas: #15120f;\n  --color-surface: #1d1915;\n  --color-surface-alt: #25201a;\n  --color-surface-strong: #33291b;\n  --color-bar: #4a3414;\n  --color-bar-text: #f3d98e;\n  --color-bar-alt: #162433;\n  --color-bar-alt-text: #b9d3ea;\n  --color-inverse: #d9c492;\n  --color-inverse-text: #2a1b0b;\n  --color-text: #c9b99a;\n  --color-text-muted: #8c7e68;\n  --color-heading: #f0d48a;\n  --color-heading-alt: #e0a94a;\n  --color-link: #e8ba7f;\n  --color-link-quiet: #a38d6d;\n  --color-link-visited: #b89a78;\n  --color-link-hover: #ffda4d;\n  --color-link-active: #ffffff;\n  --color-border: #3c3226;\n  --color-border-strong: #a67c2e;\n  --color-border-muted: #2a231b;\n  --color-accent: #1f6fb5;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #ffd24a;\n  --color-fill-1: #4a9df0;\n  --color-fill-2: #b064e8;\n  --color-fill-3: #ff8a2a;\n  --color-fill-4: #2fc4b2;\n  --color-button: #9c1f12;\n  --color-button-text: #ffe9a8;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #3b3226;\n  --color-button-secondary-text: #e6cf98;\n  --color-input: #0d0b09;\n  --color-input-text: #e4d6b6;\n  --color-input-border: #5a4a30;\n  --color-disabled: #24201b;\n  --color-disabled-text: #6b6152;\n  --color-danger: #e0483a;\n  --color-danger-surface: #2c1210;\n  --color-success: #5fc24a;\n  --color-warning: #e8a520;\n  --color-notice: #18222e;\n  --color-notice-text: #b9d3ea;\n  --color-focus: #58b2ff;\n  --color-shadow: #000000;\n  --color-overlay: rgba(0, 0, 0, 0.72);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Nunito Sans\", \"Noto Sans\", Avenir, \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n  --font-heading: \"Playfair Display\", Didot, \"Bodoni 72\", \"Bodoni MT\", \"Libre Bodoni\", \"Times New Roman\", serif;\n  --font-ui: \"Nunito Sans\", \"Noto Sans\", Avenir, \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n  --font-mono: \"IBM Plex Mono\", \"SF Mono\", Consolas, \"Liberation Mono\", monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 64px;\n  --text-h1: 44px;\n  --text-h2: 30px;\n  --text-h3: 21px;\n  --line-body: 1.7;\n  --line-heading: 1.15;\n  --line-display: 1.05;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: 0.01em;\n  --display-tracking: 0.02em;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 2px;\n  --radius-panel: 3px;\n  --radius-pill: 8px;\n  --radius-page: 4px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), inset 0 0 0 1px color-mix(in srgb, black 60%, transparent), inset 0 0 26px color-mix(in srgb, black 50%, transparent), 0 2px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 6px 16px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), inset 0 -1px 0 color-mix(in srgb, black 45%, transparent), inset 0 0 0 1px color-mix(in srgb, black 25%, transparent), 0 2px 3px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), inset 0 -1px 0 color-mix(in srgb, black 45%, transparent), 0 0 2px var(--color-accent-alt), 0 0 14px color-mix(in srgb, var(--color-accent-alt) 65%, transparent);\n  --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, black 70%, transparent), inset 0 0 0 1px color-mix(in srgb, black 35%, transparent);\n  --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 90%, transparent), 0 0 24px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 12px 28px color-mix(in srgb, var(--color-shadow) 85%, transparent);\n  --shadow-text: 0 1px 2px 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='28' height='28'%3E%3Cpath d='M7 3l4 4-4 4-4-4zM21 17l4 4-4 4-4-4z' fill='white' fill-opacity='.035'/%3E%3Cpath d='M7 4l4 4-4 4-4-4zM21 18l4 4-4 4-4-4z' fill='black' fill-opacity='.55'/%3E%3C/svg%3E\"), radial-gradient(ellipse 90% 60% at 50% 0, color-mix(in srgb, var(--color-page), white 10%) 0, transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, color-mix(in srgb, var(--color-accent) 16%, transparent) 0, transparent 70%), var(--color-page);\n  --fill-bar: repeating-linear-gradient(90deg, color-mix(in srgb, white 3%, transparent) 0, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px, transparent 5px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 16%) 0, var(--color-bar) 14%, color-mix(in srgb, var(--color-bar), black 30%) 86%, color-mix(in srgb, var(--color-bar), black 60%) 100%);\n  --fill-bar-alt: radial-gradient(ellipse 80% 90% at 50% 130%, color-mix(in srgb, var(--color-accent) 30%, transparent) 0, transparent 70%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), black 35%) 0, var(--color-bar-alt) 100%);\n  --fill-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 4h1v1H3z' fill='black' fill-opacity='.12'/%3E%3Cpath d='M4 1h1v1H4z' fill='white' fill-opacity='.2'/%3E%3C/svg%3E\"), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 20%) 0, var(--color-inverse) 50%, color-mix(in srgb, var(--color-inverse), black 16%) 100%);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 22%) 0, var(--color-accent) 55%, color-mix(in srgb, var(--color-accent), black 36%) 100%);\n  --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 4%) 0, var(--color-surface) 22%, color-mix(in srgb, var(--color-surface), black 20%) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 26%) 0, var(--color-button) 42%, color-mix(in srgb, var(--color-button), black 40%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 40%) 0, color-mix(in srgb, var(--color-button), white 12%) 42%, color-mix(in srgb, var(--color-button), black 28%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 14%) 0, var(--color-button-secondary) 42%, color-mix(in srgb, var(--color-button-secondary), black 38%) 100%);\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 50%) 0, var(--color-input) 6px);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}