{ "id": "v1-bb-5251", "long_id": "v1.bulletin-board-forums.app.s05.p02.t05.u01", "name": "Bulletin board forum, member profile and private messages, 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": "app", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the member's side of a bulletin board in the first half of the 2000s: the profile page other members see, and the private message centre with its folders, inbox table and compose form. The profile opens with a head box carrying the avatar, name and rank, a ruled line of post figures, and then two equal columns of titled boxes; the messenger pages put a folder menu on the left of the working block. Brick red title bars with a darker lower half stand on warm grey cells, text is Trebuchet MS at 13px and 11px, every box is square and ruled, and nothing moves.", "url": "https://chrono.skin/s/v1-bb-5251", "preview_url": "https://chrono.skin/s/v1-bb-5251/specimen.html", "files": { "STYLE.md": "# Bulletin board forum, member profile and private messages, 2002 to 2007\n\n## Summary\n\nThis is the member's side of a bulletin board in the first half of the 2000s: the profile page other members see, and the private message centre with its folders, inbox table and compose form. The profile opens with a head box carrying the avatar, name and rank, a ruled line of post figures, and then two equal columns of titled boxes; the messenger pages put a folder menu on the left of the working block. Brick red title bars with a darker lower half stand on warm grey cells, text is Trebuchet MS at 13px and 11px, every box is square and ruled, and nothing moves.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-6` (15px) at the sides and the foot and none at the top, so the sheet `.ds-page__frame` hangs from the top edge of the window under a `--border-width-strong` rule in `--color-border-strong`. Designed at 1024px. Never centre a narrow column.\n- Order from the top, all inside the sheet: the masthead `.ds-nav__head` (brand and tagline on the left, the signed-in member's box `.ds-nav__member`, `--size-member` 300px wide, on the right); the navigation `.ds-nav__menu`, one bar whose items share the full width equally and are centred, 1px apart; `.ds-page__body`, which holds the views; the footer band; the small print `.ds-page__legal`. No text sits on the page colour.\n- The profile (home view) is one column of blocks `--space-5` apart: an optional `.ds-notice`, the profile head `.ds-hero`, the `.ds-stat` line, then `.ds-columns`, two equal columns of boxes with `--space-5` between them and between the boxes of a column. Fill both columns so they end near each other. There is no sidebar on the profile.\n- Inner pages (inbox, a message, the compose form, the buddy lists, help) keep the masthead, navigation and footer and drop the hero and the two columns. From the top: `.ds-breadcrumb` (a small open line on a faint rule), `.ds-page-header` in place of the hero (a surface box with a strong left edge: title and one line of description on the left, the main action on the right), an error `.ds-notice` when there is one, then `.ds-layout`: the menu `.ds-sidebar` in a `--size-menu` (190px) column on the left and the working blocks in `.ds-layout__main`, `--space-5` apart. In the inbox that is `.ds-tabs`, the folder `.ds-table`, and a `.ds-toolbar` with the folder actions on the left and `.ds-pagination` on the right. A message is one `.ds-post`, the confirmation `.ds-dialog` in the flow under it, and a `.ds-toolbar`. Give the menu enough blocks to end near the foot of the main column.\n- Views. The specimen is a six-screen example; the navigation bar has one item per view and marks the current one. `profile` (home) is the member's profile: notice, head box, post figures, forum information and latest posts on the left, contact box with a quick message line, buddies and signature on the right. `inbox` is the private message inbox: folder menu with the storage meter, folder tabs, the message table, the folder actions and page numbers. `message` is one message with its delete confirmation and reply buttons. `compose` is the compose form as it came back with an unknown recipient. `buddies` is the buddy list as a grid of member cards over an empty ignore list. `help` is the help page: contents menu beside the long text and a line of related links.\n- Folder table columns: checkbox and status `--size-check` (26px) each, subject (fluid), sender `--size-from` (130px), date `--size-date` (150px), size `--size-count` (64px, right-aligned). Rows are at least `--size-row` (28px); bars and title strips `--size-bar` (24px). A post has a `--size-from` author cell. The avatar tile is `--size-avatar` (84px); `.ds-avatar--small` is 40% of it.\n- Spacing scale: `--space-1` 1px, `--space-2` 2px, `--space-3` 4px, `--space-4` 7px, `--space-5` 11px, `--space-6` 15px.\n - `--space-1`: the ruled gap between cells inside every bordered block, and between navigation items.\n - `--space-2`: vertical padding of bars, strips, table cells, buttons and inputs; gap between tabs and page numbers.\n - `--space-3`: vertical padding of fact rows, list items and menu items; gap between inline items.\n - `--space-4`: horizontal padding of cells and strips, padding of panel bodies, gap between buttons.\n - `--space-5`: body padding, padding of the head box, and the gap between neighbouring blocks and columns. This is the only block gap.\n - `--space-6`: page gutter, list indent, padding of the dialog and the empty state.\n- Form rows are a right-aligned `--size-label` (30%) label cell and a field cell; text inputs are `--size-field` (260px) unless `--wide`; the action row starts under the fields. A dialog is `--size-dialog` (50%) wide, centred in the flow. A meter is `--size-meter` (10px) 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- One family: `--font-body`, `--font-heading` and `--font-ui` are the same Trebuchet MS stack. `--font-mono` is for inline code only.\n- Sizes: `--text-small` 11px for meta, table and fact cells, menus and strips; `--text-base` 13px for running text, titles in lists and tables; `--text-ui` 12px for buttons, inputs, navigation and tabs; `--text-h2` 13px for bar titles; `--text-large` 14px for figures and the sender's name; `--text-h1` 16px for the page heading; `--text-display` 18px for the wordmark and the member's name in the profile head. Nothing is larger than 18px.\n- `--line-body` is 1.3. Headings are bold, never uppercase, no tracking. `--weight-ui` is 700 for navigation, tabs and the primary button; the secondary button and inputs use `--weight-body`.\n- Links in text, titles of posts and messages and member names in cards are `--color-link`, underlined (`--link-decoration`). Tool links, sender names in the table and footer-strip links inside boxes use `.ds-link--quiet` (`--color-link-quiet`, `--link-decoration-quiet`, no underline until hovered). Hover turns any link `--color-link-hover`.\n- Surfaces: `--color-page` outside the sheet, `--color-canvas` the sheet. `--color-surface` is the main cell, the head box, the page header and the member box; `--color-surface-alt` the label cells, status, date and size cells, the author cell, the figures line and the toolbar; `--color-surface-strong`, always with `--color-heading` text, the group rows, quiet title strips, closing strips, idle tabs, form action row and current page number. `--fill-panel` shows in the 1px gaps.\n- Bars: `--fill-bar` with `--color-bar-text` for the navigation, box titles, the current tab and the dialog title. `--fill-bar-alt` with `--color-bar-alt-text` for the table head row, the date strip of a message and quiet badges. `--fill-inverse` with `--color-inverse-text` for the footer band. The current navigation item is a `--color-surface` cell with `--color-heading` text.\n- Borders: blocks have a 1px `--color-border` outline; `--color-border-muted` is for rules inside a box and under the breadcrumb; `--color-border-strong` is the sheet's top rule, the left edge of the head box and page header, the rule under the tabs, the dialog outline and button outlines. Inputs use `--color-input-border`.\n- Markers: `--fill-accent` with `--color-accent-text` for the badge and the meter bar; `--color-accent` for the unread icon; `--color-accent-alt` for a bold remark (`.ds-new`). Status badges are a `color-mix()` of 28% of the status colour over `--color-surface`, with `--color-text` and a 1px solid outline in the status colour. 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 member cards of `.ds-grid`; `--color-fill-3` is also the alternate list row.\n- One-off values outside the token set: the status badge tints above; the notice edge is a `color-mix()` of 45% `--color-accent` in `--color-notice`; the fact label column is 36%; the footer separators are at 0.6 opacity.\n- The stack names Trebuchet MS with Verdana, Arial and Helvetica as fallbacks, all system fonts.\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-page`: on ``. Wrap everything in `.ds-page__frame`; `.ds-page__body` holds the views, each a `.ds-view` section (`.ds-view--home` for the profile) whose blocks go in `.ds-view__body`. `.ds-page__legal` is the small print. `.ds-columns` with two `.ds-columns__col` makes the two equal columns; `.ds-layout` with `.ds-layout__main` the menu-plus-main area. `.ds-icon` sizes an inline icon, `.ds-sprite` hides the symbol sheet, `.ds-block` puts a span on its own line.\n- `.ds-nav`: the site header. `.ds-nav__head` holds `.ds-nav__brand` (the `.ds-brand` with a `.ds-nav__tagline` under it) and `.ds-nav__member`, the signed-in member's box with a small avatar, a bold `.ds-nav__who` line and the unread count. `.ds-nav__menu` is the bar of equal `.ds-nav__item` cells, each a `.ds-nav__link`; the current one takes `is-current`.\n- `.ds-brand`: the site's mark and name at the left of the masthead, 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`), 1.7 times `--text-display`. `.ds-brand__name` is the name in `--font-heading` at `--text-display`, coloured `--color-heading`. 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`: a small open line with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the head of a profile or of any page about one person or thing. A `.ds-avatar` tile, then `.ds-hero__title` (the name, display size), `.ds-hero__rank` (rank and badges), `.ds-hero__lead` (one line of description) and `.ds-hero__action` (the main action and one secondary button); `.ds-hero__aside` is a right-aligned column of small facts. A surface box with a strong left edge; it takes `--shadow-dialog` and `--radius-page`. Never make it a banner.\n- `.ds-avatar`: a square tile holding the member's picture, here a silhouette drawn in `--color-text-muted` on `--color-surface-alt`. `.ds-avatar--small` for cards, posts and the member box.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__title`, `.ds-page-header__desc`, and `.ds-page-header__action` with one button on the right.\n- `.ds-stat`: the row of summary figures, one ruled line of equal cells. Each `.ds-stat__item` sets a bold `.ds-stat__value` and its `.ds-stat__label` side by side on one line. `.ds-stat` is the row; use three to six items.\n- `.ds-panel`: any titled box. `.ds-panel__title` is a primary bar; `.ds-panel__title--quiet` a pale strong strip for secondary boxes. `.ds-panel__body` (`--alt` for a small tinted row), `.ds-panel__line` paragraphs, `.ds-panel__quick` a one-line form of a field and a button. Put a `.ds-facts` list straight inside a panel for profile details.\n- `.ds-facts`: label and value rows (`.ds-facts__label`, `.ds-facts__value`) for details of a member or record.\n- `.ds-meter`: a thin bordered track with a `.ds-meter__bar` in the accent fill, for storage used.\n- `.ds-list`: posts or messages outside a table. `.ds-list__head` (primary bar), `.ds-list__item` (`is-alt` for the alternate row) with `.ds-list__title`, `.ds-list__excerpt` and `.ds-list__meta`, closed by a `.ds-list__foot` strip of quiet links.\n- `.ds-grid`: member cards in four columns (`.ds-grid--2` for two, inside a column), 1px apart in one bordered block. `.ds-grid__title`, `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with a small avatar, `.ds-grid__name` and `.ds-grid__meta`, and a `.ds-grid__foot` strip.\n- `.ds-tabs`: folder tabs on a strong rule. `.ds-tabs__tab` is a pale strong cell with heading text; `is-current` takes the primary bar. `.ds-tabs__count` is the count in normal weight.\n- `.ds-table`: a message folder or any data table. `th` is the secondary bar (`.ds-table__head--num` right-aligned); `.ds-table__group` a group row; cells `.ds-table__check`, `.ds-table__status` (`is-read`), `.ds-table__from`, `.ds-table__date`, `.ds-table__num`; `.ds-table__title` is the subject link (`is-unread` bold), `.ds-table__meta` a muted second line.\n- `.ds-toolbar`: the tinted row under a table or message: `.ds-buttons` on the left, `.ds-pagination` or links on the right.\n- `.ds-post`: one message. `.ds-post__head` is the secondary strip with date and number; `.ds-post__author` the tinted cell with `.ds-post__name` and `.ds-post__meta` lines; `.ds-post__body` holds `.ds-post__text`, a `.ds-post__quote` with its `.ds-post__cite`, and the `.ds-post__sig`; `.ds-post__foot` is the strip of quiet tool links.\n- `.ds-prose`: long text such as help: h1 (with a faint rule), 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 tool and meta links; `.ds-link--strong` for bold.\n- `.ds-button`: the primary action. `.ds-button--secondary` is the plain grey 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 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`, `--grow` inside a flex row, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`, buttons in `.ds-form__actions`.\n- `.ds-badge`: a small square label in the accent fill. `.ds-badge--quiet` is the secondary bar. The status variants `.ds-badge--success` (online, answered), `.ds-badge--warning` (away, receipt pending) and `.ds-badge--danger` (banned, moderator warning) are a pale tint with a 1px outline. `.ds-new` is a bold remark in the second accent.\n- `.ds-sidebar`: the menu column of an inner page. Each `.ds-sidebar__block` has a `.ds-sidebar__title` bar and either a `.ds-sidebar__list` of `.ds-sidebar__item` rows (`is-current`; a `.ds-sidebar__count` on the right) or a `.ds-sidebar__body` for a meter or a small form.\n- `.ds-notice`: a pale line for information; `.ds-notice--error` is the error box with a `.ds-notice__title`.\n- `.ds-pagination`: `.ds-pagination__label`, then small bordered `.ds-pagination__link` boxes; `is-current` for the current page.\n- `.ds-dialog`: a confirmation box in the page flow, strong outline, `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.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 block with a `.ds-empty__title` strip, and in `.ds-empty__body` one centred `.ds-empty__text` and one button.\n- `.ds-footer`: the inverse band closing the sheet: a `.ds-footer__row` of `.ds-footer__link` items with `.ds-footer__sep` between them on the left, 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 11px apart.\n- `content-width >= 90%`: the sheet fills the viewport.\n- `font-size <= 18px`: the wordmark and the member's name are the largest text.\n- `font-size >= 11px`: 11px is the smallest size of this type set.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 2`: Trebuchet MS, plus a monospace for code.\n- `letter-spacing <= 0px`: no tracking.\n- `uppercase-text <= 0%`: nothing is transformed to uppercase.\n- `underlined-links >= 50%`: links in text and titles are underlined; 88% to 94% in the references this follows.\n- `border-radius <= 0px`: no reference has a rounded corner in CSS; every box is square.\n- `box-shadow = none`: no box shadow was measured in any reference.\n- `text-shadow = none`: no text shadow was measured in any reference.\n- `transition = none`: hover states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 2px`: borders are 1px, with 2px only on emphasised edges.\n- `gradient-fills <= 10%`: gradients appear only on bars and on the primary and destructive buttons.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new profile box from `.ds-panel` with `.ds-facts`, a new folder view from `.ds-table`, a new menu block from `.ds-sidebar__block`, a new card set from `.ds-grid`. Build it as a 1px `--color-border` outline on `--fill-panel` with `--space-1` of padding and gap, cover it with cells in the three surface colours, and give it a title in `--fill-bar` or a strip in `--color-surface-strong` with `--color-heading` text. Keep text on the fills it already sits on in the specimen. Use tokens only: no raw colours or lengths, no new radius, shadow or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block. On a profile, new boxes go into the shorter of the two columns; on inner pages, new navigation goes into the menu column.\n", "components.css": "/* Layout tokens (structure part). A member's pages on a board of 2004 to\n 2006: profile, private messages, buddy list. Gaps and column widths follow\n the profile and messenger screens of the period's board engines. */\n:root {\n --size-page: 100%;\n --size-member: 300px;\n --size-menu: 190px;\n --size-avatar: 84px;\n --size-check: 26px;\n --size-from: 130px;\n --size-date: 150px;\n --size-count: 64px;\n --size-row: 28px;\n --size-bar: 24px;\n --size-icon: 14px;\n --size-meter: 10px;\n --size-label: 30%;\n --size-field: 260px;\n --size-dialog: 50%;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 7px;\n --space-5: 11px;\n --space-6: 15px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: 0 var(--space-6) var(--space-6);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The sheet hangs from the top edge of the window under one strong rule. */\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);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n}\n.ds-page__body {\n padding: var(--space-5);\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n text-align: center;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\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\n.ds-sprite {\n position: absolute;\n}\n.ds-icon {\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- nav: masthead with the member box, then the spread bar ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5);\n}\n.ds-nav__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) * 1.7);\n height: calc(var(--text-display) * 1.7);\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: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* The signed-in member's box at the right of the masthead. */\n.ds-nav__member {\n flex: none;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: center;\n width: var(--size-member);\n box-sizing: border-box;\n padding: var(--space-3) var(--space-4);\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-small);\n}\n.ds-nav__who {\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-nav__menu {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-border-strong);\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-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item {\n flex: 1 1 0;\n display: flex;\n}\n.ds-nav__link {\n flex: 1;\n display: block;\n padding: var(--space-3) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n line-height: var(--line-heading);\n text-align: center;\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 text-shadow: none;\n}\n/* The current view's item, and the profile item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#profile\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-page:has(#inbox:target) .ds-nav__link[href=\"#inbox\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-page:has(#message:target) .ds-nav__link[href=\"#message\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-page:has(#compose:target) .ds-nav__link[href=\"#compose\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-page:has(#buddies:target) .ds-nav__link[href=\"#buddies\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n text-shadow: none;\n}\n\n/* ---------- breadcrumb: an open line on a faint rule ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\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/* ---------- avatar tile ---------- */\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 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 border-radius: var(--radius-panel);\n}\n.ds-avatar svg {\n display: block;\n width: 80%;\n height: 80%;\n}\n.ds-avatar--small {\n width: calc(var(--size-avatar) * 0.4);\n height: calc(var(--size-avatar) * 0.4);\n}\n\n/* ---------- hero: the head of a member's profile ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n gap: var(--space-5);\n align-items: start;\n padding: var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\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-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__rank {\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\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 gap: var(--space-4);\n margin: var(--space-4) 0 0;\n}\n.ds-hero__aside {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\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: center;\n gap: var(--space-6);\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-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\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}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats: one ruled line of figures ---------- */\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__item {\n flex: 1 1 0;\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n}\n.ds-stat__value {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- two equal columns of boxes ---------- */\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-columns__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n\n/* ---------- menu column beside the working blocks ---------- */\n.ds-layout {\n display: grid;\n grid-template-columns: var(--size-menu) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-layout__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\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 justify-content: space-between;\n gap: var(--space-4);\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/* A quieter title strip for secondary boxes. */\n.ds-panel__title--quiet {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-panel__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-panel__body--alt {\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__line:last-child {\n margin: 0;\n}\n/* A one-line form inside a panel: field and button. */\n.ds-panel__quick {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- facts: label and value rows of a profile ---------- */\n.ds-facts {\n display: grid;\n grid-template-columns: 36% minmax(0, 1fr);\n gap: var(--space-1);\n margin: 0;\n}\n.ds-facts__label {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-facts__value {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n\n/* ---------- meter: folder space, poll bars ---------- */\n.ds-meter {\n display: block;\n height: var(--size-meter);\n margin: var(--space-3) 0;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-meter__bar {\n display: block;\n width: 24%;\n height: 100%;\n background: var(--fill-accent);\n}\n\n/* ---------- list: posts and messages outside a table ---------- */\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 align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\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 text-shadow: var(--shadow-text);\n}\n.ds-list__item {\n padding: var(--space-3) 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__title {\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\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__excerpt {\n display: block;\n padding: var(--space-2) 0;\n font-size: var(--text-small);\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__foot {\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 text-align: right;\n}\n\n/* ---------- grid: member cards ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 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-grid--2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-grid__title {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\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-grid__cell {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: center;\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__name {\n display: block;\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\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.ds-grid__foot {\n grid-column: 1 / -1;\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 text-align: right;\n}\n\n/* ---------- tabs: folder tabs on a strong rule ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-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-5);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-border-strong);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__count {\n font-weight: var(--weight-body);\n}\n\n/* ---------- table: a message folder ---------- */\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-alt);\n color: var(--color-bar-alt-text);\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 .ds-table__head--num {\n text-align: right;\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-small);\n vertical-align: middle;\n}\n.ds-table .ds-table__check {\n width: var(--size-check);\n padding: var(--space-2);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-table .ds-table__status {\n width: var(--size-check);\n padding: var(--space-2);\n background: var(--color-surface-alt);\n color: var(--color-accent);\n text-align: center;\n}\n.ds-table .ds-table__status.is-read {\n color: var(--color-text-muted);\n}\n.ds-table .ds-table__from {\n width: var(--size-from);\n}\n.ds-table .ds-table__date {\n width: var(--size-date);\n background: var(--color-surface-alt);\n white-space: nowrap;\n}\n.ds-table .ds-table__num {\n width: var(--size-count);\n background: var(--color-surface-alt);\n text-align: right;\n white-space: nowrap;\n}\n.ds-table .ds-table__group td {\n height: auto;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-table__title {\n color: var(--color-link);\n font-size: var(--text-base);\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__title.is-unread {\n font-weight: var(--weight-bold);\n}\n.ds-table__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- toolbar: actions left, page numbers 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 padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* ---------- post: one message, read ---------- */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-from) minmax(0, 1fr);\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-post__head {\n 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 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-post__author {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-post__name {\n color: var(--color-link);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-post__name:hover,\n.ds-post__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-post__meta {\n color: var(--color-text-muted);\n}\n.ds-post__body {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-post__text {\n margin: 0 0 var(--space-4);\n}\n.ds-post__quote {\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-post__cite {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-post__sig {\n margin: 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__foot {\n grid-column: 1 / -1;\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\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 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 padding: 0 0 var(--space-2);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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-small);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-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__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-1);\n}\n.ds-form__label {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\n display: block;\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\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-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--size-label) + var(--space-4));\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-small);\n}\n\n/* ---------- badge and status words ---------- */\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 vertical-align: middle;\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) 28%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 28%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 28%, 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/* ---------- sidebar: the messenger menu ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\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 text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n}\n.ds-sidebar__body {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n\n/* ---------- notice ---------- */\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) 45%, 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\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: 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\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-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\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: 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 text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5) var(--space-6);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n\n/* ---------- empty state ---------- */\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}\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/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\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 color: var(--color-inverse-text);\n opacity: 0.6;\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=\"#profile\"],\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"],\n.ds-page:has(#inbox:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#message:target) .ds-nav__link[href=\"#message\"],\n.ds-page:has(#compose:target) .ds-nav__link[href=\"#compose\"],\n.ds-page:has(#buddies:target) .ds-nav__link[href=\"#buddies\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\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:root {\n --size-meter: 12px;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: member profile and private messages 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 \n \n chronoskin\n \n The fretted and the fretless: a board for people who build stringed instruments\n
\n
\n \n
\n Welcome back, oswin_r.\n You last visited: 08 Oct 2005, 10:14 PM\n Private messages: 2 unread, 12 in all. Log out\n
\n
\n
\n \n
\n\n
\n\n
\n
\n\n

This is your profile as other members see it. Two members have written to you since your last visit.

\n\n
\n \n
\n

oswin_r

\n

Journeyman builder Online Workshop host

\n

Builds mandolins and the occasional tenor guitar in a shed in the hills. Ask about hide glue, do not ask about deadlines.

\n

Send a private message Add to your buddy list

\n
\n
\n Member no. 1,206\n Joined 14 Feb 2003\n Last active: today, 09:02 PM\n Local time: 10:02 PM\n Profile viewed 3,418 times\n
\n
\n\n
\n
2,871posts
\n
2.96posts a day
\n
143topics started
\n
38build logs
\n
967days a member
\n
\n\n
\n\n
\n\n
\n

Forum information

\n
\n
Member group
\n
Journeyman builders, Workshop hosts
\n
Most active in
\n
Mandolin family (1,104 posts, 38% of the total)
\n
Location
\n
A shed in the hills
\n
Interests
\n
Carved tops, hide glue, old banjo-mandolins
\n
Occupation
\n
Joiner
\n
Birthday
\n
21 November
\n
\n
\n\n \n\n
\n\n
\n\n
\n

Contact

\n
\n
Private message
\n
Send oswin_r a private message
\n
E-mail
\n
Hidden. Use the board's mail form
\n
Home page
\n
Workshop notes and photographs
\n
Messenger
\n
Not given
\n
\n
\n \n \n \n
\n
\n\n
\n

Buddies 4 of 17

\n
\n \n
marrow_kOnline now
\n
\n
\n \n
t.hallamOnline now
\n
\n
\n \n
eddaSeen yesterday
\n
\n
\n \n
fenwickSeen 02 Oct 2005
\n
\n
Show the whole list
\n
\n\n
\n

Signature

\n
\n

Measure twice, cut once, glue it, then find the pencil line.

\n

Build log index · Tonewood for trade

\n
\n
\n\n
\n\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Private messages
    4. \n
  4. >
    5. \n
  5. Inbox
    6. \n
\n\n
\n
\n

Private messages: Inbox

\n

12 messages, 2 of them unread. You are using 24% of the space your member group allows.

\n
\n
New message
\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
SubjectFromReceivedSize
This week
Re: Quartered spruce billets Newmarrow_kToday, 08:15 PM3 KB
Your build log has been pinned Newt.hallamToday, 06:40 PM1 KB
Bending iron on loan Answerededda06 Oct 2005, 09:31 AM2 KB
Earlier
Rosewood offcuts, postage only Receipt askedfenwick28 Sep 2005, 05:02 PM6 KB
Warning: trade listing in the wrong board Moderatort.hallam19 Sep 2005, 11:48 AM1 KB
Welcome to the workshop hosts groupmarrow_k02 Sep 2005, 08:00 PM4 KB
\n\n
\n
\n \n \n \n Delete\n \n
\n
    \n
  • Page 1 of 2
    • \n
  • <
    • \n
  • 1
    • \n
  • 2
    • \n
  • >
    • \n
\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Inbox
    4. \n
  4. >
    5. \n
  5. Re: Quartered spruce billets
    6. \n
\n\n
\n
\n

Re: Quartered spruce billets

\n

From marrow_k to you, today at 08:15 PM. Third message in this conversation.

\n
\n
Reply
\n
\n\n
\n\n \n\n
\n\n
\n
Today, 08:15 PMMessage 1 of 12
\n
\n marrow_k\n Master builder\n \n Posts: 9,412\n Joined: Mar 2002\n
\n
\n
oswin_r wrote: Is the spruce still for sale? I can take four billets if the grain is as tight as in your photographs.
\n

It is. I have six left from the same log, all split and not sawn, so there is no run-out to speak of. Twenty rings to the inch at the centre join, a little wider at the edge.

\n

Four billets fit in one parcel. I would rather trade than sell: you mentioned a spare set of tuners for a tenor. If that still stands, send them along and we are square.

\n

Sharp tools, slow hands.

\n
\n
\n Profile · Add to buddies\n Reply · Forward · Delete\n
\n
\n\n
\n
\n

Delete this message?

\n
\n

The message from marrow_k will be moved to Trash and removed for good after 30 days.

\n
\n Delete message\n Keep it\n
\n
\n
\n
\n\n
\n
\n Reply\n Forward\n Save to Wood trades\n
\n < Older · Back to the inbox\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Private messages
    4. \n
  4. >
    5. \n
  5. Write a message
    6. \n
