{ "id": "v1-w9-7331", "long_id": "v1.windows-9x.forum.s07.p03.t03.u01", "name": "Desktop grey chat and message boards, canary, 1998", "era": { "slug": "windows-9x", "code": "w9", "name": "Desktop grey", "years": [ 1995, 2001 ], "description": "Web pages dressed as the desktop of 1995 to 2001: silver-grey windows with a navy title bar, raised and sunken bevels on every button and field, a small pixel-sized sans, and dialogs, tabs and tree lists borrowed from the operating system." }, "archetype": "forum", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A community site laid out as the chat program of a late 1990s desktop: one window with a switch bar of window keys under the title bar, the open board or conversation at the left and the list of who is here in a rail at the right, closed by a status bar. This pack shows it in a canary scheme taken from the download sites of the time: pale yellow windows on a blue striped desktop, black title bars with yellow lettering, red selection and headings, every edge a flat black line with a second line inside it, and rounded hand-drawn headings over a 12px system sans. Support boards, hobby communities and web chat rooms took this form between 1996 and 2001, when visitors already knew a chat program and a newsgroup reader and a site could borrow both.", "url": "https://chrono.skin/s/v1-w9-7331", "preview_url": "https://chrono.skin/s/v1-w9-7331/specimen.html", "files": { "STYLE.md": "# Desktop grey chat and message boards, canary, 1998\n\n## Summary\n\nA community site laid out as the chat program of a late 1990s desktop: one window with a switch bar of window keys under the title bar, the open board or conversation at the left and the list of who is here in a rail at the right, closed by a status bar. This pack shows it in a canary scheme taken from the download sites of the time: pale yellow windows on a blue striped desktop, black title bars with yellow lettering, red selection and headings, every edge a flat black line with a second line inside it, and rounded hand-drawn headings over a 12px system sans. Support boards, hobby communities and web chat rooms took this form between 1996 and 2001, when visitors already knew a chat program and a newsgroup reader and a site could borrow both.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 768px, one window (`.ds-page__window`, also a `.ds-window`) centred on the desktop of an 800px screen with a `--space-6` margin above and below.\n- The specimen is one example site, the boards, of five views. `.ds-nav` (title bar and switch bar), the rail and `.ds-footer` (status bar) are written once, inside the window and outside the views; each view is a `.ds-view` and one shows at a time.\n- Under the switch bar comes `.ds-page__columns`: `.ds-page__main` at the left, which holds the views, and `.ds-page__rail` at the right (`--size-rail`, 168px), `--space-2` apart and stretched to the same height. The rail is the only side column and it is at the right: a caption strip, the `.ds-nicks` list of names, which takes the spare height, and the `.ds-sidebar` block of links at its foot.\n- Every view is a `.ds-stack`, a column of blocks `--space-4` apart.\n- Home view (the lobby): the `.ds-hero` (a well with a band in the selection colours at its left, the title, a lead, one line and two keys), the `.ds-stat` line of four read-outs, the `.ds-grid` of six boards, two to a row, and a `.ds-split` of two `.ds-panel`s: the latest messages as a `.ds-list` and the house rules.\n- Inner pages keep the title bar, the switch bar, the rail and the status bar and drop the hero, the read-outs and the boards. They open with the `.ds-breadcrumb` (small links), then the `.ds-page-header`: title and one line at the left, one key at the right, closed by a thick rule in the accent colour. Tabs come straight after the page header, with their `.ds-sheet`.\n- Views: `home` is the lobby. `board` is one board: page header, four tabs over a sheet with the list view of topics (status labels, a selected row, a total row), then the pagination keys beside the key of status labels. `topic` is a conversation: `.ds-posts` with the name of the writer in a column at the left of each message, a line the program says itself, and the Say line under it. `write` is the form for a new message under two notices, with the confirmation dialog beside a panel of advice. `members` is a member's card beside the empty state of the private messages, over the list view of members. The key of the view that is showing stays pressed and bold; the Lobby key is marked when the address names no view.\n- Fixed sizes: `--size-nick` 96px name column of a message; `--size-ctl` 16px caption button and `--size-glyph` 8px glyph and lamp; `--size-icon` 32px and `--size-icon-small` 16px icons; `--size-check` 13px check box and radio button; `--size-label` 96px form label column; `--size-field` 200px text field; `--size-dialog` 316px; `--size-button` 75px least key width; `--size-block` 8px progress block.\n- Spacing scale: `--space-0` 1px is the hairline step (row padding in the list of names); `--space-1` 2px the gap between keys and the padding of bars; `--space-2` 4px the padding of keys, the gap between an icon and its word, between boards and between the working pane and the rail; `--space-3` 6px cell and field padding and the gap between keys in a row; `--space-4` 8px the gap between blocks and the padding of panels; `--space-5` 12px the padding of the hero, sheets and dialogs; `--space-6` 16px the margin of the desktop round the window.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family and a code face: `--font-body`, `--font-heading` and `--font-ui` are Arial (then Helvetica), the commonest face of the references; `--font-mono` is Courier New. Keys, tabs, column heads and the toolbar are bold (`--weight-ui` 700), as the high contrast scheme set them.\n- Sizes are a step larger than the standard scheme: `--text-base`, `--text-ui` and `--text-h3` 13px; `--text-small` 11px; `--text-large` and `--text-h2` 16px; `--text-h1` 20px; `--text-display` 26px. Line height 1.3 in text, 1.25 in headings and keys. All links are underlined.\n- Colour: black windows and wells (`--color-canvas`, `--color-surface`) on a near-black desktop; white text; yellow headings, links and selection (`--color-accent` with black `--color-accent-text`); cyan second headings and icons; a purple title bar with white text; the inactive bar is the true inverse, white with black text. Visited links are pink, hovered green, active orange. Block colours are four dark tints (navy, teal, plum, olive) that carry white text and yellow links. Notices are white on navy; the error notice is light red on a dark red ground. Status colours are bright green, amber and light red on black.\n- Surface: there is no bevel. Every edge is a flat line of `--color-border-strong` (white): 3px round a window, 2px round a raised key, 1px round anything sunken, so a pressed key is told from a raised one by its thinner edge. Under the pointer a key gains a third, grey line. Thin lines are 2px (`--border-width`), and `--border-width-strong` is 3px. A dialog stands inside one more 2px line of `--color-shadow`. All fills are flat; the focus ring is a 2px solid line in `--color-focus`.\n- This layout keeps the conventions the first layout of the era (the file manager) set for which text token sits on which fill and which edge token dresses what. They are repeated here.\n- The era's rule for which text sits on which fill, the same in every layout of the era and to be kept by every token set:\n - The desktop (`--fill-page` over `--color-page`) is always dark enough to carry `--color-bar-text`. Text written straight on the desktop (icon labels, small print) uses `--color-bar-text`.\n - The window face is `--color-canvas`; raised parts inside a window (sheets, notes, dialogs) are `--fill-panel`. Both carry `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n - A sunken well (list view, tree, document, read-out, empty list) is `--color-surface` and carries the same text and link tokens as the window face, so every palette keeps text and links legible on both. `--color-surface-alt` is the alternate row and the fill of inline code and of a pressed toolbar key; `--color-surface-strong` is a group or total row. They carry `--color-text`.\n - A title bar is `--fill-bar` with `--color-bar-text`; the title bar of a window without the focus is `--fill-inverse` with `--color-inverse-text`.\n - Menu bar, toolbar and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n - The selection (current tree row, selected table row, open menu, selected list-box row, progress blocks, the plain badge) is `--fill-accent` with `--color-accent-text`. Links and icons inside a selection inherit that colour.\n - Keys are `--fill-button` with `--color-button-text` (`--color-button-hover-text` under the pointer); the lesser key is `--fill-button-secondary` with `--color-button-secondary-text`; a disabled key is `--color-disabled` with `--color-disabled-text`. The destructive key is `--fill-button` with a bold label in `--color-danger`.\n - Fields and the path field are `--fill-input` with `--color-input-text`; links inside the path field use the link tokens, so a palette keeps `--color-input` close to `--color-surface`. `--color-input-border` outlines the check box.\n - `--color-fill-1` to `--color-fill-4` carry `--color-text` (icons drawn on them) and, in the help layout, `--color-link`.\n - Notices are `--color-notice` with `--color-notice-text` inside a line of `--color-border-strong`; the error notice is `--color-danger` on `--color-danger-surface`.\n - Status labels print `--color-success`, `--color-warning` and `--color-danger` as text and frame on `--color-surface`, so each status colour must read on the well colour; none of them is used as a fill under text.\n - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, title bars, block colours and selections.\n- Edges, the same in every layout of the era. Nothing has a border of its own except thin lines; every raised or sunken edge is a `box-shadow` token drawn inside the box:\n - `--shadow-panel`: the raised frame of a window. `--shadow-dialog`: the frame of a dialog.\n - `--shadow-control`: every raised key: buttons, toolbar keys, caption buttons, column heads, tabs and their sheet, pagination keys, the brand tile.\n - `--shadow-control-pressed`: everything sunken: fields, the path field, wells, read-outs, status cells, the check box, the progress bar, a pressed key, the current pagination key. Note that fields take the pressed token, not `--shadow-control`.\n - `--border-width-strong` is the thickness of those edges: padding that must clear an edge is written `calc(var(--border-width-strong) + var(--space-N))`.\n - `--border-width`, `--border-style` and `--color-border` draw the thin lines: group boxes, the etched rule (`--color-border` over `--color-border-muted`), toolbar separators, table row lines (`--color-surface-alt`), the frame of notices, badges and the default button (`--color-border-strong`).\n - `--color-border`, `--color-border-strong` and `--color-border-muted` are the three shades the edge tokens are built from: the mid shadow, the darkest outer line and the light edge. A palette sets them as a bevel set for its window face.\n- Not expressible by a token and written literally in `components.css`: the `dotted` guide lines of the tree (and of topic lists), the `solid` strokes of the caption-button glyphs, and `clip-path` on the current tab, which cuts off its lower edge so that it joins the sheet.\n- All radii are 0 and are still applied through `--radius-control`, `--radius-panel`, `--radius-pill` and `--radius-page`. `--shadow-text` is applied to title bars and buttons. `--transition` is `none`; `--backdrop-blur` is `0px` and nothing is translucent.\n\n## Components\n\nThe name `chronoskin` and its mark are placeholders for the installing project's own name and mark.\n\n- `.ds-page`: the desktop, on ``; `.ds-page__window` is the one window, `.ds-page__columns` the working pane (`.ds-page__main`) and the rail (`.ds-page__rail`).\n- `.ds-window`: a raised frame; `.ds-window__title` is its title bar (`--inactive` for a window without the focus) with `.ds-window__caption` and the `.ds-window__ctl` caption buttons (`--min`, `--max`, `--close`).\n- `.ds-nav`: the title bar and the switch bar. `.ds-nav__links` is the bar, each `.ds-nav__item` an equal share of it, `.ds-nav__link` a raised window key with an icon; the current one is pressed and bold. `.ds-nav__state` is the sunken connection read-out at the right, with its `.ds-nav__lamp`.\n- `.ds-brand`: the mark and the name at the left of the title bar. `.ds-brand__mark` is a small key dressed like the default button, `.ds-brand__name` the name in the heading face.\n- `.ds-hero`: the welcome of the lobby, a well. `.ds-hero__band` is the block in the selection colours with a large icon, `.ds-hero__body` holds `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__text` and `.ds-hero__action`. Home view only.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead` at the left, `.ds-page-header__action` at the right, a thick accent rule under it.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n- `.ds-prose`: running text inside a message: `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `li`, `strong`, `code`; `.ds-prose__lead` is the lead line.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` for tool and footer links, `.ds-link--strong` for a bold one. `.ds-links` wraps a line of links.\n- `.ds-button`: a raised key at least `--size-button` wide; the plain class is the default key, inside one more line. `.ds-button--secondary` is every other key, `.ds-button--danger` the destructive one, `.ds-button--large` a bigger one. States `is-hover`, `is-pressed`, `is-focus`, `is-disabled` or `disabled`. `.ds-buttons` lays out a row; a `.ds-find__fill` spacer pushes keys apart.\n- `.ds-form`: two columns, `.ds-form__label` and `.ds-form__field`. Controls: `.ds-form__input` (`--short`, `--wide`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check` and `.ds-form__radio` inside a `.ds-form__option`. `.ds-form__hint` is a small line under a field, `.ds-form__error` a bold line in the danger colour, `.ds-form__actions` the row of keys.\n- `.ds-table`: a list view: a well whose `.ds-table__head` cells are raised (`--num` right-aligned). `.ds-table__row` (`--alt` tinted, `is-selected` in the selection colours), `.ds-table__cell` (`--num`, `--group` for a total row), `.ds-table__caption`.\n- `.ds-list`: lines of a log. Each `.ds-list__item` is a `.ds-list__meta` (the time, monospace), a `.ds-list__who` (the name, bold) and a `.ds-list__text`; an icon may stand in place of the first two.\n- `.ds-panel`: a raised caption strip (`.ds-panel__title`) over a well (`.ds-panel__body`). `.ds-panel--fill` takes spare height.\n- `.ds-stat`: the line of read-outs; each `.ds-stat__item` is a sunken cell with the `.ds-stat__value` (heading face, `--text-h1`) before its `.ds-stat__label` on one line.\n- `.ds-grid`: the boards, two to a row. A `.ds-grid__cell` is a framed row: `.ds-grid__icon` is the block of colour (`.ds-grid__cell--2` to `--4` take the other block colours), `.ds-grid__body` holds `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__meta`.\n- `.ds-tabs`: a property sheet: `.ds-tabs__item` holds a `.ds-tabs__tab`; the current one (`is-current`) is taller, bold and joined to the `.ds-sheet` that always follows.\n- `.ds-badge`: a small bold label in the selection colours. `.ds-badge--count` is a plain muted count. Status: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`. `.ds-badges` lays out a row.\n- `.ds-sidebar`: a well at the foot of the rail with a `.ds-sidebar__title` and a `.ds-sidebar__list` of links.\n- `.ds-notice`: the tip box inside a dark line; `.ds-notice__label` is the bold lead word, `.ds-notice--error` the error form. `.ds-notices` stacks several.\n- `.ds-pagination`: a row of small keys: `.ds-pagination__label`, then `.ds-pagination__link`s; `is-current` is pressed and bold, `is-disabled` greyed.\n- `.ds-breadcrumb`: the path in small type, the `.ds-breadcrumb__item`s parted by a double angle; the last is `is-current`.\n- `.ds-dialog`: a small window `--size-dialog` wide, shown where it would open: `.ds-dialog__title`, `.ds-dialog__content` with a large icon and the `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: an empty well with a large icon, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: the status bar, a `.ds-status` row of sunken `.ds-status__cell`s (`--wide` takes the free width).\n- `.ds-nicks`: the list of who is here: `.ds-nicks__group` is a small caption, `.ds-nicks__item` a name with its icon (`--host` bold, `--away` muted, `is-selected` in the selection colours).\n- `.ds-posts`: a conversation in a well. Each `.ds-post` has `.ds-post__who` (`.ds-post__name`, `.ds-post__role`) at the left and `.ds-post__body` (`.ds-post__head`, then `.ds-post__text` or a `.ds-prose`) at the right; `.ds-post__event` is a line the program says itself.\n- `.ds-icon` (`--large`, `--plain`), `.ds-well`, `.ds-rule`, `.ds-group` with `.ds-group__title`, `.ds-props` with `.ds-props__label` and `.ds-props__value`, `.ds-progress` with `.ds-progress__block`: the small parts every layout of the era shares.\n- `.ds-heading`: a section title. `.ds-split`: two equal columns of the same height. `.ds-stack`: a column of blocks (`--tight` closer). `.ds-find`: a row of a label, a field and keys.\n\n## Never\n\n- `row-gap <= 8px`: rows of lists and list views touch or sit 1px to 4px apart.\n- `block-gap <= 16px`: blocks inside the window are 8px apart, never more than 16px.\n- `content-width <= 768px`: everything is inside the one 768px window.\n- `font-size >= 11px`: small print is 11px, nothing smaller.\n- `font-size <= 26px`: the banner title is the largest text; topic titles stop at 20px.\n- `font-weight >= 400`: only regular and bold.\n- `font-families <= 2`: Arial and a monospace face.\n- `letter-spacing = 0`: no tracking.\n- `uppercase-text <= 0%`: no text-transform.\n- `border-radius <= 0px`: the desktop had no rounded corner.\n- `box-shadow-blur <= 0px`: every shadow is a hard 1px or 2px bevel line; nothing is blurred.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 3%`: the title bars are the only gradient.\n- `border-width <= 2px`: thin lines are 1px; the widest stroke is the 2px top of a caption glyph.\n- `transition = none`: nothing eases on hover.\n- `animation = none`: no CSS animation.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything that holds content is a `.ds-panel` (caption strip over a well) or a `.ds-well`; anything that lists is a `.ds-table`, a `.ds-list` or the `.ds-nicks` list; a new kind of conversation is a `.ds-posts`. Anything pressed or typed into takes `--shadow-control-pressed`, anything pushed takes `--shadow-control`. Clear every edge with `calc(var(--border-width-strong) + ...)` padding, keep the rail at the right and the same on every view, keep text at `--text-base` or `--text-ui`, and never add a radius, a blurred shadow, a gradient outside the `--fill-*` tokens, a hover animation or a colour of your own.\n", "components.css": "/* Layout tokens (structure part). A message board laid out as a chat\n program, 768px wide on an 800px screen: a switch bar of window keys, the\n open board or conversation at the left and the list of who is here in a\n rail at the right. */\n:root {\n --size-page: 768px;\n --size-rail: 168px;\n --size-nick: 96px;\n --size-ctl: 16px;\n --size-glyph: 8px;\n --size-icon: 32px;\n --size-icon-small: 16px;\n --size-check: 13px;\n --size-label: 96px;\n --size-field: 200px;\n --size-dialog: 316px;\n --size-button: 75px;\n --size-block: 8px;\n --space-0: 1px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 6px;\n --space-4: 8px;\n --space-5: 12px;\n --space-6: 16px;\n}\n\n/* ---------- shell: the desktop and the chat window ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-6) 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page__window {\n width: var(--size-page);\n margin: 0 auto;\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n/* The working pane at the left and the rail at the right, the same height. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-rail);\n gap: var(--space-2);\n align-items: stretch;\n padding: var(--space-2) 0;\n}\n.ds-page__main {\n min-width: 0;\n}\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: stretch;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- window: a raised frame with a title bar ---------- */\n.ds-window {\n box-sizing: border-box;\n min-width: 0;\n padding: calc(var(--border-width-strong) + var(--space-1));\n background: var(--fill-panel);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-window__title {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n/* A window that does not have the focus. */\n.ds-window__caption {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.ds-window__controls {\n display: flex;\n flex: none;\n gap: var(--space-1);\n}\n/* Caption buttons: small raised squares, the glyph drawn in CSS. */\n.ds-window__ctl {\n position: relative;\n box-sizing: border-box;\n width: var(--size-ctl);\n height: calc(var(--size-ctl) - var(--space-1));\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-window__ctl::before,\n.ds-window__ctl::after {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n}\n.ds-window__ctl--min::before {\n left: var(--space-2);\n bottom: calc(var(--space-1) + var(--space-0));\n width: calc(var(--size-glyph) - var(--space-1));\n height: var(--space-1);\n background: currentColor;\n}\n.ds-window__ctl--max::before {\n left: calc(50% - var(--size-glyph) / 2);\n top: calc(50% - var(--size-glyph) / 2);\n width: var(--size-glyph);\n height: var(--size-glyph);\n border: var(--space-0) solid currentColor;\n border-top-width: var(--space-1);\n}\n.ds-window__ctl--close::before,\n.ds-window__ctl--close::after {\n left: calc(50% - var(--size-glyph) / 2 - var(--space-0));\n top: calc(50% - var(--space-0));\n width: calc(var(--size-glyph) + var(--space-1));\n height: var(--space-1);\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-window__ctl--close::after {\n transform: rotate(-45deg);\n}\n\n/* ---------- small things used everywhere ---------- */\n/* Etched line: a dark rule over a light one. */\n.ds-rule {\n height: 0;\n margin: var(--space-4) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n/* Pixel icon: inline SVG painted with the text colour of its place. */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n vertical-align: text-bottom;\n color: var(--color-heading-alt);\n}\n.ds-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-icon--large {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-icon--plain {\n color: inherit;\n}\n/* Sunken well: the white field that holds lists, trees and documents. */\n.ds-well {\n box-sizing: border-box;\n min-width: 0;\n padding: calc(var(--border-width-strong) + var(--space-3));\n background: var(--color-surface);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n/* Progress bar made of blocks. */\n.ds-progress {\n display: inline-flex;\n gap: var(--space-1);\n box-sizing: border-box;\n padding: calc(var(--border-width-strong) + var(--space-0));\n background: var(--color-surface);\n box-shadow: var(--shadow-control-pressed);\n vertical-align: middle;\n}\n.ds-progress__block {\n width: var(--size-block);\n height: calc(var(--size-block) + var(--space-2));\n background: var(--fill-accent);\n}\n.ds-progress__block--empty {\n background: transparent;\n}\n/* Status bar: sunken cells. */\n.ds-status {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-status__cell {\n padding: calc(var(--border-width-strong) + var(--space-0)) var(--space-3);\n box-shadow: var(--shadow-control-pressed);\n white-space: nowrap;\n}\n.ds-status__cell--wide {\n flex: 1;\n min-width: 0;\n white-space: normal;\n}\n/* Group box: a thin frame with its caption cut into the top edge. */\n.ds-group {\n box-sizing: border-box;\n min-width: 0;\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-group__title {\n padding: 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n/* Property rows: a label column and a value column. */\n.ds-props {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n column-gap: var(--space-5);\n row-gap: var(--space-2);\n align-items: center;\n margin: 0;\n}\n.ds-props__label {\n color: var(--color-text-muted);\n}\n.ds-props__value {\n margin: 0;\n}\n/* Tree list: nested rows joined by dotted guide lines. */\n.ds-tree__link:hover,\n.ds-tree__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tree__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-tree__link.is-current .ds-icon {\n color: inherit;\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--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n margin: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 calc(var(--space-6) + var(--space-4));\n}\n.ds-prose li {\n padding: 0 0 var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n\n/* ---------- buttons ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n/* The primary button is the default button of a dialog: the same raised key\n as every other, inside one more dark line. */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n min-width: var(--size-button);\n margin: 0;\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-align: center;\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: default;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-pressed {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-2) * -1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n background-clip: padding-box;\n color: var(--color-button-secondary-text);\n border-color: transparent;\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-6);\n font-size: var(--text-large);\n}\n/* Destructive action: the same key, the label in the bold danger colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button);\n background-clip: padding-box;\n color: var(--color-danger);\n border-color: transparent;\n font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n background-clip: padding-box;\n color: var(--color-disabled-text);\n border-color: transparent;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n row-gap: var(--space-3);\n align-items: baseline;\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__label {\n color: var(--color-text);\n}\n.ds-form__field {\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\n max-width: 100%;\n margin: 0;\n padding: calc(var(--border-width-strong) + var(--space-1)) calc(var(--border-width-strong) + var(--space-2));\n background: var(--fill-input);\n color: var(--color-input-text);\n border: 0;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input {\n width: var(--size-field);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__textarea {\n display: block;\n width: 100%;\n resize: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width-strong) * -1 - var(--space-0));\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__option {\n display: inline-flex;\n align-items: center;\n margin: 0 var(--space-5) 0 0;\n}\n.ds-form__check {\n appearance: none;\n box-sizing: border-box;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0 var(--space-3) 0 0;\n padding: calc(var(--border-width-strong) + var(--space-0));\n background: var(--fill-input);\n border: 0;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n outline: var(--border-width) var(--border-style) var(--color-input-border);\n outline-offset: calc(var(--border-width) * -1);\n}\n/* The tick is a block of the field's text colour inside the field's fill. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: var(--color-input-text);\n}\n.ds-form__hint {\n display: block;\n padding: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__error {\n display: block;\n padding: var(--space-1) 0 0;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-2) 0 0;\n}\n\n/* ---------- table: a list view in a sunken well, raised column heads ---------- */\n.ds-table {\n box-sizing: border-box;\n width: 100%;\n padding: var(--border-width-strong);\n border-collapse: separate;\n border-spacing: 0;\n background: var(--color-surface);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-table__head {\n padding: calc(var(--border-width-strong) + var(--space-0)) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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 text-align: left;\n white-space: nowrap;\n}\n.ds-table__head--num {\n text-align: right;\n}\n.ds-table__cell {\n padding: var(--space-1) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-surface-alt);\n text-align: left;\n vertical-align: baseline;\n}\n.ds-table__cell--num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table__cell--group {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n}\n.ds-table__row--alt .ds-table__cell {\n background: var(--color-surface-alt);\n}\n/* The selected row of a list view. */\n.ds-table__row.is-selected .ds-table__cell {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-table__row.is-selected .ds-link,\n.ds-table__row.is-selected .ds-icon {\n color: inherit;\n}\n.ds-table__caption {\n caption-side: bottom;\n padding: var(--space-2) 0 0;\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: left;\n}\n\n/* ---------- tabs: a property sheet ---------- */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n margin: 0;\n padding: 0 var(--space-1);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n align-items: flex-end;\n}\n/* A tab is a raised key whose lower edge slides under the sheet. */\n.ds-tabs__tab {\n display: block;\n margin: 0 0 calc(var(--border-width-strong) * -1);\n padding: var(--space-2) var(--space-4) calc(var(--space-2) + var(--border-width-strong));\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-control);\n line-height: var(--line-heading);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n/* The current tab is taller, stands in front of the sheet and loses its own\n lower edge, so it reads as one piece with the sheet. */\n.ds-tabs__tab.is-current {\n position: relative;\n z-index: 1;\n margin: 0 0 calc(var(--border-width-strong) * -2);\n padding: var(--space-3) var(--space-4) calc(var(--space-2) + var(--border-width-strong) * 2);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n clip-path: inset(0 0 var(--border-width-strong) 0);\n}\n.ds-sheet {\n box-sizing: border-box;\n min-width: 0;\n padding: calc(var(--border-width-strong) + var(--space-5));\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-control);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n border-color: transparent;\n font-weight: var(--weight-body);\n}\n/* Status labels: the status colour as text and frame on the well colour. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n border-color: currentColor;\n}\n.ds-badge--success {\n color: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-danger);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* ---------- notice: the pale tip box with a dark line round it ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__label {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- pagination: a row of small keys ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3) 0 0;\n}\n.ds-pagination__link {\n display: block;\n padding: calc(var(--border-width-strong) + var(--space-0)) calc(var(--border-width-strong) + var(--space-3));\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n line-height: var(--line-heading);\n text-decoration: none;\n cursor: default;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-button-hover-text);\n}\n.ds-pagination__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* ---------- dialog: a small window with an icon, a message and keys ---------- */\n.ds-dialog {\n position: static;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: var(--space-5) auto var(--space-2);\n padding: calc(var(--border-width-strong) + var(--space-1));\n background: var(--fill-panel);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__content {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n padding: var(--space-5);\n}\n.ds-dialog__body {\n flex: 1;\n min-width: 0;\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-5) var(--space-5);\n}\n\n/* ---------- search row ---------- */\n.ds-find {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-find__fill {\n flex: 1;\n}\n\n/* ---------- radio button: the round sunken field ---------- */\n.ds-form__radio {\n appearance: none;\n box-sizing: border-box;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0 var(--space-3) 0 0;\n padding: calc(var(--border-width-strong) + var(--space-0));\n background: var(--fill-input);\n border: 0;\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n outline: var(--border-width) var(--border-style) var(--color-input-border);\n outline-offset: calc(var(--border-width) * -1);\n}\n.ds-form__radio:checked::before,\n.ds-form__radio.is-checked::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background: var(--color-input-text);\n border-radius: 50%;\n}\n\n/* ---------- footer: the status bar of the window ---------- */\n.ds-footer {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* ---------- nav: the title bar and the switch bar of window keys ---------- */\n.ds-nav {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n text-decoration: none;\n}\n/* The mark is the window's icon: a small key dressed like the default button. */\n.ds-brand__mark {\n display: flex;\n flex: none;\n box-sizing: border-box;\n width: calc(var(--size-ctl) + var(--space-2));\n height: calc(var(--size-ctl) + var(--space-2));\n padding: var(--border-width-strong);\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: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n display: flex;\n align-items: stretch;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__item {\n display: flex;\n flex: 1;\n min-width: 0;\n}\n/* A window key: raised, one for every window that is open. */\n.ds-nav__link {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-2);\n min-width: 0;\n padding: calc(var(--border-width-strong) + var(--space-1)) var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n overflow: hidden;\n}\n.ds-nav__link .ds-icon {\n color: inherit;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n/* The key of the window that is showing stays pressed. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"],\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#topic\"],\n.ds-page:has(#write:target) .ds-nav__link[href=\"#write\"],\n.ds-page:has(#members:target) .ds-nav__link[href=\"#members\"] {\n background: var(--color-surface-alt);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n font-weight: var(--weight-bold);\n}\n/* The connection read-out at the right end of the switch bar. */\n.ds-nav__state {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n padding: 0 var(--space-3);\n background: var(--color-surface);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n white-space: nowrap;\n}\n.ds-nav__lamp {\n width: var(--size-glyph);\n height: var(--size-glyph);\n background: var(--color-success);\n}\n\n/* ---------- hero: the welcome message of the lobby ---------- */\n.ds-hero {\n display: flex;\n align-items: stretch;\n background: var(--color-surface);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n padding: var(--border-width-strong);\n}\n/* A band in the selection colours that carries the large icon. */\n.ds-hero__band {\n display: flex;\n flex: none;\n align-items: flex-start;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-hero__body {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading-alt);\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__lead {\n margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__text {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding: var(--space-2) 0 0;\n}\n\n/* ---------- stats: one line of read-outs, the figure before its label ---------- */\n.ds-stat {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n display: flex;\n flex: 1;\n align-items: baseline;\n gap: var(--space-3);\n min-width: 0;\n padding: calc(var(--border-width-strong) + var(--space-1)) calc(var(--border-width-strong) + var(--space-3));\n background: var(--color-surface);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-stat__value {\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- grid: the boards, two to a row ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-2);\n}\n/* A board: a block of colour with the icon, then the name and the counts. */\n.ds-grid__cell {\n display: flex;\n align-items: stretch;\n min-width: 0;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n text-decoration: none;\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n padding: var(--space-3) var(--space-4);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell--2 .ds-grid__icon {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__icon {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__icon {\n background: var(--color-fill-4);\n}\n.ds-grid__body {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-2) var(--space-4) var(--space-3);\n}\n.ds-grid__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-grid__text {\n color: var(--color-text);\n}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- list: lines of a log: the time, who, and what was said ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-list__meta {\n flex: none;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-list__who {\n flex: none;\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-list__text {\n flex: 1;\n min-width: 0;\n}\n\n/* ---------- panel: a caption strip over a framed body ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n min-width: 0;\n margin: 0;\n}\n.ds-panel--fill {\n flex: 1;\n}\n.ds-panel__title {\n margin: 0;\n padding: calc(var(--border-width-strong) + var(--space-0)) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n flex: 1;\n margin: 0;\n padding: calc(var(--border-width-strong) + var(--space-3)) calc(var(--border-width-strong) + var(--space-4));\n background: var(--color-surface);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* ---------- breadcrumb: the path of rooms above a page ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0 var(--space-1);\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\\00BB\";\n padding: 0 var(--space-2);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header: the title of a board, its topic line and one key ---------- */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: 0 var(--space-1) var(--space-3);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n}\n.ds-page-header__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n\n/* ---------- sidebar: a block of links at the foot of the rail ---------- */\n.ds-sidebar {\n min-width: 0;\n padding: calc(var(--border-width-strong) + var(--space-3));\n background: var(--color-surface);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- who is here: the list of names in the rail ---------- */\n.ds-nicks {\n flex: 1;\n margin: 0;\n padding: calc(var(--border-width-strong) + var(--space-2));\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nicks__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-0) var(--space-1);\n}\n.ds-nicks__item--host {\n font-weight: var(--weight-bold);\n}\n.ds-nicks__item--away {\n color: var(--color-text-muted);\n}\n.ds-nicks__item.is-selected {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-nicks__item.is-selected .ds-icon {\n color: inherit;\n}\n.ds-nicks__group {\n padding: var(--space-2) var(--space-1) var(--space-0);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- posts: a conversation, the name at the left of every message ---------- */\n.ds-posts {\n padding: var(--border-width-strong);\n background: var(--color-surface);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-nick) minmax(0, 1fr);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-post__who {\n display: flex;\n flex-direction: column;\n padding: var(--space-3) var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n.ds-post__name {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-post__role {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__body {\n min-width: 0;\n padding: var(--space-3) var(--space-4) var(--space-2);\n}\n.ds-post__head {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__text {\n margin: 0 0 var(--space-3);\n}\n/* A line the program says itself: someone joined, the topic was moved. */\n.ds-post__event {\n grid-column: 1 / -1;\n padding: var(--space-1) var(--space-3);\n color: var(--color-accent-alt);\n font-size: var(--text-small);\n}\n\n/* ---------- empty state: a message in an empty well ---------- */\n.ds-empty {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n color: var(--color-text);\n box-shadow: var(--shadow-control-pressed);\n text-align: center;\n font-size: var(--text-base);\n}\n.ds-empty__title {\n margin: var(--space-2) 0;\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__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n/* A dialog shown beside another block starts level with it. */\n.ds-split > .ds-dialog {\n margin: 0;\n}\n\n/* ---------- menu: a pull-down under a menu-bar entry (details), opened by a click ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu summary {\n list-style: none;\n cursor: default;\n}\n.ds-menu summary::-webkit-details-marker {\n display: none;\n}\n.ds-menu details[open] > summary {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 30;\n box-sizing: border-box;\n min-width: 100%;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: none;\n white-space: nowrap;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-1) var(--space-5);\n color: inherit;\n text-decoration: none;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n\n/* ---------- tooltip: the pale yellow tip under the pointer, on hover or focus ---------- */\n.ds-tooltip {\n position: relative;\n}\n.ds-tooltip__text {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 40;\n margin-top: var(--space-1);\n padding: var(--space-1) var(--space-2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-transform: none;\n white-space: nowrap;\n}\n.ds-tooltip:hover > .ds-tooltip__text,\n.ds-tooltip:focus-within > .ds-tooltip__text {\n display: block;\n}\n\n/* On an inner view the working pane is as tall as the rail: the sheet under the tabs, or the panel, takes the height left over. */\n.ds-page__main {\n display: flex;\n flex-direction: column;\n}\n.ds-page__main > .ds-view:not(.ds-view--home):target {\n display: flex;\n flex: 1;\n flex-direction: column;\n}\n.ds-view > .ds-stack {\n flex: 1;\n}\n.ds-stack > div:has(> .ds-sheet) {\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n}\n.ds-stack > div > .ds-sheet,\n.ds-stack > .ds-panel {\n flex: 1 0 auto;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin Boards: desktop grey chat and message boards, specimen\n\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n Boards [connected as marlowe]\n \n
\n \n
\n\n
\n
\n\n
\n
\n
\n
\n
\n

Welcome to the boards

\n

Six boards about computers and the people who keep them running, open day and night.

\n

Read as a guest, or pick a name and join in. Message of the day: the scanner drivers board has moved into Hardware.

\n
\n Pick a name\n Read the boards\n
\n
\n
\n\n
    \n
  • 14here now
    • \n
  • 2,318members
    • \n
  • 4,127topics
    • \n
  • 31,860messages
    • \n
\n\n
\n Hardware and driversCards, modems, printers and the files they need.1,204 topics, 9 new today\n Getting onlineDial-up settings, browsers and mail programs.986 topics, 4 new today\n Home pagesWriting pages by hand, counters and guest books.742 topics, 6 new today\n GamesHints, patches and somebody to play against.655 topics, 11 new today\n Swap shopParts wanted and parts looking for a home.318 topics, 2 new today\n The coffee roomEverything that fits nowhere else.222 topics, 3 new today\n
\n\n
\n
\n

Latest messages

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

House rules

\n
\n
    \n
  • One question to a topic, and say what you have tried.
    • \n
  • No serial numbers and no copied programs.
    • \n
  • Hosts are marked with a star. Their word is final.
    • \n
  • Ask a host when in doubt.
    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Lobby
    2. \n
  2. Boards
    3. \n
  3. Hardware and drivers
    4. \n
\n
\n
\n

Hardware and drivers

\n

Cards, modems, printers and the files they need. Hosted by okafor and reyes.

\n
\n
New topic
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TopicStarted byRepliesLast message
Read first: how to ask about a driverreyes02 Feb, reyes
Sound card silent after the updateokafor1221:38, okafor
Which modem string for a noisy line? newlindqvist321:31, abara
Printer prints one line and stopstanaka719:05, reyes
Second hard disk not found at start solvedabara2118:44, abara
Monitor hums at 800 by 600marlowe4Yesterday, okafor
Scanner asks for a card I do not have waitingnovak1Yesterday, novak
Where to send the serial cable closedguest211 Mar, reyes
Topics 1 to 8 of 1,20450replies on this page
\n
\n
\n
\n \n \n
\n new\n solved\n waiting\n closed\n (4 marks)\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Lobby
    2. \n
  2. Hardware and drivers
    3. \n
  3. Topic 4127
    4. \n
\n
\n
\n

Sound card silent after the update

\n

12 replies, 3 people in this topic now. new

\n
\n
Reply
\n
\n
\n
\n
okaforHost, 1,402 messages
\n
\n

Saturday 14 March 1998, 19:02Message 1 of 13

\n
\n

No sound since the driver update

\n

The mixer opens, the bars move, and the speakers stay quiet.

\n

I put in the new driver disk on Friday. The card is found at start and nothing is marked with a warning, but no program makes a sound. The line SET BLASTER=A220 I5 D1 is still in the start file.

\n

What I have tried

\n
    \n
  • Taking the card out and putting it in the next slot
    • \n
  • The old driver, from the disk that came in the box
    • \n
  • Another pair of speakers
    • \n
\n

What the machine is

\n

A 166 with 32 MB, one sound card and a modem that wants the same interrupt.

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

* lindqvist has come into the topic (21:30)

\n
lindqvistMember, 58 messages
\n
\n

Saturday 14 March 1998, 21:33Message 13 of 13

\n

Same card here, same cure. It took ten minutes and one jumper.

\n
\n
\n
\n
\n \n \n Send\n Long reply\n
\n
\n
\n\n
\n
\n
    \n
  1. Lobby
    2. \n
  2. Hardware and drivers
    3. \n
  3. New message
    4. \n
\n
\n

Tip: say which card, which driver and what you have tried. Topics with those three get answered first.

\n

Not sent: the message has no subject. Give it one and send again.

\n
\n
\n

New message to Hardware and drivers

\n
\n
\n \n
\n \n
\n \n
\n \n
\n \n A message needs a subject of at least four letters.\n
\n \n
\n \n Plain text. Lines are wrapped at 72 letters.\n
\n Options:\n
\n \n \n
\n
\n \n \n \n Preview\n Send message\n
\n
\n
\n
\n
\n
\n

Discard message

\n
\n \n

Throw away this message? What you have written will be lost.

\n
\n
\n Keep writing\n Discard\n
\n
\n
\n

Before you send

\n
\n
    \n
  • Look for the question first: search this board.
    • \n
  • One topic, one question.
    • \n
  • Come back and say what cured it.
    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Lobby
    2. \n
  2. People
    3. \n
  3. Members
    4. \n
\n
\n
\n

Members

\n

2,318 names, 14 of them here now. Yours is marlowe.

\n
\n
Write to a host
\n
\n
\n
\n

Your card

\n
\n
\n
Name
marlowe
\n
Member since
9 November 1997
\n
Messages
212
\n
Standing
in good standing
\n
Time online
12 of 20 hours
\n
\n
\n
\n
\n

Private messages

\n
\n \n

No private messages

\n

Nobody has written to you since your last visit.

\n Write one\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
NameMember sinceMessagesNow
reyesMarch 19963,077here
okaforJune 19961,402here
abaraJanuary 1997640away
marloweNovember 1997212here
lindqvistFebruary 199858here
novakMarch 19983barred
\n
\n
\n\n
\n\n
\n

Who is here (14)

\n
    \n
  • Hosts
    • \n
  • reyes
    • \n
  • okafor
    • \n
  • Members
    • \n
  • marlowe
    • \n
  • lindqvist
    • \n
  • tanaka
    • \n
  • abara (away)
    • \n
  • petrov
    • \n
  • hale
    • \n
  • imani
    • \n
  • costa (away)
    • \n
  • Guests
    • \n
  • guest 0417
    • \n
  • guest 0420
    • \n
\n \n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.forum.s07.p03.t03.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-7331\",\n \"short\": \"v1-w9-7331\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #2a2a2a;\n --color-canvas: #000000;\n --color-surface: #000000;\n --color-surface-alt: #1c1c1c;\n --color-surface-strong: #383838;\n --color-bar: #800080;\n --color-bar-text: #ffffff;\n --color-bar-alt: #000000;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #ffffff;\n --color-inverse-text: #000000;\n --color-text: #ffffff;\n --color-text-muted: #c0c0c0;\n --color-heading: #ffff00;\n --color-heading-alt: #00ffff;\n --color-link: #ffff00;\n --color-link-quiet: #ffffff;\n --color-link-visited: #ff80ff;\n --color-link-hover: #00ff00;\n --color-link-active: #ff8000;\n --color-border: #808080;\n --color-border-strong: #ffffff;\n --color-border-muted: #c0c0c0;\n --color-accent: #ffff00;\n --color-accent-text: #000000;\n --color-accent-alt: #00ff00;\n --color-fill-1: #000080;\n --color-fill-2: #004a4a;\n --color-fill-3: #4a004a;\n --color-fill-4: #4a3a00;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffff00;\n --color-button-secondary: #383838;\n --color-button-secondary-text: #ffffff;\n --color-input: #000000;\n --color-input-text: #ffffff;\n --color-input-border: #ffffff;\n --color-disabled: #1c1c1c;\n --color-disabled-text: #808080;\n --color-danger: #ff5050;\n --color-danger-surface: #2a0000;\n --color-success: #00ff00;\n --color-warning: #ffb000;\n --color-notice: #000080;\n --color-notice-text: #ffffff;\n --color-focus: #ffff00;\n --color-shadow: #808080;\n --color-overlay: rgba(255, 255, 255, 0.25);\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 26px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.3;\n --line-heading: 1.25;\n --line-display: 1;\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: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset -1px -1px var(--color-border-strong), inset 1px 1px var(--color-border-muted), inset -2px -2px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-control: inset -1px -1px var(--color-border-strong), inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 2px 2px var(--color-border-muted);\n --shadow-control-hover: inset -1px -1px var(--color-border-strong), inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 2px 2px var(--color-border-muted);\n --shadow-control-pressed: inset 1px 1px var(--color-border), inset -1px -1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset 2px 2px var(--color-border-strong), inset -2px -2px var(--color-border-muted);\n --shadow-dialog: inset -1px -1px var(--color-border-strong), inset 1px 1px var(--color-border-muted), inset -2px -2px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(90deg, var(--color-bar), color-mix(in srgb, var(--color-bar) 45%, white));\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: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }