{
  "id": "v1-te-7a13",
  "long_id": "v1.table-era-90s.forum.s07.p10.t01.u03",
  "name": "Table-era web board, 1998",
  "era": {
    "slug": "table-era-90s",
    "code": "te",
    "name": "Table-era web",
    "years": [
      1996,
      2000
    ],
    "description": "The first commercial web, 1996 to 2000: narrow fixed pages built from tables, blue underlined links on white or grey, Times and Arial at their default sizes, bevelled form buttons, and flat colour strips where a designer wanted emphasis."
  },
  "archetype": "forum",
  "mode": "mix",
  "viewport": {
    "width": 800,
    "fluid": false
  },
  "summary": "A message board as hobby sites and software houses ran them between 1996 and 2000: the whole page is one bevelled 740px table centred in an 800px window, with a row of raised picture keys under the name and the boards listed below as a grid of bevelled cells. Running text is the browser's 16px Times, titles are set in bold Courier, and every label, count and date is 11px or 12px Arial; links are underlined in the page's own dark blue, on a pale grey sheet over a deep blue ground with sky blue bars and silver strips. It was the look of the first web boards, built from the browser's own table borders and form controls, until skinned forum software replaced it after 2000.",
  "url": "https://chrono.skin/s/v1-te-7a13",
  "preview_url": "https://chrono.skin/s/v1-te-7a13/specimen.html",
  "files": {
    "STYLE.md": "# Table-era web board, 1998\n\n## Summary\n\nA message board as hobby sites and software houses ran them between 1996 and 2000: the whole page is one bevelled 740px table centred in an 800px window, with a row of raised picture keys under the name and the boards listed below as a grid of bevelled cells. Running text is the browser's 16px Times, titles are set in bold Courier, and every label, count and date is 11px or 12px Arial; links are underlined in the page's own dark blue, on a pale grey sheet over a deep blue ground with sky blue bars and silver strips. It was the look of the first web boards, built from the browser's own table borders and form controls, until skinned forum software replaced it after 2000.\n\n## Layout\n\n- The page is fixed, not fluid, and centred: `--size-page` is 740px. `.ds-page__frame` is the sheet, a bordered table with `--space-3` (6px) of padding; nothing is wider than it and nothing stretches with the window.\n- The specimen is one example site, a message board for amateur observers, of five views. `.ds-nav` and `.ds-footer` are written once, outside the views; each view is a `.ds-view` section and one shows at a time.\n- Order from the top: `.ds-nav`, then the view, then the `.ds-footer`. The `.ds-nav` is three rows: `.ds-nav__top` (the `.ds-brand` at the left, a two-line tagline, the small search form at the right), `.ds-nav__links` (a tray holding five raised keys, each a small drawing and a label, sharing the full width) and `.ds-nav__status` (one inverted line: who you are at the left, the date at the right). There is no rail, no side navigation and no tab row in the header.\n- The home view, `.ds-page__main`, is a stack of full-width blocks with `--space-5` (14px) between them: the `.ds-hero` welcome box, the `.ds-stat` strip, the board index (a `.ds-table` with category rows across it), and at the foot `.ds-page__columns`, three fifths for the `.ds-list` of latest messages under a `.ds-heading` and two fifths for `.ds-page__side`, a `.ds-panel` over the two-by-two `.ds-grid`.\n- Inner pages (a board, a topic, the message form, a help page) keep the `.ds-nav` and the `.ds-footer` and drop the welcome box and the strip of figures. `.ds-page__inner` is one column at the full width. It opens with `.ds-page__head`, which stacks with `--space-2` between them the `.ds-breadcrumb`, the `.ds-page-header` (a filled strip: title and one small line at the left, one button at the right) and, when the page has several listings, the `.ds-tabs` strip. Below that come the working components with `--space-5` between them: the `.ds-table` with its key and `.ds-pagination`, or the `.ds-posts` of a topic, or `.ds-page__split`, which sets the form column (`.ds-page__block`) beside a 190px `.ds-sidebar`. Only the form page has a side column.\n- Views: `boards` is the front page (welcome box, figures, board index, latest messages, who is reading, four coloured cells). `topics` is one board: the listings as a strip, the table of topics with its status key, the page numbers and the empty state of a board that has no polls. `thread` is one topic, message after message, with its page numbers and the reply button. `post` is the message form with its notices, the posting rules in the sidebar and the message window that discarding a message opens. `rules` is a page of running text, including the line that shows the link states, with a boxed panel of further help. The key of the view that is showing is held down; the first key is held down when the address names no view.\n- Blocks are separated by bevelled outlines, title strips and flat fills, never by cards with shadows or wide gutters. Text is left-aligned; only the keys, the figures, the four cells, the empty state and the footer line are centred.\n- Spacing scale: `--space-1` 2px is the spacing between table cells, keys and posts and the padding of strips; `--space-2` 4px is cell padding, the gap between a drawing and its label and between the lines of the inner-page head; `--space-3` 6px is the padding of the sheet, the side padding of cells and strips and the gap between buttons; `--space-4` 10px is the gap between boxes in a side column and the padding of the welcome box; `--space-5` 14px is the gap between neighbouring blocks and between columns; `--space-6` 30px is the list indent and the width of a short input.\n- Fixed sizes: `--size-author` 130px author cell of a message, `--size-search` 120px search field, `--size-icon` 16px drawing in a key or in front of a board, `--size-label` 110px form label column, `--size-field` 240px text input, `--size-area` 360px textarea, `--size-check` 13px checkbox, `--size-dialog` 340px message window.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two families and a code face. `--font-body` (Times New Roman, Times) sets running text, link lists, table data and the footer. `--font-heading` and `--font-ui` (Arial, Helvetica) set the wordmark, headings, title strips, the search band, forms, buttons, notices and all 10px small print. `--font-mono` (Courier New) is for code and textareas. The references used Times, Arial, Geneva, Helvetica and Verdana as installed system fonts; no substitute was needed.\n- Sizes: `--text-base` and `--text-ui` 13px; `--text-small` 10px for tool links, tab strip, captions, meta and legal text; `--text-large` and `--text-h2` 16px for directory titles, panel titles and section headings; `--text-h1` 18px for a page title; `--text-h3` 13px bold; `--text-display` 28px for the wordmark only. Line height is `normal` everywhere. Bold is 700, the wordmark included.\n- No uppercase transform and no letter spacing. Headings are distinguished by family, weight and size only.\n- Links: `--color-link` (dark blue) and always underlined, including navigation, titles and quiet links (`--link-decoration`, `--link-decoration-quiet` and `--link-decoration-hover` are all `underline`). `--color-link-visited` is a greyed violet, `--color-link-active` is red, `--color-link-hover` equals the link colour because the era had no hover effect. `--color-link-quiet` (bright blue) is for promotional links set in the sans face.\n- Text is `--color-text` black; `--color-text-muted` grey is for times and counts only. `--color-heading` is black; `--color-heading-alt` (navy) is the wordmark, tagline, h3 and positive figures.\n- `--color-success` (dark green, the one green the references print) and `--color-warning` (the title-strip yellow, the era's amber) are flat fills for status labels. Green also works as text on white; the yellow is a fill only and carries black text.\n- Fills are flat. `--color-bar` (teal) is the search band, table head and the 2px rules. `--color-bar-alt` (yellow) is every panel and sidebar title strip and the border of notices. `--color-inverse` (black, white text) is the dialog title bar only. `--color-surface-alt` (light grey) is the tab strip, alternate table rows and the empty state. `--color-fill-1` to `--color-fill-4` (pale yellow, light grey, orange, teal) colour grid cells; `--color-fill-3` is also the 2px underline of `.ds-heading`.\n- `--color-accent` (crimson) is the solid badge; `--color-accent-alt` (red) is the \"New!\" word and negative figures. `--color-danger` is error text and the error notice border on `--color-danger-surface` (pale yellow).\n- Borders: 1px `--color-border` grey for table cells, the outline of the search band and of grid cells, the sidebar rule and thin rules; 1px `--color-border-strong` black for boxed panels and dialogs; 2px bevels on controls. Radius is 0 and every shadow token is `none`. Every one of these lines is drawn with `--border-width`, `--border-width-strong` and `--border-style`, and the sheet, panels and dialogs take `--shadow-panel` and `--shadow-dialog`, so another surface set changes the frames, rules and bars of the whole page.\n- Not expressible by a token, written literally in `components.css`: the bevel of buttons and selects is `border-style: outset` and of inputs, checkboxes and pressed buttons `inset`, drawn in `--color-border-muted` and `--color-input-border`. `--border-style` (`solid`) is used for everything else.\n\n- Family: the dark home page of 1998, read from the 1998 community welcome page and the 1998 film site: a black page with white text, pure yellow links, lime, pure red and pure blue, and the greys of browser chrome. Nothing is tinted; every colour is a named colour of the period at full strength.\n- `--color-page`, `--color-canvas` and `--color-surface` are black `#000000`. `--color-surface-alt` `#181818` (the darkest grey read from the screenshots) is alternate rows, quiet strips and the empty state; `--color-surface-strong` `#686868`.\n- `--color-bar` `#0000ff` (pure blue, white text, yellow links) is the search band, the table head, panel titles and the header and footer rules. `--color-bar-alt` `#686868` (grey, white text, yellow links) is every other title strip and the notice border.\n- `--color-inverse` `#c0c0c0` (silver) with black text is the light block of a dark page: a dialog title bar or a top bar. Links placed on it take its text colour.\n- Text is white `--color-text`; `--color-text-muted` `#989898` is for times, counts and legal lines. `--color-heading` is white; `--color-heading-alt` `#00ff00` (lime) is the brand name, h3 and positive figures.\n- Links are `--color-link` `#ffff00` (yellow), always underlined; `--color-link-quiet` is lime `#00ff00`, visited is silver `#c0c0c0`, active is red `#ff0000`; hover equals the link colour.\n- `--color-accent` `#ffff00` carries black text (`--color-accent-text`): the solid badge is a yellow block. `--color-accent-alt` `#ff0000` is the \"New!\" word, prices and negative figures.\n- `--color-fill-1` to `--color-fill-4` are `#181818`, `#000000`, `#0000ff`, `#686868`. They carry white text and yellow links.\n- `--color-danger` `#ff0000` is error text on black and a fill under black text; `--color-success` `#00ff00` is a fill under black text; `--color-warning` `#ff5000` (the orange of the 1998 university page, the only amber in the new references) is a fill under white text. `--color-danger-surface` is black; notices sit on `#181818`.\n- Controls are the grey of the operating system, as on any page of the period whatever its background: `--color-button` `#c0c0c0` and `--color-button-secondary` `#989898` with black text, white form fields with black text (`--color-input`, `--color-input-text`) in a silver bevel. Disabled controls are `#686868` with silver text. The two dark references show no form controls; these are the browser defaults read from the other captures.\n- Borders: `--color-border` and `--color-border-muted` `#989898` for outlines, row rules and bevels, `--color-border-strong` `#ffffff` (the white outline the film site puts round its pictures). `--color-focus` is yellow.\n\n## Components\n\n- `.ds-page`: on `<body>`; the patterned ground, body type. `.ds-page__frame` is the 740px bordered sheet in `--color-canvas`. `.ds-page__main` is the home stack; `.ds-page__columns` its two columns at the foot and `.ds-page__side` the right one. On inner pages `.ds-page__inner` is the single column, `.ds-page__head` stacks path, page header and strip, and `.ds-page__split` sets `.ds-page__block` beside the sidebar.\n- `.ds-nav`: header. `.ds-nav__top` holds the `.ds-brand`, `.ds-nav__tagline` and the `.ds-nav__search` form with its `.ds-nav__field`; `.ds-nav__links` is the tray of `.ds-nav__item` / `.ds-nav__link` keys, each with a `.ds-nav__icon` drawing (inline SVG painted with `currentColor`); the key of the view that is showing is held down on `--color-surface` (`components.css` has one selector per view for this, and `is-current` does the same by hand). `.ds-nav__status` is the inverted line under the keys; its links are `.ds-nav__status-link`.\n- `.ds-brand`: the site's mark and name, at the left of `.ds-nav__top`. `.ds-brand__mark` is a square tile dressed like the button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, the `outset` bevel in `--color-border-muted`, `--radius-control`, `--shadow-control`), so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`, drawn with square line caps, a 3 unit stroke and crisp edges. `.ds-brand__name` is the name in the heading family at `--text-display` in `--color-heading-alt`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the welcome box, the era's page introduction: a bordered box on `--color-fill-1` with `.ds-hero__title` (22px) and `.ds-hero__lead` at the left and `.ds-hero__action` at the right, a large button over a secondary one and a `.ds-hero__hint` line. Never a tall banner.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: a bordered strip on `--color-surface-alt`. `.ds-page-header__text` holds `.ds-page-header__title` and `.ds-page-header__lead` (one 12px line); `.ds-page-header__action` holds one button at the right.\n- `.ds-prose`: running text on help pages; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for an 18px lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for links to a member's own page, `.ds-link--strong` for bold links. `.ds-links` wraps a line of links.\n- `.ds-button`: grey bevelled button with an 11px label, on a `<button>` or, when it leads to another page, on a link. `.ds-button--secondary` is a darker grey for the lesser action, `.ds-button--danger` is the destructive action (discard, delete): the same bevel on `--color-surface` with a bold label in `--color-danger`, never a red button. `.ds-button--large` uses 18px. States `is-hover`, `is-pressed` (bevel inverts), `is-focus`, `is-disabled`. `.ds-buttons` lays out a row.\n- `.ds-form`: two-column form, right-aligned bold `.ds-form__label` and `.ds-form__field`. Controls: `.ds-form__input` (`--short` for 30px fields), `.ds-form__select`, `.ds-form__textarea` (fixed-width face), `.ds-form__check`. `.ds-form__hint` for small help, `.ds-form__error` for a bold message in the danger colour under the field (the control itself does not change), `.ds-form__actions` for the button row.\n- `.ds-table`: a grid of bevelled cells with 2px spacing. `.ds-table__head` (`--fill-bar`, 11px bold, `--num` right-aligned), `.ds-table__cell` with `--num` and `--meta` (12px), `--group` (a category row across the table on `--fill-bar-alt`) and `--flag` (the narrow first cell holding a `.ds-table__flag` folder; `is-new` colours it). `.ds-table__title` is the bold linked title, `.ds-table__desc` the 12px line under it, `.ds-table__row--alt` a row on `--color-surface-alt`, `.ds-table__caption` the 12px line beneath.\n- `.ds-stat`: summary figures as one bordered strip on `--color-surface-alt`, divided by rules. `.ds-stat` is the row; each `.ds-stat__item` sets a `.ds-stat__label` (12px) and a `.ds-stat__value` (18px bold Courier) on one line. Three to five items; never large numerals or separate cards.\n- `.ds-list`: ruled list of messages; `.ds-list__item` holds a linked subject and a `.ds-list__meta` line (grey 12px: who, where, when); `.ds-list__more` is the bold small link under the list.\n- `.ds-posts`: a topic. `.ds-posts__head` is the bar over it; each `.ds-post` sets `.ds-post__author` (`.ds-post__name` and three small lines on `--color-surface-alt`) beside `.ds-post__body` (`.ds-post__meta` line, `.ds-post__text` paragraphs, `.ds-post__sig`).\n- `.ds-panel`: a bordered box: `.ds-panel__title` strip on `--fill-bar-alt`, then `.ds-panel__body`; `.ds-panel__note` is a 12px line in it.\n- `.ds-grid`: two-by-two grid of flat coloured, bordered cells with 2px spacing: `.ds-grid__cell` and `--2`, `--3`, `--4` for the four fills, `.ds-grid__title`, `.ds-grid__text`, all centred.\n- `.ds-tabs`: the era's tabs, a \"Show:\" strip on `--color-surface-strong`: `.ds-tabs__label`, then `.ds-tabs__item` / `.ds-tabs__tab` links; the current one, `is-current`, is a solid `--fill-inverse` block.\n- `.ds-badge`: small solid red label. `.ds-badge--text` is a bold coloured word beside a link; `.ds-badge--count` is a grey count. Status labels are the same solid block with the word typed in capitals: `.ds-badge--success` (open), `.ds-badge--warning` (pinned), `.ds-badge--danger` (locked). `.ds-badges` is the key line under a table.\n- `.ds-sidebar`: the bordered box on `--color-surface-alt` beside the form: sections of `.ds-sidebar__title` over `.ds-sidebar__list` / `.ds-sidebar__item`; `.ds-sidebar__code` sets a few characters in the fixed-width face.\n- `.ds-notice`: 12px box on `--color-notice` bordered in the `--color-bar-alt` colour; `.ds-notice__label` bold lead word, `.ds-notice--error` in the danger colour. `.ds-notices` stacks several.\n- `.ds-pagination`: one left-aligned line: `.ds-pagination__label`, then small bordered `.ds-pagination__link` boxes; current `is-current` on `--color-surface-strong`, `is-disabled`.\n- `.ds-breadcrumb`: 12px path separated by double angle marks; `.ds-breadcrumb__item`, last one `is-current` and bold.\n- `.ds-dialog`: a 340px message window in the page flow: border in `--color-border-strong`, `.ds-dialog__title` bar on `--fill-inverse`, `.ds-dialog__body` and centred `.ds-dialog__actions`. No backdrop.\n- `.ds-empty`: bordered block on `--color-surface-alt` with `.ds-empty__title`, `.ds-empty__text` and a button, centred.\n- `.ds-footer`: `.ds-footer__links`, a \"Jump to:\" strip on `--color-surface-strong` (`.ds-footer__label`, bar-separated `.ds-footer__item`), then the centred `.ds-footer__legal` line.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, and `.ds-view--home` shows when none is named. It has no box of its own.\n- `.ds-heading`: section title in the heading face over a rule in `--color-border-strong`.\n\n## Never\n\n- `row-gap <= 8px`: table rows and list lines sit close.\n- `block-gap <= 16px`: neighbouring blocks are at most 14px apart.\n- `content-width <= 740px`: the page is a fixed 740px sheet.\n- `font-size <= 28px`: the wordmark is the largest text; headings stop at 18px.\n- `font-size >= 10px`: small print is 10px, nothing smaller.\n- `font-weight >= 400`: no light weights existed.\n- `font-families <= 3`: a serif, a sans-serif and a monospace face.\n- `underlined-links >= 95%`: links are always underlined; only a current item loses the underline.\n- `letter-spacing = 0`: no tracking anywhere.\n- `uppercase-text <= 0%`: no text-transform; capitals are typed.\n- `border-radius <= 0px`: no reference has a rounded corner.\n- `box-shadow-blur <= 0px`: shadows are hard offset edges; nothing is blurred.\n- `text-shadow = none`: no reference has a text shadow.\n- `gradient-fills <= 8%`: only the pinstriped bars and title strips carry a pattern; every other fill is flat.\n- `border-width <= 2px`: the widest border measured in any reference is the 2px bevel of a form control.\n- `transition = none`: nothing in the references changes on hover.\n- `animation = none`: no reference has a CSS animation.\n- `border-width >= 2px`: this surface has no 1px lines; every border is 2px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new listing is a `.ds-table` of bevelled cells under a `--fill-bar` head, with a category row where it has groups; a new box is a `.ds-panel` with a silver title strip; a new choice of listings is a `.ds-tabs` strip; a new action is a bevelled `.ds-button`, or a key in the `.ds-nav__links` tray when it belongs to the whole site. Keep running text at 16px Times with 11px and 12px Arial for everything a board prints about a message, keep links underlined, keep every block at the full width of the sheet except on the form page, and never add radius, blur, hover effects, a side rail or more whitespace than `--space-5`.\n",
    "components.css": "/* Layout tokens (structure part). A message board of 1998: one bordered\n   740px table centred in an 800px window, a row of picture keys under the\n   name, 2px between cells, 4px and 6px cell padding, a 14px gap between\n   blocks and a 130px author column in a thread. */\n:root {\n  --size-page: 740px;\n  --size-author: 130px;\n  --size-search: 120px;\n  --size-icon: 16px;\n  --size-label: 110px;\n  --size-field: 240px;\n  --size-area: 360px;\n  --size-check: 13px;\n  --size-dialog: 340px;\n  --space-1: 2px;\n  --space-2: 4px;\n  --space-3: 6px;\n  --space-4: 10px;\n  --space-5: 14px;\n  --space-6: 30px;\n}\n\n/* ---------- shell: the whole page is one bordered table ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-3) 0 var(--space-5);\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  box-sizing: border-box;\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-3);\n  background: var(--color-canvas);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n/* Home: full-width blocks, one under the other. */\n.ds-page__main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-4) 0;\n}\n/* The foot of the home page: latest messages beside a column of boxes. */\n.ds-page__columns {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n  column-gap: var(--space-5);\n  align-items: start;\n}\n.ds-page__side {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n/* Inner page: path, page header, then one column. */\n.ds-page__inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-3) 0 var(--space-4);\n}\n.ds-page__head {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n/* The message form beside its column of posting rules. */\n.ds-page__split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) calc(var(--size-author) + var(--space-6) + var(--space-6));\n  column-gap: var(--space-5);\n  align-items: start;\n}\n.ds-page__block {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- section heading ---------- */\n.ds-heading {\n  margin: 0 0 var(--space-2);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- nav: name and search, a row of picture keys, a status line ---------- */\n.ds-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n.ds-nav__top {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-1) var(--space-2) var(--space-2);\n}\n/* brand: the mark on a bevelled tile dressed like the button, then the name */\n.ds-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-heading-alt);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: calc(var(--text-display) + var(--space-3));\n  height: calc(var(--text-display) + var(--space-3));\n  background: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width-strong) outset var(--color-border-muted);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n  flex: 1;\n  min-width: 0;\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-nav__search {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-nav__search .ds-nav__field {\n  width: var(--size-search);\n}\n/* The key row: a tray in the strongest surface holding raised keys. */\n.ds-nav__links {\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(--color-surface-strong);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__item {\n  display: flex;\n  flex: 1 1 auto;\n}\n.ds-nav__link {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width-strong) outset var(--color-border-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n}\n.ds-nav__icon {\n  display: block;\n  flex: none;\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-nav__icon svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n/* The current page: its key is held down, on the plain surface. One selector\n   per view, and the first key when the address names no view. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#boards\"],\n.ds-page:has(#boards:target) .ds-nav__link[href=\"#boards\"],\n.ds-page:has(#topics:target) .ds-nav__link[href=\"#topics\"],\n.ds-page:has(#thread:target) .ds-nav__link[href=\"#thread\"],\n.ds-page:has(#post:target) .ds-nav__link[href=\"#post\"],\n.ds-page:has(#rules:target) .ds-nav__link[href=\"#rules\"] {\n  background: var(--color-surface);\n  color: var(--color-text);\n  border-style: inset;\n  text-decoration: none;\n}\n.ds-nav__status {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  column-gap: var(--space-4);\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__status-link {\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n\n/* ---------- hero: the welcome box, text at the left, two keys at the right ---------- */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  column-gap: var(--space-5);\n  align-items: center;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-base);\n}\n.ds-hero__action {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  text-align: center;\n}\n.ds-hero__hint {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- page header: a filled strip, title at the left, one key at the right ---------- */\n.ds-page-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__text {\n  flex: 1;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n  margin: var(--space-1) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-page-header__action {\n  flex: none;\n}\n\n/* ---------- table: bevelled cells with 2px spacing; the board index ---------- */\n.ds-table {\n  width: 100%;\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  font-family: var(--font-body);\n  font-size: var(--text-base);\n}\n.ds-table__head {\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n}\n.ds-table__head--num {\n  text-align: right;\n}\n.ds-table__cell {\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-table__cell--num {\n  text-align: right;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-table__cell--meta {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n/* A category row across the whole table. */\n.ds-table__cell--group {\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n}\n/* The small folder in front of a board or a topic. */\n.ds-table__cell--flag {\n  width: var(--size-icon);\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n  vertical-align: middle;\n}\n.ds-table__cell--flag.is-new {\n  color: var(--color-heading-alt);\n}\n.ds-table__flag {\n  display: block;\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-table__title {\n  font-weight: var(--weight-bold);\n}\n.ds-table__desc {\n  display: block;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-table__row--alt .ds-table__cell {\n  background: var(--color-surface-alt);\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding: var(--space-2) 0 var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-align: left;\n}\n\n/* ---------- stats: one strip of figures, label and number on a line ---------- */\n.ds-stat {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-stat__item {\n  display: flex;\n  flex: 1;\n  align-items: baseline;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n}\n.ds-stat__item + .ds-stat__item {\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__label {\n  color: var(--color-text);\n}\n.ds-stat__value {\n  color: var(--color-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n\n/* ---------- list: ruled message lines ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-base);\n}\n.ds-list__item {\n  padding: var(--space-1) 0 var(--space-2);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-list__more {\n  margin: var(--space-2) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- posts: a thread, author cell at the left, message at the right ---------- */\n.ds-posts {\n  display: flex;\n  flex-direction: column;\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}\n.ds-posts__head {\n  display: grid;\n  grid-template-columns: var(--size-author) minmax(0, 1fr);\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n.ds-post {\n  display: grid;\n  grid-template-columns: var(--size-author) minmax(0, 1fr);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-post__author {\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-post__name {\n  display: block;\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-post__body {\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface);\n}\n.ds-post__meta {\n  margin: 0 0 var(--space-2);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-post__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-post__sig {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- panel: outlined box under a title strip ---------- */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  font-size: var(--text-base);\n}\n.ds-panel__note {\n  margin: var(--space-2) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- grid: four coloured cells, two by two ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-1);\n}\n.ds-grid__cell {\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  text-align: center;\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__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-grid__text {\n  margin: var(--space-1) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- tabs: a \"show\" strip, the current choice as a solid block ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: var(--space-4);\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  list-style: none;\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n  padding: 0;\n}\n.ds-tabs__label {\n  font-weight: var(--weight-bold);\n}\n.ds-tabs__tab {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n  padding: 0 var(--space-3);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n\n/* ---------- sidebar: an outlined box of short link lists ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-3);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n  margin: var(--space-2) 0 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-sidebar__item {\n  padding: var(--space-1) 0;\n}\n.ds-sidebar__code {\n  font-family: var(--font-mono);\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n.ds-notice {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) var(--color-bar-alt);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-notice__label {\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- pagination: a line of small boxed numbers ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-pagination__label {\n  padding: 0 var(--space-2) 0 0;\n  font-weight: var(--weight-bold);\n}\n.ds-pagination__link {\n  display: block;\n  padding: 0 var(--space-2);\n  background: var(--color-surface);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  text-decoration: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0 var(--space-1);\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\\00bb\";\n  padding: 0 var(--space-2);\n  color: var(--color-text);\n}\n.ds-breadcrumb__item.is-current {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a message window in the page flow ---------- */\n.ds-dialog {\n  position: static;\n  box-sizing: border-box;\n  width: var(--size-dialog);\n  margin: 0;\n  padding: 0;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-dialog__title {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n  margin: 0;\n  padding: var(--space-4) var(--space-3);\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-3) var(--space-3);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  padding: var(--space-4) var(--space-3);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-align: center;\n  font-size: var(--text-base);\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- footer: a jump line in a strip, then small print ---------- */\n.ds-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  list-style: none;\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__label {\n  padding: 0 var(--space-3) 0 0;\n  font-weight: var(--weight-bold);\n}\n.ds-footer__item + .ds-footer__item::before {\n  content: \"|\";\n  padding: 0 var(--space-2);\n}\n.ds-footer__legal {\n  margin: 0;\n  padding: 0 var(--space-1);\n  text-align: center;\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  font-family: var(--font-ui);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n.ds-links {\n  margin: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-3) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  margin-top: 0;\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-3);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-3);\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  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n}\n\n/* ---------- buttons ---------- */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-button {\n  display: inline-block;\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width-strong) outset var(--color-border-muted);\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-heading);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  transition: var(--transition);\n  white-space: nowrap;\n  cursor: default;\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-pressed {\n  border-style: inset;\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}\n.ds-button--large {\n  font-size: var(--text-large);\n}\n/* Destructive action: the same bevel on the surface colour, the label in the\n   bold danger colour, which every palette keeps legible on its surface. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-surface);\n  color: var(--color-danger);\n  font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  column-gap: var(--space-3);\n  row-gap: var(--space-2);\n  align-items: baseline;\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__label {\n  text-align: right;\n  font-weight: var(--weight-bold);\n}\n.ds-form__field {\n  min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-1);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width-strong) inset var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  transition: var(--transition);\n}\n.ds-form__input {\n  width: var(--size-field);\n}\n.ds-form__select {\n  border-style: outset;\n  background: var(--fill-button);\n  color: var(--color-button-text);\n}\n.ds-form__textarea {\n  display: block;\n  width: var(--size-area);\n  font-family: var(--font-mono);\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea: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__check {\n  appearance: none;\n  box-sizing: border-box;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0 var(--space-2) 0 0;\n  padding: var(--space-1);\n  vertical-align: middle;\n  background-color: var(--color-input);\n  border: var(--border-width) inset var(--color-input-border);\n  border-radius: var(--radius-control);\n}\n/* The tick is a block of the field's text colour inside the field's own\n   fill, so it reads the same on a light and on a dark page. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-input-text);\n}\n.ds-form__hint {\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-form__error {\n  display: block;\n  color: var(--color-danger);\n  font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n  grid-column: 2;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-2) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-1);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n}\n/* The usual form: a coloured word next to a link, no box. */\n.ds-badge--text {\n  padding: 0;\n  background: transparent;\n  color: var(--color-accent-alt);\n  font-size: var(--text-base);\n}\n.ds-badge--count {\n  background: transparent;\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n/* Status labels: the same small solid block in a flat status colour. */\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-accent-text);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-bar-alt-text);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-accent-text);\n}\n/* A key line that explains the labels. */\n.ds-badges {\n  display: block;\n  padding: 0 0 var(--space-1);\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 message boards: table-era web board, 1996 to 2000: 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<div class=\"ds-page__frame\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__top\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#boards\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9.2\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9.2\"/><line x1=\"2.8\" y1=\"12\" x2=\"21.2\" y2=\"12\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <span class=\"ds-nav__tagline\">The observers' message boards. Clear skies since 1996.</span>\n      <form class=\"ds-nav__search\" action=\"#topics\">\n        <label for=\"n-find\">Find:</label>\n        <input class=\"ds-form__input ds-nav__field\" id=\"n-find\" type=\"text\" value=\"leonids\">\n        <button class=\"ds-button\" type=\"button\">Go</button>\n      </form>\n    </div>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#boards\"><span class=\"ds-nav__icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 1l7 6h-2v7h-4v-4h-2v4h-4v-7h-2z\"/></svg></span>All Boards</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#topics\"><span class=\"ds-nav__icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></span>Comets and Meteors</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#thread\"><span class=\"ds-nav__icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 1l2 5h5l-4 3 2 6-5-4-5 4 2-6-4-3h5z\"/></svg></span>Topic of the Week</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#post\"><span class=\"ds-nav__icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M11 1l4 4-9 9h-4v-4zM1 15h14v1h-14z\"/></svg></span>Post a Message</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#rules\"><span class=\"ds-nav__icon\"><svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M3 1h10v14h-10zM5 4v1h6v-1zM5 7v1h6v-1zM5 10v1h4v-1z\" fill-rule=\"evenodd\"/></svg></span>Rules and Help</a></li>\n    </ul>\n    <p class=\"ds-nav__status\"><span>You are reading as a guest. <a class=\"ds-nav__status-link\" href=\"#post\">Log in</a> or <a class=\"ds-nav__status-link\" href=\"#rules\">register</a> to post.</span> <span>Saturday, 14 November 1998, 21:40 UT</span></p>\n  </header>\n\n  <section class=\"ds-view ds-view--home\" id=\"boards\">\n    <div class=\"ds-page__main\">\n\n      <div class=\"ds-hero\" data-component=\"hero\">\n        <div>\n          <h1 class=\"ds-hero__title\">Welcome to the chronoskin boards</h1>\n          <p class=\"ds-hero__lead\">Nine boards for people who look up: what was seen last night, what to point at tonight, and which eyepiece to buy next. Reading is open to all; posting takes a free member name.</p>\n        </div>\n        <div class=\"ds-hero__action\">\n          <a class=\"ds-button ds-button--large\" href=\"#post\">Join and Post</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#rules\">Read the Rules</a>\n          <p class=\"ds-hero__hint\">1,204 members so far</p>\n        </div>\n      </div>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\">Members</span> <span class=\"ds-stat__value\">1,204</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\">Topics</span> <span class=\"ds-stat__value\">2,145</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\">Messages</span> <span class=\"ds-stat__value\">18,377</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__label\">Reading now</span> <span class=\"ds-stat__value\">23</span></li>\n      </ul>\n\n      <table class=\"ds-table\" data-component=\"table\">\n        <caption class=\"ds-table__caption\">A dark folder has messages you have not read. All times are Universal Time. <a class=\"ds-link\" href=\"#boards\">Mark all boards read</a></caption>\n        <thead>\n          <tr>\n            <th class=\"ds-table__head\" scope=\"col\" colspan=\"2\">Board</th>\n            <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Topics</th>\n            <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Messages</th>\n            <th class=\"ds-table__head\" scope=\"col\">Last message</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--group\" colspan=\"5\">Start here</td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag is-new\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">Announcements</a> <span class=\"ds-badge\">NEW</span><span class=\"ds-table__desc\">Board news, star party dates and changes to the rules.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">38</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">212</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Today 20:15<br>by <a class=\"ds-link\" href=\"#thread\">moderator</a></td>\n          </tr>\n          <tr class=\"ds-table__row--alt\">\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">New Observers</a><span class=\"ds-table__desc\">First telescope, first night out, no question too simple.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">304</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">2,960</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Today 18:02<br>by <a class=\"ds-link\" href=\"#thread\">northfield</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--group\" colspan=\"5\">Observing</td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag is-new\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">Comets and Meteors</a> <span class=\"ds-badge\">NEW</span><span class=\"ds-table__desc\">Shower counts, comet positions and where to stand on the night.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">187</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">1,734</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Today 21:31<br>by <a class=\"ds-link\" href=\"#thread\">hilltop_jo</a></td>\n          </tr>\n          <tr class=\"ds-table__row--alt\">\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">Moon and Planets</a><span class=\"ds-table__desc\">Sketches, timings and the state of the seeing.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">412</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">3,805</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Today 16:47<br>by <a class=\"ds-link\" href=\"#thread\">a_marsh</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">Deep Sky</a><span class=\"ds-table__desc\">Clusters, nebulae and galaxies, and the dark sites to see them from.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">366</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">3,120</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Yesterday 23:58<br>by <a class=\"ds-link\" href=\"#thread\">quietfield</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--group\" colspan=\"5\">Equipment</td>\n          </tr>\n          <tr class=\"ds-table__row--alt\">\n            <td class=\"ds-table__cell ds-table__cell--flag is-new\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">Telescopes and Mounts</a><span class=\"ds-table__desc\">Buying, building, collimating and mending.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">540</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">4,988</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Today 19:20<br>by <a class=\"ds-link\" href=\"#thread\">brassdraw</a></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#topics\">Trading Post</a><span class=\"ds-table__desc\">For sale and wanted, members only. No dealers.</span></td>\n            <td class=\"ds-table__cell ds-table__cell--num\">298</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">1,558</td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">Thursday 12:10<br>by <a class=\"ds-link\" href=\"#thread\">tworivers</a></td>\n          </tr>\n        </tbody>\n      </table>\n\n      <div class=\"ds-page__columns\">\n        <section>\n          <h2 class=\"ds-heading\">Latest messages</h2>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\"><a class=\"ds-link\" href=\"#thread\">Leonids: who is counting on Tuesday morning?</a> <span class=\"ds-badge ds-badge--text\">Hot!</span><span class=\"ds-list__meta\">hilltop_jo in Comets and Meteors, today 21:31, 46 replies</span></li>\n            <li class=\"ds-list__item\"><a class=\"ds-link\" href=\"#thread\">Star party moved to the 21st</a><span class=\"ds-list__meta\">moderator in Announcements, today 20:15, 3 replies</span></li>\n            <li class=\"ds-list__item\"><a class=\"ds-link is-visited\" href=\"#thread\">Dew on the secondary mirror, again</a><span class=\"ds-list__meta\">brassdraw in Telescopes and Mounts, today 19:20, 11 replies</span></li>\n            <li class=\"ds-list__item\"><a class=\"ds-link\" href=\"#thread\">Which chart for a first winter?</a><span class=\"ds-list__meta\">northfield in New Observers, today 18:02, 7 replies</span></li>\n            <li class=\"ds-list__item\"><a class=\"ds-link\" href=\"#thread\">Saturn's rings closing up: sketches</a><span class=\"ds-list__meta\">a_marsh in Moon and Planets, today 16:47, 19 replies</span></li>\n          </ul>\n          <p class=\"ds-list__more\"><a class=\"ds-link\" href=\"#topics\">All of today's messages</a></p>\n        </section>\n        <div class=\"ds-page__side\">\n          <section class=\"ds-panel\" data-component=\"panel\">\n            <h2 class=\"ds-panel__title\">Who is reading</h2>\n            <div class=\"ds-panel__body\">\n              <a class=\"ds-link\" href=\"#thread\">hilltop_jo</a>, <a class=\"ds-link\" href=\"#thread\">brassdraw</a>, <a class=\"ds-link\" href=\"#thread\">quietfield</a>, <a class=\"ds-link\" href=\"#thread\">a_marsh</a>, <a class=\"ds-link\" href=\"#thread\">tworivers</a> and 18 guests.\n              <p class=\"ds-panel__note\">Most ever at once: 61, on the night of the August eclipse.</p>\n            </div>\n          </section>\n          <div class=\"ds-grid\" data-component=\"grid\">\n            <div class=\"ds-grid__cell\">\n              <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#topics\">Tonight's Sky</a></p>\n              <p class=\"ds-grid__text\">Moon sets 19:12</p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\">\n              <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#topics\">Chat Room</a></p>\n              <p class=\"ds-grid__text\">4 people in now</p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\">\n              <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#topics\">Sketch Book</a></p>\n              <p class=\"ds-grid__text\">212 drawings</p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\">\n              <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#rules\">Member List</a></p>\n              <p class=\"ds-grid__text\">A to Z</p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"topics\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#boards\">chronoskin boards</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#boards\">Observing</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Comets and Meteors</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\" data-component=\"page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Comets and Meteors</h1>\n            <p class=\"ds-page-header__lead\">Shower counts, comet positions and where to stand on the night. Moderated by hilltop_jo.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button\" href=\"#post\">New Topic</a>\n          </div>\n        </header>\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li class=\"ds-tabs__label\">Show:</li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab is-current\" href=\"#topics\">All topics (187)</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#topics\">Last 7 days</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#topics\">Unanswered</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#topics\">Observing reports</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#topics\">Polls</a></li>\n        </ul>\n      </div>\n\n      <table class=\"ds-table\">\n        <caption class=\"ds-table__caption\"><span class=\"ds-badges\" data-component=\"badge\">Key: <span class=\"ds-badge ds-badge--success\">OPEN</span> anyone may reply <span class=\"ds-badge ds-badge--warning\">PINNED</span> kept at the top <span class=\"ds-badge ds-badge--danger\">LOCKED</span> closed by a moderator <span class=\"ds-badge\">NEW</span> posted since your last visit</span></caption>\n        <thead>\n          <tr>\n            <th class=\"ds-table__head\" scope=\"col\" colspan=\"2\">Topic</th>\n            <th class=\"ds-table__head\" scope=\"col\">Started by</th>\n            <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Replies</th>\n            <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Read</th>\n            <th class=\"ds-table__head\" scope=\"col\">State</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag is-new\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#thread\">Leonids: who is counting on Tuesday morning?</a> <span class=\"ds-badge\">NEW</span></td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">hilltop_jo</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">46</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">1,208</td>\n            <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">PINNED</span></td>\n          </tr>\n          <tr class=\"ds-table__row--alt\">\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#thread\">How to fill in a count sheet</a></td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">moderator</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">12</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">2,440</td>\n            <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">PINNED</span></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag is-new\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#thread\">Fireball over the estuary, Friday 22:05</a> <span class=\"ds-badge\">NEW</span></td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">tworivers</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">9</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">187</td>\n            <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">OPEN</span></td>\n          </tr>\n          <tr class=\"ds-table__row--alt\">\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title is-visited\" href=\"#thread\">Binoculars or naked eye for a shower?</a></td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">northfield</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">21</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">530</td>\n            <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">OPEN</span></td>\n          </tr>\n          <tr>\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#thread\">Comet in the morning sky: finder chart</a></td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">quietfield</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">14</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">402</td>\n            <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">OPEN</span></td>\n          </tr>\n          <tr class=\"ds-table__row--alt\">\n            <td class=\"ds-table__cell ds-table__cell--flag\"><svg class=\"ds-table__flag\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 3h5l2 2h7v9h-14z\"/></svg></td>\n            <td class=\"ds-table__cell\"><a class=\"ds-link ds-table__title\" href=\"#thread\">Was that a satellite or a meteor? (closed, see the help page)</a></td>\n            <td class=\"ds-table__cell ds-table__cell--meta\">a_marsh</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">33</td>\n            <td class=\"ds-table__cell ds-table__cell--num\">961</td>\n            <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">LOCKED</span></td>\n          </tr>\n        </tbody>\n      </table>\n\n      <ol class=\"ds-pagination\" data-component=\"pagination\">\n        <li class=\"ds-pagination__label\">Pages:</li>\n        <li><span class=\"ds-pagination__link is-disabled\">&lt; Newer</span></li>\n        <li><a class=\"ds-pagination__link is-current\" href=\"#topics\">1</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#topics\">2</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#topics\">3</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#topics\">4</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#topics\">Older &gt;</a></li>\n      </ol>\n\n      <section>\n        <h2 class=\"ds-heading\">Polls on this board</h2>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <h3 class=\"ds-empty__title\">Nobody has opened a poll here yet.</h3>\n          <p class=\"ds-empty__text\">A poll is a topic with up to six answers to choose from. Any member can start one.</p>\n          <a class=\"ds-button\" href=\"#post\">Start a Poll</a>\n        </div>\n      </section>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"thread\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#boards\">chronoskin boards</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#topics\">Comets and Meteors</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Leonids: who is counting?</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Leonids: who is counting on Tuesday morning?</h1>\n            <p class=\"ds-page-header__lead\">Started by hilltop_jo on 9 November 1998. 46 replies, read 1,208 times. <span class=\"ds-badge ds-badge--warning\">PINNED</span></p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button\" href=\"#post\">Post Reply</a>\n          </div>\n        </header>\n      </div>\n\n      <div class=\"ds-posts\">\n        <div class=\"ds-posts__head\"><span>Author</span><span>Message</span></div>\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\"><span class=\"ds-post__name\">hilltop_jo</span>Moderator<br>Messages: 1,142<br>Joined: March 1996</div>\n          <div class=\"ds-post__body\">\n            <p class=\"ds-post__meta\">Posted 9 November 1998, 19:04. <a class=\"ds-link\" href=\"#post\">Reply with quote</a></p>\n            <p class=\"ds-post__text\">The peak is forecast for the small hours of Tuesday the 17th. If the predictions are even half right this is the best chance in thirty years, and the Moon will be out of the way.</p>\n            <p class=\"ds-post__text\">I would like six or more of us counting in ten minute blocks from different sites, so that cloud at one place does not sink the whole night. Say where you will be and I will keep the list in this message.</p>\n            <p class=\"ds-post__sig\">15cm reflector on a pipe mount. Ridge Lane, 180m.</p>\n          </div>\n        </article>\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\"><span class=\"ds-post__name\">tworivers</span>Member<br>Messages: 208<br>Joined: June 1997</div>\n          <div class=\"ds-post__body\">\n            <p class=\"ds-post__meta\">Posted 9 November 1998, 20:31. <a class=\"ds-link\" href=\"#post\">Reply with quote</a></p>\n            <p class=\"ds-post__text\">Count me in from the sea wall, weather allowing. I can do 01:00 to 05:00. Do you want faint ones logged or only those brighter than the pointer stars?</p>\n            <p class=\"ds-post__sig\">10x50 binoculars and a deck chair.</p>\n          </div>\n        </article>\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\"><span class=\"ds-post__name\">northfield</span>New member<br>Messages: 14<br>Joined: October 1998</div>\n          <div class=\"ds-post__body\">\n            <p class=\"ds-post__meta\">Posted 10 November 1998, 08:12. <a class=\"ds-link\" href=\"#post\">Reply with quote</a></p>\n            <p class=\"ds-post__text\">First shower for me. Is there a sheet to fill in, and does it matter that my watch is a minute or so out?</p>\n          </div>\n        </article>\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\"><span class=\"ds-post__name\">hilltop_jo</span>Moderator<br>Messages: 1,143<br>Joined: March 1996</div>\n          <div class=\"ds-post__body\">\n            <p class=\"ds-post__meta\">Posted 10 November 1998, 12:40. <a class=\"ds-link\" href=\"#post\">Reply with quote</a></p>\n            <p class=\"ds-post__text\">Log everything you are sure of, with a rough brightness. The sheet is in the pinned topic, <a class=\"ds-link is-visited\" href=\"#topics\">How to fill in a count sheet</a>. A minute out is fine: set your watch by the radio pips before you start and note it on the sheet.</p>\n            <p class=\"ds-post__sig\">15cm reflector on a pipe mount. Ridge Lane, 180m.</p>\n          </div>\n        </article>\n      </div>\n\n      <ol class=\"ds-pagination\">\n        <li class=\"ds-pagination__label\">Pages of this topic:</li>\n        <li><a class=\"ds-pagination__link is-current\" href=\"#thread\">1</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#thread\">2</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#thread\">3</a></li>\n        <li><a class=\"ds-pagination__link\" href=\"#thread\">Next &gt;</a></li>\n      </ol>\n\n      <div class=\"ds-buttons\">\n        <a class=\"ds-button\" href=\"#post\">Post Reply</a>\n        <a class=\"ds-button ds-button--secondary\" href=\"#topics\">Back to the Board</a>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"post\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#boards\">chronoskin boards</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#thread\">Leonids: who is counting?</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Post a message</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Post a message</h1>\n            <p class=\"ds-page-header__lead\">Your reply joins the end of the topic. Plain text only; a blank line starts a new paragraph.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#thread\">Back to the Topic</a>\n          </div>\n        </header>\n      </div>\n\n      <div class=\"ds-page__split\">\n        <div class=\"ds-page__block\">\n          <div class=\"ds-notices\" data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__label\">Note:</span> you are not logged in. Give your member name and password below and the message is posted in one step.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__label\">Not posted:</span> the message has no subject. Nothing has been lost; correct the field and post again.</p>\n          </div>\n\n          <form class=\"ds-form\" data-component=\"form\" action=\"#post\">\n            <label class=\"ds-form__label\" for=\"p-name\">Member name:</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input\" id=\"p-name\" type=\"text\" value=\"northfield\">\n            </div>\n            <label class=\"ds-form__label\" for=\"p-subject\">Subject:</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input\" id=\"p-subject\" type=\"text\">\n              <span class=\"ds-form__error\">Give the message a subject.</span>\n            </div>\n            <label class=\"ds-form__label\" for=\"p-icon\">Message icon:</label>\n            <div class=\"ds-form__field\">\n              <select class=\"ds-form__select\" id=\"p-icon\">\n                <option>None</option>\n                <option>Question</option>\n                <option>Observing report</option>\n              </select>\n              <span class=\"ds-form__hint\">shown beside the subject</span>\n            </div>\n            <label class=\"ds-form__label\" for=\"p-text\">Message:</label>\n            <div class=\"ds-form__field\">\n              <textarea class=\"ds-form__textarea\" id=\"p-text\" rows=\"7\">I can count from the allotments, 02:00 to 04:30.\nLow horizon to the east, street lamps to the south.</textarea>\n            </div>\n            <span class=\"ds-form__label\">Options:</span>\n            <div class=\"ds-form__field\">\n              <label><input class=\"ds-form__check\" type=\"checkbox\" checked>Add my signature</label><br>\n              <label><input class=\"ds-form__check\" type=\"checkbox\">Send me replies by e-mail</label>\n            </div>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Post Message</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Preview</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Attach a File</button>\n              <a class=\"ds-button ds-button--danger\" href=\"#post\">Discard</a>\n            </div>\n          </form>\n\n          <section class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"d-title\">\n            <h2 class=\"ds-dialog__title\" id=\"d-title\">Discard this message?</h2>\n            <p class=\"ds-dialog__body\">The two lines you have written will be thrown away and you will go back to <a class=\"ds-link\" href=\"#thread\">the topic</a>.</p>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#thread\">Discard</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#post\">Keep Writing</a>\n            </div>\n          </section>\n        </div>\n\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <section>\n            <h2 class=\"ds-sidebar__title\">Posting rules</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#rules\">Keep to the board's subject</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#rules\">One topic, one question</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#rules\">Sales in the Trading Post only</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#rules\">All the rules</a></li>\n            </ul>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">Marking up</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__code\">*word*</span> for emphasis</li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__code\">&gt; text</span> to quote a line</li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__code\">www.</span> starts a link</li>\n            </ul>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">Before you post</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\">Has it been asked? <a class=\"ds-link\" href=\"#topics\">Search the board</a></li>\n              <li class=\"ds-sidebar__item\">Is it a report? Give place, date and time in UT</li>\n              <li class=\"ds-sidebar__item\">Long lists read better as one line each</li>\n            </ul>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">Topic so far</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#thread\">hilltop_jo</a>, 12:40</li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#thread\">northfield</a>, 08:12</li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#thread\">tworivers</a>, 20:31</li>\n            </ul>\n          </section>\n        </aside>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"rules\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#boards\">chronoskin boards</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#rules\">Help</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Rules of the boards</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Rules and help</h1>\n            <p class=\"ds-page-header__lead\">Short, and the same on every board. Last changed 2 November 1998.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button\" href=\"#post\">Ask a Moderator</a>\n          </div>\n        </header>\n      </div>\n\n      <article class=\"ds-prose\" data-component=\"typography\">\n        <h1>Rules of the chronoskin boards</h1>\n        <p class=\"ds-prose__lead\">The boards are run by volunteers in their spare evenings. Three rules keep them readable.</p>\n        <h2>The three rules</h2>\n        <ol>\n          <li>Post in the board that fits. A telescope for sale goes in the Trading Post, not under Deep Sky.</li>\n          <li>Give a report its place, date and time in Universal Time, so that others can compare.</li>\n          <li>Disagree with the observation, never with the observer.</li>\n        </ol>\n        <h2>Questions people ask</h2>\n        <h3>How do I quote another message?</h3>\n        <p>Begin the line with a greater-than sign, like this: <code>&gt; the Moon will be out of the way</code>. The board sets quoted lines in the fixed-width face.</p>\n        <h3>What do the link colours mean?</h3>\n        <p class=\"ds-links\" data-component=\"links\">\n          <a class=\"ds-link\" href=\"#rules\">A topic you have not opened</a>,\n          <a class=\"ds-link is-visited\" href=\"#rules\">a topic you have read</a>,\n          <a class=\"ds-link is-hover\" href=\"#rules\">a link under the pointer</a>,\n          <a class=\"ds-link is-active\" href=\"#rules\">a link as you click it</a>,\n          <a class=\"ds-link ds-link--quiet\" href=\"#rules\">a member's own page</a> and\n          <a class=\"ds-link ds-link--strong\" href=\"#rules\">a pinned topic</a>.\n        </p>\n        <h3>Why was my topic locked?</h3>\n        <p>A moderator locks a topic when the question is answered in the help pages or when it has left its subject. <strong>Nothing is deleted</strong>: a locked topic can still be read and searched.</p>\n      </article>\n\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">More help</h2>\n        <div class=\"ds-panel__body\">\n          <a class=\"ds-link\" href=\"#post\">Writing your first message</a> | <a class=\"ds-link\" href=\"#topics\">Finding old topics</a> | <a class=\"ds-link\" href=\"#rules\">Changing your password</a> | <a class=\"ds-link\" href=\"#rules\">Who the moderators are</a>\n        </div>\n      </section>\n\n    </div>\n  </section>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <ul class=\"ds-footer__links\">\n      <li class=\"ds-footer__label\">Jump to:</li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#boards\">All boards</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#topics\">Comets and Meteors</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#thread\">Topic of the week</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#post\">Post a message</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#rules\">Rules and help</a></li>\n    </ul>\n    <p class=\"ds-footer__legal\">chronoskin message boards. Messages belong to the members who wrote them. Best read at 800 by 600 in any browser.</p>\n  </footer>\n\n</div>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.table-era-90s.forum.s07.p10.t01.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"table-era-90s\",\n    \"years\": [\n      1996,\n      2000\n    ]\n  },\n  \"archetype\": \"forum\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 800,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-te-7a13\",\n  \"short\": \"v1-te-7a13\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #000000;\n  --color-canvas: #000000;\n  --color-surface: #000000;\n  --color-surface-alt: #181818;\n  --color-surface-strong: #686868;\n  --color-bar: #0000ff;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #686868;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #c0c0c0;\n  --color-inverse-text: #000000;\n  --color-text: #ffffff;\n  --color-text-muted: #989898;\n  --color-heading: #ffffff;\n  --color-heading-alt: #00ff00;\n  --color-link: #ffff00;\n  --color-link-quiet: #00ff00;\n  --color-link-visited: #c0c0c0;\n  --color-link-hover: #ffff00;\n  --color-link-active: #ff0000;\n  --color-border: #989898;\n  --color-border-strong: #ffffff;\n  --color-border-muted: #989898;\n  --color-accent: #ffff00;\n  --color-accent-text: #000000;\n  --color-accent-alt: #ff0000;\n  --color-fill-1: #181818;\n  --color-fill-2: #000000;\n  --color-fill-3: #0000ff;\n  --color-fill-4: #686868;\n  --color-button: #c0c0c0;\n  --color-button-text: #000000;\n  --color-button-hover-text: #000000;\n  --color-button-secondary: #989898;\n  --color-button-secondary-text: #000000;\n  --color-input: #ffffff;\n  --color-input-text: #000000;\n  --color-input-border: #c0c0c0;\n  --color-disabled: #686868;\n  --color-disabled-text: #c0c0c0;\n  --color-danger: #ff0000;\n  --color-danger-surface: #000000;\n  --color-success: #00ff00;\n  --color-warning: #ff5000;\n  --color-notice: #181818;\n  --color-notice-text: #ffffff;\n  --color-focus: #ffff00;\n  --color-shadow: #000000;\n  --color-overlay: #000000;\n}\n\n/* @part type */\n:root {\n  --font-body: \"Times New Roman\", Times, serif;\n  --font-heading: Arial, Helvetica, sans-serif;\n  --font-ui: Arial, Helvetica, sans-serif;\n  --font-mono: \"Courier New\", Courier, monospace;\n  --text-base: 13px;\n  --text-small: 10px;\n  --text-ui: 13px;\n  --text-large: 16px;\n  --text-display: 28px;\n  --text-h1: 18px;\n  --text-h2: 16px;\n  --text-h3: 13px;\n  --line-body: normal;\n  --line-heading: normal;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 900;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n  --border-width: 2px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: 0 0 0 1px var(--color-border-strong), 4px 4px 0 1px var(--color-shadow);\n  --shadow-control: 1px 1px 0 var(--color-shadow);\n  --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 4px 4px 0 var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: repeating-linear-gradient(0deg, var(--color-bar) 0 2px, color-mix(in srgb, var(--color-bar) 55%, white) 2px 3px);\n  --fill-bar-alt: repeating-linear-gradient(0deg, var(--color-bar-alt) 0 2px, color-mix(in srgb, var(--color-bar-alt) 55%, white) 2px 3px);\n  --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 2px, color-mix(in srgb, var(--color-inverse) 55%, white) 2px 3px);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-button);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