\n\n
\n
\n

Write a message

\n

Private messages are read only by you and the people you name. Up to five recipients.

\n
\n
Messenger help
\n
\n\n
\n Your message was not sent. One of the recipients could not be found. Correct the name below and send it again.\n
\n\n
\n\n \n\n
\n\n
\n

New private message

\n
\n \n
\n \n There is no member called fenwyck.\n
\n
\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n \n \n \n Cancel\n
\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Your profile
    4. \n
  4. >
    5. \n
  5. Buddy and ignore lists
    6. \n
\n\n
\n
\n

Buddy and ignore lists

\n

Buddies are shown first when you write a message. Posts by ignored members are folded away.

\n
\n
Message all buddies
\n
\n\n
\n\n \n\n
\n\n
\n

Buddies online and recently seen

\n
\n \n
marrow_kMaster builderOnline
\n
\n
\n \n
t.hallamModeratorOnline
\n
\n
\n \n
eddaApprenticeAway
\n
\n
\n \n
fenwickJourneyman builder02 Oct
\n
\n
\n \n
hesperJourneyman builder29 Sep
\n
\n
\n \n
old_tobiasApprentice21 Sep
\n
\n
\n \n
ines_vMaster builder12 Sep
\n
\n
\n \n
quillonSuspendedBanned
\n
\n
8 of 17 shown. Show all
\n
\n\n
\n

