{
  "id": "v1-gf-8773",
  "long_id": "v1.game-fantasy.app.s08.p07.t07.u03",
  "name": "Game fantasy card table (tavern wood, green felt, brass)",
  "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": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "The site of a collectible card game as such sites have looked since about 2014: a wooden beam of navigation with the mark hanging from it, a felt table in a wooden rail with cards fanned on it, and below it boards nailed to a plank wall that hold the new cards, tavern news, the deck of the week and the sets in play. It is the warm, chunky end of the era: walnut and oak, green felt, brass rims and nails, sapphire gems for costs and buttons, a bold slab serif over a plain sans, everything with a thick lower lip as if cut from wood. The page is responsive, and every card is drawn in CSS from the palette: a framed small scene with a cost gem, a name plate and a text box.",
  "url": "https://chrono.skin/s/v1-gf-8773",
  "preview_url": "https://chrono.skin/s/v1-gf-8773/specimen.html",
  "files": {
    "STYLE.md": "# Game fantasy card table (tavern wood, green felt, brass)\n\n## Summary\n\nThe site of a collectible card game as such sites have looked since about 2014: a wooden beam of navigation with the mark hanging from it, a felt table in a wooden rail with cards fanned on it, and below it boards nailed to a plank wall that hold the new cards, tavern news, the deck of the week and the sets in play. It is the warm, chunky end of the era: walnut and oak, green felt, brass rims and nails, sapphire gems for costs and buttons, a bold slab serif over a plain sans, everything with a thick lower lip as if cut from wood. The page is responsive, and every card is drawn in CSS from the palette: a framed small scene with a cost gem, a name plate and a text box.\n\n## Layout\n\n- One centred column on the plank wall. `.ds-wrap` is at most `--size-page` (1240px) with `--space-5` gutters and stacks its blocks `--space-5` apart; the wall (`--fill-page`) shows around and between them, and no text is written on it. The navigation beam and the footer run from edge to edge. Designed at 1440px; under 1100px two-column blocks become one column and grids two across; under 700px the navigation links move to a second row, the gallery shows two cards across and grids become one column. Nothing scrolls sideways at 390px; the hand of cards and tables scroll inside themselves.\n- Order of the home page: the beam (`--size-nav`, 68px) with the brand's gem hanging below its edge; the hero, a `.ds-felt` table inside a wooden rail, copy on the left and four fanned cards (one face down) on the right; the `.ds-shelf` of figures; a `.ds-board` with the carousel of new cards; `.ds-columns` (a flexible board with the news list beside `--size-aside`, 360px: the deck of the week panel with its mana curve, and the collection box); a board with the four sets as grid cells; the closing band on card stock; the footer, a strip of felt under a wooden rail.\n- Inner pages keep the beam and the footer; the hero is left out. Each is one `.ds-board` that starts with the breadcrumb and the `.ds-page-header` (title and one line on the left, buttons on the right, a brass rule under it), then the working parts: `.ds-library` (the filter rail, `--size-rail` 270px, beside tabs, the gallery and pagination), `.ds-showcase` (one large card on its mat, 2 to 3 beside the text), `.ds-columns`, or a `.ds-split` (`--wide` is 3 to 2).\n- Views: `home`; `cards` (classes and switches in the rail, tabs by kind, eight cards, pagination); `card` (the large card, a keyword window, notes on the card with keyword tooltips, related links and badges); `decks` (notices, the deck list as a table, the accordion of questions, the mana curve, an empty deck slot); `build` (the deck form with a switch and its buttons, the dialog that deletes a deck, the draft so far).\n- Spacing scale: `--space-1` 4px (label to bar, inside a card), `--space-2` 8px (small gaps, card padding), `--space-3` 12px (between buttons, tight stacks), `--space-4` 16px (between cards and cells), `--space-5` 24px (between blocks and columns, panel padding), `--space-6` 40px (board padding), `--space-7` 60px (felt padding), `--space-8` 88px (the grid of dust in the lamp light).\n- Control heights: `--size-control-small` 32px, `--size-control` 44px, `--size-control-large` 56px. `--size-card` 190px is a card in a hand or gallery, `--size-card-large` 330px the card of its own page, `--size-gem` 38px a cost gem, `--size-curve` 120px the mana curve.\n- On a tablet or phone (1000px and below) the beam wraps: the brand and `.ds-nav__end` on the first row, `.ds-nav__links` below across the full width as a row of equal `.ds-nav__link` cells with centred text, the `.ds-menu` among them opening a list as wide as the row; `.ds-nav__purse` is already hidden below 1100px, and at 700px and below `.ds-tabs` scrolls sideways. Where the page is one column (1100px and below) a `.ds-tooltip__tip` opens under its line between the gutters; a table in `.ds-table__wrap` keeps its cells on one line and scrolls inside the wrapper.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Three families. `--font-heading` is a high-contrast serif (Playfair Display where installed, else Didot, Bodoni), in mixed case at regular weight, for titles, names and figures. `--font-body` and `--font-ui` are a soft humanist sans (Nunito Sans, Noto Sans, Avenir); labels, navigation, buttons, tabs and badges are small capitals of it, tracked by 1px to 3px. `--font-mono` only appears in inline code.\n- Sizes: `--text-base` 16px at `--line-body` 1.7; `--text-small` 13px; `--text-ui` 13px; `--text-large` 19px; `--text-h3` 21px, `--text-h2` 30px, `--text-h1` 44px for chapter titles; `--text-display` 64px for mastheads, hero names, figures and the band. The hero title is 1.3 times the display size, capped by the window width.\n- Palette: a pale sky page, a white sheet, three near-white surfaces, pale sky bars with deep blue lettering (`--color-bar`, `--color-bar-alt`), slate text under navy headings, gold for rules, rings and second headings (`--color-border-strong`, `--color-heading-alt`, `--color-accent-alt`), one rose accent, a warm gold primary button with dark lettering, and a twilight blue inverse block. `--color-shadow` is a soft blue, so shadows and distant shapes stay airy.\n- Surface: hairline borders, pill buttons and badges, 16px panels and a 28px sheet, a white gap and a gold hairline around every panel (`--shadow-panel`), soft blue drop shadows, a rose ring on hover, a page dotted with white (`--fill-page`), slow 0.25s easing. No glass: `--backdrop-blur` is 0.\n- The era's rule for text on fills is kept: on `--color-canvas` and the three surfaces (and `--fill-panel`) text is `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours; on `--fill-bar` only `--color-bar-text` (table heads, the dialog title); on `--fill-bar-alt` only `--color-bar-alt-text` (every `.ds-scene` and what lies on it: the top bar, hero copy, mastheads, the carousel title; and the footer); on `--fill-inverse` only `--color-inverse-text`; on `--fill-accent` only `--color-accent-text`; on `--fill-button` `--color-button-text`, on `--fill-button-secondary` `--color-button-secondary-text`; in a form well `--color-input-text`; on `--color-notice` `--color-notice-text` and on `--color-danger-surface` `--color-danger`. No text is written on `--color-page`.\n- `--color-fill-1` to `--color-fill-4`, the status colours and `--color-accent-alt` are inks and lights: a hero's colour (the sky in the arch and the crest), region cells as the surface tinted 24% by their fill, status badges on a 16% tint of themselves, progress bars. Never a fill under text.\n- The pictures. `.ds-scene`: the sky is `--fill-bar-alt`; the sun, its rings and the falling water are `--color-accent-alt`; a low glow is `--color-accent`; islands, mountains and the traveller are `--color-bar-alt` mixed toward `--color-shadow`, less for what is further away; the clouds are `--color-canvas`, so the sheet seems to rise out of them. `.ds-scene--2` to `--5` wash the sky with `--color-fill-1`, `--color-fill-3`, `--color-fill-4` and `--color-fill-2`. `.ds-figure`: the arch is a fill colour over `--color-surface`, the figure that colour mixed far toward `--color-shadow` and lit at one edge by `--color-accent-alt`. Every palette repaints them.\n- One-off values built in `components.css` from tokens: the mixes named above, percentages in `clip-path` polygons, gradients and the arch radius, `50%` radius for avatars, rings and the play disc, 45 degree turns for diamonds, tracking of 1px to 3px built from `--size-hair` and `--space-1`, `min()` of a size token and a share of the window width for the largest titles.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints the plank wall. `.ds-wrap` is the column of a view.\n- `.ds-nav`: the wooden beam: the brand, `.ds-nav__links` of `.ds-nav__link` (the current one a gem plate in `--fill-accent`; `is-current`, or in the specimen one selector per view), and `.ds-nav__end` with a `.ds-nav__purse` (a `.ds-coin` and a count) and one small primary button. One item is a `.ds-menu`.\n- `.ds-brand`: `.ds-brand__mark`, a 60px tile dressed as the primary button (`--fill-button`, `--color-button-text`, the brass rim, `--radius-control`, `--shadow-control`) that hangs below the beam, and `.ds-brand__name` in the heading face. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the wooden rail around a `.ds-felt` table. The felt holds `.ds-hero__copy` (a `.ds-tag`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`, `.ds-hero__note`) and a `.ds-fan` of four cards, the first face down.\n- `.ds-card`: one card, 5 to 7: `.ds-card__cost` (the gem), `.ds-card__art` (holding one inline SVG crest), `.ds-card__name` (the plate), `.ds-card__text` (the text box) and `.ds-card__stats` (a `.ds-card__stat` for attack, the kind, a `.ds-card__stat--life` for health; spells leave the figures out). `.ds-card--2`, `--3`, `--4` change the colour of the art; `.ds-card--large` is the card of its own page; `.ds-card--back` is a card face down. As a link in a hand or gallery it lifts on hover (`is-hover`).\n- `.ds-tag`: a gem label on `--fill-accent`.\n- `.ds-shelf`: the oak shelf under the hero that holds the `.ds-stats` row.\n- `.ds-board`: a slab in `--color-canvas` with a brass nail in each corner; `.ds-board__head` holds `.ds-board__title`, `.ds-board__sub` and `.ds-board__more` over a brass rule.\n- `.ds-carousel`: one hand of cards showing: `.ds-carousel__stage` holds a `.ds-carousel__slide` (a row of cards that scrolls inside itself with scroll snapping on a narrow window) and two round `.ds-carousel__arrow`s (`--next`); `.ds-carousel__foot` a caption and `.ds-carousel__dots` of `.ds-carousel__dot`.\n- `.ds-keyword`: a keyword in running text, the trigger of a tooltip.\n- `.ds-curve`: the mana curve: `.ds-curve__col` per cost with a count, a `.ds-curve__bar` (height by `--25`, `--40`, `--60`, `--75`, `--100`) and a `.ds-curve__cost`.\n- `.ds-library`: the filter rail beside the main column. `.ds-gallery`: the grid of cards, each a `.ds-gallery__item` with the card, its name as a `.ds-item` and a `.ds-gallery__meta`.\n- `.ds-showcase`: the large card beside the text. `.ds-mat`: the felt mat a large card lies on, with a `.ds-mat__note`.\n- `.ds-who`: an avatar beside `.ds-who__name` and `.ds-who__meta`.\n- `.ds-page-header`: `.ds-page-header__title`, `.ds-page-header__text`, `.ds-page-header__actions`, a brass rule below.\n- `.ds-prose`: running text: h1, h2 (ruled underneath), h3 (in `--color-heading-alt`), paragraphs, lists, `code`, links. `.ds-prose__lead` is the opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet`. `.ds-links` is a wrapping row.\n- `.ds-button`: a gem plate, 44px high, with a lit top and a dark lip. `.ds-button--secondary` (a wooden plate); `.ds-button--danger` (wooden plate, danger ink and edge); `.ds-button--large` (56px); `.ds-button--small` (32px). States `is-hover` (brass glow from `--shadow-control-hover`), `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row.\n- `.ds-form`: rows (`.ds-form__row`) of a `.ds-form__label` (170px; above the field on a phone) and a `.ds-form__field`. `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`; `.ds-form__input--short`; `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, `.ds-form__actions-end`. `.ds-form--inline` is one field and one button in a line.\n- `.ds-switch`: an on and off row over a checkbox: `.ds-switch__label`, `.ds-switch__hint`, the hidden `.ds-switch__input` and the `.ds-switch__track`, which takes `--fill-accent` when on (`is-on` by class). Used for library filters and deck options.\n- `.ds-table`: a data table in a flush panel body with `.ds-table__wrap`. The head row takes `--fill-bar`; `is-numeric`, `is-centre`; `.ds-table__sub` a second line; `.ds-table__who`; `is-own` marks the reader's row.\n- `.ds-list`: ruled rows: `.ds-list__item` with a `.ds-list__date` (a leaf of card stock, `.ds-list__month` over the day), a `.ds-list__body` (`.ds-list__title`, `.ds-list__text`, `.ds-list__meta`) and perhaps a badge. `.ds-list--tight` is the dense form.\n- `.ds-panel`: a box with a lit top and a lip: `.ds-panel__title` (may hold a badge at the right), `.ds-panel__body` (`--flush`), `.ds-panel__text`, `.ds-panel__foot`.\n- `.ds-stat`: one figure, `.ds-stat__value` over `.ds-stat__label`, with a rule at its left; four sit in a `.ds-stats` row. On the shelf both are written in `--color-bar-text`.\n- `.ds-grid`: four `.ds-grid__cell` across (`--two`, `--three`), tinted and edged by `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4`. Inside: `.ds-grid__icon` (a crest on a round brass-rimmed disc), `.ds-grid__title`, `.ds-grid__text`, a badge; `.ds-grid__more` is available.\n- `.ds-tabs`: wooden plates standing on a brass rule; `.ds-tabs__tab`, `is-current` in `--fill-accent`; `.ds-tabs__count` a number.\n- `.ds-badge`: a label in `--fill-accent`; `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, `.ds-badge--quiet`, `.ds-badge--new`. `.ds-badges` is a row; `.ds-dot` with `--success`, `--warning`, `--danger` a lamp.\n- `.ds-item`: a card name in its rarity colour: plain for common, `--uncommon`, `--rare`, `--epic`, `--legendary`, `--set`.\n- `.ds-tooltip`: the keyword window: a trigger wrapping a `.ds-tooltip__tip` shown on hover or focus (`is-open`, `.ds-tooltip--end`), with `.ds-tooltip__name` and `.ds-tooltip__line` rows (`--bonus`, `--muted`, `--lore`). `.ds-tooltip--card` writes the window into the page.\n- `.ds-progress`: a sunk track with a `.ds-progress__bar`; width by `--10` to `--100`, colour by `--health`, `--xp`, `--rep`, `--danger`; `.ds-progress__label` above. Used for the collection, win rates and a draft.\n- `.ds-avatar`: a round class crest (inline SVG) on a `--color-surface-strong` disc with a brass rim; `.ds-avatar--small`, `.ds-avatar--large`; `--1` to `--4` colour it.\n- `.ds-accordion`: `<details>` sections: `.ds-accordion__item`, `.ds-accordion__summary`, `.ds-accordion__meta`, `.ds-accordion__body`.\n- `.ds-menu`: the drop-down under a navigation item: `.ds-menu__list` of `.ds-menu__item`, shown on hover or focus (`is-open`); `.ds-menu__caret`.\n- `.ds-columns`: a flexible column beside a 360px one. `.ds-sidebar`: a box of a narrow column: `.ds-sidebar__title`, a `.ds-sidebar__list` of `.ds-sidebar__item` rows with a `.ds-sidebar__link` and `.ds-sidebar__meta`.\n- `.ds-notice`: a ruled message with `.ds-notice__title` and `.ds-notice__text`; `.ds-notice--error`. `.ds-notices` stacks several.\n- `.ds-pagination`: wooden plates, `.ds-pagination__link`; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: a small trail: `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (an angle), `.ds-breadcrumb__current`.\n- `.ds-dialog`: `.ds-dialog__title` on `--fill-bar` with `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`; `.ds-dialog__backdrop` behind it.\n- `.ds-empty`: an empty slot: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text`, one secondary button.\n- `.ds-band`: the closing call on `--fill-inverse` with a brass rim: `.ds-band__title` and `.ds-band__text` on the left, one large button on the right. At most one per page.\n- `.ds-footer`: the closing strip of felt in `--fill-bar-alt` under a wooden rail: `.ds-footer__inner` holds the brand, `.ds-footer__links` of `.ds-footer__link` and a `.ds-footer__note`.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, the home view when none is.\n- `.ds-heading` (`--centre`), `.ds-rule`, `.ds-stack` (`--tight`), `.ds-split` (`--wide`), `.ds-row` (`--between`), `.ds-muted`, `.ds-icon`: helpers.\n\n## Never\n\n- `font-size >= 13px`: labels and meta text are the smallest text.\n- `font-size <= 84px`: the hero title is the largest text.\n- `font-weight <= 700`: titles are regular weight; bold belongs to labels and names in running text.\n- `font-families <= 3`: a high-contrast serif, a soft sans and a monospace for code.\n- `line-height >= 1.6`: body text is set open.\n- `letter-spacing <= 3px`: small capitals are tracked 1px to 3px, titles hardly at all.\n- `underlined-links <= 5%`: links are told apart by colour; only a hovered link is underlined.\n- `border-radius <= 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 new part of a page is a `.ds-board` with its head; nothing is written on the wall. A box inside a board is a `.ds-panel` or a `.ds-sidebar`; anything a player would pick up is a `.ds-card` with its five parts, and a new card picture is one fill colour and one filled crest, never a face. Raised things (plates, gems, cards) take a `--fill-*` gradient, the brass rim and `--shadow-control` or `--shadow-panel`; sunk things (wells, tracks) take `--fill-input` and `--shadow-control-pressed`; felt (`--fill-bar-alt`) is only for where cards lie. Keep the rule for text on fills and keep rarity and status colours as ink. Do not add images, thin hairline cards, capitals, a second accent or movement.\n",
    "components.css": "/* Layout tokens (structure part). The site of a collectible card game,\n   2014 to today: a wooden beam of navigation with the mark hanging from it,\n   a felt table in a wooden rail with three cards fanned on it, a shelf of\n   figures, then boards nailed to the wall: the new set as a row of cards,\n   tavern news beside the deck of the week, the sets in play. Inner pages\n   are the card library with its filter rail, one card, a deck list with\n   its mana curve, and the deck builder. */\n:root {\n  --size-page: 1240px;\n  --size-nav: 68px;\n  --size-brand: 60px;\n  --size-hair: 1px;\n  --size-control: 44px;\n  --size-control-small: 32px;\n  --size-control-large: 56px;\n  --size-icon: 18px;\n  --size-dot: 8px;\n  --size-crest: 48px;\n  --size-crest-large: 96px;\n  --size-bar: 12px;\n  --size-label: 170px;\n  --size-field-short: 240px;\n  --size-textarea: 110px;\n  --size-dialog: 460px;\n  --size-tip: 290px;\n  --size-menu: 220px;\n  --size-switch: 48px;\n  --size-stat: 170px;\n  --size-aside: 360px;\n  --size-rail: 270px;\n  --size-card: 190px;\n  --size-card-large: 330px;\n  --size-gem: 38px;\n  --size-curve: 120px;\n  --size-date: 56px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 40px;\n  --space-7: 60px;\n  --space-8: 88px;\n}\n\n/* ---------- views: one screen of the example site at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- small layout helpers ---------- */\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-stack--tight {\n  gap: var(--space-3);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-split--wide {\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n}\n.ds-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-row--between {\n  justify-content: space-between;\n}\n.ds-muted {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-icon {\n  display: inline-block;\n  flex: none;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  vertical-align: middle;\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 {\n  padding-bottom: var(--space-2);\n  font-size: var(--text-h2);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-prose h3 {\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n}\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding-left: var(--space-5);\n}\n.ds-prose li { margin-bottom: var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n  padding: 0 var(--space-2);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n  color: var(--color-heading-alt);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n\n/* ---------- links ---------- */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-5);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button), var(--color-shadow) 60%);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: color-mix(in srgb, var(--color-button-secondary), var(--color-shadow) 60%);\n  text-shadow: none;\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n  text-shadow: none;\n}\n.ds-button--secondary.is-hover,\n.ds-button--secondary:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-button--small {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: var(--color-border);\n  box-shadow: none;\n  text-shadow: none;\n  cursor: default;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  gap: var(--space-2) var(--space-4);\n  align-items: start;\n}\n.ds-form__label {\n  padding-top: var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-form__field {\n  min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  display: block;\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: var(--size-textarea);\n  resize: vertical;\n}\n.ds-form__input--short {\n  width: var(--size-field-short);\n  max-width: 100%;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: var(--space-2) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin: 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__actions-end {\n  margin-left: auto;\n}\n.ds-form--inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form--inline .ds-form__input {\n  flex: 1 1 var(--size-field-short);\n  width: auto;\n  min-height: var(--size-control-large);\n}\n\n/* ---------- switch: an on and off control over a checkbox ---------- */\n.ds-switch {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  color: var(--color-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: var(--size-switch);\n  height: calc(var(--size-switch) / 2);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control-pressed);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--size-switch) / 2 - var(--space-1) * 2 - var(--border-width) * 2);\n  background: var(--color-input-border);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background: var(--fill-accent);\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(var(--size-switch) / 2);\n  background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n}\n.ds-switch__label {\n  display: block;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-switch__hint {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- table ---------- */\n.ds-table__wrap {\n  max-width: 100%;\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  vertical-align: middle;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n}\n.ds-table .is-numeric {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table .is-centre {\n  text-align: center;\n}\n.ds-table__sub {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-table__who {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-table .is-own td {\n  background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n  border-top: 0;\n}\n.ds-list__body {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--heading-transform);\n}\n.ds-list__title:hover {\n  color: var(--color-link-hover);\n}\n.ds-list__text {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text);\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list--tight .ds-list__item {\n  align-items: center;\n  padding: var(--space-3) 0;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n  position: relative;\n  min-width: 0;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__body--flush {\n  padding: 0;\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n  margin-bottom: 0;\n}\n.ds-panel__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- stats ---------- */\n.ds-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--size-stat), 1fr));\n}\n.ds-stat {\n  padding: var(--space-4) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat:first-child {\n  border-left: 0;\n}\n.ds-stat__value {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n\n/* ---------- grid: cells tinted by the four fill colours ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: var(--space-5);\n  background: color-mix(in srgb, var(--color-fill-1) 24%, var(--color-surface));\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 60%, var(--color-border));\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n  background: color-mix(in srgb, var(--color-fill-2) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-2) 60%, var(--color-border));\n}\n.ds-grid__cell--3 {\n  background: color-mix(in srgb, var(--color-fill-3) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-3) 60%, var(--color-border));\n}\n.ds-grid__cell--4 {\n  background: color-mix(in srgb, var(--color-fill-4) 24%, var(--color-surface));\n  border-color: color-mix(in srgb, var(--color-fill-4) 60%, var(--color-border));\n}\n.ds-grid__icon {\n  width: var(--size-crest);\n  height: var(--size-crest);\n  color: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__icon { color: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__icon { color: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__icon { color: var(--color-fill-4); }\n.ds-grid__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  flex: 1;\n  margin: 0;\n}\n.ds-grid__more {\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-grid__more:hover {\n  color: var(--color-link-hover);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-5);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: 0;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-border-strong);\n}\n.ds-tabs__count {\n  opacity: 0.75;\n  font-size: var(--text-small);\n}\n\n/* ---------- badge, lamp and item name ---------- */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));\n  color: var(--color-success);\n  border-color: var(--color-success);\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));\n  color: var(--color-warning);\n  border-color: var(--color-warning);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-color: var(--color-border);\n}\n.ds-badge--new {\n  background: transparent;\n  color: var(--color-accent-alt);\n  border-color: var(--color-accent-alt);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-dot {\n  display: inline-block;\n  flex: none;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-text-muted);\n  border-radius: 50%;\n}\n.ds-dot--success { background: var(--color-success); }\n.ds-dot--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--25 .ds-progress__bar { width: 25%; }\n.ds-progress--60 .ds-progress__bar { width: 60%; }\n.ds-progress--health .ds-progress__bar { background: var(--color-success); }\n.ds-progress--xp .ds-progress__bar { background: var(--color-fill-2); }\n.ds-progress--rep .ds-progress__bar { background: var(--color-warning); }\n.ds-progress__label {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-1);\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-progress__label strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- avatar: a crest on a small tile ---------- */\n.ds-avatar {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-crest);\n  height: var(--size-crest);\n  padding: var(--space-2);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-avatar svg {\n  width: 100%;\n  height: 100%;\n}\n.ds-avatar--small {\n  width: var(--size-control);\n  height: var(--size-control);\n  padding: var(--space-1);\n}\n.ds-avatar--large {\n  width: var(--size-crest-large);\n  height: var(--size-crest-large);\n  padding: var(--space-3);\n}\n.ds-avatar--1 { color: var(--color-fill-1); }\n.ds-avatar--2 { color: var(--color-fill-2); }\n.ds-avatar--3 { color: var(--color-fill-3); }\n.ds-avatar--4 { color: var(--color-fill-4); }\n\n/* ---------- accordion ---------- */\n.ds-accordion {\n  display: flex;\n  flex-direction: column;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-accordion__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item:first-child {\n  border-top: 0;\n}\n.ds-accordion__summary {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__summary::before {\n  content: \"\";\n  display: block;\n  flex: none;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  background: linear-gradient(currentColor, currentColor) center / calc(calc(var(--space-1) / 2) * 5) calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) calc(calc(var(--space-1) / 2) * 5) no-repeat,\n    var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n  background: linear-gradient(currentColor, currentColor) center / calc(calc(var(--space-1) / 2) * 5) calc(var(--space-1) / 2) no-repeat,\n    var(--fill-button-secondary);\n}\n.ds-accordion__item[open] > .ds-accordion__summary {\n  color: var(--color-heading-alt);\n}\n.ds-accordion__meta {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n  text-transform: none;\n}\n.ds-accordion__body {\n  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + var(--size-control-small) + var(--space-3));\n  color: var(--color-text);\n}\n.ds-accordion__body p {\n  margin: 0 0 var(--space-3);\n}\n.ds-accordion__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* ---------- menu: the drop-down under a navigation item ---------- */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__caret {\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 40;\n  display: none;\n  min-width: var(--size-menu);\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n  display: block;\n}\n.ds-menu__item {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-link-hover);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 40%, transparent);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-notice-text);\n  border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n}\n.ds-notice__title {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n  margin: var(--space-1) 0 0;\n}\n.ds-notices {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  min-height: var(--size-control);\n  padding: calc(var(--figure-shift) * -2) var(--space-3) calc(var(--figure-shift) * 2);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: 1;\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n  opacity: 0.8;\n}\n.ds-breadcrumb__link:hover {\n  opacity: 1;\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n  opacity: 0.5;\n}\n.ds-breadcrumb__current {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n.ds-dialog {\n  width: 100%;\n  max-width: var(--size-dialog);\n  margin: 0 auto;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  color: inherit;\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: var(--radius-control);\n  font-size: 0;\n  text-decoration: none;\n  opacity: 0.8;\n}\n.ds-dialog__close::before {\n  content: \"\";\n  width: calc(calc(var(--space-1) / 2) * 5);\n  height: calc(calc(var(--space-1) / 2) * 5);\n  background: linear-gradient(currentColor, currentColor) center / 100% calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) 100% no-repeat;\n  rotate: 45deg;\n}\n.ds-dialog__body {\n  padding: var(--space-5);\n}\n.ds-dialog__text {\n  margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-3);\n}\n.ds-dialog__backdrop {\n  padding: var(--space-6) var(--space-4);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-crest);\n  height: var(--size-crest);\n  color: var(--color-text-muted);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  margin: 0;\n  max-width: 48ch;\n  color: var(--color-text-muted);\n}\n\n/* ---------- carousel: one slide showing, arrows and diamond dots ---------- */\n.ds-carousel {\n  position: relative;\n  min-width: 0;\n}\n.ds-carousel__stage {\n  position: relative;\n}\n.ds-carousel__arrow {\n  position: absolute;\n  top: 50%;\n  left: var(--space-3);\n  z-index: 3;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n  line-height: 1;\n  text-decoration: none;\n  transform: translateY(-50%);\n  transition: var(--transition);\n}\n.ds-carousel__arrow--next {\n  right: var(--space-3);\n  left: auto;\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-carousel__dots {\n  display: flex;\n  gap: var(--space-3);\n  padding: 0 var(--space-2);\n}\n.ds-carousel__dot {\n  display: block;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-border);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  transform: rotate(45deg);\n}\n.ds-carousel__dot.is-current {\n  background: var(--color-accent-alt);\n}\n\n/* ---------- ornament: a heading between rules, a rule with a diamond ---------- */\n.ds-heading {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-heading::after {\n  content: \"\";\n  flex: 1;\n  height: var(--size-hair);\n  background: linear-gradient(to right, var(--color-border-strong), transparent);\n}\n.ds-rule {\n  position: relative;\n  height: var(--size-hair);\n  margin: var(--space-3) 0;\n  background: linear-gradient(to right, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);\n}\n.ds-rule::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-border-strong);\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n/* ================= layout of this pack ================= */\n\n.ds-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  width: 100%;\n  max-width: calc(var(--size-page) + var(--space-5) * 2);\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-5) var(--space-7);\n}\n\n/* ---------- nav: a wooden beam, the mark hanging below it ---------- */\n.ds-nav {\n  position: relative;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-6);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--color-shadow) 70%, transparent);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-4);\n  color: inherit;\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-ui);\n  font-weight: var(--weight-ui);\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) 40%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:has(#cards:target) .ds-nav__link[href=\"#cards\"],\n.ds-page:has(#card:target) .ds-nav__link[href=\"#cards\"],\n.ds-page:has(#decks:target) .ds-nav__link[href=\"#decks\"],\n.ds-page:has(#build:target) .ds-nav__link[href=\"#build\"],\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  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.ds-nav__end {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-nav__purse {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-shadow: var(--shadow-text);\n}\n.ds-coin {\n  display: inline-block;\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  background: radial-gradient(circle at 35% 30%, var(--color-accent-alt) 0, var(--color-border-strong) 60%, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 50%) 100%);\n  border-radius: 50%;\n}\n\n/* ---------- brand: a round gem in a brass rim, hung under the beam ---------- */\n.ds-brand {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-brand);\n  height: var(--size-brand);\n  margin: var(--space-2) 0 calc(var(--space-4) * -1);\n  padding: var(--space-3);\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);\n}\n.ds-brand__mark svg {\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- card: a framed small scene with a cost gem, a name plate\n   and a text box ----------\n   The frame is the panel fill in the frame metal. The art is a sky of one\n   fill colour over the alternate bar colour with a low sun in the second\n   accent, hills and a creature's crest in that bar colour mixed toward the\n   shadow colour. The cost gem is the accent fill, the name plate the bar\n   fill and the text box the inverse fill, each with its own text colour. */\n.ds-card {\n  position: relative;\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  gap: var(--space-1);\n  width: 100%;\n  max-width: var(--size-card);\n  aspect-ratio: 5 / 7;\n  padding: var(--space-2);\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  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-card__art {\n  position: relative;\n  display: block;\n  flex: 1 1 0;\n  min-height: 0;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--color-accent-alt) 85%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 20%, color-mix(in srgb, var(--color-accent-alt) 14%, transparent) 21%, transparent 60%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 2%, transparent 4%) 0 0 / 37% 29%,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-1) 30%, var(--color-bar-alt)) 0, color-mix(in srgb, var(--color-fill-1) 62%, var(--color-bar-alt)) 70%, color-mix(in srgb, var(--color-fill-1) 30%, var(--color-bar-alt)) 100%);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 40%);\n  border-radius: var(--radius-control);\n}\n.ds-card__art::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) 46%) 55%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 78%) 100%);\n  clip-path: polygon(0 100%, 0 70%, 8% 64%, 15% 68%, 24% 58%, 31% 66%, 40% 62%, 50% 70%, 60% 64%, 69% 68%, 78% 58%, 86% 66%, 93% 62%, 100% 68%, 100% 100%);\n}\n.ds-card__art::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(ellipse 70% 16% at 50% 100%, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 86%) 0, color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 86%) 96%, transparent 100%),\n    radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, color-mix(in srgb, var(--color-shadow) 55%, transparent) 100%);\n}\n.ds-card__art svg {\n  position: absolute;\n  top: 14%;\n  left: 20%;\n  z-index: 1;\n  width: 60%;\n  height: 74%;\n  color: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 84%);\n}\n.ds-card--2 .ds-card__art {\n  background:\n    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--color-accent-alt) 85%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 20%, color-mix(in srgb, var(--color-accent-alt) 14%, transparent) 21%, transparent 60%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2) 30%, var(--color-bar-alt)) 0, color-mix(in srgb, var(--color-fill-2) 62%, var(--color-bar-alt)) 70%, color-mix(in srgb, var(--color-fill-2) 30%, var(--color-bar-alt)) 100%);\n}\n.ds-card--3 .ds-card__art {\n  background:\n    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--color-accent-alt) 85%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 20%, color-mix(in srgb, var(--color-accent-alt) 14%, transparent) 21%, transparent 60%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 2%, transparent 4%) 0 0 / 29% 23%,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3) 30%, var(--color-bar-alt)) 0, color-mix(in srgb, var(--color-fill-3) 66%, var(--color-bar-alt)) 70%, color-mix(in srgb, var(--color-fill-3) 30%, var(--color-bar-alt)) 100%);\n}\n.ds-card--4 .ds-card__art {\n  background:\n    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--color-accent-alt) 85%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 20%, color-mix(in srgb, var(--color-accent-alt) 14%, transparent) 21%, transparent 60%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4) 30%, var(--color-bar-alt)) 0, color-mix(in srgb, var(--color-fill-4) 62%, var(--color-bar-alt)) 70%, color-mix(in srgb, var(--color-fill-4) 30%, var(--color-bar-alt)) 100%);\n}\n.ds-card__cost {\n  position: absolute;\n  top: calc(var(--space-3) * -1);\n  left: calc(var(--space-3) * -1);\n  z-index: 3;\n  display: block;\n  width: var(--size-gem);\n  height: var(--size-gem);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  text-shadow: var(--shadow-text);\n  align-content: center;\n  text-align: center;\n  padding-top: calc(var(--figure-shift) * -2);\n  padding-bottom: calc(var(--figure-shift) * 2);\n  font-variant-numeric: tabular-nums;\n}\n.ds-card__name {\n  position: relative;\n  z-index: 2;\n  display: block;\n  overflow: hidden;\n  margin: calc(var(--space-3) * -1) calc(var(--space-1) * -1) 0;\n  padding: var(--space-1) var(--space-2);\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  font-family: var(--font-heading);\n  font-size: var(--text-small);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-align: center;\n  text-overflow: ellipsis;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n}\n.ds-card__text {\n  display: flex;\n  flex: 0 0 27%;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: var(--space-1) var(--space-2);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-control);\n  font-size: var(--text-small);\n  line-height: 1.25;\n  text-align: center;\n}\n.ds-card__stats {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\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  line-height: 1;\n  min-height: calc(var(--size-gem) * 0.66);\n}\n.ds-card__stat {\n  display: inline-block;\n  flex: none;\n  min-width: calc(var(--size-gem) * 0.66);\n  height: calc(var(--size-gem) * 0.66);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border: var(--border-width) var(--border-style) var(--color-warning);\n  border-radius: var(--radius-control);\n  font-size: var(--text-base);\n  align-content: center;\n  text-align: center;\n  line-height: 1;\n  padding-top: calc(var(--figure-shift) * -2);\n  padding-bottom: calc(var(--figure-shift) * 2);\n  font-variant-numeric: tabular-nums;\n}\n.ds-card__stat--life {\n  border-color: var(--color-danger);\n  border-radius: 50%;\n}\n.ds-gallery .ds-card:hover,\n.ds-carousel .ds-card:hover,\n.ds-card.is-hover {\n  box-shadow: var(--shadow-control-hover), var(--shadow-panel);\n  transform: translateY(calc(var(--space-2) * -1));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-gallery .ds-card:hover::after,\n.ds-carousel .ds-card:hover::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  right: 0;\n  left: 0;\n  height: var(--space-2);\n}\n/* the large card of a card's own page */\n.ds-card--large {\n  gap: var(--space-2);\n  max-width: var(--size-card-large);\n  padding: var(--space-3);\n}\n.ds-card--large .ds-card__cost {\n  width: calc(var(--size-gem) * 1.6);\n  height: calc(var(--size-gem) * 1.6);\n  font-size: var(--text-h1);\n}\n.ds-card--large .ds-card__name {\n  padding: var(--space-2) var(--space-3);\n  font-size: var(--text-h3);\n}\n.ds-card--large .ds-card__text {\n  padding: var(--space-2) var(--space-4);\n  font-size: var(--text-base);\n}\n.ds-card--large .ds-card__stats {\n  min-height: var(--size-gem);\n  font-size: var(--text-base);\n}\n.ds-card--large .ds-card__stat {\n  min-width: var(--size-gem);\n  height: var(--size-gem);\n  font-size: var(--text-h3);\n}\n/* the back of a card: a lattice around one gem */\n.ds-card--back {\n  background:\n    radial-gradient(circle at 50% 50%, var(--color-accent-alt) 0, var(--color-accent) 9%, color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%) 15%, var(--color-border-strong) 16%, var(--color-border-strong) 19%, transparent 20%),\n    repeating-linear-gradient(45deg, transparent 0, transparent var(--space-2), color-mix(in srgb, var(--color-border-strong) 50%, transparent) var(--space-2), color-mix(in srgb, var(--color-border-strong) 50%, transparent) calc(var(--space-2) + var(--size-hair))),\n    repeating-linear-gradient(-45deg, transparent 0, transparent var(--space-2), color-mix(in srgb, var(--color-border-strong) 50%, transparent) var(--space-2), color-mix(in srgb, var(--color-border-strong) 50%, transparent) calc(var(--space-2) + var(--size-hair))),\n    var(--fill-bar);\n}\n\n/* ---------- hero: a felt table in a wooden rail, three cards fanned on it ---------- */\n.ds-hero {\n  padding: var(--space-3);\n  background: var(--fill-bar);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar), var(--color-shadow) 60%);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-felt {\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: center;\n  overflow: hidden;\n  padding: var(--space-7) var(--space-7);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: calc(var(--radius-page) - var(--space-2));\n  box-shadow: inset 0 0 var(--space-7) color-mix(in srgb, var(--color-shadow) 80%, transparent), inset 0 var(--space-1) 0 color-mix(in srgb, var(--color-shadow) 60%, transparent);\n}\n/* the lamp above the table and the dust in its light */\n.ds-felt::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    radial-gradient(ellipse 46% 70% at 72% 44%, color-mix(in srgb, var(--color-accent-alt) 34%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 10%, transparent) 50%, transparent 76%),\n    radial-gradient(circle, color-mix(in srgb, var(--color-accent-alt) 60%, transparent) 0, color-mix(in srgb, var(--color-accent-alt) 60%, transparent) 0.9%, transparent 1.8%) 0 0 / calc(var(--space-8) * 1.7) calc(var(--space-8) * 1.3),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-alt-text) 30%, transparent) 0, color-mix(in srgb, var(--color-bar-alt-text) 30%, transparent) 0.7%, transparent 1.5%) var(--space-6) var(--space-5) / calc(var(--space-8) * 2.3) calc(var(--space-8) * 1.9);\n}\n/* a chalk ring where the cards are played */\n.ds-felt::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 73%;\n  z-index: -1;\n  width: 50%;\n  aspect-ratio: 1;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 var(--space-3) transparent, inset 0 0 0 calc(var(--space-3) + var(--size-hair)) color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent);\n  transform: translate(-50%, -50%);\n}\n.ds-hero__copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-4);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-pill);\n  box-shadow: var(--shadow-control);\n  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}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: min(calc(var(--text-display) * 1.25), 12vw);\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: 46ch;\n  font-size: var(--text-large);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin-top: var(--space-2);\n}\n.ds-hero__note {\n  margin: 0;\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n.ds-fan {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-5) 0;\n}\n.ds-fan > .ds-card {\n  flex: 0 1 var(--size-card);\n  margin-left: calc(var(--space-6) * -1);\n}\n.ds-fan > .ds-card:nth-child(1) {\n  margin-left: 0;\n  transform: translateY(var(--space-4)) rotate(-16deg);\n}\n.ds-fan > .ds-card:nth-child(2) {\n  transform: translateY(var(--space-5)) rotate(-9deg);\n}\n.ds-fan > .ds-card:nth-child(3) {\n  z-index: 2;\n  transform: translateY(calc(var(--space-3) * -1));\n}\n.ds-fan > .ds-card:nth-child(4) {\n  z-index: 1;\n  transform: translateY(var(--space-5)) rotate(9deg);\n}\n\n/* ---------- shelf: figures on brass plates along a wooden shelf ---------- */\n.ds-shelf {\n  padding: var(--space-4) var(--space-5);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar), var(--color-shadow) 60%);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-shelf .ds-stat {\n  border-left-color: color-mix(in srgb, var(--color-bar-text) 26%, transparent);\n}\n.ds-shelf .ds-stat__value,\n.ds-shelf .ds-stat__label {\n  color: inherit;\n  text-shadow: var(--shadow-text);\n}\n.ds-shelf .ds-stat__label {\n  opacity: 0.8;\n}\n\n/* ---------- board: a slab nailed to the wall, a brass nail in each corner ---------- */\n.ds-board {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n  padding: var(--space-6);\n  background:\n    radial-gradient(circle, var(--color-accent-alt) 0, var(--color-border-strong) 45%, transparent 55%) var(--space-3) var(--space-3) / var(--space-2) var(--space-2) no-repeat,\n    radial-gradient(circle, var(--color-accent-alt) 0, var(--color-border-strong) 45%, transparent 55%) calc(100% - var(--space-3)) var(--space-3) / var(--space-2) var(--space-2) no-repeat,\n    radial-gradient(circle, var(--color-accent-alt) 0, var(--color-border-strong) 45%, transparent 55%) var(--space-3) calc(100% - var(--space-3)) / var(--space-2) var(--space-2) no-repeat,\n    radial-gradient(circle, var(--color-accent-alt) 0, var(--color-border-strong) 45%, transparent 55%) calc(100% - var(--space-3)) calc(100% - var(--space-3)) / var(--space-2) var(--space-2) no-repeat,\n    var(--color-canvas);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-board__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-2) var(--space-4);\n  padding-bottom: var(--space-3);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-board__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-board__sub {\n  color: var(--color-text-muted);\n}\n.ds-board__more {\n  margin-left: auto;\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-board__more:hover {\n  color: var(--color-link-hover);\n}\n\n/* ---------- carousel: one hand of cards showing ---------- */\n.ds-carousel__stage {\n  padding: 0 calc(var(--size-control) + var(--space-2));\n}\n.ds-carousel__slide {\n  display: flex;\n  gap: var(--space-4);\n  justify-content: space-between;\n  overflow-x: auto;\n  padding: var(--space-4) var(--space-3) var(--space-3);\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide > .ds-card {\n  flex: 0 0 var(--size-card);\n  scroll-snap-align: center;\n}\n.ds-carousel__arrow {\n  left: 0;\n  border-radius: 50%;\n}\n.ds-carousel__arrow--next {\n  right: 0;\n  left: auto;\n}\n.ds-carousel__foot {\n  padding: var(--space-3) calc(var(--size-control) + var(--space-2)) 0;\n}\n.ds-carousel__dot {\n  border-radius: 50%;\n  transform: none;\n}\n.ds-keyword {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-heading-alt) 50%, transparent);\n}\n\n/* ---------- curve: how many cards of each cost, as standing bars ---------- */\n.ds-curve {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n  height: var(--size-curve);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-curve__col {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  height: 100%;\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  line-height: 1;\n}\n.ds-curve__bar {\n  display: block;\n  width: 100%;\n  height: 10%;\n  background: var(--fill-accent);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%);\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n}\n.ds-curve__bar--25 { height: 22%; }\n.ds-curve__bar--40 { height: 36%; }\n.ds-curve__bar--60 { height: 52%; }\n.ds-curve__bar--75 { height: 64%; }\n.ds-curve__bar--100 { height: 78%; }\n.ds-curve__cost {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: var(--space-1) 0;\n  color: var(--color-heading);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n\n/* ---------- library: the filter rail beside the gallery ---------- */\n.ds-library {\n  display: grid;\n  grid-template-columns: var(--size-rail) minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--size-card), 1fr));\n  gap: var(--space-5) var(--space-4);\n  margin: 0;\n  padding: var(--space-3) 0 0 var(--space-3);\n  list-style: none;\n}\n.ds-gallery__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  text-align: center;\n}\n.ds-gallery__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n/* one card on its own mat */\n.ds-showcase {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-mat {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-6) var(--space-5) var(--space-5);\n  background:\n    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--color-accent-alt) 26%, transparent), transparent 72%),\n    var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-bar), var(--color-shadow) 30%);\n  border-radius: var(--radius-panel);\n  box-shadow: inset 0 0 var(--space-6) color-mix(in srgb, var(--color-shadow) 70%, transparent), var(--shadow-panel);\n}\n.ds-mat__note {\n  margin: 0;\n  font-size: var(--text-small);\n  text-align: center;\n  opacity: 0.85;\n}\n\n/* ---------- who: a crest beside a name ---------- */\n.ds-who {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-who__name {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-who__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- details of this pack on shared components ---------- */\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n  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: min(var(--text-display), 12vw);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: var(--space-2) 0 0;\n  max-width: 60ch;\n  color: var(--color-text);\n  font-size: var(--text-large);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n.ds-breadcrumb {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-weight: var(--weight-ui);\n}\n.ds-panel {\n  border-color: var(--color-border);\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-5);\n  color: var(--color-heading);\n}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__body--flush {\n  padding: 0;\n  overflow: hidden;\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n.ds-panel__foot {\n  padding: var(--space-3) var(--space-5);\n}\n.ds-stats {\n  gap: var(--space-3) 0;\n}\n.ds-stat {\n  padding: var(--space-1) var(--space-5);\n}\n.ds-grid {\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  align-items: flex-start;\n  border-width: var(--border-width);\n  border-radius: var(--radius-panel);\n}\n.ds-grid__icon {\n  padding: var(--space-2);\n  background: var(--color-surface-strong);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  box-shadow: var(--shadow-control);\n}\n.ds-tabs {\n  gap: var(--space-1);\n  border-bottom-width: var(--border-width-strong);\n}\n.ds-tabs__tab {\n  padding: 0 var(--space-4);\n}\n.ds-tabs__tab:hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current,\n.ds-tabs__tab.is-current:hover {\n  color: var(--color-accent-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-avatar {\n  border-radius: 50%;\n}\n.ds-pagination__link {\n  box-shadow: var(--shadow-control);\n}\n.ds-pagination__link.is-disabled {\n  box-shadow: none;\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(--fill-inverse);\n  color: var(--color-inverse-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-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n}\n.ds-list__month {\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/* ---------- columns of a page ---------- */\n.ds-columns {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-aside);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-columns > .ds-board {\n  height: 100%;\n}\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5) var(--space-5);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding-bottom: var(--space-2);\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-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-2) 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\n/* ---------- band: the closing call, on card stock ---------- */\n.ds-band {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n  padding: var(--space-6) var(--space-7);\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-display);\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  max-width: 56ch;\n  font-size: var(--text-large);\n}\n\n/* ---------- footer: a strip of felt under a wooden rail ---------- */\n.ds-footer {\n  padding: var(--space-6) var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-top: var(--space-3) var(--border-style) var(--color-bar);\n  box-shadow: inset 0 var(--border-width-strong) 0 var(--color-border-strong), inset 0 var(--space-5) var(--space-5) calc(var(--space-4) * -1) var(--color-shadow);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n  max-width: var(--size-page);\n  margin: 0 auto;\n}\n.ds-footer__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.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  opacity: 0.85;\n}\n.ds-footer__link:hover {\n  opacity: 1;\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__note {\n  flex: 1 0 100%;\n  margin: 0;\n  padding-top: var(--space-4);\n  font-size: var(--text-small);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 20%, transparent);\n  opacity: 0.75;\n}\n.ds-footer .ds-brand__mark {\n  margin: 0;\n}\n\n/* ---------- narrower windows ---------- */\n.ds-panel__body--flush.ds-table__wrap {\n  overflow-x: auto;\n}\n@media (max-width: 1100px) {\n  .ds-felt,\n  .ds-columns,\n  .ds-library,\n  .ds-showcase,\n  .ds-split,\n  .ds-split--wide {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-felt::after {\n    display: none;\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-nav__purse {\n    display: none;\n  }\n  .ds-carousel__slide {\n    justify-content: flex-start;\n  }\n}\n/* ---------- below the desktop width the beam wraps: brand and actions above, the sections below ---------- */\n@media (max-width: 1000px) {\n  .ds-nav {\n    flex-wrap: wrap;\n    gap: 0 var(--space-4);\n    padding: var(--space-2) var(--space-6);\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 1 0 100%;\n    min-width: 0;\n    padding-top: var(--space-2);\n  }\n  .ds-nav__link {\n    min-height: var(--size-control-small);\n    padding: 0 var(--space-2);\n  }\n  .ds-nav__end {\n    margin-left: auto;\n  }\n  .ds-brand__mark {\n    width: var(--size-control);\n    height: var(--size-control);\n    padding: var(--space-2);\n    margin: 0;\n  }\n}\n@media (max-width: 700px) {\n  .ds-wrap {\n    gap: var(--space-4);\n    padding: var(--space-5) var(--space-2) var(--space-6);\n  }\n  .ds-nav {\n    padding: var(--space-2) var(--space-3);\n  }\n  .ds-hero {\n    padding: var(--space-2);\n  }\n  .ds-felt {\n    padding: var(--space-6) var(--space-4) var(--space-5);\n  }\n  .ds-fan {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-fan > .ds-card:nth-child(1) {\n    display: none;\n  }\n  .ds-fan > .ds-card:nth-child(2) {\n    margin-left: 0;\n  }\n  .ds-board {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-board__title {\n    font-size: var(--text-h2);\n  }\n  .ds-board__more {\n    margin-left: 0;\n  }\n  .ds-carousel__stage,\n  .ds-carousel__foot {\n    padding-right: 0;\n    padding-left: 0;\n  }\n  .ds-carousel__arrow {\n    display: none;\n  }\n  .ds-grid,\n  .ds-grid--two,\n  .ds-grid--three {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-gallery {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-5) var(--space-4);\n    padding-right: var(--space-1);\n  }\n  .ds-stats {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__value {\n    font-size: var(--text-h2);\n  }\n  .ds-list__item {\n    flex-wrap: wrap;\n  }\n  .ds-list__body {\n    flex-basis: calc(100% - var(--size-date) - var(--space-4));\n  }\n  .ds-band {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-form__label {\n    padding-top: 0;\n  }\n  .ds-form__actions-end {\n    margin-left: 0;\n  }\n  .ds-footer {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-dialog__backdrop {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-tabs {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n  }\n  .ds-tabs > li {\n    flex: none;\n  }\n  .ds-tabs__tab {\n    white-space: nowrap;\n  }\n  .ds-table td a,\n  .ds-table .ds-item {\n    white-space: nowrap;\n  }\n}\n\n/* ---------- tablets and phones: the sections are a row of equal tabs, the cards menu opens across the row ---------- */\n@media (max-width: 1000px) {\n  .ds-nav__links {\n    position: relative;\n    display: grid;\n    grid-auto-columns: minmax(0, 1fr);\n    grid-auto-flow: column;\n    gap: var(--space-1);\n  }\n  .ds-nav__links > .ds-menu {\n    position: static;\n  }\n  .ds-nav__link {\n    display: flex;\n    justify-content: center;\n    min-width: 0;\n    padding: 0 var(--space-1);\n    white-space: nowrap;\n  }\n  .ds-nav__links .ds-menu__list {\n    right: 0;\n    left: 0;\n    min-width: 0;\n  }\n}\n\n/* ---------- one column: a tip opens under its trigger, between the gutters ---------- */\n@media (max-width: 1100px) {\n  .ds-tooltip {\n    position: static;\n  }\n  .ds-tooltip__tip,\n  .ds-tooltip--end .ds-tooltip__tip {\n    top: auto;\n    right: var(--space-4);\n    bottom: auto;\n    left: var(--space-4);\n    width: auto;\n    max-width: var(--size-tip);\n    margin-top: var(--space-2);\n  }\n  .ds-tooltip--card .ds-tooltip__tip {\n    margin-top: 0;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: the tavern card game, specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" aria-hidden=\"true\"><polygon points=\"7,3 17,3 21.5,9 12,21.5 2.5,9\"/><polyline points=\"2.5,9 21.5,9\"/><polyline points=\"8.5,9 12,21 15.5,9\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Tavern</a></li>\n      <li class=\"ds-menu\">\n        <a class=\"ds-nav__link\" href=\"#cards\">Cards <span class=\"ds-menu__caret\">&#9662;</span></a>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#cards\">Card library</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#card\">Card of the day</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#cards\">The Ember Fair</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#decks\">Decks</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#build\">Build</a></li>\n    </ul>\n    <div class=\"ds-nav__end\">\n      <span class=\"ds-nav__purse\"><span class=\"ds-coin\"></span>1,240 dust</span>\n      <a class=\"ds-button ds-button--small\" href=\"#build\">Play free</a>\n    </div>\n  </header>\n\n  <main>\n\n    <section class=\"ds-view ds-view--home\" id=\"home\">\n      <div class=\"ds-wrap\">\n        <div class=\"ds-hero\" data-component=\"hero\">\n          <div class=\"ds-felt\">\n            <div class=\"ds-hero__copy\">\n              <span class=\"ds-tag\">New set, 135 cards</span>\n              <h1 class=\"ds-hero__title\">The Ember Fair</h1>\n              <p class=\"ds-hero__lead\">The fair has come to town and set up in the cellar. Pull up a chair, shuffle thirty cards and see whose fire catches first.</p>\n              <div class=\"ds-hero__actions\">\n                <a class=\"ds-button ds-button--large\" href=\"#build\">Play free</a>\n                <a class=\"ds-button ds-button--large ds-button--secondary\" href=\"#cards\">See the cards</a>\n              </div>\n              <p class=\"ds-hero__note\">PC, tablet and phone. A game takes about eight minutes.</p>\n            </div>\n            <div class=\"ds-fan\">\n              <span class=\"ds-card ds-card--back\"></span>\n              <span class=\"ds-card ds-card--2\"><span class=\"ds-card__cost\">5</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M8 22V9H6V3h2v2h2V3h4v2h2V3h2v6h-2v13z\"/></svg></span><span class=\"ds-card__name\">Watchfire Tower</span><span class=\"ds-card__text\">Your minions have +1 guard.</span><span class=\"ds-card__stats\"><span></span><span>Place</span><span class=\"ds-card__stat ds-card__stat--life\">6</span></span></span>\n              <span class=\"ds-card\"><span class=\"ds-card__cost\">3</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 6c-1 0-1 12 0 12s1-12 0-12zM11 9C8 4 2 5 3 10c1 3 5 3 8 2zM13 9c3-5 9-4 8 1-1 3-5 3-8 2zM11 13c-3 0-6 2-5 5 2 2 5 0 5-3zM13 13c3 0 6 2 5 5-2 2-5 0-5-3z\"/></svg></span><span class=\"ds-card__name\">Lantern Moth</span><span class=\"ds-card__text\">Kindle: draw a card.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">2</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">4</span></span></span>\n              <span class=\"ds-card ds-card--3\"><span class=\"ds-card__cost\">2</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 2c1 5 6 6 6 12a6 6 0 0 1-12 0c0-3 2-4 3-6 0 3 1 4 2 4 1-3-1-6 1-10z\"/></svg></span><span class=\"ds-card__name\">Stoke the Hearth</span><span class=\"ds-card__text\">Deal 3. Kindle: deal 5.</span><span class=\"ds-card__stats\"><span></span><span>Spell</span><span></span></span></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-shelf\">\n          <div class=\"ds-stats\" data-component=\"stats\">\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">340</span><span class=\"ds-stat__label\">Cards in play</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">6</span><span class=\"ds-stat__label\">Classes</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">30</span><span class=\"ds-stat__label\">Cards to a deck</span></div>\n            <div class=\"ds-stat\"><span class=\"ds-stat__value\">8 min</span><span class=\"ds-stat__label\">A usual game</span></div>\n          </div>\n        </div>\n        <div class=\"ds-board\">\n          <div class=\"ds-board__head\"><h2 class=\"ds-board__title\">Fresh from the fair</h2><span class=\"ds-board__sub\">Five of the 135 new cards</span><a class=\"ds-board__more\" href=\"#cards\">Open the library</a></div>\n          <div class=\"ds-carousel\" data-component=\"carousel\">\n            <div class=\"ds-carousel__stage\">\n              <div class=\"ds-carousel__slide\">\n                <a class=\"ds-card ds-card--4\" href=\"#card\"><span class=\"ds-card__cost\">1</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M5 4h11v4h2a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2v4H5zM16 10v4h1.5a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z\"/></svg></span><span class=\"ds-card__name\">Last Round</span><span class=\"ds-card__text\">Give a minion +1 and +1.</span><span class=\"ds-card__stats\"><span></span><span>Spell</span><span></span></span></a>\n                <a class=\"ds-card ds-card--4\" href=\"#card\"><span class=\"ds-card__cost\">2</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M2 6c4 0 7 2 10 6 3-4 6-6 10-6-1 5-4 8-8 9l-2 5-2-5c-4-1-7-4-8-9z\"/></svg></span><span class=\"ds-card__name\">Chimney Swift</span><span class=\"ds-card__text\">Flies over guards.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">2</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">1</span></span></a>\n                <a class=\"ds-card\" href=\"#card\"><span class=\"ds-card__cost\">3</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 6c-1 0-1 12 0 12s1-12 0-12zM11 9C8 4 2 5 3 10c1 3 5 3 8 2zM13 9c3-5 9-4 8 1-1 3-5 3-8 2zM11 13c-3 0-6 2-5 5 2 2 5 0 5-3zM13 13c3 0 6 2 5 5-2 2-5 0-5-3z\"/></svg></span><span class=\"ds-card__name\">Lantern Moth</span><span class=\"ds-card__text\">Kindle: draw a card.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">2</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">4</span></span></a>\n                <a class=\"ds-card ds-card--3\" href=\"#card\"><span class=\"ds-card__cost\">4</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M11 2h2v13h4v2h-4v5h-2v-5H7v-2h4z\"/></svg></span><span class=\"ds-card__name\">Fairground Duellist</span><span class=\"ds-card__text\">Strikes first.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">4</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">3</span></span></a>\n                <a class=\"ds-card ds-card--2\" href=\"#card\"><span class=\"ds-card__cost\">7</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M3 19L2 8l5 4 5-9 5 9 5-4-1 11z\"/></svg></span><span class=\"ds-card__name\">Queen of Embers</span><span class=\"ds-card__text\">Kindle every card in hand.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">6</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">6</span></span></a>\n              </div>\n              <a class=\"ds-carousel__arrow\" href=\"#home\" aria-label=\"Previous\">&#9664;</a>\n              <a class=\"ds-carousel__arrow ds-carousel__arrow--next\" href=\"#home\" aria-label=\"Next\">&#9654;</a>\n            </div>\n            <div class=\"ds-carousel__foot\">\n              <span>New keyword: <span class=\"ds-tooltip\" tabindex=\"0\"><span class=\"ds-keyword\">Kindle</span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Kindle</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Keyword, The Ember Fair</span></span><span class=\"ds-tooltip__line\"><span>Happens if you played a spell this turn.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>A fire needs something to catch.</span></span></span></span>. Hand 1 of 27.</span>\n              <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-columns\">\n          <div class=\"ds-board\">\n            <div class=\"ds-board__head\"><h2 class=\"ds-board__title\">Heard in the tavern</h2><a class=\"ds-board__more\" href=\"#decks\">All news</a></div>\n            <ul class=\"ds-list\" data-component=\"list\">\n              <li class=\"ds-list__item\"><span class=\"ds-list__date\"><span class=\"ds-list__month\">Oct</span>08</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#cards\">The Ember Fair is open</a><p class=\"ds-list__text\">All 135 cards are in the library, and the first three packs are on the house.</p><span class=\"ds-list__meta\">By the innkeeper, 214 replies</span></span><span class=\"ds-badge\">New set</span></li>\n              <li class=\"ds-list__item\"><span class=\"ds-list__date\"><span class=\"ds-list__month\">Oct</span>06</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#decks\">Balance notes: five cards cost more</a><p class=\"ds-list__text\">Queen of Embers goes from six to seven, and you get full dust back for each.</p><span class=\"ds-list__meta\">By the card makers, 1,032 replies</span></span><span class=\"ds-badge ds-badge--warning\">Balance</span></li>\n              <li class=\"ds-list__item\"><span class=\"ds-list__date\"><span class=\"ds-list__month\">Oct</span>01</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#decks\">Autumn ladder: last week</a><p class=\"ds-list__text\">Reach the copper rank by Sunday for the season's card back.</p><span class=\"ds-list__meta\">By the ladder keepers, 87 replies</span></span><span class=\"ds-badge ds-badge--quiet\">Ladder</span></li>\n              <li class=\"ds-list__item\"><span class=\"ds-list__date\"><span class=\"ds-list__month\">Sep</span>27</span><span class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#card\">How we drew the Lantern Moth</a><p class=\"ds-list__text\">From a pencil sketch on a beer mat to the finished card.</p><span class=\"ds-list__meta\">By the painters, 59 replies</span></span></li>\n            </ul>\n          </div>\n          <div class=\"ds-stack\">\n            <div class=\"ds-panel\" data-component=\"panel\">\n              <h2 class=\"ds-panel__title\">Deck of the week <span class=\"ds-badge ds-badge--success\">58% wins</span></h2>\n              <div class=\"ds-panel__body ds-stack ds-stack--tight\">\n                <span class=\"ds-who\"><span class=\"ds-avatar ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 1-3-1-5 1-9z\"/></svg></span><span><span class=\"ds-who__name\">Moth Tempo</span><span class=\"ds-who__meta\">Stoker class, 30 cards, 4,200 dust</span></span></span>\n                <ul class=\"ds-curve\"><li class=\"ds-curve__col\"><span>1</span><span class=\"ds-curve__bar\"></span><span class=\"ds-curve__cost\">0</span></li><li class=\"ds-curve__col\"><span>4</span><span class=\"ds-curve__bar ds-curve__bar--40\"></span><span class=\"ds-curve__cost\">1</span></li><li class=\"ds-curve__col\"><span>7</span><span class=\"ds-curve__bar ds-curve__bar--75\"></span><span class=\"ds-curve__cost\">2</span></li><li class=\"ds-curve__col\"><span>8</span><span class=\"ds-curve__bar ds-curve__bar--100\"></span><span class=\"ds-curve__cost\">3</span></li><li class=\"ds-curve__col\"><span>5</span><span class=\"ds-curve__bar ds-curve__bar--60\"></span><span class=\"ds-curve__cost\">4</span></li><li class=\"ds-curve__col\"><span>3</span><span class=\"ds-curve__bar ds-curve__bar--25\"></span><span class=\"ds-curve__cost\">5</span></li><li class=\"ds-curve__col\"><span>1</span><span class=\"ds-curve__bar\"></span><span class=\"ds-curve__cost\">6</span></li><li class=\"ds-curve__col\"><span>1</span><span class=\"ds-curve__bar\"></span><span class=\"ds-curve__cost\">7+</span></li></ul>\n                <div><div class=\"ds-progress__label\"><strong>Wins on the ladder</strong><span>58%</span></div><span class=\"ds-progress ds-progress--60 ds-progress--health\"><span class=\"ds-progress__bar\"></span></span></div>\n              </div>\n              <div class=\"ds-panel__foot\"><span>Played 18,400 times</span><a class=\"ds-button ds-button--small ds-button--secondary\" href=\"#decks\">See the list</a></div>\n            </div>\n            <div class=\"ds-sidebar\">\n              <h2 class=\"ds-sidebar__title\">Your collection</h2>\n              <div><div class=\"ds-progress__label\"><strong>Cards owned</strong><span>212 of 340</span></div><span class=\"ds-progress ds-progress--60\"><span class=\"ds-progress__bar\"></span></span></div>\n              <div><div class=\"ds-progress__label\"><strong>The Ember Fair</strong><span>31 of 135</span></div><span class=\"ds-progress ds-progress--25 ds-progress--rep\"><span class=\"ds-progress__bar\"></span></span></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-board\">\n          <div class=\"ds-board__head\"><h2 class=\"ds-board__title\">Sets in play</h2><span class=\"ds-board__sub\">Four sets make the standard format</span></div>\n          <div class=\"ds-grid\" data-component=\"grid\">\n            <div class=\"ds-grid__cell\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4L3 19h18zM12 4v15M9 19l3-6 3 6\"/></svg></span><h3 class=\"ds-grid__title\">The Ember Fair</h3><p class=\"ds-grid__text\">Spells that feed each other, and the Kindle keyword.</p><span class=\"ds-badge ds-badge--new\">New</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z\"/></svg></span><h3 class=\"ds-grid__title\">Crowns and Cellars</h3><p class=\"ds-grid__text\">Big minions, slow games and a throne worth holding.</p><span class=\"ds-badge ds-badge--quiet\">135 cards</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 5h9v13H5zM14 8l5 1-2 12-8-1\"/></svg></span><h3 class=\"ds-grid__title\">The First Deal</h3><p class=\"ds-grid__text\">The core set every player owns from the start.</p><span class=\"ds-badge ds-badge--warning\">Leaves 1 November</span></div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\"><span class=\"ds-grid__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 9c3-3 6 3 9 0s6 3 9 0M3 15c3-3 6 3 9 0s6 3 9 0\"/></svg></span><h3 class=\"ds-grid__title\">Low Tide</h3><p class=\"ds-grid__text\">Cards that come back from the discard pile.</p><span class=\"ds-badge ds-badge--quiet\">70 cards</span></div>\n          </div>\n        </div>\n        <div class=\"ds-band\">\n          <div>\n            <h2 class=\"ds-band__title\">There is a chair free at the table</h2>\n            <p class=\"ds-band__text\">Make an account and the innkeeper deals you a full starter deck and three packs of the fair.</p>\n          </div>\n          <a class=\"ds-button ds-button--large\" href=\"#build\">Deal me in</a>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"cards\">\n      <div class=\"ds-wrap\">\n        <div class=\"ds-board\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#cards\">Cards</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li class=\"ds-breadcrumb__current\">Card library</li>\n          </ol>\n          <div class=\"ds-page-header\" data-component=\"page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Card library</h1>\n              <p class=\"ds-page-header__text\">Every card of the four sets in play, cheapest first.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#build\">Build a deck</a></div>\n          </div>\n          <div class=\"ds-library\">\n            <aside class=\"ds-stack\">\n              <div class=\"ds-sidebar\" data-component=\"sidebar\">\n                <h2 class=\"ds-sidebar__title\">Classes</h2>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--small ds-avatar--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 1-3-1-5 1-9z\"/></svg></span><a class=\"ds-sidebar__link\" href=\"#cards\">Stoker</a><span class=\"ds-sidebar__meta\">48</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--small ds-avatar--1\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z\"/></svg></span><a class=\"ds-sidebar__link\" href=\"#cards\">Warden</a><span class=\"ds-sidebar__meta\">48</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--small ds-avatar--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM12 8v8M9.5 10h3.5a1.5 1.5 0 0 1 0 3h-2a1.5 1.5 0 0 0 0 3H15\"/></svg></span><a class=\"ds-sidebar__link\" href=\"#cards\">Gambler</a><span class=\"ds-sidebar__meta\">48</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--small ds-avatar--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 19c0-8 5-14 14-14 0 9-6 14-14 14zM5 19l8-8\"/></svg></span><a class=\"ds-sidebar__link\" href=\"#cards\">Herbalist</a><span class=\"ds-sidebar__meta\">48</span></li>\n                </ul>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">Show</h2>\n                <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Only cards I own</span><span class=\"ds-switch__hint\">212 of 340</span></span><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span></label>\n                <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Standard format</span><span class=\"ds-switch__hint\">The four newest sets</span></span><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span></label>\n                <div><div class=\"ds-progress__label\"><strong>Cards owned</strong><span>212 of 340</span></div><span class=\"ds-progress ds-progress--60\"><span class=\"ds-progress__bar\"></span></span></div>\n              </div>\n            </aside>\n            <div class=\"ds-stack\">\n              <ul class=\"ds-tabs\" data-component=\"tabs\">\n                <li><a class=\"ds-tabs__tab is-current\" href=\"#cards\">All <span class=\"ds-tabs__count\">340</span></a></li>\n                <li><a class=\"ds-tabs__tab\" href=\"#cards\">Minions <span class=\"ds-tabs__count\">198</span></a></li>\n                <li><a class=\"ds-tabs__tab\" href=\"#cards\">Spells <span class=\"ds-tabs__count\">104</span></a></li>\n                <li><a class=\"ds-tabs__tab\" href=\"#cards\">Places <span class=\"ds-tabs__count\">38</span></a></li>\n              </ul>\n              <ul class=\"ds-gallery\">\n                <li class=\"ds-gallery__item\"><a class=\"ds-card ds-card--4\" href=\"#card\"><span class=\"ds-card__cost\">1</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M5 4h11v4h2a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2v4H5zM16 10v4h1.5a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z\"/></svg></span><span class=\"ds-card__name\">Last Round</span><span class=\"ds-card__text\">Give a minion +1 and +1.</span><span class=\"ds-card__stats\"><span></span><span>Spell</span><span></span></span></a><span><span class=\"ds-item ds-item--uncommon\">Last Round</span><span class=\"ds-gallery__meta\">Spell, common</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card ds-card--3\" href=\"#card\"><span class=\"ds-card__cost\">2</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 2c1 5 6 6 6 12a6 6 0 0 1-12 0c0-3 2-4 3-6 0 3 1 4 2 4 1-3-1-6 1-10z\"/></svg></span><span class=\"ds-card__name\">Stoke the Hearth</span><span class=\"ds-card__text\">Deal 3. Kindle: deal 5.</span><span class=\"ds-card__stats\"><span></span><span>Spell</span><span></span></span></a><span><span class=\"ds-item ds-item--rare\">Stoke the Hearth</span><span class=\"ds-gallery__meta\">Spell, rare</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card ds-card--4\" href=\"#card\"><span class=\"ds-card__cost\">2</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M2 6c4 0 7 2 10 6 3-4 6-6 10-6-1 5-4 8-8 9l-2 5-2-5c-4-1-7-4-8-9z\"/></svg></span><span class=\"ds-card__name\">Chimney Swift</span><span class=\"ds-card__text\">Flies over guards.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">2</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">1</span></span></a><span><span class=\"ds-item\">Chimney Swift</span><span class=\"ds-gallery__meta\">Minion, common</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card\" href=\"#card\"><span class=\"ds-card__cost\">3</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 6c-1 0-1 12 0 12s1-12 0-12zM11 9C8 4 2 5 3 10c1 3 5 3 8 2zM13 9c3-5 9-4 8 1-1 3-5 3-8 2zM11 13c-3 0-6 2-5 5 2 2 5 0 5-3zM13 13c3 0 6 2 5 5-2 2-5 0-5-3z\"/></svg></span><span class=\"ds-card__name\">Lantern Moth</span><span class=\"ds-card__text\">Kindle: draw a card.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">2</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">4</span></span></a><span><span class=\"ds-item ds-item--rare\">Lantern Moth</span><span class=\"ds-gallery__meta\">Minion, rare</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card ds-card--4\" href=\"#card\"><span class=\"ds-card__cost\">3</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 2l8 3v7c0 5-4 8-8 10-4-2-8-5-8-10V5z\"/></svg></span><span class=\"ds-card__name\">Cellar Door</span><span class=\"ds-card__text\">Guard. Cannot attack.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">0</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">7</span></span></a><span><span class=\"ds-item ds-item--set\">Cellar Door</span><span class=\"ds-gallery__meta\">Minion, Low Tide</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card ds-card--3\" href=\"#card\"><span class=\"ds-card__cost\">4</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M11 2h2v13h4v2h-4v5h-2v-5H7v-2h4z\"/></svg></span><span class=\"ds-card__name\">Fairground Duellist</span><span class=\"ds-card__text\">Strikes first.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">4</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">3</span></span></a><span><span class=\"ds-item ds-item--epic\">Fairground Duellist</span><span class=\"ds-gallery__meta\">Minion, epic</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card ds-card--2\" href=\"#card\"><span class=\"ds-card__cost\">5</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M8 22V9H6V3h2v2h2V3h4v2h2V3h2v6h-2v13z\"/></svg></span><span class=\"ds-card__name\">Watchfire Tower</span><span class=\"ds-card__text\">Your minions have +1 guard.</span><span class=\"ds-card__stats\"><span></span><span>Place</span><span class=\"ds-card__stat ds-card__stat--life\">6</span></span></a><span><span class=\"ds-item ds-item--epic\">Watchfire Tower</span><span class=\"ds-gallery__meta\">Place, epic</span></span></li>\n                <li class=\"ds-gallery__item\"><a class=\"ds-card\" href=\"#card\"><span class=\"ds-card__cost\">6</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 1l5 14H7zM2 18c4-3 16-3 20 0-4 3-16 3-20 0z\"/></svg></span><span class=\"ds-card__name\">Ringmaster</span><span class=\"ds-card__text\">Summon two 2 and 2 tumblers.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">4</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">5</span></span></a><span><span class=\"ds-item ds-item--legendary\">Ringmaster</span><span class=\"ds-gallery__meta\">Minion, legendary</span></span></li>\n              </ul>\n              <div class=\"ds-row ds-row--between\">\n                <span class=\"ds-muted\">Cards 1 to 8 of 340, by cost</span>\n                <ul class=\"ds-pagination\" data-component=\"pagination\">\n                  <li><span class=\"ds-pagination__link is-disabled\">Prev</span></li>\n                  <li><span class=\"ds-pagination__link is-current\">1</span></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#cards\">2</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#cards\">3</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#cards\">43</a></li>\n                  <li><a class=\"ds-pagination__link\" href=\"#cards\">Next</a></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"card\">\n      <div class=\"ds-wrap\">\n        <div class=\"ds-board\">\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\">&rsaquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#cards\">Card library</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li class=\"ds-breadcrumb__current\">Lantern Moth</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Lantern Moth</h1>\n              <p class=\"ds-page-header__text\">A rare Stoker minion from The Ember Fair.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#build\">Add to a deck</a><a class=\"ds-button ds-button--secondary\" href=\"#cards\">Back to the library</a></div>\n          </div>\n          <div class=\"ds-showcase\">\n            <div class=\"ds-stack\">\n              <div class=\"ds-mat\">\n                <span class=\"ds-card ds-card--large\"><span class=\"ds-card__cost\">3</span><span class=\"ds-card__art\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" aria-hidden=\"true\"><path d=\"M12 6c-1 0-1 12 0 12s1-12 0-12zM11 9C8 4 2 5 3 10c1 3 5 3 8 2zM13 9c3-5 9-4 8 1-1 3-5 3-8 2zM11 13c-3 0-6 2-5 5 2 2 5 0 5-3zM13 13c3 0 6 2 5 5-2 2-5 0-5-3z\"/></svg></span><span class=\"ds-card__name\">Lantern Moth</span><span class=\"ds-card__text\">Kindle: draw a card.</span><span class=\"ds-card__stats\"><span class=\"ds-card__stat\">2</span><span>Minion</span><span class=\"ds-card__stat ds-card__stat--life\">4</span></span></span>\n                <p class=\"ds-mat__note\">Painted for The Ember Fair. Card 041 of 135.</p>\n              </div>\n              <div class=\"ds-tooltip ds-tooltip--card\">\n                <span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Kindle</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Keyword</span><span>The Ember Fair</span></span><span class=\"ds-tooltip__line\"><span>Happens if you played a spell this turn.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--bonus\"><span>On 31 cards of this set.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>A fire needs something to catch.</span></span></span>\n              </div>\n            </div>\n            <div class=\"ds-stack\">\n              <div class=\"ds-prose\" data-component=\"typography\">\n                <h1>A moth for every hearth</h1>\n                <p class=\"ds-prose__lead\">Three mana, two attack, four health, and a card in hand if a spell came first.</p>\n                <p>Lantern Moth is the card most decks of the fair start from. On its own it is a sturdy body for its cost; after any spell its <span class=\"ds-tooltip\" tabindex=\"0\"><span class=\"ds-keyword\">Kindle</span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Kindle</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Keyword, The Ember Fair</span></span><span class=\"ds-tooltip__line\"><span>Happens if you played a spell this turn.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>A fire needs something to catch.</span></span></span></span> text pays for itself, and with <span class=\"ds-tooltip ds-tooltip--end\" tabindex=\"0\"><span class=\"ds-keyword\">guard</span><span class=\"ds-tooltip__tip\"><span class=\"ds-tooltip__name\">Guard</span><span class=\"ds-tooltip__line ds-tooltip__line--muted\"><span>Keyword, every set</span></span><span class=\"ds-tooltip__line\"><span>Enemies must attack this minion first.</span></span><span class=\"ds-tooltip__line ds-tooltip__line--lore\"><span>Somebody has to mind the door.</span></span></span></span> beside it the moth usually lives to attack twice.</p>\n                <h2>How to play it</h2>\n                <ul>\n                  <li>Hold it until you can play a one-cost spell in the same turn.</li>\n                  <li>Trade it into small minions; four health survives most of them.</li>\n                  <li>Do not keep it in a slow opening hand against Wardens.</li>\n                </ul>\n                <h3>For deck builders</h3>\n                <p>Its code is <code>EMB-041</code>. Two copies fit any Stoker or Gambler list; <a href=\"#decks\">Moth Tempo</a> is built around it.</p>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">Often played with</h2>\n                <ul class=\"ds-links\" data-component=\"links\">\n                  <li><a class=\"ds-link\" href=\"#card\">Stoke the Hearth</a></li>\n                  <li><a class=\"ds-link is-visited\" href=\"#card\">Last Round</a></li>\n                  <li><a class=\"ds-link is-hover\" href=\"#card\">Chimney Swift</a></li>\n                  <li><a class=\"ds-link is-active\" href=\"#card\">Queen of Embers</a></li>\n                </ul>\n                <p class=\"ds-muted\">Normal, visited, hovered and pressed.</p>\n                <div class=\"ds-badges\" data-component=\"badge\">\n                  <span class=\"ds-badge\">Stoker</span>\n                  <span class=\"ds-badge ds-badge--success\">You own 2</span>\n                  <span class=\"ds-badge ds-badge--warning\">Changed on 6 October</span>\n                  <span class=\"ds-badge ds-badge--danger\">Banned in the fair cup</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"decks\">\n      <div class=\"ds-wrap\">\n        <div class=\"ds-board\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#decks\">Decks</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li class=\"ds-breadcrumb__current\">Moth Tempo</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">My decks</h1>\n              <p class=\"ds-page-header__text\">Three decks are built. The first one is open below.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button\" href=\"#build\">New deck</a></div>\n          </div>\n          <div class=\"ds-notices\" data-component=\"notice\">\n            <div class=\"ds-notice\"><p class=\"ds-notice__title\">The First Deal leaves standard on 1 November</p><p class=\"ds-notice__text\">Decks that use it stay playable in the open format.</p></div>\n            <div class=\"ds-notice ds-notice--error\"><p class=\"ds-notice__title\">Two cards in this deck changed</p><p class=\"ds-notice__text\">Queen of Embers now costs seven. Check the curve before your next game.</p></div>\n          </div>\n          <div class=\"ds-columns\">\n            <div class=\"ds-stack\">\n              <div class=\"ds-panel\">\n                <h2 class=\"ds-panel__title\">Moth Tempo <span class=\"ds-badge\">Stoker</span></h2>\n                <div class=\"ds-panel__body ds-panel__body--flush ds-table__wrap\">\n                  <table class=\"ds-table\" data-component=\"table\">\n                    <thead><tr><th class=\"is-numeric\">Cost</th><th>Card</th><th class=\"is-numeric\">Copies</th><th class=\"is-numeric\">Dust</th></tr></thead>\n                    <tbody>\n                      <tr><td class=\"is-numeric\">1</td><td><a class=\"ds-item ds-item--uncommon\" href=\"#card\">Last Round</a><span class=\"ds-table__sub\">Spell</span></td><td class=\"is-numeric\">2</td><td class=\"is-numeric\">80</td></tr>\n                      <tr><td class=\"is-numeric\">2</td><td><a class=\"ds-item\" href=\"#card\">Chimney Swift</a><span class=\"ds-table__sub\">Minion</span></td><td class=\"is-numeric\">2</td><td class=\"is-numeric\">40</td></tr>\n                      <tr><td class=\"is-numeric\">2</td><td><a class=\"ds-item ds-item--rare\" href=\"#card\">Stoke the Hearth</a><span class=\"ds-table__sub\">Spell</span></td><td class=\"is-numeric\">2</td><td class=\"is-numeric\">200</td></tr>\n                      <tr><td class=\"is-numeric\">3</td><td><a class=\"ds-item ds-item--rare\" href=\"#card\">Lantern Moth</a><span class=\"ds-table__sub\">Minion</span></td><td class=\"is-numeric\">2</td><td class=\"is-numeric\">200</td></tr>\n                      <tr><td class=\"is-numeric\">4</td><td><a class=\"ds-item ds-item--epic\" href=\"#card\">Fairground Duellist</a><span class=\"ds-table__sub\">Minion</span></td><td class=\"is-numeric\">2</td><td class=\"is-numeric\">800</td></tr>\n                      <tr><td class=\"is-numeric\">7</td><td><a class=\"ds-item ds-item--legendary\" href=\"#card\">Queen of Embers</a><span class=\"ds-table__sub\">Minion</span></td><td class=\"is-numeric\">1</td><td class=\"is-numeric\">1,600</td></tr>\n                    </tbody>\n                  </table>\n                </div>\n                <div class=\"ds-panel__foot\"><span>6 of 17 different cards shown</span><span>30 cards, 4,200 dust</span></div>\n              </div>\n              <div class=\"ds-accordion\">\n                <details class=\"ds-accordion__item\" open>\n                  <summary class=\"ds-accordion__summary\">What is a deck code? <span class=\"ds-accordion__meta\">Sharing</span></summary>\n                  <div class=\"ds-accordion__body\"><p>A short line of letters that holds a whole deck. Paste it into the builder and the thirty cards appear.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">What happens to cards that leave standard? <span class=\"ds-accordion__meta\">Formats</span></summary>\n                  <div class=\"ds-accordion__body\"><p>You keep them and can play them in the open format.</p></div>\n                </details>\n                <details class=\"ds-accordion__item\">\n                  <summary class=\"ds-accordion__summary\">How do I get dust? <span class=\"ds-accordion__meta\">Crafting</span></summary>\n                  <div class=\"ds-accordion__body\"><p>Break up cards you have more than two of.</p></div>\n                </details>\n              </div>\n            </div>\n            <aside class=\"ds-stack\">\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">Mana curve</h2>\n                <ul class=\"ds-curve\"><li class=\"ds-curve__col\"><span>1</span><span class=\"ds-curve__bar\"></span><span class=\"ds-curve__cost\">0</span></li><li class=\"ds-curve__col\"><span>4</span><span class=\"ds-curve__bar ds-curve__bar--40\"></span><span class=\"ds-curve__cost\">1</span></li><li class=\"ds-curve__col\"><span>7</span><span class=\"ds-curve__bar ds-curve__bar--75\"></span><span class=\"ds-curve__cost\">2</span></li><li class=\"ds-curve__col\"><span>8</span><span class=\"ds-curve__bar ds-curve__bar--100\"></span><span class=\"ds-curve__cost\">3</span></li><li class=\"ds-curve__col\"><span>5</span><span class=\"ds-curve__bar ds-curve__bar--60\"></span><span class=\"ds-curve__cost\">4</span></li><li class=\"ds-curve__col\"><span>3</span><span class=\"ds-curve__bar ds-curve__bar--25\"></span><span class=\"ds-curve__cost\">5</span></li><li class=\"ds-curve__col\"><span>1</span><span class=\"ds-curve__bar\"></span><span class=\"ds-curve__cost\">6</span></li><li class=\"ds-curve__col\"><span>1</span><span class=\"ds-curve__bar\"></span><span class=\"ds-curve__cost\">7+</span></li></ul>\n                <div><div class=\"ds-progress__label\"><strong>Wins on the ladder</strong><span>58%</span></div><span class=\"ds-progress ds-progress--60 ds-progress--health\"><span class=\"ds-progress__bar\"></span></span></div>\n                <div><div class=\"ds-progress__label\"><strong>Spells</strong><span>9 of 30</span></div><span class=\"ds-progress ds-progress--25 ds-progress--xp\"><span class=\"ds-progress__bar\"></span></span></div>\n              </div>\n              <div class=\"ds-empty\" data-component=\"empty\">\n                <span class=\"ds-empty__icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 5h9v13H5zM14 8l5 1-2 12-8-1\"/></svg></span>\n                <h2 class=\"ds-empty__title\">Deck slot 4 is empty</h2>\n                <p class=\"ds-empty__text\">You have three decks and room for nine more.</p>\n                <a class=\"ds-button ds-button--secondary\" href=\"#build\">Build a deck</a>\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"ds-view\" id=\"build\">\n      <div class=\"ds-wrap\">\n        <div class=\"ds-board\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">chronoskin</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#decks\">Decks</a></li>\n            <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n            <li class=\"ds-breadcrumb__current\">Build a deck</li>\n          </ol>\n          <div class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Build a deck</h1>\n              <p class=\"ds-page-header__text\">Name it, pick a class and paste a code, or choose cards one by one.</p>\n            </div>\n            <div class=\"ds-page-header__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#cards\">Browse cards</a></div>\n          </div>\n          <div class=\"ds-split ds-split--wide\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#build\">\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"b-name\">Deck name</label>\n                <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"b-name\" type=\"text\" value=\"Moth Tempo, second try\"></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"b-class\">Class</label>\n                <div class=\"ds-form__field\"><select class=\"ds-form__select\" id=\"b-class\"><option>Stoker</option><option>Warden</option><option>Gambler</option><option>Herbalist</option></select></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"b-code\">Deck code</label>\n                <div class=\"ds-form__field\">\n                  <input class=\"ds-form__input ds-form__input--short is-error\" id=\"b-code\" type=\"text\" value=\"EMB-041-2-0Q7\">\n                  <p class=\"ds-form__error\">This code names a card that is not in the standard format.</p>\n                </div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"b-notes\">Notes</label>\n                <div class=\"ds-form__field\">\n                  <textarea class=\"ds-form__textarea\" id=\"b-notes\">Keep the moth for turn four with Last Round.</textarea>\n                  <p class=\"ds-form__hint\">Shown under the deck when you share it.</p>\n                </div>\n              </div>\n              <div class=\"ds-form__row\">\n                <span class=\"ds-form__label\">Options</span>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-switch\"><span><span class=\"ds-switch__label\">Share on my profile</span><span class=\"ds-switch__hint\">Others can copy the code</span></span><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span></label>\n                  <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Standard format only</label>\n                </div>\n              </div>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"button\">Save the deck</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#decks\">Cancel</a>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Play it (needs 30)</button>\n                <span class=\"ds-form__actions-end\"><button class=\"ds-button ds-button--danger\" type=\"button\">Delete deck</button></span>\n              </div>\n            </form>\n            <div class=\"ds-stack\">\n              <div class=\"ds-dialog__backdrop\">\n                <div class=\"ds-dialog\" data-component=\"dialog\">\n                  <h2 class=\"ds-dialog__title\"><span>Delete this deck?</span><a class=\"ds-dialog__close\" href=\"#build\">x</a></h2>\n                  <div class=\"ds-dialog__body\">\n                    <p class=\"ds-dialog__text\">The eighteen cards go back to your collection. The deck code stops working.</p>\n                    <div class=\"ds-dialog__actions\">\n                      <a class=\"ds-button ds-button--secondary\" href=\"#build\">Keep it</a>\n                      <a class=\"ds-button ds-button--danger\" href=\"#decks\">Delete</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"ds-sidebar\">\n                <h2 class=\"ds-sidebar__title\">The draft so far</h2>\n                <div><div class=\"ds-progress__label\"><strong>Cards chosen</strong><span>18 of 30</span></div><span class=\"ds-progress ds-progress--60\"><span class=\"ds-progress__bar\"></span></span></div>\n                <ul class=\"ds-sidebar__list\">\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span><span class=\"ds-sidebar__link\">Lantern Moth</span><span class=\"ds-sidebar__meta\">2 of 2</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--warning\"></span><span class=\"ds-sidebar__link\">Stoke the Hearth</span><span class=\"ds-sidebar__meta\">1 of 2</span></li>\n                  <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--danger\"></span><span class=\"ds-sidebar__link\">Old Cellar Key</span><span class=\"ds-sidebar__meta\">Not standard</span></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n  </main>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <div class=\"ds-footer__inner\">\n      <a class=\"ds-brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" aria-hidden=\"true\"><polygon points=\"7,3 17,3 21.5,9 12,21.5 2.5,9\"/><polyline points=\"2.5,9 21.5,9\"/><polyline points=\"8.5,9 12,21 15.5,9\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#cards\">Card library</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#card\">Card of the day</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#decks\">Decks</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#build\">Deck builder</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">News</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Support</a></li>\n      </ul>\n      <p class=\"ds-footer__note\">chronoskin is a specimen site. Free to play; packs can be earned at the table or bought.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.game-fantasy.app.s08.p07.t07.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"game-fantasy\",\n    \"years\": [\n      2004,\n      2026\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-gf-8773\",\n  \"short\": \"v1-gf-8773\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #e9f1f9;\n  --color-canvas: #ffffff;\n  --color-surface: #fcfdff;\n  --color-surface-alt: #f2f7fc;\n  --color-surface-strong: #e2ecf6;\n  --color-bar: #d9e7f5;\n  --color-bar-text: #27456b;\n  --color-bar-alt: #cfe3f5;\n  --color-bar-alt-text: #213a5e;\n  --color-inverse: #2b3f63;\n  --color-inverse-text: #f7f2e3;\n  --color-text: #47546b;\n  --color-text-muted: #7c889d;\n  --color-heading: #24334e;\n  --color-heading-alt: #98742a;\n  --color-link: #2c6fb3;\n  --color-link-quiet: #64738b;\n  --color-link-visited: #7862a6;\n  --color-link-hover: #1a4c86;\n  --color-link-active: #c0506b;\n  --color-border: #d5dfea;\n  --color-border-strong: #cbab62;\n  --color-border-muted: #e7edf4;\n  --color-accent: #cf5873;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #c2932f;\n  --color-fill-1: #2f7fd0;\n  --color-fill-2: #8a5bd0;\n  --color-fill-3: #c9781a;\n  --color-fill-4: #1f9a8a;\n  --color-button: #ecc766;\n  --color-button-text: #3b2d0d;\n  --color-button-hover-text: #261c05;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #2f4a70;\n  --color-input: #ffffff;\n  --color-input-text: #24334e;\n  --color-input-border: #b7c6d7;\n  --color-disabled: #edf1f5;\n  --color-disabled-text: #99a5b4;\n  --color-danger: #c6354a;\n  --color-danger-surface: #fdecee;\n  --color-success: #2c965c;\n  --color-warning: #b57710;\n  --color-notice: #eaf3fc;\n  --color-notice-text: #27507f;\n  --color-focus: #4a90d9;\n  --color-shadow: #5c7ba8;\n  --color-overlay: rgba(52, 76, 112, 0.46);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Nunito Sans\", \"Noto Sans\", Avenir, \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n  --font-heading: \"Playfair Display\", Didot, \"Bodoni 72\", \"Bodoni MT\", \"Libre Bodoni\", \"Times New Roman\", serif;\n  --font-ui: \"Nunito Sans\", \"Noto Sans\", Avenir, \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n  --font-mono: \"IBM Plex Mono\", \"SF Mono\", Consolas, \"Liberation Mono\", monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 64px;\n  --text-h1: 44px;\n  --text-h2: 30px;\n  --text-h3: 21px;\n  --line-body: 1.7;\n  --line-heading: 1.15;\n  --line-display: 1.05;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: 0.01em;\n  --display-tracking: 0.02em;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 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"
  }
}