{
  "id": "v1-bb-2222",
  "long_id": "v1.bulletin-board-forums.forum.s02.p02.t02.u02",
  "name": "Bulletin board forum, full-width board index, 2002 to 2007",
  "era": {
    "slug": "bulletin-board-forums",
    "code": "bb",
    "name": "Bulletin-board forums",
    "years": [
      2002,
      2007
    ],
    "description": "Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana."
  },
  "archetype": "forum",
  "mode": "pure",
  "viewport": {
    "width": 1024,
    "fluid": true
  },
  "summary": "This is the board index of packaged forum software in the early 2000s as it looked when it was the whole site: a tall coloured masthead with the wordmark and a row of small navigation buttons, and under it nothing but the boards, one ruled block per category, from edge to edge. There is no sidebar on the index; counts, last posts and moderators each have their own column, and an information centre of stacked sections closes the page. Slate purple bars with pale yellow titles sit over neutral grey cells, every box is square, and the only depth is a hard one-pixel bevel on buttons.",
  "url": "https://chrono.skin/s/v1-bb-2222",
  "preview_url": "https://chrono.skin/s/v1-bb-2222/specimen.html",
  "files": {
    "STYLE.md": "# Bulletin board forum, full-width board index, 2002 to 2007\n\n## Summary\n\nThis is the board index of packaged forum software in the early 2000s as it looked when it was the whole site: a tall coloured masthead with the wordmark and a row of small navigation buttons, and under it nothing but the boards, one ruled block per category, from edge to edge. There is no sidebar on the index; counts, last posts and moderators each have their own column, and an information centre of stacked sections closes the page. Slate purple bars with pale yellow titles sit over neutral grey cells, every box is square, and the only depth is a hard one-pixel bevel on buttons.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-5` (12px) above and below and `--space-4` (8px) at the sides, so the sheet `.ds-page__frame` takes about 98% of the viewport at every width. Designed at 1024px. The sheet has no outline: it is the canvas colour against the page colour. Never centre a narrow column.\n- Order from the top: the masthead band `.ds-nav__head`, at least `--size-masthead` (76px) tall, in the inverse fill, with the brand (button-dressed tile and wordmark) on the left and the navigation as small buttons sitting on its bottom edge at the right; a one-line strip `.ds-nav__sub` with the visitor line on the left and three shortcuts on the right; then `.ds-page__body`, which holds the views; then the footer strip, the small print and one closing line `.ds-page__legal`, all inside the sheet. No text sits on the page colour.\n- Views. The specimen is a six-screen example forum; the masthead has one button per view and the current one takes the surface fill. `index` (home, button \"forums\") is the board index: welcome box, the category tables, legend, child-board grid and the information centre. `forum` (\"threads\") is one forum: announcement, menu column, tabs, thread table, the new-thread button and page numbers. `thread` (\"show thread\") is one thread: three posts, the delete confirmation that a post's Delete link opens, then the thread tools and page numbers. `reply` (\"post reply\") is the posting form with its error notice and a review of the latest posts. `usercp` (\"user cp\") is the member's control panel: menu column, an empty block for new posts and the subscribed threads. `faq` (\"f.a.q.\") is the help page: contents menu, the forum rules as long text and a see-also line. Each view is a `.ds-view` section whose `.ds-view__body` stacks its blocks `--space-6` apart; the header, the strip and the footer are written once, outside the views.\n- The index is one column with no sidebar. From the top: the welcome box `.ds-hero` (text cell plus a `--size-login`, 300px, log-in cell), then one `.ds-table` per category, the legend line, the child-board grid, and the information centre (`.ds-panel`, `.ds-stat`, `.ds-list`).\n- Board table columns, in this order: status `--size-status` (30px), forum (fluid), posts and threads `--size-count` (62px) each, last post `--size-last` (170px, left-aligned, three lines), moderator `--size-mod` (130px). Rows are at least `--size-row` (38px); bars and title strips `--size-bar` (26px).\n- Spacing scale: `--space-1` 1px, `--space-2` 2px, `--space-3` 4px, `--space-4` 8px, `--space-5` 12px, `--space-6` 18px.\n  - `--space-1`: the ruled gap between cells inside every block, and the vertical padding of buttons and inputs.\n  - `--space-2`: vertical padding of strips and navigation buttons, gap between navigation buttons.\n  - `--space-3`: vertical padding of cells, gap between inline items.\n  - `--space-4`: horizontal padding of cells and strips, gap between buttons, and the gap between blocks that belong together (the blocks inside `.ds-page__group` and `.ds-layout__main`).\n  - `--space-5`: body padding, the gap between the menu column and the main column, padding of form and dialog bodies.\n  - `--space-6`: the gap between unrelated blocks in `.ds-page__body`; list indent.\n- Inner pages (every view but the index) keep the masthead, the strip and the footer and drop the welcome box. From the top: `.ds-breadcrumb` as an open bold line on a faint rule, then `.ds-page-header` in place of the hero (a boxed title bar with a description row and the main action at its right end), an optional `.ds-notice`, then the working blocks. A forum, the control panel and the f.a.q. use `.ds-layout`: a `--size-menu` (180px) menu column `.ds-sidebar` on the left and `.ds-layout__main` on the right, whose blocks sit `--space-4` apart: `.ds-tabs` (one segmented strip), the working `.ds-table`, then a `.ds-toolbar` with the action on the left and `.ds-pagination` on the right. Give the menu enough groups to end near the foot of the main column. A thread and the posting form are full width with no menu column: a thread is a `.ds-page__group` of `.ds-post` blocks, each with its own `--size-menu` author cell, closed by a `.ds-toolbar`; the posting form is the error `.ds-notice` and the `.ds-form` in one group, then a `.ds-list` reviewing the thread. The sidebar exists only on inner pages.\n- Forms stack the label above the control in a two-column body; text inputs are `--size-field` (240px). A dialog is `--size-dialog` (440px) wide, centred in the flow.\n\n## Typography and colour roles\n\n- The page outside the sheet is the slate purple `--color-page` (#666696); the sheet `--color-canvas` is white. Cells are neutral greys, not tinted: `--color-surface` #f1f1f1 for the main cell, `--color-surface-alt` #dfdfdf for status, count, last-post and moderator cells, icon cells and the log-in cell, `--color-surface-strong` #cfcfcf for column-label strips, section strips and action rows.\n- `--color-bar` (#606096) carries pale yellow `--color-bar-text` (#fff788): category bars, block titles, the page-header title, the current tab. `--color-bar-alt` (#8080a6) with `--color-bar-alt-text` (#ffffff) is the idle navigation button, idle tabs, the closing strip of a table and the footer strip. The masthead band is `--color-inverse` (#555576) with `--color-inverse-text` (#eeeeff). The current navigation button is `--color-surface` with `--color-heading`.\n- Text is `--color-text` #000000; `--color-text-muted`, `--color-heading` and `--color-link-quiet` are all the near-black navy #000020, so secondary text is set apart by size, not by a grey. It also has to read on the purple page, so never lighten it. Only `--color-text-muted` is ever set directly on the page colour.\n- `--color-link` is the bar purple #606096, `--color-link-visited` #666686, `--color-link-hover` #8080a6. Board and thread titles use `--color-link-quiet`.\n- `--color-border` (#555576) outlines every block; `--color-border-strong` (#000020) is for the rule under the masthead, button outlines and the dialog; `--color-border-muted` (#cfcfcf) for rules inside a box, under the strip and under the breadcrumb.\n- Markers: `--color-accent` (#606096) with `--color-accent-text` (#fff788) for the badge and new-post icons. Yellow #fff788 is also `--color-warning` and `--color-notice`, always under dark text. `--color-danger` is #a00000 on a grey `--color-danger-surface` (#f1f1f1); `--color-success` #006600. Status badges are a `color-mix()` of 30% of the status colour (`--color-success`, `--color-warning`, `--color-danger`) over `--color-surface`, with `--color-text` and a 1px outline in the status colour, so they read under every palette. The destructive button is the error pair: `--color-danger` text on `--color-danger-surface` with a `--color-danger` outline. There is no orange and no bright red.\n- `--color-fill-1` to `--color-fill-4` repeat the greys (#f1f1f1, #dfdfdf, #e8e8e8, #f1f1f1); they fill the child-board cells with `--color-link-quiet` names and `--color-text-muted` meta.\n- Body and controls are `--font-body` / `--font-ui`, Verdana with Arial and Helvetica. Headings, bar titles and the wordmark are `--font-heading`, Trebuchet MS before Verdana, bold, tracked by `--heading-tracking` 1px (`--display-tracking` 1px for the wordmark).\n- `--text-small` 10px carries descriptions, meta, strips, column labels and navigation buttons; `--text-base` and `--text-ui` 11px running text, buttons, inputs and tabs; `--text-large` and `--text-h2` 12px board titles, counts and bar titles; `--text-h3` 11px; `--text-h1` and `--text-display` 16px for the page-header title and the wordmark. Nothing is larger than 16px.\n- Line height is `normal` everywhere. `--weight-ui` and `--weight-heading` are 700, body 400. No uppercase.\n- Links in running text are underlined (`--link-decoration`); titles, breadcrumb and quiet links are not (`--link-decoration-quiet: none`) and rely on bold weight and colour. Names of members, moderators and sub-forums are ordinary underlined links.\n- Every corner is square (all `--radius-*` 0). Borders are `--border-width` 1px solid; `--border-width-strong` is 3px, used under the masthead and around the dialog.\n- `--fill-panel` is `--color-border`: the one-pixel gaps between cells show the border colour, so tables, lists, forms and panels read as ruled grids. Never set text directly on `--fill-panel`; cover it with cells.\n- `--fill-bar` runs from a darker top edge down to the plain bar colour; `--fill-bar-alt` and `--fill-button` do the same more faintly, and the button goes flat on hover. Buttons carry a hard one-pixel bevel, `--shadow-control`; `--shadow-control-pressed` reverses it. Panels, dialogs and text have no shadow. `--focus-ring` is a 1px dotted line; `--transition` is `none`.\n- One-off choices outside the token set: the status badge tints; the half-width log-in inputs are `calc(var(--size-field) / 2)`.\n\n## Components\n\n- `.ds-page`: on `<body>`. Wrap everything in `.ds-page__frame`; put blocks in `.ds-page__body`. Each screen is a `.ds-view` section (the first also `.ds-view--home`) with one `.ds-view__body` inside, which stacks the blocks; only the view named in the address shows. `.ds-page__group` holds blocks that belong together at the closer `--space-4` gap. `.ds-page__legal` is the closing line at the foot of the sheet. `.ds-icon` sizes an inline SVG icon, `.ds-sprite` hides the symbol sheet, `.ds-block` puts a span on its own line.\n- `.ds-nav`: the site header. `.ds-nav__head` is the masthead band with `.ds-nav__brand` (the `.ds-brand` with a `.ds-nav__tagline` line under it) and `.ds-nav__menu`, a row of small lower-case `.ds-nav__link` buttons on the band's bottom edge, each linking to a view (`href=\"#forum\"`); the button of the view on screen is marked by a `:has(#forum:target)` rule per view, or by `is-current` on a site with real pages. `.ds-nav__sub` is the line under the band: `.ds-nav__user` text, then `.ds-nav__sublink` shortcuts.\n- `.ds-brand`: the site's mark and name at the left of the masthead, linking to the index; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, a `--border-width` outline in `--color-border-strong`, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.5 times `--text-display`, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` and `--weight-display`, with `--display-tracking` and `--heading-transform`, coloured `--color-inverse-text` for the inverse masthead band it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-breadcrumb`: an open bold line on a faint rule, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (`>`) and `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome box of the index. `.ds-hero__title` is a pale strip across the top; `.ds-hero__main` holds the `.ds-hero__lead` and one `.ds-hero__facts` line of totals; `.ds-hero__action` is the log-in cell on the right, made of `.ds-hero__row` lines, and holds the main action. Never make it a banner.\n- `.ds-page-header`: the head of an inner page. `.ds-page-header__title` is a primary bar at 16px; `.ds-page-header__row` under it holds `.ds-page-header__desc` and, at the right, `.ds-page-header__action` with one primary button.\n- `.ds-prose`: long text such as rules or a post body: h1, h2, h3, p, ul, strong, code, hr.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for the dark, not underlined kind; `.ds-link--strong` for bold.\n- `.ds-button`: primary action, bevelled, bold. `.ds-button--secondary` is the grey button, `.ds-button--danger` the destructive one, error text on the error surface with an error outline; use it once per confirmation next to a secondary button. `is-hover`, `is-active`, `is-focus`, `is-disabled` (or `disabled`). Group buttons in `.ds-buttons`.\n- `.ds-form`: `.ds-form__title` bar, then `.ds-form__body`, a two-column body of `.ds-form__row` (`--wide` spans both) each with a `.ds-form__label` (plus `.ds-form__hint`) above its control. Controls take `.ds-form__input` (`--wide`, `--auto`, `--short`, `is-invalid`, `is-disabled`); errors `.ds-form__error`; checkboxes `.ds-form__check` with `.ds-form__checkbox`; buttons right-aligned in `.ds-form__actions`.\n- `.ds-table`: one table per category on the index, the thread list of a forum and the subscribed threads of the control panel. The first head row is `.ds-table__group`, the category bar; the `th` row under it is a pale label strip (`.ds-table__head--left` for text columns). Cells `.ds-table__status` (`is-read`), `.ds-table__num`, `.ds-table__last`, `.ds-table__mod`; inside the main cell `.ds-table__title`, `.ds-table__desc`, `.ds-table__meta`. End with a `.ds-table__foot` row.\n- `.ds-infobar`: the 10px line under the boards; `.ds-infobar__side` is right-aligned. `.ds-legend` with `.ds-legend__item` (`is-read`) and `.ds-legend__label` explains the status icons.\n- `.ds-post`: one message of a thread, a ruled block two columns wide. `.ds-post__head` is a pale strip with the date on the left and the post number on the right; `.ds-post__author` is the `--size-menu` cell in `--color-surface-alt` with the `.ds-post__name` (a quiet bold link), the rank and a `.ds-post__meta` line; `.ds-post__body` is the message on `--color-surface`, opening with a small bold `.ds-post__title` over a faint rule and optionally closing with a `.ds-post__sig`; `.ds-post__foot` is a `--color-surface-alt` row with the online badge on the left and the Quote, Edit and Delete links on the right. Stack posts in a `.ds-page__group`.\n- `.ds-list`: recent posts on the index and the thread review under the posting form, as one-line rows. `.ds-list__head` is a pale strip; each `.ds-list__item` (`is-alt`) is three cells: `.ds-list__main` with the `.ds-list__title`, `.ds-list__meta` (author) and `.ds-list__aside` (time).\n- `.ds-panel`: the information centre and any titled box. `.ds-panel__title` (`--bar` for the centred primary bar), `.ds-panel__sub` section strips, `.ds-panel__row` with a `.ds-panel__icon` cell and a `.ds-panel__body` (`--alt`), `.ds-panel__line` paragraphs.\n- `.ds-grid`: child boards two across in one ruled block. `.ds-grid__title` bar, `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with `.ds-grid__name`, `.ds-grid__meta` and a right-aligned `.ds-grid__count`.\n- `.ds-stat`: `.ds-stat` is the row: a ruled block with a `.ds-stat__title` strip, a `.ds-stat__icon` cell and four `.ds-stat__item` cells, each a bold `.ds-stat__value` followed on the same line by its `.ds-stat__label`. Never separate cards.\n- `.ds-tabs`: one segmented strip of `.ds-tabs__tab` cells closed by an empty `.ds-tabs__fill`; `is-current` takes the primary bar.\n- `.ds-badge`: a small square label. `.ds-badge--quiet`, The status variants `.ds-badge--success` (solved, online, approved), `.ds-badge--warning` (pending, awaiting) and `.ds-badge--danger` (locked, banned, overdue) are a pale tint of the status colour with body text and a 1px outline in that colour. `.ds-new` is bold text for a remark.\n- `.ds-sidebar`: the menu column of an inner page, one ruled block of `.ds-sidebar__block` groups: `.ds-sidebar__title` bar or `.ds-sidebar__sub` strip, then a `.ds-sidebar__list` of `.ds-sidebar__item` cells (`is-current`). Used inside `.ds-layout` with `.ds-layout__main`; never on the index.\n- `.ds-notice`: a left-aligned one-line box in the notice colour with a `.ds-notice__title`. `.ds-notice--error` is the error box.\n- `.ds-pagination`: joined cells in one ruled block: `.ds-pagination__label`, then `.ds-pagination__link` cells, `is-current` for the current page. It sits at the right of a `.ds-toolbar`, the row under a table or a thread that has the action button or the `.ds-buttons` thread tools on its left.\n- `.ds-dialog`: a message box in the page flow with a 3px dark outline: `.ds-dialog__title` bar, left-aligned `.ds-dialog__body` with `.ds-dialog__text`, and a `.ds-dialog__actions` strip with the buttons at the right. `.ds-dialog__backdrop` is a flat band. It never floats over the page: in the thread view it follows the post whose Delete link opened it.\n- `.ds-empty`: the single row of an empty block: an optional `.ds-empty__title` strip naming what is empty, then `.ds-empty__body` with `.ds-empty__text` on the left and one button on the right.\n- `.ds-footer`: a `.ds-footer__row` strip of `.ds-footer__link` items with `.ds-footer__sep` between them, then `.ds-footer__note`.\n\n## Never\n\n- `row-gap <= 1px`: rows are separated by a one-pixel rule and nothing more.\n- `block-gap <= 20px`: unrelated blocks are 18px apart, related ones 8px.\n- `content-width >= 90%`: the boards fill the viewport; there is no sidebar on the index.\n- `font-size <= 16px`: the wordmark and page heading are the largest text.\n- `font-size >= 10px`: 10px is the smallest size.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Verdana, Trebuchet MS for headings, a monospace for code.\n- `letter-spacing <= 1px`: headings are tracked by 1px and nothing by more.\n- `uppercase-text <= 0%`: nothing is transformed to uppercase.\n- `underlined-links >= 20%`: links in running text stay underlined even though titles are not.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow-blur <= 0px`: the only shadows are hard one-pixel bevels on controls; nothing is soft.\n- `text-shadow = none`: no text shadow in any reference.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 3px`: 1px everywhere, 3px on emphasised edges, the widest solid border measured.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new titled box from `.ds-panel`, a new row layout from `.ds-table` or `.ds-list`, a new menu from `.ds-sidebar`. Build it as a 1px `--color-border` outline on `--fill-panel` with `--space-1` of padding and gap, cover it completely with cells in the three surface colours, and give it a title in `--fill-bar` or a strip in `--color-surface-strong`. Keep text on the fills it already sits on in the specimen. Use tokens only: no raw colours or lengths, no new radius, shadow or transition, no font size outside the type tokens, `--space-4` to a related block and `--space-6` to an unrelated one. On the index, add full-width blocks; do not add a column.\n",
    "components.css": "/* Layout tokens (structure part). A full-width board index: a tall masthead\n   band, no sidebar on the index, one separate block per category. Column\n   widths, row heights and gaps measured on three board indexes captured\n   2002 to 2006. */\n:root {\n  --size-page: 100%;\n  --size-masthead: 76px;\n  --size-status: 30px;\n  --size-count: 62px;\n  --size-last: 170px;\n  --size-mod: 130px;\n  --size-row: 38px;\n  --size-bar: 26px;\n  --size-icon: 16px;\n  --size-login: 300px;\n  --size-menu: 180px;\n  --size-field: 240px;\n  --size-dialog: 440px;\n  --space-1: 1px;\n  --space-2: 2px;\n  --space-3: 4px;\n  --space-4: 8px;\n  --space-5: 12px;\n  --space-6: 18px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-5) var(--space-4);\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  background: var(--color-canvas);\n  border-radius: var(--radius-page);\n}\n.ds-page__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  padding: var(--space-5) var(--space-5) var(--space-6);\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/* The column of blocks inside a view, unrelated blocks --space-6 apart. */\n.ds-view__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n}\n/* A run of blocks that belong together sits closer than --space-6. */\n.ds-page__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n/* Small print, inside the sheet so it never sits on the page colour. */\n.ds-page__legal {\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  text-align: center;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\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.ds-block {\n  display: block;\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}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- nav: masthead band with a row of small buttons ---------- */\n.ds-nav {\n  display: block;\n}\n.ds-nav__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  gap: var(--space-5);\n  min-height: var(--size-masthead);\n  box-sizing: border-box;\n  padding: var(--space-4) var(--space-5) 0;\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__brand {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-2);\n  align-self: center;\n  padding: 0 0 var(--space-4);\n}\n/* The site's mark and name. The tile is dressed like the primary button, so\n   every palette and surface set reskins it. */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-4);\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.5);\n  height: calc(var(--text-display) * 1.5);\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) 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: 76%;\n  height: 76%;\n}\n.ds-brand__name {\n  color: var(--color-inverse-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-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n  display: block;\n  padding: var(--space-2) 0 0;\n  font-size: var(--text-small);\n}\n.ds-nav__menu {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\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.ds-nav__link {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-bottom: 0;\n  line-height: var(--line-heading);\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(--color-surface);\n  color: var(--color-heading);\n}\n/* The current view's button, and the forums button when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#index\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n.ds-page:has(#forum:target) .ds-nav__link[href=\"#forum\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n.ds-page:has(#thread:target) .ds-nav__link[href=\"#thread\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n.ds-page:has(#reply:target) .ds-nav__link[href=\"#reply\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n.ds-page:has(#usercp:target) .ds-nav__link[href=\"#usercp\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n.ds-page:has(#faq:target) .ds-nav__link[href=\"#faq\"] {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n/* The line under the band: who you are on the left, shortcuts on the right. */\n.ds-nav__sub {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: var(--space-3) var(--space-5);\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-small);\n}\n.ds-nav__user {\n  flex: 1 1 auto;\n  font-weight: var(--weight-bold);\n}\n.ds-nav__sublink {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n}\n.ds-nav__sublink:hover,\n.ds-nav__sublink.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- breadcrumb: an open line on a rule ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0 0 var(--space-3);\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\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.ds-breadcrumb__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-breadcrumb__sep {\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n.ds-breadcrumb__current {\n  color: var(--color-text);\n}\n\n/* ---------- hero: welcome box with the log-in cell ---------- */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-login);\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n}\n.ds-hero__title {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\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}\n.ds-hero__main {\n  padding: var(--space-4);\n  background: var(--color-surface);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-base);\n}\n.ds-hero__facts {\n  margin: 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-hero__action {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4);\n  background: var(--color-surface-alt);\n  font-size: var(--text-small);\n}\n.ds-hero__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* ---------- page header: title bar over a description row ---------- */\n.ds-page-header {\n  display: grid;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-page-header__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-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  text-shadow: var(--shadow-text);\n}\n.ds-page-header__row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-alt);\n}\n.ds-page-header__desc {\n  margin: 0;\n  font-size: var(--text-small);\n}\n.ds-page-header__action {\n  flex: none;\n}\n\n/* ---------- info line under a board ---------- */\n.ds-infobar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-5);\n  font-size: var(--text-small);\n}\n.ds-infobar__side {\n  text-align: right;\n}\n\n/* ---------- table: one block per category ---------- */\n.ds-table {\n  width: 100%;\n  box-sizing: border-box;\n  border-collapse: separate;\n  border-spacing: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n/* The category name: the primary bar across the top of the block. */\n.ds-table .ds-table__group td {\n  height: var(--size-bar);\n  padding: 0 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-h2);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n/* Column labels: a pale strip under the bar. */\n.ds-table th {\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: center;\n  white-space: nowrap;\n}\n.ds-table .ds-table__head--left {\n  text-align: left;\n}\n.ds-table td {\n  height: var(--size-row);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  font-size: var(--text-small);\n  vertical-align: middle;\n}\n.ds-table .ds-table__num,\n.ds-table .ds-table__last,\n.ds-table .ds-table__status {\n  background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n  width: var(--size-count);\n  font-size: var(--text-large);\n  text-align: center;\n  white-space: nowrap;\n}\n.ds-table .ds-table__last {\n  width: var(--size-last);\n  text-align: left;\n  white-space: nowrap;\n}\n.ds-table .ds-table__mod {\n  width: var(--size-mod);\n  text-align: center;\n}\n.ds-table .ds-table__status {\n  width: var(--size-status);\n  padding: var(--space-3);\n  text-align: center;\n  color: var(--color-accent);\n}\n.ds-table .ds-table__status.is-read {\n  color: var(--color-bar-alt);\n}\n.ds-table .ds-table__foot td {\n  height: var(--space-4);\n  padding: 0;\n  background: var(--fill-bar-alt);\n}\n.ds-table__title {\n  color: var(--color-link-quiet);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-table__desc {\n  display: block;\n  padding: var(--space-1) 0 0;\n}\n.ds-table__meta {\n  display: block;\n  padding: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n}\n\n/* ---------- panel: the information centre ---------- */\n.ds-panel {\n  display: grid;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\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-panel__title--bar {\n  justify-content: center;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-panel__sub {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n/* A section row: an icon cell and its text. */\n.ds-panel__row {\n  display: grid;\n  grid-template-columns: var(--size-status) minmax(0, 1fr);\n  gap: var(--space-1);\n}\n.ds-panel__icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--color-surface-alt);\n  color: var(--color-bar-alt);\n}\n.ds-panel__body {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  font-size: var(--text-small);\n}\n.ds-panel__body--alt {\n  background: var(--color-surface-alt);\n}\n.ds-panel__line {\n  margin: 0 0 var(--space-2);\n}\n\n/* ---------- grid: child boards, two across ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-grid__title {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) 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-h2);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n}\n.ds-grid__cell {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  column-gap: var(--space-5);\n  align-items: center;\n  min-height: var(--size-row);\n  box-sizing: border-box;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-fill-1);\n  border-radius: var(--radius-page);\n  font-size: var(--text-small);\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__name {\n  display: block;\n  color: var(--color-link-quiet);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\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}\n.ds-grid__meta {\n  display: block;\n  color: var(--color-text-muted);\n}\n.ds-grid__count {\n  text-align: right;\n  white-space: nowrap;\n}\n\n/* ---------- stats: figures in a sentence row beside an icon cell ---------- */\n.ds-stat {\n  display: grid;\n  grid-template-columns: var(--size-status) repeat(4, minmax(0, 1fr));\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-stat__title {\n  grid-column: 1 / -1;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-stat__icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--color-surface-alt);\n  color: var(--color-bar-alt);\n}\n.ds-stat__item {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  font-size: var(--text-small);\n}\n.ds-stat__value {\n  color: var(--color-text);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n}\n.ds-stat__label {\n  color: var(--color-text-muted);\n}\n\n/* ---------- tabs: one segmented strip ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__fill {\n  flex: 1 1 auto;\n  background: var(--fill-bar-alt);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-3) var(--space-5);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-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}\n\n/* ---------- badge and legend ---------- */\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-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-badge--quiet {\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n/* Status labels: a tint of the status colour over the cell surface, with body\n   text and the status colour as the outline, so they read under any palette. */\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) 30%, var(--color-surface));\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));\n  border-color: var(--color-warning);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));\n  border-color: var(--color-danger);\n}\n.ds-new {\n  color: var(--color-accent-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-legend {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-legend__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-accent);\n}\n.ds-legend__item.is-read {\n  color: var(--color-bar-alt);\n}\n.ds-legend__label {\n  color: var(--color-text);\n}\n\n/* ---------- inner pages: a menu column beside the working blocks ---------- */\n.ds-layout {\n  display: grid;\n  grid-template-columns: var(--size-menu) minmax(0, 1fr);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-layout__main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n\n/* ---------- sidebar: the menu of an inner page ---------- */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-sidebar__block {\n  display: grid;\n  gap: var(--space-1);\n}\n.ds-sidebar__title {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) 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-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n}\n.ds-sidebar__sub {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  font-size: var(--text-small);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-alt);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- list: one-line rows, newest first ---------- */\n.ds-list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-list__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-mod) var(--size-last);\n  gap: var(--space-1);\n}\n.ds-list__main,\n.ds-list__meta,\n.ds-list__aside {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  font-size: var(--text-small);\n}\n.ds-list__item.is-alt .ds-list__main {\n  background: var(--color-fill-3);\n}\n.ds-list__title {\n  color: var(--color-link-quiet);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-list__meta {\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n}\n.ds-list__aside {\n  background: var(--color-surface-alt);\n  white-space: nowrap;\n}\n\n/* ---------- post: one message of a thread, author cell on the left ---------- */\n.ds-post {\n  display: grid;\n  grid-template-columns: var(--size-menu) minmax(0, 1fr);\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-post__head,\n.ds-post__foot {\n  grid-column: 1 / -1;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-post__foot {\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  font-weight: var(--weight-body);\n}\n.ds-post__author {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-alt);\n  font-size: var(--text-small);\n}\n.ds-post__name {\n  display: block;\n  color: var(--color-link-quiet);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-post__name:hover,\n.ds-post__name.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-post__meta {\n  display: block;\n  padding: var(--space-4) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-post__body {\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-surface);\n  font-size: var(--text-base);\n}\n.ds-post__body p {\n  margin: 0 0 var(--space-4);\n}\n.ds-post__body .ds-post__title {\n  padding: 0 0 var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-post__body .ds-post__sig {\n  margin: 0;\n  padding: var(--space-3) 0 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\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: 0 0 var(--space-3);\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  color: var(--color-heading);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  color: var(--color-heading-alt);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  color: var(--color-text);\n  font-size: var(--text-h3);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-6);\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 hr {\n  height: 0;\n  margin: var(--space-4) 0;\n  border: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n  display: inline-block;\n  padding: var(--space-1) var(--space-4);\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  border-color: var(--color-input-border);\n  font-weight: var(--weight-body);\n}\n/* Destructive action: the error pair, error text on the error surface with\n   an error outline. It does not depend on the primary button's colours. */\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  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: grouped fields, label above the control ---------- */\n.ds-form {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-form__title {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) 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-h2);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n}\n.ds-form__body {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4) var(--space-5);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-surface);\n}\n.ds-form__row {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-2);\n}\n.ds-form__row--wide {\n  grid-column: 1 / -1;\n  align-items: stretch;\n}\n.ds-form__label {\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  color: var(--color-text-muted);\n}\n.ds-form__field {\n  font-size: var(--text-base);\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-1) var(--space-2);\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  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n}\n.ds-form__input--wide {\n  width: 100%;\n}\n.ds-form__input--auto {\n  width: auto;\n}\n.ds-form__input--short {\n  width: calc(var(--size-field) / 2);\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  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\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  justify-content: flex-end;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-strong);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n  margin: 0;\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);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-small);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-text);\n  border-color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__title {\n  color: var(--color-danger);\n}\n\n/* ---------- pagination: joined cells ---------- */\n.ds-pagination {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n}\n.ds-pagination__label {\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface);\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\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(--color-surface-alt);\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n/* The action or the thread tools on the left, page numbers on the right. */\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-5);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n  display: grid;\n  gap: var(--space-1);\n  width: var(--size-dialog);\n  max-width: 100%;\n  box-sizing: border-box;\n  margin: 0 auto;\n  padding: var(--space-1);\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-dialog__title {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) 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-h2);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n  padding: var(--space-5);\n  background: var(--color-surface);\n  font-size: var(--text-base);\n}\n.ds-dialog__text {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-strong);\n}\n.ds-dialog__backdrop {\n  padding: var(--space-5);\n  background: var(--color-overlay);\n}\n\n/* ---------- empty state: the single row of an empty block ---------- */\n.ds-empty {\n  display: grid;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-empty__title {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-bar);\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\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-empty__body {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-4);\n  background: var(--color-surface);\n  font-size: var(--text-base);\n}\n.ds-empty__text {\n  margin: 0;\n}\n\n/* ---------- footer: a strip of links, then the small print ---------- */\n.ds-footer {\n  font-size: var(--text-small);\n  text-align: center;\n}\n.ds-footer__row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  list-style: none;\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}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__sep {\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__note {\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  color: var(--color-text-muted);\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: full-width board index 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-folder\" viewBox=\"0 0 16 16\">\n    <path d=\"M1 3h5l2 2h7v9H1z\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol id=\"i-closed\" viewBox=\"0 0 16 16\">\n    <path d=\"M1.5 3.5h4.3l2 2h6.7v8h-13z\" fill=\"none\" stroke=\"currentColor\"/>\n    <path d=\"M6 8h4v3H6z\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol id=\"i-info\" viewBox=\"0 0 16 16\">\n    <path d=\"M2 13V7h3v6zM6.5 13V3h3v10zM11 13V9h3v4z\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol id=\"i-people\" viewBox=\"0 0 16 16\">\n    <path d=\"M5 3h3v3H5zM3 7h7v6H3zM10 5h3v3h-3zM11 9h3v4h-3z\" fill=\"currentColor\"/>\n  </symbol>\n</svg>\n\n<div class=\"ds-page__frame\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__head\">\n      <div class=\"ds-nav__brand\">\n        <a class=\"ds-brand\" data-component=\"brand\" href=\"#\">\n          <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" 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__name\">chronoskin</span>\n        </a>\n        <span class=\"ds-nav__tagline\">Layouts, rolling stock and wiring in every scale</span>\n      </div>\n      <ul class=\"ds-nav__menu\">\n        <li><a class=\"ds-nav__link\" href=\"#index\">forums</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#forum\">threads</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#thread\">show thread</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#reply\">post reply</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#usercp\">user cp</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#faq\">f.a.q.</a></li>\n      </ul>\n    </div>\n    <ul class=\"ds-nav__sub\">\n      <li class=\"ds-nav__user\">Welcome to the chronoskin forums. The time now is 08:22 PM.</li>\n      <li><a class=\"ds-nav__sublink\" href=\"#forum\">Today's active threads</a></li>\n      <li><a class=\"ds-nav__sublink\" href=\"#thread\">New posts</a></li>\n      <li><a class=\"ds-nav__sublink\" href=\"#usercp\">Subscribed threads</a></li>\n    </ul>\n  </header>\n\n  <div class=\"ds-page__body\">\n\n    <!-- View 1, home: the board index. One column, no sidebar. -->\n    <section class=\"ds-view ds-view--home\" id=\"index\">\n    <div class=\"ds-view__body\">\n\n    <section class=\"ds-hero\" data-component=\"hero\">\n      <h1 class=\"ds-hero__title\">Welcome to the chronoskin forums</h1>\n      <div class=\"ds-hero__main\">\n        <p class=\"ds-hero__lead\">If this is your first visit, have a look at the <a class=\"ds-link\" href=\"#faq\">frequently asked questions</a>. Anyone can read the forums; you need to <a class=\"ds-link\" href=\"#faq\">register</a> before you can post or see attached track plans.</p>\n        <p class=\"ds-hero__facts\">Members: 9,264. Threads: 38,117. Posts: 402,950. Welcome to our newest member, <a class=\"ds-link\" href=\"#usercp\">branchline_bea</a>.</p>\n      </div>\n      <form class=\"ds-hero__action\" action=\"#usercp\">\n        <div class=\"ds-hero__row\">\n          <input class=\"ds-form__input ds-form__input--short\" type=\"text\" value=\"User name\" aria-label=\"User name\">\n          <input class=\"ds-form__input ds-form__input--short\" type=\"text\" value=\"Password\" aria-label=\"Password\">\n        </div>\n        <div class=\"ds-hero__row\">\n          <a class=\"ds-button\" href=\"#usercp\">Log in</a>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Remember me</label>\n        </div>\n        <span>Not a member yet? <a class=\"ds-link ds-link--strong\" href=\"#faq\">Register now</a></span>\n      </form>\n    </section>\n\n    <div class=\"ds-page__group\">\n\n      <table class=\"ds-table\">\n        <thead>\n          <tr class=\"ds-table__group\"><td colspan=\"6\">Building the layout</td></tr>\n          <tr>\n            <th scope=\"col\"></th>\n            <th class=\"ds-table__head--left\" scope=\"col\">Forum</th>\n            <th scope=\"col\">Posts</th>\n            <th scope=\"col\">Threads</th>\n            <th class=\"ds-table__head--left\" scope=\"col\">Last post</th>\n            <th scope=\"col\">Moderator</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td class=\"ds-table__status\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"New posts\"><use href=\"#i-folder\"/></svg></td>\n            <td><a class=\"ds-table__title\" href=\"#forum\">Baseboards and track laying</a>\n              <span class=\"ds-table__desc\">Frames, risers, underlay, flexible track and getting curves to flow.</span>\n              <span class=\"ds-table__meta\">Subforums: <a class=\"ds-link\" href=\"#forum\">Helix and gradients</a>, <a class=\"ds-link\" href=\"#forum\">Hand-built points</a></span></td>\n            <td class=\"ds-table__num\">61,204</td>\n            <td class=\"ds-table__num\">5,830</td>\n            <td class=\"ds-table__last\">22 Sep 2004, 08:15 PM <span class=\"ds-block\">in <a class=\"ds-link\" href=\"#thread\">Cork or foam underlay?</a></span> <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">gantry_joe</a></span></td>\n            <td class=\"ds-table__mod\"><a class=\"ds-link\" href=\"#usercp\">oswin_r</a>, <a class=\"ds-link\" href=\"#usercp\">mabel.t</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__status\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"New posts\"><use href=\"#i-folder\"/></svg></td>\n            <td><a class=\"ds-table__title\" href=\"#forum\">Wiring and control</a>\n              <span class=\"ds-table__desc\">Bus wires, point motors, block detection and digital command control. Say which system you run.</span></td>\n            <td class=\"ds-table__num\">88,471</td>\n            <td class=\"ds-table__num\">9,312</td>\n            <td class=\"ds-table__last\">22 Sep 2004, 07:52 PM <span class=\"ds-block\">in <a class=\"ds-link\" href=\"#thread\">Short on the reverse loop</a></span> <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">fernhill</a></span></td>\n            <td class=\"ds-table__mod\"><a class=\"ds-link\" href=\"#usercp\">oswin_r</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n            <td><a class=\"ds-table__title\" href=\"#forum\">Scenery and structures</a>\n              <span class=\"ds-table__desc\">Hills, water, trees, kit buildings and scratch building.</span></td>\n            <td class=\"ds-table__num\">47,039</td>\n            <td class=\"ds-table__num\">4,105</td>\n            <td class=\"ds-table__last\">21 Sep 2004, 10:31 PM <span class=\"ds-block\">in <a class=\"ds-link\" href=\"#thread\">Static grass, first try</a></span> <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">wren_d</a></span></td>\n            <td class=\"ds-table__mod\"><a class=\"ds-link\" href=\"#usercp\">mabel.t</a></td>\n          </tr>\n          <tr class=\"ds-table__foot\"><td colspan=\"6\"></td></tr>\n        </tbody>\n      </table>\n\n      <table class=\"ds-table\">\n        <thead>\n          <tr class=\"ds-table__group\"><td colspan=\"6\">The club room</td></tr>\n          <tr>\n            <th scope=\"col\"></th>\n            <th class=\"ds-table__head--left\" scope=\"col\">Forum</th>\n            <th scope=\"col\">Posts</th>\n            <th scope=\"col\">Threads</th>\n            <th class=\"ds-table__head--left\" scope=\"col\">Last post</th>\n            <th scope=\"col\">Moderator</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n            <td><a class=\"ds-table__title\" href=\"#forum\">New members</a>\n              <span class=\"ds-table__desc\">Introduce yourself and your layout, however small.</span></td>\n            <td class=\"ds-table__num\">12,660</td>\n            <td class=\"ds-table__num\">2,018</td>\n            <td class=\"ds-table__last\">20 Sep 2004, 05:09 PM <span class=\"ds-block\">in <a class=\"ds-link\" href=\"#thread\">Hello from a shelf layout</a></span> <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">branchline_bea</a></span></td>\n            <td class=\"ds-table__mod\"><a class=\"ds-link\" href=\"#usercp\">hale_p</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"Forum is closed\"><use href=\"#i-closed\"/></svg></td>\n            <td><a class=\"ds-table__title\" href=\"#forum\">Exhibition diary 2003</a>\n              <span class=\"ds-table__desc\">Closed. Reports and photographs from last year's shows.</span></td>\n            <td class=\"ds-table__num\">3,377</td>\n            <td class=\"ds-table__num\">164</td>\n            <td class=\"ds-table__last\">28 Dec 2003, 11:40 AM <span class=\"ds-block\">in <a class=\"ds-link\" href=\"#thread\">Thank you to the stewards</a></span> <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">hale_p</a></span></td>\n            <td class=\"ds-table__mod\"><a class=\"ds-link\" href=\"#usercp\">hale_p</a></td>\n          </tr>\n          <tr class=\"ds-table__foot\"><td colspan=\"6\"></td></tr>\n        </tbody>\n      </table>\n\n      <div class=\"ds-infobar\">\n        <span>All times are GMT. The time now is 08:22 PM.</span>\n        <ul class=\"ds-legend\">\n          <li class=\"ds-legend__item\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-folder\"/></svg><span class=\"ds-legend__label\">New posts</span></li>\n          <li class=\"ds-legend__item is-read\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-folder\"/></svg><span class=\"ds-legend__label\">No new posts</span></li>\n          <li class=\"ds-legend__item is-read\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-closed\"/></svg><span class=\"ds-legend__label\">A closed forum</span></li>\n        </ul>\n        <span class=\"ds-infobar__side\"><a class=\"ds-link\" href=\"#faq\">Forum rules</a> | <a class=\"ds-link\" href=\"#index\">Mark all forums read</a></span>\n      </div>\n\n    </div>\n\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <h2 class=\"ds-grid__title\">Scale and gauge forums</h2>\n      <div class=\"ds-grid__cell\">\n        <span><a class=\"ds-grid__name\" href=\"#forum\">N and smaller</a>\n          <span class=\"ds-grid__meta\">Last post today, 07:44 PM</span></span>\n        <span class=\"ds-grid__count\">2,940 threads <span class=\"ds-block\">31,208 posts</span></span>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--2\">\n        <span><a class=\"ds-grid__name\" href=\"#forum\">HO and OO</a>\n          <span class=\"ds-grid__meta\">Last post today, 08:02 PM</span></span>\n        <span class=\"ds-grid__count\">8,115 threads <span class=\"ds-block\">96,733 posts</span></span>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--3\">\n        <span><a class=\"ds-grid__name\" href=\"#forum\">O gauge and tinplate</a>\n          <span class=\"ds-grid__meta\">Last post 21 Sep 2004</span></span>\n        <span class=\"ds-grid__count\">1,206 threads <span class=\"ds-block\">10,451 posts</span></span>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--4\">\n        <span><a class=\"ds-grid__name\" href=\"#forum\">Narrow gauge and garden lines</a>\n          <span class=\"ds-grid__meta\">Last post 19 Sep 2004</span></span>\n        <span class=\"ds-grid__count\">1,588 threads <span class=\"ds-block\">14,027 posts</span></span>\n      </div>\n    </div>\n\n    <div class=\"ds-page__group\">\n\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <h2 class=\"ds-panel__title ds-panel__title--bar\">chronoskin information centre</h2>\n        <h3 class=\"ds-panel__sub\">Currently active users: 73</h3>\n        <div class=\"ds-panel__row\">\n          <div class=\"ds-panel__icon\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-people\"/></svg></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__line\">There are currently 29 members and 44 guests on the boards. Most users ever online was 388 on 11 Jan 2004 at 09:14 PM.</p>\n            <p class=\"ds-panel__line\"><a class=\"ds-link\" href=\"#usercp\">branchline_bea</a>, <a class=\"ds-link\" href=\"#usercp\">cutting_ed</a>, <a class=\"ds-link\" href=\"#usercp\">fernhill</a>, <a class=\"ds-link\" href=\"#usercp\">gantry_joe</a>, <a class=\"ds-link ds-link--strong\" href=\"#usercp\">hale_p</a>, <a class=\"ds-link\" href=\"#usercp\">junction_k</a>, <a class=\"ds-link ds-link--strong\" href=\"#usercp\">mabel.t</a>, <a class=\"ds-link\" href=\"#usercp\">northbank</a>, <a class=\"ds-link ds-link--strong\" href=\"#usercp\">oswin_r</a>, <a class=\"ds-link\" href=\"#usercp\">sidings_sam</a>, <a class=\"ds-link\" href=\"#usercp\">turntable_ty</a>, <a class=\"ds-link\" href=\"#usercp\">wren_d</a></p>\n          </div>\n        </div>\n        <h3 class=\"ds-panel__sub\">Forthcoming calendar events</h3>\n        <div class=\"ds-panel__row\">\n          <div class=\"ds-panel__icon\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-info\"/></svg></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__line\"><span class=\"ds-new\">This weekend:</span> <a class=\"ds-link\" href=\"#thread\">Autumn running day at the club room</a>, 25 Sep 2004. <a class=\"ds-link\" href=\"#thread\">Committee meeting</a>, 02 Oct 2004.</p>\n          </div>\n        </div>\n      </section>\n\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <h3 class=\"ds-stat__title\">Board statistics</h3>\n        <div class=\"ds-stat__icon\"><svg class=\"ds-icon\" aria-hidden=\"true\"><use href=\"#i-info\"/></svg></div>\n        <div class=\"ds-stat__item\"><span class=\"ds-stat__value\">402,950</span> <span class=\"ds-stat__label\">posts in total</span></div>\n        <div class=\"ds-stat__item\"><span class=\"ds-stat__value\">38,117</span> <span class=\"ds-stat__label\">threads</span></div>\n        <div class=\"ds-stat__item\"><span class=\"ds-stat__value\">9,264</span> <span class=\"ds-stat__label\">registered members</span></div>\n        <div class=\"ds-stat__item\"><span class=\"ds-stat__value\">388</span> <span class=\"ds-stat__label\">most online at once</span></div>\n      </div>\n\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__head\"><span>Recent posts</span> <a class=\"ds-link\" href=\"#forum\">View the 50 most recent</a></li>\n        <li class=\"ds-list__item\">\n          <div class=\"ds-list__main\"><a class=\"ds-list__title\" href=\"#thread\">Re: Cork or foam underlay?</a> <span class=\"ds-badge\" data-component=\"badge\">New</span></div>\n          <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">gantry_joe</a></div>\n          <div class=\"ds-list__aside\">Today at 08:15 PM</div>\n        </li>\n        <li class=\"ds-list__item is-alt\">\n          <div class=\"ds-list__main\"><a class=\"ds-list__title\" href=\"#thread\">Re: Short on the reverse loop</a> <span class=\"ds-badge ds-badge--quiet\">Sticky</span></div>\n          <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">fernhill</a></div>\n          <div class=\"ds-list__aside\">Today at 07:52 PM</div>\n        </li>\n        <li class=\"ds-list__item\">\n          <div class=\"ds-list__main\"><a class=\"ds-list__title\" href=\"#thread\">Weathering a rake of mineral wagons</a></div>\n          <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">sidings_sam</a></div>\n          <div class=\"ds-list__aside\">Today at 07:44 PM</div>\n        </li>\n        <li class=\"ds-list__item is-alt\">\n          <div class=\"ds-list__main\"><a class=\"ds-list__title\" href=\"#thread\">Re: Static grass, first try</a></div>\n          <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">wren_d</a></div>\n          <div class=\"ds-list__aside\">Yesterday at 10:31 PM</div>\n        </li>\n      </ul>\n\n    </div>\n    </div>\n    </section>\n\n    <!-- View 2: one forum and its threads. No hero; a menu column on the left. -->\n    <section class=\"ds-view\" id=\"forum\">\n    <div class=\"ds-view__body\">\n\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">chronoskin</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">Building the layout</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li class=\"ds-breadcrumb__current\">Wiring and control</li>\n    </ol>\n\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <h1 class=\"ds-page-header__title\">Wiring and control</h1>\n      <div class=\"ds-page-header__row\">\n        <p class=\"ds-page-header__desc\">Bus wires, point motors, block detection and digital command control. Moderator: <a class=\"ds-link\" href=\"#usercp\">oswin_r</a></p>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#reply\">New thread</a></div>\n      </div>\n    </div>\n\n    <p class=\"ds-notice\" data-component=\"notice\"><span class=\"ds-notice__title\">Announcement:</span> attachments are switched off until Friday while the photo store is enlarged. <a class=\"ds-link\" href=\"#thread\">Details in the club room</a>.</p>\n\n    <div class=\"ds-layout\">\n\n      <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Forum menu</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--quiet\" href=\"#forum\">All threads</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Subscribed threads</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Threads you started</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#reply\">Start a new thread</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Rules of this forum</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h3 class=\"ds-sidebar__sub\">Jump to</h3>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">Baseboards and track laying</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">Scenery and structures</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">New members</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#index\">All forums</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h3 class=\"ds-sidebar__sub\">Reading this forum</h3>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\">14 members and 9 guests</li>\n            <li class=\"ds-sidebar__item\">Moderator: <a class=\"ds-link\" href=\"#usercp\">oswin_r</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h3 class=\"ds-sidebar__sub\">Forum tools</h3>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">Mark this forum read</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Subscribe to this forum</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">What the icons mean</a></li>\n          </ul>\n        </div>\n      </aside>\n\n      <div class=\"ds-layout__main\">\n\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#forum\" aria-current=\"true\">All threads</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#forum\">Unanswered</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#forum\">Answered</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#forum\">Polls</a></li>\n          <li class=\"ds-tabs__fill\" aria-hidden=\"true\"></li>\n        </ul>\n\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr class=\"ds-table__group\"><td colspan=\"5\">Threads in forum: Wiring and control</td></tr>\n            <tr>\n              <th scope=\"col\"></th>\n              <th class=\"ds-table__head--left\" scope=\"col\">Thread</th>\n              <th scope=\"col\">Replies</th>\n              <th scope=\"col\">Views</th>\n              <th class=\"ds-table__head--left\" scope=\"col\">Last post</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"ds-table__status\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"New posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Short on the reverse loop</a> <span class=\"ds-badge\">New</span>\n                <span class=\"ds-table__meta\">Started by <a class=\"ds-link\" href=\"#usercp\">fernhill</a></span></td>\n              <td class=\"ds-table__num\">26</td>\n              <td class=\"ds-table__num\">1,530</td>\n              <td class=\"ds-table__last\">Today, 07:52 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">fernhill</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Which wire gauge for a 6 metre bus?</a> <span class=\"ds-badge ds-badge--success\">Answered</span>\n                <span class=\"ds-table__meta\">Started by <a class=\"ds-link\" href=\"#usercp\">junction_k</a></span></td>\n              <td class=\"ds-table__num\">12</td>\n              <td class=\"ds-table__num\">804</td>\n              <td class=\"ds-table__last\">Today, 04:18 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">oswin_r</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Point motor buzzes after throwing</a> <span class=\"ds-badge ds-badge--warning\">Awaiting reply</span>\n                <span class=\"ds-table__meta\">Started by <a class=\"ds-link\" href=\"#usercp\">turntable_ty</a></span></td>\n              <td class=\"ds-table__num\">5</td>\n              <td class=\"ds-table__num\">231</td>\n              <td class=\"ds-table__last\">21 Sep 2004, 09:03 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">turntable_ty</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"Thread is closed\"><use href=\"#i-closed\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Mains safety: read this first</a> <span class=\"ds-badge ds-badge--danger\">Closed</span>\n                <span class=\"ds-table__meta\">Started by <a class=\"ds-link\" href=\"#usercp\">oswin_r</a></span></td>\n              <td class=\"ds-table__num\">0</td>\n              <td class=\"ds-table__num\">7,942</td>\n              <td class=\"ds-table__last\">04 Jan 2004, 10:00 AM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">oswin_r</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Labelling droppers under the board</a>\n                <span class=\"ds-table__meta\">Started by <a class=\"ds-link\" href=\"#usercp\">northbank</a></span></td>\n              <td class=\"ds-table__num\">9</td>\n              <td class=\"ds-table__num\">412</td>\n              <td class=\"ds-table__last\">19 Sep 2004, 01:27 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">cutting_ed</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Feeding a twelve road fiddle yard</a>\n                <span class=\"ds-table__meta\">Started by <a class=\"ds-link\" href=\"#usercp\">sidings_sam</a></span></td>\n              <td class=\"ds-table__num\">17</td>\n              <td class=\"ds-table__num\">689</td>\n              <td class=\"ds-table__last\">18 Sep 2004, 08:40 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">gantry_joe</a></span></td>\n            </tr>\n            <tr class=\"ds-table__foot\"><td colspan=\"5\"></td></tr>\n          </tbody>\n        </table>\n\n        <div class=\"ds-toolbar\">\n          <a class=\"ds-button\" href=\"#reply\">New thread</a>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li class=\"ds-pagination__label\">Page 2 of 31</li>\n            <li><a class=\"ds-pagination__link\" href=\"#forum\">&lt; Prev</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#forum\">1</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#forum\" aria-current=\"page\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#forum\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#forum\">4</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#forum\">Next &gt;</a></li>\n          </ul>\n        </div>\n\n      </div>\n    </div>\n\n    </div>\n    </section>\n\n    <!-- View 3: a thread. Full width; each post has its own author column. -->\n    <section class=\"ds-view\" id=\"thread\">\n    <div class=\"ds-view__body\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">chronoskin</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">Building the layout</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#forum\">Wiring and control</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li class=\"ds-breadcrumb__current\">Short on the reverse loop</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <h1 class=\"ds-page-header__title\">Short on the reverse loop</h1>\n      <div class=\"ds-page-header__row\">\n        <p class=\"ds-page-header__desc\">26 replies, 1,530 views. Started by <a class=\"ds-link\" href=\"#usercp\">fernhill</a> on 14 Sep 2004. Page 3 of 3.</p>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#reply\">Post reply</a></div>\n      </div>\n    </div>\n\n    <div class=\"ds-page__group\">\n\n      <article class=\"ds-post\">\n        <div class=\"ds-post__head\"><span>22 Sep 2004, 06:10 PM</span> <a class=\"ds-link ds-link--quiet\" href=\"#thread\">#25</a></div>\n        <div class=\"ds-post__author\">\n          <a class=\"ds-post__name\" href=\"#usercp\">oswin_r</a>\n          <span class=\"ds-block\">Moderator</span>\n          <span class=\"ds-post__meta\">Join date: Feb 2002 <span class=\"ds-block\">Posts: 6,311</span></span>\n        </div>\n        <div class=\"ds-post__body\">\n          <p class=\"ds-post__title\">Re: Short on the reverse loop</p>\n          <p>A loop needs both rails gapped at both ends, and the gapped section has to be longer than your longest train with metal wheels or lit coaches. If only one end is gapped the controller sees a dead short the moment the points are set for the return.</p>\n          <p>Measure the section before you cut anything else. On a 6 metre bus I would also check the feed to the loop comes from the reversing module and not from the main bus.</p>\n        </div>\n        <div class=\"ds-post__foot\"><span class=\"ds-badge ds-badge--success\">Online</span> <span><a class=\"ds-link\" href=\"#reply\">Quote</a> | <a class=\"ds-link\" href=\"#reply\">Reply</a></span></div>\n      </article>\n\n      <article class=\"ds-post\">\n        <div class=\"ds-post__head\"><span>22 Sep 2004, 07:05 PM</span> <a class=\"ds-link ds-link--quiet\" href=\"#thread\">#26</a></div>\n        <div class=\"ds-post__author\">\n          <a class=\"ds-post__name\" href=\"#usercp\">junction_k</a>\n          <span class=\"ds-block\">Member</span>\n          <span class=\"ds-post__meta\">Join date: Nov 2003 <span class=\"ds-block\">Posts: 418</span></span>\n        </div>\n        <div class=\"ds-post__body\">\n          <p class=\"ds-post__title\">Re: Short on the reverse loop</p>\n          <p>Same trouble here last winter. In my case the frog of the entry point was fed from the wrong side of the gap, so it shorted only when the blades were thrown. A meter across the two gaps with the power off will tell you in a minute.</p>\n        </div>\n        <div class=\"ds-post__foot\"><span class=\"ds-badge ds-badge--quiet\">Offline</span> <span><a class=\"ds-link\" href=\"#reply\">Quote</a> | <a class=\"ds-link\" href=\"#reply\">Reply</a></span></div>\n      </article>\n\n      <article class=\"ds-post\">\n        <div class=\"ds-post__head\"><span>22 Sep 2004, 07:52 PM</span> <a class=\"ds-link ds-link--quiet\" href=\"#thread\">#27</a></div>\n        <div class=\"ds-post__author\">\n          <a class=\"ds-post__name\" href=\"#usercp\">fernhill</a>\n          <span class=\"ds-block\">Senior member</span>\n          <span class=\"ds-post__meta\">Join date: Mar 2003 <span class=\"ds-block\">Posts: 1,204</span></span>\n        </div>\n        <div class=\"ds-post__body\">\n          <p class=\"ds-post__title\">Re: Short on the reverse loop <span class=\"ds-badge\">New</span></p>\n          <p>Both rails of the loop are gapped now, and the short only shows when a metal-wheeled wagon bridges the second gap. The section is 1.4 metres, the longest train 1.9, so that is the answer. Thank you both.</p>\n          <p class=\"ds-post__sig\">OO, digital, a loft and not enough evenings.</p>\n        </div>\n        <div class=\"ds-post__foot\"><span class=\"ds-badge ds-badge--success\">Online</span> <span><a class=\"ds-link\" href=\"#reply\">Quote</a> | <a class=\"ds-link\" href=\"#reply\">Edit</a> | <a class=\"ds-link\" href=\"#thread\">Delete</a></span></div>\n      </article>\n\n      <!-- What the Delete link of post #27 opens: a message box in the flow. -->\n      <div class=\"ds-dialog__backdrop\">\n        <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"d-title\">\n          <h2 class=\"ds-dialog__title\" id=\"d-title\">Delete post</h2>\n          <div class=\"ds-dialog__body\">\n            <p class=\"ds-dialog__text\">You are about to delete post #27 from the thread \"Short on the reverse loop\". This cannot be undone.</p>\n          </div>\n          <div class=\"ds-dialog__actions\">\n            <a class=\"ds-button ds-button--danger\" href=\"#forum\">Delete post</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#thread\">Cancel</a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-toolbar\">\n        <div class=\"ds-buttons\" data-component=\"buttons\">\n          <a class=\"ds-button\" href=\"#reply\">Post reply</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#usercp\">Subscribe to this thread</a>\n          <a class=\"ds-button ds-button--danger\" href=\"#forum\">Delete thread</a>\n          <button class=\"ds-button\" type=\"button\" disabled>Close thread</button>\n        </div>\n        <ul class=\"ds-pagination\">\n          <li class=\"ds-pagination__label\">Page 3 of 3</li>\n          <li><a class=\"ds-pagination__link\" href=\"#thread\">&lt; Prev</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#thread\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#thread\">2</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#thread\" aria-current=\"page\">3</a></li>\n        </ul>\n      </div>\n\n    </div>\n\n    </div>\n    </section>\n\n    <!-- View 4: the posting form. Full width. -->\n    <section class=\"ds-view\" id=\"reply\">\n    <div class=\"ds-view__body\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">chronoskin</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#forum\">Wiring and control</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#thread\">Short on the reverse loop</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li class=\"ds-breadcrumb__current\">Post reply</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <h1 class=\"ds-page-header__title\">Post reply</h1>\n      <div class=\"ds-page-header__row\">\n        <p class=\"ds-page-header__desc\">Thread: <a class=\"ds-link\" href=\"#thread\">Short on the reverse loop</a>. Logged in as <a class=\"ds-link\" href=\"#usercp\">fernhill</a>. Please read the <a class=\"ds-link\" href=\"#faq\">forum rules</a> before posting.</p>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#thread\">Back to thread</a></div>\n      </div>\n    </div>\n\n    <div class=\"ds-page__group\">\n\n      <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n        <span class=\"ds-notice__title\">The following error occurred:</span> the e-mail address for notifications is not complete. Your message has not been posted yet.\n      </div>\n\n      <form class=\"ds-form\" data-component=\"form\" action=\"#thread\">\n        <h2 class=\"ds-form__title\">Your reply</h2>\n        <div class=\"ds-form__body\">\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-title\">Title</label>\n            <input class=\"ds-form__input\" id=\"f-title\" type=\"text\" value=\"Re: Short on the reverse loop\">\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-mail\">E-mail for notifications</label>\n            <input class=\"ds-form__input is-invalid\" id=\"f-mail\" type=\"text\" value=\"fernhill@chronoskin\" aria-invalid=\"true\">\n            <span class=\"ds-form__error\">Please enter a complete e-mail address.</span>\n          </div>\n          <div class=\"ds-form__row ds-form__row--wide\">\n            <label class=\"ds-form__label\" for=\"f-body\">Message <span class=\"ds-form__hint\">(forum code is on, smilies are off)</span></label>\n            <textarea class=\"ds-form__input ds-form__input--wide\" id=\"f-body\" rows=\"7\">Lengthened the gapped section to 2.1 metres last night and ran the longest train round a dozen times without a single trip.\n\nFor anyone finding this later: measure the train, not the loop.</textarea>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-sub\">Subscription</label>\n            <select class=\"ds-form__input ds-form__input--auto\" id=\"f-sub\">\n              <option>Do not subscribe</option>\n              <option>Instant e-mail notification</option>\n              <option>Weekly digest</option>\n            </select>\n          </div>\n          <div class=\"ds-form__row\">\n            <span class=\"ds-form__label\">Options</span>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Show my signature</label>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> Mark this thread as answered</label>\n          </div>\n        </div>\n        <div class=\"ds-form__actions\">\n          <a class=\"ds-button\" href=\"#thread\">Submit reply</a>\n          <button class=\"ds-button ds-button--secondary\" type=\"button\">Preview</button>\n        </div>\n      </form>\n\n    </div>\n\n    <ul class=\"ds-list\">\n      <li class=\"ds-list__head\"><span>Thread review, newest first</span> <a class=\"ds-link\" href=\"#thread\">Show all 27 posts</a></li>\n      <li class=\"ds-list__item\">\n        <div class=\"ds-list__main\">Both rails of the loop are gapped now, and the short only shows when a metal-wheeled wagon bridges the second gap.</div>\n        <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">fernhill</a></div>\n        <div class=\"ds-list__aside\">Today at 07:52 PM</div>\n      </li>\n      <li class=\"ds-list__item is-alt\">\n        <div class=\"ds-list__main\">In my case the frog of the entry point was fed from the wrong side of the gap, so it shorted only when the blades were thrown.</div>\n        <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">junction_k</a></div>\n        <div class=\"ds-list__aside\">Today at 07:05 PM</div>\n      </li>\n      <li class=\"ds-list__item\">\n        <div class=\"ds-list__main\">A loop needs both rails gapped at both ends, and the gapped section has to be longer than your longest train.</div>\n        <div class=\"ds-list__meta\">by <a class=\"ds-link\" href=\"#usercp\">oswin_r</a></div>\n        <div class=\"ds-list__aside\">Today at 06:10 PM</div>\n      </li>\n    </ul>\n\n    </div>\n    </section>\n\n    <!-- View 5: the user control panel. Menu column on the left. -->\n    <section class=\"ds-view\" id=\"usercp\">\n    <div class=\"ds-view__body\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">chronoskin</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li class=\"ds-breadcrumb__current\">User control panel</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <h1 class=\"ds-page-header__title\">User control panel</h1>\n      <div class=\"ds-page-header__row\">\n        <p class=\"ds-page-header__desc\">Logged in as fernhill, senior member since March 2003. You last visited 21 Sep 2004 at 06:48 PM.</p>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#index\">Log out</a></div>\n      </div>\n    </div>\n\n    <div class=\"ds-layout\">\n\n      <aside class=\"ds-sidebar\">\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Control panel</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--quiet\" href=\"#usercp\">Subscribed threads</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">Subscribed forums</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">Threads you started</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h3 class=\"ds-sidebar__sub\">Your profile</h3>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Edit profile</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Edit signature</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">E-mail and password</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h3 class=\"ds-sidebar__sub\">Private messages</h3>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Inbox</a> (0 unread)</li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Sent items</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#reply\">Write a message</a></li>\n          </ul>\n        </div>\n      </aside>\n\n      <div class=\"ds-layout__main\">\n\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <h2 class=\"ds-empty__title\">New posts in subscribed threads</h2>\n          <div class=\"ds-empty__body\">\n            <p class=\"ds-empty__text\">There are no posts in your subscribed threads newer than your last visit.</p>\n            <a class=\"ds-button\" href=\"#forum\">Show all threads</a>\n          </div>\n        </div>\n\n        <table class=\"ds-table\">\n          <thead>\n            <tr class=\"ds-table__group\"><td colspan=\"5\">Subscribed threads</td></tr>\n            <tr>\n              <th scope=\"col\"></th>\n              <th class=\"ds-table__head--left\" scope=\"col\">Thread</th>\n              <th scope=\"col\">Replies</th>\n              <th scope=\"col\">Views</th>\n              <th class=\"ds-table__head--left\" scope=\"col\">Last post</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Short on the reverse loop</a>\n                <span class=\"ds-table__meta\">in <a class=\"ds-link\" href=\"#forum\">Wiring and control</a>, instant e-mail notification</span></td>\n              <td class=\"ds-table__num\">26</td>\n              <td class=\"ds-table__num\">1,530</td>\n              <td class=\"ds-table__last\">Today, 07:52 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">fernhill</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Cork or foam underlay?</a>\n                <span class=\"ds-table__meta\">in <a class=\"ds-link\" href=\"#forum\">Baseboards and track laying</a>, weekly digest</span></td>\n              <td class=\"ds-table__num\">41</td>\n              <td class=\"ds-table__num\">2,206</td>\n              <td class=\"ds-table__last\">21 Sep 2004, 08:15 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">gantry_joe</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"Thread is closed\"><use href=\"#i-closed\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Mains safety: read this first</a>\n                <span class=\"ds-table__meta\">in <a class=\"ds-link\" href=\"#forum\">Wiring and control</a>, no notification</span></td>\n              <td class=\"ds-table__num\">0</td>\n              <td class=\"ds-table__num\">7,942</td>\n              <td class=\"ds-table__last\">04 Jan 2004, 10:00 AM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">oswin_r</a></span></td>\n            </tr>\n            <tr>\n              <td class=\"ds-table__status is-read\"><svg class=\"ds-icon\" role=\"img\" aria-label=\"No new posts\"><use href=\"#i-folder\"/></svg></td>\n              <td><a class=\"ds-table__title\" href=\"#thread\">Static grass, first try</a>\n                <span class=\"ds-table__meta\">in <a class=\"ds-link\" href=\"#forum\">Scenery and structures</a>, no notification</span></td>\n              <td class=\"ds-table__num\">33</td>\n              <td class=\"ds-table__num\">1,918</td>\n              <td class=\"ds-table__last\">21 Sep 2004, 10:31 PM <span class=\"ds-block\">by <a class=\"ds-link ds-link--strong\" href=\"#usercp\">wren_d</a></span></td>\n            </tr>\n            <tr class=\"ds-table__foot\"><td colspan=\"5\"></td></tr>\n          </tbody>\n        </table>\n\n      </div>\n    </div>\n\n    </div>\n    </section>\n\n    <!-- View 6: the f.a.q. and forum rules. Menu column on the left. -->\n    <section class=\"ds-view\" id=\"faq\">\n    <div class=\"ds-view__body\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#index\">chronoskin</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#faq\">Frequently asked questions</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">&gt;</li>\n      <li class=\"ds-breadcrumb__current\">Forum rules</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <h1 class=\"ds-page-header__title\">Frequently asked questions</h1>\n      <div class=\"ds-page-header__row\">\n        <p class=\"ds-page-header__desc\">How the boards work and what is expected of members. Choose a section from the menu.</p>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#index\">Back to the forums</a></div>\n      </div>\n    </div>\n\n    <div class=\"ds-layout\">\n\n      <aside class=\"ds-sidebar\">\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Contents</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--quiet\" href=\"#faq\">Forum rules</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Registering</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Reading and posting</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Forum code</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Attachments</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Private messages</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#faq\">Subscriptions</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h3 class=\"ds-sidebar__sub\">Still stuck?</h3>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#forum\">Ask in New members</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#usercp\">Message a moderator</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#index\">Back to the forums</a></li>\n          </ul>\n        </div>\n      </aside>\n\n      <div class=\"ds-layout__main\">\n\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>Forum rules</h1>\n          <p>These rules keep the boards readable. <strong>Registering means you accept them.</strong> Moderators may edit or move any post that breaks them.</p>\n          <h2>Posting</h2>\n          <p>Choose the forum that fits the question and give the thread a title that says what it is about. Scale and control system belong in the first line.</p>\n          <ul>\n            <li>One thread per question; do not post it in two forums.</li>\n            <li>Photographs no wider than 640 pixels, three to a post.</li>\n            <li>Put wiring lists inside <code>[code]</code> tags so the columns line up.</li>\n          </ul>\n          <hr>\n          <h3>Buying and selling</h3>\n          <p>Offers belong in the exchange forum only, with a price and a location.</p>\n        </article>\n\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">See also</h2>\n          <div class=\"ds-panel__body\" data-component=\"links\">\n            <p class=\"ds-panel__line\"><a class=\"ds-link\" href=\"#reply\">How to post a reply</a> | <a class=\"ds-link is-visited\" href=\"#thread\">Mains safety: read this first</a> (visited) | <a class=\"ds-link is-hover\" href=\"#forum\">Wiring and control</a> (hover) | <a class=\"ds-link is-active\" href=\"#usercp\">Your subscriptions</a> (active) | <a class=\"ds-link ds-link--quiet\" href=\"#index\">Forum home</a></p>\n          </div>\n        </section>\n\n      </div>\n    </div>\n\n    </div>\n    </section>\n\n  </div>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <ul class=\"ds-footer__row\">\n      <li><a class=\"ds-footer__link\" href=\"#index\">Forum home</a></li>\n      <li class=\"ds-footer__sep\" aria-hidden=\"true\">-</li>\n      <li><a class=\"ds-footer__link\" href=\"#forum\">Archive</a></li>\n      <li class=\"ds-footer__sep\" aria-hidden=\"true\">-</li>\n      <li><a class=\"ds-footer__link\" href=\"#usercp\">User cp</a></li>\n      <li class=\"ds-footer__sep\" aria-hidden=\"true\">-</li>\n      <li><a class=\"ds-footer__link\" href=\"#faq\">Forum rules</a></li>\n    </ul>\n    <p class=\"ds-footer__note\">chronoskin. Placeholder content for a style specimen.</p>\n  </footer>\n\n  <p class=\"ds-page__legal\">All times are GMT. Page generated in 0.21 seconds.</p>\n\n</div>\n\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.bulletin-board-forums.forum.s02.p02.t02.u02\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"bulletin-board-forums\",\n    \"years\": [\n      2002,\n      2007\n    ]\n  },\n  \"archetype\": \"forum\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-bb-2222\",\n  \"short\": \"v1-bb-2222\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #666696;\n  --color-canvas: #ffffff;\n  --color-surface: #f1f1f1;\n  --color-surface-alt: #dfdfdf;\n  --color-surface-strong: #cfcfcf;\n  --color-bar: #606096;\n  --color-bar-text: #fff788;\n  --color-bar-alt: #8080a6;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #555576;\n  --color-inverse-text: #eeeeff;\n  --color-text: #000000;\n  --color-text-muted: #000020;\n  --color-heading: #000020;\n  --color-heading-alt: #555576;\n  --color-link: #606096;\n  --color-link-quiet: #000020;\n  --color-link-visited: #666686;\n  --color-link-hover: #8080a6;\n  --color-link-active: #000000;\n  --color-border: #555576;\n  --color-border-strong: #000020;\n  --color-border-muted: #cfcfcf;\n  --color-accent: #606096;\n  --color-accent-text: #fff788;\n  --color-accent-alt: #555576;\n  --color-fill-1: #f1f1f1;\n  --color-fill-2: #dfdfdf;\n  --color-fill-3: #e8e8e8;\n  --color-fill-4: #f1f1f1;\n  --color-button: #8080a6;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #fff788;\n  --color-button-secondary: #dfdfdf;\n  --color-button-secondary-text: #000000;\n  --color-input: #ffffff;\n  --color-input-text: #000000;\n  --color-input-border: #767676;\n  --color-disabled: #dfdfdf;\n  --color-disabled-text: #666686;\n  --color-danger: #a00000;\n  --color-danger-surface: #f1f1f1;\n  --color-success: #006600;\n  --color-warning: #fff788;\n  --color-notice: #fff788;\n  --color-notice-text: #000020;\n  --color-focus: #000000;\n  --color-shadow: #000000;\n  --color-overlay: #dfdfdf;\n}\n\n/* @part type */\n:root {\n  --font-body: Verdana, Arial, Helvetica, sans-serif;\n  --font-heading: \"Trebuchet MS\", Verdana, Arial, Helvetica, sans-serif;\n  --font-ui: Verdana, Arial, Helvetica, sans-serif;\n  --font-mono: Courier, \"Courier New\", monospace;\n  --text-base: 11px;\n  --text-small: 10px;\n  --text-ui: 11px;\n  --text-large: 12px;\n  --text-display: 16px;\n  --text-h1: 16px;\n  --text-h2: 12px;\n  --text-h3: 11px;\n  --line-body: normal;\n  --line-heading: normal;\n  --line-display: normal;\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: 1px;\n  --display-tracking: 1px;\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: 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: inset 1px 1px 0 color-mix(in srgb, white, transparent 45%), inset -1px -1px 0 color-mix(in srgb, var(--color-shadow), transparent 65%);\n  --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, white, transparent 45%), inset -1px -1px 0 color-mix(in srgb, var(--color-shadow), transparent 65%);\n  --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, var(--color-shadow), transparent 55%);\n  --shadow-dialog: inset 1px 1px 0 color-mix(in srgb, white, transparent 45%), inset -1px -1px 0 color-mix(in srgb, var(--color-shadow), transparent 65%);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), black 32%), var(--color-bar));\n  --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), black 14%), var(--color-bar-alt));\n  --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 32%), var(--color-inverse));\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), black 20%), var(--color-accent));\n  --fill-panel: var(--color-border);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), black 24%), var(--color-button));\n  --fill-button-hover: var(--color-button);\n  --fill-button-secondary: linear-gradient(to bottom, var(--color-button-secondary), color-mix(in srgb, var(--color-button-secondary), black 14%));\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 12%) 0, var(--color-input) 3px);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}