{ "id": "v1-fa-6424", "long_id": "v1.frutiger-aero.forum.s06.p04.t02.u04", "name": "Frutiger Aero help forum", "era": { "slug": "frutiger-aero", "code": "fa", "name": "Frutiger Aero", "years": [ 2004, 2010 ], "description": "The glossy optimism of 2004 to 2010: sky blue and grass green, glass panels with a bright top highlight, bubbles and soft glows, rounded corners, humanist sans type and reflections under everything." }, "archetype": "forum", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A fixed-width question and answer forum in the underwater variety of the Frutiger Aero look: a deep teal page with drifting bubbles, a dark header band, and one frosted pale sheet whose current navigation tab is joined to it under a yellow edge. Community help boards of this kind were common from about 2006 to 2010 beside software and gadgets, when the old bulletin board was redrawn around questions, counted answers and a green mark for the one that worked. Panels are frosted glass with a deep soft shadow, buttons are smooth pebbles lit from below, labels are capsules, yellow marks what is current, and the type pairs small Tahoma with bold flared headings.", "url": "https://chrono.skin/s/v1-fa-6424", "preview_url": "https://chrono.skin/s/v1-fa-6424/specimen.html", "files": { "STYLE.md": "# Frutiger Aero help forum\n\n## Summary\n\nA fixed-width question and answer forum in the underwater variety of the Frutiger Aero look: a deep teal page with drifting bubbles, a dark header band, and one frosted pale sheet whose current navigation tab is joined to it under a yellow edge. Community help boards of this kind were common from about 2006 to 2010 beside software and gadgets, when the old bulletin board was redrawn around questions, counted answers and a green mark for the one that worked. Panels are frosted glass with a deep soft shadow, buttons are smooth pebbles lit from below, labels are capsules, yellow marks what is current, and the type pairs small Tahoma with bold flared headings.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 950px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- Everything sits in `.ds-page__wrap` (950px) as one column with no gaps: the header (`.ds-nav`: a band of `--size-head` 86px and the navigation bar of `--size-nav` 36px, the two upper corners rounded by `--radius-page`), the frosted sheet `.ds-page__sheet` (90% `--color-canvas`) with the showing view, and the footer band that closes it with the two lower corners rounded.\n- The home page fills the sheet edge to edge with the welcome band (`.ds-hero`) and the row of figures (`.ds-stats`); the rest sits in `.ds-page__body` (16px padding, 24px at the bottom).\n- Two columns in `.ds-page__columns`, `--space-5` (16px) apart: `.ds-page__main` and a right column `.ds-page__aside` of `--size-side` (250px) that holds `.ds-panel` and `.ds-sidebar` blocks. The list of questions of one forum uses the full width instead.\n- Spacing scale: `--space-1` 2px (hairline gaps), `--space-2` 4px (inside controls and capsules), `--space-3` 7px (row padding, gaps between buttons, table cell padding), `--space-4` 10px (panel and cell padding, gaps between cells and posts), `--space-5` 16px (gutter, body padding, gap between stacked blocks and form rows), `--space-6` 24px (gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 26px tall, the hero buttons `--size-control-large` 36px, the brand tile `--size-mark` 40px, round signs `--size-orb` 36px, the answer count box `--size-count` 54px, the writer's column of a post `--size-author` 132px with a `--size-avatar` 46px portrait, the speech bubbles `--size-talk` 300px, the dialog `--size-dialog` 430px.\n- Inner pages drop the welcome band and the figures. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the full width, then either a full-width block (`.ds-tabs` directly above the table they switch) or the two columns. Notices sit above the form they report on; a dialog follows the columns across the full width on its dimmed strip. Further blocks are `.ds-section` blocks 24px apart with a `.ds-section__title`.\n- Views: the specimen is one forum of four screens, each a `.ds-view` inside the sheet, with the header and the footer written once around them. `home` is the forum index (welcome, figures, the four forums, the latest questions, helpers and topics at the side). `questions` lists one forum (tabs, the table with status badges, pagination and the key to the badges, an empty list of one's own questions). `thread` is one question (the question as long text, the accepted answer framed in green, a further answer, related questions and guide links at the side, the report dialog). `ask` is the form for a new question (notices, the form with its buttons, advice and similar questions at the side). Links are plain `href=\"#name\"`; the link of the showing view becomes a tab joined to the sheet by a `.ds-page:has(#name:target)` rule, the Forums link also when no view is named.\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- Two families: `--font-body` and `--font-ui` are \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana; `--font-heading` is \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\": system faces only, a humanist sans with Trebuchet MS where Gill Sans is not installed. `--font-mono` (Monaco) is for inline code.\n- `--text-base` 12px at `--line-body` 1.5. `--text-small` 10px for times, tools, stat labels and the footer. `--text-ui` 12px for buttons, fields and tabs; buttons and bar links are bold.\n- Headings are semibold (`--weight-heading`, `--weight-display` 600): `--text-display` 40px for the greeting in the search band, tightened by `--display-tracking` -0.5px; `--text-h1` 26px page titles and forecast figures; `--text-h2` 18px the brand name and empty-state titles; `--text-h3` 14px (bold) gadget titles, lead headlines, section titles. `--text-large` 16px for the lead and the search field. Nothing is uppercased.\n- Links are not underlined at rest and underline on hover; the scopes and suggestions in the search band are the exception and show where the search goes.\n- `--color-page` #060c1a with `--fill-page`: night blue with a cyan glow at the upper left and a violet one at the upper right.\n- `--color-bar` #181818 with `--fill-bar` (black glass: a lit upper half ending at 50%) and near-white `--color-bar-text` with a glowing `--shadow-text`: the bar, the current tab, the dialog frame, channel orbs.\n- `--color-bar-alt` #1b3d6b with `--fill-bar-alt` (blue glass lit from above): the small-print strip, gadget heads, table head, sidebar titles, the footer link strip.\n- `--color-inverse` #123c8f with `--fill-inverse` (aurora: cyan rising from the lower left, violet from the upper right): the search band and the last strip of the footer, white text.\n- `--color-text` #c9d6e6 on the dark surfaces `--color-canvas` #0b1526, `--color-surface` #101c33, `--color-surface-alt` #162740, `--color-surface-strong` #203552; `--color-heading` #ffffff; `--color-heading-alt` #62d8ff (cyan) section titles, prose h2, breadcrumb marks; `--color-text-muted` #989898.\n- `--color-link` #62c8ff, `--color-link-quiet` #a3b8cf, visited #b59cff, hover #a8ecff, active #ffffff.\n- `--color-button` #0f8fd0 with `--fill-button` (a gel capsule: a white sheen over the upper half, a faint second light at the foot) and a halo from `--shadow-control`: the primary button, the brand tile, arrow buttons, the current page number. `--color-button-secondary` #26374f with the same sheen: every other button.\n- `--color-accent` #19c2f0 with dark `--color-accent-text`: pill badges and list bullets. `--color-accent-alt` #c86bff (violet): the New marker.\n- `--color-fill-1` to `--color-fill-4` (deep blue, teal, violet, sea green): the lower end of forecast tiles and channel tiles.\n- Borders: `--color-border` #2a4466 around gadgets, `--color-border-muted` #1c2f4a between rows, `--color-border-strong` #4d7fb3 for the sheet and the 2px dialog frame, `--color-input-border` #35557d.\n- `--color-notice` #132c4a; `--color-danger` #e0483c on `--color-danger-surface` #3a1418; `--color-success` #2fa84a and `--color-warning` #f2b31c fill status badges.\n- Surface: `--radius-control` 13px (capsule buttons and fields), `--radius-panel` 10px, `--radius-page` 16px, `--radius-pill` 20px. `--shadow-panel` is a lit inner top edge and an 18px drop; `--shadow-control` adds an 8px halo in `--color-focus` that grows to 14px on hover; `--shadow-dialog` is a 40px drop inside a 30px glow. `--fill-panel` is translucent and `--backdrop-blur` 10px blurs what lies behind it. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills (the fill's colour mixed with `--color-shadow`), the lit bar link (`--color-bar-text` with transparent), the sheet (90% `--color-canvas`), the halo of the search field (`--color-focus` with transparent), gloss on status fills (mixed with `--color-button-text`).\n- The era's conventions for which text sits on which fill, kept by every layout and every token set of the era:\n - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours sit on `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong`, `--fill-panel` and the four `--color-fill-*` tints. A palette keeps page, canvas, surfaces and fills on one side (all light or all dark) so that these stay readable on every one of them.\n - `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`. Links on a bar take the bar's text colour, never `--color-link`.\n - `--color-button-text` on `--fill-button` and on any fill made from `--color-danger`, `--color-success` or `--color-accent-alt`; it is always the light colour and also supplies the gloss on those fills (mixed in with `color-mix()`).\n - `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-button-secondary-text` on `--fill-button-secondary`; `--color-notice-text` on `--color-notice`; `--color-danger` as text on `--color-danger-surface` and on the surfaces.\n - Nothing but decoration sits on `--fill-page`: no text is set directly on the page.\n - `--color-focus` is the glow colour: the focus ring, the halo of the search field and of a hovered button. `--color-inverse-text` draws the bubbles on the sky band. `--color-shadow` tints every shadow and darkens the outline of every glossy fill.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, base font and colour. `.ds-page__wrap` is the 950px column; `.ds-page__sheet` the frosted sheet; `.ds-page__body` the padded content area of a view; `.ds-page__columns` holds `.ds-page__main` and `.ds-page__aside`. `.ds-section` with a `.ds-section__title` (16px bold, a hairline running on to the right, an optional small `.ds-section__more` link after it) separates blocks by 24px. `.ds-view` is one screen of the example site (`.ds-view--home` the first).\n- `.ds-nav`: the header. `.ds-nav__head` is the deep band: up to five `.ds-nav__bubble` spans (`--2` to `--5`), the `.ds-brand`, a two-line `.ds-nav__tagline` behind a hairline, and `.ds-nav__search` at the right (a capsule `.ds-nav__input` and a secondary button). `.ds-nav__bar` is the glass bar: `.ds-nav__links` of `.ds-nav__link` items (current: `is-current`, a tab in `--color-canvas` joined to the sheet under a 3px edge in `--color-accent`, its text in `--color-heading`; hover: `is-hover`) and `.ds-nav__user` at the right with `.ds-nav__user-link` items. Five links at most.\n- `.ds-brand`: the site's mark and name at the left of the header band, linking home; one per page. `.ds-brand__mark` is a round tile dressed like the primary button (`--fill-button`, a darker outline, `--shadow-control`) with the mark in `--color-button-text`; `.ds-brand__name` is the name at `--text-h1` in `--color-inverse-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the welcome band, on the home page only, on `--fill-bar-alt`: `.ds-hero__main` holds `.ds-hero__title` (30px bold), `.ds-hero__lead` (15px) and `.ds-hero__action` (a `.ds-button--large` and a secondary one). `.ds-hero__talk` on the right holds two `.ds-bubble` speech bubbles, a question and under it, set in, its `.ds-bubble--answer` framed in `--color-success`; each has a small `.ds-orb`, a `.ds-bubble__text` and a grey `.ds-bubble__who` line.\n- `.ds-orb`: a round glossy sign holding a line icon: jade by default, `.ds-orb--bar` teal glass, `.ds-orb--accent` yellow, `.ds-orb--quiet` pale, `.ds-orb--done` green with a check, the forum's mark for answered; `.ds-orb--small` is the 18px size used beside a title.\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (`--text-h1`, the page's h1) and one grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right with one or two buttons or a status badge; a hairline under the whole. One per inner page, directly under the breadcrumb.\n- `.ds-stat`: one figure; three or four sit in a `.ds-stats` row directly under the welcome band. Each is a sunken capsule well (`--shadow-control-pressed`) holding a 16px bold `.ds-stat__number` and an 11px `.ds-stat__label` on one line.\n- `.ds-grid`: the forums, two to a row, 10px apart. `.ds-grid__cell` (`--1` to `--4` choose the tint it fades from at the left) holds a `.ds-orb`, a `.ds-grid__body` with a bold `.ds-grid__title` and a grey `.ds-grid__text` line, and at the right `.ds-grid__count`: a bold `.ds-grid__number` over a word.\n- `.ds-prose`: long text: h1, h2 (in `--color-heading-alt`), h3 (bold), p, ul, ol, code, strong and links inside it are styled.\n- `.ds-link`: any link on the sheet. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` is bold, for titles; `.ds-link--quiet` for minor links and tools. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: a glossy key in `--fill-button`, bold `--text-ui`, `--size-control` tall, `--radius-control` corners; may start with a `.ds-button__icon`. Variants: `.ds-button--secondary` (the usual button, `--fill-button-secondary`), `.ds-button--danger` (red gel, only for an action that removes or cancels), `.ds-button--large` (`--size-control-large`, the hero and the main action of a panel), `.ds-button--round` (a circle holding only an icon). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row. One primary button per form, panel or dialog.\n- `.ds-form`: one column: each `.ds-form__row` is a bold `.ds-form__label` above `.ds-form__input` (`--short` for half width), `.ds-form__select` or `.ds-form__textarea` (130px tall, for the body of a question); `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus` (a yellow glow), `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` holds the buttons under a hairline.\n- `.ds-table`: the questions of one forum in a rounded 1px border with the panel shadow: `.ds-table__head` cells form a teal glass strip; `.ds-table__row` with `is-alt` on alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns; `.ds-table__note` is a second grey line in a cell. The first column holds one status badge. `.ds-table__foot` under it holds the pagination at the left and the key to the badges at the right.\n- `.ds-list`: questions. Each `.ds-list__item` (first: `is-first`) is a `.ds-list__count` box (a bold `.ds-list__number` over the word; `is-answered` turns it green), a `.ds-list__body` with a bold `.ds-list__title` (followed by a `.ds-orb--done` mark when answered) and a grey `.ds-list__meta` line, and `.ds-list__views` at the right. Rows are divided by hairlines, never boxed.\n- `.ds-post`: one message of a thread, a frosted box: `.ds-post__author` at the left (a round `.ds-post__avatar` with initials, `.ds-post__name`, `.ds-post__rank`) and `.ds-post__main` (a grey `.ds-post__meta` line over a hairline, the text as `.ds-prose` or `.ds-post__text`, and `.ds-post__actions`, a row of quiet links). `.ds-post--answer` frames the accepted answer in `--color-success` and starts with `.ds-post__flag`, a pale green capsule with the check mark.\n- `.ds-panel`: a frosted box in the side column (`is-last` on the last block of a column): a bold `.ds-panel__title` standing on a 3px rule in `--color-accent`, `.ds-panel__body` with `.ds-panel__text`, a `.ds-panel__facts` list of `.ds-panel__fact` rows (an optional round `.ds-panel__fact-rank` number, the name, `.ds-panel__fact-value` at the right), numbered `.ds-panel__steps` of `.ds-panel__step` items, and `.ds-panel__actions`.\n- `.ds-tabs`: capsules in a pale trough: `.ds-tabs__tab`, the current one `is-current` (a jade pebble); a tab may end with a count badge. Two to five tabs across the full width above the table they switch.\n- `.ds-badge`: a small glossy label in `--fill-accent` with `--radius-pill` corners. `.ds-badge--count` (flat, a number), `.ds-badge--new` (in `--color-accent-alt`). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, one per row or tile. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: a link list in the side column, not boxed (`is-last` on the last): `.ds-sidebar__title` on a pale glass capsule, `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines, each behind a small ring (filled yellow on the current one, `is-current`), with an optional right-aligned `.ds-sidebar__count`.\n- `.ds-notice`: a rounded one-line message with a round `.ds-notice__sign`, `.ds-notice__text` and a bold `.ds-notice__title`. Variant `.ds-notice--error`. Notices sit directly above the form or list they report on.\n- `.ds-pagination`: a row of small glossy keys: `.ds-pagination__link`, `is-current` (in `--fill-button`), `is-disabled`, `.ds-pagination__gap` for an ellipsis. It shares the `.ds-table__foot` row under a table or grid with the key to the badges.\n- `.ds-breadcrumb`: `--text-small` trail of `.ds-link` items with `.ds-breadcrumb__sep` marks in `--color-heading-alt` and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a window with a 3px clear rim and `--radius-page` corners: `.ds-dialog__title` beside a round sign, `.ds-dialog__body` with `.ds-dialog__text`, and a pale `.ds-dialog__actions` strip with the buttons at the right. It casts `--shadow-dialog` and sits on `.ds-dialog__backdrop`, a dimmed rounded strip in the page flow.\n- `.ds-empty`: a pale well with a round glass `.ds-empty__orb` icon, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-meter`: a small progress bar; `.ds-meter__bar` with `--full`, `--most`, `--half` or `--some`; `.ds-meter--spaced` when a list follows.\n- `.ds-footer`: the deep band that closes the sheet: a `.ds-footer__list` of bold `.ds-footer__link` items at the left, the `.ds-footer__legal` line at the right.\n- `.ds-menu`: a glass drop-down under a navigation item (`.ds-menu__list` of `.ds-menu__link`), opened on hover or focus, never forced open.\n- `.ds-progress`: the glossy accent progress bar, a native `` in a `.ds-progress__row` with label and value; for downloads, installs and storage.\n- `.ds-accordion`: expanding help sections, one `
` per question with `__head` and `__body`.\n- `.ds-avatar`: the framed account picture drawn as initials, beside a name in `.ds-person`; `--small` for tight places.\n\n## Never\n\n- `row-gap <= 24px`: rows are divided by a hairline, not by space.\n- `block-gap <= 24px`: sections are at most 24px apart.\n- `content-width <= 950px`: text stays inside the sheet.\n- `palette-colours <= 48`: greys, black, one green, one blue for links, amber and red for status.\n- `font-size <= 40px`: the greeting is the largest text.\n- `font-size >= 10px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: a body sans, a heading sans, a monospace for inline code.\n- `line-height <= 1.5`: body text is 12px on 18px.\n- `underlined-links <= 12%`: only the search band's scopes and suggestions are underlined at rest.\n- `letter-spacing <= 0.5px`: only the greeting is tightened, by half a pixel; nothing is spaced out.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 12px`: corners are 3, 6, 8 or 12px; only round keys and capsules are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 30px`: shadows are short; only the floating window and the front cover reach 30px.\n- `gradient-fills <= 30%`: gloss belongs to bars, keys, labels, covers and cells; text areas stay plain.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new bar is `--fill-bar`, a pale strip `--fill-bar-alt`, a dark band `--fill-inverse`; anything round and pressable is dressed like `.ds-button--round`. Keep to the conventions above for which text token sits on which fill, give glossy fills an outline mixed from their colour and `--color-shadow`, take highlights from the surface tokens instead of drawing new ones, put a `--fill-*` token last in a layered background, and make any extra shade with `color-mix()` over existing tokens. A new box is a `.ds-panel` if it explains and a `.ds-sidebar` if it lists links; anything that says \"answered\" uses `--color-success` and the `.ds-orb--done` mark, never another green.\n", "components.css": ":root {\n --size-page: 950px;\n --size-side: 250px;\n --size-head: 86px;\n --size-nav: 36px;\n --size-search: 190px;\n --size-mark: 40px;\n --size-bubble: 30px;\n --size-talk: 300px;\n --size-count: 54px;\n --size-author: 132px;\n --size-avatar: 46px;\n --size-orb: 36px;\n --size-control: 26px;\n --size-control-large: 36px;\n --size-icon: 16px;\n --size-meter: 7px;\n --size-glow: 7px;\n --size-textarea: 130px;\n --size-dialog: 430px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 7px;\n --space-4: 10px;\n --space-5: 16px;\n --space-6: 24px;\n}\n\n/* shell: a bubbling header, a frosted sheet hanging from its bar, a deep band to close */\n.ds-page {\n margin: 0;\n padding: 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 *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-page__sheet {\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 65%, transparent);\n border-top: 0;\n border-bottom: 0;\n background: color-mix(in srgb, var(--color-canvas) 90%, transparent);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-panel);\n}\n.ds-page__body { padding: var(--space-5) var(--space-5) var(--space-6); }\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__aside {\n flex: 0 0 var(--size-side);\n width: var(--size-side);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section__title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\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-section__title::after {\n content: \"\";\n flex: 1 1 0;\n order: 1;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-section__more {\n order: 2;\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* nav: a deep band with bubbles for the name and the search, then a glass bar whose current link is a tab joined to the sheet */\n.ds-nav {\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-bottom: 0;\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-nav__head {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n height: var(--size-head);\n padding: 0 var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n overflow: hidden;\n}\n.ds-nav__bubble {\n position: absolute;\n top: 10%;\n left: 46%;\n width: var(--size-bubble);\n height: var(--size-bubble);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 50%, transparent);\n border-radius: 50%;\n background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--color-inverse-text) 80%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 10%, transparent) 22%, transparent 60%, color-mix(in srgb, var(--color-inverse-text) 30%, transparent) 100%);\n}\n.ds-nav__bubble--2 {\n top: 58%;\n left: 52%;\n width: calc(var(--size-bubble) * 0.5);\n height: calc(var(--size-bubble) * 0.5);\n}\n.ds-nav__bubble--3 {\n top: 36%;\n left: 59%;\n width: calc(var(--size-bubble) * 1.7);\n height: calc(var(--size-bubble) * 1.7);\n}\n.ds-nav__bubble--4 {\n top: 12%;\n left: 56%;\n width: calc(var(--size-bubble) * 0.34);\n height: calc(var(--size-bubble) * 0.34);\n}\n.ds-nav__bubble--5 {\n top: 64%;\n left: 43%;\n width: calc(var(--size-bubble) * 0.7);\n height: calc(var(--size-bubble) * 0.7);\n}\n.ds-nav__search {\n position: relative;\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 0 auto;\n}\n.ds-nav__input {\n width: var(--size-search);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 50%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus {\n outline: var(--focus-ring);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-nav__bar {\n display: flex;\n align-items: flex-end;\n height: var(--size-nav);\n padding: 0 var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n flex: 1 1 0;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n height: calc(var(--size-nav) - var(--space-3));\n padding: 0 var(--space-5);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { background: color-mix(in srgb, var(--color-bar-text) 20%, transparent); }\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(#questions:target) .ds-nav__link[href=\"#questions\"],\n.ds-page:has(#thread:target) .ds-nav__link[href=\"#thread\"],\n.ds-page:has(#ask:target) .ds-nav__link[href=\"#ask\"] {\n background: var(--color-canvas);\n box-shadow: inset 0 var(--border-width-strong) 0 var(--color-accent);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-nav__user {\n flex: 0 0 auto;\n align-self: center;\n margin: 0;\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__user-link {\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__user-link:hover,\n.ds-nav__user-link.is-hover { text-decoration: underline; }\n\n/* brand: the mark on a round glossy tile dressed like the primary button, the name on the deep band */\n.ds-brand {\n position: relative;\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 64%;\n height: 64%;\n}\n.ds-brand__name {\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tagline {\n position: relative;\n margin: 0;\n padding: 0 0 0 var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 35%, transparent);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.85;\n}\n\n/* orb: a round glossy sign */\n.ds-orb {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-orb);\n height: var(--size-orb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-orb svg {\n display: block;\n width: 52%;\n height: 52%;\n}\n.ds-orb--bar {\n border-color: color-mix(in srgb, var(--color-bar) 66%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-orb--accent {\n border-color: color-mix(in srgb, var(--color-accent) 66%, var(--color-shadow));\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-orb--quiet {\n border-color: color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-orb--done {\n border-color: color-mix(in srgb, var(--color-success) 66%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 40%) 0, var(--color-success) 60%);\n color: var(--color-button-text);\n}\n.ds-orb--small {\n width: calc(var(--size-icon) + var(--space-1));\n height: calc(var(--size-icon) + var(--space-1));\n box-shadow: none;\n}\n.ds-orb--small svg { width: 64%; height: 64%; }\n\n/* hero: the welcome on pale glass; on the right a question and its answer as two speech bubbles */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-bar-alt-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}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-hero__talk {\n flex: 0 0 var(--size-talk);\n width: var(--size-talk);\n}\n.ds-bubble {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n width: 86%;\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-bubble::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 12%;\n width: var(--space-4);\n height: var(--space-4);\n margin-top: calc(0px - var(--space-4) / 2);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n transform: rotate(45deg);\n}\n.ds-bubble--answer {\n margin: 0 0 var(--space-3) 14%;\n border-color: var(--color-success);\n box-shadow: var(--shadow-panel);\n}\n.ds-bubble--answer::after {\n left: 78%;\n border-color: var(--color-success);\n}\n.ds-bubble__text { margin: 0; }\n.ds-bubble__who {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: the board's figures in a row of sunken wells */\n.ds-stats {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n list-style: none;\n}\n.ds-stat {\n display: flex;\n flex: 1 1 0;\n align-items: baseline;\n justify-content: center;\n gap: var(--space-3);\n min-width: 0;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-stat__number {\n color: var(--color-heading);\n white-space: nowrap;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* grid: the forums, two to a row; a round sign, the name, the count at the right */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-4);\n margin: 0;\n}\n.ds-grid__cell {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: linear-gradient(to right, var(--color-surface-alt) 0, var(--color-surface) 70%);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--1 { background: linear-gradient(to right, var(--color-fill-1) 0, var(--color-surface) 70%); }\n.ds-grid__cell--2 { background: linear-gradient(to right, var(--color-fill-2) 0, var(--color-surface) 70%); }\n.ds-grid__cell--3 { background: linear-gradient(to right, var(--color-fill-3) 0, var(--color-surface) 70%); }\n.ds-grid__cell--4 { background: linear-gradient(to right, var(--color-fill-4) 0, var(--color-surface) 70%); }\n.ds-grid__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__count {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n text-align: right;\n}\n.ds-grid__number {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n}\n\n/* list: questions; the number of answers in a box at the left, green when one was accepted */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { padding-top: 0; border-top: 0; }\n.ds-list__count {\n display: flex;\n flex: 0 0 var(--size-count);\n flex-direction: column;\n align-items: center;\n width: var(--size-count);\n padding: var(--space-2) 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__number {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n}\n.ds-list__count.is-answered {\n border-color: var(--color-success);\n background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));\n color: var(--color-success);\n}\n.ds-list__count.is-answered .ds-list__number { color: var(--color-success); }\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-1);\n font-family: var(--font-body);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-list__meta {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__views {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: right;\n white-space: nowrap;\n}\n\n/* panel: a frosted box; the title stands on a thick rule in the accent colour */\n.ds-panel {\n margin: 0 0 var(--space-5);\n padding: var(--space-4) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-panel);\n}\n.ds-panel.is-last { margin-bottom: 0; }\n.ds-panel__title {\n display: inline-block;\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent);\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-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__text.is-last { margin-bottom: 0; }\n.ds-panel__facts {\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n}\n.ds-panel__facts.is-last { margin-bottom: 0; }\n.ds-panel__fact {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__fact.is-first { padding-top: 0; border-top: 0; }\n.ds-panel__fact-rank {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) + var(--space-2));\n height: calc(var(--size-icon) + var(--space-2));\n border-radius: 50%;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-panel__fact-value {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-panel__steps {\n margin: 0;\n padding: 0 0 0 var(--space-5);\n}\n.ds-panel__step { margin: 0 0 var(--space-3); }\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n}\n\n/* sidebar: a link list under a pale glass capsule, a small ring before each link */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\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: 0 var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item:first-child { border-top: 0; }\n.ds-sidebar__item::before {\n content: \"\";\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--color-surface);\n}\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__item.is-current::before { background: var(--color-accent); }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* tabs: capsules in a pale trough; the current one is a glossy key */\n.ds-tabs {\n display: flex;\n gap: var(--space-2);\n margin: 0 0 var(--space-4);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-pill) + var(--space-2));\n background: var(--color-surface-alt);\n list-style: none;\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n height: var(--size-control);\n padding: 0 var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n border-color: var(--color-border);\n background: var(--color-surface);\n}\n.ds-tabs__tab.is-current {\n border-color: color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n\n/* table: the questions of one forum under a glass head */\n.ds-table {\n width: 100%;\n margin: 0 0 var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: separate;\n border-spacing: 0;\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 overflow: hidden;\n}\n.ds-table__head {\n padding: var(--space-3) 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-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table__cell {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0;\n}\n\n/* post: one message of a thread; the writer at the left, the accepted answer framed in green */\n.ds-post {\n display: flex;\n margin: 0 0 var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-post__author {\n flex: 0 0 var(--size-author);\n width: var(--size-author);\n padding: var(--space-4) var(--space-3);\n border-right: var(--border-width) var(--border-style) var(--color-border-muted);\n background: color-mix(in srgb, var(--color-surface-strong) 50%, transparent);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-post__avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n margin: 0 auto var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-post__name {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-post__rank { margin: 0; color: var(--color-text-muted); }\n.ds-post__main {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-4) var(--space-5);\n}\n.ds-post__meta {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__text { margin: 0 0 var(--space-4); }\n.ds-post__actions {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-post--answer { border-color: var(--color-success); }\n.ds-post__flag {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-success);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n\n/* form: one column, the label above each field */\n.ds-form__row { margin: 0 0 var(--space-5); }\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* dialog: a frosted window with a thick clear rim and a round sign, in the page flow on a dimmed strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n margin: var(--space-5) 0 0;\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-surface) 50%, transparent);\n border-radius: var(--radius-page);\n background: var(--color-surface);\n background-clip: padding-box;\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4) var(--space-5) 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}\n.ds-dialog__body { padding: var(--space-3) var(--space-5) var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: var(--color-surface-alt);\n}\n\n/* footer: a deep band that closes the sheet */\n.ds-footer {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-top: 0;\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__list {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: underline; }\n.ds-footer__legal { margin: 0 0 0 auto; opacity: 0.85; }\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/* typography: long text on the sheet */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\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 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\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 { color: var(--color-link-hover); }\n\n/* buttons: glossy keys; the outline is the fill's colour darkened with the shadow colour */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\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 box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button__icon {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--round {\n flex: 0 0 auto;\n width: var(--size-control);\n padding: 0;\n border-radius: 50%;\n}\n.ds-button--round.ds-button--large { width: var(--size-control-large); }\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n text-shadow: none;\n}\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}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 66%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 48%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 12%) 50%, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 18%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 60%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 22%) 50%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 8%) 50%, var(--color-danger) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n\n/* form controls */\n.ds-form { margin: 0; }\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); padding-top: 0; padding-bottom: 0; }\n.ds-form__select { width: auto; max-width: 100%; }\n.ds-form__input--short { width: 50%; }\n.ds-form__textarea {\n display: block;\n height: var(--size-textarea);\n border-radius: var(--radius-panel);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error,\n.ds-form__textarea.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\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__hint {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n\n/* badge: a small glossy label */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) + var(--space-3));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-badge--new {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 32%) 0, var(--color-accent-alt) 60%);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 32%) 0, var(--color-success) 60%);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning), var(--color-button-text) 42%) 0, var(--color-warning) 60%);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 32%) 0, var(--color-danger) 60%);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* notice: one line behind a round sign */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-warning) 50%, var(--color-notice));\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__sign {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-warning);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-notice__text { margin: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__sign {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n\n/* pagination: small glossy keys */\n.ds-pagination {\n display: flex;\n align-items: center;\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 line-height: 1;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n}\n.ds-pagination__gap { padding: 0 var(--space-2); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-heading-alt); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* page header: head of an inner page, action on the right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n flex: 1 1 0;\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__text {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* meter: a small progress bar */\n.ds-meter {\n display: block;\n height: var(--size-meter);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-meter__bar {\n display: block;\n height: 100%;\n background: var(--fill-accent);\n}\n.ds-meter--spaced { margin-bottom: var(--space-3); }\n\n/* empty state: a pale well around a round glass sign */\n.ds-empty {\n padding: var(--space-5) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__orb {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin: 0 auto var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__orb svg {\n display: block;\n width: 55%;\n height: 55%;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* Components of the period: menu, progress, carousel, accordion, tooltip, avatar */\n:root {\n --size-progress: 14px;\n --size-orb: 24px;\n --size-slide: 96px;\n --size-avatar: 44px;\n --size-avatar-small: 28px;\n --size-menu: 200px;\n --size-tip: 220px;\n --size-dot: 8px;\n}\n.ds-nav:has(.ds-menu),\n.ds-nav:has(.ds-menu) .ds-nav__bar { overflow: visible; }\n.ds-menu { position: relative; }\n.ds-menu > .ds-nav__link::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-2) solid transparent;\n border-right: var(--space-2) solid transparent;\n border-top: var(--space-2) solid currentColor;\n vertical-align: calc(var(--space-2) / 2);\n margin-left: var(--space-2);\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list { display: block; }\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: none;\n text-transform: none;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-progress__row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-progress__label { flex: 0 0 auto; color: var(--color-text); }\n.ds-progress__value { flex: 0 0 auto; color: var(--color-text-muted); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n display: block;\n flex: 1 1 0;\n width: 100%;\n height: var(--size-progress);\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-progress::-moz-progress-bar { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-carousel__dot.is-current { background: var(--color-accent); }\n\n.ds-accordion { margin: 0 0 var(--space-3); border: var(--border-width) var(--border-style) var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); overflow: hidden; }\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-accordion__item:first-child { border-top: 0; }\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__head::marker { color: var(--color-accent-alt); }\n.ds-accordion__head:hover { color: var(--color-link-hover); }\n.ds-accordion__body { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); color: var(--color-text); font-size: var(--text-small); }\n.ds-accordion__body p { margin: 0; }\n\n.ds-avatar {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width-strong) var(--border-style) var(--color-surface);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control), 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-person { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }\n.ds-person__name { margin: 0; color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-person__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }\n", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero help forum specimen\n\n\n\n\n
\n\n
\n
\n \n \n \n \n \n chronoskin\n

Community help
Ask, answer, get on with the day

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

Signed in as maren.oakhollow · Sign out

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

Stuck? Someone here has been there.

\n

Nine questions in ten get an answer within a day, from people who use chronoskin at home and at work.

\n

\n Ask a question\n Browse the questions\n

\n
\n
\n

How do I move my library to a new laptop?Asked at 9:12 by Tavish

\n

Copy the Library folder across, then sign in. Three steps inside.Answered at 9:31 by Odile

\n
\n
\n\n
    \n
  • 48,200answers
    • \n
  • 91%answered in a day
    • \n
  • 12,640members
    • \n
  • 214online now
    • \n
\n\n
\n
\n
\n

Forums

\n
\n
\n \n
\n

Getting started

\n

Installing, signing in, first steps

\n
\n

3,412questions

\n
\n
\n \n
\n

Sync and backup

\n

Folders, versions, slow connections

\n
\n

5,108questions

\n
\n
\n \n
\n

Phones and cards

\n

Memory cards, cables, phone models

\n
\n

2,967questions

\n
\n
\n \n
\n

The lounge

\n

Tips, wishes and everything else

\n
\n

1,254questions

\n
\n
\n
\n

Latest questions All questions

\n \n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Forums
    2. \n
  2. ›
    3. \n
  3. Getting started
    4. \n
  4. ›
    5. \n
  5. Newest
    6. \n
\n
\n
\n

Getting started

\n

Installing, signing in and the first week. 3,412 questions, 12 still waiting.

\n
\n
Ask a question
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
StatusQuestionAsked byAnswersViewsLast answer
AnsweredHow do I move my library to a new laptop?Moving, new computerTavish Lorne3148Odile Fenwick, 9:31
WaitingSign-in window stays empty after the updateSigning in, version 3.2Joss Abernathy041No answer yet
AnsweredWhere does the installer put the Library folder?InstallingIlse Varkonyi2530Tilde Marchetti, yesterday
AnsweredCan I use one licence on a desktop and a laptop?LicencesBram Oyelaran41,204Maren Oakhollow, Monday
WaitingFirst sync has run for two daysFirst steps, slow syncOdalys Brandt196Odile Fenwick, Monday
ClosedVersion 2 will not start on the new systemAsked again in another threadImre Valdane72,310Closed on 2 March
\n
\n \n

\n Sticky\n 12\n New\n Answered\n Waiting\n Closed\n

\n
\n
\n

My questions in this forum

\n
\n \n

You have not asked anything here yet

\n

Questions you ask in Getting started are listed here with their answers.

\n Ask your first question\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Forums
    2. \n
  2. ›
    3. \n
  3. Getting started
    4. \n
  4. ›
    5. \n
  5. Moving to a new laptop
    6. \n
\n
\n
\n

How do I move my library to a new laptop?

\n

Asked today at 9:12 by Tavish Lorne. 3 answers, 148 views.

\n
\n
AnsweredWrite an answer
\n
\n
\n
\n
\n
\n TL\n

Tavish Lorne

\n

New member
4 posts

\n
\n
\n

Today, 9:12Question

\n
\n

Moving everything across

\n

The old laptop is on its last legs and the new one arrived this morning. I have about 9,000 photos and four years of music in chronoskin Sync and would rather not upload it all again.

\n

What I have tried

\n

I installed version 3.2 on the new machine and signed in. It shows an empty library and offers to start a first sync, which the status window says will take two days.

\n
    \n
  • Both laptops are on the same home network.
    • \n
  • The old one still starts, slowly.
    • \n
\n

The setting I am unsure about

\n

There is a box called use existing folder in the first window. Is that the one I want?

\n
\n

QuoteI have this question too (6)

\n
\n
\n
\n
\n OF\n

Odile Fenwick

\n

Helper of the week
2,140 posts

\n
\n
\n

Accepted answer

\n

Today, 9:31Answer 1 of 3

\n

Yes, that box is the one. Copy the whole Library folder from the old laptop to the new one over the network or on a memory card, put it where you want it to live, then tick the box and point it at the copy. The program compares instead of uploading, and that takes minutes.

\n

QuoteThis helped (14)Report

\n
\n
\n
\n
\n JA\n

Joss Abernathy

\n

Regular
318 posts

\n
\n
\n

Today, 9:48Answer 2 of 3

\n

One thing to add: sign out on the old laptop before you give it away, or it keeps counting as one of your devices.

\n

QuoteThis helped (5)Report

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

Report this answer?

\n
\n

A moderator will read the answer by Joss Abernathy and your reason. Reports are not shown to other members.

\n
\n
\n Send the report\n Cancel\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Forums
    2. \n
  2. ›
    3. \n
  3. Getting started
    4. \n
  4. ›
    5. \n
  5. Ask a question
    6. \n
\n
\n
\n

Ask a question

\n

Say what you did, what happened and what you expected instead.

\n
\n
Back to the questions
\n
\n
\n
\n
\n
i

Two questions look like yours. They are listed on the right. One has an accepted answer.

\n
!

Not posted yet. The title is too short to search for.

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

Please write at least five words, for example: Sync stops at 72 percent every evening.

\n
\n
\n \n \n

Moderators move a question if it fits better elsewhere.

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n
\n \n Preview\n \n \n
\n
\n
\n \n
\n
\n
\n\n
\n\n\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.forum.s06.p04.t02.u04\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-6424\",\n \"short\": \"v1-fa-6424\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f6f6f6;\n --color-surface-strong: #e5e5e5;\n --color-bar: #303030;\n --color-bar-text: #ffffff;\n --color-bar-alt: #d0d0d0;\n --color-bar-alt-text: #2c2c2c;\n --color-inverse: #080808;\n --color-inverse-text: #f0f0f0;\n --color-text: #565656;\n --color-text-muted: #6e6e6e;\n --color-heading: #202020;\n --color-heading-alt: #4a8a05;\n --color-link: #2971a7;\n --color-link-quiet: #666666;\n --color-link-visited: #6c5a9c;\n --color-link-hover: #0060d0;\n --color-link-active: #59990e;\n --color-border: #cccccc;\n --color-border-strong: #767676;\n --color-border-muted: #e5e5e5;\n --color-accent: #6bbf12;\n --color-accent-text: #ffffff;\n --color-accent-alt: #2971a7;\n --color-fill-1: #f0f0f0;\n --color-fill-2: #e8f0f0;\n --color-fill-3: #eaf3dc;\n --color-fill-4: #f0f0f8;\n --color-button: #59a80f;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #d0d0d0;\n --color-button-secondary-text: #202020;\n --color-input: #ffffff;\n --color-input-text: #202020;\n --color-input-border: #a8a8a8;\n --color-disabled: #ededed;\n --color-disabled-text: #a8a8a8;\n --color-danger: #b3261e;\n --color-danger-surface: #fbeceb;\n --color-success: #4a9a0a;\n --color-warning: #e89a00;\n --color-notice: #eef6e2;\n --color-notice-text: #35520f;\n --color-focus: #6aa7de;\n --color-shadow: #101010;\n --color-overlay: rgba(8, 8, 8, 0.55);\n}\n\n/* @part type */\n:root {\n --font-body: \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\n --font-heading: \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\n --font-mono: Monaco, \"Lucida Console\", monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 40px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 12px;\n --radius-panel: 6px;\n --radius-pill: 3px;\n --radius-page: 8px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), 0 12px 12px -10px color-mix(in srgb, var(--color-shadow) 38%, transparent);\n --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 30%, transparent), 0 1px 0 color-mix(in srgb, white 60%, transparent);\n --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);\n --shadow-control-pressed: inset 0 3px 5px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 20px 30px -6px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --fill-page: radial-gradient(ellipse 70% 320px at 50% 0, color-mix(in srgb, white 95%, transparent) 0, transparent 100%) 0 0 / 100% 320px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), white 40%) 0, var(--color-page) 500px, color-mix(in srgb, var(--color-page), black 12%) 1100px) 0 0 / 100% 1100px no-repeat, color-mix(in srgb, var(--color-page), black 12%);\n --fill-bar: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 38%, transparent) 0, color-mix(in srgb, white 12%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 20%) 0, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), black 35%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 82%) 0, color-mix(in srgb, var(--color-bar-alt), white 30%) 60%, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(ellipse 65% 70% at 50% -8%, color-mix(in srgb, white 24%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 12%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 30%) 100%);\n --fill-accent: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 50%, transparent) 0, color-mix(in srgb, white 16%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 12%) 0, color-mix(in srgb, var(--color-accent), black 12%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n --fill-button: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 55%, transparent) 0, color-mix(in srgb, white 14%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\n --fill-button-hover: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 70%, transparent) 0, color-mix(in srgb, white 26%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%) 0, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 88%) 0, color-mix(in srgb, var(--color-button-secondary), white 20%) 100%);\n --fill-input: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-input) 60%);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }