{
  "id": "v1-gf-6665",
  "long_id": "v1.game-fantasy.portal.s06.p06.t06.u05",
  "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-6665",
  "preview_url": "https://chrono.skin/s/v1-gf-6665/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` and `--font-ui` are a bold condensed sans (Barlow Condensed where installed, else Oswald, Roboto Condensed, Arial Narrow), always in capitals, for titles, navigation, buttons, table heads and badges. `--font-body` is a plain sans (Inter, Roboto, Segoe UI). `--font-mono` labels things the way a game's interface does: breadcrumbs, dates, indexes, tier numbers, figure labels.\n- Sizes: `--text-base` 15px at `--line-body` 1.55; `--text-small` 12px; `--text-ui` 16px; `--text-large` 18px; `--text-h3` 20px, `--text-h2` 27px, `--text-h1` 40px for deck titles; `--text-display` 60px for mastheads, figures and the band. The hero title is 1.6 times the display size, capped by the window width.\n- Palette: gunmetal black page and sheet, three graphite surfaces, a lighter steel bar with white lettering, near-black for pictures and footer (`--color-bar-alt`), cool grey text under white headings, and one electric violet for the accent, links, the primary button and every light in the key art; `--color-accent-alt` is its pale spark. The inverse block is white.\n- Surface: hairline borders, corners of 2px to 6px and fully round badges, panels that let a little of what is behind them through and blur it (`--fill-panel`, `--backdrop-blur` 14px, used by the top bar and the hero card), a page ruled as a 48px grid (`--fill-page`), a violet ring and glow on hover and around the dialog, hover easing over 0.15s.\n- The era's rule for text on fills is kept: on `--color-canvas` and the three surfaces (and `--fill-panel`) text is `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours; on `--fill-bar` only `--color-bar-text` (the subnav, 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, tile titles; 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: item names by rarity, crests, status badges on a 16% tint of themselves, roadmap cells as the surface tinted 24% by their fill, progress bars, the edge of a claimed or current tier. Never a fill under text.\n- The key art (`.ds-scene`): silhouettes are `--color-bar-alt` mixed toward `--color-shadow`; the horizon, the beam, the seams of the spires and the floor lines are `--color-accent`; the ringed world is rimmed in `--color-bar-alt-text`; `.ds-scene--2`, `--3` and `--4` light the sky and the beam with `--color-fill-1`, `--color-fill-3` and `--color-fill-4`. Every palette repaints it.\n- One-off values built in `components.css` from tokens: the mixes named above, percentages in `clip-path` polygons and gradients, `50%` radius for avatars and lamps, 45 degree turns for diamonds, `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 >= 12px`: monospace labels are the smallest text.\n- `font-size <= 96px`: the hero title is the largest text.\n- `font-families <= 3`: a condensed sans, a plain sans and a monospace.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `letter-spacing <= 1.2px`: capitals are tracked by a fiftieth of their size, 1.2px at the display size.\n- `underlined-links <= 5%`: links are told apart by the violet; only a hovered link is underlined.\n- `border-radius <= 2px`: everything is square; only badges are eased by 2px, and lamps and the play button are round.\n- `border-width <= 2px`: borders are hairlines.\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.p06.t06.u05\",\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-6665\",\n  \"short\": \"v1-gf-6665\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #0c0e11;\n  --color-canvas: #14171b;\n  --color-surface: #1b1f24;\n  --color-surface-alt: #22272d;\n  --color-surface-strong: #2d333b;\n  --color-bar: #39414b;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #0a0c11;\n  --color-bar-alt-text: #e3e8ef;\n  --color-inverse: #eef1f4;\n  --color-inverse-text: #0f1215;\n  --color-text: #b6bec8;\n  --color-text-muted: #7a848f;\n  --color-heading: #ffffff;\n  --color-heading-alt: #b9a4ff;\n  --color-link: #a98dff;\n  --color-link-quiet: #909ba8;\n  --color-link-visited: #8f80c6;\n  --color-link-hover: #d2c5ff;\n  --color-link-active: #f6f3ff;\n  --color-border: #2f363f;\n  --color-border-strong: #5e6976;\n  --color-border-muted: #22282f;\n  --color-accent: #7c4dff;\n  --color-accent-text: #fbfaff;\n  --color-accent-alt: #d8ccff;\n  --color-fill-1: #4fa3ff;\n  --color-fill-2: #c77dff;\n  --color-fill-3: #ffa23f;\n  --color-fill-4: #3ddbc4;\n  --color-button: #6f3ff5;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #f4f0ff;\n  --color-button-secondary: #2a3038;\n  --color-button-secondary-text: #e6ebf1;\n  --color-input: #0f1216;\n  --color-input-text: #e8edf2;\n  --color-input-border: #47515d;\n  --color-disabled: #1e2328;\n  --color-disabled-text: #5e6771;\n  --color-danger: #ff5d6c;\n  --color-danger-surface: #2a1418;\n  --color-success: #4fdc8c;\n  --color-warning: #ffc24d;\n  --color-notice: #1a1830;\n  --color-notice-text: #d0c6ff;\n  --color-focus: #b9a4ff;\n  --color-shadow: #000103;\n  --color-overlay: rgba(6, 8, 12, 0.8);\n}\n\n/* @part type */\n:root {\n  --font-body: Inter, Roboto, \"Segoe UI\", system-ui, \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: \"Barlow Condensed\", Oswald, \"Roboto Condensed\", \"Arial Narrow\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-ui: \"Barlow Condensed\", Oswald, \"Roboto Condensed\", \"Arial Narrow\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: \"JetBrains Mono\", \"SF Mono\", \"Cascadia Mono\", Menlo, monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 16px;\n  --text-large: 18px;\n  --text-display: 60px;\n  --text-h1: 40px;\n  --text-h2: 27px;\n  --text-h3: 20px;\n  --line-body: 1.55;\n  --line-heading: 1.05;\n  --line-display: 0.95;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.02em;\n  --display-tracking: 0;\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: 0;\n  --radius-panel: 0;\n  --radius-pill: 2px;\n  --radius-page: 0;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 5%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n  --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 14%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-accent-alt) 60%, transparent), 0 0 22px color-mix(in srgb, var(--color-accent-alt) 45%, transparent);\n  --shadow-control-pressed: inset 0 3px 8px color-mix(in srgb, black 55%, transparent);\n  --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 60%, transparent), 0 0 60px color-mix(in srgb, var(--color-accent-alt) 14%, transparent), 0 30px 80px -10px color-mix(in srgb, var(--color-shadow) 90%, transparent);\n  --shadow-text: 0 2px 12px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n  --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, white 2%, transparent) 0, color-mix(in srgb, white 2%, transparent) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse 80% 420px at 50% 0, color-mix(in srgb, var(--color-accent-alt) 8%, transparent) 0, transparent 70%), var(--color-page);\n  --fill-bar: linear-gradient(to right, color-mix(in srgb, var(--color-bar), black 40%) 0, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 40%) 100%);\n  --fill-bar-alt: linear-gradient(to bottom, var(--color-bar-alt) 0, color-mix(in srgb, var(--color-bar-alt), black 35%) 100%);\n  --fill-inverse: radial-gradient(ellipse 70% 120% at 50% 0, color-mix(in srgb, var(--color-inverse), white 28%) 0, var(--color-inverse) 70%);\n  --fill-accent: linear-gradient(135deg, color-mix(in srgb, var(--color-accent), white 18%) 0, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 25%) 100%);\n  --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), var(--color-accent-alt) 5%) 0, var(--color-surface) 45%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 32%) 0, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 50%) 0, color-mix(in srgb, var(--color-button), white 16%) 50%, var(--color-button) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 9%) 0, var(--color-button-secondary) 100%);\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, opacity 0.25s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}