Ignored members

\n
\n

You are not ignoring anyone. Members you add here cannot send you private messages.

\n How ignoring works\n
\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Help
    4. \n
  4. >
    5. \n
  5. Profiles and private messages
    6. \n
\n\n
\n
\n

Help: profiles and private messages

\n

What other members can see of you, and how the messenger works. Last revised 01 Sep 2005.

\n
\n
Ask a moderator
\n
\n\n
\n\n \n\n
\n\n
\n

Your profile and the messenger

\n

Every member has a profile page. It shows what you chose to tell the board when you registered and nothing else: your e-mail address stays hidden unless you tick the box that shows it.

\n

What appears on a profile

\n

The head of the page carries your name, rank and avatar. Below it are your post counts, the details you entered and your latest posts.

\n
    \n
  • Avatars are 84 by 84 pixels at most and are resized on upload.
    • \n
  • Signatures may run to three lines; use [url] tags for links.
    • \n
  • Birthdays show the day and month, never the year.
    • \n
\n

Private messages

\n

A private message goes to up to five members at once. New messages are marked in your inbox and counted in the box at the top of every page.

\n

Folders and storage

\n

Your member group sets how many messages you may keep. When the meter is full, new messages are held back until you clear some space.

\n
\n\n
\n

See also

\n
\n

Board code reference · Avatars and signatures · Buddies and ignoring · Member groups · Back to your inbox

\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.app.s05.p02.t05.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bulletin-board-forums\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bb-5251\",\n \"short\": \"v1-bb-5251\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #666696;\n --color-canvas: #ffffff;\n --color-surface: #f1f1f1;\n --color-surface-alt: #dfdfdf;\n --color-surface-strong: #cfcfcf;\n --color-bar: #606096;\n --color-bar-text: #fff788;\n --color-bar-alt: #8080a6;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #555576;\n --color-inverse-text: #eeeeff;\n --color-text: #000000;\n --color-text-muted: #000020;\n --color-heading: #000020;\n --color-heading-alt: #555576;\n --color-link: #606096;\n --color-link-quiet: #000020;\n --color-link-visited: #666686;\n --color-link-hover: #8080a6;\n --color-link-active: #000000;\n --color-border: #555576;\n --color-border-strong: #000020;\n --color-border-muted: #cfcfcf;\n --color-accent: #606096;\n --color-accent-text: #fff788;\n --color-accent-alt: #555576;\n --color-fill-1: #f1f1f1;\n --color-fill-2: #dfdfdf;\n --color-fill-3: #e8e8e8;\n --color-fill-4: #f1f1f1;\n --color-button: #8080a6;\n --color-button-text: #ffffff;\n --color-button-hover-text: #fff788;\n --color-button-secondary: #dfdfdf;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #dfdfdf;\n --color-disabled-text: #666686;\n --color-danger: #a00000;\n --color-danger-surface: #f1f1f1;\n --color-success: #006600;\n --color-warning: #fff788;\n --color-notice: #fff788;\n --color-notice-text: #000020;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #dfdfdf;\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", Verdana, Arial, Helvetica, sans-serif;\n --font-heading: \"Trebuchet MS\", Verdana, Arial, Helvetica, sans-serif;\n --font-ui: \"Trebuchet MS\", Verdana, Arial, Helvetica, sans-serif;\n --font-mono: \"Lucida Console\", \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 14px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: 1.3;\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: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 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: 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: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 32%), var(--color-bar) 55%);\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-canvas);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%), var(--color-button));\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%), var(--color-button));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }