{ "id": "v1-fa-6345", "long_id": "v1.frutiger-aero.forum.s06.p03.t04.u05", "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-6345", "preview_url": "https://chrono.skin/s/v1-fa-6345/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- One family: `--font-body`, `--font-heading` and `--font-ui` are \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif: system and open faces only. `--font-mono` (Menlo) is for inline code.\n- `--text-base` 12px at `--line-body` 1.5. `--text-small` 11px for meta lines, hints, readout labels, the control strip. `--text-ui` 11px bold for buttons, tabs and table heads (`--weight-ui` 700).\n- Headings are light (`--weight-heading`, `--weight-display` 300) and get their weight from size: `--text-display` 34px for the stage title with `--display-tracking` -1px, `--text-h1` 24px page titles and readout figures, `--text-h2` 16px section titles and the brand name, `--text-h3` 12px (bold) panel and source list titles, navigation. `--text-large` 14px (bold) for album names, the stage lead and large keys. Nothing is uppercased.\n- Links are not underlined at rest (`--link-decoration` none) and underline on hover; titles are bold (`.ds-link--title`).\n- `--color-page` #e8e8e8 with `--fill-page`: pearl, lit white from the top and a little darker towards the floor.\n- `--color-bar` #303030 with `--fill-bar` (dark glass under an arched highlight) and white `--color-bar-text` under `--shadow-text`: the title bar, the control strip, the current tab, the dialog's title bar.\n- `--color-bar-alt` #d0d0d0 with `--fill-bar-alt` (silver, light to mid grey): the readout strip, table heads, the current source.\n- `--color-inverse` #080808 with `--fill-inverse` (black under a soft spotlight): the stage only, with `--color-inverse-text` #f0f0f0.\n- `--color-heading` #202020 page, section and panel titles; `--color-heading-alt` #4a8a05 (green) source list titles, prose h2, breadcrumb marks. `--color-text` #565656, `--color-text-muted` #6e6e6e.\n- `--color-link` #2971a7, `--color-link-quiet` #666666, visited #6c5a9c, hover #0060d0, active #59990e.\n- `--color-button` #59a80f with `--fill-button` (green gel under the same arch): the primary key, the brand tile, the play key, the current page number. `--color-button-secondary` #d0d0d0 with `--fill-button-secondary` (silver): every other key, tabs at rest.\n- `--color-accent` #6bbf12 with `--fill-accent`: badges, meter bars, the lamp under the current link, the frame of the current thumbnail. `--color-accent-alt` #2971a7: the New label.\n- `--color-fill-1` to `--color-fill-4` (pearl, mist, leaf, lilac grey): the upper end of each album cell's fade; never text or borders.\n- Borders are 1px solid: `--color-border` #cccccc for boxes, `--color-border-muted` #e5e5e5 for rules inside a box, `--color-border-strong` #767676 for the window and the dialog, `--color-input-border` #a8a8a8 for fields.\n- `--color-notice` #eef6e2 for notices; `--color-danger` #b3261e on `--color-danger-surface` #fbeceb for errors; `--color-success` #4a9a0a and `--color-warning` #e89a00 fill the status badges and signs.\n- Surface: `--radius-control` 12px (controls are capsules), `--radius-panel` 6px, `--radius-pill` 3px (labels and pictures are nearly square), `--radius-page` 8px. `--shadow-panel` is a white upper edge and a short shadow thrown on the floor under a box; `--shadow-control` a bright rim; a hovered key gains a ring in `--color-focus`; `--shadow-dialog` is the deep 30px shadow of a floating window and of the cover in front. Nothing is translucent: `--backdrop-blur` 0px. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills, dividers on the bars (`--color-bar-text` with transparent), the sheen and the motifs of `.ds-art` (mixed from `--color-bar`, `--color-accent`, `--color-accent-alt`, `--color-inverse`, `--color-button` and `--color-button-text`), the floor line of the stage (`--color-inverse-text` with transparent).\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 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 or band take that 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` and `--color-success` as text on the surfaces and on their own pale mixes.\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 a focused field and of a hovered button. `--color-shadow` tints every shadow and darkens the outline of every glossy fill (the fill's colour mixed with `--color-shadow`).\n - A `--fill-*` token may end in a plain colour layer, so it is always the last layer of a `background`.\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 <= 44`: aqua, lime, silver greys, orange, amber, red and four pale tints.\n- `font-size <= 34px`: the stage title is the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight; headings are light.\n- `font-families <= 2`: one grotesque, a monospace only for inline code.\n- `line-height <= 1.5`: body text is 12px on 18px.\n- `underlined-links <= 10%`: links underline on hover only.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 18px`: corners are 6, 12 or 18px; only round signs and round buttons are rounder.\n- `border-width <= 2px`: hairlines, and 2px for the glass rim and the rules titles and tabs stand on.\n- `box-shadow-blur <= 28px`: shadows are soft but short; only the floating sheet reaches 28px.\n- `gradient-fills <= 40%`: gloss belongs to bars, buttons, labels, plates and gadgets; 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.p03.t04.u05\",\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-6345\",\n \"short\": \"v1-fa-6345\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #dfe5e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f1f8f6;\n --color-surface-strong: #dcefe9;\n --color-bar: #c4cace;\n --color-bar-text: #25323a;\n --color-bar-alt: #e4f5bd;\n --color-bar-alt-text: #3a5200;\n --color-inverse: #0e8f9e;\n --color-inverse-text: #ffffff;\n --color-text: #444444;\n --color-text-muted: #686868;\n --color-heading: #0a7a86;\n --color-heading-alt: #5a8a00;\n --color-link: #00768c;\n --color-link-quiet: #555555;\n --color-link-visited: #7a5fa8;\n --color-link-hover: #00a5ba;\n --color-link-active: #5a8a00;\n --color-border: #c5d3d6;\n --color-border-strong: #8fa3a8;\n --color-border-muted: #e3ebec;\n --color-accent: #9bd61a;\n --color-accent-text: #24360a;\n --color-accent-alt: #ff7a1a;\n --color-fill-1: #d2f1f4;\n --color-fill-2: #e7f6c4;\n --color-fill-3: #eef2f3;\n --color-fill-4: #c9efe2;\n --color-button: #12a0b5;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #d9dfe2;\n --color-button-secondary-text: #25323a;\n --color-input: #ffffff;\n --color-input-text: #222222;\n --color-input-border: #9fb3b8;\n --color-disabled: #eceff0;\n --color-disabled-text: #a3adb0;\n --color-danger: #c8321f;\n --color-danger-surface: #fdebe6;\n --color-success: #5c9a08;\n --color-warning: #f2a100;\n --color-notice: #f3fbd9;\n --color-notice-text: #3f5200;\n --color-focus: #49d6e6;\n --color-shadow: #2c4a52;\n --color-overlay: rgba(20, 50, 58, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-mono: Menlo, \"DejaVu Sans Mono\", \"Courier New\", monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 34px;\n --text-h1: 24px;\n --text-h2: 16px;\n --text-h3: 12px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -1px;\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: 2px;\n --border-style: solid;\n --radius-control: 6px;\n --radius-panel: 12px;\n --radius-pill: 12px;\n --radius-page: 18px;\n --shadow-panel: inset 0 0 0 1px color-mix(in srgb, white 70%, transparent), 0 4px 12px color-mix(in srgb, var(--color-shadow) 22%, transparent);\n --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 45%, transparent), 0 2px 3px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 80%, transparent), 0 0 10px color-mix(in srgb, var(--color-focus) 85%, transparent), 0 2px 3px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-dialog: inset 0 0 0 1px color-mix(in srgb, white 50%, transparent), 0 10px 28px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: 0 1px 2px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --fill-page: radial-gradient(ellipse 46% 260px at 50% 300px, color-mix(in srgb, white 80%, transparent) 0, transparent 100%) 0 0 / 100% 600px no-repeat, radial-gradient(ellipse 60% 300px at 12% 0, color-mix(in srgb, var(--color-accent) 60%, transparent) 0, transparent 100%) 0 0 / 100% 300px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), var(--color-shadow) 62%) 0, var(--color-page) 300px, color-mix(in srgb, var(--color-page), white 70%) 820px) 0 0 / 100% 820px no-repeat, color-mix(in srgb, var(--color-page), white 70%);\n --fill-bar: linear-gradient(115deg, transparent 0, transparent 6%, color-mix(in srgb, white 22%, transparent) 6%, color-mix(in srgb, white 22%, transparent) 13%, transparent 13%, transparent 16%, color-mix(in srgb, white 12%, transparent) 16%, color-mix(in srgb, white 12%, transparent) 19%, transparent 19%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 38%) 0, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), black 18%) 100%);\n --fill-bar-alt: linear-gradient(115deg, transparent 0, transparent 6%, color-mix(in srgb, white 45%, transparent) 6%, color-mix(in srgb, white 45%, transparent) 13%, transparent 13%, transparent 16%, color-mix(in srgb, white 30%, transparent) 16%, color-mix(in srgb, white 30%, transparent) 19%, transparent 19%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 70%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(ellipse 34% 46% at 50% 108%, color-mix(in srgb, white 55%, transparent) 0, transparent 100%), radial-gradient(ellipse 75% 85% at 50% 112%, color-mix(in srgb, var(--color-accent) 75%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 35%) 0, var(--color-inverse) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, white 55%, transparent) 0, color-mix(in srgb, white 10%, transparent) 46%, transparent 46%), linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 20%) 0, color-mix(in srgb, var(--color-accent), black 10%) 100%);\n --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 80%, transparent) 0, color-mix(in srgb, var(--color-surface-alt) 72%, transparent) 100%);\n --fill-button: radial-gradient(ellipse 90% 70% at 50% 0, color-mix(in srgb, white 70%, transparent) 0, transparent 100%), radial-gradient(ellipse 80% 60% at 50% 112%, color-mix(in srgb, white 50%, transparent) 0, transparent 100%), linear-gradient(to bottom, var(--color-button) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\n --fill-button-hover: radial-gradient(ellipse 90% 70% at 50% 0, color-mix(in srgb, white 85%, transparent) 0, transparent 100%), radial-gradient(ellipse 80% 60% at 50% 112%, color-mix(in srgb, white 70%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 14%) 0, var(--color-button) 100%);\n --fill-button-secondary: radial-gradient(ellipse 90% 70% at 50% 0, color-mix(in srgb, white 90%, transparent) 0, transparent 100%), radial-gradient(ellipse 80% 60% at 50% 112%, color-mix(in srgb, white 60%, transparent) 0, transparent 100%), linear-gradient(to bottom, var(--color-button-secondary) 0, color-mix(in srgb, var(--color-button-secondary), black 8%) 100%);\n --fill-input: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-input) 50%);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 85%, transparent);\n --transition: none;\n --backdrop-blur: 8px;\n}\n" } }