{ "id": "v1-gf-2222", "long_id": "v1.game-fantasy.app.s02.p02.t02.u02", "name": "Game fantasy armory (parchment, oxblood and 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": "pure", "viewport": { "width": 1024, "fluid": false }, "summary": "The character and item database of an online role-playing game, the armory, as it looked in the early years, 2004 to 2012, of an era that runs from 2004 to 2026: a slim masthead with a search line, a dark rail of navigation plates down the left and parchment sheets beside it that are built like the game's own character window. Stat rows, equipment in rarity colours, talent trees drawn in cells and item tooltips carry the page. It was the look of official armories and fan databases of those years, made for a 1024px screen.", "url": "https://chrono.skin/s/v1-gf-2222", "preview_url": "https://chrono.skin/s/v1-gf-2222/specimen.html", "files": { "STYLE.md": "# Game fantasy armory (parchment, oxblood and brass)\n\n## Summary\n\nThe character and item database of an online role-playing game, the armory, as it looked in the early years, 2004 to 2012, of an era that runs from 2004 to 2026: a slim masthead with a search line, a dark rail of navigation plates down the left and parchment sheets beside it that are built like the game's own character window. Stat rows, equipment in rarity colours, talent trees drawn in cells and item tooltips carry the page. It was the look of official armories and fan databases of those years, made for a 1024px screen.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 980px (`.ds-page__wrap`), one framed slab on the page: the masthead across the top, below it a rail of `--size-rail` (190px) on the left and the sheet (about 780px) on the right, and the foot strip across the bottom.\n- The navigation is in the rail, not across the top: six plates one under the other, each with a small crest, then two rail blocks (recently viewed, the rarity key). The masthead holds the brand, the section name, the search line (`--size-search`, 300px) and the signed-in character.\n- Home page, top to bottom in the sheet: the search hero, the `.ds-stats` strip, four category cells, then a 3 to 2 `.ds-split` of the ladder table and the newest items.\n- Inner pages keep the masthead, the rail and the foot strip; the hero is left out. They start with the breadcrumb, then `.ds-page-header` (name and one line on the left, one or two plates on the right), then the working parts: `.ds-tabs` standing on the framed `.ds-sheet`, three talent trees side by side (`.ds-trees`), or a `.ds-split` of the filter form beside notices and an empty slot above the full-width result table and its pagination.\n- Views: `home` (search, figures, categories, ladder, newest items, the closing band), `character` (the sheet under its tabs: portrait and bars, attributes, equipment; reputation and deeds below), `talents` (three trees, the dialog that clears the planner, a legend), `items` (the filter form with its buttons, notices, an empty saved-search slot, the result table, pagination), `item` (the guide text, an accordion of questions, the item window written into the page, related links).\n- Spacing scale: `--space-1` 2px (between a label and its bar, sheet rows), `--space-2` 4px (cell padding), `--space-3` 8px (row padding, between buttons), `--space-4` 12px (panel and sheet padding, between blocks), `--space-5` 16px (sheet side padding, column gaps), `--space-6` 24px (hero side padding), `--space-7` 36px (unused here).\n- Control heights: `--size-control-small` 20px, `--size-control` 26px, `--size-control-large` 40px. `--size-talent` 38px is a talent cell, `--size-portrait` 150px the portrait column of the sheet.\n\n## Typography and colour roles\n\n- Three families and a monospace. `--font-heading` is an old-style book serif (IM Fell English where installed, else Goudy Old Style, Garamond, Georgia), bold and in ordinary case, for headings and names. `--font-ui` is Georgia bold for plates, navigation, table heads and labels. `--font-body` is Arial for everything read. The references used a commercial book face for headings; the stack above is the closest free one.\n- Sizes: `--text-base` 13px at `--line-body` 1.45; `--text-small` 11px; `--text-ui` 12px bold; `--text-large` 16px; `--text-h3` 15px, `--text-h2` 20px, `--text-h1` 28px; `--text-display` 38px for the hero title only. Nothing is tracked or set in capitals.\n- Palette: dark leather page, parchment sheet and slabs, oxblood masthead and table heads with cream lettering (`--color-bar`), dark leather rail and foot strip (`--color-bar-alt`), brown ink, oxblood headings, brass frames and secondary plates, a forest green accent for the current plate and tab. Links are brown and underlined in running text.\n- Surface: a 4px double brass border on every frame with a pale line inside it and a soft inner shade (`--shadow-panel`), square corners, round 10px labels like wax seals, flat plates with one engraved inner line, parchment drawn as three soft blotches over the surface colour (`--fill-panel`), planked leather for the page, dotted leather for the rail.\n- The era's rule for text on fills, kept by every layout and every token set: on `--color-canvas` and on the three surfaces (`--color-surface`, `--color-surface-alt`, `--color-surface-strong`, 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`; on `--fill-bar-alt` only `--color-bar-alt-text`; 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`.\n- No text is written straight on `--color-page`: the page only shows as stone around the slabs.\n- `--color-fill-1` to `--color-fill-4`, `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` are inks: every palette of the era keeps them readable on its surfaces. They colour item names by rarity (`.ds-item`: common `--color-text`, uncommon `--color-success`, rare `--color-fill-1`, epic `--color-fill-2`, legendary `--color-fill-3`, set `--color-fill-4`), class crests, status labels and bars. They are never used as a fill under text; a grid cell is the surface tinted by 24% of its fill colour, and a status badge is the surface tinted by 16% of its status colour with the colour itself as ink and border.\n- `--color-border-strong` is the metal of every frame (gold, brass or steel); `--color-border` the ordinary rule; `--color-border-muted` the faint rule between rows. `--color-accent-alt` is the small stone set in each frame corner, the \"new\" marker and the edge of a learned or current cell; it is never a fill under text.\n- `--color-accent` (through `--fill-accent`) marks the current navigation plate, the current tab, the current page number, the default badge and the default bar of a progress bar.\n- The destructive button is the secondary plate lettered and edged in `--color-danger`, because the primary plate of a palette may itself be red.\n- Hero blocks are filled with `--fill-bar-alt` under a glow of `--color-accent` and written in `--color-bar-alt-text`; the banner and table heads take `--fill-bar`; the footer takes `--fill-bar-alt`. `--fill-inverse` with `--color-inverse-text` is the closing band of the home page (`.ds-band`): a strip of the opposite material, parchment on a dark set and dark stone on a light one.\n- One-off values built in `components.css` from tokens: the faceted corner caps of `.ds-frame` (the frame metal against the same colour mixed 45% toward `--color-shadow`), button and plate edges (the fill colour mixed 60% toward `--color-shadow`), the 24% and 16% tints named above, alternate rows and wells as `--color-surface-alt` at 70% over the panel fill, `50%` radius for lamps and the round play plate, and `clip-path` polygons for ribbons, pennants, standards and the drawn landscape.\n\n## Components\n\n- `.ds-page`: on ``; paints the page. `.ds-page__wrap` is the 980px slab, a grid of the rail column and the sheet; `.ds-page__body` the sheet, `.ds-page__inner` the stack of a view.\n- `.ds-nav`: the masthead and the rail are one component. `.ds-nav__bar` is the masthead in `--fill-bar` with the `.ds-brand`, `.ds-nav__section`, `.ds-nav__search` and `.ds-nav__who`; `.ds-nav__rail` the left column in `--fill-bar-alt` holding `.ds-nav__links`, a column of `.ds-nav__link` plates with a `.ds-icon` crest each, the current one in `--fill-accent` (`is-current`, or in the specimen one selector per view). One item is a `.ds-menu`, whose list opens to the right of its plate; `.ds-nav__caret` is its arrow.\n- `.ds-brand`: the mark and name at the left of the masthead. `.ds-brand__mark` is a 40px crest tile dressed as the primary plate (`--fill-button`, `--color-button-text`, the frame-metal border, `--radius-control`, `--shadow-control`); `.ds-brand__name` the name in the heading face at h1 size in `--color-bar-text`. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the search window: a centred frame with `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__search` (a well, a select and the primary plate, the main action) and a `.ds-hero__note` of example `.ds-hero__link`s. Once, at the top of the home page.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__text` (may end in a status badge), `.ds-page-header__actions` on the right, a frame-metal rule below.\n- `.ds-sidebar`: a block of the rail, written straight on the rail's fill in `--color-bar-alt-text`: `.ds-sidebar__title` over a rule, `.ds-sidebar__list` of `.ds-sidebar__item`, each a `.ds-sidebar__link` and a `.ds-sidebar__meta` line.\n- `.ds-sheet`: the character window: three columns, `.ds-sheet__portrait` (a large crest, `.ds-sheet__crest`, over health, resource and experience bars) and two columns of `.ds-sheet__title` and `.ds-sheet__rows`. A `.ds-sheet__row` is a name and a `.ds-sheet__value`; `.ds-sheet__row--item` a `.ds-sheet__slot`, an item name in its rarity colour and a `.ds-sheet__level`.\n- `.ds-trees`: three talent panels side by side. `.ds-talents` is the tree, four cells across on a sunk slab; `.ds-talent` a cell with a crest and a `.ds-talent__rank`: plain is locked, `is-open` (edged in `--color-success`) can take a point, `is-learned` (edged in `--color-accent-alt`) is taken; `.ds-talent--gap` leaves a place empty.\n- `.ds-footer`: the foot strip in `--fill-bar-alt`: `.ds-footer__links` of `.ds-footer__link` on the left, `.ds-footer__note` on the right.\n- Period components carried: `.ds-menu`, `.ds-tooltip` (on item names, on a talent cell, and written into the page as `.ds-tooltip--card` on the item's own page), `.ds-progress`, `.ds-avatar`, `.ds-accordion`. A carousel has no place in a database; a switch did not exist on these sites.\n- `.ds-view`: one screen of the example site, a `
` with an id; only the one named in the address shows, and `.ds-view--home` shows when none is named. It is always a plain block; an inner wrapper (`.ds-page__inner`) does the layout.\n- `.ds-frame`: the game window every box is built from. `--fill-panel` inside a border of `--border-width-strong` in `--color-border-strong`, with `--shadow-panel` for its inner lines and lip, and two pseudo-elements that set a faceted cap and a small `--color-accent-alt` stone on each corner (`--size-corner`, 8px). Add it to a panel, a table wrapper, a side box, the hero. `.ds-frame--plain` leaves the corner caps off for a lighter box inside another frame or a strip of figures.\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 in the heading face; `.ds-prose__quote` a quoted passage with a `cite` line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for meta and tool links. `.ds-links` is a wrapping row of links.\n- `.ds-button`: a bevelled metal plate, 26px high, with a lit top edge and a dark lip from `--shadow-control`. `.ds-button--secondary` is the second metal; `.ds-button--danger` the destructive plate (secondary metal, danger ink and edge); `.ds-button--large` the 40px call in the heading face (\"Play free\", \"Apply to join\"); `.ds-button--small` 20px. States `is-hover` (takes `--shadow-control-hover`, which is where a set's glow shows), `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row.\n- `.ds-form`: rows (`.ds-form__row`) of a right-aligned `.ds-form__label` (130px, in the UI face) and a `.ds-form__field`. `.ds-form__input`, `.ds-form__select` and `.ds-form__textarea` are wells sunk with `--shadow-control-pressed`; `.ds-form__input--short` is a 140px well; `is-error` with `.ds-form__error` under it; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, where `.ds-form__actions-end` pushes the destructive plate to the right. `.ds-form--search` is one well and one plate in a line.\n- `.ds-table`: a data table, always inside a `.ds-frame`. Head cells take `--fill-bar`; rows are ruled with `--color-border-muted` and every second row is tinted; `is-numeric` right-aligns a column, `is-centre` centres it; `.ds-table__group` is a category row in `--color-surface-strong`; `.ds-table__sub` a small second line in a cell; `.ds-table__who` a crest beside a name.\n- `.ds-list`: ruled rows. `.ds-list__item` holds a `.ds-list__body` with `.ds-list__title`, `.ds-list__text` and `.ds-list__meta`, and may end in a badge. `.ds-list--tight` is the dense form for side boxes and item lists.\n- `.ds-panel`: a box with a `.ds-panel__title` and a `.ds-panel__body` (`--flush` for a table or list that runs to the edges), `.ds-panel__text`, `.ds-panel__foot`. Use it together with `.ds-frame`.\n- `.ds-stat`: one figure: `.ds-stat__value` (h1 size, heading face) over `.ds-stat__label` (small, UI face). Three to five sit in a `.ds-stats` row, one framed strip divided by rules.\n- `.ds-grid`: four `.ds-grid__cell` blocks across (`.ds-grid--two` for two); the base cell is tinted and edged with `--color-fill-1`, `.ds-grid__cell--2`, `--3`, `--4` with the others. Inside: `.ds-grid__icon` (a crest in the fill colour), `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__more` or a badge.\n- `.ds-tabs`: plates standing on the top edge of the frame that follows them; `.ds-tabs__tab`, the `is-current` one taller and in `--fill-accent`; `.ds-tabs__count` for a number.\n- `.ds-badge`: a small label in `--fill-accent`. Status variants `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` (ink on a tint of itself), `.ds-badge--quiet` (a rank or a plain tag), `.ds-badge--new` (outlined in `--color-accent-alt`). `.ds-badges` is a row; `.ds-dot` with `--success`, `--warning`, `--danger` is a status lamp.\n- `.ds-item`: an item name in its rarity colour: plain for common, `--uncommon`, `--rare`, `--epic`, `--legendary`, `--set`. Always bold, never underlined.\n- `.ds-tooltip`: the item window, the era's signature. The trigger wraps a `.ds-tooltip__tip`, a small frame with `--shadow-dialog` that shows on hover or focus (`is-open` shows it by class; `.ds-tooltip--end` hangs it from the right edge). Inside: `.ds-tooltip__name` (with a `.ds-item` rarity class), `.ds-tooltip__line` rows, `--bonus` in `--color-success`, `--muted`, `--lore` in italics. `.ds-tooltip--card` writes the same window into the page.\n- `.ds-progress`: a sunk track with a `.ds-progress__bar`; width by `.ds-progress--10`, `--25`, `--40`, `--60`, `--75`, `--90`, `--100`; colour by `--health` (`--color-success`), `--xp` (`--color-fill-2`), `--rep` (`--color-warning`), `--danger`. `.ds-progress__label` is the line above it, name left and figure right.\n- `.ds-avatar`: a portrait as a framed crest: an inline SVG class crest on a `--color-surface-strong` tile with the frame border. `.ds-avatar--small` (26px), default 36px, `.ds-avatar--large` (72px); `.ds-avatar--1` to `--4` colour the crest with a fill colour.\n- `.ds-accordion`: `
` sections; `.ds-accordion__item`, `.ds-accordion__summary` with a small plate that reads + or -, `.ds-accordion__meta` at its right, `.ds-accordion__body`.\n- `.ds-menu`: the drop-down under a navigation item: a `.ds-menu__list` of `.ds-menu__item` links in a small frame, shown on hover or focus of the item (`is-open` by class). `.ds-menu__caret` is the small arrow in the item.\n- `.ds-notice`: a ruled message with `.ds-notice__title` and `.ds-notice__text`; `.ds-notice--error` for errors. `.ds-notices` stacks several.\n- `.ds-pagination`: small secondary plates, `.ds-pagination__link`; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (a double chevron) and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small game window: `.ds-dialog__title` plate in `--fill-bar` with a square `.ds-dialog__close`, `.ds-dialog__body` with `.ds-dialog__text`, `.ds-dialog__actions` centred. `.ds-dialog__backdrop` is the dimmed area behind it where the view has room for one.\n- `.ds-empty`: an empty slot sunk into the sheet: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary plate.\n- `.ds-band`: the closing call of the home page, a strip in `--fill-inverse`: `.ds-band__title` and `.ds-band__text` on the left, one primary plate on the right. At most one per page.\n- `.ds-heading`: a section title followed by a fading rule (`--centre` puts a rule on both sides); `.ds-rule` a rule with a diamond in its middle.\n- `.ds-stack`, `.ds-split` (`--wide` 3 to 2, `--even` equal heights), `.ds-row` (`--between`), `.ds-muted`, `.ds-icon`: small layout helpers.\n\n## Never\n\n- `content-width <= 980px`: the page is a fixed column made for a 1024px screen.\n- `font-size <= 38px`: the hero title is the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `line-height <= 1.5`: body text is set at 1.45.\n- `font-families <= 4`: a book serif, Georgia, Arial and a monospace.\n- `letter-spacing <= 0px`: nothing is tracked.\n- `uppercase-text <= 0%`: nothing is set in capitals by the style.\n- `border-radius <= 10px`: everything is square but the 10px wax-seal labels and lamps.\n- `border-width <= 4px`: the double brass frame is 4px, every rule 1px.\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. Anything that stands as a box is a `.ds-frame`: do not draw a new border, add the class. A raised thing (a plate, a title, a crest) takes a `--fill-*` gradient, an edge mixed toward `--color-shadow` and `--shadow-control`; a sunk thing (a well, a track, an empty slot) takes `--fill-input` or the tinted alternate surface and `--shadow-control-pressed`. Keep the era's rule for text on fills from the section above: bar text on bars, surface text on surfaces, and the rarity and status colours as ink only. A new banner or ribbon is cut with `clip-path` from a bar or accent fill. Do not add images, soft cards without a frame, transitions, or a colour that is not a token.\n", "components.css": "/* Layout tokens (structure part). A fixed 980px database on a 1024px screen:\n a slim masthead with the search line, a 190px stone rail of navigation\n plates down the left and the sheets of the armory beside it. */\n:root {\n --size-page: 980px;\n --size-rail: 190px;\n --size-brand: 40px;\n --size-search: 300px;\n --size-talent: 38px;\n --size-portrait: 150px;\n --size-hair: 1px;\n --size-corner: 8px;\n --size-control: 26px;\n --size-control-small: 20px;\n --size-control-large: 40px;\n --size-icon: 16px;\n --size-dot: 8px;\n --size-crest: 36px;\n --size-crest-large: 72px;\n --size-bar: 12px;\n --size-label: 130px;\n --size-field-short: 140px;\n --size-textarea: 90px;\n --size-dialog: 380px;\n --size-tip: 250px;\n --size-menu: 170px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 24px;\n --space-7: 36px;\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/* ---------- frame: the game window every box is built from ----------\n The border is the metal of the frame, the surface token --shadow-panel\n adds its inner lines and lip, and two pseudo-elements set a faceted cap\n with a small stone on each corner. */\n.ds-frame {\n position: relative;\n box-sizing: border-box;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-frame::before,\n.ds-frame::after {\n content: \"\";\n position: absolute;\n inset: calc((var(--border-width-strong) + var(--space-1)) * -1);\n z-index: 2;\n pointer-events: none;\n border-radius: var(--radius-panel);\n}\n.ds-frame::before {\n background:\n linear-gradient(135deg, var(--color-border-strong) 50%, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%) top left / var(--size-corner) var(--size-corner) no-repeat,\n linear-gradient(225deg, var(--color-border-strong) 50%, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%) top right / var(--size-corner) var(--size-corner) no-repeat,\n linear-gradient(45deg, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%, var(--color-border-strong) 50%) bottom left / var(--size-corner) var(--size-corner) no-repeat,\n linear-gradient(315deg, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%, var(--color-border-strong) 50%) bottom right / var(--size-corner) var(--size-corner) no-repeat;\n}\n.ds-frame::after {\n background:\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) top left / var(--size-corner) var(--size-corner) no-repeat,\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) top right / var(--size-corner) var(--size-corner) no-repeat,\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) bottom left / var(--size-corner) var(--size-corner) no-repeat,\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) bottom right / var(--size-corner) var(--size-corner) no-repeat;\n}\n.ds-frame--plain::before,\n.ds-frame--plain::after {\n display: none;\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-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-split--even {\n align-items: stretch;\n}\n.ds-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\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/* An ornamental heading: the title between two fading rules. */\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/* A rule with a diamond set in its middle. */\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-corner);\n height: var(--size-corner);\n background: var(--color-border-strong);\n box-shadow: var(--shadow-control);\n transform: translate(-50%, -50%) rotate(45deg);\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-6);\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-family: var(--font-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n/* A quoted passage: a ruled inset in the alternate surface. */\n.ds-prose__quote {\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-prose__quote cite {\n display: block;\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-bold);\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 font-size: var(--text-base);\n}\n\n/* ---------- buttons: bevelled metal plates ---------- */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n box-sizing: border-box;\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/* The destructive plate: the secondary metal, lettered and edged in the\n danger colour. */\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--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 font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: 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-align: right;\n text-transform: var(--ui-transform);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\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}\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}\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 color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\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 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/* A search line: one well and one plate. */\n.ds-form--search {\n flex-direction: row;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2) var(--space-3);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding: var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table tbody th {\n font-weight: var(--weight-bold);\n}\n.ds-table tbody tr:nth-child(even) {\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover,\n.ds-table tbody tr.is-hover {\n background: var(--color-surface-strong);\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 a:not(.ds-item) {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:not(.ds-item):hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-table__group th,\n.ds-table__group td {\n background: var(--color-surface-strong);\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-table__sub {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-table__who {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 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-link);\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.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-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-1);\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-2) var(--space-4);\n}\n.ds-list--tight .ds-list__title {\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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-panel__body {\n flex: 1;\n padding: var(--space-4);\n font-size: var(--text-base);\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__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* ---------- stats ---------- */\n.ds-stats {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1;\n padding: var(--space-3) var(--space-4);\n text-align: center;\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}\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 with the four rarity colours ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid--two {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-4);\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-1) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-control);\n font-size: var(--text-base);\n}\n.ds-grid__cell--2 {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n border-top-color: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n border-top-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n border-top-color: var(--color-fill-4);\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__cell .ds-badge {\n align-self: flex-start;\n}\n.ds-grid__more {\n color: var(--color-link);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- tabs: plates standing on the edge of the window below ---------- */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) 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-strong);\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}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-tabs__tab.is-current {\n padding: var(--space-3) var(--space-5);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__count {\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%);\n border-radius: var(--radius-pill);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* Status labels: the status colour as ink on a tint of itself. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger,\n.ds-badge--quiet {\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 gap: var(--space-2);\n}\n/* A status lamp for a realm or a member. */\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 box-shadow: var(--shadow-control);\n vertical-align: middle;\n}\n\n/* ---------- item names in the rarity colours ---------- */\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 top: calc(100% + var(--space-2));\n left: 0;\n z-index: 8;\n display: none;\n box-sizing: border-box;\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-strong) 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-base);\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 .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 left: auto;\n right: 0;\n}\n/* The same window written into the page, on an item's own sheet. */\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}\n.ds-tooltip__name {\n display: block;\n margin-bottom: var(--space-1);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-tooltip__line {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-tooltip__line--bonus {\n color: var(--color-success);\n}\n.ds-tooltip__line--muted {\n color: var(--color-text-muted);\n}\n.ds-tooltip__line--lore {\n margin-top: var(--space-2);\n color: var(--color-accent-alt);\n font-style: italic;\n}\n\n/* ---------- progress: health, experience and reputation bars ---------- */\n.ds-progress {\n display: block;\n box-sizing: border-box;\n height: var(--size-bar);\n background: var(--fill-input);\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 overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n box-shadow: var(--shadow-control);\n}\n.ds-progress--10 .ds-progress__bar { width: 10%; }\n.ds-progress--40 .ds-progress__bar { width: 40%; }\n.ds-progress--60 .ds-progress__bar { width: 60%; }\n.ds-progress--90 .ds-progress__bar { width: 90%; }\n.ds-progress--100 .ds-progress__bar { width: 100%; }\n.ds-progress--health .ds-progress__bar { background: var(--color-success); }\n.ds-progress--xp .ds-progress__bar { background: var(--color-fill-2); }\n.ds-progress--rep .ds-progress__bar { background: var(--color-warning); }\n.ds-progress--danger .ds-progress__bar { background: var(--color-danger); }\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 + .ds-progress {\n margin-bottom: var(--space-3);\n}\n.ds-progress__label + .ds-progress:last-child {\n margin-bottom: 0;\n}\n\n/* ---------- avatar: a portrait as a framed crest ---------- */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\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-strong) 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 border-width: var(--border-width);\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 gap: var(--space-2);\n}\n.ds-accordion__item {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\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 background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: var(--radius-control);\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 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 width: var(--size-icon);\n height: var(--size-icon);\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-1) * 4) var(--space-1) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-1) calc(var(--space-1) * 4) 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 box-shadow: var(--shadow-control);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-1) * 4) var(--space-1) no-repeat,\n var(--fill-button-secondary);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-heading);\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: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\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) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\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 box-sizing: border-box;\n min-width: var(--size-control-small);\n min-height: var(--size-control-small);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary), var(--color-shadow) 60%);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-pagination__link.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\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 color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a small game window with a title plate ---------- */\n.ds-dialog__backdrop {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n position: relative;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\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 font-family: var(--font-body);\n font-size: var(--text-base);\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-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n 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-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-small);\n height: var(--size-control-small);\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-size: 0;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n width: calc(var(--space-1) * 5);\n height: calc(var(--space-1) * 5);\n background: linear-gradient(currentColor, currentColor) center / 100% var(--space-1) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-1) 100% no-repeat;\n rotate: 45deg;\n}\n.ds-dialog__body {\n padding: var(--space-4);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-3);\n}\n.ds-dialog__text:last-child {\n margin-bottom: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n\n/* ---------- empty state: an empty slot ---------- */\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-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-crest);\n height: var(--size-crest);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0;\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n margin: 0;\n max-width: 44ch;\n}\n\n/* ---------- menu: the drop-down under a navigation plate ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 9;\n display: none;\n box-sizing: border-box;\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-strong) 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 border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-menu__list li:last-child .ds-menu__item {\n border-bottom: 0;\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.ds-menu__caret {\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n\n/* ---------- page header of an inner page ---------- */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding-bottom: var(--space-3);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n\n/* ---------- brand: the mark as a crest ---------- */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-brand);\n height: var(--size-brand);\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 color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\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\n/* ---------- band: the closing call, a strip of the inverse material ---------- */\n.ds-band {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\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-panel);\n box-shadow: var(--shadow-control);\n font-size: var(--text-base);\n}\n.ds-band__title {\n display: block;\n margin: 0;\n color: var(--color-inverse-text);\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-band__text {\n margin: 0;\n}\n\n/* ---------- shell: masthead across, rail down the left, sheets beside it ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-4) 0 var(--space-6);\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}\n.ds-page__wrap {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n background: var(--color-canvas);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-page__body {\n grid-column: 2;\n grid-row: 2;\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* ---------- nav: the masthead and the rail are one component ---------- */\n.ds-nav {\n display: contents;\n}\n.ds-nav__bar {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-4);\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 border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-nav__section {\n padding-left: var(--space-4);\n color: var(--color-bar-text);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\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-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-nav__search {\n width: var(--size-search);\n margin-left: auto;\n}\n.ds-nav__who {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__rail {\n grid-column: 1;\n grid-row: 2;\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-4) 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-right: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__links {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%);\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}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__link.is-current,\n.ds-page:has(#character:target) .ds-nav__link[href=\"#character\"]:not(.ds-nav__link--elsewhere),\n.ds-page:has(#talents:target) .ds-nav__link[href=\"#talents\"],\n.ds-page:has(#items:target) .ds-nav__link[href=\"#items\"],\n.ds-page:has(#item:target) .ds-nav__link[href=\"#items\"],\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]:not(.ds-nav__link--elsewhere),\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]:not(.ds-nav__link--elsewhere) {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__caret {\n margin-left: auto;\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n/* In the rail the drop-down opens beside its plate. */\n.ds-menu__list {\n top: 0;\n left: 100%;\n}\n\n/* ---------- sidebar: a block of the rail, written on the stone ---------- */\n.ds-sidebar {\n padding: 0 var(--space-4);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding-bottom: var(--space-2);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__link {\n color: var(--color-bar-alt-text);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n text-decoration: underline;\n}\n.ds-sidebar__meta {\n display: block;\n color: var(--color-bar-alt-text);\n opacity: 0.75;\n}\n\n/* ---------- hero: the search window ---------- */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-6);\n background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--color-accent) 55%, transparent) 0, transparent 70%), var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n text-align: center;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0;\n max-width: 62ch;\n font-size: var(--text-large);\n}\n.ds-hero__search {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-field-short) auto;\n gap: var(--space-2);\n width: 100%;\n max-width: 78%;\n}\n.ds-hero__note {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-hero__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* ---------- the character sheet ---------- */\n.ds-sheet {\n display: grid;\n grid-template-columns: var(--size-portrait) minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n padding: var(--space-4);\n}\n.ds-sheet__portrait {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-sheet__crest {\n width: 100%;\n height: var(--size-portrait);\n}\n.ds-sheet__title {\n margin: 0 0 var(--space-2);\n padding-bottom: var(--space-1);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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-sheet__rows {\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n}\n.ds-sheet__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sheet__value {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n}\n.ds-sheet__slot {\n flex: none;\n width: 9ch;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-sheet__row--item {\n justify-content: flex-start;\n align-items: baseline;\n}\n.ds-sheet__level {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- the talent tree: cells on a slab ---------- */\n.ds-talents {\n display: grid;\n grid-template-columns: repeat(4, var(--size-talent));\n justify-content: center;\n gap: var(--space-4) var(--space-5);\n padding: var(--space-4);\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-talent {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-talent);\n height: var(--size-talent);\n padding: var(--space-2);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-talent svg {\n width: 100%;\n height: 100%;\n}\n.ds-talent.is-open {\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-color: var(--color-success);\n box-shadow: var(--shadow-control);\n}\n.ds-talent.is-learned {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n box-shadow: var(--shadow-control);\n}\n.ds-talent--gap {\n visibility: hidden;\n}\n.ds-talent__rank {\n position: absolute;\n right: calc(var(--space-3) * -1);\n bottom: calc(var(--space-3) * -1);\n padding: 0 var(--space-1);\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-talent.is-learned .ds-talent__rank {\n color: var(--color-accent-alt);\n border-color: var(--color-accent-alt);\n}\n.ds-talent.is-open .ds-talent__rank {\n color: var(--color-success);\n border-color: var(--color-success);\n}\n.ds-trees {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-tabs {\n border-bottom: 0;\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__note {\n margin: 0;\n}\n.ds-brand__mark {\n padding: var(--space-2);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin armory: the character and item database, specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n The armory\n
\n \n Find\n
\n Brannoc of Ashenford\n
\n \n
\n\n
\n\n
\n
\n
\n

Search the armory

\n

Every character, item and guild of the 24 realms, as the game saw them last night.

\n
\n \n \n Search\n
\n

Try Brannoc, Gatekeeper's Bulwark or a warden talent build.

\n
\n\n
    \n
  • 1,204,518Characters
    • \n
  • 18,640Items
    • \n
  • 9,312Guilds
    • \n
  • 04:10Last update
    • \n
\n\n
    \n
  • \n \n

    Characters

    \n

    Sheets, gear and talents of every hero over level ten.

    \n Open a sheet\n
    • \n
  • \n \n

    Items

    \n

    What it does, who drops it and who wears it.

    \n Search items\n
    • \n
  • \n \n

    Talents

    \n

    Plan a build for any calling before you pay to learn it.

    \n Open the planner\n
    • \n
  • \n \n

    Arena ladder

    \n

    Standings of the season, by realm and by team size.

    \n See the ladder\n
    • \n
\n\n
\n
\n

Top of the ladder, season four

\n
\n \n \n \n \n \n \n \n \n
#CharacterStatusRating
1YsoldeArcanist, HighmoorOnline2,418
2BrannocWarden, AshenfordOnline2,391
3PerrinRanger, StonewatchIn a match2,350
4MaelisMender, SaltmarshOffline2,307
\n
\n
\n
\n

Newest items

\n
\n \n
\n
\n
\n\n
\n
Is your sheet out of date?

Log out of the game in a town and the armory takes the new sheet at the next realm restart.

\n Find your character\n
\n
\n
\n\n
\n
\n
    \n
  1. Armory
    2. \n
  2. »
    3. \n
  3. Ashenford
    4. \n
  4. »
    5. \n
  5. Brannoc
    6. \n
\n
\n
\n

Brannoc

\n

Level 60 warden of the guild Lanternkeepers, realm Ashenford. Online

\n
\n
CompareTalents
\n
\n
\n \n
\n
\n
\n \n
\n
Health8,420
\n \n
Resolve60 / 100
\n \n
ExperienceLevel 60
\n \n
\n
\n
\n

Attributes

\n
    \n
  • Strength312
    • \n
  • Agility104
    • \n
  • Stamina486
    • \n
  • Intellect41
    • \n
  • Spirit58
    • \n
\n

Defence

\n
    \n
  • Armour11,902
    • \n
  • Block chance24.6%
    • \n
  • Parry chance14.1%
    • \n
  • Dodge chance9.8%
    • \n
\n
\n
\n

Equipment

\n \n

Average item level 64. Two pieces of the Vigil set are missing.

\n
\n
\n
\n
\n
\n
\n

Reputation

\n
\n
Wardens of the GateRevered, 18,900 / 21,000
\n \n
River townsHonoured, 7,200 / 12,000
\n \n
Salt tradersUnfriendly, 300 / 3,000
\n \n
\n
\n
\n

Recent deeds

\n
\n
    \n
  • Held the Ember GateWarband of twelve, 6 October
    10
    • \n
  • Looted Ember of the GateFrom the Gate Warden, 6 October
    25
    • \n
  • Revered with the Wardens2 October
    10
    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Armory
    2. \n
  2. »
    3. \n
  3. Brannoc
    4. \n
  4. »
    5. \n
  5. Talents
    6. \n
\n
\n
\n

Warden talents

\n

Brannoc's build, 31 / 5 / 15. Change it here to plan; nothing is saved to the game.

\n
\n
Copy link
\n
\n
\n
\n

Bulwark

\n
\n
Points spent31
\n \n
\n 5/5\n 5/5\n 3/3\n \n \n 5/5Shield WallRank 5 of 5Halves all harm taken for 10 seconds.Requires 10 points in Bulwark\n 2/2\n 1/3\n 5/5\n \n 5/5\n \n \n 1/1\n \n 0/5\n
\n
\n
\n
\n

Fury

\n
\n
Points spent5
\n \n
\n 5/5\n 0/5\n 0/3\n \n 0/2\n 0/5\n \n 0/3\n \n 0/5\n 0/1\n \n \n 0/5\n \n \n
\n
\n
\n
\n

Command

\n
\n
Points spent15
\n \n
\n 5/5\n 3/3\n \n 0/2\n 5/5\n \n 2/2\n \n \n 0/5\n 0/3\n \n \n 0/1\n \n \n
\n
\n
\n
\n
\n
\n
\n

Clear the planner? x

\n
\n

All 51 points return to the pool and the three trees go back to empty.

\n

Brannoc's talents in the game are not touched.

\n
\n
\n Keep the build\n \n
\n
\n
\n
\n

Reading the trees

\n
\n

A gilded cell is learned, a green one can take a point now, a grey one is still locked. Rest the pointer on a cell to read it.

\n
Points left to spend0 of 51
\n \n
Back to the sheet
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Armory
    2. \n
  2. »
    3. \n
  3. Items
    4. \n
  4. »
    5. \n
  5. Search
    6. \n
\n
\n
\n

Item search

\n

214 items match \"plate, level 55 and up\". Sorted by item level.

\n
\n
New search
\n
\n
\n
\n

Narrow the search

\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n \n Item levels run from 1 to 80.\n
\n
\n
\n \n
\n
\n
\n Only\n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n

Showing 1 to 6 of 214. Items of patch 3.2 were added last night.

\n

One filter was left out. The lowest level is not a level the game has.

\n
\n
\n \n

No saved searches

\n

Save a search to see new matching items here after every patch.

\n Save this search\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
ItemSlotSourceBindsLevelArmour
Gatewarden's LegplatesLegsThe Gate WardenOn pickup801,480
Gatekeeper's BulwarkOff handThe Gate WardenOn pickup712,840
Vigil BreastplateChestWarden quest lineQuest item701,655
Ashplate HelmHeadCinder Reach, any foeOn equip661,102
Cinderwalker GreavesLegsSmith, 300 skillOn equip661,190
Militia Plate GlovesHandsVendor, AshenfordNever55640
\n
\n \n
\n
\n\n
\n
\n
    \n
  1. Armory
    2. \n
  2. »
    3. \n
  3. Items
    4. \n
  4. »
    5. \n
  5. Gatekeeper's Bulwark
    6. \n
\n
\n
\n

Gatekeeper's Bulwark

\n

Epic shield, item level 71. Added in patch 3.2. Item of the week

\n
\n
Compare with Brannoc
\n
\n
\n
\n
\n
\n
\n

The shield of the gate

\n

The best shield a warden can carry before the last warband fight, and the first thing most of them ask for.

\n

It drops from the Gate Warden about once in six kills. To show it to your warband, hold shift and click the name, or type /link Gatekeeper's Bulwark in chat.

\n

Who should take it

\n
    \n
  • Wardens who stand at the front, before anyone else.
    • \n
  • Menders, if no warden present can use it.
    • \n
\n

What it replaces

\n

Anything under item level 66. Keep the Ashplate set shield for fights with fire.

\n
\n
\n
\n
\n
\n Where does it drop? 1 source\n

The Gate Warden, last foe of the Ember Gate, for warbands of twelve. Chance: 16 in 100.

\n
\n
\n Can it be traded? No\n

It binds to the character who picks it up.

\n
\n
\n Who wears it? 412 characters\n

Mostly wardens over level 58.

\n
\n
\n
\n
\n
\n
\n Gatekeeper's Bulwark\n Binds when picked up\n Off handShield\n 2,840 armour\n 68 block\n +31 stamina\n +14 strength\n Equip: raises block chance by 2%.\n Durability 120 / 120\n Requires level 58\n \"It was a door once.\"\n
\n
\n
\n

See also

\n
\n \n
\n
\n
\n
\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.game-fantasy.app.s02.p02.t02.u02\",\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\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-gf-2222\",\n \"short\": \"v1-gf-2222\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #1b130c;\n --color-canvas: #e3d2a6;\n --color-surface: #ecdfbb;\n --color-surface-alt: #e0cd9c;\n --color-surface-strong: #cfb67e;\n --color-bar: #6e1a14;\n --color-bar-text: #f4e3b5;\n --color-bar-alt: #3a2a18;\n --color-bar-alt-text: #e2cb94;\n --color-inverse: #241a10;\n --color-inverse-text: #ead9ab;\n --color-text: #2e2112;\n --color-text-muted: #6f5b3c;\n --color-heading: #5e150f;\n --color-heading-alt: #6b4313;\n --color-link: #7b4f17;\n --color-link-quiet: #5a4630;\n --color-link-visited: #6d5a52;\n --color-link-hover: #a3231a;\n --color-link-active: #2e2112;\n --color-border: #b79c62;\n --color-border-strong: #8a6a2c;\n --color-border-muted: #d1bd8a;\n --color-accent: #2f5d34;\n --color-accent-text: #f4e9c4;\n --color-accent-alt: #a8551a;\n --color-fill-1: #1d4f91;\n --color-fill-2: #6b2a8c;\n --color-fill-3: #a8480f;\n --color-fill-4: #17695f;\n --color-button: #7a1f17;\n --color-button-text: #f8e7b8;\n --color-button-hover-text: #fffbe8;\n --color-button-secondary: #c9a85a;\n --color-button-secondary-text: #2e2112;\n --color-input: #f6ecd0;\n --color-input-text: #2e2112;\n --color-input-border: #9a8250;\n --color-disabled: #d6c79d;\n --color-disabled-text: #94835f;\n --color-danger: #9c1c12;\n --color-danger-surface: #efc9b0;\n --color-success: #2f6b1f;\n --color-warning: #9a6200;\n --color-notice: #dfe0b4;\n --color-notice-text: #3a3a16;\n --color-focus: #1d4f91;\n --color-shadow: #1a0f05;\n --color-overlay: rgba(20, 12, 4, 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, \"Liberation Sans\", sans-serif;\n --font-heading: \"IM Fell English\", \"Goudy Old Style\", Garamond, Georgia, \"Times New Roman\", serif;\n --font-ui: Georgia, \"Times New Roman\", Times, serif;\n --font-mono: \"Lucida Console\", Monaco, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 38px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.45;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.08em;\n --ui-transform: none;\n --link-decoration: underline;\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: 4px;\n --border-style: double;\n --radius-control: 2px;\n --radius-panel: 0;\n --radius-pill: 10px;\n --radius-page: 0;\n --shadow-panel: inset 0 0 0 1px color-mix(in srgb, white 30%, transparent), inset 0 0 22px color-mix(in srgb, var(--color-shadow) 16%, transparent), 1px 2px 5px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 28%, transparent), 0 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 60%, transparent), 0 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-control-pressed: inset 0 1px 3px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 80%, transparent), 4px 6px 14px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-text: 0 1px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, black 30%, transparent) 0, color-mix(in srgb, black 30%, transparent) 2px, transparent 2px, transparent 120px), repeating-linear-gradient(90deg, color-mix(in srgb, white 2%, transparent) 0, transparent 3px, color-mix(in srgb, black 8%, transparent) 7px, transparent 11px), linear-gradient(to bottom, color-mix(in srgb, var(--color-page), white 8%) 0, var(--color-page) 400px), var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, black 28%, transparent) 0, transparent 3px, transparent calc(100% - 3px), color-mix(in srgb, black 34%, transparent) 100%), linear-gradient(to right, color-mix(in srgb, var(--color-bar), black 22%) 0, color-mix(in srgb, var(--color-bar), white 8%) 50%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n --fill-bar-alt: radial-gradient(circle at 2px 2px, color-mix(in srgb, white 7%, transparent) 0, color-mix(in srgb, white 7%, transparent) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 6%) 0, color-mix(in srgb, var(--color-bar-alt), black 18%) 100%);\n --fill-inverse: radial-gradient(ellipse at 50% 0, color-mix(in srgb, white 10%, transparent) 0, transparent 70%), var(--color-inverse);\n --fill-accent: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-accent), white 24%) 0, var(--color-accent) 60%, color-mix(in srgb, var(--color-accent), black 18%) 100%);\n --fill-panel: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--color-surface), black 9%) 0, transparent 45%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--color-surface), black 11%) 0, transparent 50%), radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--color-surface), white 30%) 0, transparent 50%), var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 14%) 0, var(--color-button) 60%, color-mix(in srgb, var(--color-button), black 16%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 26%) 0, color-mix(in srgb, var(--color-button), white 8%) 60%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 22%) 0, var(--color-button-secondary) 60%, color-mix(in srgb, var(--color-button-secondary), black 12%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }