{
  "id": "v1-gf-6777",
  "long_id": "v1.game-fantasy.portal.s06.p07.t07.u07",
  "name": "Game fantasy live hub (gunmetal, white, electric violet)",
  "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": "portal",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "The hub of a live science-fantasy game as such sites have looked since about 2019: a clear glass top bar over a full-bleed picture with the season's title set large and left, a strip of numbered anchors, and below it decks of news, the season pass, the roadmap and the week's figures. It is the cold, sleek end of the era: condensed capitals, monospace labels, hairlines, cut corners and one electric colour, with the old ornament reduced to diamonds and brackets. The page is responsive and the key art is drawn in CSS from the palette.",
  "url": "https://chrono.skin/s/v1-gf-6777",
  "preview_url": "https://chrono.skin/s/v1-gf-6777/specimen.html",
  "files": {
    "STYLE.md": "# Game fantasy live hub (gunmetal, white, electric violet)\n\n## Summary\n\nThe hub of a live science-fantasy game as such sites have looked since about 2019: a clear glass top bar over a full-bleed picture with the season's title set large and left, a strip of numbered anchors, and below it decks of news, the season pass, the roadmap and the week's figures. It is the cold, sleek end of the era: condensed capitals, monospace labels, hairlines, cut corners and one electric colour, with the old ornament reduced to diamonds and brackets. The page is responsive and the key art is drawn in CSS from the palette.\n\n## Layout\n\n- Full-bleed and fluid, everything aligned left. The hero and mastheads run from edge to edge; their content sits in `.ds-wrap` (at most `--size-page`, 1320px, with `--space-6` gutters). Below them `.ds-decks` is a column of `.ds-deck` slabs in `--color-canvas` with two cut corners, laid `--space-5` apart on the page ground, whose grid shows between and around them. Designed at 1440px; under 1100px two-column blocks become one column and grids two across; under 700px the navigation links move to a second row and grids become one column. Nothing scrolls sideways at 390px; the pass track and tables scroll inside themselves.\n- Order of the home page: the top bar (`--size-nav`, 64px) lying over the hero; the hero (`--size-hero`, 780px) with the tag, title, lead, two large buttons and a note at the bottom left and the reader's season card (`--size-card`, 400px) at the bottom right; the `.ds-subnav` strip; then decks: the news mosaic, the season pass (progress and a track of tier cards), the roadmap grid, the week's figures; the closing band; the footer in four columns.\n- Inner pages keep the top bar and the footer; the hero is left out. Each starts with `.ds-masthead`, a low picture (`--size-masthead`, 300px) that carries the breadcrumb and the `.ds-page-header` and ends in a 2px accent line. Below it one deck holds the working parts: `.ds-tabs` or notices across the top, then `.ds-columns` (flexible column beside `--size-aside`, 360px) or a `.ds-split` (`--wide` is 3 to 2).\n- Views: `home`; `season` (tabs by track, the tier table with an item tooltip, pagination, an item window, display switches); `news` (the patch notes, the list of posts, topics, links); `community` (crews recruiting with avatars, the accordion of rules, the empty crew slot, creators live); `account` (notices, the settings form with switches and buttons, the dialog that unlinks a platform, linked platforms).\n- Spacing scale: `--space-1` 4px (label to bar, tag), `--space-2` 8px (small gaps), `--space-3` 12px (between buttons and tier cards), `--space-4` 16px (between tiles, inside small boxes), `--space-5` 24px (between decks and columns, panel padding), `--space-6` 36px (deck padding, gutters), `--space-7` 56px (hero and band padding, the star grid), `--space-8` 88px (the accent line on a deck).\n- Control heights: `--size-control-small` 30px, `--size-control` 42px, `--size-control-large` 56px. `--size-tile` 230px is a row of the mosaic, `--size-tier` 168px a tier card, `--size-cut` 20px a cut corner or bracket.\n- On a tablet or phone (1100px and below) the bar wraps: the brand and `.ds-nav__end` on the first row, `.ds-nav__links` below as one row that scrolls sideways, with the items of the menu flattened into it (its caret is hidden), the row fading at the right edge and the link of the open view moved to the front on the later views. At 700px and below `.ds-subnav` and `.ds-tabs` scroll sideways too, and `.ds-subnav__note` is hidden; 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 ruled page ground. `.ds-wrap` is the content column of the hero, mastheads, subnav and footer.\n- `.ds-nav`: the clear top bar: the brand, then `.ds-nav__links` of `.ds-nav__link` straight after it (the current one fully opaque with a line of `--color-accent-alt` under it; `is-current`, or in the specimen one selector per view), and `.ds-nav__end` with a `.ds-nav__status` lamp and one small primary button. One item is a `.ds-menu`.\n- `.ds-brand`: `.ds-brand__mark`, a 36px 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 season's picture, a `.ds-scene` whose `.ds-wrap` holds `.ds-hero__copy` (a `.ds-tag`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`, `.ds-hero__note`) and, at the right, a panel with `.ds-hero__card` that blurs the picture behind it.\n- `.ds-scene`: the drawn picture, used for the hero, mastheads and news tiles. Nine empty spans in this order: `.ds-scene__sky`, `.ds-scene__world` (the ringed world), `.ds-scene__far` (a skyline), `.ds-scene__beam`, `.ds-scene__spires`, `.ds-scene__haze`, `.ds-scene__floor` (lines to a vanishing point), `.ds-scene__near` (rocks and a lone figure), `.ds-scene__shade` (darkens the left for the text). Variants `.ds-scene--2`, `--3`, `--4`.\n- `.ds-tag`: a slanted label on `--fill-accent`.\n- `.ds-subnav`: the strip under the hero on `--fill-bar`: numbered `.ds-subnav__link`s and a `.ds-subnav__note` at the right.\n- `.ds-masthead`: the low scene 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-decks`: the column of slabs; `.ds-deck` one slab (`--alt` in `--color-surface`) with a short accent line on its top edge and a `.ds-deck__head`: `.ds-deck__index` (a number), `.ds-deck__title`, `.ds-deck__more` (a link at the right).\n- `.ds-mosaic`: the news tiles: a `.ds-tile` is a scene with a badge, `.ds-tile__title` and `.ds-tile__meta` at its foot; `.ds-tile--lead` is two rows tall, `.ds-tile--wide` two columns wide; `is-hover` lights its edge.\n- `.ds-pass`: the pass progress beside its button. `.ds-carousel`: the track of tiers: `.ds-carousel__stage` scrolls sideways inside itself with scroll snapping and holds `.ds-carousel__slide` cards (`.ds-carousel__tier`, a square avatar, an item name; `is-claimed`, `is-current`, `is-locked`); `.ds-carousel__foot` holds a caption, `.ds-carousel__dots` of `.ds-carousel__dot` and `.ds-carousel__arrows` with two `.ds-carousel__arrow`s (`--next`).\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 flat plate, 42px high, with a small lit tick in its top right corner. `.ds-button--secondary`; `.ds-button--danger` (secondary plate, danger ink and edge); `.ds-button--large` (56px); `.ds-button--small` (30px). States `is-hover` (ring and glow 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` (180px; 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). Used for settings and display options.\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` (monospace), a `.ds-list__body` (`.ds-list__title`, `.ds-list__text`, `.ds-list__meta`) and perhaps a badge. `.ds-list--tight` is the dense form.\n- `.ds-panel`: a box with a bracket in `--color-accent-alt` on its top left corner: `.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` over a monospace `.ds-stat__label`, with a 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` with a heavier top edge; `.ds-grid__cell--2`, `--3`, `--4`. Inside: `.ds-grid__when` (a monospace date), `.ds-grid__title`, `.ds-grid__text`, a badge; `.ds-grid__icon` and `.ds-grid__more` are available.\n- `.ds-tabs`: text tabs on a rule; `.ds-tabs__tab`, `is-current` underlined in the accent; `.ds-tabs__count` a round counter.\n- `.ds-badge`: a round-ended label in `--fill-accent`; `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, `.ds-badge--quiet`, `.ds-badge--new`. `.ds-badges` is a row; `.ds-dot` with `--success`, `--warning`, `--danger` a lamp.\n- `.ds-item`: an item name in its rarity colour: plain, `--uncommon`, `--rare`, `--epic`, `--legendary`, `--set`.\n- `.ds-tooltip`: the item window: a trigger wrapping a `.ds-tooltip__tip` shown on hover or focus (`is-open`, `.ds-tooltip--end`), with `.ds-tooltip__name` and `.ds-tooltip__line` rows (`--bonus`, `--muted`, `--lore`). `.ds-tooltip--card` writes the window into the page.\n- `.ds-progress`: a thin track with a `.ds-progress__bar`; width by `--10` to `--100`, colour by `--health`, `--xp`, `--rep`, `--danger`; `.ds-progress__label` above.\n- `.ds-avatar`: a round emblem (inline SVG) on a `--color-surface-strong` disc; `.ds-avatar--small`, `.ds-avatar--large`; `--1` to `--4` colour it. In a tier card it is square.\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 360px one. `.ds-sidebar`: a box of the narrow column: `.ds-sidebar__title`, a `.ds-sidebar__list` of `.ds-sidebar__item` rows with a `.ds-sidebar__link` and `.ds-sidebar__meta`.\n- `.ds-notice`: a ruled message with `.ds-notice__title` and `.ds-notice__text`; `.ds-notice--error`. `.ds-notices` stacks several.\n- `.ds-pagination`: `.ds-pagination__link`; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: a monospace 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`, a slab with cut corners: `.ds-band__title`, `.ds-band__text` and an inline form. At most one per page.\n- `.ds-footer`: the closing band in `--fill-bar-alt`: `.ds-footer__about` (a home link and `.ds-footer__note`) and three columns, each a monospace `.ds-footer__title` over `.ds-footer__links` of `.ds-footer__link`.\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-width <= 2px`: lines are hairlines; only the focus ring is 2px.\n- `box-shadow-blur <= 80px`: the longest shadow is the dialog's.\n- `animation = none`: nothing moves by itself; only hovers ease.\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-deck` with a numbered head; never a free-floating card on the page ground, and never text on it. A box inside a deck is a `.ds-panel` with its bracket; a picture is a `.ds-scene` with its nine spans and, for another light, a variant built from one fill colour. Label machine-like facts (dates, counts, indexes) in the monospace and everything a person would say in the sans. Keep the rule for text on fills and keep rarity and status colours as ink. Do not add images, carved frames, serif type, a second accent or movement.\n",
    "components.css": "/* Layout tokens (structure part). The hub of a live game, 2019 to today:\n   a clear top bar over a full-bleed picture with the season's title set\n   left, a strip of anchors, then decks of the sheet colour laid on the\n   page ground: a news mosaic, the season pass track, a roadmap, community. */\n:root {\n  --size-page: 1320px;\n  --size-nav: 64px;\n  --size-hero: 780px;\n  --size-masthead: 300px;\n  --size-brand: 36px;\n  --size-hair: 1px;\n  --size-cut: 20px;\n  --size-control: 42px;\n  --size-control-small: 30px;\n  --size-control-large: 56px;\n  --size-icon: 18px;\n  --size-dot: 8px;\n  --size-crest: 48px;\n  --size-crest-large: 96px;\n  --size-bar: 8px;\n  --size-label: 180px;\n  --size-field-short: 220px;\n  --size-textarea: 110px;\n  --size-dialog: 460px;\n  --size-tip: 300px;\n  --size-menu: 230px;\n  --size-switch: 44px;\n  --size-stat: 170px;\n  --size-card: 400px;\n  --size-tile: 230px;\n  --size-tier: 168px;\n  --size-play: 72px;\n  --size-aside: 360px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 36px;\n  --space-7: 56px;\n  --space-8: 88px;\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--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.ds-item--uncommon { color: var(--color-success); }\n.ds-item--rare { color: var(--color-fill-1); }\n.ds-item--epic { color: var(--color-fill-2); }\n.ds-item--legendary { color: var(--color-fill-3); }\n\n/* ---------- tooltip: the item window ---------- */\n.ds-tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 30;\n  display: none;\n  width: var(--size-tip);\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n  right: 0;\n  left: auto;\n}\n.ds-tooltip--card {\n  display: block;\n  cursor: default;\n}\n.ds-tooltip--card .ds-tooltip__tip {\n  position: static;\n  display: block;\n  width: auto;\n  max-width: var(--size-tip);\n}\n.ds-tooltip__name {\n  display: block;\n  margin-bottom: var(--space-2);\n  padding-bottom: var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  line-height: var(--line-heading);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tooltip__line {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-tooltip__line--bonus { color: var(--color-success); }\n.ds-tooltip__line--muted { color: var(--color-text-muted); }\n.ds-tooltip__line--lore {\n  margin-top: var(--space-2);\n  padding-top: var(--space-2);\n  color: var(--color-heading-alt);\n  font-style: italic;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- progress ---------- */\n.ds-progress {\n  display: block;\n  height: var(--size-bar);\n  overflow: hidden;\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background: var(--fill-accent);\n}\n.ds-progress--40 .ds-progress__bar { width: 40%; }\n.ds-progress--75 .ds-progress__bar { width: 75%; }\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 over the picture, everything set left ---------- */\n.ds-nav {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-6);\n  background: color-mix(in srgb, var(--color-bar-alt) 55%, 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  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-nav);\n  padding: 0 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: var(--heading-tracking);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.7;\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(#season:target) .ds-nav__link[href=\"#season\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#community:target) .ds-nav__link[href=\"#community\"],\n.ds-page:has(#account:target) .ds-nav__link[href=\"#account\"],\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  opacity: 1;\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent-alt);\n}\n.ds-nav__end {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-nav__status {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n\n/* ---------- brand ---------- */\n.ds-brand {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-brand);\n  height: var(--size-brand);\n  padding: var(--space-2);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button), var(--color-shadow) 60%);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- buttons of this pack: a lit tick in the top right corner ---------- */\n.ds-button {\n  position: relative;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-button::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-2);\n  height: var(--space-2);\n  background: linear-gradient(225deg, currentColor 50%, transparent 50%);\n  opacity: 0.85;\n}\n.ds-button.is-disabled::after,\n.ds-button:disabled::after {\n  display: none;\n}\n\n/* ---------- scene: the key art, spires under a ringed world ----------\n   Ground and silhouettes are the alternate bar colour mixed toward the\n   shadow colour; the horizon, the beam and the seams of light are the\n   accent; the world is lit in the alternate bar text colour. */\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__world,\n.ds-scene__far,\n.ds-scene__beam,\n.ds-scene__spires,\n.ds-scene__haze,\n.ds-scene__floor,\n.ds-scene__near,\n.ds-scene__shade {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.ds-scene__sky {\n  background:\n    radial-gradient(ellipse 80% 34% at 62% 74%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 70%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent) 1%, transparent 2%) 0 0 / calc(var(--space-7) * 1.5) calc(var(--space-7) * 1.1),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 45%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 45%, transparent) 0.7%, transparent 1.5%) var(--space-5) var(--space-6) / calc(var(--space-7) * 2.2) calc(var(--space-7) * 1.7),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%) 0, var(--color-bar-alt) 40%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 34%) 74%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 40%) 100%);\n}\n/* the world: a lit crescent with a ring across it */\n.ds-scene__world {\n  background:\n    radial-gradient(circle at 80.5% 31%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 55%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 55%) 13%, transparent 15.5%),\n    radial-gradient(circle at 77% 26%, color-mix(in srgb, var(--color-bar-alt-text), var(--color-accent) 12%) 0, color-mix(in srgb, var(--color-bar-alt-text), var(--color-accent) 40%) 12%, color-mix(in srgb, var(--color-accent) 40%, transparent) 14.6%, color-mix(in srgb, var(--color-accent) 16%, transparent) 16%, transparent 30%);\n}\n.ds-scene__world::before {\n  content: \"\";\n  position: absolute;\n  top: 26%;\n  left: 77%;\n  width: 46%;\n  aspect-ratio: 5 / 1;\n  border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 70%, transparent);\n  border-bottom-color: color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n  border-radius: 50%;\n  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 22%, transparent);\n  transform: translate(-50%, -50%) rotate(-16deg);\n}\n.ds-scene__far {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 40%) 46%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 16%) 80%);\n  clip-path: polygon(0 100%, 0 66%, 3% 66%, 3% 61%, 6% 61%, 6% 64%, 9% 64%, 9% 56%, 10.5% 56%, 10.5% 63%, 15% 63%, 15% 59%, 18% 59%, 18% 65%, 24% 65%, 24% 60%, 25.5% 60%, 25.5% 52%, 27% 52%, 27% 62%, 32% 62%, 32% 66%, 38% 66%, 38% 61%, 41% 61%, 41% 57%, 43% 57%, 43% 64%, 48% 64%, 48% 60%, 52% 60%, 52% 66%, 57% 66%, 57% 58%, 58.5% 58%, 58.5% 63%, 72% 63%, 72% 59%, 75% 59%, 75% 65%, 80% 65%, 80% 55%, 81.5% 55%, 81.5% 61%, 86% 61%, 86% 64%, 91% 64%, 91% 58%, 94% 58%, 94% 63%, 100% 63%, 100% 100%);\n}\n/* a beam rising from the tallest spire */\n.ds-scene__beam {\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-accent-alt) 95%, transparent) 30%, transparent 96%) 65.5% 0 / calc(var(--size-hair) * 3) 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-accent) 50%, transparent) 30%, transparent 90%) 65.5% 0 / 2.2% 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-accent) 16%, transparent) 30%, transparent 80%) 65.5% 0 / 7% 100% no-repeat;\n}\n.ds-scene__spires {\n  background:\n    linear-gradient(to top, transparent 22%, color-mix(in srgb, var(--color-accent-alt) 90%, transparent) 40%, transparent 78%) 65.5% 0 / calc(var(--size-hair) * 2) 100% no-repeat,\n    linear-gradient(to top, transparent 24%, color-mix(in srgb, var(--color-accent) 90%, transparent) 36%, transparent 60%) 52.4% 0 / calc(var(--size-hair) * 2) 100% no-repeat,\n    linear-gradient(to top, transparent 24%, color-mix(in srgb, var(--color-accent) 90%, transparent) 34%, transparent 54%) 87.4% 0 / calc(var(--size-hair) * 2) 100% no-repeat,\n    linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 80%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 30%) 64%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 70%) 70%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 22%) 100%);\n  clip-path: polygon(49% 100%, 50% 46%, 51.4% 38%, 52.6% 34%, 53.6% 38%, 54.6% 48%, 55% 100%, 61% 100%, 62% 40%, 63.6% 22%, 64.6% 16%, 65.4% 10%, 66.2% 16%, 67.4% 23%, 68.8% 40%, 70% 100%, 84.6% 100%, 85.4% 52%, 86.6% 43%, 87.6% 39%, 88.4% 43%, 89.4% 53%, 90% 100%);\n}\n.ds-scene__haze {\n  background:\n    radial-gradient(ellipse 40% 9% at 66% 78%, color-mix(in srgb, var(--color-accent-alt) 50%, transparent), transparent 70%),\n    radial-gradient(ellipse 60% 8% at 30% 72%, color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent), transparent 70%),\n    radial-gradient(ellipse 50% 6% at 84% 68%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);\n}\n/* the floor: lines running to a vanishing point under the beam */\n.ds-scene__floor {\n  top: 78%;\n  background:\n    linear-gradient(color-mix(in srgb, var(--color-accent) 55%, transparent), color-mix(in srgb, var(--color-accent) 55%, transparent)) 0 0 / 100% var(--size-hair) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 40%, transparent), color-mix(in srgb, var(--color-accent) 40%, transparent)) 0 12% / 100% var(--size-hair) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 30%, transparent), color-mix(in srgb, var(--color-accent) 30%, transparent)) 0 32% / 100% var(--size-hair) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 22%, transparent), color-mix(in srgb, var(--color-accent) 22%, transparent)) 0 64% / 100% var(--size-hair) no-repeat,\n    repeating-conic-gradient(from 90deg at 65.5% -8%, color-mix(in srgb, var(--color-accent) 36%, transparent) 0deg, color-mix(in srgb, var(--color-accent) 36%, transparent) 0.3deg, transparent 0.3deg, transparent 7.5deg),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 14%), color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 70%));\n}\n/* rocks at both edges and a lone figure on the floor */\n.ds-scene__near::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%);\n  clip-path: polygon(0 100%, 0 70%, 3% 66%, 7% 71%, 9% 68%, 13% 76%, 19% 82%, 27% 90%, 36% 100%, 82% 100%, 88% 92%, 92% 84%, 95% 86%, 97% 78%, 100% 74%, 100% 100%);\n}\n.ds-scene__near::after {\n  content: \"\";\n  position: absolute;\n  bottom: 9%;\n  left: 57.4%;\n  width: 3.4%;\n  height: 16%;\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 92%);\n  clip-path: polygon(40% 0, 58% 0, 62% 9%, 58% 15%, 74% 19%, 80% 36%, 100% 58%, 96% 62%, 76% 48%, 74% 60%, 82% 100%, 62% 100%, 54% 68%, 46% 68%, 40% 100%, 20% 100%, 26% 58%, 8% 92%, 0 88%, 20% 34%, 26% 19%, 42% 15%, 38% 9%);\n}\n.ds-scene__shade {\n  background:\n    linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 80%) 0, color-mix(in srgb, var(--color-bar-alt) 60%, transparent) 34%, transparent 62%),\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 80%) 0, transparent 26%);\n}\n/* other lights: each takes one of the fill colours */\n.ds-scene--2 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 80% 34% at 62% 74%, color-mix(in srgb, var(--color-fill-1) 60%, transparent), transparent 70%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent) 1%, transparent 2%) 0 0 / calc(var(--space-7) * 1.5) calc(var(--space-7) * 1.1),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%) 0, var(--color-bar-alt) 40%, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-1) 36%) 74%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 40%) 100%);\n}\n.ds-scene--2 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-1) 34%);\n}\n.ds-scene--2 .ds-scene__beam {\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 30%, transparent 96%) 65.5% 0 / calc(var(--size-hair) * 3) 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-1) 55%, transparent) 30%, transparent 90%) 65.5% 0 / 2.2% 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-1) 18%, transparent) 30%, transparent 80%) 65.5% 0 / 7% 100% no-repeat;\n}\n.ds-scene--3 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 80% 40% at 62% 74%, color-mix(in srgb, var(--color-fill-3) 70%, transparent), transparent 70%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 50%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 16%) 40%, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 44%) 74%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 40%) 100%);\n}\n.ds-scene--3 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-3) 34%);\n}\n.ds-scene--3 .ds-scene__beam {\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 30%, transparent 96%) 65.5% 0 / calc(var(--size-hair) * 3) 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-3) 55%, transparent) 30%, transparent 90%) 65.5% 0 / 2.2% 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-3) 18%, transparent) 30%, transparent 80%) 65.5% 0 / 7% 100% no-repeat;\n}\n.ds-scene--4 .ds-scene__sky {\n  background:\n    radial-gradient(ellipse 80% 34% at 62% 74%, color-mix(in srgb, var(--color-fill-4) 55%, transparent), transparent 70%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent) 1%, transparent 2%) 0 0 / calc(var(--space-7) * 1.5) calc(var(--space-7) * 1.1),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%) 0, var(--color-bar-alt) 40%, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-4) 32%) 74%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 40%) 100%);\n}\n.ds-scene--4 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-4) 30%);\n}\n.ds-scene--4 .ds-scene__beam {\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 30%, transparent 96%) 65.5% 0 / calc(var(--size-hair) * 3) 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-4) 55%, transparent) 30%, transparent 90%) 65.5% 0 / 2.2% 100% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-4) 18%, transparent) 30%, transparent 80%) 65.5% 0 / 7% 100% no-repeat;\n}\n\n/* ---------- hero: the season's picture, the title set left ---------- */\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 var(--space-7);\n}\n.ds-hero > .ds-wrap {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-card);\n  gap: var(--space-7);\n  align-items: end;\n}\n.ds-hero__copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n  max-width: 62ch;\n}\n.ds-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-3);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  clip-path: polygon(0 0, 100% 0, calc(100% - var(--space-3)) 100%, 0 100%);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: min(calc(var(--text-display) * 1.6), 13vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n  overflow-wrap: anywhere;\n}\n.ds-hero__lead {\n  margin: 0;\n  font-size: var(--text-large);\n  text-shadow: var(--shadow-text);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin-top: var(--space-2);\n}\n.ds-hero__note {\n  margin: 0;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  opacity: 0.75;\n}\n.ds-hero__card {\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\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/* ---------- subnav: the strip of anchors under the picture ---------- */\n.ds-subnav {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-subnav > .ds-wrap {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 var(--space-5);\n}\n.ds-subnav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n}\n.ds-subnav__link span {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.6;\n}\n.ds-subnav__note {\n  margin-left: auto;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n\n/* ---------- masthead: the low picture that starts an inner page ---------- */\n.ds-masthead {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--size-masthead);\n  padding: calc(var(--size-nav) + var(--space-5)) 0 var(--space-5);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent);\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-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), 13vw);\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  text-shadow: var(--shadow-text);\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-mono);\n}\n\n/* ---------- decks: slabs of the sheet colour laid on the page ground ---------- */\n.ds-decks {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  max-width: calc(var(--size-page) + var(--space-6) * 2 + var(--space-5) * 2);\n  margin: 0 auto;\n  padding: var(--space-5);\n}\n.ds-deck {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-6);\n  background: var(--color-canvas);\n  color: var(--color-text);\n  clip-path: polygon(0 0, calc(100% - var(--size-cut)) 0, 100% var(--size-cut), 100% 100%, var(--size-cut) 100%, 0 calc(100% - var(--size-cut)));\n}\n.ds-deck::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--space-8);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-deck--alt {\n  background: var(--color-surface);\n}\n.ds-deck__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-2) var(--space-4);\n  padding-bottom: var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-deck__index {\n  color: var(--color-heading-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-deck__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-deck__more {\n  margin-left: auto;\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: var(--heading-tracking);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-deck__more:hover {\n  color: var(--color-link-hover);\n}\n\n/* ---------- mosaic: one large news tile and three small ones ---------- */\n.ds-mosaic {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);\n  grid-auto-rows: minmax(var(--size-tile), auto);\n  gap: var(--space-4);\n}\n.ds-tile {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-tile:hover,\n.ds-tile.is-hover {\n  border-color: var(--color-accent-alt);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-tile--lead {\n  grid-row: span 2;\n}\n.ds-tile--wide {\n  grid-column: span 2;\n}\n.ds-tile > .ds-badge,\n.ds-tile__title,\n.ds-tile__meta {\n  position: relative;\n  z-index: 2;\n  align-self: flex-start;\n}\n.ds-tile > .ds-scene__shade {\n  background: linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 80%) 0, color-mix(in srgb, var(--color-bar-alt) 50%, transparent) 46%, transparent 80%);\n}\n.ds-tile__title {\n  margin: 0;\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-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-tile--lead .ds-tile__title {\n  font-size: var(--text-h1);\n}\n.ds-tile__meta {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n\n/* ---------- details of this pack on shared components ---------- */\n.ds-panel::before {\n  content: \"\";\n  position: absolute;\n  top: calc(var(--border-width) * -1);\n  left: calc(var(--border-width) * -1);\n  width: var(--size-cut);\n  height: var(--size-cut);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n  border-radius: var(--radius-panel) 0 0 0;\n  pointer-events: none;\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}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__body--flush {\n  padding: 0;\n}\n.ds-panel__foot {\n  padding: var(--space-3) var(--space-5);\n}\n.ds-stats {\n  gap: var(--space-4);\n}\n.ds-stat {\n  padding: 0 0 0 var(--space-4);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat:first-child {\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-stat__value {\n  font-size: var(--text-display);\n  line-height: var(--line-display);\n}\n.ds-stat__label {\n  margin-top: var(--space-2);\n  font-family: var(--font-mono);\n  font-weight: var(--weight-body);\n}\n.ds-grid {\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  align-items: flex-start;\n  border-top-width: var(--border-width-strong);\n}\n.ds-grid__when {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-grid__title {\n  font-size: var(--text-h2);\n}\n.ds-tabs {\n  gap: var(--space-5);\n  border-bottom-color: var(--color-border);\n}\n.ds-tabs__tab {\n  padding: 0;\n  background: transparent;\n  color: var(--color-link-quiet);\n  border: 0;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-tabs__tab:hover {\n  color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n  background: transparent;\n  color: var(--color-heading);\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n.ds-tabs__count {\n  padding: 0 var(--space-2);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-mono);\n  opacity: 1;\n}\n.ds-table thead tr {\n  background: var(--fill-bar);\n}\n.ds-table th {\n  background: transparent;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-avatar {\n  border-radius: 50%;\n}\n.ds-list__title {\n  font-size: var(--text-h3);\n}\n.ds-list__date {\n  flex: none;\n  width: var(--size-crest-large);\n  padding-top: var(--space-1);\n  color: var(--color-heading-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n\n/* ---------- pass: the season track, a carousel of tier cards ---------- */\n.ds-pass {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: var(--space-3) var(--space-5);\n  align-items: end;\n}\n.ds-carousel__stage {\n  display: flex;\n  gap: var(--space-3);\n  overflow-x: auto;\n  padding: var(--space-2) var(--space-1) var(--space-3);\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  position: relative;\n  display: flex;\n  flex: 0 0 var(--size-tier);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-4);\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  scroll-snap-align: start;\n}\n.ds-carousel__slide.is-claimed {\n  border-color: var(--color-success);\n}\n.ds-carousel__slide.is-current {\n  border-color: var(--color-accent-alt);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-carousel__slide.is-locked {\n  opacity: 0.6;\n}\n.ds-carousel__tier {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-carousel__slide .ds-avatar {\n  border-radius: var(--radius-control);\n}\n.ds-carousel__arrow {\n  position: static;\n  transform: none;\n}\n.ds-carousel__foot {\n  padding-top: var(--space-2);\n}\n.ds-carousel__arrows {\n  display: flex;\n  gap: var(--space-2);\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-5);\n  align-items: start;\n}\n.ds-columns > .ds-stack,\n.ds-split > .ds-stack {\n  gap: var(--space-5);\n}\n.ds-sidebar {\n  position: relative;\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  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-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n\n/* ---------- band: the closing call, in the opposite material ---------- */\n.ds-band {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5) var(--space-7);\n  align-items: center;\n  padding: var(--space-7) var(--space-6);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  clip-path: polygon(0 0, calc(100% - var(--size-cut)) 0, 100% var(--size-cut), 100% 100%, var(--size-cut) 100%, 0 calc(100% - var(--size-cut)));\n}\n.ds-band__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-band__text {\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-large);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n  padding: var(--space-7) 0 var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-footer > .ds-wrap {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n  gap: var(--space-6);\n}\n.ds-footer__about {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.6;\n}\n.ds-footer__links {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.8;\n}\n.ds-footer__link:hover {\n  opacity: 1;\n}\n.ds-footer__note {\n  margin: 0;\n  max-width: 44ch;\n  font-size: var(--text-small);\n  opacity: 0.65;\n}\n\n/* ---------- narrower windows ---------- */\n@media (max-width: 1100px) {\n  .ds-hero > .ds-wrap,\n  .ds-columns,\n  .ds-split,\n  .ds-split--wide,\n  .ds-band {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-mosaic {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-tile--lead {\n    grid-column: span 2;\n    grid-row: span 1;\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-nav__status {\n    display: none;\n  }\n}\n/* ---------- below the desktop width the bar wraps: brand and actions above, the sections below ---------- */\n@media (max-width: 1100px) {\n  .ds-nav {\n    flex-wrap: wrap;\n    gap: 0 var(--space-4);\n    padding: var(--space-2) var(--space-6) 0;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 1 0 100%;\n    min-width: 0;\n  }\n  .ds-nav__link {\n    min-height: var(--size-control);\n    padding: 0 var(--space-1);\n  }\n  .ds-nav__end {\n    margin-left: auto;\n  }\n  .ds-hero,\n  .ds-masthead {\n    padding-top: calc(var(--size-nav) + var(--size-control) + var(--space-6));\n  }\n}\n@media (max-width: 700px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-nav {\n    padding: var(--space-2) var(--space-4) 0;\n  }\n  .ds-hero {\n    padding-bottom: var(--space-5);\n  }\n  .ds-masthead {\n    min-height: 0;\n  }\n  .ds-decks {\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-2);\n  }\n  .ds-deck {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-band {\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-band__title,\n  .ds-stat__value {\n    font-size: var(--text-h1);\n  }\n  .ds-mosaic,\n  .ds-grid,\n  .ds-grid--two,\n  .ds-grid--three {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-tile--lead,\n  .ds-tile--wide {\n    grid-column: auto;\n  }\n  .ds-stats {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-5) var(--space-4);\n  }\n  .ds-pass {\n    grid-template-columns: minmax(0, 1fr);\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-subnav__note {\n    display: none;\n  }\n  .ds-footer > .ds-wrap {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-footer__about {\n    grid-column: span 2;\n  }\n  .ds-dialog__backdrop {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-tabs {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n  }\n  .ds-tabs > li {\n    flex: none;\n  }\n  .ds-tabs__tab {\n    white-space: nowrap;\n  }\n  .ds-table td a,\n  .ds-table .ds-item {\n    white-space: nowrap;\n  }\n  .ds-subnav > .ds-wrap {\n    flex-wrap: nowrap;\n    gap: 0 var(--space-4);\n    overflow-x: auto;\n  }\n  .ds-subnav__link {\n    flex: none;\n    white-space: nowrap;\n  }\n  .ds-subnav__link span {\n    display: none;\n  }\n}\n\n/* ---------- tablets and phones: the sections are one strip that scrolls sideways, the season's pages in line ---------- */\n@media (max-width: 1100px) {\n  .ds-nav__links {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--space-3);\n    margin: 0 calc(var(--space-6) * -1);\n    padding: 0 var(--space-7) 0 var(--space-6);\n    overflow-x: auto;\n    scrollbar-width: none;\n    -webkit-mask-image: linear-gradient(to right, var(--color-shadow) calc(100% - var(--space-7)), transparent);\n    mask-image: linear-gradient(to right, var(--color-shadow) calc(100% - var(--space-7)), transparent);\n  }\n  .ds-nav .ds-nav__links .ds-menu,\n  .ds-nav .ds-nav__links .ds-menu .ds-menu__list {\n    display: contents;\n  }\n  .ds-nav__links li {\n    flex: none;\n  }\n  .ds-nav__links .ds-menu__caret {\n    display: none;\n  }\n  .ds-nav__link,\n  .ds-nav .ds-nav__links .ds-menu__item {\n    white-space: nowrap;\n  }\n  .ds-nav .ds-nav__links .ds-menu__item {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--size-control);\n    padding: 0 var(--space-1);\n    background: none;\n    color: inherit;\n    font-size: var(--text-small);\n    opacity: 0.7;\n  }\n  .ds-page:has(#community:target) .ds-nav__links > li:has(> [href=\"#community\"]),\n  .ds-page:has(#account:target) .ds-nav__links > li:has(> [href=\"#account\"]) {\n    order: -1;\n  }\n}\n@media (max-width: 700px) {\n  .ds-nav__links {\n    margin: 0 calc(var(--space-4) * -1);\n    padding: 0 var(--space-7) 0 var(--space-4);\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 live game's hub, 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 class=\"ds-menu\">\n        <a class=\"ds-nav__link\" href=\"#season\">Season <span class=\"ds-menu__caret\">&#9662;</span></a>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#season\">Pass rewards</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#season\">This week</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#home\">Roadmap</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#community\">Community</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#account\">Account</a></li>\n    </ul>\n    <div class=\"ds-nav__end\">\n      <span class=\"ds-nav__status\"><span class=\"ds-dot ds-dot--success\"></span>Servers online</span>\n      <a class=\"ds-button ds-button--small\" href=\"#account\">Play free</a>\n    </div>\n  </header>\n\n  <main>\n\n    <section class=\"ds-view ds-view--home\" id=\"home\">\n      <div class=\"ds-scene ds-hero\" data-component=\"hero\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <div class=\"ds-hero__copy\">\n            <span class=\"ds-tag\">Season 07 is live</span>\n            <h1 class=\"ds-hero__title\">Glass horizon</h1>\n            <p class=\"ds-hero__lead\">The spires are awake and the ring is falling. Take a crew of three up the beam, break the seal at its top and bring back what the old world left burning.</p>\n            <div class=\"ds-hero__actions\">\n              <a class=\"ds-button ds-button--large\" href=\"#account\">Play free</a>\n              <a class=\"ds-button ds-button--large ds-button--secondary\" href=\"#season\">See the season</a>\n            </div>\n            <p class=\"ds-hero__note\">PC and console, cross-play and cross-save. Ends in 41 days.</p>\n          </div>\n          <div class=\"ds-panel ds-hero__card\">\n            <h2 class=\"ds-panel__title\">Your season <span class=\"ds-badge ds-badge--success\">Online</span></h2>\n            <div class=\"ds-panel__body ds-stack ds-stack--tight\">\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.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2l9 5v10l-9 5-9-5V7zM12 8v8M8 12h8\"/></svg></span><span><span class=\"ds-who__name\">Nine of Glass</span><span class=\"ds-who__meta\">Vanguard, crew Low Orbit</span></span></span>\n              <div>\n                <div class=\"ds-progress__label\"><strong>Pass tier 37</strong><span>4,200 of 10,000</span></div>\n                <span class=\"ds-progress ds-progress--40\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n              <div>\n                <div class=\"ds-progress__label\"><strong>Weekly raid</strong><span>3 of 4 seals</span></div>\n                <span class=\"ds-progress ds-progress--75 ds-progress--rep\"><span class=\"ds-progress__bar\"></span></span>\n              </div>\n            </div>\n            <div class=\"ds-panel__foot\"><span>2 rewards to claim</span><a class=\"ds-button ds-button--small\" href=\"#season\">Claim</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-subnav\">\n        <div class=\"ds-wrap\">\n          <a class=\"ds-subnav__link\" href=\"#news\"><span>01</span>Latest</a>\n          <a class=\"ds-subnav__link\" href=\"#season\"><span>02</span>Season pass</a>\n          <a class=\"ds-subnav__link\" href=\"#home\"><span>03</span>Roadmap</a>\n          <a class=\"ds-subnav__link\" href=\"#community\"><span>04</span>Community</a>\n          <span class=\"ds-subnav__note\">Weekly reset in 2 d 06 h</span>\n        </div>\n      </div>\n\n      <div class=\"ds-decks\">\n        <div class=\"ds-deck\">\n          <div class=\"ds-deck__head\"><span class=\"ds-deck__index\">01</span><h2 class=\"ds-deck__title\">Latest</h2><a class=\"ds-deck__more\" href=\"#news\">All news</a></div>\n          <div class=\"ds-mosaic\">\n            <a class=\"ds-scene ds-tile ds-tile--lead\" href=\"#news\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-badge\">Season 07</span><h3 class=\"ds-tile__title\">The beam opens: raid guide and first clears</h3><span class=\"ds-tile__meta\">8 Oct / 7 min read</span></a>\n            <a class=\"ds-scene ds-scene--2 ds-tile\" href=\"#news\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-badge ds-badge--quiet\">Patch</span><h3 class=\"ds-tile__title\">Update 7.0.2 notes</h3><span class=\"ds-tile__meta\">6 Oct / 4 min read</span></a>\n            <a class=\"ds-scene ds-scene--3 ds-tile\" href=\"#news\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-badge ds-badge--quiet\">Event</span><h3 class=\"ds-tile__title\">Ember week returns</h3><span class=\"ds-tile__meta\">3 Oct / 2 min read</span></a>\n            <a class=\"ds-scene ds-scene--4 ds-tile ds-tile--wide\" href=\"#news\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-badge ds-badge--quiet\">Dev letter</span><h3 class=\"ds-tile__title\">What we are changing about armour</h3><span class=\"ds-tile__meta\">29 Sep / 9 min read</span></a>\n          </div>\n        </div>\n\n        <div class=\"ds-deck ds-deck--alt\">\n          <div class=\"ds-deck__head\"><span class=\"ds-deck__index\">02</span><h2 class=\"ds-deck__title\">Season pass</h2><a class=\"ds-deck__more\" href=\"#season\">All 100 tiers</a></div>\n          <div class=\"ds-pass\">\n            <div>\n              <div class=\"ds-progress__label\"><strong>Tier 37 of 100</strong><span>4,200 of 10,000 to tier 38</span></div>\n              <span class=\"ds-progress ds-progress--40\"><span class=\"ds-progress__bar\"></span></span>\n            </div>\n            <a class=\"ds-button ds-button--secondary\" href=\"#season\">Upgrade the pass</a>\n          </div>\n          <div class=\"ds-carousel\">\n            <div class=\"ds-carousel__stage\">\n              <div class=\"ds-carousel__slide is-claimed\"><span class=\"ds-carousel__tier\">TIER 35</span><span class=\"ds-avatar ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z\"/></svg></span><span class=\"ds-item ds-item--rare\">Halo plate</span></div>\n              <div class=\"ds-carousel__slide is-claimed\"><span class=\"ds-carousel__tier\">TIER 36</span><span class=\"ds-avatar ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 2L5 14h6l-1 8 8-12h-6z\"/></svg></span><span class=\"ds-item ds-item--uncommon\">1,000 glint</span></div>\n              <div class=\"ds-carousel__slide is-current\"><span class=\"ds-carousel__tier\">TIER 37</span><span class=\"ds-avatar ds-avatar--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6c8 0 14 3 18 9-5-2-8-2-11 0 0-3-3-6-7-9zM10 15l-3 5\"/></svg></span><span class=\"ds-item ds-item--epic\">Ringfall cloak</span></div>\n              <div class=\"ds-carousel__slide\"><span class=\"ds-carousel__tier\">TIER 38</span><span class=\"ds-avatar ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l2.6 6.2 6.4.5-4.9 4.2 1.6 6.4L12 16.9 6.3 20.3l1.6-6.4L3 9.7l6.4-.5z\"/></svg></span><span class=\"ds-item ds-item--rare\">Seal emblem</span></div>\n              <div class=\"ds-carousel__slide\"><span class=\"ds-carousel__tier\">TIER 39</span><span class=\"ds-avatar ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 2L5 14h6l-1 8 8-12h-6z\"/></svg></span><span class=\"ds-item ds-item--uncommon\">1,500 glint</span></div>\n              <div class=\"ds-carousel__slide\"><span class=\"ds-carousel__tier\">TIER 40</span><span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2 12c3-5 6-7 10-7s7 2 10 7c-3 5-6 7-10 7s-7-2-10-7zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z\"/></svg></span><span class=\"ds-item ds-item--legendary\">Horizon, pulse rifle</span></div>\n              <div class=\"ds-carousel__slide is-locked\"><span class=\"ds-carousel__tier\">TIER 41</span><span class=\"ds-avatar ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2l9 5v10l-9 5-9-5V7zM12 8v8M8 12h8\"/></svg></span><span class=\"ds-item ds-item--rare\">Crew banner</span></div>\n              <div class=\"ds-carousel__slide is-locked\"><span class=\"ds-carousel__tier\">TIER 42</span><span class=\"ds-avatar ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 2L5 14h6l-1 8 8-12h-6z\"/></svg></span><span class=\"ds-item ds-item--uncommon\">2,000 glint</span></div>\n            </div>\n            <div class=\"ds-carousel__foot\">\n              <span>Tiers 35 to 42. Claimed tiers have a green edge; the lit one is next.</span>\n              <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span></span>\n              <span class=\"ds-carousel__arrows\"><a class=\"ds-carousel__arrow\" href=\"#home\">&#9664;</a><a class=\"ds-carousel__arrow ds-carousel__arrow--next\" href=\"#home\">&#9654;</a></span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"ds-deck\">\n          <div class=\"ds-deck__head\"><span class=\"ds-deck__index\">03</span><h2 class=\"ds-deck__title\">Roadmap</h2><a class=\"ds-deck__more\" href=\"#news\">Read the dev letter</a></div>\n          <div class=\"ds-grid\" data-component=\"grid\">\n            <div class=\"ds-grid__cell\"><span class=\"ds-grid__when\">NOW / S07</span><h3 class=\"ds-grid__title\">Glass horizon</h3><p class=\"ds-grid__text\">A new raid, the Drifter rework and forty pass rewards.</p><span class=\"ds-badge ds-badge--success\">Live</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__when\">NOV / 7.1</span><h3 class=\"ds-grid__title\">Ringfall trials</h3><p class=\"ds-grid__text\">Ranked three against three, with a ladder for each crew.</p><span class=\"ds-badge ds-badge--warning\">In testing</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\"><span class=\"ds-grid__when\">JAN / S08</span><h3 class=\"ds-grid__title\">Ember court</h3><p class=\"ds-grid__text\">A fourth class and the first city you can walk through.</p><span class=\"ds-badge ds-badge--quiet\">Planned</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\"><span class=\"ds-grid__when\">LATER</span><h3 class=\"ds-grid__title\">The far ring</h3><p class=\"ds-grid__text\">An expansion, announced in spring. Nothing more yet.</p><span class=\"ds-badge ds-badge--quiet\">Announced</span></div>\n          </div>\n        </div>\n\n        <div class=\"ds-deck ds-deck--alt\">\n          <div class=\"ds-deck__head\"><span class=\"ds-deck__index\">04</span><h2 class=\"ds-deck__title\">This week in orbit</h2><a class=\"ds-deck__more\" href=\"#community\">Find a crew</a></div>\n          <div class=\"ds-stats\" data-component=\"stats\">\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">184,220</span><span class=\"ds-stat__label\">runners online</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">12,904</span><span class=\"ds-stat__label\">raid clears</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">0:41:07</span><span class=\"ds-stat__label\">fastest clear</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">6,310</span><span class=\"ds-stat__label\">crews recruiting</span></div>\n          </div>\n        </div>\n\n        <div class=\"ds-band\">\n          <div>\n            <h2 class=\"ds-band__title\">Free to play. Yours to keep.</h2>\n            <p class=\"ds-band__text\">One account on every platform. Link it once and your crew, your pass and your vault follow you.</p>\n          </div>\n          <form class=\"ds-form ds-form--inline\" action=\"#home\">\n            <input class=\"ds-form__input\" type=\"text\" placeholder=\"E-mail for the season letter\" aria-label=\"E-mail for the season letter\">\n            <button class=\"ds-button ds-button--large\" type=\"button\">Sign up</button>\n          </form>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"season\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#season\">Season 07</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">Pass rewards</li>\n          </ol>\n          <div class=\"ds-page-header\" data-component=\"page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Season pass</h1>\n              <p class=\"ds-page-header__text\">One hundred tiers. The free track gives a reward on every second one.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#account\">Upgrade the pass</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-decks\">\n        <div class=\"ds-deck\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#season\">All tiers <span class=\"ds-tabs__count\">100</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#season\">Free track <span class=\"ds-tabs__count\">50</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#season\">Premium</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#season\">To claim <span class=\"ds-tabs__count\">2</span></a></li>\n          </ul>\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\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 class=\"is-numeric\">Tier</th><th>Reward</th><th>Track</th><th class=\"is-numeric\">Needs</th><th>State</th></tr></thead>\n                    <tbody>\n                      <tr><td class=\"is-numeric\">35</td><td><span class=\"ds-item ds-item--rare\">Halo plate</span><span class=\"ds-table__sub\">Chest armour</span></td><td>Free</td><td class=\"is-numeric\">340,000</td><td><span class=\"ds-badge ds-badge--success\">Claimed</span></td></tr>\n                      <tr><td class=\"is-numeric\">36</td><td><span class=\"ds-item ds-item--uncommon\">1,000 glint</span><span class=\"ds-table__sub\">Currency</span></td><td>Premium</td><td class=\"is-numeric\">350,000</td><td><span class=\"ds-badge ds-badge--warning\">To claim</span></td></tr>\n                      <tr class=\"is-own\"><td class=\"is-numeric\">37</td><td><span class=\"ds-tooltip\" tabindex=\"0\"><span class=\"ds-item ds-item--epic\">Ringfall cloak</span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name ds-item ds-item--epic\">Ringfall cloak</span><span class=\"ds-tooltip__line\"><span>Cloak</span><span>Ornament</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>Cut from what fell first.</span></span></span></span><span class=\"ds-table__sub\">Ornament</span></td><td>Free</td><td class=\"is-numeric\">360,000</td><td><span data-component=\"badge\"><span class=\"ds-badge\">Current</span></span></td></tr>\n                      <tr><td class=\"is-numeric\">38</td><td><span class=\"ds-item ds-item--rare\">Seal emblem</span><span class=\"ds-table__sub\">Emblem</span></td><td>Premium</td><td class=\"is-numeric\">370,000</td><td><span class=\"ds-badge ds-badge--quiet\">5,800 to go</span></td></tr>\n                      <tr><td class=\"is-numeric\">40</td><td><span class=\"ds-item ds-item--legendary\">Horizon</span><span class=\"ds-table__sub\">Pulse rifle</span></td><td>Free</td><td class=\"is-numeric\">390,000</td><td><span class=\"ds-badge ds-badge--danger\">Locked</span></td></tr>\n                    </tbody>\n                  </table>\n                </div>\n              </div>\n              <div class=\"ds-row ds-row--between\">\n                <span class=\"ds-muted\">Tiers 35 to 40 of 100</span>\n                <ul class=\"ds-pagination\" data-component=\"pagination\">\n                  <li><a class=\"ds-pagination__link\" href=\"#season\">Prev</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#season\">3</a></li>\n                  <li><span class=\"ds-pagination__link is-current\">4</span></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#season\">5</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#season\">Next</a></li>\n                </ul>\n              </div>\n            </div>\n            <aside class=\"ds-stack\">\n              <div class=\"ds-tooltip ds-tooltip--card\">\n                <span class=\"ds-tooltip__tip\">\n                  <span class=\"ds-tooltip__name ds-item ds-item--legendary\">Horizon</span>\n                  <span class=\"ds-tooltip__line\"><span>Pulse rifle</span><span>Tier 40</span></span>\n                  <span class=\"ds-tooltip__line\"><span>Impact</span><span>68</span></span>\n                  <span class=\"ds-tooltip__line\"><span>Range</span><span>81</span></span>\n                  <span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Third burst arcs to a second target</span></span>\n                  <span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Free track</span></span>\n                  <span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>Aim where the sky ends.</span></span>\n                </span>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">Show</h2>\n                <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Only what I can claim</span><span class=\"ds-switch__hint\">Hides locked and claimed tiers</span></span><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span></label>\n                <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Premium rewards</span><span class=\"ds-switch__hint\">Shown dimmed until you upgrade</span></span><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span></label>\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"news\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</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\">Update 7.0.2</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\">Patch notes, dev letters and events, newest first.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#account\">Get the season letter</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-decks\">\n        <div class=\"ds-deck\">\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\n              <div class=\"ds-prose\" data-component=\"typography\">\n                <h1>Update 7.0.2</h1>\n                <p class=\"ds-prose__lead\">A small patch for the raid's second seal and for crews that could not rejoin.</p>\n                <p>The update is live on every platform. It needs <strong>1.2 GB</strong> and does not reset the weekly raid.</p>\n                <h2>Fixed</h2>\n                <ul>\n                  <li>The second seal no longer stays closed when a runner leaves.</li>\n                  <li>Crews of three can rejoin after a lost connection.</li>\n                  <li>The Ringfall cloak keeps its shader after a fast travel.</li>\n                </ul>\n                <h3>For players with their own overlay</h3>\n                <p>The frame counter moved to the launch option <code>-hud.frames 1</code>.</p>\n              </div>\n              <ul class=\"ds-list\" data-component=\"list\">\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">08 OCT</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">The beam opens: raid guide and first clears</a><span class=\"ds-list__meta\">Guide / 7 min read</span></div><span class=\"ds-badge ds-badge--new\">New</span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">03 OCT</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">Ember week returns</a><span class=\"ds-list__meta\">Event / 2 min read</span></div></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">29 SEP</span><div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#news\">What we are changing about armour</a><span class=\"ds-list__meta\">Dev letter / 9 min read</span></div></li>\n              </ul>\n            </div>\n            <aside class=\"ds-stack\">\n              <div class=\"ds-sidebar\" data-component=\"sidebar\">\n                <h2 class=\"ds-sidebar__title\">Topics</h2>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Patch notes</a><span class=\"ds-sidebar__meta\">214</span></li>\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Dev letters</a><span class=\"ds-sidebar__meta\">38</span></li>\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#news\">Events</a><span class=\"ds-sidebar__meta\">61</span></li>\n                  <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#community\">Community</a><span class=\"ds-sidebar__meta\">97</span></li>\n                </ul>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">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=\"community\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#community\">Community</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">Crews</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Find a crew</h1>\n              <p class=\"ds-page-header__text\">The raid needs three. Crews recruit here; so can you.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#account\">Start a crew</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-decks\">\n        <div class=\"ds-deck\">\n          <div class=\"ds-split ds-split--wide\">\n            <div class=\"ds-stack\">\n              <div class=\"ds-panel\" data-component=\"panel\">\n                <h2 class=\"ds-panel__title\">Recruiting now <span class=\"ds-badge ds-badge--quiet\">6,310 crews</span></h2>\n                <div class=\"ds-panel__body\">\n                  <ul class=\"ds-list ds-list--tight\">\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2l9 5v10l-9 5-9-5V7zM12 8v8M8 12h8\"/></svg></span><span><span class=\"ds-who__name\">Low Orbit</span><span class=\"ds-who__meta\">Raid, evenings, voice</span></span></span></div><span class=\"ds-badge ds-badge--success\">2 of 3</span></li>\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l2.6 6.2 6.4.5-4.9 4.2 1.6 6.4L12 16.9 6.3 20.3l1.6-6.4L3 9.7l6.4-.5z\"/></svg></span><span><span class=\"ds-who__name\">Second Sunrise</span><span class=\"ds-who__meta\">Trials, ranked, no voice</span></span></span></div><span class=\"ds-badge ds-badge--success\">1 of 3</span></li>\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2 12c3-5 6-7 10-7s7 2 10 7c-3 5-6 7-10 7s-7-2-10-7zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z\"/></svg></span><span><span class=\"ds-who__name\">Quiet Hands</span><span class=\"ds-who__meta\">New players welcome</span></span></span></div><span class=\"ds-badge ds-badge--warning\">Applying</span></li>\n                    <li class=\"ds-list__item\"><div class=\"ds-list__body\"><span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6c8 0 14 3 18 9-5-2-8-2-11 0 0-3-3-6-7-9zM10 15l-3 5\"/></svg></span><span><span class=\"ds-who__name\">Ninth Ring</span><span class=\"ds-who__meta\">Speed clears only</span></span></span></div><span class=\"ds-badge ds-badge--danger\">Full</span></li>\n                  </ul>\n                </div>\n              </div>\n              <div class=\"ds-accordion\">\n                <details class=\"ds-accordion__item\" open>\n                  <summary class=\"ds-accordion__summary\">How crews work <span class=\"ds-accordion__meta\">3 runners</span></summary>\n                  <div class=\"ds-accordion__body\"><p>A crew holds three runners and a bench of three more. Its banner and its ladder rank belong to the crew, not to its founder.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">Playing across platforms</summary>\n                  <div class=\"ds-accordion__body\"><p>Any platform can join any crew. Voice works between all of them.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">Code of conduct</summary>\n                  <div class=\"ds-accordion__body\"><p>Be someone you would want on your own crew.</p></div>\n                </details>\n              </div>\n            </div>\n            <div 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.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2l9 5v10l-9 5-9-5V7zM12 8v8M8 12h8\"/></svg></span>\n                <h3 class=\"ds-empty__title\">You have no crew yet</h3>\n                <p class=\"ds-empty__text\">Apply to one on the left or start your own. Invitations you receive will show here.</p>\n                <a class=\"ds-button ds-button--secondary\" href=\"#account\">Start a crew</a>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">Creators live</h2>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 2L5 14h6l-1 8 8-12h-6z\"/></svg></span><span><span class=\"ds-who__name\">vantablue</span><span class=\"ds-who__meta\">Raid, day one race</span></span></span><span class=\"ds-sidebar__meta\">4.1k</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l2.6 6.2 6.4.5-4.9 4.2 1.6 6.4L12 16.9 6.3 20.3l1.6-6.4L3 9.7l6.4-.5z\"/></svg></span><span><span class=\"ds-who__name\">orbit_decay</span><span class=\"ds-who__meta\">Trials practice</span></span></span><span class=\"ds-sidebar__meta\">1.8k</span></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"account\">\n      <div class=\"ds-scene ds-masthead\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__world\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__beam\"></span><span class=\"ds-scene__spires\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__floor\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__shade\"></span>\n        <div class=\"ds-wrap\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#account\">Account</a></li>\n            <li class=\"ds-breadcrumb__sep\">/</li>\n            <li class=\"ds-breadcrumb__current\">Settings</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Account</h1>\n              <p class=\"ds-page-header__text\">Your runner name, linked platforms and what we may send you.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#community\">View public profile</a></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-decks\">\n        <div class=\"ds-deck\">\n          <div class=\"ds-notices\" data-component=\"notice\">\n            <div class=\"ds-notice\"><p class=\"ds-notice__title\">Cross-save is on</p><p class=\"ds-notice__text\">Progress follows this account to every linked platform.</p></div>\n            <div class=\"ds-notice ds-notice--error\"><p class=\"ds-notice__title\">One platform could not be reached</p><p class=\"ds-notice__text\">The console link expired. Sign in there again to restore it.</p></div>\n          </div>\n          <div class=\"ds-split ds-split--wide\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#account\">\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"s-name\">Runner name</label>\n                <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"s-name\" type=\"text\" value=\"Nine of Glass\"></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"s-mail\">E-mail</label>\n                <div class=\"ds-form__field\">\n                  <input class=\"ds-form__input is-error\" id=\"s-mail\" type=\"text\" value=\"nine@glass\">\n                  <p class=\"ds-form__error\">Enter a full address, for example name@example.org.</p>\n                </div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"s-region\">Region</label>\n                <div class=\"ds-form__field\"><select class=\"ds-form__select\" id=\"s-region\"><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=\"s-bio\">About you</label>\n                <div class=\"ds-form__field\">\n                  <textarea class=\"ds-form__textarea\" id=\"s-bio\">Vanguard main. Raids on weekday evenings.</textarea>\n                  <p class=\"ds-form__hint\">Shown on your public profile.</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\">Cross-save</span><span class=\"ds-switch__hint\">Keep one runner on every platform</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\">Season letter</span><span class=\"ds-switch__hint\">One e-mail at the start of each season</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\">Show me as online</span><span class=\"ds-switch__hint\">Crews can see when you play</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> I am over sixteen</label>\n                </div>\n              </div>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"button\">Save changes</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#home\">Cancel</a>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Change name (30 days)</button>\n                <span class=\"ds-form__actions-end\"><button class=\"ds-button ds-button--danger\" type=\"button\">Unlink console</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 the console?</span><a class=\"ds-dialog__close\" href=\"#account\">x</a></h2>\n                  <div class=\"ds-dialog__body\">\n                    <p class=\"ds-dialog__text\">Purchases made there stay there. You can link a platform again after ninety days.</p>\n                    <div class=\"ds-dialog__actions\">\n                      <a class=\"ds-button ds-button--secondary\" href=\"#account\">Keep it linked</a>\n                      <a class=\"ds-button ds-button--danger\" href=\"#account\">Unlink</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">Linked platforms</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\">PC</span><span class=\"ds-sidebar__meta\">Linked</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--danger\"></span><span class=\"ds-sidebar__link\">Console</span><span class=\"ds-sidebar__meta\">Expired</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot\"></span><span class=\"ds-sidebar__link\">Handheld</span><span class=\"ds-sidebar__meta\">Not linked</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      <div class=\"ds-footer__about\">\n        <a class=\"ds-nav__link is-current\" href=\"#home\">chronoskin home</a>\n        <p class=\"ds-footer__note\">chronoskin is a specimen site. Free to play; the pass sells looks and time, never strength.</p>\n      </div>\n      <div><h2 class=\"ds-footer__title\">GAME</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#season\">Season pass</a></li><li><a class=\"ds-footer__link\" href=\"#home\">Roadmap</a></li><li><a class=\"ds-footer__link\" href=\"#news\">Patch notes</a></li></ul></div>\n      <div><h2 class=\"ds-footer__title\">COMMUNITY</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#community\">Crews</a></li><li><a class=\"ds-footer__link\" href=\"#community\">Creators</a></li><li><a class=\"ds-footer__link\" href=\"#community\">Code of conduct</a></li></ul></div>\n      <div><h2 class=\"ds-footer__title\">ACCOUNT</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#account\">Settings</a></li><li><a class=\"ds-footer__link\" href=\"#account\">Link a platform</a></li><li><a class=\"ds-footer__link\" href=\"#account\">Support</a></li></ul></div>\n    </div>\n  </footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.game-fantasy.portal.s06.p07.t07.u07\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"game-fantasy\",\n    \"years\": [\n      2004,\n      2026\n    ]\n  },\n  \"archetype\": \"portal\",\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-6777\",\n  \"short\": \"v1-gf-6777\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #e9f1f9;\n  --color-canvas: #ffffff;\n  --color-surface: #fcfdff;\n  --color-surface-alt: #f2f7fc;\n  --color-surface-strong: #e2ecf6;\n  --color-bar: #d9e7f5;\n  --color-bar-text: #27456b;\n  --color-bar-alt: #cfe3f5;\n  --color-bar-alt-text: #213a5e;\n  --color-inverse: #2b3f63;\n  --color-inverse-text: #f7f2e3;\n  --color-text: #47546b;\n  --color-text-muted: #7c889d;\n  --color-heading: #24334e;\n  --color-heading-alt: #98742a;\n  --color-link: #2c6fb3;\n  --color-link-quiet: #64738b;\n  --color-link-visited: #7862a6;\n  --color-link-hover: #1a4c86;\n  --color-link-active: #c0506b;\n  --color-border: #d5dfea;\n  --color-border-strong: #cbab62;\n  --color-border-muted: #e7edf4;\n  --color-accent: #cf5873;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #c2932f;\n  --color-fill-1: #2f7fd0;\n  --color-fill-2: #8a5bd0;\n  --color-fill-3: #c9781a;\n  --color-fill-4: #1f9a8a;\n  --color-button: #ecc766;\n  --color-button-text: #3b2d0d;\n  --color-button-hover-text: #261c05;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #2f4a70;\n  --color-input: #ffffff;\n  --color-input-text: #24334e;\n  --color-input-border: #b7c6d7;\n  --color-disabled: #edf1f5;\n  --color-disabled-text: #99a5b4;\n  --color-danger: #c6354a;\n  --color-danger-surface: #fdecee;\n  --color-success: #2c965c;\n  --color-warning: #b57710;\n  --color-notice: #eaf3fc;\n  --color-notice-text: #27507f;\n  --color-focus: #4a90d9;\n  --color-shadow: #5c7ba8;\n  --color-overlay: rgba(52, 76, 112, 0.46);\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: 1px;\n  --border-style: solid;\n  --radius-control: 22px;\n  --radius-panel: 16px;\n  --radius-pill: 999px;\n  --radius-page: 28px;\n  --shadow-panel: 0 0 0 4px color-mix(in srgb, white 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--color-border-strong) 55%, transparent), 0 22px 44px -22px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n  --shadow-control: 0 8px 16px -8px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n  --shadow-control-hover: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 12px 24px -10px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, var(--color-shadow) 32%, transparent);\n  --shadow-dialog: 0 0 0 6px color-mix(in srgb, white 60%, transparent), 0 0 0 7px color-mix(in srgb, var(--color-border-strong) 70%, transparent), 0 40px 80px -30px var(--color-shadow);\n  --shadow-text: 0 1px 12px color-mix(in srgb, var(--color-shadow) 30%, transparent);\n  --fill-page: radial-gradient(circle, color-mix(in srgb, white 90%, transparent) 0, color-mix(in srgb, white 90%, transparent) 1.5px, transparent 2px) 0 0 / 26px 26px, linear-gradient(to bottom, var(--color-page) 0, color-mix(in srgb, var(--color-page), white 45%) 100%);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 55%) 0, var(--color-bar) 100%);\n  --fill-bar-alt: radial-gradient(ellipse 70% 46% at 50% 108%, color-mix(in srgb, white 75%, transparent) 0, transparent 70%), linear-gradient(to bottom, var(--color-bar-alt) 0, color-mix(in srgb, var(--color-bar-alt), white 42%) 100%);\n  --fill-inverse: linear-gradient(135deg, var(--color-inverse) 30%, color-mix(in srgb, var(--color-inverse), var(--color-accent) 30%) 100%);\n  --fill-accent: linear-gradient(135deg, color-mix(in srgb, var(--color-accent), white 22%) 0, var(--color-accent) 100%);\n  --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 70%) 0, var(--color-surface) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 34%) 0, var(--color-button) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 52%) 0, color-mix(in srgb, var(--color-button), white 14%) 100%);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}