{
  "id": "v1-wk-2222",
  "long_id": "v1.wiki-2000s.portal.s02.p02.t02.u02",
  "name": "Fan wiki portal, banner and navigation boxes, 2003 to 2010",
  "era": {
    "slug": "wiki-2000s",
    "code": "wk",
    "name": "Wiki",
    "years": [
      2003,
      2010
    ],
    "description": "Collaborative reference sites of 2003 to 2010: a narrow column of links at the left, tabs above a white article sheet, blue and red links, grey bordered boxes for contents and facts, small sans text and tables of plain data."
  },
  "archetype": "portal",
  "mode": "pure",
  "viewport": {
    "width": 1024,
    "fluid": true
  },
  "summary": "This is the dressed-up skin of a fan or game wiki of the middle 2000s: a dark banner with the mark and a search box, a glossy bar of sections under it, navigation boxes down the left and a sheet with a thick coloured top edge at the right. The home page is a portal of browse tiles, dated news and a featured page; article pages carry a large profile box and a row of section tabs. Text is 11px Verdana, boxes are square and flat, bars are shaded with short gradients, and nothing casts a shadow or moves.",
  "url": "https://chrono.skin/s/v1-wk-2222",
  "preview_url": "https://chrono.skin/s/v1-wk-2222/specimen.html",
  "files": {
    "STYLE.md": "# Fan wiki portal, banner and navigation boxes, 2003 to 2010\n\n## Summary\n\nThis is the dressed-up skin of a fan or game wiki of the middle 2000s: a dark banner with the mark and a search box, a glossy bar of sections under it, navigation boxes down the left and a sheet with a thick coloured top edge at the right. The home page is a portal of browse tiles, dated news and a featured page; article pages carry a large profile box and a row of section tabs. Text is 11px Verdana, boxes are square and flat, bars are shaded with short gradients, and nothing casts a shadow or moves.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-5` (10px) above and `--space-6` (14px) at the sides. Designed at 1024px; it does not reflow for phones.\n- Order from the top: the header `.ds-nav` in one frame (the banner `.ds-nav__banner`, at least `--size-banner` (64px) tall, in the inverse fill, then the bar `.ds-nav__menu` in the bar fill); then `.ds-page__body`, a grid of the `--size-side` (172px) box column `.ds-sidebar` and the sheet `.ds-page__sheet`, `--space-5` apart; then the footer bar. No text sits on the page colour.\n- The sheet has a 1px frame and a top edge of twice `--border-width-strong`, both in `--color-border-strong`. It holds the views; inside a view `.ds-view__body` is one column of blocks `--space-6` apart.\n- Views. The specimen is a four-screen example fan wiki; the bar has one item per view and the current one takes the accent fill. `home` is the portal: welcome box, six browse tiles, a news list beside the article of the week and \"did you know\", then the counters. `page` is a character page: trail, title, spoiler notice, section tabs, the floated profile box beside the text, the appearances table and see also. `category` is a category listing: letter index, subcategories and pages in three columns, paging, and an empty picture section. `community` is the community portal: two notices, the note form beside the to-do panel and the discard confirmation.\n- Inner pages (every view but `home`) start with `.ds-breadcrumb` (a tinted bordered line), then `.ds-page-header` in place of the welcome box (title and one muted line at the left, buttons at the right, on a strong rule), then an optional `.ds-notice`, then `.ds-tabs` when the page has sections, then the working blocks. Floated material sits in `.ds-view__flow`.\n- Two-column areas use `.ds-columns` (equal) or `.ds-columns--wide` (3 to 2), with `.ds-columns__stack` for a column of several boxes. The browse tiles and the category listing are three columns.\n- The profile box `.ds-infobox` is `--size-infobox` (270px) wide and floats right. Form rows are a `--size-label` (130px) label cell and a field cell; inputs are `--size-field` (300px); the banner search field `--size-search` (180px). A dialog is `--size-dialog` (420px) wide, in a band in the flow.\n- Spacing scale: `--space-1` 1px, `--space-2` 3px, `--space-3` 5px, `--space-4` 8px, `--space-5` 10px, `--space-6` 14px, `--space-7` 20px.\n  - `--space-2`: vertical padding of strips, box titles, list rows, inputs and buttons.\n  - `--space-3`: vertical padding of bar items, tabs and table cells.\n  - `--space-4`: horizontal padding of cells and box rows, gap between tiles and between buttons.\n  - `--space-5`: padding of panel bodies and notices, gap between the box column and the sheet.\n  - `--space-6`: padding of the sheet and the banner, and the gap between blocks.\n  - `--space-7`: list indent, gap between the listing columns.\n\n## Typography and colour roles\n\n- Text on fills follows the era's conventions (see the first layout of this era): no text on `--color-page`; body, heading and link colours on the canvas, the three surfaces, `--fill-panel` and the four fills; only `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-notice-text` on `--color-notice`, and `--color-text` on `--color-danger-surface`.\n- `--color-page` is charcoal with fine scan lines from `--fill-page`; the sheet `--color-canvas` is white. `--color-surface` fills the navigation boxes, the profile box and alternate news rows; `--color-surface-alt` (lavender) the breadcrumb, label cells, idle tabs, counters and alternate table rows; `--color-surface-strong` (pale blue) letter heads and plain panel titles.\n- `--fill-bar` (near black, shaded) with amber `--color-bar-text` is the section bar, table heads, the profile title, the current tab, the dialog title, tile icons and the footer. `--fill-bar-alt` (deep blue) with white `--color-bar-alt-text` titles every navigation box, panel and form and the group strips of the profile box. `--fill-inverse` (dark maroon) with `--color-inverse-text` is the banner.\n- `--color-heading` (maroon) is for page and section titles and figures, `--color-heading-alt` (blue) for third-level headings and news dates. Links are `--color-link` (blue), tool links `--color-link-quiet` (olive), hover `--color-link-hover` (burnt orange); a missing page is `.ds-link--new` in `--color-danger`.\n- `--color-border-strong` (tan) frames the sheet, the header, the boxes and the buttons and rules the headings; `--color-border` (grey) is for ordinary box outlines and dotted row rules; `--color-border-muted` for panel feet.\n- `--color-accent` (amber) with dark `--color-accent-text` marks the current bar item, the current page number and badges; `--color-accent-alt` is the left bar of an information notice.\n- `--color-fill-1` to `--color-fill-4` are the lavender, cream, sage and sand of the browse tiles; the welcome box is `--color-fill-1`.\n- Body and controls are `--font-body` / `--font-ui` (Verdana); headings, box titles, the wordmark and tile names are `--font-heading` (Trebuchet MS), bold. `--font-mono` is for code.\n- Sizes: `--text-base` 11px; `--text-small` and `--text-ui` 10px for meta, bar items, tabs, buttons and badges; `--text-large` 13px for the lead, panel titles and tile names; `--text-h3` 12px, `--text-h2` 15px, `--text-h1` 20px, `--text-display` 22px for the wordmark and the welcome title. `--weight-ui` is 700.\n- Bars, buttons and the accent are short vertical gradients from the surface set; panels, boxes and the sheet are flat. Row rules inside boxes are `dotted`.\n- One-off choices outside the token set: the dividers between bar items are `--color-bar-text` at 25%; the notice's left bar is `calc(var(--border-width-strong) * 2)`; status badges are an 18 to 26% `color-mix()` of the status colour over `--color-surface`; `dotted` is used for row rules and the empty state instead of `--border-style`.\n\n## Components\n\n- `.ds-page`: on `<body>`. `.ds-page__frame` wraps everything, `.ds-page__body` is the grid of boxes and sheet, `.ds-page__sheet` the sheet. Views are `.ds-view` with a `.ds-view__body` column; `.ds-view__flow` contains floats. `.ds-columns` (`--wide`) and `.ds-columns__stack` make two-column areas. `.ds-sprite` hides the SVG symbol sheet, `.ds-icon` sizes an inline icon.\n- `.ds-nav`: the framed header. `.ds-nav__banner` holds the brand and `.ds-nav__tools` (the `.ds-nav__search` form with its `.ds-nav__field`, and the `.ds-nav__personal` list of `.ds-nav__personal-link` items). `.ds-nav__menu` is the bar of `.ds-nav__link` items; the current one takes `is-current`.\n- `.ds-brand`: the mark and name at the left of the banner. `.ds-brand__mark` is a square tile 1.9 times `--text-display`, dressed like the primary button with a `--border-width-strong` outline in `--color-border-strong`. `.ds-brand__text` stacks `.ds-brand__name` (the wordmark) and `.ds-brand__tag`, both in `--color-inverse-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-sidebar`: the column of navigation boxes. Each `.ds-sidebar__block` has a `.ds-sidebar__title` strip in the secondary bar fill, a `.ds-sidebar__list` of dotted-ruled `.ds-sidebar__item` rows and an optional `.ds-sidebar__note`.\n- `.ds-breadcrumb`: a tinted bordered line with bold `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome box of the portal, in the first fill with an accent left edge: `.ds-hero__title`, `.ds-hero__lead`, buttons in `.ds-hero__action`, and a small bordered facts list `.ds-hero__aside`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__desc`, and `.ds-page-header__action` with one or two buttons, all on a strong rule.\n- `.ds-section`: a section heading on a 1px strong-coloured rule, between blocks.\n- `.ds-panel`: a titled box. `.ds-panel__title` is a secondary bar strip (`--plain` for a pale strip with heading text), `.ds-panel__body` the content with `.ds-panel__line` and `.ds-panel__items`, `.ds-panel__foot` a small right-aligned closing line. `.ds-thumb` with `.ds-thumb__image` is a framed picture floated left in a body.\n- `.ds-grid`: three browse tiles in a row. `.ds-grid__cell` (`--2`, `--3`, `--4`) has a `.ds-grid__icon` tile, a `.ds-grid__name` and `.ds-grid__meta`, and a strong bottom edge.\n- `.ds-list`: news entries: `.ds-list__item` with a bold `.ds-list__date` first line and a `.ds-list__meta` last line; even rows are tinted.\n- `.ds-stat`: the row; four `.ds-stat__item` counters, each a large `.ds-stat__value` beside a small `.ds-stat__label`, with a strong left edge.\n- `.ds-tabs`: sections of one page on a strong rule in the bar colour; `.ds-tabs__tab`, `is-current` takes the bar fill.\n- `.ds-prose`: long text: h1, h2 (on a strong-coloured rule), h3, p, ul, strong, code, blockquote. `.ds-edit` is the bracketed edit link inside a heading.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--new` for a missing page, `.ds-link--quiet` for tool links, `.ds-link--strong` for bold.\n- `.ds-infobox`: the profile box floated right: `.ds-infobox__title` (bar fill), `.ds-infobox__image`, `.ds-infobox__caption`, `.ds-infobox__group` strips and `.ds-infobox__rows` tables of label and value.\n- `.ds-table`: a data table with a bar-fill head, ruled rows and tinted even rows; `.ds-table__num` right-aligns numbers.\n- `.ds-index` is the letter line of a category (`.ds-index__letter`, `is-empty`); `.ds-catlist` the three-column listing with `.ds-catlist__head` letters and `.ds-catlist__items` lists.\n- `.ds-badge`: a small square amber label. `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted status labels with a 1px outline in the status colour.\n- `.ds-notice`: a box with a thick left bar in `--color-accent-alt` and a `.ds-notice__title` line; `.ds-notice--error` uses `--color-danger` on `--color-danger-surface`. `.ds-notice__link` is an underlined link in the text colour.\n- `.ds-pagination`: a centred bordered line of `.ds-pagination__link` boxes (`is-current` in the accent fill) and a `.ds-pagination__label`.\n- `.ds-button`: primary action. `.ds-button--secondary` is the pale button, `.ds-button--danger` the destructive one (error text on the error surface). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-form`: a box with a `.ds-form__title` strip and `.ds-form__row` lines of a tinted `.ds-form__label` cell and a `.ds-form__field` cell. Controls take `.ds-form__input` (`--wide`, `--auto`, `is-invalid`, `is-disabled`), with `.ds-form__error` and `.ds-form__hint`; `.ds-form__check` and `.ds-form__checkbox`; buttons in `.ds-form__actions`.\n- `.ds-dialog`: a confirmation box in the page flow inside `.ds-dialog__backdrop`: `.ds-dialog__title` (bar fill), `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a dotted box with `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the bar under the page: `.ds-footer__text` and a `.ds-footer__row` of underlined `.ds-footer__link` items.\n\n## Never\n\n- `row-gap <= 6px`: rows touch or are divided by a dotted rule.\n- `block-gap <= 28px`: blocks are 14px apart.\n- `content-width >= 85%`: the page fills the window.\n- `font-size <= 22px`: the wordmark and the welcome title, 22px, are the largest text.\n- `font-size >= 10px`: meta text and controls are 10px; nothing is smaller.\n- `font-families <= 3`: Verdana, Trebuchet MS for headings, monospace for code.\n- `letter-spacing <= 1px`: only the wordmark is tracked, by 1px.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `border-radius <= 0px`: no reference has a rounded corner in CSS; every box is square.\n- `box-shadow = none`: no box shadow was measured in any reference.\n- `text-shadow = none`: no text shadow was measured in any reference.\n- `transition = none`: hover states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 6px`: borders are 1px, edges 3px, and only the top of the sheet and the left bar of a notice reach 6px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new box in the left column from `.ds-sidebar__block`, a titled box in the sheet from `.ds-panel`, a profile row from `.ds-infobox__rows`, a message from `.ds-notice`. Give it a 1px outline, a title strip in `--fill-bar-alt` with `--color-bar-alt-text`, keep text on fills as the era's conventions say, and use tokens only: no raw colours or lengths, no radius or shadow, no font size outside the type tokens, and `--space-6` as the gap to the next block.\n",
    "components.css": "/* Layout tokens (structure part). Column widths, gaps and paddings measured\n   on fan-wiki portal pages captured 2007 to 2008. */\n:root {\n  --size-page: 100%;\n  --size-side: 172px;\n  --size-banner: 64px;\n  --size-infobox: 270px;\n  --size-search: 180px;\n  --size-field: 300px;\n  --size-label: 130px;\n  --size-dialog: 420px;\n  --size-icon: 14px;\n  --space-1: 1px;\n  --space-2: 3px;\n  --space-3: 5px;\n  --space-4: 8px;\n  --space-5: 10px;\n  --space-6: 14px;\n  --space-7: 20px;\n}\n\n/* ---------- shell: banner, bar, then boxes beside the sheet ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-5) var(--space-6) 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__frame {\n  width: var(--size-page);\n  box-sizing: border-box;\n}\n.ds-page__body {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  gap: var(--space-5);\n  align-items: start;\n  padding: var(--space-5) 0 0;\n}\n/* The sheet: a thick coloured top edge, a thin frame of the same colour. */\n.ds-page__sheet {\n  min-width: 0;\n  padding: var(--space-6) var(--space-6) var(--space-7);\n  background: var(--color-canvas);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-top-width: calc(var(--border-width-strong) * 2);\n  border-radius: var(--radius-page);\n}\n.ds-sprite {\n  position: absolute;\n}\n.ds-icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  vertical-align: middle;\n}\n\n/* ---------- views: one screen of the example site shows 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.ds-view__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n}\n.ds-view__flow {\n  display: flow-root;\n}\n.ds-columns {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-columns--wide {\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n}\n.ds-columns__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\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.ds-link--quiet.is-visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n/* A link to a page that does not exist yet. */\n.ds-link--new,\n.ds-link--new:visited,\n.ds-link--new.is-visited {\n  color: var(--color-danger);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- nav: the banner and the bar under it ---------- */\n.ds-nav {\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  overflow: hidden;\n}\n.ds-nav__banner {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-7);\n  min-height: var(--size-banner);\n  box-sizing: border-box;\n  padding: var(--space-4) var(--space-6);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n/* The site's mark and name. The tile is dressed like the primary button. */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-5);\n  color: var(--color-inverse-text);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-display) * 1.9);\n  height: calc(var(--text-display) * 1.9);\n  box-sizing: border-box;\n  background: var(--color-button);\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  display: block;\n  width: 78%;\n  height: 78%;\n}\n.ds-brand__text {\n  display: flex;\n  flex-direction: column;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-brand__tag {\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-nav__tools {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: var(--space-3);\n}\n.ds-nav__search {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-nav__search .ds-nav__field {\n  width: var(--size-search);\n}\n.ds-nav__personal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-1) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-nav__personal-link {\n  color: var(--color-inverse-text);\n  text-decoration: underline;\n}\n.ds-nav__menu {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0 var(--space-4);\n  list-style: none;\n  background: var(--fill-bar);\n  border-top: 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  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-3) var(--space-6);\n  color: var(--color-bar-text);\n  border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 25%, transparent);\n  text-decoration: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-shadow: none;\n}\n/* The current view's item, and the home item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-shadow: none;\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-shadow: none;\n}\n.ds-page:has(#page:target) .ds-nav__link[href=\"#page\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-shadow: none;\n}\n.ds-page:has(#category:target) .ds-nav__link[href=\"#category\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-shadow: none;\n}\n.ds-page:has(#community:target) .ds-nav__link[href=\"#community\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  text-shadow: none;\n}\n\n/* ---------- sidebar: navigation boxes at the left ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n.ds-sidebar__block {\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-2) 0;\n  list-style: none;\n  font-size: var(--text-base);\n}\n.ds-sidebar__item {\n  padding: var(--space-2) var(--space-4);\n  border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-sidebar__item:last-child {\n  border-bottom: 0;\n}\n.ds-sidebar__note {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  list-style: none;\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n  color: var(--color-text);\n}\n\n/* ---------- hero: the welcome box of the portal ---------- */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: var(--space-7);\n  align-items: center;\n  padding: var(--space-6);\n  background: var(--color-fill-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading);\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  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-5);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-hero__action {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-hero__aside {\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  list-style: none;\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n}\n\n/* ---------- page header: title on a strong rule ---------- */\n.ds-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  gap: var(--space-6);\n  padding: 0 0 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__desc {\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-page-header__action {\n  flex: none;\n  display: flex;\n  gap: var(--space-3);\n}\n\n/* ---------- section heading inside the sheet ---------- */\n.ds-section {\n  margin: 0;\n  padding: 0 0 var(--space-2);\n  color: var(--color-heading);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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\n/* ---------- panel: a titled box ---------- */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\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  text-shadow: var(--shadow-text);\n}\n.ds-panel__title--plain {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  text-shadow: none;\n}\n.ds-panel__body {\n  display: flow-root;\n  padding: var(--space-5);\n}\n.ds-panel__line {\n  margin: 0 0 var(--space-4);\n}\n.ds-panel__items {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-7);\n}\n.ds-panel__foot {\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  background: var(--color-surface-alt);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-small);\n  text-align: right;\n}\n.ds-thumb {\n  float: left;\n  width: 28%;\n  box-sizing: border-box;\n  margin: 0 var(--space-5) var(--space-3) 0;\n  padding: var(--space-2);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-thumb__image {\n  display: block;\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n}\n.ds-thumb__image svg {\n  display: block;\n  width: 100%;\n}\n\n/* ---------- grid: the browse tiles ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  column-gap: var(--space-5);\n  align-items: center;\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-fill-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n}\n.ds-grid__cell--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-h1) * 1.6);\n  height: calc(var(--text-h1) * 1.6);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-radius: var(--radius-pill);\n}\n.ds-grid__icon svg {\n  display: block;\n  width: 62%;\n  height: 62%;\n}\n.ds-grid__name {\n  display: block;\n  color: var(--color-link);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n  display: block;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- list: dated news entries ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  padding: var(--space-4) var(--space-5);\n  border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-list__item:nth-child(even) {\n  background: var(--color-surface);\n}\n.ds-list__item:last-child {\n  border-bottom: 0;\n}\n.ds-list__date {\n  display: block;\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-list__meta {\n  display: block;\n  padding: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- stats: boxed counters in a row ---------- */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-stat__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-5);\n  background: var(--color-surface-alt);\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-stat__value {\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}\n.ds-stat__label {\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- tabs: sections of one page ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0 var(--space-4);\n  list-style: none;\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-surface-alt);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: 0;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-color: var(--color-bar);\n  text-shadow: var(--shadow-text);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n  line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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 {\n  margin: 0 0 var(--space-4);\n  color: var(--color-heading);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin: var(--space-6) 0 var(--space-3);\n  padding: 0 0 var(--space-2);\n  color: var(--color-heading);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-5);\n}\n.ds-prose ul {\n  margin: 0 0 var(--space-5);\n  padding: 0 0 0 var(--space-7);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-2);\n  background: var(--color-surface-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose blockquote {\n  margin: 0 0 var(--space-5);\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-surface);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  font-style: italic;\n}\n.ds-edit {\n  float: right;\n  margin: 0 0 0 var(--space-5);\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\n/* ---------- fact box: a large profile card floated right ---------- */\n.ds-infobox {\n  float: right;\n  clear: right;\n  width: var(--size-infobox);\n  box-sizing: border-box;\n  margin: 0 0 var(--space-5) var(--space-6);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  font-size: var(--text-base);\n  overflow: hidden;\n}\n.ds-infobox__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-align: center;\n  text-shadow: var(--shadow-text);\n}\n.ds-infobox__image {\n  display: block;\n  margin: var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-infobox__image svg {\n  display: block;\n  width: 100%;\n}\n.ds-infobox__caption {\n  display: block;\n  padding: 0 var(--space-4) var(--space-4);\n  font-size: var(--text-small);\n  font-style: italic;\n  text-align: center;\n}\n.ds-infobox__group {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  text-align: center;\n  text-shadow: var(--shadow-text);\n}\n.ds-infobox__rows {\n  width: 100%;\n  border-collapse: collapse;\n}\n.ds-infobox__rows th,\n.ds-infobox__rows td {\n  padding: var(--space-2) var(--space-4);\n  border-bottom: var(--border-width) dotted var(--color-border);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-infobox__rows th {\n  width: 38%;\n  background: var(--color-surface-alt);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n  width: 100%;\n  box-sizing: border-box;\n  border-collapse: collapse;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-size: var(--text-base);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-table th {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom-color: var(--color-border-strong);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  white-space: nowrap;\n}\n\n/* ---------- category listing: three columns under letter heads ---------- */\n.ds-index {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  list-style: none;\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-weight: var(--weight-bold);\n}\n.ds-index__letter {\n  display: block;\n  min-width: 2ch;\n  padding: 0 var(--space-2);\n  color: var(--color-link);\n  text-align: center;\n  text-decoration: none;\n}\n.ds-index__letter.is-empty {\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n.ds-catlist {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4) var(--space-7);\n  align-items: start;\n}\n.ds-catlist__head {\n  margin: 0 0 var(--space-2);\n  padding: 0 var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n}\n.ds-catlist__items {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-7);\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-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n/* Status labels: a tint of the status colour over the surface. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 26%, var(--color-surface));\n  border-color: var(--color-warning);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 18%, var(--color-surface));\n  border-color: var(--color-danger);\n}\n\n/* ---------- notice: a box with a coloured left bar ---------- */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: calc(var(--border-width-strong) * 2) var(--border-style) var(--color-accent-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-text);\n  border-left-color: var(--color-danger);\n}\n.ds-notice__title {\n  display: block;\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n}\n.ds-notice--error .ds-notice__title {\n  color: var(--color-danger);\n}\n.ds-notice__link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-3);\n  list-style: none;\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n}\n.ds-pagination__label {\n  padding: 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  background: var(--color-canvas);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-border-strong);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  background: var(--fill-button);\n  color: var(--color-button-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-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  transition: var(--transition);\n  cursor: pointer;\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  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-link-hover);\n}\n/* Destructive action: the error pair. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n  text-shadow: none;\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-disabled-text);\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-4);\n}\n\n/* ---------- form: label column and field column ---------- */\n.ds-form {\n  margin: 0;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-form__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-form__label {\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-surface-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-form__field {\n  padding: var(--space-3) var(--space-5);\n}\n.ds-form__input {\n  box-sizing: border-box;\n  width: var(--size-field);\n  max-width: 100%;\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);\n  font-family: var(--font-ui);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-form__input--wide {\n  width: 100%;\n}\n.ds-form__input--auto {\n  width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  display: block;\n  margin: var(--space-2) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  display: block;\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form__checkbox {\n  margin: 0;\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--size-label) + var(--space-5));\n  background: var(--color-surface);\n}\n\n/* ---------- dialog: a boxed question in the page flow ---------- */\n.ds-dialog__backdrop {\n  padding: var(--space-6);\n  background: var(--color-overlay);\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  box-sizing: border-box;\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-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n  padding: var(--space-5) var(--space-6) var(--space-6);\n}\n.ds-dialog__text {\n  margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-4);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  padding: var(--space-6);\n  background: var(--color-surface);\n  border: var(--border-width) dotted var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-5);\n  color: var(--color-text-muted);\n}\n\n/* ---------- footer: a bar under the page ---------- */\n.ds-footer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-3) var(--space-7);\n  margin: var(--space-5) 0 0;\n  padding: var(--space-4) var(--space-6);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  font-size: var(--text-small);\n  text-shadow: var(--shadow-text);\n}\n.ds-footer__text {\n  margin: 0;\n}\n.ds-footer__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-bar-text);\n  text-decoration: underline;\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: fan wiki specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<svg class=\"ds-sprite\" width=\"0\" height=\"0\" aria-hidden=\"true\">\n  <symbol id=\"i-person\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"5\" r=\"3\" fill=\"currentColor\"/><path d=\"M2 15c0-4 2.5-6 6-6s6 2 6 6z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-place\" viewBox=\"0 0 16 16\"><path d=\"M1 14l4-8 3 5 2-3 5 6z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-item\" viewBox=\"0 0 16 16\"><path d=\"M8 1l6 5-6 9-6-9z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-book\" viewBox=\"0 0 16 16\"><path d=\"M2 2h5l1 1 1-1h5v11H9l-1 1-1-1H2z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-shield\" viewBox=\"0 0 16 16\"><path d=\"M8 1l6 2v5c0 3-2.5 6-6 7-3.5-1-6-4-6-7V3z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-beast\" viewBox=\"0 0 16 16\"><path d=\"M2 3l3 2h6l3-2-1 6-5 5-5-5z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-portrait\" viewBox=\"0 0 40 44\"><circle cx=\"20\" cy=\"16\" r=\"8\" fill=\"currentColor\"/><path d=\"M4 44c0-12 6-18 16-18s16 6 16 18z\" fill=\"currentColor\"/></symbol>\n  <symbol id=\"i-scene\" viewBox=\"0 0 40 28\"><path d=\"M0 24l11-12 7 7 8-10 14 15v4H0z\" fill=\"currentColor\"/><circle cx=\"31\" cy=\"6\" r=\"3\" fill=\"currentColor\"/></symbol>\n</svg>\n\n<div class=\"ds-page__frame\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__banner\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n        <span class=\"ds-brand__text\">\n          <span class=\"ds-brand__name\">chronoskin</span>\n          <span class=\"ds-brand__tag\">The fan-written guide to the saga, 1,964 pages and counting</span>\n        </span>\n      </a>\n      <div class=\"ds-nav__tools\">\n        <form class=\"ds-nav__search\" action=\"#category\">\n          <input class=\"ds-form__input ds-nav__field\" type=\"text\" aria-label=\"Search the wiki\" value=\"clockwright\">\n          <button class=\"ds-button\" type=\"submit\">Go</button>\n          <button class=\"ds-button ds-button--secondary\" type=\"submit\">Search</button>\n        </form>\n        <ul class=\"ds-nav__personal\">\n          <li><a class=\"ds-nav__personal-link\" href=\"#community\">Brannoc</a></li>\n          <li><a class=\"ds-nav__personal-link\" href=\"#community\">My talk</a></li>\n          <li><a class=\"ds-nav__personal-link\" href=\"#category\">Watchlist</a></li>\n          <li><a class=\"ds-nav__personal-link\" href=\"#home\">Log out</a></li>\n        </ul>\n      </div>\n    </div>\n    <ul class=\"ds-nav__menu\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Main page</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#page\">Featured character</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#category\">All characters</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#community\">Community portal</a></li>\n    </ul>\n  </header>\n\n  <div class=\"ds-page__body\">\n\n    <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">Navigation</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#home\">Main page</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#category\">Recent changes</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#page\">Random page</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#community\">Help and policies</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">The saga</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#category\">Characters</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#category\">Places</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#category\">Items and relics</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#category\">Chapters</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#category\">Factions</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--new\" href=\"#community\">Timeline</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">Community</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#community\">Notice board</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#community\">Wanted pages</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#community\">Manual of style</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#community\">Administrators</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-sidebar__block\">\n        <h2 class=\"ds-sidebar__title\">Toolbox</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#page\">What links here</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#community\">Upload a picture</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#category\">Special pages</a></li>\n        </ul>\n        <p class=\"ds-sidebar__note\">Spoiler policy: everything up to chapter 14 may appear unmarked.</p>\n      </div>\n    </aside>\n\n    <main class=\"ds-page__sheet\">\n\n      <!-- ============ home: the portal ============ -->\n      <section class=\"ds-view ds-view--home\" id=\"home\">\n        <div class=\"ds-view__body\">\n\n          <section class=\"ds-hero\" data-component=\"hero\">\n            <div>\n              <h1 class=\"ds-hero__title\">Welcome to the chronoskin wiki</h1>\n              <p class=\"ds-hero__lead\">A collaborative guide to every character, place, relic and chapter of the saga, written by its readers since 2004. Anyone can edit, and nobody has to ask first.</p>\n              <p class=\"ds-hero__action\"><a class=\"ds-button\" href=\"#category\">Browse the characters</a> <a class=\"ds-button ds-button--secondary\" href=\"#community\">How to help</a></p>\n            </div>\n            <ul class=\"ds-hero__aside\">\n              <li><strong>Currently reading:</strong> chapter 14</li>\n              <li><a class=\"ds-link\" href=\"#page\">Newest page: Maren Tollvik</a></li>\n              <li><a class=\"ds-link\" href=\"#community\">31 editors this week</a></li>\n              <li><a class=\"ds-link ds-link--new\" href=\"#community\">212 pages still wanted</a></li>\n            </ul>\n          </section>\n\n          <h2 class=\"ds-section\">Browse the wiki</h2>\n          <ul class=\"ds-grid\" data-component=\"grid\">\n            <li class=\"ds-grid__cell\"><span class=\"ds-grid__icon\"><svg aria-hidden=\"true\"><use href=\"#i-person\"/></svg></span><span><a class=\"ds-grid__name\" href=\"#category\">Characters</a><span class=\"ds-grid__meta\">318 pages</span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__icon\"><svg aria-hidden=\"true\"><use href=\"#i-place\"/></svg></span><span><a class=\"ds-grid__name\" href=\"#category\">Places</a><span class=\"ds-grid__meta\">204 pages</span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--3\"><span class=\"ds-grid__icon\"><svg aria-hidden=\"true\"><use href=\"#i-item\"/></svg></span><span><a class=\"ds-grid__name\" href=\"#category\">Items and relics</a><span class=\"ds-grid__meta\">451 pages</span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--4\"><span class=\"ds-grid__icon\"><svg aria-hidden=\"true\"><use href=\"#i-book\"/></svg></span><span><a class=\"ds-grid__name\" href=\"#category\">Chapters</a><span class=\"ds-grid__meta\">14 pages <span class=\"ds-badge\" data-component=\"badge\">new</span></span></span></li>\n            <li class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__icon\"><svg aria-hidden=\"true\"><use href=\"#i-shield\"/></svg></span><span><a class=\"ds-grid__name\" href=\"#category\">Factions</a><span class=\"ds-grid__meta\">37 pages</span></span></li>\n            <li class=\"ds-grid__cell\"><span class=\"ds-grid__icon\"><svg aria-hidden=\"true\"><use href=\"#i-beast\"/></svg></span><span><a class=\"ds-grid__name\" href=\"#category\">Creatures</a><span class=\"ds-grid__meta\">96 pages</span></span></li>\n          </ul>\n\n          <div class=\"ds-columns\">\n            <section class=\"ds-panel\">\n              <h2 class=\"ds-panel__title\">Latest news</h2>\n              <ul class=\"ds-list\" data-component=\"list\">\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">28 December 2007</span>Chapter 14 is out, and its page is open for editing. Please keep plot details under the spoiler heading for the first two weeks. <span class=\"ds-list__meta\">Posted by <a class=\"ds-link\" href=\"#community\">Ysolde</a> &middot; <a class=\"ds-link\" href=\"#community\">9 comments</a></span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">21 December 2007</span>The relic pages now share one fact box. If yours looks odd, see the <a class=\"ds-link\" href=\"#community\">notice board</a>. <span class=\"ds-list__meta\">Posted by <a class=\"ds-link\" href=\"#community\">Brannoc</a> &middot; <a class=\"ds-link\" href=\"#community\">4 comments</a></span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">9 December 2007</span>We passed 1,900 pages. Thank you to everyone who filled in the <a class=\"ds-link\" href=\"#category\">minor characters</a> this autumn. <span class=\"ds-list__meta\">Posted by <a class=\"ds-link\" href=\"#community\">Ysolde</a> &middot; <a class=\"ds-link\" href=\"#community\">17 comments</a></span></li>\n                <li class=\"ds-list__item\"><span class=\"ds-list__date\">30 November 2007</span>Picture uploads are limited to 200 kB again while the server is moved. <span class=\"ds-list__meta\">Posted by <a class=\"ds-link\" href=\"#community\">Dunmere</a> &middot; <a class=\"ds-link\" href=\"#community\">2 comments</a></span></li>\n              </ul>\n              <p class=\"ds-panel__foot\"><a class=\"ds-link ds-link--strong\" href=\"#community\">News archive</a></p>\n            </section>\n\n            <div class=\"ds-columns__stack\">\n              <section class=\"ds-panel\" data-component=\"panel\">\n                <h2 class=\"ds-panel__title\">Article of the week</h2>\n                <div class=\"ds-panel__body\">\n                  <span class=\"ds-thumb\"><span class=\"ds-thumb__image\"><svg viewBox=\"0 0 40 44\" aria-hidden=\"true\"><use href=\"#i-portrait\"/></svg></span></span>\n                  <p class=\"ds-panel__line\"><a class=\"ds-link ds-link--strong\" href=\"#page\">Maren Tollvik</a>, called the Clockwright, is the keeper of the Brass Orrery and one of the three narrators of the saga. She first appears in chapter 2 as an apprentice and by chapter 11 commands the <a class=\"ds-link\" href=\"#category\">Guild of Hours</a>.</p>\n                  <p class=\"ds-panel__line\">Her page was rewritten this month with a full chapter-by-chapter history. <a class=\"ds-link ds-link--strong\" href=\"#page\">Read more...</a></p>\n                </div>\n                <p class=\"ds-panel__foot\"><a class=\"ds-link\" href=\"#category\">Earlier picks</a> &middot; <a class=\"ds-link\" href=\"#community\">Nominate a page</a></p>\n              </section>\n              <section class=\"ds-panel\">\n                <h2 class=\"ds-panel__title ds-panel__title--plain\">Did you know...</h2>\n                <div class=\"ds-panel__body\">\n                  <ul class=\"ds-panel__items\">\n                    <li>...that the <a class=\"ds-link\" href=\"#category\">Brass Orrery</a> is drawn with eleven rings in chapter 3 and twelve ever after?</li>\n                    <li>...that <a class=\"ds-link\" href=\"#page\">Maren</a> is left-handed in every illustration but one?</li>\n                    <li>...that the <a class=\"ds-link ds-link--new\" href=\"#community\">Saltmarsh dialect</a> has no word for \"late\"?</li>\n                  </ul>\n                </div>\n              </section>\n            </div>\n          </div>\n\n          <dl class=\"ds-stat\" data-component=\"stats\">\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">1,964</dd><dt class=\"ds-stat__label\">pages</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">48,210</dd><dt class=\"ds-stat__label\">edits</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">2,730</dd><dt class=\"ds-stat__label\">pictures</dt></div>\n            <div class=\"ds-stat__item\"><dd class=\"ds-stat__value\">412</dd><dt class=\"ds-stat__label\">editors</dt></div>\n          </dl>\n\n        </div>\n      </section>\n\n      <!-- ============ page: a character ============ -->\n      <section class=\"ds-view\" id=\"page\">\n        <div class=\"ds-view__body\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">Main page</a></li>\n            <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#category\">Characters</a></li>\n            <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n            <li class=\"ds-breadcrumb__current\">Maren Tollvik</li>\n          </ol>\n          <header class=\"ds-page-header\" data-component=\"page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Maren Tollvik</h1>\n              <p class=\"ds-page-header__desc\">Character page &middot; last edited 30 December 2007 by Ysolde &middot; 64 revisions</p>\n            </div>\n            <p class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#community\">Edit this page</a> <a class=\"ds-button ds-button--secondary\" href=\"#community\">Discuss</a></p>\n          </header>\n\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Spoilers ahead</span>This page covers events up to chapter 14. If you have not read that far, stop at the Overview tab. <a class=\"ds-notice__link\" href=\"#community\">Read the spoiler policy</a>.</p>\n\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#page\">Overview</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#page\">History by chapter</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#page\">Relationships</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#page\">Gallery</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#page\">Trivia</a></li>\n          </ul>\n\n          <div class=\"ds-view__flow\">\n            <aside class=\"ds-infobox\">\n              <h2 class=\"ds-infobox__title\">Maren Tollvik</h2>\n              <span class=\"ds-infobox__image\"><svg viewBox=\"0 6 40 32\" aria-hidden=\"true\"><use href=\"#i-portrait\"/></svg></span>\n              <span class=\"ds-infobox__caption\">Maren at the Orrery, chapter 11</span>\n              <p class=\"ds-infobox__group\">Profile</p>\n              <table class=\"ds-infobox__rows\">\n                <tr><th scope=\"row\">Title</th><td>The Clockwright</td></tr>\n                <tr><th scope=\"row\">Status</th><td><span class=\"ds-badge ds-badge--success\">Alive</span></td></tr>\n                <tr><th scope=\"row\">Born</th><td>Year 412, <a class=\"ds-link\" href=\"#category\">Saltmarsh</a></td></tr>\n                <tr><th scope=\"row\">Faction</th><td><a class=\"ds-link\" href=\"#category\">Guild of Hours</a></td></tr>\n                <tr><th scope=\"row\">Relic</th><td><a class=\"ds-link\" href=\"#category\">Brass Orrery</a></td></tr>\n              </table>\n              <p class=\"ds-infobox__group\">In the saga</p>\n              <table class=\"ds-infobox__rows\">\n                <tr><th scope=\"row\">First seen</th><td><a class=\"ds-link\" href=\"#category\">Chapter 2</a></td></tr>\n                <tr><th scope=\"row\">Last seen</th><td><a class=\"ds-link\" href=\"#category\">Chapter 14</a></td></tr>\n                <tr><th scope=\"row\">Narrates</th><td>5 chapters</td></tr>\n                <tr><th scope=\"row\">Mentor</th><td><a class=\"ds-link\" href=\"#page\">Osric Vane</a> <span class=\"ds-badge ds-badge--danger\">Dead</span></td></tr>\n                <tr><th scope=\"row\">Rival</th><td><a class=\"ds-link ds-link--new\" href=\"#community\">Halla Brey</a> <span class=\"ds-badge ds-badge--warning\">Missing</span></td></tr>\n              </table>\n            </aside>\n\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>The Clockwright of Saltmarsh</h1>\n              <p><strong>Maren Tollvik</strong> is the keeper of the <a class=\"ds-link\" href=\"#category\">Brass Orrery</a> and, from chapter 11, mistress of the <a class=\"ds-link\" href=\"#category\">Guild of Hours</a>. She is one of the three narrators of the saga and the only one whose chapters are told in the present tense.</p>\n              <blockquote>\"A clock does not tell you the time. It tells you what somebody decided the time should be.\"</blockquote>\n              <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#community\">edit</a>]</span>Appearance and manner</h2>\n              <p>Maren is described as small, quick and ink-stained, and is drawn with a loupe on a cord in every chapter after the third. Other characters call her blunt; the text marks her spoken lines with the tag <code>plainly</code> more often than any other.</p>\n              <h3>Abilities</h3>\n              <ul>\n                <li>Reads the Orrery without tables, a skill only two other characters share.</li>\n                <li>Can stop a running mechanism by ear.</li>\n                <li>Holds the guild seal, which opens every tower door in <a class=\"ds-link\" href=\"#category\">Saltmarsh</a>.</li>\n              </ul>\n              <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#community\">edit</a>]</span>History</h2>\n              <p>Born in <a class=\"ds-link\" href=\"#category\">Saltmarsh</a> to a family of ferrymen, Maren is bound to the guild at eleven after repairing the harbour bell on a dare. Her apprenticeship under <a class=\"ds-link\" href=\"#page\">Osric Vane</a> fills chapters 2 to 5 and ends with the first reading of the Orrery.</p>\n              <p>After the flood of chapter 8 she rebuilds the tower mechanism from memory. The guild elects her mistress in chapter 11, over the objection of <a class=\"ds-link ds-link--new\" href=\"#community\">Halla Brey</a>, who leaves the city the same night and has not been seen since.</p>\n              <h3>Unanswered questions</h3>\n              <ul>\n                <li>Who added the twelfth ring, and when?</li>\n                <li>Why does the seal no longer open the east door?</li>\n              </ul>\n            </div>\n          </div>\n\n          <h2 class=\"ds-section\">Appearances</h2>\n\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th scope=\"col\">Chapter</th><th scope=\"col\">Role</th><th scope=\"col\">Where</th><th scope=\"col\">Pages</th><th scope=\"col\">Lines</th></tr>\n            </thead>\n            <tbody>\n              <tr><td><a class=\"ds-link\" href=\"#category\">2. The apprentice</a></td><td>Introduced</td><td>Saltmarsh</td><td class=\"ds-table__num\">12</td><td class=\"ds-table__num\">41</td></tr>\n              <tr><td><a class=\"ds-link\" href=\"#category\">5. Eleven rings</a></td><td>Narrator</td><td>The Orrery tower</td><td class=\"ds-table__num\">38</td><td class=\"ds-table__num\">203</td></tr>\n              <tr><td><a class=\"ds-link\" href=\"#category\">8. Low water</a></td><td>Supporting</td><td>The causeway</td><td class=\"ds-table__num\">9</td><td class=\"ds-table__num\">27</td></tr>\n              <tr><td><a class=\"ds-link\" href=\"#category\">11. The seal</a></td><td>Narrator</td><td>Guild hall</td><td class=\"ds-table__num\">44</td><td class=\"ds-table__num\">260</td></tr>\n              <tr><td><a class=\"ds-link\" href=\"#category\">14. Twelve</a></td><td>Narrator</td><td>The Orrery tower</td><td class=\"ds-table__num\">51</td><td class=\"ds-table__num\">318</td></tr>\n            </tbody>\n          </table>\n\n          <div class=\"ds-prose\">\n            <h2><span class=\"ds-edit\">[<a class=\"ds-link\" href=\"#community\">edit</a>]</span>See also</h2>\n            <ul data-component=\"links\">\n              <li><a class=\"ds-link\" href=\"#category\">Guild of Hours</a>, the faction she leads</li>\n              <li><a class=\"ds-link is-visited\" href=\"#page\">Osric Vane</a>, a page you have already read</li>\n              <li><a class=\"ds-link is-hover\" href=\"#category\">Brass Orrery</a>, under the pointer</li>\n              <li><a class=\"ds-link is-active\" href=\"#category\">Saltmarsh</a>, while pressed</li>\n              <li><a class=\"ds-link ds-link--new\" href=\"#community\">Halla Brey</a>, a page nobody has written yet</li>\n              <li><a class=\"ds-link ds-link--quiet\" href=\"#community\">Reading order for new readers</a>, a help page</li>\n            </ul>\n          </div>\n        </div>\n      </section>\n\n      <!-- ============ category ============ -->\n      <section class=\"ds-view\" id=\"category\">\n        <div class=\"ds-view__body\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">Main page</a></li>\n            <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#category\">Browse</a></li>\n            <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n            <li class=\"ds-breadcrumb__current\">Category: Characters</li>\n          </ol>\n          <header class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Category: Characters</h1>\n              <p class=\"ds-page-header__desc\">Everyone named in the saga, major or minor. There are 318 pages in this category; 60 are shown.</p>\n            </div>\n            <p class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#community\">Add a character</a></p>\n          </header>\n\n          <ul class=\"ds-index\">\n            <li><a class=\"ds-index__letter\" href=\"#category\">A</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">B</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">C</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">D</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">E</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">F</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">G</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">H</a></li>\n            <li><span class=\"ds-index__letter is-empty\">I</span></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">J</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">K</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">L</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">M</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">N</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">O</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">P</a></li>\n            <li><span class=\"ds-index__letter is-empty\">Q</span></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">R</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">S</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">T</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">U</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">V</a></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">W</a></li>\n            <li><span class=\"ds-index__letter is-empty\">X</span></li>\n            <li><a class=\"ds-index__letter\" href=\"#category\">Y</a></li>\n            <li><span class=\"ds-index__letter is-empty\">Z</span></li>\n          </ul>\n\n          <h2 class=\"ds-section\">Subcategories</h2>\n          <div class=\"ds-catlist\">\n            <ul class=\"ds-catlist__items\">\n              <li><a class=\"ds-link ds-link--strong\" href=\"#category\">Narrators</a> (3)</li>\n              <li><a class=\"ds-link ds-link--strong\" href=\"#category\">Guild members</a> (41)</li>\n            </ul>\n            <ul class=\"ds-catlist__items\">\n              <li><a class=\"ds-link ds-link--strong\" href=\"#category\">Saltmarsh folk</a> (58)</li>\n              <li><a class=\"ds-link ds-link--strong\" href=\"#category\">Tower keepers</a> (12)</li>\n            </ul>\n            <ul class=\"ds-catlist__items\">\n              <li><a class=\"ds-link ds-link--strong\" href=\"#category\">Deceased characters</a> (27)</li>\n              <li><a class=\"ds-link ds-link--strong\" href=\"#category\">Unnamed characters</a> (19)</li>\n            </ul>\n          </div>\n\n          <h2 class=\"ds-section\">Pages in category \"Characters\"</h2>\n          <div class=\"ds-catlist\">\n            <div>\n              <h3 class=\"ds-catlist__head\">A</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Aldith Crane</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Anselm the Ferryman</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Avery Pell</a></li>\n              </ul>\n              <h3 class=\"ds-catlist__head\">B</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Bede of the Causeway</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Berit Tollvik</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Brother Corwin</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Bryony Slate</a></li>\n              </ul>\n              <h3 class=\"ds-catlist__head\">C</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Cadoc Reeve</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">The Chandler</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Cyprian Dow</a></li>\n              </ul>\n            </div>\n            <div>\n              <h3 class=\"ds-catlist__head\">D</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Dagny Holt</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Dunstan Wray</a></li>\n              </ul>\n              <h3 class=\"ds-catlist__head\">E</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Edda Marsh</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Elric Thane</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Esme Varrow</a></li>\n              </ul>\n              <h3 class=\"ds-catlist__head\">G</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Garrick Stone</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Gilda Fenn</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">The Grey Auditor</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Gwilym Ash</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Gytha Lorn</a></li>\n              </ul>\n            </div>\n            <div>\n              <h3 class=\"ds-catlist__head\">H</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Hale the Younger</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Hester Quill</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Hob Tarn</a></li>\n              </ul>\n              <h3 class=\"ds-catlist__head\">M</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link ds-link--strong\" href=\"#page\">Maren Tollvik</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Master Ilbert</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Mirren Sedge</a></li>\n              </ul>\n              <h3 class=\"ds-catlist__head\">O</h3>\n              <ul class=\"ds-catlist__items\">\n                <li><a class=\"ds-link\" href=\"#page\">Odile Farrow</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Osric Vane</a></li>\n                <li><a class=\"ds-link\" href=\"#page\">Oswin the Clerk</a></li>\n              </ul>\n            </div>\n          </div>\n\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link\" href=\"#category\">&laquo; Previous 60</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#category\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#category\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#category\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#category\">4</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#category\">5</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#category\">6</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#category\">Next 60 &raquo;</a></li>\n            <li class=\"ds-pagination__label\">Pages 1 to 60 of 318</li>\n          </ul>\n\n          <h2 class=\"ds-section\">Pictures in category \"Characters\"</h2>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <p class=\"ds-empty__title\">No pictures yet</p>\n            <p class=\"ds-empty__text\">Nobody has filed a picture under this category. Portraits from the chapter plates are welcome, one per character.</p>\n            <a class=\"ds-button\" href=\"#community\">Upload a picture</a>\n          </div>\n        </div>\n      </section>\n\n      <!-- ============ community portal ============ -->\n      <section class=\"ds-view\" id=\"community\">\n        <div class=\"ds-view__body\">\n          <ol class=\"ds-breadcrumb\">\n            <li><a class=\"ds-breadcrumb__link\" href=\"#home\">Main page</a></li>\n            <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n            <li><a class=\"ds-breadcrumb__link\" href=\"#community\">Community</a></li>\n            <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n            <li class=\"ds-breadcrumb__current\">Notice board</li>\n          </ol>\n          <header class=\"ds-page-header\">\n            <div>\n              <h1 class=\"ds-page-header__title\">Community portal</h1>\n              <p class=\"ds-page-header__desc\">What needs doing, who is doing it, and where to ask. 31 editors were active this week.</p>\n            </div>\n            <p class=\"ds-page-header__action\"><a class=\"ds-button ds-button--secondary\" href=\"#category\">Recent changes</a></p>\n          </header>\n\n          <div class=\"ds-view__body\" data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__title\">Chapter 14 clean-up week</span>Seven new pages need fact boxes and a second reader before Sunday. <a class=\"ds-notice__link\" href=\"#category\">See the list</a>.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Picture uploads are switched off</span>The file server is being moved. Uploads will fail until Tuesday; text edits are not affected.</p>\n          </div>\n\n          <div class=\"ds-columns ds-columns--wide\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#community\">\n              <h2 class=\"ds-form__title\">Leave a note on the board</h2>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"n-subject\">Subject</label>\n                <div class=\"ds-form__field\"><input class=\"ds-form__input ds-form__input--wide\" id=\"n-subject\" type=\"text\" value=\"Fact box for minor characters\"></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"n-about\">About</label>\n                <div class=\"ds-form__field\"><select class=\"ds-form__input ds-form__input--auto\" id=\"n-about\"><option>Templates and fact boxes</option><option>A page dispute</option><option>Spoilers</option><option>Something else</option></select></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"n-page\">Page</label>\n                <div class=\"ds-form__field\"><input class=\"ds-form__input is-invalid\" id=\"n-page\" type=\"text\" value=\"Halla Brey\">\n                  <span class=\"ds-form__error\">There is no page with this title. Check the spelling or leave the field empty.</span></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__label\" for=\"n-text\">Your note</label>\n                <div class=\"ds-form__field\"><textarea class=\"ds-form__input ds-form__input--wide\" id=\"n-text\" rows=\"5\">Could the profile box hide the Relic row when it is empty? Half the minor characters show a blank line.</textarea>\n                  <span class=\"ds-form__hint\">Sign with four tildes. Notes are public and kept in the archive.</span></div>\n              </div>\n              <div class=\"ds-form__row\">\n                <span class=\"ds-form__label\">Options</span>\n                <div class=\"ds-form__field\"><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Watch this thread</label></div>\n              </div>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"submit\">Post note</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#community\">Preview</a>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Attach picture</button>\n                <a class=\"ds-button ds-button--danger\" href=\"#community\">Discard</a>\n              </div>\n            </form>\n\n            <div class=\"ds-columns__stack\">\n              <section class=\"ds-panel\">\n                <h2 class=\"ds-panel__title\">Things to do</h2>\n                <div class=\"ds-panel__body\">\n                  <ul class=\"ds-panel__items\">\n                    <li><a class=\"ds-link ds-link--new\" href=\"#community\">Halla Brey</a> <span class=\"ds-badge ds-badge--danger\">wanted</span></li>\n                    <li><a class=\"ds-link\" href=\"#page\">Osric Vane</a> <span class=\"ds-badge ds-badge--warning\">needs sources</span></li>\n                    <li><a class=\"ds-link\" href=\"#category\">Guild of Hours</a> <span class=\"ds-badge ds-badge--warning\">stub</span></li>\n                    <li><a class=\"ds-link\" href=\"#page\">Maren Tollvik</a> <span class=\"ds-badge ds-badge--success\">reviewed</span></li>\n                  </ul>\n                </div>\n                <p class=\"ds-panel__foot\"><a class=\"ds-link ds-link--strong\" href=\"#category\">All 212 wanted pages</a></p>\n              </section>\n              <div class=\"ds-dialog__backdrop\">\n                <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n                  <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Discard this note?</h2>\n                  <div class=\"ds-dialog__body\">\n                    <p class=\"ds-dialog__text\">Your note has not been posted. If you discard it now the text is gone for good.</p>\n                    <div class=\"ds-dialog__actions\">\n                      <a class=\"ds-button ds-button--secondary\" href=\"#community\">Keep writing</a>\n                      <a class=\"ds-button ds-button--danger\" href=\"#community\">Discard note</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n\n    </main>\n  </div>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <p class=\"ds-footer__text\">chronoskin is a fan project and is not affiliated with the publishers of the saga. Text is shared under an open attribution licence.</p>\n    <ul class=\"ds-footer__row\">\n      <li><a class=\"ds-footer__link\" href=\"#community\">About</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#community\">Policies</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#category\">Recent changes</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#home\">Main page</a></li>\n    </ul>\n  </footer>\n\n</div>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.wiki-2000s.portal.s02.p02.t02.u02\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"wiki-2000s\",\n    \"years\": [\n      2003,\n      2010\n    ]\n  },\n  \"archetype\": \"portal\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-wk-2222\",\n  \"short\": \"v1-wk-2222\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #2e2e33;\n  --color-canvas: #ffffff;\n  --color-surface: #f8f8f8;\n  --color-surface-alt: #eeeeff;\n  --color-surface-strong: #a6caf0;\n  --color-bar: #222222;\n  --color-bar-text: #ffd942;\n  --color-bar-alt: #15317e;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #331818;\n  --color-inverse-text: #ffe9a8;\n  --color-text: #111111;\n  --color-text-muted: #686868;\n  --color-heading: #660000;\n  --color-heading-alt: #15317e;\n  --color-link: #15317e;\n  --color-link-quiet: #808040;\n  --color-link-visited: #778899;\n  --color-link-hover: #d2691e;\n  --color-link-active: #660000;\n  --color-border: #cccccc;\n  --color-border-strong: #e0c080;\n  --color-border-muted: #e8e8e8;\n  --color-accent: #ffd942;\n  --color-accent-text: #222222;\n  --color-accent-alt: #d2691e;\n  --color-fill-1: #eeeeff;\n  --color-fill-2: #f8f8f0;\n  --color-fill-3: #eef3e2;\n  --color-fill-4: #fbf1d6;\n  --color-button: #15317e;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffd942;\n  --color-button-secondary: #a6caf0;\n  --color-button-secondary-text: #191970;\n  --color-input: #fffdf6;\n  --color-input-text: #111111;\n  --color-input-border: #989898;\n  --color-disabled: #d0d0d0;\n  --color-disabled-text: #787878;\n  --color-danger: #a11b1b;\n  --color-danger-surface: #f6e2dc;\n  --color-success: #3f7d1d;\n  --color-warning: #c98a00;\n  --color-notice: #fff4c2;\n  --color-notice-text: #331818;\n  --color-focus: #d2691e;\n  --color-shadow: #181820;\n  --color-overlay: #202020;\n}\n\n/* @part type */\n:root {\n  --font-body: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n  --font-heading: \"Trebuchet MS\", Verdana, Geneva, sans-serif;\n  --font-ui: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n  --font-mono: \"Lucida Console\", Monaco, monospace;\n  --text-base: 11px;\n  --text-small: 10px;\n  --text-ui: 10px;\n  --text-large: 13px;\n  --text-display: 22px;\n  --text-h1: 20px;\n  --text-h2: 15px;\n  --text-h3: 12px;\n  --line-body: 1.45;\n  --line-heading: 1.2;\n  --line-display: 1.1;\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: 1px;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 14%) 0, color-mix(in srgb, var(--color-page), black 14%) 1px, var(--color-page) 1px, var(--color-page) 3px);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%), var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 25%));\n  --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 16%), var(--color-bar-alt) 60%);\n  --fill-inverse: linear-gradient(to right, var(--color-inverse), color-mix(in srgb, var(--color-inverse), black 45%));\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%), var(--color-accent));\n  --fill-panel: var(--color-canvas);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 28%), var(--color-button) 55%);\n  --fill-button-hover: linear-gradient(to bottom, var(--color-button), color-mix(in srgb, var(--color-button), black 25%));\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 45%), var(--color-button-secondary));\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 6%), var(--color-input) 30%);\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
