{ "id": "v1-bb-7343", "long_id": "v1.bulletin-board-forums.portal.s07.p03.t04.u03", "name": "Board file archive, 2002 to 2007", "era": { "slug": "bulletin-board-forums", "code": "bb", "name": "Bulletin-board forums", "years": [ 2002, 2007 ], "description": "Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the download section that boards of the early 2000s grew beside their forums: a database of skins, button sets and add-ons, laid out with the same ruled boxes and title bars as the board itself. One bar carries the name and the sections, a featured file opens the index, and under it the categories stand as a directory of cells across the full width, followed by the newest files beside a numbered list of the most downloaded. The skin is an earth one: rust brown bars with a light top edge on sand and cream cells, serif titles over small Lucida text, square boxes with a hard one-pixel shadow, and no motion.", "url": "https://chrono.skin/s/v1-bb-7343", "preview_url": "https://chrono.skin/s/v1-bb-7343/specimen.html", "files": { "STYLE.md": "# Board file archive, 2002 to 2007\n\n## Summary\n\nThis is the download section that boards of the early 2000s grew beside their forums: a database of skins, button sets and add-ons, laid out with the same ruled boxes and title bars as the board itself. One bar carries the name and the sections, a featured file opens the index, and under it the categories stand as a directory of cells across the full width, followed by the newest files beside a numbered list of the most downloaded. The skin is an earth one: rust brown bars with a light top edge on sand and cream cells, serif titles over small Lucida text, square boxes with a hard one-pixel shadow, and no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-5` (12px) above and below and `--space-6` (18px) at the sides, so the sheet `.ds-page__frame` takes about 96% of the viewport. Designed at 1024px. Never centre a narrow column.\n- Order from the top, all inside the sheet: `.ds-nav__head`, one primary bar with the brand on the left and the sections as tabs standing on its lower edge at the right; `.ds-nav__sub`, a secondary strip with the visitor line on the left and the search box on the right; `.ds-page__body` with the views; the footer band; one line of small print `.ds-page__legal`. No text sits on the page colour.\n- A view is a `.ds-view` section whose `.ds-view__body` stacks its blocks `--space-5` apart. Full-width blocks come first; where two columns are needed, `.ds-layout` puts `.ds-layout__main` (at least `--size-main`, 440px) beside `.ds-layout__rail` (`--size-rail`, 220px) on the right, and lets the rail drop under the main column when the window is too narrow for both.\n- The category directory `.ds-grid` is as many equal columns as fit at `--size-cell` (250px) each: three at 1024px. A file row is at least `--size-row` (30px); bars and title strips are `--size-bar` (24px); count columns of a table are `--size-count` (64px) and its date column `--size-date` (104px).\n- Spacing scale: `--space-1` 1px, `--space-2` 3px, `--space-3` 5px, `--space-4` 8px, `--space-5` 12px, `--space-6` 18px.\n - `--space-1`: the gap between cells and rows inside any bordered block.\n - `--space-2`: vertical padding of bars, strips, rows and buttons; gap between stacked small lines.\n - `--space-3`: vertical padding of cells and tabs, gap between inline items.\n - `--space-4`: horizontal padding of cells and strips, padding of directory cells and panel bodies, gap between buttons.\n - `--space-5`: body padding and the gap between neighbouring blocks. This is the only block gap.\n - `--space-6`: side padding of the page, list indents, padding of dialog and empty-state bodies, horizontal padding of tabs.\n- Inner pages keep the bar, the strip and the footer and drop the featured file. From the top: `.ds-breadcrumb`, then `.ds-page-header` in place of the hero (title and one line on the left, the action or the file buttons on the right, no box), then `.ds-tabs` when the list has several orders, then the working block. A category is one full-width `.ds-table` with `.ds-toolbar` under it; a file, the upload form and the member's files use `.ds-layout`, with details, notes or the empty favourites box in the rail.\n- Views. The specimen is a five-screen example archive; the bar has one tab per view and marks the current one. `files` (home) is the archive index: featured file, notice, category directory, latest files beside the most downloaded, the figures strip and who is browsing. `category` is one category: sort tabs, the file table with its two groups, the count line and page numbers. `file` is one file: download buttons, the delete confirmation that the Delete button opens, screenshots, the description as long text, file details and more by the author in the rail, then the comments. `upload` is the upload form as it came back with an error, beside the upload notes. `mine` is the member's files: figures, the list of uploads with their status, and an empty favourites box.\n- Form rows are a `--size-label` (200px) label cell and a field cell that takes the rest; text inputs are `--size-field` (300px) unless `--wide` or `--auto`. A dialog is `--size-dialog` (60%) wide, centred in the flow on a band of the overlay colour.\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- `--font-body` and `--font-heading` are the same Verdana stack; `--font-ui` puts Tahoma first for navigation, tabs, buttons and inputs; `--font-mono` (Courier New) is for inline code. All are system fonts, as in the references.\n- Sizes: `--text-small` 10px for meta, counts captions, strips, side blocks and table cells; `--text-base`, `--text-ui`, `--text-h2` and `--text-h3` 11px for running text, post bodies, controls and block titles; `--text-large` and `--text-h1` 13px bold for news titles, poster names, the thread title and the hero title; `--text-display` 18px for the brand name only. Nothing is larger than 18px.\n- `--line-body` is 1.4 in running text; headings and bars use `normal`. Headings are bold, never uppercase, no tracking.\n- Links carry no underline at rest (`--link-decoration` and `--link-decoration-quiet` are `none`) and gain one on hover. `--color-link` (pale blue) is for links in text and meta; `--color-link-quiet` (ivory, always bold where it is a title) for topic, news and file titles, poster names, breadcrumb and menu links; hover is `--color-link-hover`.\n- Surfaces: `--color-page` outside the sheet, `--color-canvas` the sheet and, through `--fill-panel`, the dark line in the 1px gaps. `--color-surface` is the main cell (message, news item, table cell), `--color-surface-alt` the poster panel, count and status cells, form labels, the page header and tool strips, `--color-surface-strong` the title strips of side blocks and panels, group rows of a table, the name and date row of a post and the form action row. Text on the first two is `--color-text`; on the strong surface it is `--color-heading` or `--color-heading-alt`.\n- Bars: `--fill-bar` (the petrol bar with a lighter top and darker foot) with `--color-bar-text` and `--shadow-text` for the link bar, table heads, the thread head, the hero, news, grid, form, dialog and empty-state titles and the current tab. `--fill-bar-alt` with `--color-bar-alt-text` for the visitor strip, the current link-bar item and quiet badges. `--fill-inverse` with `--color-inverse-text` for the footer band.\n- Borders: every block has a 1px `--color-border` outline; `--color-border-strong` outlines the sheet, buttons, the dialog and the rule under the tabs; `--color-border-muted` rules rows inside a box and under the breadcrumb.\n- Markers: `--color-accent` for new-post icons, rank pips, poll bars, menu bullets, the notice edge and the badge, with `--color-accent-text` on it; `--color-accent-alt` for an emphasised word; `--color-danger` on `--color-danger-surface` for errors; Status badges are a `color-mix()` of 30% of the status colour (`--color-success`, `--color-warning`, `--color-danger`) over `--color-surface`, with `--color-text` and a 1px outline in the status colour, so they read under every palette. The destructive button is the error pair: `--color-danger` text on `--color-danger-surface` with a `--color-danger` outline.\n- `--color-fill-1` to `--color-fill-4` are four close charcoal tones for grid cells; the style has no bright block colours.\n- One-off values outside the tokens: the footer separator is drawn at 0.6 opacity; icon and tile sizes are `calc()` multiples of `--size-icon` and `--text-display`.\n\n## Components\n\n- `ds-progress`: a quota or poll bar, a native `` with a label above (private-message quota).\n- `ds-accordion`: a collapsible `
` entry for a forum jump or an FAQ answer.\n- `ds-avatar`: the square picture of a member, placed under or beside the name.\n- `.ds-page`: on ``. Wrap everything in `.ds-page__frame`; `.ds-page__body` holds the views. Each view is a `.ds-view` section (`.ds-view--home` for the index) and its blocks go in `.ds-view__body`. `.ds-page__legal` is the small print at the foot of the sheet. `.ds-layout` with `.ds-layout__main` and `.ds-layout__rail` makes the two-column area. `.ds-icon` sizes an inline SVG icon, `.ds-sprite` hides the symbol sheet, `.ds-block` puts a span on its own line, `.ds-scroll` lets a wide table scroll inside its own box.\n- `.ds-nav`: the site header. `.ds-nav__head` is the primary bar holding the `.ds-brand` and `.ds-nav__menu`, a row of `.ds-nav__link` tabs; the current one takes `is-current`, and in the specimen one `:has()` rule per view applies the same dress. `.ds-nav__sub` is the secondary strip with `.ds-nav__sublink` links and the `.ds-nav__search` form, whose input also takes `.ds-nav__field`.\n- `.ds-brand`: the site's mark and name at the left of the bar; one per page. `.ds-brand__mark` is a square tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` outline, `--radius-control`, `--shadow-control`), 1.3 times `--text-display`. `.ds-brand__name` is the name in `--font-heading` at `--text-display`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-breadcrumb`: one pale bordered line at the top of an inner page, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-hero`: the featured file at the top of the index, one ruled block of three cells: `.ds-hero__shot` with a `.ds-thumb`, `.ds-hero__text` with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and the download button in `.ds-hero__action`, and `.ds-hero__aside` with the file's figures. Never a banner.\n- `.ds-thumb`: a screenshot placeholder, a small drawing of a board built from `.ds-thumb__bar`, `.ds-thumb__strip` and `.ds-thumb__row` (`--alt`). Replace it with a real image in a project. `.ds-shots` is a row of `.ds-shots__item` thumbs with captions.\n- `.ds-page-header`: the head of an inner page. `.ds-page-header__text` holds `.ds-page-header__title` and one `.ds-page-header__desc` line; `.ds-page-header__action` or a `.ds-buttons` group sits at the right.\n- `.ds-prose`: long text such as a file description: h1, h2, h3, p, ul, strong, code, hr.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for names and tools, `.ds-link--strong` for bold.\n- `.ds-button`: the primary action, brown with white bold text. `.ds-button--secondary` is the plain sand button. `.ds-button--danger` is for a destructive action such as deleting a file; use it once per confirmation, beside a secondary button. `is-hover`, `is-active`, `is-focus`, `is-disabled` (or `disabled`). Group buttons in `.ds-buttons`.\n- `.ds-form`: a ruled block of rows. `.ds-form__title`, `.ds-form__row` with `.ds-form__label` (plus `.ds-form__hint`) and `.ds-form__field`; controls take `.ds-form__input` (`--wide`, `--auto`, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`, buttons in `.ds-form__actions`.\n- `.ds-table`: the file list of a category and any data table. `th` is the primary bar (`.ds-table__head--left` for text columns); `.ds-table__group` is a group row; `.ds-table__row--alt` the alternate row; cells `.ds-table__num` and `.ds-table__last`; inside the main cell `.ds-table__title`, `.ds-table__desc`, `.ds-table__meta`.\n- `.ds-list`: file rows outside a table. `.ds-list__head` (with an optional `.ds-list__more` link at its right), then `.ds-list__item` (`is-alt` for the alternate row) with a `.ds-list__icon`, `.ds-list__title`, `.ds-list__meta` and `.ds-list__aside` for size and date.\n- `.ds-panel`: any titled box. `.ds-panel__title` (add `--bar` for a main block), `.ds-panel__sub`, `.ds-panel__body` (`--alt`), `.ds-panel__line`. `.ds-spec` is the label and value list of a file inside a panel: `.ds-spec__label`, `.ds-spec__value`.\n- `.ds-stat`: summary figures as one ruled strip of equal cells. `.ds-stat__title` is optional; each `.ds-stat__item` has a `.ds-stat__value` over a `.ds-stat__label`. Use three to six.\n- `.ds-grid`: the category directory, cells with 1px gaps in one bordered block. `.ds-grid__title`, `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with `.ds-grid__icon`, `.ds-grid__name`, `.ds-grid__count`, `.ds-grid__meta` and a `.ds-grid__subs` line of sub-category links.\n- `.ds-tabs`: a row of `.ds-tabs__tab` items on a 2px rule; `is-current` takes the primary bar fill. Use for the orders or filters of one list.\n- `.ds-badge`: a small square label in the accent fill. `.ds-badge--quiet` is the secondary bar. `.ds-badge--success` (approved, updated), `.ds-badge--warning` (awaiting check, beta) and `.ds-badge--danger` (broken, sent back) are tints with an outline. `.ds-new` is bold text for a \"new\" remark.\n- `.ds-sidebar`: the rail's boxes. Each `.ds-sidebar__block` has a `.ds-sidebar__title`, a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows (`.ds-sidebar__rank` for a number, `.ds-sidebar__name` for the link, `.ds-sidebar__count` for a figure) and an optional `.ds-sidebar__foot` with a `.ds-sidebar__footlink`.\n- `.ds-notice`: a pale yellow line for archive news; `.ds-notice--error` is the error box with a `.ds-notice__title`. `.ds-notice__link` is a link inside either.\n- `.ds-pagination`: `.ds-pagination__label`, then small bordered `.ds-pagination__link` boxes; `is-current` for the current page. `.ds-toolbar` puts a count line on the left and the page numbers on the right.\n- `.ds-comment`: comments under a file, one ruled block: a `.ds-comment__head` strip per comment, then `.ds-comment__body` (`--alt`) with `.ds-comment__text` and an optional `.ds-comment__sig` signature line.\n- `.ds-dialog`: a confirmation box in the page flow with a 2px outline and a hard shadow: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`, on a `.ds-dialog__backdrop` band. It never floats over the page.\n- `.ds-empty`: a ruled block with one centred message and one button for a list with nothing in it: `.ds-empty__title`, `.ds-empty__body`, `.ds-empty__text`.\n- `.ds-footer`: the dark band closing the sheet: a `.ds-footer__row` with a `.ds-footer__group` of `.ds-footer__link` items and `.ds-footer__sep` marks on the left and the time line on the right.\n\n## Never\n\n- `row-gap <= 1px`: rows touch or are separated by a 1px line.\n- `block-gap <= 20px`: neighbouring blocks are 12px apart.\n- `content-width >= 85%`: the sheet takes about 96% of the viewport.\n- `font-size <= 18px`: 18px is the largest text measured, and only the brand name uses it.\n- `font-size >= 10px`: 10px is the smallest size this pack uses.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Verdana, Tahoma for controls, a monospace for code.\n- `letter-spacing <= 0px`: no tracking anywhere.\n- `uppercase-text <= 0%`: nothing is transformed to uppercase.\n- `underlined-links <= 20%`: links have no underline until hovered; between 0% and 8% in the dark and neutral references.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: no shadow in any reference.\n- `text-shadow = none`: no text shadow in any reference.\n- `gradient-fills <= 0%`: bars and buttons are flat colour.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 1px`: hairlines only.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new titled box from `.ds-panel`, a new row layout from `.ds-list` or `.ds-table`, a new strip from `.ds-nav__sub`, a new figure list from `.ds-spec`. Build it as a 1px `--color-border` outline on `--fill-panel`, with cells in the three surface colours `--space-1` apart and a title in `--fill-bar` or `--color-surface-strong`. Keep text tokens on the fills named above (bar text on bars, heading text on the strong surface, quiet links on cells). Use tokens only: no raw colours or lengths, no new radius, shadow or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). A file archive built on board software:\n one bar that carries the brand and the navigation, a full-width category\n directory, then a wide column beside a narrow rail. */\n:root {\n --size-page: 100%;\n --size-main: 440px;\n --size-rail: 220px;\n --size-thumb: 132px;\n --size-cell: 250px;\n --size-search: 150px;\n --size-count: 64px;\n --size-date: 104px;\n --size-row: 30px;\n --size-bar: 24px;\n --size-icon: 16px;\n --size-label: 200px;\n --size-field: 300px;\n --size-dialog: 60%;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 5px;\n --space-4: 8px;\n --space-5: 12px;\n --space-6: 18px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) var(--space-6);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The sheet every block sits on. */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\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.ds-page__body {\n padding: var(--space-5);\n}\n/* Small print, inside the sheet so it never sits on the page colour. */\n.ds-page__legal {\n margin: 0;\n padding: var(--space-3) var(--space-5) var(--space-4);\n text-align: center;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- nav: one primary bar with the brand and the sections, then a\n strip with the visitor line and the search box ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__head {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: stretch;\n gap: 0 var(--space-6);\n padding: 0 var(--space-5);\n background: var(--fill-bar);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n/* The mark on a button-dressed tile; the name takes the bar text colour\n because it stands on the primary bar. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 1.3);\n height: calc(var(--text-display) * 1.3);\n box-sizing: border-box;\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 76%;\n height: 76%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) transparent;\n border-bottom: 0;\n line-height: var(--line-heading);\n text-decoration: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n/* The current view's item, and the first item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#files\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#files:target) .ds-nav__link[href=\"#files\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#category:target) .ds-nav__link[href=\"#category\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#file:target) .ds-nav__link[href=\"#file\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#upload:target) .ds-nav__link[href=\"#upload\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#mine:target) .ds-nav__link[href=\"#mine\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-nav__sub {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-nav__sublink {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-nav__sublink:hover,\n.ds-nav__sublink.is-hover {\n text-decoration: none;\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search .ds-nav__field {\n width: var(--size-search);\n}\n\n/* ---------- hero: the featured file ---------- */\n.ds-hero {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__shot {\n flex: 1 0 var(--size-thumb);\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n padding: var(--space-4);\n background: var(--color-surface-alt);\n}\n.ds-hero__shot .ds-thumb {\n flex: 0 0 calc(var(--size-thumb) - var(--space-4) - var(--space-4));\n}\n.ds-hero__text {\n flex: 999 1 var(--size-cell);\n min-width: 0;\n box-sizing: border-box;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n}\n.ds-hero__kicker {\n display: block;\n color: var(--color-accent-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\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: 0;\n font-size: var(--text-base);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n}\n.ds-hero__aside {\n flex: 1 1 var(--size-rail);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n\n/* ---------- thumb: a screenshot placeholder drawn from the bar and cell\n colours, a small picture of a board skin ---------- */\n.ds-thumb {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n aspect-ratio: 4 / 3;\n box-sizing: border-box;\n padding: var(--space-1);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-thumb__bar {\n flex: 0 0 14%;\n background: var(--fill-bar);\n}\n.ds-thumb__strip {\n flex: 0 0 8%;\n background: var(--fill-bar-alt);\n}\n.ds-thumb__row {\n flex: 1 1 0;\n background: var(--color-surface-alt);\n}\n.ds-thumb__row--alt {\n background: var(--color-surface-strong);\n}\n.ds-shots {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--size-thumb), 1fr));\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4);\n list-style: none;\n background: var(--color-surface);\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-shots__item {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: center;\n}\n\n/* ---------- grid: the category directory ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--size-cell), 1fr));\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__title {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-content: start;\n gap: var(--space-1) var(--space-4);\n padding: var(--space-4);\n background: var(--color-fill-1);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n grid-row: 1 / span 3;\n color: var(--color-accent);\n}\n.ds-grid__name {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-grid__meta {\n display: block;\n color: var(--color-text);\n}\n.ds-grid__subs {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- list: file rows ---------- */\n.ds-list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-list__more {\n color: var(--color-bar-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n text-decoration: underline;\n}\n.ds-list__more:hover,\n.ds-list__more.is-hover {\n text-decoration: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: center;\n min-height: var(--size-row);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n}\n.ds-list__item.is-alt {\n background: var(--color-fill-3);\n}\n.ds-list__icon {\n color: var(--color-accent);\n}\n.ds-list__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__aside {\n font-size: var(--text-small);\n text-align: right;\n white-space: nowrap;\n}\n\n/* ---------- rank: the numbered list of a rail box ---------- */\n.ds-sidebar__rank {\n flex: none;\n min-width: var(--size-icon);\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__name {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n/* ---------- spec: label and value rows of a file ---------- */\n.ds-spec {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: var(--space-1);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-spec__label {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n.ds-spec__value {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n padding: var(--space-4) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-bar-text);\n}\n.ds-footer__sep {\n color: var(--color-bar-alt);\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/* The column of blocks inside a view, one block gap apart. */\n.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-sprite {\n position: absolute;\n}\n.ds-icon {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-block {\n display: block;\n}\n/* Lets a wide table scroll inside its own box on a narrow window. */\n.ds-scroll {\n max-width: 100%;\n overflow-x: auto;\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/* Dark links for tools, meta and member names. */\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- page header: the head of an inner page ---------- */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-4) var(--space-6);\n}\n.ds-page-header__text {\n flex: 1 1 50%;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__desc {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n color: var(--color-heading);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n padding: var(--space-4) 0 0;\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-text);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose hr {\n height: 0;\n margin: var(--space-4) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n/* The plain system button. */\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-input-border);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-disabled);\n}\n/* Destructive action: the error pair, error text on the error surface with\n an error outline. It does not depend on the primary button's colours. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-form__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-form__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n}\n.ds-form__label {\n flex: 1 1 var(--size-label);\n box-sizing: border-box;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n flex: 999 1 var(--size-field);\n min-width: 0;\n box-sizing: border-box;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n letter-spacing: 0;\n text-transform: none;\n text-shadow: none;\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Status labels: a tint of the status colour over the cell surface, with body\n text and the status colour as the outline, so they read under any palette. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 30%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));\n border-color: var(--color-danger);\n}\n.ds-new {\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- notice ---------- */\n/* The edge is a half mix of the accent and the notice colour. */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 50%, var(--color-notice));\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n/* A link inside a notice takes the notice text colour and stays underlined. */\n.ds-notice__link {\n color: inherit;\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n/* Tools on the left, page numbers on the right. */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n display: grid;\n gap: var(--space-1);\n width: var(--size-dialog);\n min-width: min(100%, var(--size-field));\n max-width: 100%;\n box-sizing: border-box;\n margin: 0 auto;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n\n/* ---------- empty state: a single message row ---------- */\n.ds-empty {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-empty__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n/* Primary bar as the title strip: main blocks. */\n.ds-panel__title--bar {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__sub {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-panel__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-panel__body--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__line:last-child {\n margin: 0;\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: separate;\n border-spacing: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-table th {\n height: var(--size-bar);\n padding: 0 var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__head--left {\n text-align: left;\n}\n.ds-table td {\n height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n vertical-align: middle;\n}\n/* The era's alternating row colour. */\n.ds-table .ds-table__row--alt td {\n background: var(--color-fill-3);\n}\n.ds-table .ds-table__num,\n.ds-table .ds-table__row--alt .ds-table__num,\n.ds-table .ds-table__last,\n.ds-table .ds-table__row--alt .ds-table__last {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n width: var(--size-count);\n font-size: var(--text-base);\n text-align: center;\n white-space: nowrap;\n}\n.ds-table .ds-table__last {\n width: var(--size-date);\n white-space: nowrap;\n}\n/* Group row: the strongest surface, heading text. */\n.ds-table .ds-table__group td {\n height: var(--size-bar);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-table__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-table__desc {\n display: block;\n padding: var(--space-1) 0 0;\n}\n.ds-table__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- stats: a strip of count cells ---------- */\n.ds-stat {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__title {\n flex: 0 0 100%;\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-stat__item {\n flex: 1 1 var(--size-count);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-stat__label {\n display: block;\n padding: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- two-column area: a working column and a rail ---------- */\n.ds-layout {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-layout__main {\n flex: 999 1 var(--size-main);\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-layout__rail {\n flex: 1 1 var(--size-rail);\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-sidebar__block {\n background: var(--color-surface);\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-sidebar__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-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.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-sidebar__item:last-child {\n border-bottom: 0;\n}\n.ds-sidebar__count {\n flex: none;\n color: var(--color-text-muted);\n}\n.ds-sidebar__foot {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-sidebar__footlink {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__footlink:hover,\n.ds-sidebar__footlink.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- comments: short replies under a page ---------- */\n.ds-comment {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-comment__head {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-comment__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-comment__body--alt {\n background: var(--color-fill-3);\n}\n.ds-comment__text {\n margin: 0;\n}\n.ds-comment__sig {\n margin: var(--space-3) 0 0;\n padding: var(--space-2) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* The current item also carries a weight and a bar that a token set cannot reduce to the bar's own fill. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#files\"],\n.ds-page:has(#files:target) .ds-nav__link[href=\"#files\"],\n.ds-page:has(#category:target) .ds-nav__link[href=\"#category\"],\n.ds-page:has(#file:target) .ds-nav__link[href=\"#file\"],\n.ds-page:has(#upload:target) .ds-nav__link[href=\"#upload\"],\n.ds-page:has(#mine:target) .ds-nav__link[href=\"#mine\"] {\n font-weight: var(--weight-bold, 700);\n}\n\n/* ---------- progress: a quota or poll bar ---------- */\n.ds-progress {\n display: block;\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__label {\n display: block;\n margin-bottom: var(--space-1);\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-meter);\n box-sizing: border-box;\n appearance: none;\n -webkit-appearance: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--color-input);\n color: var(--color-accent);\n overflow: hidden;\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-input);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent);\n}\n\n/* ---------- accordion: a collapsible category or FAQ entry ---------- */\n.ds-accordion {\n margin: 0 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-canvas);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-1) var(--space-2);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body {\n margin: 0;\n padding: var(--space-2);\n}\n.ds-accordion__list {\n margin: 0;\n padding: 0 0 0 var(--space-4);\n}\n\n/* ---------- avatar: the picture under a post author's name ---------- */\n.ds-avatar {\n display: flex;\n flex: none;\n align-items: flex-end;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n box-sizing: border-box;\n margin: var(--space-1) 0;\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-avatar svg {\n display: block;\n width: 80%;\n height: 80%;\n}\n\n:root {\n --size-avatar: 56px;\n --size-meter: 12px;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: file archive specimen\n\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n
\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n Welcome back, oldpine. You have 2 files waiting for approval. Log out\n
\n \n \n \n
\n
\n
\n\n
\n\n \n
\n
\n\n
\n
\n \n
\n
\n File of the week\n

Harvest, a warm skin for wide boards

\n

Sand cells, brown title bars and a full set of 34 buttons in two languages. Tested on the three most used board packages, with a narrow variant for 800 pixel screens.

\n

Download (412 KB) Read the description and 18 comments

\n
\n

\n Version 1.4, updated 12 Oct 2005\n By oldpine\n Downloads 6,204\n Rating 4.6 of 5 from 73 votes\n

\n
\n\n

Archive news: uploads are checked by a moderator before they appear, usually within a day. Files larger than 2 MB go through the upload form like any other.

\n\n
\n

Categories 1,286 files

\n
\n \n Board skins (412)\n Complete skins: style sheet, templates and buttons.\n Light, Dark, Seasonal\n
\n
\n \n Button sets (238)\n Reply, quote, edit and profile buttons.\n English, Translated, Blank\n
\n
\n \n Smiley packs (197)\n Sets of 20 to 200 smileys with their code list.\n Classic, Large, Animated\n
\n
\n \n Rank images (121)\n Pips, stars and bars for post count ranks.\n Stars, Bars, Staff\n
\n
\n \n Avatar galleries (164)\n Ready-made avatars at 64 and 80 pixels.\n Abstract, Nature, Pixel\n
\n
\n \n Add-ons (154)\n Small changes to the board itself, with install notes.\n Index, Posting, Profile\n
\n
\n\n
\n
\n
    \n
  • Latest files All new files
    • \n
  • \n \n
    Harvest 1.4 New\n Board skins, by oldpine. Narrow variant added, quote box fixed.
    \n 412 KBtoday, 09:14\n
    • \n
  • \n \n
    Plain buttons, blank set New\n Button sets, by tessa. 34 blank buttons with the source file for lettering.
    \n 96 KBtoday, 07:40\n
    • \n
  • \n \n
    Quick reply box 0.9 Beta\n Add-ons, by marek_v. A reply box under every thread, three template edits.
    \n 14 KByesterday, 22:05\n
    • \n
  • \n \n
    Small stars, five ranks\n Rank images, by quillon. Gold, silver and staff versions.
    \n 22 KByesterday, 18:31\n
    • \n
  • \n \n
    Slate, a dark skin Updated\n Board skins, by harrow. Now covers the private message pages.
    \n 388 KB10 Oct 2005\n
    • \n
\n
\n
\n \n
\n
\n\n
\n
1,286files
\n
214,930downloads
\n
342uploaders
\n
318 MBin the archive
\n
17new this week
\n
\n\n
\n

Who is browsing the archive

\n
\n

23 visitors in the last fifteen minutes: 9 members and 14 guests.

\n

oldpine, tessa, marek_v, quillon, harrow, dunmore, fenwick, ilse, corbin

\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Files
    4. \n
  4. »
    5. \n
  5. Board skins
    6. \n
\n\n
\n
\n

Board skins

\n

Complete skins: style sheet, templates and buttons. 412 files, kept by harrow and tessa.

\n
\n
Upload a skin
\n
\n\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FileVersionSizeDownloadsRatingUpdated
Light skins
Harvest NewSand cells and brown title bars, with a narrow variant.1.4412 KB6,2044.612 Oct 2005by oldpine
Paper ApprovedWhite sheet, grey rules, one blue. Loads without a single image.2.061 KB2,1184.28 Oct 2005by tessa
Orchard Awaiting checkGreen bars on cream, with matching rank images.0.8290 KB0nonetoday, 08:02by ilse
Dark skins
SlateCharcoal cells with pale text. Covers the private message pages.1.2388 KB4,3904.410 Oct 2005by harrow
Lantern Broken archiveBlack sheet with amber links. The archive will not unpack; reported twice.1.0204 KB8733.12 Sep 2005by corbin
Night shiftNavy cells and orange bars, made for long evenings.1.1344 KB1,5604.021 Aug 2005by fenwick
\n
\n\n
\n Showing files 1 to 6 of 412. Upload a skin or go back to the categories.\n \n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Board skins
    4. \n
  4. »
    5. \n
  5. Harvest
    6. \n
\n\n
\n
\n

Harvest

\n

A warm skin for wide boards. Version 1.4 by oldpine, updated 12 Oct 2005.

\n
\n
\n Download (412 KB)\n Mirror\n Delete\n \n
\n
\n\n
\n
\n

Delete this file?

\n
\n

Harvest 1.4 and its 18 comments will be removed from the archive. The download count is lost. This cannot be undone.

\n
\n Delete the file\n Keep it\n
\n
\n
\n
\n\n
\n
\n
    \n
  • Board index
    • \n
  • Thread view
    • \n
  • Posting form
    • \n
\n\n
\n

About this skin

\n

Harvest was drawn for boards that run wide: the cells are sand, the title bars brown, and links are a rust red that stays readable on both row colours. It ships with 34 buttons in English and German and a blank set.

\n

Installing

\n

Unpack the archive into the styles/ folder of the board and pick the skin in the administration panel.

\n
    \n
  • Copy harvest/ with its three sub-folders, keeping the names.
    • \n
  • Refresh the template cache, or the old buttons stay.
    • \n
  • For 800 pixel screens choose the variant named harvest-narrow.
    • \n
\n

Changes in 1.4

\n

The quote box no longer breaks out of narrow posts, and the private message pages use the same row colours as the rest.

\n
\n

See also: all board skins, Harvest buttons, blank set (visited), the matching rank images (hover), the support thread (active).

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

File details

\n
\n
Version
1.4
\n
Size
412 KB, zip
\n
Downloads
6,204
\n
Rating
4.6 of 5 (73 votes)
\n
Status
Approved
\n
Licence
Free to use, keep the credit line
\n
\n
\n \n
\n

Version history

\n
\n

1.4, 12 Oct 2005: narrow variant, quote box.

\n

1.3, 2 Sep 2005: German buttons.

\n

1.0, 14 Jun 2005: first upload.

\n
\n
\n
\n
\n\n
\n
tessa wrote12 Oct 2005, 11:20
\n
\n

The narrow variant fixed the last-post column for me. Works on a board with 40 forums without any edits.

\n

Blank buttons for every skin, ask in the button thread.

\n
\n
marek_v wrote12 Oct 2005, 14:02
\n
\n

The jump box still takes the old colours when the cache is not refreshed. It is in the notes, but people miss it.

\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Files
    4. \n
  4. »
    5. \n
  5. Upload a file
    6. \n
\n\n
\n
\n

Upload a file

\n

A moderator looks at every upload before it is listed. You will get a private message when it is approved.

\n
\n
My files
\n
\n\n

The file was not uploaded. One field needs your attention: the archive is missing its screenshot. Nothing has been saved yet.

\n\n
\n
\n
\n

File details

\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n \n No file with this name was found in the archive.\n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n
\n
\n

Before you upload

\n
\n

One zip archive, 2 MB at most, with a readme and one screenshot.

\n

Only your own work, or work whose licence allows sharing. Keep the credit lines of others.

\n

New: a file can be replaced from My files without losing its comments.

\n
\n
\n
\n

After you send it

\n
\n

The file shows in My files as awaiting check. Only you and the moderators can open it.

\n

A file that is sent back keeps its page; correct it and send it again.

\n
\n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Files
    4. \n
  4. »
    5. \n
  5. My files
    6. \n
\n\n
\n
\n

My files

\n

Everything oldpine has uploaded, and the files kept as favourites.

\n
\n
Upload a file
\n
\n\n
\n

Your figures

\n
7files listed
\n
2awaiting approval
\n
11,318downloads
\n
4.4average rating
\n
\n\n
\n
\n \n
\n
\n
\n

Favourites

\n
\n

You have not kept any file as a favourite yet.

\n Browse the files\n
\n
\n
\n
\n\n
\n
\n\n
\n\n \n

chronoskin file archive. Files belong to their authors; the archive only keeps them.

\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.bulletin-board-forums.portal.s07.p03.t04.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bulletin-board-forums\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bb-7343\",\n \"short\": \"v1-bb-7343\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e5e5e5;\n --color-canvas: #ffffff;\n --color-surface: #efefef;\n --color-surface-alt: #dee3e7;\n --color-surface-strong: #d1d7dc;\n --color-bar: #006699;\n --color-bar-text: #ffa34f;\n --color-bar-alt: #98aab1;\n --color-bar-alt-text: #000000;\n --color-inverse: #006699;\n --color-inverse-text: #e8eef2;\n --color-text: #000000;\n --color-text-muted: #444444;\n --color-heading: #006699;\n --color-heading-alt: #333333;\n --color-link: #006699;\n --color-link-quiet: #006699;\n --color-link-visited: #4691b6;\n --color-link-hover: #333333;\n --color-link-active: #000000;\n --color-border: #98aab1;\n --color-border-strong: #006699;\n --color-border-muted: #d1d7dc;\n --color-accent: #006699;\n --color-accent-text: #ffffff;\n --color-accent-alt: #006600;\n --color-fill-1: #efefef;\n --color-fill-2: #d1d7dc;\n --color-fill-3: #dee3e7;\n --color-fill-4: #e8eef2;\n --color-button: #006699;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffa34f;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #98aab1;\n --color-disabled: #e5e5e5;\n --color-disabled-text: #98aab1;\n --color-danger: #c60202;\n --color-danger-surface: #fddbcc;\n --color-success: #006600;\n --color-warning: #ffa34f;\n --color-notice: #e8eef2;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #d1d7dc;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-heading: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-ui: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 11px;\n --text-h3: 11px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-border-strong);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 18%);\n --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary), var(--color-surface-strong) 50%);\n --fill-input: color-mix(in srgb, var(--color-input), var(--color-surface) 50%);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }