{ "id": "v1-gf-1122", "long_id": "v1.game-fantasy.portal.s01.p01.t02.u02", "name": "Game fantasy portal (carved stone, gilded frames)", "era": { "slug": "game-fantasy", "code": "gf", "name": "Game fantasy", "years": [ 2004, 2026 ], "description": "Game sites from 2004 to today: carved and gilded frames, parchment, dark stone and metal, ornate display capitals over a plain reading face, banners, crests and coloured item names. The older ones are built like the game's own windows; the newer ones are dark, wide and cinematic, with the ornament kept for titles, buttons and dividers." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The home portal of an online role-playing game as such sites looked in the early years, 2004 to 2012, of an era that runs from 2004 to 2026: a fixed sheet on dark stone, every box a gilded game window with corner caps, ornate capitals over small Verdana, bevelled metal plates for buttons and a news column beside realm status and event boxes. It was the common look of official game sites and large fan sites of those years, built for a 1024px screen and drawn then with sliced images. Here stone, gilding and plates are all gradients, shadows and pseudo-elements fed by tokens.", "url": "https://chrono.skin/s/v1-gf-1122", "preview_url": "https://chrono.skin/s/v1-gf-1122/specimen.html", "files": { "STYLE.md": "# Game fantasy portal (carved stone, gilded frames)\n\n## Summary\n\nThe home portal of an online role-playing game as such sites looked in the early years, 2004 to 2012, of an era that runs from 2004 to 2026: a fixed sheet on dark stone, every box a gilded game window with corner caps, ornate capitals over small Verdana, bevelled metal plates for buttons and a news column beside realm status and event boxes. It was the common look of official game sites and large fan sites of those years, built for a 1024px screen and drawn then with sliced images. Here stone, gilding and plates are all gradients, shadows and pseudo-elements fed by tokens.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 980px (`.ds-page__wrap`). The page stone shows left and right of it and below the footer.\n- Order of the home page: the banner (`--size-banner`, 92px, brand left, player count and account links right), the strip of navigation plates, then the sheet in `--color-canvas` between two frame-metal edges: the hero with the featured video across the full width, and below it two columns, the news panel (flexible, about 640px) and a column of side boxes (`--size-aside`, 290px) on the right, `--space-5` apart. The footer plate closes the sheet. Banner, navigation and footer are written once and stay on every view.\n- Inner pages keep the banner, the plates and the footer; the hero is left out. They start with the breadcrumb on the sheet, then `.ds-page-header` (title and one line on the left, one or two plates on the right, a frame-metal rule under it), then the working parts: either the two columns again (the article with its accordion beside related boxes), or full-width blocks (notices, the `.ds-stats` strip, `.ds-tabs` standing on the framed table), or a `.ds-split` (the form beside a dialog and a small panel).\n- Views: `home` (hero and video, latest news with pagination, realm status, world event bars, screenshot of the day, the closing band), `news` (one article, patch notes by calling in an accordion, related links and boxes), `guide` (the four callings as grid cells, the screenshot carousel, first steps and an empty video slot), `realms` (notices, figures, tabs by region and the realm table with a tooltip on a full realm), `account` (the account form with its buttons, the dialog that confirms closing the account, free-play progress).\n- Spacing scale: `--space-1` 2px (between a label and its bar), `--space-2` 4px (cell padding, small gaps), `--space-3` 8px (row padding, between buttons), `--space-4` 12px (panel padding, list gaps), `--space-5` 16px (between blocks and columns, sheet padding), `--space-6` 24px (hero padding, large button sides), `--space-7` 36px (reserved for wide ribbons).\n- Control heights: `--size-control-small` 20px, `--size-control` 26px, `--size-control-large` 40px. `--size-date` 44px is the date plate of a news post, `--size-play` 48px the round play plate.\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 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 stone. `.ds-page__wrap` is the 980px column, `.ds-page__body` the sheet, `.ds-page__inner` the stack of a view, `.ds-page__columns` the news column and the 290px column, `.ds-page__main` and `.ds-page__aside` their stacks.\n- `.ds-nav`: the banner and the strip under it. `.ds-nav__banner` holds the `.ds-brand` with `.ds-nav__tagline`, and `.ds-nav__account` with `.ds-nav__count` and `.ds-nav__action` links; `.ds-nav__links` is the strip of `.ds-nav__link` plates, the current one in `--fill-accent` (`is-current`, or in the specimen one selector per view); `.ds-nav__end` pushes the account plate to the right. One item is a `.ds-menu`.\n- `.ds-brand`: the mark and name at the left of the banner. `.ds-brand__mark` is a 56px 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`: a frame in two columns: `.ds-hero__copy` with a `.ds-ribbon`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one large plate, one secondary) and `.ds-hero__note`; and the featured `.ds-video`. 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`, `.ds-page-header__actions` on the right, a frame-metal rule below.\n- `.ds-ribbon`: a short label on `--fill-accent` with notched ends.\n- `.ds-video`: a framed 16 to 9 `.ds-scene` with a round `.ds-scene__play` plate and a `.ds-video__caption`. `.ds-scene` is a landscape drawn from `--color-bar-alt` (`.ds-scene__far`, `.ds-scene__near`; `--2` and `--3` change the sky): the stand-in for a screenshot or video still.\n- `.ds-carousel`: one framed screenshot with `.ds-carousel__arrow` plates (`--next` on the right) over the `.ds-carousel__stage`, and a `.ds-carousel__foot` with the caption and diamond `.ds-carousel__dot`s, `is-current` lit.\n- `.ds-list__date`: the date plate beside a news post, `.ds-list__month` over the day.\n- `.ds-sidebar`: a framed side box: `.ds-sidebar__title` plate in `--fill-bar`, `.ds-sidebar__list` of `.ds-sidebar__item` rows (a lamp, a `.ds-sidebar__link`, a `.ds-sidebar__meta`), `.ds-sidebar__foot`.\n- `.ds-footer`: the closing plate in `--fill-bar-alt`: centred `.ds-footer__links` of `.ds-footer__link` and a `.ds-footer__note`.\n- Period components carried: `.ds-menu`, `.ds-tooltip`, `.ds-accordion`, `.ds-progress`, `.ds-carousel`. `.ds-avatar` is defined but this portal shows no portraits; 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 portal on a 1024px screen:\n a banner and a strip of navigation plates, a hero with the featured video,\n then a news column beside a 290px column of side boxes. */\n:root {\n --size-page: 980px;\n --size-aside: 290px;\n --size-banner: 92px;\n --size-brand: 56px;\n --size-date: 44px;\n --size-play: 48px;\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-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.ds-dot--success { background: var(--color-success); }\n.ds-dot--warning { background: var(--color-warning); }\n.ds-dot--danger { background: var(--color-danger); }\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\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--muted {\n color: var(--color-text-muted);\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--75 .ds-progress__bar { width: 75%; }\n.ds-progress--90 .ds-progress__bar { width: 90%; }\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 + .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\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: the stone page and the framed sheet on it ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) 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 box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-page__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5);\n background: var(--color-canvas);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-right: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-page__main,\n.ds-page__aside {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- nav: the banner and the strip of plates under it ---------- */\n.ds-nav {\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-nav__banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n box-sizing: border-box;\n min-height: var(--size-banner);\n padding: var(--space-4) var(--space-5);\n background: radial-gradient(ellipse at 12% 50%, color-mix(in srgb, var(--color-accent-alt) 22%, transparent) 0, transparent 45%), var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-nav__tagline {\n display: block;\n color: var(--color-bar-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n letter-spacing: 0;\n text-transform: none;\n}\n.ds-nav__account {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-2);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__count {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n letter-spacing: var(--heading-tracking);\n}\n.ds-nav__links {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-bar-alt);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5);\n color: var(--color-bar-alt-text);\n border-right: 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(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#realms:target) .ds-nav__link[href=\"#realms\"],\n.ds-page:has(#account:target) .ds-nav__link[href=\"#account\"]:not(.ds-nav__link--elsewhere),\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 box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__end {\n margin-left: auto;\n}\n.ds-nav__end .ds-nav__link {\n border-right: 0;\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 60%);\n}\n\n/* ---------- hero: the banner of the current chapter, with the video ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-6);\n background: radial-gradient(ellipse at 20% 0, color-mix(in srgb, var(--color-accent) 55%, transparent) 0, transparent 65%), var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-4);\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 font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__note {\n margin: 0;\n font-size: var(--text-small);\n}\n/* A ribbon with notched ends. */\n.ds-ribbon {\n display: inline-block;\n padding: var(--space-2) var(--space-6);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n clip-path: polygon(0 0, 100% 0, calc(100% - var(--space-3)) 50%, 100% 100%, 0 100%, var(--space-3) 50%);\n}\n\n/* ---------- scene: a landscape drawn from the secondary bar colour ---------- */\n.ds-scene {\n position: relative;\n aspect-ratio: 16 / 9;\n overflow: hidden;\n background: radial-gradient(circle at 72% 26%, var(--color-bar-alt-text) 0, var(--color-bar-alt-text) 5%, transparent 6%), linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 55%, var(--color-bar-alt)) 0, var(--color-bar-alt) 75%);\n}\n.ds-scene--2 {\n background: radial-gradient(circle at 24% 30%, var(--color-bar-alt-text) 0, var(--color-bar-alt-text) 4%, transparent 5%), linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2) 55%, var(--color-bar-alt)) 0, var(--color-bar-alt) 75%);\n}\n.ds-scene--3 {\n background: radial-gradient(circle at 50% 62%, var(--color-fill-3) 0, color-mix(in srgb, var(--color-fill-3) 40%, transparent) 14%, transparent 34%), linear-gradient(to bottom, var(--color-bar-alt) 0, color-mix(in srgb, var(--color-fill-3) 45%, var(--color-bar-alt)) 100%);\n}\n.ds-scene__far,\n.ds-scene__near {\n position: absolute;\n inset: 0;\n background: color-mix(in srgb, var(--color-bar-alt), var(--color-bar-alt-text) 22%);\n clip-path: polygon(0 100%, 0 62%, 14% 44%, 24% 58%, 38% 30%, 50% 56%, 62% 40%, 76% 60%, 88% 46%, 100% 64%, 100% 100%);\n}\n.ds-scene__near {\n background: color-mix(in srgb, var(--color-bar-alt), var(--color-shadow) 55%);\n clip-path: polygon(0 100%, 0 82%, 10% 70%, 22% 84%, 34% 66%, 40% 52%, 44% 66%, 58% 86%, 72% 72%, 80% 58%, 84% 72%, 100% 84%, 100% 100%);\n}\n.ds-scene__play {\n position: absolute;\n top: 50%;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-play);\n height: var(--size-play);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transform: translate(-50%, -50%);\n}\n.ds-scene__play:hover,\n.ds-scene__play.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-video__caption {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n\n/* ---------- carousel: one screenshot, arrows and dots ---------- */\n.ds-carousel__stage {\n position: relative;\n}\n.ds-carousel__arrow {\n position: absolute;\n top: 50%;\n left: var(--space-3);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control-large);\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-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: none;\n transform: translateY(-50%);\n}\n.ds-carousel__arrow--next {\n left: auto;\n right: var(--space-3);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-carousel__foot {\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(--color-surface-strong);\n color: var(--color-heading-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-size: var(--text-base);\n}\n.ds-carousel__dots {\n display: flex;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface);\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/* ---------- news: a date plate beside each post ---------- */\n.ds-list__date {\n display: flex;\n flex: none;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n width: var(--size-date);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-list__month {\n align-self: stretch;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-align: center;\n text-transform: var(--ui-transform);\n}\n\n/* ---------- sidebar: a side box with a title plate ---------- */\n.ds-sidebar__title {\n margin: 0;\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) 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-align: center;\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 display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n}\n.ds-sidebar__link {\n flex: 1;\n color: var(--color-link);\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 color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-sidebar__foot {\n padding: var(--space-3) var(--space-4);\n font-size: var(--text-small);\n text-align: right;\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\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: 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: var(--link-decoration-hover);\n}\n.ds-footer__note {\n margin: 0;\n}\n.ds-sidebar,\n.ds-carousel,\n.ds-video {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-nav__action {\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-tabs {\n border-bottom: 0;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: the game's home portal, specimen\n\n\n\n\n
\n\n
\n
\n \n \n \n chronoskin\n The online role-playing game. Chapter three: the Ember Gate.\n \n \n
\n 41,208 heroes online\n Welcome, traveller. Log in or create an account\n
\n
\n \n
\n\n
\n\n
\n
\n
\n
\n Chapter three is live\n

The Ember Gate opens

\n

Cross the ash plains, raise a warband and hold the gate before the long night. Play to level twenty without paying a coin.

\n
\n Play free\n Game guide\n
\n

Client 3.2.1 for Windows and Mac, 4.1 GB.

\n
\n
\n
\n \n \n \n
\n
Featured video: the chapter three trailer2:48
\n
\n
\n\n
\n
\n
\n

Latest news

\n
\n
    \n
  • \n Oct07\n
    \n Patch 3.2: the Ember Gate\n

    A new zone for levels 58 to 60, the warband system and a pass over every healing spell. Realms return at nine.

    \n Posted by the game masters in Patch notes, 46 comments New\n
    \n
    • \n
  • \n Oct05\n
    \n Harvest fair returns to the river towns\n

    Two weeks of fishing contests, lantern quests and a mount that nobody asked for but everyone wants.

    \n Posted in World events, 18 comments\n
    \n
    • \n
  • \n Oct01\n
    \n Two new realms open on Friday\n

    Greywater and Highmoor take new characters from noon. Free moves off the three full realms run for a week.

    \n Posted in Realms, 9 comments\n
    \n
    • \n
  • \n Sep26\n
    \n Screenshot contest: the winners\n

    Three hundred entries, one sunrise over the salt flats. The first ten hang in the gallery from today.

    \n Posted in Community, 31 comments\n
    \n
    • \n
  • \n Sep20\n
    \n Patch 3.1.4: hotfixes\n

    The ferry at Saltmarsh no longer leaves without its passengers, and three quests can be handed in again.

    \n Posted in Patch notes, 12 comments\n
    \n
    • \n
  • \n Sep14\n
    \n A beginner's road to level twenty\n

    Where to go after the mill, which calling forgives mistakes, and why you should keep the wooden shield.

    \n Posted in Game guide, 27 comments\n
    \n
    • \n
\n
\n
\n
    \n
  • Previous
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
  • Next
    • \n
\n News archive\n
\n
\n
\n\n \n
\n\n
\n
New to the game?

Make a character tonight and play to level twenty without paying a coin.

\n Create an account\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. News
    4. \n
  4. »
    5. \n
  5. Patch 3.2
    6. \n
\n
\n
\n

News and patch notes

\n

Posted by the game masters on 7 October, in Patch notes.

\n
\n
Discuss on the forums
\n
\n
\n
\n
\n
\n
\n

Patch 3.2: the Ember Gate

\n

The gate at the end of the ash plains has been shut since the first chapter. Tonight it opens on every realm.

\n

Realms go down at six for the update and return at nine. The client fetches the patch by itself; if it stalls, start it once more or type /patch retry in the launcher console.

\n

What is new

\n
    \n
  • The Cinder Reach, a zone for levels 58 to 60 with forty quests.
    • \n
  • Warbands: groups of up to twelve that share one supply chest.
    • \n
  • A second mount slot for every character over level 40.
    • \n
\n

Before you log in

\n

Empty your mail. Letters older than thirty days are returned to their senders when the realms come back.

\n
\n
\n
\n\n

Changes by calling

\n
\n
\n Warden 4 changes\n
\n
    \n
  • Shield Wall now lasts 10 seconds, up from 8.
    • \n
  • Taunt can no longer miss creatures of your own level.
    • \n
\n
\n
\n
\n Arcanist 6 changes\n

Frost spells cost a tenth less to cast.

\n
\n
\n Ranger 3 changes\n

Pets keep their names when they are stabled.

\n
\n
\n Mender 9 changes\n

Every healing spell was looked at again.

\n
\n
\n
\n\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Game guide
    4. \n
\n
\n
\n

Game guide

\n

Four callings, one world. Pick the one that suits how you like to fight.

\n
\n
Play free
\n
\n
    \n
  • \n \n

    Warden

    \n

    Plate, shield and a long temper. Stands at the front and keeps the others alive by being hit first.

    \n Warden changes in 3.2\n
    • \n
  • \n \n

    Arcanist

    \n

    Frost, flame and a thin robe. Great harm from far away, and very little patience for being touched.

    \n Arcanist changes in 3.2\n
    • \n
  • \n \n

    Ranger

    \n

    A bow, a trap and an animal that does half the work. Travels alone better than any other calling.

    \n Ranger changes in 3.2\n
    • \n
  • \n \n

    Mender

    \n

    Herbs, wards and a calm voice. Every warband wants two and can usually find one.

    \n Mender changes in 3.2\n
    • \n
\n
\n
\n
\n
\n \n \n
\n ‹\n ›\n
\n
\n The Ember Gate at dusk, screenshot 2 of 5\n \n
\n
\n
\n
\n

Your first evening

\n
\n
    \n
  1. Make a character on a realm marked Normal.
    2. \n
  2. Follow the road from the mill to Ashenford.
    3. \n
  3. Take the first two quests at the well.
    4. \n
\n
\n
\n
\n \n

No guide videos yet

\n

Videos for chapter three are still being cut. The trailer is on the home page.

\n Watch the trailer\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Realms
    4. \n
\n
\n
\n

Realm status

\n

Checked every two minutes. Last check at 20:14, server time.

\n
\n
Refresh
\n
\n
\n

Maintenance: all realms go down on Wednesday from 06:00 to 09:00 for patch 3.2.

\n

Kettlebrook is offline. The realm stopped at 19:52 and is being restarted.

\n
\n
    \n
  • 24Realms
    • \n
  • 23Online
    • \n
  • 41,208Heroes playing
    • \n
  • 3Realms with a queue
    • \n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RealmKindPopulationStatusPlayingQueue
AshenfordNormalHighOnline3,4120
Greywater NewNormalLowOnline6110
StonewatchWarFullFull realmNew characters are closed here until Friday.Free moves to Greywater are open.Queue4,950212
HighmoorRole-playMediumOnline1,8740
KettlebrookNormalMediumOffline00
SaltmarshWarHighQueue4,72038
Old BarrowNormalLowOnline9020
ThornwickRole-playMediumOnline2,1300
\n
\n
\n

Realm kinds: Normal no fighting between players outside arenas, War open fighting in contested zones, Role-play names and speech in character.

\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Account
    4. \n
\n
\n
\n

Your account

\n

Free to level twenty. One account holds eight characters on every realm.

\n
\n
Download the client
\n
\n
\n
\n

Account details

\n
\n
\n
\n \n
\n
\n
\n \n
\n \n This address has no domain ending. Write it out in full.\n
\n
\n
\n \n
\n \n New characters start here unless you choose another realm.\n
\n
\n
\n \n
\n
\n
\n Letters\n
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n
\n
\n
\n
\n

Close this account? x

\n
\n

Your eight characters and everything they carry are kept for ninety days, then removed.

\n

Guilds you lead pass to the next officer.

\n
\n
\n Keep playing\n \n
\n
\n
\n
\n

Free play

\n
\n
Level 14 of 2070%
\n \n

After level twenty a character keeps everything and stops gaining experience until the account is upgraded.

\n
\n
\n
\n
\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.game-fantasy.portal.s01.p01.t02.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"game-fantasy\",\n \"years\": [\n 2004,\n 2026\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-gf-1122\",\n \"short\": \"v1-gf-1122\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #090807;\n --color-canvas: #15120f;\n --color-surface: #1d1915;\n --color-surface-alt: #25201a;\n --color-surface-strong: #33291b;\n --color-bar: #4a3414;\n --color-bar-text: #f3d98e;\n --color-bar-alt: #162433;\n --color-bar-alt-text: #b9d3ea;\n --color-inverse: #d9c492;\n --color-inverse-text: #2a1b0b;\n --color-text: #c9b99a;\n --color-text-muted: #8c7e68;\n --color-heading: #f0d48a;\n --color-heading-alt: #e0a94a;\n --color-link: #e8ba7f;\n --color-link-quiet: #a38d6d;\n --color-link-visited: #b89a78;\n --color-link-hover: #ffda4d;\n --color-link-active: #ffffff;\n --color-border: #3c3226;\n --color-border-strong: #a67c2e;\n --color-border-muted: #2a231b;\n --color-accent: #1f6fb5;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ffd24a;\n --color-fill-1: #4a9df0;\n --color-fill-2: #b064e8;\n --color-fill-3: #ff8a2a;\n --color-fill-4: #2fc4b2;\n --color-button: #9c1f12;\n --color-button-text: #ffe9a8;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #3b3226;\n --color-button-secondary-text: #e6cf98;\n --color-input: #0d0b09;\n --color-input-text: #e4d6b6;\n --color-input-border: #5a4a30;\n --color-disabled: #24201b;\n --color-disabled-text: #6b6152;\n --color-danger: #e0483a;\n --color-danger-surface: #2c1210;\n --color-success: #5fc24a;\n --color-warning: #e8a520;\n --color-notice: #18222e;\n --color-notice-text: #b9d3ea;\n --color-focus: #58b2ff;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.72);\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" } }