{ "id": "v1-bb-6b68", "long_id": "v1.bulletin-board-forums.forum.s06.p11.t06.u08", "name": "Bulletin board forum, clan site front page, 2002 to 2007", "era": { "slug": "bulletin-board-forums", "code": "bb", "name": "Bulletin-board forums", "years": [ 2002, 2007 ], "description": "Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana." }, "archetype": "forum", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the clan or fan site that small communities built on top of their board software between about 2003 and 2007: a dark banner with the name, a menu box at the head of a tinted rail that runs down the left side of every page, and beside it news posts with comment counts, a roster table, a poll and a shoutbox. Inner pages keep the rail and show one working column: the roster, the match results, a match report with its comments, the application form. Pale grey-teal title strips with dark text sit on near-white cells in 11px Tahoma, links are underlined, boxes are square with a light inner line, and nothing moves.", "url": "https://chrono.skin/s/v1-bb-6b68", "preview_url": "https://chrono.skin/s/v1-bb-6b68/specimen.html", "files": { "STYLE.md": "# Bulletin board forum, clan site front page, 2002 to 2007\n\n## Summary\n\nThis is the clan or fan site that small communities built on top of their board software between about 2003 and 2007: a dark banner with the name, a menu box at the head of a tinted rail that runs down the left side of every page, and beside it news posts with comment counts, a roster table, a poll and a shoutbox. Inner pages keep the rail and show one working column: the roster, the match results, a match report with its comments, the application form. Pale grey-teal title strips with dark text sit on near-white cells in 11px Tahoma, links are underlined, boxes are square with a light inner line, and nothing moves.\n\n## Layout\n\n- The sheet `.ds-page__frame` is `--size-page` (88%) wide and centred, with a 1px `--color-border-strong` outline; the page colour shows as a band on both sides and `.ds-page` has `--space-6` (16px) above and below. Designed at 1024px. Never let the sheet touch the window edge.\n- Order from the top, all inside the sheet: the banner `.ds-banner` in the inverse fill, at least `--size-banner` (78px) tall, brand and tagline on the left and three short status lines on the right; the strip `.ds-strip` in the secondary bar with the date on the left and the member links on the right; then `.ds-page__body`, a grid of the rail `.ds-page__rail` (`--size-rail`, 178px, tinted `--color-surface-alt` for its full height, a 1px rule on its right) and `.ds-page__main`; then the footer band and the small print `.ds-page__legal`. Nothing with text sits on the page colour.\n- The rail is written once and stays on every page. From the top, `--space-4` apart: the menu box `.ds-nav` (title strip, one row per section, the current one in the accent fill), then `.ds-sidebar` with the shoutbox and a box of links. There is no horizontal navigation bar.\n- The front page (home view) in `.ds-page__main`, blocks `--space-5` apart: the welcome box `.ds-hero` (text and buttons on the left, the next match in a `--size-next`, 230px, tinted cell on the right), an optional `.ds-notice`, the `.ds-stat` row of four boxed figures, the news `.ds-list` (one box per post, `--space-4` apart), then `.ds-split`: the roster `.ds-table` in the wide column and the poll `.ds-panel` in the `--size-side` (32%) column.\n- Inner pages keep the banner, strip, rail and footer and drop the hero. `.ds-page__main` is one column, from the top: `.ds-breadcrumb` (a plain small line starting \"You are here:\"), `.ds-page-header` in place of the hero (an open title with a small accent square before it, one muted line of description, the main action bottom-right, closed by a 1px rule), an error `.ds-notice` when there is one, then the working blocks `--space-5` apart. The roster page has the squad `.ds-grid`, `.ds-tabs`, the full `.ds-table` and a `.ds-toolbar` with links on the left and `.ds-pagination` on the right. The match page has the next-match `.ds-panel` with its buttons, the confirmation `.ds-dialog` in the flow under it, tabs, the results table and an `.ds-empty` block. A report and the application form use `.ds-split`: text or form in the wide column, one or two `.ds-panel` boxes in the narrow one.\n- Views. The specimen is a five-screen example; the menu box has one row per view and marks the current one. `news` (home) is the front page: welcome box with the next match, notice, the four figures, three news posts, the first team roster and the poll. `roster` is the member list: squad cards, squad tabs, the roster table and page links. `matches` is the match page: next match and line-up buttons, the withdraw confirmation, result tabs and table, and an empty scrim list. `report` is one news post in full with its comments beside the match facts and related links. `join` is the trial application as it came back with an error, beside two boxes of notes.\n- Table columns: text columns share the width; a numeric column is `--size-num` (58px, right-aligned), a date column `--size-date` (104px). Rows are at least `--size-row` (26px); title strips and head rows `--size-bar` (22px). Alternate rows take `is-alt`.\n- Spacing scale: `--space-1` 1px, `--space-2` 2px, `--space-3` 4px, `--space-4` 8px, `--space-5` 12px, `--space-6` 16px.\n - `--space-1`: the gap between cells inside a bordered block and between menu rows.\n - `--space-2`: vertical padding of strips, cells, buttons and inputs; gap between stacked small lines.\n - `--space-3`: vertical padding of menu rows and form rows; gap between inline items and between comments.\n - `--space-4`: horizontal padding of cells and strips, padding of panel bodies and the rail, the gap between rail boxes, news posts, grid cards and buttons.\n - `--space-5`: padding of the main column and the hero, and the gap between neighbouring blocks and columns. This is the only block gap in the main column.\n - `--space-6`: page padding above and below the sheet, banner padding, list indent, padding of the empty state.\n- Form rows are open: a `--size-label` (28%) label and the field on the box surface, divided by faint rules; text inputs are `--size-field` (240px) unless `--wide`; the action row is right-aligned. A dialog is `--size-dialog` (62%) of the main column, centred in the flow. Meters are `--size-meter` (8px) high.\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-ui` are Tahoma; `--font-heading` is Verdana, for the wordmark, page and box titles, news titles and figures. `--font-mono` is for inline code only.\n- Sizes: `--text-small` 10px for meta, strips, the rail lists and captions; `--text-base` and `--text-ui` 11px for running text, table cells, buttons, inputs and the menu; `--text-h2` 11px bold for box titles; `--text-large` 12px for news titles and card names; `--text-h1` 14px for the page title, the hero title and the figures; `--text-display` 18px for the wordmark only. Nothing is larger than 18px.\n- `--line-body` is 1.45, `--line-heading` 1.3. Headings are bold, never uppercase, no tracking. `--weight-ui` is 400: menu rows and tabs are not bold until current; buttons are always bold.\n- Links are underlined at rest and lose the underline when hovered (`--link-decoration`, `--link-decoration-hover`), turning `--color-link-hover`. Text links and titles in tables and cards use `--color-link`; menu rows, bylines and comment authors use `--color-link-quiet`. News titles are `--color-heading`.\n- Surfaces: `--color-page` beside the sheet, `--color-canvas` the sheet and, through `--fill-panel`, the 1px gaps. `--color-surface` is the body of every box, table cells and menu rows; `--color-surface-alt` the rail, the next-match cell, the figures, panel and form foot rows and meter tracks; `--color-surface-strong`, always with `--color-heading` text, the head strip of a news post or comment and the table head row.\n- Bars: `--fill-bar` with `--color-bar-text` for box titles (menu, rail boxes, panels, form, dialog, table caption). `--fill-bar-alt` with `--color-bar-alt-text` for the strip under the banner, the tab row and quiet badges. `--fill-inverse` with `--color-inverse-text` for the banner and the footer; the wordmark is `--color-inverse-text`.\n- Borders: boxes have a 1px `--color-border` outline; `--color-border-muted` divides rows inside a box; `--color-border-strong` is the sheet outline, the rules around the strip, the top edge of a squad card (`--border-width-strong`), the dialog outline and button outlines. Inputs use `--color-input-border`.\n- Markers: `--fill-accent` with `--color-accent-text` for the current menu row, the badge, the page title square and meter bars; `--color-accent-alt` for a bold remark (`.ds-new`). Status badges are a `color-mix()` of 26% of the status colour over `--color-surface`, with `--color-text` and a 1px solid outline in the status colour: won, drawn, lost; active, on trial, unavailable. The destructive button is `--color-danger` text on `--color-danger-surface` with a `--color-danger` outline.\n- `--color-fill-1` to `--color-fill-4` colour the squad cards; `--color-fill-3` is also the alternate table row.\n- Every box takes `--shadow-panel`, which in this surface set is a light 1px inner line; the hero and the dialog take `--shadow-dialog`, a hard 3px ring.\n- One-off values outside the token set: the status badge tints above; the notice edge is a `color-mix()` of 40% `--color-accent` in `--color-notice`; footer separators are at 0.6 opacity; poll bars carry their share as a percentage width.\n- Tahoma and Verdana are system fonts; no substitution was needed.\n\n- A royal blue gaming skin: `--color-page` is the saturated blue #17479e and the board is a light sheet on it, `--color-canvas` #ececec.\n- Cells are pale steel blue: `--color-surface` #c6d2de for the main cell, `--color-surface-alt` #bacbdc for poster panels, status, count and last-post cells and form labels, `--color-surface-strong` #98b5e2 for category rows and title strips.\n- `--color-bar` is the page blue #17479e with white `--color-bar-text`. `--color-bar-alt` is the bright sky blue #40a2e5 and takes black `--color-bar-alt-text`, because white does not read on it. The footer band is `--color-inverse` #184078 with white text.\n- Text is `--color-text` #000000; `--color-text-muted` is the dark blue #183870, so it only reads on the light surfaces. `--color-heading` is #000099, `--color-heading-alt` the dark blue #183870.\n- `--color-link` is the deep blue #000099; `--color-link-quiet` is black, for titles and names; `--color-link-visited` #184078; a hovered link turns `--color-link-hover` #2060a0.\n- `--color-border` is the light blue #98cafd, which also fills the 1px gaps between cells; `--color-border-strong` the page blue #17479e; `--color-border-muted` #98b5e2. Inputs use `--color-input-border` #767676.\n- Markers: `--color-accent` #2060a0 with white text for the badge and new-post icons; `--color-accent-alt` is the green #008000. `--color-danger` #a62a2a on `--color-danger-surface` #fddbcc, `--color-success` #008000, `--color-warning` #ffa34f. `--color-notice` is white, so a notice stands out from the grey sheet.\n- The primary button is the page blue with white text and a pale blue hover text; the secondary button is the sheet grey #ececec.\n- `--color-fill-1` to `--color-fill-4` are #c6d2de, #bacbdc, #ececec and #98b5e2.\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` is the grid of `.ds-page__rail` and `.ds-page__main`; the views go in `.ds-page__main`, each a `.ds-view` section (`.ds-view--home` for the front page) whose blocks go in `.ds-view__body`. `.ds-page__legal` is the small print. `.ds-split` with `.ds-split__col` makes a wide and a narrow column inside a view. `.ds-block` puts a span on its own line.\n- `.ds-banner`: the site header band. `.ds-banner__brand` holds the `.ds-brand` and a `.ds-banner__tagline`; `.ds-banner__aside` is a right-aligned column of short status lines with a bold `.ds-banner__link`. `.ds-strip` is the line under it with `.ds-strip__link` items.\n- `.ds-brand`: the site's mark and name in the banner, linking home; 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`), twice `--text-display`, the mark drawn with square caps and a heavier stroke. `.ds-brand__name` is the name in `--font-heading` at `--text-display`, coloured `--color-inverse-text` for the banner it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-nav`: the site navigation, a menu box at the head of the rail. `.ds-nav__title` is its title strip, `.ds-nav__menu` the list, `.ds-nav__link` one row; the current row takes `is-current` (accent fill, bold).\n- `.ds-sidebar`: the other boxes of the rail. Each `.ds-sidebar__block` has a `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` links. A shout is `.ds-sidebar__item--shout` with `.ds-sidebar__who` and `.ds-sidebar__when`; `.ds-sidebar__form` is the one-line field and button under it.\n- `.ds-breadcrumb`: a plain small line: `.ds-breadcrumb__label`, `.ds-breadcrumb__link`, `.ds-breadcrumb__sep`, a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome box of the front page. `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` with the main action and one secondary button; `.ds-hero__aside` is the tinted cell for the next event, with `.ds-hero__label` and `.ds-hero__versus`. Never a banner image, never taller than its text.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__title` (the accent square is drawn by the class), `.ds-page-header__desc`, and `.ds-page-header__action` with one button on the right.\n- `.ds-stat`: the row of summary figures: four boxed cells in one bordered block. Each `.ds-stat__item` has a `.ds-stat__value` in the heading font over a muted `.ds-stat__label`. `.ds-stat` is the row.\n- `.ds-list`: news posts, one bordered box per `.ds-list__item`: `.ds-list__head` (the `.ds-list__title`, the byline, the date on the right), `.ds-list__body` (the excerpt) and `.ds-list__meta` (views, comment count, read more).\n- `.ds-table`: roster, results and any data table. A `caption` is its title bar; `th` is a pale strong row with heading text; rows alternate with `is-alt`; `.ds-table__num` and `.ds-table__date` cells; `.ds-table__title` is the bold link of a row, `.ds-table__meta` a muted remark after it.\n- `.ds-panel`: any titled box: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__line` paragraphs, and a tinted `.ds-panel__foot` row for a count and a button. A poll answer is `.ds-poll` (label, share, then a `.ds-meter` with its `.ds-meter__bar`, `--2` and `--3` for the other shares).\n- `.ds-grid`: four squad or section cards, `--space-4` apart, each a `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with a strong top edge, a `.ds-grid__name` and `.ds-grid__meta` lines.\n- `.ds-tabs`: a row of links on the secondary bar; `.ds-tabs__tab`, and `is-current` is a canvas cell with bold heading text. Use for the views of one table.\n- `.ds-badge`: a small square label in the accent fill (captain, count). `.ds-badge--quiet` is the secondary bar. The status variants `.ds-badge--success` (won, active), `.ds-badge--warning` (drawn, on trial, open) and `.ds-badge--danger` (lost, unavailable) are a pale tint with a 1px outline. `.ds-new` is a bold remark in the second accent.\n- `.ds-comment`: a reply under a post: `.ds-comment__head` (author, date) and `.ds-comment__body`. Stack them in `.ds-comments`.\n- `.ds-prose`: long text such as a match report: h1, h2, h3, p, ul, strong, code.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for bylines and meta; `.ds-link--strong` for bold.\n- `.ds-button`: the primary action, always bold. `.ds-button--secondary` is the pale button; `.ds-button--danger` the destructive action, once per confirmation; `is-hover`, `is-active`, `is-focus`, `is-disabled` (or `disabled`). Group buttons in `.ds-buttons`.\n- `.ds-form`: a bordered box: `.ds-form__title`, a `.ds-form__body` of open `.ds-form__row` lines (a `.ds-form__label` with an optional `.ds-form__hint`, then the field), and `.ds-form__actions`. Controls take `.ds-form__input` (`--wide`, `--auto`, `--grow` inside a flex row, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`.\n- `.ds-notice`: a pale line for information; `.ds-notice--error` is the error box with a `.ds-notice__title`.\n- `.ds-pagination`: a line of page links: `.ds-pagination__label`, `.ds-pagination__link`; `is-current` is a small bordered cell. `.ds-toolbar` puts links or buttons on the left and the page links on the right.\n- `.ds-dialog`: a confirmation box in the page flow, strong outline, `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and centred `.ds-dialog__actions`. `.ds-dialog__backdrop` is a flat band in the overlay colour. It never floats over the page.\n- `.ds-empty`: a bordered box with a centred `.ds-empty__title`, one muted `.ds-empty__text` and one button.\n- `.ds-footer`: the inverse band closing the sheet: a centred `.ds-footer__row` of `.ds-footer__link` items with `.ds-footer__sep` between them, and a `.ds-footer__line` under it.\n\n## Never\n\n- `row-gap <= 8px`: table rows are 1px apart; news posts are separate boxes 8px apart.\n- `block-gap <= 20px`: neighbouring blocks are 12px apart.\n- `content-width >= 80%`: the sheet takes 88% of the viewport; never a narrow column.\n- `font-size <= 18px`: only the wordmark is 18px.\n- `font-size >= 10px`: 10px is the smallest size.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Tahoma, Verdana for headings, a monospace for code.\n- `letter-spacing <= 0px`: no tracking.\n- `uppercase-text <= 0%`: nothing is transformed to uppercase.\n- `underlined-links >= 50%`: links are underlined; 88% to 94% in the references this follows.\n- `border-radius <= 0px`: every box is square in all references.\n- `box-shadow-blur <= 0px`: the only shadows are hard one-pixel highlights inside buttons and inputs.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 2px`: 1px everywhere, 2px on emphasised edges and event marks.\n- `gradient-fills <= 25%`: the gloss is on bars, tabs, buttons and inputs only.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new rail box from `.ds-sidebar__block`, a new feed from `.ds-list`, a new side box from `.ds-panel`, a new data view from `.ds-table`. Build it as a 1px `--color-border` outline on `--fill-panel` with `--space-1` of padding and gap, a title in `--fill-bar` with `--color-bar-text` or a head strip in `--color-surface-strong` with `--color-heading` text, and a body in `--color-surface`. Keep text on the fills it already sits on in the specimen and never place text on the page colour. 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. New site sections get a row in the menu box; new always-visible boxes go into the rail under it; everything else goes into the main column.\n", "components.css": "/* Layout tokens (structure part). A clan or fan site run on board software,\n 2003 to 2007: a banner, a menu rail down the left side of every page, and\n news, roster and match pages beside it. */\n:root {\n --size-page: 88%;\n --size-rail: 178px;\n --size-banner: 78px;\n --size-next: 230px;\n --size-side: 32%;\n --size-num: 58px;\n --size-date: 104px;\n --size-row: 26px;\n --size-bar: 22px;\n --size-icon: 9px;\n --size-meter: 8px;\n --size-label: 28%;\n --size-field: 240px;\n --size-dialog: 62%;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 8px;\n --space-5: 12px;\n --space-6: 16px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-6) 0;\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 centred sheet: banner, strip, rail and main, footer. */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n margin: 0 auto;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-page__body {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n}\n/* The rail runs the full height of the body as one tinted column. */\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-4);\n min-width: 0;\n background: var(--color-surface-alt);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__main {\n padding: var(--space-5);\n}\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/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- banner: the site header ---------- */\n.ds-banner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n min-height: var(--size-banner);\n box-sizing: border-box;\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n}\n.ds-banner__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 2);\n height: calc(var(--text-display) * 2);\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: 74%;\n height: 74%;\n}\n.ds-brand__name {\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-banner__tagline {\n font-size: var(--text-small);\n}\n.ds-banner__aside {\n font-size: var(--text-small);\n text-align: right;\n}\n.ds-banner__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-banner__link:hover,\n.ds-banner__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The line under the banner: date left, member links right. */\n.ds-strip {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 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-top: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-strip__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-strip__link:hover,\n.ds-strip__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- nav: the menu box at the head of the rail ---------- */\n.ds-nav {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-nav__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-nav__menu {\n display: grid;\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-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n/* The current view's item, and the news item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#news\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-page:has(#roster:target) .ds-nav__link[href=\"#roster\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-page:has(#matches:target) .ds-nav__link[href=\"#matches\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-page:has(#report:target) .ds-nav__link[href=\"#report\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- sidebar: the other boxes of the rail ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-sidebar__block {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n}\n/* A shout: who, when, what. */\n.ds-sidebar__item--shout {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__who {\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__when {\n color: var(--color-text-muted);\n}\n.ds-sidebar__form {\n display: flex;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n\n/* ---------- breadcrumb: a plain small line ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-breadcrumb__label {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the welcome box with the next match ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-next);\n gap: var(--space-5);\n padding: var(--space-5);\n background: var(--color-surface);\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 0 var(--space-3);\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}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: var(--space-4) 0 0;\n}\n.ds-hero__aside {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-hero__label {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-hero__versus {\n display: block;\n padding: var(--space-2) 0;\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header: the head of an inner page ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__title {\n display: flex;\n align-items: center;\n gap: var(--space-4);\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/* The small accent square before a page title. */\n.ds-page-header__title::before {\n content: \"\";\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--fill-accent);\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/* ---------- stats: boxed figures ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__item {\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-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- main column plus a narrower one ---------- */\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-split__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n\n/* ---------- list: news posts, one box each ---------- */\n.ds-list {\n display: grid;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\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-list__head {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-small);\n}\n.ds-list__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__body {\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface);\n}\n.ds-list__meta {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n\n/* ---------- table: roster and results ---------- */\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 caption {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\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 text-align: left;\n text-shadow: var(--shadow-text);\n}\n.ds-table th {\n height: var(--size-bar);\n padding: 0 var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n white-space: nowrap;\n}\n.ds-table td {\n height: var(--size-row);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n vertical-align: middle;\n}\n.ds-table .is-alt td {\n background: var(--color-fill-3);\n}\n.ds-table .ds-table__num {\n width: var(--size-num);\n text-align: right;\n white-space: nowrap;\n}\n.ds-table .ds-table__date {\n width: var(--size-date);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-table__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\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__meta {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--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-panel__body {\n padding: var(--space-4);\n background: var(--color-surface);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__line:last-child {\n margin: 0;\n}\n.ds-panel__foot {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n/* A poll answer: label, share, bar. */\n.ds-poll {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-meter {\n grid-column: 1 / -1;\n display: block;\n height: var(--size-meter);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-meter__bar {\n display: block;\n width: 46%;\n height: 100%;\n background: var(--fill-accent);\n}\n.ds-meter__bar--2 {\n width: 31%;\n}\n.ds-meter__bar--3 {\n width: 23%;\n}\n\n/* ---------- grid: squad cards ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-small);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__name {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-link);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n text-decoration: var(--link-decoration);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs: links on the secondary bar ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2) var(--space-2) 0;\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\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(--color-canvas);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\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. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n border: var(--border-width) solid var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 26%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 26%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 26%, 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/* ---------- comment: a reply under a news post ---------- */\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 box-shadow: var(--shadow-panel);\n}\n.ds-comment__head {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-small);\n}\n.ds-comment__body {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n.ds-comments {\n display: grid;\n gap: var(--space-3);\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 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\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-bold);\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 cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-input-border);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n/* Destructive action: the error pair. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- form ---------- */\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 text-shadow: var(--shadow-text);\n}\n.ds-form__body {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n}\n/* Open rows on the box surface, divided by faint rules. */\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__row:last-child {\n border-bottom: 0;\n}\n.ds-form__label {\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__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--grow {\n flex: 1 1 0;\n width: 0;\n min-width: 0;\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: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 40%, var(--color-notice));\n border-radius: var(--radius-panel);\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\n/* ---------- pagination: a line of page links ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__label {\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-2);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n/* Buttons left, page links right. */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n}\n\n/* ---------- dialog: a confirmation box in the page flow ---------- */\n.ds-dialog {\n display: grid;\n gap: var(--space-1);\n width: var(--size-dialog);\n box-sizing: border-box;\n margin: var(--space-3) 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 text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n background: var(--color-surface);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-4);\n background: var(--color-overlay);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-6) 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 text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\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) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__sep {\n opacity: 0.6;\n}\n.ds-footer__line {\n margin: 0;\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=\"#news\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#roster:target) .ds-nav__link[href=\"#roster\"],\n.ds-page:has(#matches:target) .ds-nav__link[href=\"#matches\"],\n.ds-page:has(#report:target) .ds-nav__link[href=\"#report\"],\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"] {\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.ds-sprite {\n position: absolute;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: clan site front page specimen\n\n\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n Capture-the-flag clan, est. 2001. Two squads, one public server, no excuses.\n
\n
\n Public server: 14 of 20 playing\n Next match: Thursday, 21:00 CET\n Line-up and results\n
\n
\n\n
\n Tuesday, 14 March 2006\n Signed in as halvard · 2 match invitations · Log out\n
\n\n
\n\n
\n\n \n\n \n\n
\n\n
\n\n
\n
\n\n
\n
\n

Welcome to the home of clan chronoskin

\n

We have played capture-the-flag ladders since 2001 and still turn up for practice twice a week. Read the news, watch a demo, or come and play on the public server. Trials for the academy squad are open until the end of the month.

\n

Apply to join Meet the squads

\n
\n
\n Next match\n chronoskin vs. Nine Lanterns\n Thursday 16 March, 21:00 CET\n Winter ladder, round 9, two maps\n Line-up open Sign up\n
\n
\n\n

Practice moved: Wednesday practice starts at 20:30 this week, on the private server. See the calendar.

\n\n
\n
214matches played
\n
141won
\n
7thon the winter ladder
\n
23members
\n
\n\n
    \n
  • \n
    Round 8: a win on the last flag by mirelle12 Mar 2006, 23:40
    \n

    Two maps, two overtimes and one capture with four seconds on the clock. The first team beat Grey Harbour 2 to 1 and moves up to seventh on the ladder. Demos from both sides are in the downloads.

    \n
    412 views · 8 comments · Read more
    \n
    • \n
  • \n
    Academy trials are open new by halvard09 Mar 2006, 18:05
    \n

    The academy squad has three places for the spring season. You need a working microphone, two free evenings a week and the patience to defend a base for twenty minutes without complaining.

    \n
    268 views · 14 comments · Apply
    \n
    • \n
  • \n
    Public server moved to a faster line by ketil02 Mar 2006, 20:12
    \n

    Same address, new machine. Pings should drop by about fifteen for most of us. The map rotation has been reset; vote for the next cycle in the poll.

    \n
    197 views · 3 comments · Read more
    \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 \n \n \n \n \n \n \n \n \n \n
First team roster
PlayerRoleSinceMatchesStatus
halvardCaptain, defenceOct 2001198Active
mirelleFlag runnerJan 2002176Active
ketilMidfieldJun 2003121Active
dunmoreDefenceFeb 200544On trial
sorrelFlag runnerSep 2002150Injured wrist
\n\n
\n

Poll: next map cycle

\n
\n
Classic six46%
\n
Ladder maps only31%
\n
Community picks23%
\n
\n
39 votes Vote
\n
\n\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. You are here:
    2. \n
  2. chronoskin
    3. \n
  3. /
    4. \n
  4. Roster
    5. \n
  5. /
    6. \n
  6. All squads
    7. \n
\n\n
\n
\n

Roster

\n

23 members in four squads. Captains are listed first; trial members play scrims only.

\n
\n
Apply to join
\n
\n\n
\n
\n First team\n Captain: halvard\n 6 players, winter ladder\n Record 141 won, 58 lost\n
\n
\n Academy\n Captain: ketil\n 7 players, open cup\n Record 31 won, 22 lost\n
\n
\n Duel squad\n Captain: sorrel\n 4 players, 1v1 ladder\n Record 77 won, 40 lost\n
\n
\n Old guard\n No captain\n 6 retired members\n Sunday pick-up games\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 \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 \n \n \n \n
PlayerSquadRoleSinceMatchesCapsStatus
halvard CaptainFirst teamDefenceOct 200119861Active
mirelleFirst teamFlag runnerJan 2002176402Active
ketil CaptainAcademyMidfieldJun 200312195Active
sorrel CaptainDuel squadFlag runnerSep 2002150318Injured wrist
dunmoreFirst teamDefenceFeb 2005447On trial
aldousAcademyDefenceNov 2005192On trial
wrennaAcademyFlag runnerAug 20046388Active
pikeOld guardMidfieldOct 200113254Retired
\n\n
\n How to get a trial · Match records\n \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. You are here:
    2. \n
  2. chronoskin
    3. \n
  3. /
    4. \n
  4. Matches
    5. \n
  5. /
    6. \n
  6. Winter ladder
    7. \n
\n\n
\n
\n

Matches

\n

Winter ladder 2006: played 8, won 5, drawn 1, lost 2. Seventh of 24.

\n
\n
Challenge us to a scrim
\n
\n\n
\n

Next match: chronoskin vs. Nine Lanterns, Thursday 16 March, 21:00 CET

\n
\n

Round 9, two maps, five a side. Signed up so far: halvard, mirelle, ketil, dunmore. One place left; sorrel is out.

\n

You are on the line-up as defence. Withdraw before Wednesday noon so the captain can find a stand-in.

\n
\n
\n
\n I can play\n Stand-by only\n Withdraw\n \n
\n Map picks open on Wednesday.\n
\n
\n\n
\n
\n

Withdraw from the line-up?

\n
\n

Your place against Nine Lanterns will be offered to the stand-by list. The captain is told by private message.

\n
\n Yes, withdraw\n Stay on the line-up\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 \n \n \n \n \n \n \n \n \n
DateOpponentMapsScoreResultReport
12 Mar 2006Grey Harbour round 8Twin keeps, Saltworks2 : 1Won8 comments
05 Mar 2006The Quiet Ones round 7Saltworks, Low bridge1 : 1Drawn5 comments
26 Feb 2006Ironvale round 6Twin keeps, Quarry0 : 2Lost11 comments
19 Feb 2006Marsh Lights round 5Low bridge, Quarry2 : 0Won2 comments
\n\n
\n

No scrims are booked

\n

Nobody has asked for a practice match this week. Clans on the same ladder can challenge us here.

\n Book a scrim\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. You are here:
    2. \n
  2. chronoskin
    3. \n
  3. /
    4. \n
  4. News
    5. \n
  5. /
    6. \n
  6. Round 8: a win on the last flag
    7. \n
\n\n
\n
\n

Round 8: a win on the last flag

\n

Posted by mirelle on 12 Mar 2006 at 23:40. 412 views, 8 comments.

\n
\n
Add a comment
\n
\n\n
\n\n
\n\n
\n

chronoskin 2, Grey Harbour 1

\n

Nobody expected an easy night and nobody got one. Grey Harbour had not lost on Twin keeps all season, and for eighteen minutes it looked as if they would not start now.

\n

Map one: Twin keeps

\n

We went a flag down inside three minutes. Halvard moved to the upper gallery, the base held, and mirelle levelled with a run through the water tunnel. Overtime went our way after a dropped flag on their ramp.

\n

Map two: Saltworks

\n

Saltworks is a runner's map and theirs is quicker than ours. They took it 3 to 1. The decider was played straight after on the home map.

\n

What worked

\n
    \n
  • Two on defence at all times, even when chasing a goal.
    • \n
  • Calling the flag carrier's route, not only the position.
    • \n
  • Binding say_team drop calls to one key.
    • \n
\n

The decider

\n

One all with ten seconds left, and a capture with four on the clock. The demo is in the downloads section for anyone who does not believe it.

\n
\n\n
\n
\n
ketil wrote:13 Mar 2006, 00:02
\n

Still shaking. That tunnel run should not have worked twice.

\n
\n
\n
dunmore wrote:13 Mar 2006, 08:47
\n

First ladder win for me. Thanks for the patience on Saltworks, I know where the lift is now.

\n
\n
\n
pike wrote:13 Mar 2006, 19:30
\n

Watched the demo twice. The old guard approves, grudgingly.

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

Match facts

\n
\n

Result: Won 2 : 1

\n

Ladder: winter 2006, round 8

\n

Line-up: halvard, mirelle, ketil, dunmore, sorrel

\n

Maps: Twin keeps, Saltworks, Twin keeps

\n
\n
\n\n
\n

Related

\n
\n

All results of the winter ladder

\n

Round 7: a draw nobody wanted

\n

Demos from both sides

\n

The first team roster

\n

Back to the news

\n
\n
\n\n
\n\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. You are here:
    2. \n
  2. chronoskin
    3. \n
  3. /
    4. \n
  4. Roster
    5. \n
  5. /
    6. \n
  6. Join us
    7. \n
\n\n
\n
\n

Join us

\n

Apply for a trial with the academy squad. A captain answers within a week.

\n
\n
See who plays
\n
\n\n
\n Your application was not sent. The e-mail address is incomplete. Correct it below and send the form again.\n
\n\n
\n\n
\n

Trial application

\n
\n
\n \n
\n
\n
\n \n
\n \n This is not a complete e-mail address.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Free evenings Practice is Wednesday and Sunday\n
\n \n \n \n
\n
\n
\n Agreement\n
\n
\n
\n
\n Cancel\n \n \n
\n
\n\n
\n
\n

What happens next

\n
\n

A captain reads your application and invites you to two practice evenings.

\n

After four weeks on trial the squad votes. Most trials end in a yes.

\n

Read the clan charter

\n
\n
\n
\n

Open places

\n
\n

Academy: 3 places

\n

Duel squad: 1 place

\n

First team: by invitation

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

chronoskin. Placeholder content for a style specimen.

\n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.bulletin-board-forums.forum.s06.p11.t06.u08\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bulletin-board-forums\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bb-6b68\",\n \"short\": \"v1-bb-6b68\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #17479e;\n --color-canvas: #ececec;\n --color-surface: #c6d2de;\n --color-surface-alt: #bacbdc;\n --color-surface-strong: #98b5e2;\n --color-bar: #17479e;\n --color-bar-text: #ffffff;\n --color-bar-alt: #40a2e5;\n --color-bar-alt-text: #000000;\n --color-inverse: #184078;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #183870;\n --color-heading: #000099;\n --color-heading-alt: #183870;\n --color-link: #000099;\n --color-link-quiet: #000000;\n --color-link-visited: #184078;\n --color-link-hover: #2060a0;\n --color-link-active: #000000;\n --color-border: #98cafd;\n --color-border-strong: #17479e;\n --color-border-muted: #98b5e2;\n --color-accent: #2060a0;\n --color-accent-text: #ffffff;\n --color-accent-alt: #008000;\n --color-fill-1: #c6d2de;\n --color-fill-2: #bacbdc;\n --color-fill-3: #ececec;\n --color-fill-4: #98b5e2;\n --color-button: #17479e;\n --color-button-text: #ffffff;\n --color-button-hover-text: #98cafd;\n --color-button-secondary: #ececec;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #bacbdc;\n --color-disabled-text: #767676;\n --color-danger: #a62a2a;\n --color-danger-surface: #fddbcc;\n --color-success: #008000;\n --color-warning: #ffa34f;\n --color-notice: #ffffff;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #98b5e2;\n}\n\n/* @part type */\n:root {\n --font-body: Tahoma, Verdana, Geneva, Arial, sans-serif;\n --font-heading: Verdana, Tahoma, Arial, sans-serif;\n --font-ui: Tahoma, Verdana, Geneva, Arial, sans-serif;\n --font-mono: Courier, \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 18px;\n --text-h1: 14px;\n --text-h2: 11px;\n --text-h3: 11px;\n --line-body: 1.45;\n --line-heading: 1.3;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\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: none;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\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: none;\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white, transparent 72%), inset 0 -1px 0 color-mix(in srgb, var(--color-shadow), transparent 65%);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white, transparent 50%), inset 0 -1px 0 color-mix(in srgb, var(--color-shadow), transparent 65%);\n --shadow-control-pressed: inset 0 2px 0 color-mix(in srgb, var(--color-shadow), transparent 50%);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white, transparent 80%);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow), transparent 55%);\n --fill-page: radial-gradient(ellipse 70% 360px at 50% 0, color-mix(in srgb, var(--color-page), white 13%) 0%, var(--color-page) 100%) no-repeat var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 38%) 0%, color-mix(in srgb, var(--color-bar), white 10%) 48%, var(--color-bar) 52%, color-mix(in srgb, var(--color-bar), black 20%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 16%) 0%, color-mix(in srgb, var(--color-bar-alt), black 18%) 100%);\n --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 12%) 0%, var(--color-inverse) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 35%) 0%, var(--color-accent) 100%);\n --fill-panel: var(--color-border);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 38%) 0%, color-mix(in srgb, var(--color-button), white 10%) 48%, var(--color-button) 52%, color-mix(in srgb, var(--color-button), black 20%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 50%) 0%, color-mix(in srgb, var(--color-button), white 20%) 48%, color-mix(in srgb, var(--color-button), white 8%) 52%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 14%) 0%, var(--color-button-secondary) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 35%) 0, var(--color-input) 3px);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }