{ "id": "v1-bb-82b3", "long_id": "v1.bulletin-board-forums.app.s08.p02.t11.u03", "name": "Board calendar, 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 calendar that came with board software in the first half of the 2000s and that busy communities used for chat nights, releases, contests and meetups: a month drawn as a ruled grid of day cells across the whole page, with the events as short links in their days. A dark masthead carries the name and a jump box, section tabs join the sheet under it, and below the month three equal columns list what is coming up, the calendars and the week's birthdays; an event has its own page with sign-up buttons, details and replies. The skin is the night one of gaming boards: navy cells on a darker sheet, glossy burnt orange bars, amber uppercase titles in Trebuchet over 12px Arial, square boxes and no motion.", "url": "https://chrono.skin/s/v1-bb-82b3", "preview_url": "https://chrono.skin/s/v1-bb-82b3/specimen.html", "files": { "STYLE.md": "# Board calendar, 2002 to 2007\n\n## Summary\n\nThis is the calendar that came with board software in the first half of the 2000s and that busy communities used for chat nights, releases, contests and meetups: a month drawn as a ruled grid of day cells across the whole page, with the events as short links in their days. A dark masthead carries the name and a jump box, section tabs join the sheet under it, and below the month three equal columns list what is coming up, the calendars and the week's birthdays; an event has its own page with sign-up buttons, details and replies. The skin is the night one of gaming boards: navy cells on a darker sheet, glossy burnt orange bars, amber uppercase titles in Trebuchet over 12px Arial, square boxes and no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-5` (10px) of padding, so the sheet `.ds-page__frame` takes about 98% of the viewport. Designed at 1024px. Never centre a narrow column.\n- Order from the top, all inside the sheet: `.ds-nav__head`, the inverted masthead band with the brand and a tagline on the left and the month jump form on the right; `.ds-nav__bar`, a secondary bar on whose lower edge the section tabs stand, with the date line at its right; `.ds-page__body` with the views; the footer band. No text sits on the page colour.\n- A view is a `.ds-view` section whose `.ds-view__body` stacks its blocks `--space-5` apart. The month view is full-width blocks, then `.ds-columns`: as many equal columns as fit at `--size-col` (230px), three at 1024px.\n- The month grid `.ds-cal` is seven equal columns; a day cell is at least `--size-day` (82px) tall, the weekday head `--size-bar` (22px). The date tile of an event row is `--size-tile` (44px) wide. Table count columns are `--size-count` (60px), its date column `--size-date` (120px), rows at least `--size-row` (28px).\n- Spacing scale: `--space-1` 1px, `--space-2` 2px, `--space-3` 4px, `--space-4` 7px, `--space-5` 10px, `--space-6` 14px.\n - `--space-1`: the gap between cells and rows inside any bordered block, and between day cells.\n - `--space-2`: vertical padding of bars, strips and buttons; gap between events in a day and between tabs.\n - `--space-3`: vertical padding of cells and tabs, padding inside a day cell, gap between inline items.\n - `--space-4`: horizontal padding of cells and strips, padding of panel bodies, gap between buttons.\n - `--space-5`: page and body padding and the gap between neighbouring blocks and columns. This is the only block gap.\n - `--space-6`: side padding of the masthead, horizontal padding of tabs, list indents, padding of dialog and empty-state bodies.\n- Inner pages keep the masthead, the tab bar and the footer and drop the month heading. From the top: `.ds-breadcrumb`, then `.ds-page-header` in place of the hero (title and one line on the left, the action or the sign-up buttons on the right, no box), then the working blocks at full width: the calendar cells `.ds-grid`, `.ds-tabs` and `.ds-table` on the event list; `.ds-form` on the add page. An event page uses `.ds-layout`: text and replies in `.ds-layout__main` (at least `--size-main`, 440px), details and attendance in `.ds-layout__rail` (`--size-rail`, 230px) on the right. The member's calendar uses `.ds-columns` again.\n- Views. The specimen is a five-screen example calendar; the tab bar has one tab per view and marks the current one. `month` (home) is the month: heading with the previous and next links and the add button, notice, the month grid with its legend, then coming up, the calendars and birthdays in three columns, and the figures strip. `events` is every event as a list: the four calendars as cells, filter tabs, the event table in two groups, count line and page numbers. `event` is one event: sign-up buttons, the withdraw confirmation that the Withdraw button opens, the description as long text and replies beside the details and attendance. `add` is the event form as it came back with an error. `mine` is the member's calendar: sign-ups, an empty reminders box and the notification notes.\n- Form rows are a `--size-label` (180px) label cell and a field cell that takes the rest; text inputs are `--size-field` (260px) unless `--wide` or `--auto`; the year box of the jump form is `--size-year` (56px). A dialog is `--size-dialog` (52%) wide, centred in the flow on a band of the overlay colour.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Arial for everything: `--font-body`, `--font-heading` and `--font-ui` are the same Arial stack with Verdana second.\n- `--text-base`, `--text-large`, `--text-h2` and `--text-h3` are 13px; `--text-small` and `--text-ui` 11px; `--text-h1` 16px; `--text-display` 18px. Hierarchy comes from weight, not size. Nothing is larger than 18px.\n- Line height is `normal`. No tracking, no uppercase. `--weight-ui` is 700.\n- Every link is underlined, at rest and hovered: `--link-decoration`, `--link-decoration-quiet` and `--link-decoration-hover` are all `underline`.\n\n## Components\n\n- `ds-progress`: a quota or poll bar, a native `` with a label above (private-message quota).\n- `ds-accordion`: a collapsible `
` entry for a forum jump or an FAQ answer.\n- `ds-avatar`: the square picture of a member, placed under or beside the name.\n- `.ds-page`: on ``. Wrap everything in `.ds-page__frame`; `.ds-page__body` holds the views. Each view is a `.ds-view` section (`.ds-view--home` for the month) and its blocks go in `.ds-view__body`. `.ds-columns` is the row of equal columns; `.ds-layout` with `.ds-layout__main` and `.ds-layout__rail` the two-column area. `.ds-page__legal` is an optional line of small print inside the sheet. `.ds-icon` sizes an inline SVG icon, `.ds-sprite` hides a symbol sheet, `.ds-block` puts a span on its own line, `.ds-scroll` lets a wide table scroll inside its own box.\n- `.ds-nav`: the site header. `.ds-nav__head` is the masthead with `.ds-nav__brand` (the `.ds-brand` and a `.ds-nav__tagline`) and the `.ds-nav__jump` form, whose year box also takes `.ds-nav__year`. `.ds-nav__bar` holds `.ds-nav__menu`, the row of `.ds-nav__link` tabs, and the `.ds-nav__today` line; the current tab takes `is-current`, and in the specimen one `:has()` rule per view applies the same dress.\n- `.ds-brand`: the site's mark and name at the left of the masthead; 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.4 times `--text-display`. `.ds-brand__name` is the name in `--font-heading` at `--text-display`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-breadcrumb`: one bordered line at the top of an inner page, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-hero`: the month heading, one bordered cell: `.ds-hero__text` with the month as `.ds-hero__title` and a `.ds-hero__lead` count line, and `.ds-hero__action` with the previous and next links (`.ds-hero__step`) and the add button. Never a banner.\n- `.ds-cal`: the month grid. Seven `.ds-cal__head` weekday cells, then one `.ds-cal__day` per day (`--weekend`, `--other` for a day of another month, `is-today`), each with a `.ds-cal__num` and its events as `.ds-cal__event` links (`--release`, `--contest`, `--upkeep`). An event name that does not fit is cut with an ellipsis; never let a day cell grow sideways.\n- `.ds-swatch`: the small square that names an event kind (`--release`, `--contest`, `--upkeep`). `.ds-legend` with `.ds-legend__item` explains the kinds under the month.\n- `.ds-page-header`: the head of an inner page. `.ds-page-header__text` holds `.ds-page-header__title` and one `.ds-page-header__desc` line; `.ds-page-header__action` or a `.ds-buttons` group sits at the right.\n- `.ds-prose`: long text such as an event description: h1, h2, h3, p, ul, strong, code, hr.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for names and tools, `.ds-link--strong` for bold.\n- `.ds-button`: the primary action, glossy orange with white bold text. `.ds-button--secondary` is the plain navy button. `.ds-button--danger` is for a destructive action such as withdrawing or deleting an event; use it once per confirmation, beside a secondary button. `is-hover`, `is-active`, `is-focus`, `is-disabled` (or `disabled`). Group buttons in `.ds-buttons`.\n- `.ds-form`: a ruled block of rows. `.ds-form__title`, `.ds-form__row` with `.ds-form__label` (plus `.ds-form__hint`) and `.ds-form__field`; controls take `.ds-form__input` (`--wide`, `--auto`, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`, buttons in `.ds-form__actions`.\n- `.ds-table`: the event list and any data table. `th` is the primary bar (`.ds-table__head--left` for text columns); `.ds-table__group` is a group row; `.ds-table__row--alt` the alternate row; cells `.ds-table__num` and `.ds-table__last` (the date); inside the main cell `.ds-table__title`, `.ds-table__desc`, `.ds-table__meta`.\n- `.ds-list`: event rows outside a table. `.ds-list__head`, then `.ds-list__item` (`is-alt` for the alternate row) made of a `.ds-list__date` tile with the day in `.ds-list__day` and a `.ds-list__text` cell with `.ds-list__title` and `.ds-list__meta`.\n- `.ds-panel`: any titled box. `.ds-panel__title` (add `--bar` for a main block), `.ds-panel__sub`, `.ds-panel__body` (`--alt`), `.ds-panel__line`. `.ds-spec` is the label and value list of an event inside a panel: `.ds-spec__label`, `.ds-spec__value`.\n- `.ds-stat`: summary figures as one ruled strip of equal cells. `.ds-stat__title` is optional; each `.ds-stat__item` has a `.ds-stat__value` over a `.ds-stat__label`. Use three to six.\n- `.ds-grid`: the calendars as cells with 1px gaps in one bordered block. `.ds-grid__title`, `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with a swatch, `.ds-grid__name`, `.ds-grid__meta` and `.ds-grid__count`.\n- `.ds-tabs`: a row of `.ds-tabs__tab` items on a 2px rule; `is-current` takes the primary bar fill. Use for the filters of one list.\n- `.ds-badge`: a small square label in the accent fill. `.ds-badge--quiet` is the secondary bar. `.ds-badge--success` (open, going), `.ds-badge--warning` (few places, maybe) and `.ds-badge--danger` (closed, cancelled) are tints with an outline. `.ds-new` is bold text for a \"new\" remark.\n- `.ds-sidebar`: a column of link boxes. Each `.ds-sidebar__block` has a `.ds-sidebar__title`, a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows with a `.ds-sidebar__count` figure, and an optional `.ds-sidebar__foot` with a `.ds-sidebar__footlink`.\n- `.ds-notice`: a tinted line for calendar news; `.ds-notice--error` is the error box with a `.ds-notice__title`. `.ds-notice__link` is a link inside either.\n- `.ds-pagination`: `.ds-pagination__label`, then small bordered `.ds-pagination__link` boxes; `is-current` for the current page. `.ds-toolbar` puts a count line on the left and the page numbers on the right.\n- `.ds-comment`: replies under an event, one ruled block: a `.ds-comment__head` strip per reply, then `.ds-comment__body` (`--alt`) with `.ds-comment__text` and an optional `.ds-comment__sig` signature line.\n- `.ds-dialog`: a confirmation box in the page flow with a 2px outline: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`, on a `.ds-dialog__backdrop` band. It never floats over the page.\n- `.ds-empty`: a ruled block with one centred message and one button for a list with nothing in it: `.ds-empty__title`, `.ds-empty__body`, `.ds-empty__text`.\n- `.ds-footer`: the dark band closing the sheet: a centred `.ds-footer__row` of `.ds-footer__link` items with `.ds-footer__sep` between them, and one `.ds-footer__line` under it.\n\n## Never\n\n- `row-gap <= 1px`: rows touch or are separated by a 1px line.\n- `block-gap <= 20px`: neighbouring blocks are 10px apart.\n- `content-width >= 90%`: the month fills the viewport.\n- `font-size <= 18px`: the site name is the largest text.\n- `font-size >= 11px`: 11px is the smallest size.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 2`: Arial and 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, titles included.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: no shadow in any reference.\n- `text-shadow = none`: no text shadow in any reference.\n- `gradient-fills <= 0%`: bars and buttons are flat colour.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 1px`: hairlines only.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new titled box from `.ds-panel`, a new row layout from `.ds-list` or `.ds-table`, a week or day view from `.ds-cal`, a new figure list from `.ds-spec`. Build it as a 1px `--color-border` outline on `--fill-panel`, with cells in the three surface colours `--space-1` apart and a title in `--fill-bar` or `--color-surface-strong`. Keep text tokens on the fills named above (bar text on bars, heading text on the strong surface, quiet links on cells). Use tokens only: no raw colours or lengths, no new radius, shadow or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). The calendar of a board: a dark masthead\n with the month jump box, section tabs that join the sheet, a month grid\n across the full width, then three equal columns. */\n:root {\n --size-page: 100%;\n --size-main: 440px;\n --size-rail: 230px;\n --size-day: 82px;\n --size-col: 230px;\n --size-tile: 44px;\n --size-year: 56px;\n --size-count: 60px;\n --size-date: 120px;\n --size-row: 28px;\n --size-bar: 22px;\n --size-icon: 10px;\n --size-label: 180px;\n --size-field: 260px;\n --size-dialog: 52%;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 7px;\n --space-5: 10px;\n --space-6: 14px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The sheet every block sits on. */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-page__body {\n padding: var(--space-5);\n}\n/* Small print, inside the sheet so it never sits on the page colour. */\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n text-align: center;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- nav: the masthead band with the jump box, then the section\n tabs on the secondary bar ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__head {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4) var(--space-6);\n padding: var(--space-5) 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-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n}\n/* The mark on a button-dressed tile; the name takes the inverse text colour\n because it stands on the inverted band. */\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.4);\n height: calc(var(--text-display) * 1.4);\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}\n.ds-nav__tagline {\n font-size: var(--text-small);\n color: var(--color-inverse-text);\n}\n.ds-nav__jump {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-nav__jump .ds-nav__year {\n width: var(--size-year);\n}\n.ds-nav__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: 0 var(--space-5);\n padding: var(--space-3) var(--space-5) 0;\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}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-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-6);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) transparent;\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n line-height: var(--line-heading);\n text-decoration: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n/* The current view's tab, and the first tab when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#month\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#month:target) .ds-nav__link[href=\"#month\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#events:target) .ds-nav__link[href=\"#events\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#event:target) .ds-nav__link[href=\"#event\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#mine:target) .ds-nav__link[href=\"#mine\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-nav__today {\n padding: var(--space-3) 0;\n font-size: var(--text-small);\n}\n\n/* ---------- hero: the month heading ---------- */\n.ds-hero {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4) 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-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__text {\n flex: 1 1 var(--size-col);\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n font-size: var(--text-small);\n}\n/* Previous and next month. */\n.ds-hero__step {\n display: block;\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-hero__step:hover,\n.ds-hero__step.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- cal: the month grid ---------- */\n.ds-cal {\n display: grid;\n grid-template-columns: repeat(7, 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-cal__head {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-bar);\n overflow: hidden;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-cal__day {\n min-width: 0;\n min-height: var(--size-day);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-3) var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) transparent;\n font-size: var(--text-small);\n}\n.ds-cal__day--weekend {\n background: var(--color-surface-alt);\n}\n.ds-cal__day--other {\n background: var(--color-fill-3);\n}\n.ds-cal__day.is-today {\n background: var(--color-fill-4);\n border-color: var(--color-accent);\n}\n.ds-cal__num {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-cal__day.is-today .ds-cal__num {\n color: var(--color-heading);\n}\n.ds-cal__day--other .ds-cal__num {\n font-weight: var(--weight-body);\n}\n.ds-cal__event {\n display: block;\n overflow: hidden;\n margin: var(--space-2) 0 0;\n padding: 0 0 0 var(--space-3);\n border-left: var(--border-width-strong) solid var(--color-bar-alt);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-cal__event:hover,\n.ds-cal__event.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-cal__event--release {\n border-left-color: var(--color-success);\n}\n.ds-cal__event--contest {\n border-left-color: var(--color-warning);\n}\n.ds-cal__event--upkeep {\n border-left-color: var(--color-danger);\n}\n\n/* ---------- swatch and legend: the event kinds ---------- */\n.ds-swatch {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--color-bar-alt);\n}\n.ds-swatch--release {\n background: var(--color-success);\n}\n.ds-swatch--contest {\n background: var(--color-warning);\n}\n.ds-swatch--upkeep {\n background: var(--color-danger);\n}\n.ds-legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3) var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-legend__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- three equal columns under the month ---------- */\n.ds-columns {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--size-col), 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n\n/* ---------- grid: the calendars, one cell each ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--size-rail), 1fr));\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__title {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__cell {\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 color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n display: block;\n padding: var(--space-2) 0 0;\n color: var(--color-text);\n}\n.ds-grid__count {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- list: events with a date tile ---------- */\n.ds-list {\n display: grid;\n align-content: start;\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 min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-tile) minmax(0, 1fr);\n gap: var(--space-1);\n}\n.ds-list__date {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--space-2) 0;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-list__day {\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-display);\n}\n.ds-list__text {\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n.ds-list__item.is-alt .ds-list__text {\n background: var(--color-fill-3);\n}\n.ds-list__title {\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- spec: label and value rows of an event ---------- */\n.ds-spec {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: var(--space-1);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-spec__label {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n.ds-spec__value {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n padding: var(--space-4) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\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 font-weight: var(--weight-bold);\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-bar-text);\n}\n.ds-footer__sep {\n color: var(--color-bar-alt);\n}\n.ds-footer__line {\n margin: 0;\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n/* The column of blocks inside a view, one block gap apart. */\n.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-sprite {\n position: absolute;\n}\n.ds-icon {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-block {\n display: block;\n}\n/* Lets a wide table scroll inside its own box on a narrow window. */\n.ds-scroll {\n max-width: 100%;\n overflow-x: auto;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n/* Dark links for tools, meta and member names. */\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- page header: the head of an inner page ---------- */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-4) var(--space-6);\n}\n.ds-page-header__text {\n flex: 1 1 50%;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__desc {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n color: var(--color-heading);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n padding: var(--space-4) 0 0;\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-text);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose hr {\n height: 0;\n margin: var(--space-4) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n/* The plain system button. */\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-input-border);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-disabled);\n}\n/* Destructive action: the error pair, error text on the error surface with\n an error outline. It does not depend on the primary button's colours. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-form__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-form__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n}\n.ds-form__label {\n flex: 1 1 var(--size-label);\n box-sizing: border-box;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n flex: 999 1 var(--size-field);\n min-width: 0;\n box-sizing: border-box;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n letter-spacing: 0;\n text-transform: none;\n text-shadow: none;\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Status labels: a tint of the status colour over the cell surface, with body\n text and the status colour as the outline, so they read under any palette. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 30%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));\n border-color: var(--color-danger);\n}\n.ds-new {\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- notice ---------- */\n/* The edge is a half mix of the accent and the notice colour. */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 50%, var(--color-notice));\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n/* A link inside a notice takes the notice text colour and stays underlined. */\n.ds-notice__link {\n color: inherit;\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n/* Tools on the left, page numbers on the right. */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n display: grid;\n gap: var(--space-1);\n width: var(--size-dialog);\n min-width: min(100%, var(--size-field));\n max-width: 100%;\n box-sizing: border-box;\n margin: 0 auto;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n\n/* ---------- empty state: a single message row ---------- */\n.ds-empty {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-empty__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n/* Primary bar as the title strip: main blocks. */\n.ds-panel__title--bar {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__sub {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-panel__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-panel__body--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__line:last-child {\n margin: 0;\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: separate;\n border-spacing: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-table th {\n height: var(--size-bar);\n padding: 0 var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__head--left {\n text-align: left;\n}\n.ds-table td {\n height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n vertical-align: middle;\n}\n/* The era's alternating row colour. */\n.ds-table .ds-table__row--alt td {\n background: var(--color-fill-3);\n}\n.ds-table .ds-table__num,\n.ds-table .ds-table__row--alt .ds-table__num,\n.ds-table .ds-table__last,\n.ds-table .ds-table__row--alt .ds-table__last {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n width: var(--size-count);\n font-size: var(--text-base);\n text-align: center;\n white-space: nowrap;\n}\n.ds-table .ds-table__last {\n width: var(--size-date);\n white-space: nowrap;\n}\n/* Group row: the strongest surface, heading text. */\n.ds-table .ds-table__group td {\n height: var(--size-bar);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-table__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-table__desc {\n display: block;\n padding: var(--space-1) 0 0;\n}\n.ds-table__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- stats: a strip of count cells ---------- */\n.ds-stat {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__title {\n flex: 0 0 100%;\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-stat__item {\n flex: 1 1 var(--size-count);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-stat__label {\n display: block;\n padding: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- two-column area: a working column and a rail ---------- */\n.ds-layout {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-layout__main {\n flex: 999 1 var(--size-main);\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-layout__rail {\n flex: 1 1 var(--size-rail);\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-sidebar__block {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-sidebar__item:last-child {\n border-bottom: 0;\n}\n.ds-sidebar__count {\n flex: none;\n color: var(--color-text-muted);\n}\n.ds-sidebar__foot {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-sidebar__footlink {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__footlink:hover,\n.ds-sidebar__footlink.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- comments: short replies under a page ---------- */\n.ds-comment {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-comment__head {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-comment__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-comment__body--alt {\n background: var(--color-fill-3);\n}\n.ds-comment__text {\n margin: 0;\n}\n.ds-comment__sig {\n margin: var(--space-3) 0 0;\n padding: var(--space-2) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* The current item also carries a weight and a bar that a token set cannot reduce to the bar's own fill. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#month\"],\n.ds-page:has(#month:target) .ds-nav__link[href=\"#month\"],\n.ds-page:has(#events:target) .ds-nav__link[href=\"#events\"],\n.ds-page:has(#event:target) .ds-nav__link[href=\"#event\"],\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"],\n.ds-page:has(#mine:target) .ds-nav__link[href=\"#mine\"] {\n font-weight: var(--weight-bold, 700);\n}\n\n/* ---------- progress: a quota or poll bar ---------- */\n.ds-progress {\n display: block;\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__label {\n display: block;\n margin-bottom: var(--space-1);\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-meter);\n box-sizing: border-box;\n appearance: none;\n -webkit-appearance: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--color-input);\n color: var(--color-accent);\n overflow: hidden;\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-input);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent);\n}\n\n/* ---------- accordion: a collapsible category or FAQ entry ---------- */\n.ds-accordion {\n margin: 0 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-canvas);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-1) var(--space-2);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body {\n margin: 0;\n padding: var(--space-2);\n}\n.ds-accordion__list {\n margin: 0;\n padding: 0 0 0 var(--space-4);\n}\n\n/* ---------- avatar: the picture under a post author's name ---------- */\n.ds-avatar {\n display: flex;\n flex: none;\n align-items: flex-end;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n box-sizing: border-box;\n margin: var(--space-1) 0;\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-avatar svg {\n display: block;\n width: 80%;\n height: 80%;\n}\n\n:root {\n --size-avatar: 56px;\n --size-meter: 12px;\n}\n.ds-sprite {\n position: absolute;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: board calendar specimen\n\n\n\n\n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n Community calendar: chat nights, releases, contests and meetups\n
\n
\n \n \n \n \n
\n
\n
\n \n Today is Thursday, 10 November 2005. All times are GMT.\n
\n
\n\n
\n\n \n
\n
\n\n
\n
\n

November 2005

\n

14 events this month, 3 of them this week. You are signed up for 2.

\n
\n

\n « October\n December »\n Add an event\n

\n
\n\n

Read-only on Tuesday: the board is upgraded on 8 November from 06:00 to 08:00. Sign-ups made before then are kept. Details

\n\n
\n
Mon
\n
Tue
\n
Wed
\n
Thu
\n
Fri
\n
Sat
\n
Sun
\n
31Halloween avatars
\n
1
\n
2
\n
3Skin contest opens
\n
4
\n
5Chat night, 20:00
\n
6
\n
7
\n
8Board upgrade
\n
9
\n
10Harvest 1.5 releaseModerator meeting
\n
11
\n
12Chat night, 20:00
\n
13
\n
14
\n
15Button set deadline
\n
16
\n
17
\n
18Autumn meetup
\n
19Autumn meetupChat night, 20:00
\n
20
\n
21
\n
22Slate 1.3 release
\n
23
\n
24
\n
25
\n
26Chat night, 20:00
\n
27
\n
28Contest voting closes
\n
29
\n
30Backup window
\n
1
\n
2
\n
3Chat night, 20:00
\n
4
\n
\n
    \n
  • Meetups and chat nights
    • \n
  • Releases
    • \n
  • Contests
    • \n
  • Board upkeep
    • \n
\n\n
\n
    \n
  • Coming up
    • \n
  • \n 10Nov\n
    Harvest 1.5 release Today\n Releases, 18:00. Posted by oldpine.
    \n
    • \n
  • \n 12Nov\n
    Chat night\n Meetups, 20:00 to midnight. 11 going.
    \n
    • \n
  • \n 15Nov\n
    Button set deadline\n Contests, entries close at 23:59.
    \n
    • \n
  • \n 18Nov\n
    Autumn meetup 4 places left\n Meetups, two days. 26 of 30 going.
    \n
    • \n
\n\n \n\n
\n

Birthdays this week

\n
\n

Today: tessa (27), corbin

\n

Sat 12: marek_v (31)

\n

Sun 13: ilse, fenwick (40)

\n

Mon 14: harrow (35)

\n
\n

On this day

\n
\n

2003: the board opened with 4 forums and 12 members.

\n

2004: the first chat night, with 9 members.

\n
\n
\n
\n\n
\n
14events this month
\n
87sign-ups
\n
9birthdays
\n
212events since 2003
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Calendar
    4. \n
  4. >
    5. \n
  5. All events
    6. \n
\n\n
\n
\n

All events

\n

Everything on the four calendars, soonest first. Sign up from the event page.

\n
\n
Add an event
\n
\n\n
\n

The four calendars

\n
\n Meetups\n Chat nights every Saturday and two meetups a year.\n 6 events, 61 sign-ups\n
\n
\n Releases\n New versions of skins and add-ons, set by their authors.\n 2 events\n
\n
\n Contests\n Opening days, deadlines and the end of voting.\n 3 events, 26 entries\n
\n
\n Board upkeep\n Upgrades and backups, when the board is read-only.\n 2 events\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
WhenEventCalendarGoingRepliesSign-up
This week
Thu 10 Nov18:00Harvest 1.5 releaseThe narrow variant becomes the default. Posted by oldpine.Releases07No sign-up
Sat 12 Nov20:00 to 00:00Chat nightThe weekly open chat. This week: questions about templates.Meetups113Open
Later in November
Tue 15 Nov23:59Button set deadlineLast day to send an entry for the button contest.Contests2641Closes soon
Fri 18 Novtwo daysAutumn meetupTwo days in a hired hall: talks, a skin workshop, dinner.Meetups26584 places left
Tue 22 Novall daySlate 1.3 releaseAdds the calendar pages. Posted by harrow.Releases02No sign-up
Wed 30 Nov03:00 to 04:00Backup windowThe board is read-only for an hour.Board upkeep00Closed
\n
\n\n
\n Events 1 to 6 of 14. Back to the month\n \n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. Calendar
    2. \n
  2. >
    3. \n
  3. Meetups
    4. \n
  4. >
    5. \n
  5. Autumn meetup
    6. \n
\n\n
\n
\n

Autumn meetup

\n

Friday 18 and Saturday 19 November 2005. Organised by tessa. You are signed up.

\n
\n
\n I am going\n Maybe\n Withdraw\n \n
\n
\n\n
\n
\n

Withdraw from this event?

\n
\n

Your place at the Autumn meetup goes to the next member on the waiting list. You can sign up again only while places are left.

\n
\n Withdraw\n Stay signed up\n
\n
\n
\n
\n\n
\n
\n
\n

Two days of skins and talk

\n

The autumn meetup is the one time of year the board meets in a room. Friday is for talks, Saturday for the workshop and the dinner. Thirty places, of which four are left.

\n

Programme

\n
    \n
  • Friday 14:00: doors, then three short talks on template edits.
    • \n
  • Saturday 10:00: skin workshop. Bring a board you can change.
    • \n
  • Saturday 19:00: dinner, paid on the evening.
    • \n
\n

What to bring

\n

A laptop with a local copy of your board. The workshop files are in meetup/workshop.zip in the file archive.

\n
\n

Related: all meetups, last year's notes (visited), travel thread (hover), room sharing (active).

\n
\n\n
\n
quillon wrote8 Nov 2005, 21:14
\n
\n

Two seats free in my car from the north on Friday morning. Reply in the travel thread.

\n

Rank images in every size, see my files.

\n
\n
dunmore wrote9 Nov 2005, 08:40
\n
\n

Can the workshop files be posted a day early? My connection at the hall was slow last year.

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

Event details

\n
\n
Starts
Fri 18 Nov 2005, 14:00
\n
Ends
Sat 19 Nov 2005, 23:00
\n
Calendar
Meetups
\n
Places
26 of 30 taken
\n
Sign-up
4 places left
\n
Repeats
Every year
\n
\n
\n
\n

Who is going (26)

\n
\n

tessa, oldpine, quillon, harrow, marek_v, dunmore, ilse and 19 more

\n
\n

Maybe (5)

\n
\n

fenwick, corbin and 3 more

\n
\n

Waiting list (0)

\n
\n

Nobody is waiting. A place that comes free goes to the first name here.

\n
\n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Calendar
    4. \n
  4. >
    5. \n
  5. Add an event
    6. \n
\n\n
\n
\n

Add an event

\n

Members add meetups and releases. Contests and board upkeep are added by moderators.

\n
\n
Back to the month
\n
\n\n

The event was not saved. The end of the event lies before its start. Correct the marked field and send the form again.

\n\n
\n

Event

\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n \n The end must be later than the start. For midnight, give the next day.\n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n \n Cancel\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. >
    3. \n
  3. Calendar
    4. \n
  4. >
    5. \n
  5. My calendar
    6. \n
\n\n
\n
\n

My calendar

\n

The events you signed up for, and reminders only you can see.

\n
\n
Add a reminder
\n
\n\n
\n
    \n
  • Signed up
    • \n
  • \n 12Nov\n
    Chat night Going\n Saturday, 20:00 to midnight.
    \n
    • \n
  • \n 18Nov\n
    Autumn meetup Going\n Friday and Saturday. Place 14 of 30.
    \n
    • \n
  • \n 3Dec\n
    Chat night Maybe\n Saturday, 20:00 to midnight.
    \n
    • \n
\n\n
\n

Reminders

\n
\n

You have no reminders. A reminder is an event that only you can see.

\n Add a reminder\n
\n
\n\n
\n

Notify me

\n
\n

By private message, one day before an event you signed up for.

\n

New: birthdays of members on your buddy list can be shown on your month.

\n

Change these settings

\n
\n
\n
\n\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.bulletin-board-forums.app.s08.p02.t11.u03\",\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-82b3\",\n \"short\": \"v1-bb-82b3\"\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: Arial, Verdana, Geneva, Helvetica, sans-serif;\n --font-heading: Arial, Verdana, Geneva, Helvetica, sans-serif;\n --font-ui: Arial, Verdana, Geneva, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 13px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-border-strong);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 18%);\n --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary), var(--color-surface-strong) 50%);\n --fill-input: color-mix(in srgb, var(--color-input), var(--color-surface) 50%);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }