{
  "id": "v1-gf-4253",
  "long_id": "v1.game-fantasy.shop.s04.p02.t05.u03",
  "name": "Game fantasy official site (black iron, ember, ash)",
  "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": "shop",
  "mode": "mix",
  "viewport": {
    "width": 1280,
    "fluid": false
  },
  "summary": "The long-running official site of an action role-playing game as such sites looked from about 2012 to 2018: a dark iron sheet under a wide bar with the crest hung in its middle, a painted key-art banner, league announcements as framed tiles and a column of shop boxes beside the news. It is wider and airier than the portals of the decade before, still a fixed sheet, and it earns its keep with supporter packs. Here the iron, the ember light and the key art are gradients, shadows and clipped shapes fed by tokens.",
  "url": "https://chrono.skin/s/v1-gf-4253",
  "preview_url": "https://chrono.skin/s/v1-gf-4253/specimen.html",
  "files": {
    "STYLE.md": "# Game fantasy official site (black iron, ember, ash)\n\n## Summary\n\nThe long-running official site of an action role-playing game as such sites looked from about 2012 to 2018: a dark iron sheet under a wide bar with the crest hung in its middle, a painted key-art banner, league announcements as framed tiles and a column of shop boxes beside the news. It is wider and airier than the portals of the decade before, still a fixed sheet, and it earns its keep with supporter packs. Here the iron, the ember light and the key art are gradients, shadows and clipped shapes fed by tokens.\n\n## Layout\n\n- Fixed centred sheet: `--size-page` is 1180px (`.ds-page__wrap`), made for a 1280px screen. The page iron shows left and right of it and below the footer.\n- Order of the home page: a slim strip of account links and platforms, the bar (`--size-nav`, 54px) with three links left and three right of the diamond crest, which overhangs the bar and carries the name on a plate below it; then the sheet in `--color-canvas`: the key-art banner (`.ds-hero`, `--size-banner` 520px, text centred on its dark foot), three framed tiles across, two columns (news posts, flexible, beside a `--size-aside` 320px column of boxes: deal of the day, league progress, links for new players), the closing band and the footer plate with six columns of links. Strip, bar and footer are written once and stay on every view.\n- Inner pages keep the strip, the bar and the footer; the banner is left out. They start with the breadcrumb at the top left of the sheet, then `.ds-page-header` (title and one line on the left, one or two buttons on the right, a 2px iron rule under it), then the working parts: full-width blocks (the `.ds-stats` strip, `.ds-tabs` standing on the framed table, the `.ds-grid` of packs), a `.ds-split` of two columns (`--wide` is 3 to 2), or the two columns of the home page again.\n- Views: `home` (banner, tiles with an item tooltip, news, shop and league boxes, band), `league` (figures, the announcement text, challenge progress, the trailer, tabs and the ladder table with class crests, pagination), `shop` (four packs as grid cells, a carousel of pack art, the accordion of pack contents, an item window), `order` (notices, the order form with its buttons, the dialog that cancels the order, the basket), `support` (the accordion of questions, the empty ticket list, server status, links).\n- Spacing scale: `--space-1` 2px (label to bar), `--space-2` 4px (small gaps, cell insets), `--space-3` 8px (between buttons, row padding), `--space-4` 12px (panel padding, list gaps), `--space-5` 18px (between blocks and columns, sheet padding), `--space-6` 28px (banner and band padding, large button sides), `--space-7` 44px (below the footer, the star grid of the key art).\n- Control heights: `--size-control-small` 22px, `--size-control` 30px, `--size-control-large` 46px. `--size-date` 54px is the date plate of a post, `--size-play` 60px the round play plate, `--size-brand` 74px the crest, `--size-corner` 14px a frame bracket.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two families and a monospace. `--font-heading` is a high-contrast display serif (Cormorant Garamond where installed, else Cochin, Baskerville, Palatino), always in capitals (`--heading-transform`) and tracked 2px, 5px for kickers and the hero. `--font-body` and `--font-ui` are a humanist sans (Alegreya Sans or Source Sans 3, else Segoe UI, Helvetica Neue); UI text is small, bold, in tracked capitals.\n- Sizes: `--text-base` 16px at `--line-body` 1.6; `--text-small` 13px; `--text-ui` 14px; `--text-large` 19px for leads; `--text-h3` 18px, `--text-h2` 25px, `--text-h1` 36px; `--text-display` 52px for section and feature titles and figures. The hero title is 1.75 times the display size and the class name 1.3 times, both capped by the window width.\n- Palette: forest black-green page and sheet, three green surfaces, a moss bar with pale gold lettering, a deep night green for pictures and footer (`--color-bar-alt`), sage text under pale gold headings, bronze for second headings, rules (`--color-border-strong`), the accent and the primary button (dark lettering on bronze), and a wisp green (`--color-accent-alt`) for moonlight, diamonds, glows and focus. The inverse block is lichen-pale linen.\n- Surface: hairline borders, square corners (only badges are rounded, 2px), long soft shadows under panels, a bronze hairline with a faint green glow around the dialog and the featured card (`--shadow-dialog`), a page of fine vertical grain (`--fill-page`), hover that eases over 0.25s and lights the control in the wisp colour.\n- The era's rule for text on fills is kept: on `--color-canvas` and the three surfaces (and `--fill-panel`) text is `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours; on `--fill-bar` only `--color-bar-text` (table heads, the dialog title, `.ds-plate`); on `--fill-bar-alt` only `--color-bar-alt-text` (every `.ds-scene`, the top bar that lies on it, 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`: the page shows in the dividers and behind the platform and edition cards, whose title stands on a plate.\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, grid cells as the surface tinted 24% by their fill, progress bars. Never a fill under text.\n- The key art (`.ds-scene`): ground, trunks and silhouettes are `--color-bar-alt` mixed toward `--color-shadow`; the moon is `--color-bar-alt-text` with a halo and shafts of `--color-accent-alt`; the horizon takes `--color-accent`; `.ds-scene--2` lights it with `--color-fill-2` (a rift), `.ds-scene--3` with `--color-fill-3` (a fire). 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 the play button and lamps, 45 degree turns for diamonds and studs, `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 iron. `.ds-page__wrap` is the 1180px column, `.ds-page__body` the sheet, `.ds-page__inner` the stack of a view, `.ds-page__columns` the news column and the 320px column, `.ds-page__main` and `.ds-page__aside` their stacks.\n- `.ds-nav`: the strip and the bar. `.ds-nav__top` holds two `.ds-nav__group`s of `.ds-nav__action` links and `.ds-nav__chip` platform labels; `.ds-nav__bar` holds `.ds-nav__links`, the brand, and `.ds-nav__links--end`. A `.ds-nav__link` is plain bar text; the current one is a plate in `--fill-accent` (`is-current`, or in the specimen one selector per view). Items with children are a `.ds-menu`.\n- `.ds-brand`: the crest in the middle of the bar. `.ds-brand__mark` is a 74px tile turned to a diamond and dressed as the primary button (`--fill-button`, `--color-button-text`, iron border, `--radius-control`, `--shadow-control`) inside a second iron ring; the mark inside stays upright. `.ds-brand__name` is a small bar plate under it. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the key-art banner: a `.ds-scene` whose picture fills the upper part, with `.ds-hero__copy` centred on the dark ground: a `.ds-ribbon`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one large button, one secondary) and `.ds-hero__note`. Once, at the top of the home page.\n- `.ds-scene`: the drawn picture, used for the banner, tile art, pack art, the carousel and the video still. Eight empty spans in this order: `.ds-scene__sky` (sky, the light and stars), `.ds-scene__far` (crags), `.ds-scene__ruins` (columns), `.ds-scene__gate` (the broken arch, lit on its inner edges), `.ds-scene__haze`, `.ds-scene__near` (the ground and a cloaked figure), `.ds-scene__embers`, `.ds-scene__shade` (vignette). `.ds-scene--2` is a moonlit sky, `.ds-scene--3` a rift.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__text`, `.ds-page-header__actions` on the right, an iron rule below.\n- `.ds-frame`: the iron-bound box: `--fill-panel` in a 2px border of `--color-border-strong` with `--shadow-panel` and a bracket in `--color-accent-alt` on each corner. Add it to a panel, a tile, a side box, the carousel. `.ds-frame--plain` leaves the brackets off (tables, the strip of figures).\n- `.ds-ribbon`: a short label on `--fill-accent` with notched ends.\n- `.ds-tiles`: three `.ds-tile` across, each a frame with `.ds-tile__art` (a scene), and a `.ds-tile__body` holding a badge, `.ds-tile__title`, `.ds-tile__text` and a secondary button.\n- `.ds-video`: a framed `.ds-video__still` (a scene) with the round `.ds-video__play` plate and a `.ds-video__caption`.\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` for meta links. `.ds-links` is a wrapping row.\n- `.ds-button`: a plate lit from above, 30px high. `.ds-button--secondary` is the iron plate; `.ds-button--danger` the destructive one (iron, with danger ink and edge, because the primary plate is itself ember red); `.ds-button--large` the 46px call in the heading face; `.ds-button--small` 22px. States `is-hover` (glows through `--shadow-control-hover`), `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row.\n- `.ds-form`: rows (`.ds-form__row`) of a `.ds-form__label` (150px) and a `.ds-form__field`. `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea` are sunk wells; `.ds-form__input--short`; `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, where `.ds-form__actions-end` pushes the destructive button right. `.ds-form--inline` is one well and one button in a line.\n- `.ds-table`: a data table inside a `.ds-frame--plain`. Head cells take `--fill-bar`; rows are ruled and every second one tinted; `is-numeric`, `is-centre`; `.ds-table__who` a crest beside a name; `.ds-table__sub` a small second line; a row with `is-own` is the reader's own, tinted with `--color-accent-alt`. `.ds-table__wrap` lets a wide table scroll.\n- `.ds-list`: ruled rows: `.ds-list__item` with `.ds-list__body` (`.ds-list__title`, `.ds-list__text`, `.ds-list__meta`) and perhaps a badge. `.ds-list--posts` makes each row a small slab with a `.ds-list__date` plate (`.ds-list__month` over the day); `.ds-list--tight` is the dense form.\n- `.ds-panel`: a box with a `.ds-panel__title` (a bar plate), a `.ds-panel__body` (`--flush` without padding), `.ds-panel__text`, `.ds-panel__foot`. Use it with `.ds-frame`.\n- `.ds-stat`: one figure: `.ds-stat__value` over `.ds-stat__label`. Three to five sit in a `.ds-stats` strip, divided by rules.\n- `.ds-grid`: four `.ds-grid__cell` across (`--two`, `--three`), tinted and edged by `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4` use the others. Inside: `.ds-grid__art` (a scene across the top) or `.ds-grid__icon`, `.ds-grid__title`, `.ds-grid__text`, a `.ds-price`, a button or `.ds-grid__more`.\n- `.ds-price`: a price in the heading face; `.ds-price__was` the struck old price.\n- `.ds-tabs`: plates standing on the frame that follows; `.ds-tabs__tab`, `is-current` in `--fill-accent`; `.ds-tabs__count`.\n- `.ds-badge`: a small label in `--fill-accent`. `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` (ink on a tint of itself), `.ds-badge--quiet`, `.ds-badge--new` (outlined in `--color-accent-alt`). `.ds-badges` is a row; `.ds-dot` with `--success`, `--warning`, `--danger` a status lamp.\n- `.ds-item`: an item name in its rarity colour: plain, `--uncommon`, `--rare`, `--epic`, `--legendary`, `--set`.\n- `.ds-tooltip`: the item window. The trigger wraps a `.ds-tooltip__tip` that shows on hover or focus (`is-open` by class, `.ds-tooltip--end` hangs it from the right). Inside: `.ds-tooltip__name`, `.ds-tooltip__line` rows, `--bonus`, `--muted`, `--lore`. `.ds-tooltip--card` writes the window into the page.\n- `.ds-progress`: a sunk track with a `.ds-progress__bar`; width by `--10`, `--25`, `--40`, `--60`, `--75`, `--90`, `--100`; colour by `--health`, `--xp`, `--rep`, `--danger`. `.ds-progress__label` is the line above.\n- `.ds-avatar`: a class crest (inline SVG) on a `--color-surface-strong` tile with an iron border; `.ds-avatar--small`, `.ds-avatar--large`; `--1` to `--4` colour the crest.\n- `.ds-accordion`: `<details>` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a small plate reading + or -, `.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` by class); `.ds-menu__caret`.\n- `.ds-carousel`: one framed picture: `.ds-carousel__stage` holding a `.ds-carousel__picture` and two `.ds-carousel__arrow` plates (`--next`), and a `.ds-carousel__foot` with the caption and `.ds-carousel__dots` of diamond `.ds-carousel__dot`s, `is-current` lit.\n- `.ds-switch`: defined for settings rows (`.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`, `.ds-switch__hint`); the specimen has no settings screen and does not show it.\n- `.ds-sidebar`: a framed box of the right column: `.ds-sidebar__title` (a bar plate, may hold a second span at the right), `.ds-sidebar__body` or a `.ds-sidebar__list` of `.ds-sidebar__item` rows with a `.ds-sidebar__link` and a `.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`: small iron plates, `.ds-pagination__link`; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (a diamond) and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small window: `.ds-dialog__title` bar plate with `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. `.ds-dialog__backdrop` is the dimmed area behind it.\n- `.ds-empty`: an empty slot: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-band`: the closing call in `--fill-inverse`: `.ds-band__title`, `.ds-band__text`, one large button. At most one per page.\n- `.ds-footer`: the closing plate in `--fill-bar-alt` with a diamond on its top edge: `.ds-footer__columns` of `.ds-footer__title` and `.ds-footer__links` of `.ds-footer__link`, then `.ds-footer__note`.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, the home view when none is.\n- `.ds-heading`: a section title followed by a fading rule (`--centre` for both sides); `.ds-rule` a rule with a diamond; `.ds-stack` (`--tight`), `.ds-split` (`--wide`), `.ds-row` (`--between`), `.ds-muted`, `.ds-icon`: helpers.\n\n## Never\n\n- `content-width <= 1180px`: the page is a fixed sheet.\n- `font-size >= 13px`: meta, badges and labels are the smallest text.\n- `font-size <= 91px`: the hero title is the largest text.\n- `font-families <= 3`: a display serif, a humanist sans and a monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing <= 5px`: kickers and the hero title are tracked 5px, headings 2px.\n- `border-radius <= 12px`: slabs and labels are rounded to 12px at most; only lamps and the foot of the crest are round.\n- `border-width <= 3px`: the ridge frame is 3px, every rule 1px.\n- `box-shadow-blur <= 24px`: shadows are deep but short; nothing floats on a wide haze.\n- `transition = none`: nothing on these pages eased; a plate changed its fill at once.\n- `animation = none`: movement belonged to the game, not to its site.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A box that stands on the sheet is a `.ds-frame` (or `.ds-frame--plain` inside another); a raised thing takes a `--fill-*` gradient, an edge mixed toward `--color-shadow` and `--shadow-control`; a sunk thing takes `--fill-input` and `--shadow-control-pressed`. A new picture is a `.ds-scene` with its eight spans and, if it needs another light, a new sky variant built from one fill colour. Keep the rule for text on fills, and keep rarity and status colours as ink. Do not add images, heavy carved frames, a second accent, or text on the page iron.\n",
    "components.css": "/* Layout tokens (structure part). The official site of an action\n   role-playing game around 2012 to 2018: a fixed 1180px sheet under a wide\n   bar with the crest in its middle, a key-art banner, framed announcement\n   tiles, a news column beside a 320px column of shop boxes, a dense footer. */\n:root {\n  --size-page: 1180px;\n  --size-aside: 320px;\n  --size-nav: 54px;\n  --size-brand: 74px;\n  --size-banner: 480px;\n  --size-hair: 1px;\n  --size-corner: 14px;\n  --size-control: 30px;\n  --size-control-small: 22px;\n  --size-control-large: 46px;\n  --size-icon: 16px;\n  --size-dot: 8px;\n  --size-crest: 40px;\n  --size-crest-large: 84px;\n  --size-bar: 12px;\n  --size-label: 150px;\n  --size-field-short: 170px;\n  --size-textarea: 96px;\n  --size-dialog: 420px;\n  --size-tip: 270px;\n  --size-menu: 200px;\n  --size-switch: 40px;\n  --size-stat: 150px;\n  --size-date: 54px;\n  --size-play: 60px;\n  --space-1: 2px;\n  --space-2: 4px;\n  --space-3: 8px;\n  --space-4: 12px;\n  --space-5: 18px;\n  --space-6: 28px;\n  --space-7: 44px;\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__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n  margin-bottom: 0;\n}\n.ds-panel__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- stats ---------- */\n.ds-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--size-stat), 1fr));\n}\n.ds-stat {\n  padding: var(--space-4) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat:first-child {\n  border-left: 0;\n}\n.ds-stat__value {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- grid: cells tinted by the four fill colours ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: var(--space-5);\n  background: color-mix(in srgb, var(--color-fill-1) 24%, var(--color-surface));\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 60%, var(--color-border));\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n  background: color-mix(in srgb, var(--color-fill-2) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-2) 60%, var(--color-border));\n}\n.ds-grid__cell--3 {\n  background: color-mix(in srgb, var(--color-fill-3) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-3) 60%, var(--color-border));\n}\n.ds-grid__cell--4 {\n  background: color-mix(in srgb, var(--color-fill-4) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-4) 60%, var(--color-border));\n}\n.ds-grid__icon {\n  width: var(--size-crest);\n  height: var(--size-crest);\n  color: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__icon { color: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__icon { color: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__icon { color: var(--color-fill-4); }\n.ds-grid__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  flex: 1;\n  margin: 0;\n}\n.ds-grid__more {\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-grid__more:hover {\n  color: var(--color-link-hover);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-5);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: 0;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-border-strong);\n}\n.ds-tabs__count {\n  opacity: 0.75;\n  font-size: var(--text-small);\n}\n\n/* ---------- badge, lamp and item name ---------- */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));\n  color: var(--color-success);\n  border-color: var(--color-success);\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));\n  color: var(--color-warning);\n  border-color: var(--color-warning);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-color: var(--color-border);\n}\n.ds-badge--new {\n  background: transparent;\n  color: var(--color-accent-alt);\n  border-color: var(--color-accent-alt);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-dot {\n  display: inline-block;\n  flex: none;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-text-muted);\n  border-radius: 50%;\n}\n.ds-dot--success { background: var(--color-success); }\n.ds-dot--warning { background: var(--color-warning); }\n.ds-dot--danger { background: var(--color-danger); }\n.ds-item {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.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.ds-item--set { color: var(--color-fill-4); }\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--60 .ds-progress__bar { width: 60%; }\n.ds-progress--75 .ds-progress__bar { width: 75%; }\n.ds-progress--100 .ds-progress__bar { width: 100%; }\n.ds-progress--health .ds-progress__bar { background: var(--color-success); }\n.ds-progress--xp .ds-progress__bar { background: var(--color-fill-2); }\n.ds-progress--rep .ds-progress__bar { background: var(--color-warning); }\n.ds-progress__label {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-1);\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-progress__label strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- avatar: a crest on a small tile ---------- */\n.ds-avatar {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-crest);\n  height: var(--size-crest);\n  padding: var(--space-2);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-avatar svg {\n  width: 100%;\n  height: 100%;\n}\n.ds-avatar--small {\n  width: var(--size-control);\n  height: var(--size-control);\n  padding: var(--space-1);\n}\n.ds-avatar--large {\n  width: var(--size-crest-large);\n  height: var(--size-crest-large);\n  padding: var(--space-3);\n}\n.ds-avatar--1 { color: var(--color-fill-1); }\n.ds-avatar--2 { color: var(--color-fill-2); }\n.ds-avatar--3 { color: var(--color-fill-3); }\n.ds-avatar--4 { color: var(--color-fill-4); }\n\n/* ---------- accordion ---------- */\n.ds-accordion {\n  display: flex;\n  flex-direction: column;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-accordion__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item:first-child {\n  border-top: 0;\n}\n.ds-accordion__summary {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__summary::before {\n  content: \"\";\n  display: block;\n  flex: none;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  background: linear-gradient(currentColor, currentColor) center / calc(var(--space-1) * 5) var(--space-1) no-repeat,\n    linear-gradient(currentColor, currentColor) center / var(--space-1) calc(var(--space-1) * 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(var(--space-1) * 5) var(--space-1) 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(var(--space-1) * 5);\n  height: calc(var(--space-1) * 5);\n  background: linear-gradient(currentColor, currentColor) center / 100% var(--space-1) no-repeat,\n    linear-gradient(currentColor, currentColor) center / var(--space-1) 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/* ---------- frame: an iron-bound box with a bracket on each corner ---------- */\n.ds-frame {\n  position: relative;\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-panel);\n}\n.ds-frame::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(var(--border-width-strong) * -2);\n  z-index: 2;\n  pointer-events: none;\n  background:\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) top left / var(--size-corner) var(--border-width-strong) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) top left / var(--border-width-strong) var(--size-corner) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) top right / var(--size-corner) var(--border-width-strong) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) top right / var(--border-width-strong) var(--size-corner) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) bottom left / var(--size-corner) var(--border-width-strong) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) bottom left / var(--border-width-strong) var(--size-corner) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) bottom right / var(--size-corner) var(--border-width-strong) no-repeat,\n    linear-gradient(var(--color-accent-alt), var(--color-accent-alt)) bottom right / var(--border-width-strong) var(--size-corner) no-repeat;\n}\n.ds-frame--plain::before {\n  display: none;\n}\n.ds-panel,\n.ds-accordion {\n  border-color: var(--color-border-strong);\n}\n.ds-panel__title {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  text-shadow: var(--shadow-text);\n  border-bottom-color: var(--color-border-strong);\n}\n\n/* ---------- page: the sheet between two iron edges ---------- */\n.ds-page__wrap {\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 0 var(--space-7);\n}\n.ds-page__body {\n  padding: var(--space-5);\n  background: var(--color-canvas);\n  border-right: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page__inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n.ds-page__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-page__main,\n.ds-page__aside {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n\n/* ---------- nav: a slim strip, then the bar with the crest in its middle ---------- */\n.ds-nav {\n  position: relative;\n  z-index: 20;\n}\n.ds-nav__top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  min-height: var(--size-control);\n  padding: 0 var(--space-5);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n  border-right: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__group {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-nav__action {\n  color: inherit;\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__action:hover {\n  text-decoration: underline;\n}\n.ds-nav__chip {\n  padding: 0 var(--space-3);\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  opacity: 0.85;\n}\n.ds-nav__bar {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  min-height: var(--size-nav);\n  background: var(--fill-bar);\n  color: var(--color-bar-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-panel);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: stretch;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0 var(--space-5);\n  list-style: none;\n}\n.ds-nav__links--end {\n  justify-content: flex-start;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-4);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  border-color: color-mix(in srgb, var(--color-bar-text) 50%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#league:target) .ds-nav__link[href=\"#league\"],\n.ds-page:has(#shop:target) .ds-nav__link[href=\"#shop\"],\n.ds-page:has(#order:target) .ds-nav__link[href=\"#order\"],\n.ds-page:has(#support:target) .ds-nav__link[href=\"#support\"]:not(.ds-nav__link--elsewhere) {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: color-mix(in srgb, var(--color-accent), var(--color-shadow) 60%);\n  box-shadow: var(--shadow-control);\n}\n\n/* ---------- brand: a diamond crest hung in the middle of the bar ---------- */\n.ds-brand {\n  position: relative;\n  z-index: 5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: calc(var(--space-5) * -1) 0 calc(var(--space-7) * -1);\n  color: var(--color-bar-text);\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  margin: var(--space-4) var(--space-6);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control), 0 0 0 var(--space-2) color-mix(in srgb, var(--color-bar), var(--color-shadow) 55%), 0 0 0 calc(var(--space-2) + var(--border-width)) var(--color-border-strong);\n  transform: rotate(45deg);\n}\n.ds-brand__mark svg {\n  width: 62%;\n  height: 62%;\n  transform: rotate(-45deg);\n}\n.ds-brand__name {\n  margin-top: calc(var(--space-2) * -1);\n  padding: var(--space-1) var(--space-5);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\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(--display-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- scene: the key art, drawn from tokens ----------\n   Ground and silhouettes come from the alternate bar colour, the light\n   behind the gate from the two accents, the far glow from the third fill. */\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__far,\n.ds-scene__ruins,\n.ds-scene__gate,\n.ds-scene__haze,\n.ds-scene__near,\n.ds-scene__embers,\n.ds-scene__shade {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.ds-scene__sky {\n  background:\n    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--color-accent-alt) 95%, transparent) 0, color-mix(in srgb, var(--color-accent) 75%, transparent) 8%, color-mix(in srgb, var(--color-accent) 26%, transparent) 26%, transparent 50%),\n    radial-gradient(ellipse 95% 30% at 50% 80%, color-mix(in srgb, var(--color-fill-3) 42%, transparent), transparent 70%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 75%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 75%, transparent) 1.4%, transparent 2.4%) 0 0 / calc(var(--space-7) * 1.7) calc(var(--space-7) * 1.3),\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.8%, transparent 1.6%) var(--space-5) var(--space-6) / calc(var(--space-7) * 2.3) calc(var(--space-7) * 1.9),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 65%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 40%) 100%);\n}\n.ds-scene__far {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 34%) 38%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 14%) 100%);\n  clip-path: polygon(0 100%, 0 56%, 5% 49%, 10% 54%, 16% 39%, 21% 48%, 27% 43%, 32% 52%, 39% 57%, 61% 58%, 67% 50%, 72% 54%, 78% 37%, 84% 47%, 90% 42%, 95% 52%, 100% 45%, 100% 100%);\n}\n.ds-scene__ruins {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 12%) 30%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 45%) 100%);\n  clip-path: polygon(0 100%, 6% 100%, 6.4% 47%, 5.6% 45%, 6% 43%, 10% 43%, 10.4% 45%, 9.6% 47%, 10% 100%, 14% 100%, 14.3% 56%, 17.6% 59%, 17.4% 100%, 23% 100%, 23.2% 64%, 25.6% 62%, 25.8% 100%, 74% 100%, 74.3% 61%, 76.8% 64%, 77% 100%, 82% 100%, 82.3% 52%, 81.6% 50%, 82% 48%, 86% 50%, 85.6% 53%, 86% 100%, 91% 100%, 91.2% 41%, 90.4% 39%, 91% 37%, 95% 37%, 95.6% 39%, 94.8% 41%, 95% 100%);\n}\n.ds-scene__gate {\n  background: linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 75%) 37%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 46%) 42.6%, color-mix(in srgb, var(--color-bar-alt), var(--color-accent) 46%) 57.4%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 75%) 63%);\n  clip-path: polygon(33.4% 100%, 34.6% 35%, 33% 33%, 33.4% 27%, 36% 23%, 43% 19.5%, 50% 19%, 55% 21%, 56% 25%, 53.4% 27%, 50% 25.4%, 46.6% 27%, 44% 31%, 42.8% 37%, 42.4% 100%, 57.6% 100%, 57.9% 46%, 56.8% 43%, 58.4% 39%, 60% 41%, 61.6% 36%, 64% 38.6%, 66% 37%, 66.6% 43%, 65.4% 45%, 66.4% 100%);\n}\n.ds-scene__haze {\n  background:\n    radial-gradient(ellipse 34% 9% at 50% 84%, color-mix(in srgb, var(--color-accent-alt) 55%, transparent), transparent 70%),\n    radial-gradient(ellipse 44% 10% at 16% 76%, color-mix(in srgb, var(--color-bar-alt-text) 20%, transparent), transparent 70%),\n    radial-gradient(ellipse 46% 9% at 86% 72%, color-mix(in srgb, var(--color-bar-alt-text) 17%, transparent), transparent 70%),\n    radial-gradient(ellipse 60% 14% at 50% 70%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%);\n}\n/* the figure: a cloaked silhouette with a blade, standing in the light */\n.ds-scene__near::after {\n  content: \"\";\n  position: absolute;\n  bottom: 9%;\n  left: 47.6%;\n  width: 4.8%;\n  height: 21%;\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 92%);\n  clip-path: polygon(42% 0, 56% 0, 62% 7%, 58% 15%, 72% 19%, 78% 34%, 76% 50%, 97% 30%, 100% 33%, 78% 58%, 84% 100%, 60% 100%, 54% 70%, 46% 70%, 42% 100%, 16% 100%, 22% 56%, 20% 32%, 28% 19%, 42% 15%, 38% 7%);\n}\n.ds-scene__near::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 70%) 74%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 92%) 100%);\n  clip-path: polygon(0 100%, 0 79%, 4% 73%, 7% 76%, 12% 81%, 22% 85%, 34% 89%, 44% 90.5%, 56% 90.5%, 66% 88%, 78% 83%, 88% 77%, 93% 71%, 96% 75%, 100% 80%, 100% 100%);\n}\n.ds-scene__embers {\n  background:\n    radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 3%, transparent 5%) 0 0 / calc(var(--space-7) * 1.1) calc(var(--space-7) * 1.5),\n    radial-gradient(circle, color-mix(in srgb, var(--color-fill-3) 80%, transparent) 0, color-mix(in srgb, var(--color-fill-3) 80%, transparent) 2%, transparent 4%) var(--space-4) var(--space-5) / calc(var(--space-7) * 1.9) calc(var(--space-7) * 1.2);\n  -webkit-mask-image: radial-gradient(ellipse 34% 50% at 50% 74%, var(--color-shadow) 0, transparent 100%);\n  mask-image: radial-gradient(ellipse 34% 50% at 50% 74%, var(--color-shadow) 0, transparent 100%);\n}\n.ds-scene__shade {\n  background:\n    radial-gradient(ellipse 80% 90% at 50% 55%, transparent 50%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 88%) 100%),\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 85%) 0, transparent 34%);\n}\n/* other skies: a cold moon to the left, an arcane rift high on the right */\n.ds-scene--2 .ds-scene__sky {\n  background:\n    radial-gradient(circle at 24% 30%, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 5%, color-mix(in srgb, var(--color-fill-1) 55%, transparent) 6.5%, color-mix(in srgb, var(--color-fill-1) 20%, transparent) 24%, transparent 50%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 75%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 75%, transparent) 1.4%, transparent 2.4%) 0 0 / calc(var(--space-7) * 1.7) calc(var(--space-7) * 1.3),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-1) 30%) 100%);\n}\n.ds-scene--2 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-1) 26%);\n}\n.ds-scene--2 .ds-scene__gate {\n  background: linear-gradient(to right, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-1) 40%) 34%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 75%) 46%);\n}\n.ds-scene--3 .ds-scene__sky {\n  background:\n    conic-gradient(from 200deg at 74% 22%, transparent 0deg, color-mix(in srgb, var(--color-fill-2) 34%, transparent) 14deg, transparent 30deg, transparent 52deg, color-mix(in srgb, var(--color-fill-2) 26%, transparent) 64deg, transparent 80deg, transparent 360deg),\n    radial-gradient(ellipse 5% 26% at 74% 24%, color-mix(in srgb, var(--color-bar-alt-text) 95%, transparent) 0, color-mix(in srgb, var(--color-fill-2) 80%, transparent) 60%, transparent 100%),\n    radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--color-fill-2) 50%, transparent) 0, transparent 44%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 34%) 100%);\n}\n.ds-scene--3 .ds-scene__far {\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 28%);\n}\n.ds-scene--3 .ds-scene__gate {\n  background: linear-gradient(to left, color-mix(in srgb, var(--color-bar-alt), var(--color-fill-2) 42%) 30%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 75%) 50%);\n}\n.ds-scene--2 .ds-scene__haze,\n.ds-scene--3 .ds-scene__haze,\n.ds-scene--2 .ds-scene__embers,\n.ds-scene--3 .ds-scene__embers {\n  opacity: 0.35;\n}\n\n/* ---------- hero: the key-art banner under the crest ---------- */\n.ds-hero {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  min-height: var(--size-banner);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 92%);\n}\n/* the picture fills the upper half; the dark ground under it carries the text */\n.ds-hero > .ds-scene__sky,\n.ds-hero > .ds-scene__far,\n.ds-hero > .ds-scene__ruins,\n.ds-hero > .ds-scene__gate,\n.ds-hero > .ds-scene__haze,\n.ds-hero > .ds-scene__near,\n.ds-hero > .ds-scene__embers {\n  bottom: 47%;\n}\n.ds-hero__copy {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  max-width: 76%;\n  padding: var(--space-6) var(--space-5) var(--space-5);\n  text-align: center;\n}\n.ds-hero__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-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0;\n  max-width: 64ch;\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  margin-top: var(--space-3);\n}\n.ds-hero__note {\n  margin: 0;\n  font-size: var(--text-small);\n  opacity: 0.85;\n}\n/* ribbon: a short label on the accent fill with notched ends */\n.ds-ribbon {\n  display: inline-block;\n  padding: var(--space-2) var(--space-6);\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  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  clip-path: polygon(0 0, 100% 0, calc(100% - var(--space-3)) 50%, 100% 100%, 0 100%, var(--space-3) 50%);\n}\n\n/* ---------- tiles: framed announcements, three across ---------- */\n.ds-tiles {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-tile {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.ds-tile__art {\n  aspect-ratio: 16 / 7;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-tile__body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-tile__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-tile__text {\n  flex: 1;\n  margin: 0;\n}\n\n/* ---------- video: a framed still with a round play plate ---------- */\n.ds-video {\n  display: block;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-video__still {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 16 / 9;\n}\n.ds-video__play {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-play);\n  height: var(--size-play);\n  padding-left: var(--space-2);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control-hover);\n  font-size: var(--text-h2);\n  line-height: 1;\n}\n.ds-video__caption {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-text);\n  font-size: var(--text-small);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-video__caption strong {\n  color: var(--color-heading);\n}\n\n/* ---------- news posts: a date plate beside each ---------- */\n.ds-list--posts .ds-list__item {\n  padding: var(--space-4);\n  margin-bottom: var(--space-3);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-list--posts .ds-list__item:first-child {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__date {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-date);\n  height: var(--size-date);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\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-heading);\n  font-size: var(--text-h2);\n  line-height: 1;\n}\n.ds-list__month {\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  letter-spacing: var(--heading-tracking);\n  text-transform: uppercase;\n}\n\n/* ---------- sidebar: a shop or league box in the right column ---------- */\n.ds-sidebar {\n  min-width: 0;\n}\n.ds-sidebar__title {\n  display: flex;\n  align-items: baseline;\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  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-sidebar__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-4);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\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__item:first-child {\n  border-top: 0;\n}\n.ds-sidebar__link {\n  flex: 1;\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover {\n  color: var(--color-link-hover);\n}\n.ds-sidebar__meta {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-price {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  line-height: 1;\n}\n.ds-price__was {\n  margin-left: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  text-decoration: line-through;\n}\n\n/* ---------- page header of an inner page ---------- */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding-bottom: var(--space-4);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__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-page-header__text {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: none;\n  gap: var(--space-3);\n}\n.ds-breadcrumb {\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n  color: var(--color-link-quiet);\n  opacity: 1;\n}\n\n/* ---------- details of this pack on shared components ---------- */\n.ds-stats {\n  overflow: hidden;\n}\n.ds-tabs {\n  position: relative;\n  z-index: 1;\n  margin-bottom: calc(var(--border-width-strong) * -1);\n  padding: 0 var(--space-4);\n  border-bottom: 0;\n}\n.ds-grid__cell {\n  align-items: flex-start;\n}\n.ds-grid__art {\n  align-self: stretch;\n  aspect-ratio: 16 / 9;\n  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-carousel__stage {\n  aspect-ratio: 16 / 9;\n}\n.ds-carousel__foot {\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n\n/* ---------- band: the closing call, in the opposite material ---------- */\n.ds-band {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-5) var(--space-6);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-band__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-band__text {\n  margin: var(--space-2) 0 0;\n}\n\n/* ---------- footer: a dense plate of link columns ---------- */\n.ds-footer {\n  position: relative;\n  padding: var(--space-6) var(--space-6) var(--space-5);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: 0 0 var(--radius-page) var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-footer::before {\n  content: \"\";\n  position: absolute;\n  top: calc((var(--size-corner) / 2 + var(--border-width)) * -1);\n  left: 50%;\n  width: var(--size-corner);\n  height: var(--size-corner);\n  background: var(--color-accent-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  transform: translateX(-50%) rotate(45deg);\n}\n.ds-footer__columns {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: var(--space-5);\n  padding-bottom: var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\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-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  text-decoration: var(--link-decoration-quiet);\n  opacity: 0.78;\n}\n.ds-footer__link:hover {\n  opacity: 1;\n}\n.ds-footer__note {\n  margin: var(--space-4) 0 0;\n  font-size: var(--text-small);\n  text-align: center;\n  opacity: 0.7;\n}\n.ds-carousel__picture {\n  position: absolute;\n  inset: 0;\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 game's official site and shop, 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<div class=\"ds-page__wrap\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__top\">\n      <div class=\"ds-nav__group\">\n        <a class=\"ds-nav__action\" href=\"#order\">Log in</a>\n        <a class=\"ds-nav__action\" href=\"#order\">Create account</a>\n        <a class=\"ds-nav__action\" href=\"#support\">Contact support</a>\n      </div>\n      <div class=\"ds-nav__group\">\n        <span>32,418 players in the Cinder League</span>\n        <span class=\"ds-nav__chip\">PC</span>\n        <span class=\"ds-nav__chip\">Mac</span>\n        <span class=\"ds-nav__chip\">Console</span>\n      </div>\n    </div>\n    <div class=\"ds-nav__bar\">\n      <ul class=\"ds-nav__links\">\n        <li><a class=\"ds-nav__link\" href=\"#home\">Home</a></li>\n        <li class=\"ds-menu\">\n          <a class=\"ds-nav__link\" href=\"#league\">League <span class=\"ds-menu__caret\">&#9662;</span></a>\n          <ul class=\"ds-menu__list\">\n            <li><a class=\"ds-menu__item\" href=\"#league\">Cinder League</a></li>\n            <li><a class=\"ds-menu__item\" href=\"#league\">Challenges</a></li>\n            <li><a class=\"ds-menu__item\" href=\"#league\">Ladder</a></li>\n            <li><a class=\"ds-menu__item\" href=\"#support\">Patch notes</a></li>\n          </ul>\n        </li>\n        <li><a class=\"ds-nav__link ds-nav__link--elsewhere\" href=\"#support\">Forum</a></li>\n      </ul>\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 ds-nav__links--end\">\n        <li class=\"ds-menu\">\n          <a class=\"ds-nav__link\" href=\"#shop\">Shop <span class=\"ds-menu__caret\">&#9662;</span></a>\n          <ul class=\"ds-menu__list\">\n            <li><a class=\"ds-menu__item\" href=\"#shop\">Supporter packs</a></li>\n            <li><a class=\"ds-menu__item\" href=\"#shop\">Deal of the day</a></li>\n            <li><a class=\"ds-menu__item\" href=\"#order\">Buy points</a></li>\n          </ul>\n        </li>\n        <li><a class=\"ds-nav__link\" href=\"#order\">Order</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#support\">Support</a></li>\n      </ul>\n    </div>\n  </header>\n\n  <main class=\"ds-page__body\">\n\n    <section class=\"ds-view ds-view--home\" id=\"home\">\n      <div class=\"ds-page__inner\">\n        <div class=\"ds-scene ds-hero\" data-component=\"hero\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span>\n          <div class=\"ds-hero__copy\">\n            <span class=\"ds-ribbon\">New league, 12 December</span>\n            <h1 class=\"ds-hero__title\">The Cinder League</h1>\n            <p class=\"ds-hero__lead\">The old gate burns again. Carry a living ember through every map, feed it what you kill and spend it at the forge before it goes out.</p>\n            <div class=\"ds-hero__actions\">\n              <a class=\"ds-button ds-button--large\" href=\"#order\">Play free now</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#league\">Read the announcement</a>\n            </div>\n            <p class=\"ds-hero__note\">Free to play. Nothing in the shop makes a character stronger.</p>\n          </div></div>\n\n        <div class=\"ds-tiles\">\n          <article class=\"ds-tile ds-frame\">\n            <div class=\"ds-scene ds-scene--2 ds-tile__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <div class=\"ds-tile__body\">\n              <span class=\"ds-badge\">League</span>\n              <h2 class=\"ds-tile__title\">Forty challenges, three rewards</h2>\n              <p class=\"ds-tile__text\">Finish twelve, twenty-four and thirty-six challenges for the ember cloak, its wings and its footprints.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#league\">See the challenges</a>\n            </div>\n          </article>\n          <article class=\"ds-tile ds-frame\">\n            <div class=\"ds-scene ds-scene--3 ds-tile__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <div class=\"ds-tile__body\">\n              <span class=\"ds-badge ds-badge--new\">New</span>\n              <h2 class=\"ds-tile__title\">Twenty-two new unique items</h2>\n              <p class=\"ds-tile__text\">Among them <span class=\"ds-tooltip\" tabindex=\"0\"><span class=\"ds-item ds-item--legendary\">Ashen Vow</span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name ds-item ds-item--legendary\">Ashen Vow</span><span class=\"ds-tooltip__line\"><span>Two-handed sword</span><span>Level 64</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>+38% fire damage</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>Sworn at the gate, kept in the fire.</span></span></span></span>, a blade that burns hotter the longer your ember lives.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#shop\">Browse the items</a>\n            </div>\n          </article>\n          <article class=\"ds-tile ds-frame\">\n            <div class=\"ds-scene ds-tile__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <div class=\"ds-tile__body\">\n              <span class=\"ds-badge ds-badge--warning\">Ends in 3 days</span>\n              <h2 class=\"ds-tile__title\">Supporter packs of the league</h2>\n              <p class=\"ds-tile__text\">Four packs from Kindling to Inferno pay for the next league and dress your character in its armour.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#shop\">Open the shop</a>\n            </div>\n          </article>\n        </div>\n\n        <div class=\"ds-page__columns\">\n          <div class=\"ds-page__main\">\n            <h2 class=\"ds-heading\">News</h2>\n            <ul class=\"ds-list ds-list--posts\" data-component=\"list\">\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__date\"><span class=\"ds-list__month\">Dec</span>08</span>\n                <div class=\"ds-list__body\">\n                  <a class=\"ds-list__title\" href=\"#league\">One week until the Cinder League</a>\n                  <p class=\"ds-list__text\">The launch is on 12 December at 20:00 UTC. The patch can be loaded a day earlier, and the ladder starts empty for everyone.</p>\n                  <span class=\"ds-list__meta\">Posted by the developers, 214 comments</span>\n                </div>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__date\"><span class=\"ds-list__month\">Dec</span>05</span>\n                <div class=\"ds-list__body\">\n                  <a class=\"ds-list__title\" href=\"#support\">Patch notes 3.4: the forge and the ember</a>\n                  <p class=\"ds-list__text\">Every change to skills, items and maps in one long post, with the balance notes by class at the end.</p>\n                  <span class=\"ds-list__meta\">Posted by the developers, 1,032 comments</span>\n                </div>\n                <span class=\"ds-badge ds-badge--quiet\">Patch</span>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__date\"><span class=\"ds-list__month\">Nov</span>29</span>\n                <div class=\"ds-list__body\">\n                  <a class=\"ds-list__title\" href=\"#league\">Race season results and prizes</a>\n                  <p class=\"ds-list__text\">Two hundred and six races were run this season. The winners of each class are listed with their times.</p>\n                  <span class=\"ds-list__meta\">Posted by the community team, 87 comments</span>\n                </div>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__date\"><span class=\"ds-list__month\">Nov</span>21</span>\n                <div class=\"ds-list__body\">\n                  <a class=\"ds-list__title\" href=\"#shop\">The art of the Pyre armour</a>\n                  <p class=\"ds-list__text\">Our concept artists show the sketches behind the league's supporter packs, from the first thumbnail to the finished set.</p>\n                  <span class=\"ds-list__meta\">Posted by the art team, 59 comments</span>\n                </div>\n              </li>\n            </ul>\n            <div class=\"ds-row ds-row--between\">\n              <a class=\"ds-link ds-link--quiet\" href=\"#support\">Browse the news archive</a>\n              <a class=\"ds-link ds-link--quiet\" href=\"#league\">Watch the league trailer</a>\n            </div>\n          </div>\n          <aside class=\"ds-page__aside\">\n            <div class=\"ds-sidebar ds-frame\">\n              <h2 class=\"ds-sidebar__title\"><span>Deal of the day</span><span>24% off</span></h2>\n              <div class=\"ds-sidebar__body\">\n                <div class=\"ds-row\">\n                  <span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c4 5 6 7 6 11a6 6 0 0 1-12 0c0-3 2-4 3-7 1 2 2 2 3-4z\"/></svg></span>\n                  <div>\n                    <span class=\"ds-item ds-item--epic\">Emberwing back attachment</span>\n                    <div class=\"ds-muted\">Ends in 14 hours</div>\n                  </div>\n                </div>\n                <div class=\"ds-row ds-row--between\">\n                  <span class=\"ds-price\">190 points<span class=\"ds-price__was\">250</span></span>\n                  <a class=\"ds-button\" href=\"#order\">Buy</a>\n                </div>\n              </div>\n            </div>\n            <div class=\"ds-sidebar ds-frame\">\n              <h2 class=\"ds-sidebar__title\"><span>Your league</span><span>Day 61 of 90</span></h2>\n              <div class=\"ds-sidebar__body\">\n                <div>\n                  <div class=\"ds-progress__label\"><strong>Challenges</strong><span>27 of 40</span></div>\n                  <span class=\"ds-progress ds-progress--60\"><span class=\"ds-progress__bar\"></span></span>\n                </div>\n                <div>\n                  <div class=\"ds-progress__label\"><strong>Level 87</strong><span>75% to 88</span></div>\n                  <span class=\"ds-progress ds-progress--75 ds-progress--xp\"><span class=\"ds-progress__bar\"></span></span>\n                </div>\n              </div>\n            </div>\n            <div class=\"ds-sidebar ds-frame\" data-component=\"sidebar\">\n              <h2 class=\"ds-sidebar__title\"><span>For new players</span></h2>\n              <ul class=\"ds-sidebar__list\">\n                <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#support\">Which class should I start with?</a><span class=\"ds-sidebar__meta\">Guide</span></li>\n                <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#league\">How leagues and ladders work</a><span class=\"ds-sidebar__meta\">Guide</span></li>\n                <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#shop\">What the shop sells, and what it never will</a><span class=\"ds-sidebar__meta\">Shop</span></li>\n                <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#support\">Ask in the help desk</a><span class=\"ds-sidebar__meta\">Support</span></li>\n              </ul>\n            </div>\n          </aside>\n        </div>\n\n        <div class=\"ds-band\">\n          <div>\n            <h2 class=\"ds-band__title\">Start with nothing. Keep everything you find.</h2>\n            <p class=\"ds-band__text\">One account for every league. Download the client, pick a class and reach the gate tonight.</p>\n          </div>\n          <a class=\"ds-button ds-button--large\" href=\"#order\">Create an account</a>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"league\">\n      <div class=\"ds-page__inner\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#league\">League</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li class=\"ds-breadcrumb__current\">Cinder League</li>\n        </ol>\n        <div class=\"ds-page-header\">\n          <div>\n            <h1 class=\"ds-page-header__title\">The Cinder League</h1>\n            <p class=\"ds-page-header__text\">Ninety days, forty challenges and a fresh ladder. Day 61 today.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#support\">Patch notes</a>\n            <a class=\"ds-button\" href=\"#order\">Play free now</a>\n          </div>\n        </div>\n        <div class=\"ds-stats ds-frame ds-frame--plain\" data-component=\"stats\">\n          <div class=\"ds-stat\"><span class=\"ds-stat__value\">32,418</span><span class=\"ds-stat__label\">Players online</span></div>\n          <div class=\"ds-stat\"><span class=\"ds-stat__value\">29</span><span class=\"ds-stat__label\">Days left</span></div>\n          <div class=\"ds-stat\"><span class=\"ds-stat__value\">27 / 40</span><span class=\"ds-stat__label\">Your challenges</span></div>\n          <div class=\"ds-stat\"><span class=\"ds-stat__value\">1,204</span><span class=\"ds-stat__label\">Your ladder rank</span></div>\n          <div class=\"ds-stat\"><span class=\"ds-stat__value\">206</span><span class=\"ds-stat__label\">Races this season</span></div>\n        </div>\n        <div class=\"ds-split ds-split--wide\">\n          <div class=\"ds-panel ds-frame\">\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-prose\" data-component=\"typography\">\n                <h1>What the league adds</h1>\n                <p class=\"ds-prose__lead\">An ember travels with you from the first map to the last.</p>\n                <p>Every pack of monsters you kill feeds the ember, and every minute you spend standing still lets it cool. Bring it to a forge and it can be spent on one item.</p>\n                <h2>The forge</h2>\n                <p>A forge stands in one map of each act. What it gives depends on the heat you arrive with:</p>\n                <ul>\n                  <li>Warm: one modifier of your item is rolled again.</li>\n                  <li>Bright: one modifier is raised to its best value.</li>\n                  <li>White: the item gains a modifier found nowhere else.</li>\n                </ul>\n                <h3>For those who script their loot filters</h3>\n                <p>Forged items carry the tag <code>Forged True</code>, so a filter can show them in their own colour.</p>\n              </div>\n            </div>\n          </div>\n          <div class=\"ds-stack\">\n            <div class=\"ds-panel ds-frame\" data-component=\"panel\">\n              <h2 class=\"ds-panel__title\">Challenge rewards</h2>\n              <div class=\"ds-panel__body ds-stack ds-stack--tight\">\n                <div>\n                  <div class=\"ds-progress__label\"><strong>Ember cloak</strong><span>12 of 12</span></div>\n                  <span class=\"ds-progress ds-progress--100 ds-progress--health\"><span class=\"ds-progress__bar\"></span></span>\n                </div>\n                <div>\n                  <div class=\"ds-progress__label\"><strong>Ember wings</strong><span>24 of 24</span></div>\n                  <span class=\"ds-progress ds-progress--100 ds-progress--health\"><span class=\"ds-progress__bar\"></span></span>\n                </div>\n                <div>\n                  <div class=\"ds-progress__label\"><strong>Ember footprints</strong><span>27 of 36</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>Rewards stay on the account after the league.</span></div>\n            </div>\n            <a class=\"ds-video ds-frame\" href=\"#league\">\n              <div class=\"ds-scene ds-scene--3 ds-video__still\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span><span class=\"ds-video__play\">&#9654;</span></div>\n              <span class=\"ds-video__caption\"><strong>League trailer</strong><span>2:41</span></span>\n            </a>\n          </div>\n        </div>\n        <div>\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#league\">Standard <span class=\"ds-tabs__count\">15,000</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#league\">Hardcore <span class=\"ds-tabs__count\">4,200</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#league\">Solo</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#league\">Races</a></li>\n          </ul>\n          <div class=\"ds-frame ds-frame--plain\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th class=\"is-numeric\">Rank</th><th>Character</th><th>Class</th><th class=\"is-numeric\">Level</th><th class=\"is-numeric\">Challenges</th><th>Status</th></tr>\n              </thead>\n              <tbody>\n                <tr><td class=\"is-numeric\">1</td><td><span class=\"ds-table__who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c4 5 6 7 6 11a6 6 0 0 1-12 0c0-3 2-4 3-7 1 2 2 2 3-4z\"/></svg></span><a class=\"ds-link\" href=\"#league\">Ashwalker</a></span></td><td>Pyre witch</td><td class=\"is-numeric\">100</td><td class=\"is-numeric\">40</td><td><span class=\"ds-badge ds-badge--success\">Online</span></td></tr>\n                <tr><td class=\"is-numeric\">2</td><td><span class=\"ds-table__who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2v14M8 16h8M12 16v6\"/></svg></span><a class=\"ds-link\" href=\"#league\">Ninth Oath</a></span></td><td>Duelist</td><td class=\"is-numeric\">100</td><td class=\"is-numeric\">38</td><td><span class=\"ds-badge ds-badge--warning\">Away</span></td></tr>\n                <tr><td class=\"is-numeric\">3</td><td><span class=\"ds-table__who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 3c8 3 8 15 0 18M6 3v18M3 12h17M17 9l3 3-3 3\"/></svg></span><a class=\"ds-link\" href=\"#league\">Sable Reed</a></span></td><td>Ranger</td><td class=\"is-numeric\">99</td><td class=\"is-numeric\">40</td><td><span class=\"ds-badge ds-badge--success\">Online</span></td></tr>\n                <tr><td class=\"is-numeric\">4</td><td><span class=\"ds-table__who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z\"/></svg></span><a class=\"ds-link\" href=\"#league\">Old Marrow</a></span></td><td>Warden</td><td class=\"is-numeric\">99</td><td class=\"is-numeric\">36</td><td><span class=\"ds-badge ds-badge--danger\">Dead</span></td></tr>\n                <tr class=\"is-own\"><td class=\"is-numeric\">1,204</td><td><span class=\"ds-table__who\"><span class=\"ds-avatar ds-avatar--small ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2v14M8 16h8M12 16v6\"/></svg></span><a class=\"ds-link\" href=\"#league\">Your character</a></span></td><td>Duelist</td><td class=\"is-numeric\">87</td><td class=\"is-numeric\">27</td><td><span data-component=\"badge\"><span class=\"ds-badge\">You</span></span></td></tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n        <div class=\"ds-row ds-row--between\">\n          <span class=\"ds-muted\">Characters 1 to 5 of 15,000. The ladder is read again every five minutes.</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><span class=\"ds-pagination__link is-disabled\">Previous</span></li>\n            <li><span class=\"ds-pagination__link is-current\">1</span></li>\n            <li><a class=\"ds-pagination__link\" href=\"#league\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#league\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#league\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"shop\">\n      <div class=\"ds-page__inner\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#shop\">Shop</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li class=\"ds-breadcrumb__current\">Supporter packs</li>\n        </ol>\n        <div class=\"ds-page-header\" data-component=\"page-header\">\n          <div>\n            <h1 class=\"ds-page-header__title\">Supporter packs</h1>\n            <p class=\"ds-page-header__text\">Four packs pay for the next league. Each holds points and armour that only changes how you look.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#order\">Buy points only</a>\n          </div>\n        </div>\n        <div class=\"ds-grid\" data-component=\"grid\">\n          <div class=\"ds-grid__cell\">\n            <div class=\"ds-scene ds-scene--2 ds-grid__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <h2 class=\"ds-grid__title\">Kindling pack</h2>\n            <p class=\"ds-grid__text\">250 points, the Kindling hood and a forum title.</p>\n            <span class=\"ds-price\">30 USD</span>\n            <a class=\"ds-button\" href=\"#order\">Buy</a>\n          </div>\n          <div class=\"ds-grid__cell ds-grid__cell--2\">\n            <div class=\"ds-scene ds-scene--3 ds-grid__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <h2 class=\"ds-grid__title\">Brand pack</h2>\n            <p class=\"ds-grid__text\">550 points, the full Brand armour set and a weapon effect.</p>\n            <span class=\"ds-price\">60 USD</span>\n            <a class=\"ds-button\" href=\"#order\">Buy</a>\n          </div>\n          <div class=\"ds-grid__cell ds-grid__cell--3\">\n            <div class=\"ds-scene ds-grid__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <h2 class=\"ds-grid__title\">Pyre pack</h2>\n            <p class=\"ds-grid__text\">1,200 points, both armour sets, the Pyre wings and a portal.</p>\n            <span class=\"ds-price\">120 USD</span>\n            <a class=\"ds-button\" href=\"#order\">Buy</a>\n          </div>\n          <div class=\"ds-grid__cell ds-grid__cell--4\">\n            <div class=\"ds-scene ds-scene--2 ds-grid__art\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n            <h2 class=\"ds-grid__title\">Inferno pack</h2>\n            <p class=\"ds-grid__text\">2,600 points, everything above and a printed art book.</p>\n            <span class=\"ds-price\">240 USD</span>\n            <a class=\"ds-button\" href=\"#order\">Buy</a>\n          </div>\n        </div>\n        <div class=\"ds-split\">\n          <div class=\"ds-carousel ds-frame\">\n            <div class=\"ds-carousel__stage\">\n              <div class=\"ds-scene ds-carousel__picture\"><span class=\"ds-scene__sky\"></span><span class=\"ds-scene__far\"></span><span class=\"ds-scene__ruins\"></span><span class=\"ds-scene__gate\"></span><span class=\"ds-scene__haze\"></span><span class=\"ds-scene__near\"></span><span class=\"ds-scene__embers\"></span><span class=\"ds-scene__shade\"></span></div>\n              <a class=\"ds-carousel__arrow\" href=\"#shop\">&#9664;</a>\n              <a class=\"ds-carousel__arrow ds-carousel__arrow--next\" href=\"#shop\">&#9654;</a>\n            </div>\n            <div class=\"ds-carousel__foot\">\n              <span>Pyre armour set, seen at the gate. Picture 2 of 4.</span>\n              <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n            </div>\n          </div>\n          <div class=\"ds-stack\">\n            <div class=\"ds-accordion\">\n              <details class=\"ds-accordion__item\" open>\n                <summary class=\"ds-accordion__summary\">What is in the Pyre pack <span class=\"ds-accordion__meta\">7 things</span></summary>\n                <div class=\"ds-accordion__body\">\n                  <p>1,200 points, the Kindling hood, the Brand and Pyre armour sets, the Pyre wings, a portal effect and a forum title.</p>\n                </div>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__summary\">Can I upgrade a smaller pack later <span class=\"ds-accordion__meta\">Yes</span></summary>\n                <div class=\"ds-accordion__body\"><p>You pay the difference and keep what you had.</p></div>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__summary\">Do the items work in every league <span class=\"ds-accordion__meta\">Yes</span></summary>\n                <div class=\"ds-accordion__body\"><p>They belong to the account, not to a character.</p></div>\n              </details>\n            </div>\n            <div class=\"ds-row\">\n              <div class=\"ds-tooltip ds-tooltip--card\">\n                <span class=\"ds-tooltip__tip\">\n                  <span class=\"ds-tooltip__name ds-item ds-item--epic\">Pyre wings</span>\n                  <span class=\"ds-tooltip__line\"><span>Back attachment</span><span>Cosmetic</span></span>\n                  <span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>Burns brighter with your ember</span></span>\n                  <span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Account bound</span></span>\n                  <span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>What the fire leaves, it lends.</span></span>\n                </span>\n              </div>\n              <p class=\"ds-muted\">Hover any item name on the site for its window. Rarity decides the colour of the name: <span class=\"ds-item\">common</span>, <span class=\"ds-item ds-item--uncommon\">magic</span>, <span class=\"ds-item ds-item--rare\">rare</span>, <span class=\"ds-item ds-item--epic\">cosmetic</span>, <span class=\"ds-item ds-item--legendary\">unique</span>, <span class=\"ds-item ds-item--set\">set</span>.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"order\">\n      <div class=\"ds-page__inner\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#shop\">Shop</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li class=\"ds-breadcrumb__current\">Your order</li>\n        </ol>\n        <div class=\"ds-page-header\">\n          <div>\n            <h1 class=\"ds-page-header__title\">Your order</h1>\n            <p class=\"ds-page-header__text\">One Pyre pack for the account that is logged in.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#shop\">Back to the shop</a>\n          </div>\n        </div>\n        <div class=\"ds-notices\" data-component=\"notice\">\n          <div class=\"ds-notice\">\n            <p class=\"ds-notice__title\">Points arrive at once</p>\n            <p class=\"ds-notice__text\">Log out of the game and in again to see the armour in your stash.</p>\n          </div>\n          <div class=\"ds-notice ds-notice--error\">\n            <p class=\"ds-notice__title\">The payment was refused</p>\n            <p class=\"ds-notice__text\">The bank did not accept the card. Nothing was charged; check the address below and try again.</p>\n          </div>\n        </div>\n        <div class=\"ds-split ds-split--wide\">\n          <div class=\"ds-panel ds-frame\">\n            <h2 class=\"ds-panel__title\">Order details</h2>\n            <div class=\"ds-panel__body\">\n              <form class=\"ds-form\" data-component=\"form\" action=\"#order\">\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"o-account\">Account name</label>\n                  <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"o-account\" type=\"text\" value=\"ninth_oath\"></div>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"o-pack\">Pack</label>\n                  <div class=\"ds-form__field\">\n                    <select class=\"ds-form__select\" id=\"o-pack\"><option>Kindling pack, 30 USD</option><option>Brand pack, 60 USD</option><option selected>Pyre pack, 120 USD</option><option>Inferno pack, 240 USD</option></select>\n                  </div>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"o-mail\">Receipt to</label>\n                  <div class=\"ds-form__field\">\n                    <input class=\"ds-form__input is-error\" id=\"o-mail\" type=\"text\" value=\"oath@example\">\n                    <p class=\"ds-form__error\">This is not a full e-mail address.</p>\n                  </div>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"o-note\">Gift message</label>\n                  <div class=\"ds-form__field\">\n                    <textarea class=\"ds-form__textarea\" id=\"o-note\">For the long nights at the gate.</textarea>\n                    <p class=\"ds-form__hint\">Shown only when the pack is sent to another account.</p>\n                  </div>\n                </div>\n                <div class=\"ds-form__row\">\n                  <span class=\"ds-form__label\">Terms</span>\n                  <div class=\"ds-form__field\">\n                    <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I have read the terms of sale</label>\n                  </div>\n                </div>\n                <div class=\"ds-form__actions\" data-component=\"buttons\">\n                  <button class=\"ds-button\" type=\"button\">Pay 120 USD</button>\n                  <a class=\"ds-button ds-button--secondary\" href=\"#shop\">Change the pack</a>\n                  <button class=\"ds-button is-disabled\" type=\"button\" disabled>Pay with points</button>\n                  <span class=\"ds-form__actions-end\"><button class=\"ds-button ds-button--danger\" type=\"button\">Cancel the order</button></span>\n                </div>\n              </form>\n            </div>\n          </div>\n          <div class=\"ds-stack\">\n            <div class=\"ds-dialog__backdrop\">\n              <div class=\"ds-dialog\" data-component=\"dialog\">\n                <h2 class=\"ds-dialog__title\"><span>Cancel this order?</span><a class=\"ds-dialog__close\" href=\"#order\">x</a></h2>\n                <div class=\"ds-dialog__body\">\n                  <p class=\"ds-dialog__text\">The Pyre pack leaves your basket. Nothing has been charged yet.</p>\n                  <div class=\"ds-dialog__actions\">\n                    <a class=\"ds-button ds-button--secondary\" href=\"#order\">Keep it</a>\n                    <a class=\"ds-button ds-button--danger\" href=\"#shop\">Cancel the order</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"ds-panel ds-frame\">\n              <h2 class=\"ds-panel__title\">In the basket</h2>\n              <div class=\"ds-panel__body\">\n                <ul class=\"ds-list ds-list--tight\">\n                  <li class=\"ds-list__item\"><span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c4 5 6 7 6 11a6 6 0 0 1-12 0c0-3 2-4 3-7 1 2 2 2 3-4z\"/></svg></span><div class=\"ds-list__body\"><span class=\"ds-item ds-item--legendary\">Pyre pack</span><span class=\"ds-list__meta\">1,200 points and 6 items</span></div><span class=\"ds-price\">120 USD</span></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"support\">\n      <div class=\"ds-page__inner\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li><a class=\"ds-breadcrumb__link\" href=\"#support\">Support</a></li>\n          <li class=\"ds-breadcrumb__sep\">&#9670;</li>\n          <li class=\"ds-breadcrumb__current\">Help desk</li>\n        </ol>\n        <div class=\"ds-page-header\">\n          <div>\n            <h1 class=\"ds-page-header__title\">Help desk</h1>\n            <p class=\"ds-page-header__text\">Answers first, then a person. Most tickets are answered within a day.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button\" href=\"#support\">Write to support</a>\n          </div>\n        </div>\n        <div class=\"ds-page__columns\">\n          <div class=\"ds-page__main\">\n            <h2 class=\"ds-heading\">Asked most often</h2>\n            <div class=\"ds-accordion\">\n              <details class=\"ds-accordion__item\" open>\n                <summary class=\"ds-accordion__summary\">My pack has not arrived <span class=\"ds-accordion__meta\">Shop</span></summary>\n                <div class=\"ds-accordion__body\"><p>Log out and in again. If the points are still missing after an hour, send the receipt number and we will add them by hand.</p></div>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__summary\">The client stops while patching <span class=\"ds-accordion__meta\">Technical</span></summary>\n                <div class=\"ds-accordion__body\"><p>Close the client, delete the folder <code>patch-cache</code> and start it again.</p></div>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__summary\">What happens to my character when a league ends <span class=\"ds-accordion__meta\">League</span></summary>\n                <div class=\"ds-accordion__body\"><p>It moves to the permanent league with everything it owns.</p></div>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__summary\">I lost access to my e-mail address <span class=\"ds-accordion__meta\">Account</span></summary>\n                <div class=\"ds-accordion__body\"><p>Write to us from any address and name two characters on the account.</p></div>\n              </details>\n            </div>\n            <h2 class=\"ds-heading\">Your tickets</h2>\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=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z\"/></svg></span>\n              <h3 class=\"ds-empty__title\">No open tickets</h3>\n              <p class=\"ds-empty__text\">Nothing is waiting for an answer. Tickets you send appear here with their replies.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#support\">Write to support</a>\n            </div>\n          </div>\n          <aside class=\"ds-page__aside\">\n            <div class=\"ds-sidebar ds-frame\">\n              <h2 class=\"ds-sidebar__title\"><span>Server status</span></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\">Game servers</span><span class=\"ds-sidebar__meta\">Running</span></li>\n                <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--warning\"></span><span class=\"ds-sidebar__link\">Shop and payments</span><span class=\"ds-sidebar__meta\">Slow</span></li>\n                <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--danger\"></span><span class=\"ds-sidebar__link\">Trade search</span><span class=\"ds-sidebar__meta\">Down</span></li>\n              </ul>\n            </div>\n            <div class=\"ds-panel ds-frame\">\n              <h2 class=\"ds-panel__title\">Useful links</h2>\n              <div class=\"ds-panel__body\">\n                <ul class=\"ds-links\" data-component=\"links\">\n                  <li><a class=\"ds-link\" href=\"#support\">Patch notes 3.4</a></li>\n                  <li><a class=\"ds-link is-visited\" href=\"#support\">Known issues</a></li>\n                  <li><a class=\"ds-link is-hover\" href=\"#support\">Terms of sale</a></li>\n                  <li><a class=\"ds-link is-active\" href=\"#support\">Privacy notice</a></li>\n                </ul>\n                <p class=\"ds-panel__text ds-muted\">Normal, visited, hovered and pressed, in that order.</p>\n              </div>\n            </div>\n          </aside>\n        </div>\n      </div>\n    </section>\n\n  </main>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <div class=\"ds-footer__columns\">\n      <div><h2 class=\"ds-footer__title\">Home</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#home\">News</a></li><li><a class=\"ds-footer__link\" href=\"#order\">Create account</a></li><li><a class=\"ds-footer__link\" href=\"#order\">Log in</a></li><li><a class=\"ds-footer__link\" href=\"#support\">Patch notes</a></li></ul></div>\n      <div><h2 class=\"ds-footer__title\">Game</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#league\">Overview</a></li><li><a class=\"ds-footer__link\" href=\"#league\">Classes</a></li><li><a class=\"ds-footer__link\" href=\"#league\">Skill tree</a></li><li><a class=\"ds-footer__link\" href=\"#shop\">Items</a></li></ul></div>\n      <div><h2 class=\"ds-footer__title\">League</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#league\">Challenges</a></li><li><a class=\"ds-footer__link\" href=\"#league\">Ladder</a></li><li><a class=\"ds-footer__link\" href=\"#league\">Races</a></li></ul></div>\n      <div><h2 class=\"ds-footer__title\">Shop</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#shop\">Supporter packs</a></li><li><a class=\"ds-footer__link\" href=\"#shop\">Deal of the day</a></li><li><a class=\"ds-footer__link\" href=\"#order\">Buy points</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=\"#support\">Forum</a></li><li><a class=\"ds-footer__link\" href=\"#support\">Code of conduct</a></li><li><a class=\"ds-footer__link\" href=\"#support\">Fan sites</a></li></ul></div>\n      <div><h2 class=\"ds-footer__title\">Support</h2><ul class=\"ds-footer__links\"><li><a class=\"ds-footer__link\" href=\"#support\">Help desk</a></li><li><a class=\"ds-footer__link\" href=\"#support\">Server status</a></li><li><a class=\"ds-footer__link\" href=\"#support\">Terms of sale</a></li></ul></div>\n    </div>\n    <p class=\"ds-footer__note\">chronoskin is a specimen site. Free to play; the shop sells looks, never strength.</p>\n  </footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.game-fantasy.shop.s04.p02.t05.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"game-fantasy\",\n    \"years\": [\n      2004,\n      2026\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-gf-4253\",\n  \"short\": \"v1-gf-4253\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #1b130c;\n  --color-canvas: #e3d2a6;\n  --color-surface: #ecdfbb;\n  --color-surface-alt: #e0cd9c;\n  --color-surface-strong: #cfb67e;\n  --color-bar: #6e1a14;\n  --color-bar-text: #f4e3b5;\n  --color-bar-alt: #3a2a18;\n  --color-bar-alt-text: #e2cb94;\n  --color-inverse: #241a10;\n  --color-inverse-text: #ead9ab;\n  --color-text: #2e2112;\n  --color-text-muted: #6f5b3c;\n  --color-heading: #5e150f;\n  --color-heading-alt: #6b4313;\n  --color-link: #7b4f17;\n  --color-link-quiet: #5a4630;\n  --color-link-visited: #6d5a52;\n  --color-link-hover: #a3231a;\n  --color-link-active: #2e2112;\n  --color-border: #b79c62;\n  --color-border-strong: #8a6a2c;\n  --color-border-muted: #d1bd8a;\n  --color-accent: #2f5d34;\n  --color-accent-text: #f4e9c4;\n  --color-accent-alt: #a8551a;\n  --color-fill-1: #1d4f91;\n  --color-fill-2: #6b2a8c;\n  --color-fill-3: #a8480f;\n  --color-fill-4: #17695f;\n  --color-button: #7a1f17;\n  --color-button-text: #f8e7b8;\n  --color-button-hover-text: #fffbe8;\n  --color-button-secondary: #c9a85a;\n  --color-button-secondary-text: #2e2112;\n  --color-input: #f6ecd0;\n  --color-input-text: #2e2112;\n  --color-input-border: #9a8250;\n  --color-disabled: #d6c79d;\n  --color-disabled-text: #94835f;\n  --color-danger: #9c1c12;\n  --color-danger-surface: #efc9b0;\n  --color-success: #2f6b1f;\n  --color-warning: #9a6200;\n  --color-notice: #dfe0b4;\n  --color-notice-text: #3a3a16;\n  --color-focus: #1d4f91;\n  --color-shadow: #1a0f05;\n  --color-overlay: rgba(20, 12, 4, 0.6);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Alegreya Sans\", \"Source Sans 3\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: \"Cormorant Garamond\", Cormorant, Cochin, Baskerville, \"Palatino Linotype\", \"Times New Roman\", serif;\n  --font-ui: \"Alegreya Sans\", \"Source Sans 3\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: \"IBM Plex Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 14px;\n  --text-large: 19px;\n  --text-display: 52px;\n  --text-h1: 36px;\n  --text-h2: 25px;\n  --text-h3: 18px;\n  --line-body: 1.6;\n  --line-heading: 1.15;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 600;\n  --weight-display: 600;\n  --weight-ui: 600;\n  --heading-transform: uppercase;\n  --heading-tracking: 2px;\n  --display-tracking: 5px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: ridge;\n  --radius-control: 4px;\n  --radius-panel: 8px;\n  --radius-pill: 12px;\n  --radius-page: 12px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 75%, transparent), 0 6px 16px color-mix(in srgb, var(--color-shadow) 65%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), inset 0 -1px 0 color-mix(in srgb, black 25%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), inset 0 -1px 0 color-mix(in srgb, black 25%, transparent), 0 0 7px color-mix(in srgb, white 70%, transparent);\n  --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, black 45%, transparent);\n  --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 30%, transparent), 0 10px 24px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n  --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --fill-page: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--color-page), white 20%) 0, transparent 60%), repeating-linear-gradient(115deg, color-mix(in srgb, white 3%, transparent) 0, transparent 2px, transparent 9px, color-mix(in srgb, white 2%, transparent) 10px, transparent 23px), var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 30%) 0, color-mix(in srgb, var(--color-bar), white 10%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n  --fill-bar-alt: repeating-linear-gradient(90deg, color-mix(in srgb, white 4%, transparent) 0, transparent 1px, transparent 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 22%) 0, var(--color-bar-alt) 55%, color-mix(in srgb, var(--color-bar-alt), black 25%) 100%);\n  --fill-inverse: linear-gradient(135deg, color-mix(in srgb, white 9%, transparent) 0, transparent 35%, color-mix(in srgb, white 5%, transparent) 36%, transparent 70%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 10%) 0, var(--color-inverse) 100%);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, color-mix(in srgb, var(--color-accent), white 12%) 50%, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 16%) 100%);\n  --fill-panel: linear-gradient(120deg, transparent 0, transparent 30%, color-mix(in srgb, white 30%, transparent) 42%, transparent 55%), linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 55%) 0, var(--color-surface) 35%, color-mix(in srgb, var(--color-surface), black 8%) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 14%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 20%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 56%) 0, color-mix(in srgb, var(--color-button), white 26%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, color-mix(in srgb, var(--color-button), black 10%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%) 0, color-mix(in srgb, var(--color-button-secondary), white 25%) 50%, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 12%) 100%);\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 10%) 0, var(--color-input) 4px);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}