{ "id": "v1-fa-3333", "long_id": "v1.frutiger-aero.app.s03.p03.t03.u03", "name": "Frutiger Aero account centre", "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": "app", "mode": "pure", "viewport": { "width": 1024, "fluid": false }, "summary": "A fixed-width account and support centre in the fresh, daylight variety of the Frutiger Aero look: aqua and lime on white, with brushed silver for the top strip, the tabs and the status bar. Self-service centres of this kind were common from about 2005 to 2010 beside desktop software, phones and broadband accounts, and borrowed their layout from the windows of the operating system: large tabs, a task pane on the left, wizard steps, a status bar. Surfaces are crisp rather than glassy (small radii, short shadows, no blur), gloss is kept to buttons, tabs and pills, and the type pairs small Verdana with bold Trebuchet headings.", "url": "https://chrono.skin/s/v1-fa-3333", "preview_url": "https://chrono.skin/s/v1-fa-3333/specimen.html", "files": { "STYLE.md": "# Frutiger Aero account centre\n\n## Summary\n\nA fixed-width account and support centre in the fresh, daylight variety of the Frutiger Aero look: aqua and lime on white, with brushed silver for the top strip, the tabs and the status bar. Self-service centres of this kind were common from about 2005 to 2010 beside desktop software, phones and broadband accounts, and borrowed their layout from the windows of the operating system: large tabs, a task pane on the left, wizard steps, a status bar. Surfaces are crisp rather than glassy (small radii, short shadows, no blur), gloss is kept to buttons, tabs and pills, and the type pairs small Verdana with bold Trebuchet headings.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 960px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- The top strip spans the window (`--size-top` 46px) and holds a centred `--size-page` box; under it, 14px lower, a row of large tabs (`--size-tab` 34px) from which the sheet hangs.\n- `.ds-page__wrap` (960px) holds each view's `.ds-page__frame`, the window-like sheet (92% `--color-canvas`, a hairline border, `--radius-page` on its upper right corner), and under it the status-bar footer, which closes the sheet with the two lower corners rounded.\n- The frame is two columns of equal height: the task pane `.ds-page__pane` on the left (`--size-pane` 210px, a tinted fade, a hairline at its right) and `.ds-page__main` (748px, 20px padding). The pane is on every view and always on the left.\n- On the overview the main column runs: hero band, `.ds-stats` row of three gauges, the two-by-two task grid under a `.ds-section__title`, then `.ds-page__split`, two equal `.ds-page__half` columns of panels 20px apart.\n- Spacing scale: `--space-1` 3px (hairline gaps, pane row padding), `--space-2` 6px (gaps between buttons, list row padding, panel caption padding), `--space-3` 10px (control padding, table cell padding, gap between task tiles), `--space-4` 14px (panel and tile padding, gap between gauges), `--space-5` 20px (gutter, main padding, gap between stacked blocks), `--space-6` 28px (gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 24px tall, the hero button `--size-control-large` 34px, the brand tile `--size-mark` 26px, meters `--size-meter` 8px, form labels `--size-label` 150px, the dialog `--size-dialog` 420px.\n- Inner pages drop the hero, gauges and task grid; the pane stays. In `.ds-page__main`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the column (title and one line on the left, the buttons that act on the page at the right, a 1px rule in `--color-accent` under it), then the working blocks at full column width: `.ds-tabs` directly above the table they switch, `.ds-pagination` under it, the wizard's `.ds-steps` above its notices and form, a dialog on its dimmed strip after the table. A page of reading uses `.ds-page__split`: the text in the left half, panels in the right. Further blocks are `.ds-section` blocks 28px apart.\n- Views: the specimen is one account centre of four screens, each a `.ds-view` holding its own frame, with the header and the footer written once around them. `home` is the overview (welcome band, gauges, task tiles, recent activity, the plan). `devices` is the device list (button row, segmented tabs, table with status badges, pagination, the key to the states, the removing dialog). `setup` is step 2 of the set-up wizard (steps, notices, the form). `help` is one guide (long text, onward links, an empty state for open questions, a feedback panel). Links are plain `href=\"#name\"`; the tab of the showing view is raised and joined to the sheet by a `.ds-page:has(#name:target)` rule, the Overview tab also when no view is named.\n\n## Typography and colour roles\n\n- Three families: `--font-body` Verdana, Geneva, \"DejaVu Sans\"; `--font-heading` \"Trebuchet MS\", \"Lucida Sans\", Tahoma; `--font-ui` Tahoma, Verdana, Geneva. All are system fonts. `--font-mono` (\"Courier New\") is for inline code.\n- `--text-base` 11px at `--line-body` 1.4. `--text-small` 10px for meta lines, labels, hints and the status bar. `--text-ui` 11px bold (`--weight-ui` 700) for buttons, tabs and steps.\n- Headings are bold (`--weight-heading`, `--weight-display` 700): `--text-display` 24px the welcome title and gauge figures; `--text-h1` 20px page titles; `--text-h2` 15px section and tile titles, the brand name and the section name in the strip; `--text-h3` 12px panel captions, pane headings, the large tabs. `--text-large` 13px the hero lead and large button. Nothing is uppercased or tracked.\n- Links in text, lists and the pane are underlined (`--link-decoration` underline); titles (`.ds-link--title`), tabs and bar links are not.\n- `--color-page` #dfe5e8 with `--fill-page`: brushed silver, fine vertical lines, lighter at the top.\n- `--color-bar` #c4cace with `--fill-bar` (brushed metal: fine lines over a light-dark-light sheen) and dark `--color-bar-text` #25323a with a light `--shadow-text` under it: the top strip, the status bar, the dialog frame.\n- `--color-bar-alt` #e4f5bd (pale lime) with `--fill-bar-alt`: panel captions, the table head, the steps strip; text `--color-bar-alt-text` #3a5200.\n- `--color-inverse` #0e8f9e (aqua) with `--fill-inverse` (lighter at the top, a soft light rising from the lower left): the welcome band, white text.\n- `--color-heading` #0a7a86 (aqua) titles and figures; `--color-heading-alt` #5a8a00 (lime, darkened for text) pane headings, prose h2, breadcrumb marks. `--color-text` #444444, `--color-text-muted` #686868. Surfaces: `--color-surface-alt` #f1f8f6 alternate rows and the pane, `--color-surface-strong` #dcefe9 meter tracks and the dialog's action strip.\n- `--color-link` #00768c, `--color-link-quiet` #555555, visited #7a5fa8, hover #00a5ba, active #5a8a00.\n- `--color-button` #12a0b5 with `--fill-button` (aqua, a hard break at 50%): the primary button, the brand tile, arrow buttons, the current step and page number. `--color-button-secondary` #d9dfe2 with `--fill-button-secondary` (silver): every other button, the large tabs at rest, the segmented tabs.\n- `--color-accent` #9bd61a (lime) with dark `--color-accent-text`: pill badges, meter bars, the current segmented tab, the edge of the current large tab, the rule under the page header, pane arrows. `--color-accent-alt` #ff7a1a: the New marker.\n- `--color-fill-1` to `--color-fill-4` (aqua tint, lime tint, silver, mint): the left end of each task tile's fade.\n- Borders are 1px solid: `--color-border` #c5d3d6 for boxes, `--color-border-muted` #e3ebec between rows, `--color-border-strong` #8fa3a8 for the sheet and the dialog, `--color-input-border` #9fb3b8.\n- `--color-notice` #f3fbd9; `--color-danger` #c8321f on `--color-danger-surface` #fdebe6; `--color-success` #5c9a08 and `--color-warning` #f2a100 fill status badges and the dots of the activity list.\n- Surface: `--radius-control` 3px, `--radius-panel` 5px, `--radius-page` 6px, `--radius-pill` 9px. Shadows are short: `--shadow-panel` a 3px drop, `--shadow-control` a white inner top edge and a 1px drop, `--shadow-dialog` 12px. `--fill-panel` is opaque white ending in a faint tint; `--backdrop-blur` is 0px: nothing is translucent. `--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 sheet (92% `--color-canvas`), bubbles (`--color-inverse-text` 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 960px column; each view holds a `.ds-page__frame` with `.ds-page__pane` (the task pane) and `.ds-page__main`; `.ds-page__split` lays two `.ds-page__half` columns side by side. `.ds-section` with a `.ds-section__title` (15px bold) separates blocks by 28px. `.ds-view` is one screen of the example site (`.ds-view--home` the first).\n- `.ds-nav`: the header. `.ds-nav__top` is the brushed strip across the window; its `.ds-nav__inner` holds the `.ds-brand`, the centre's name as `.ds-nav__section` behind a hairline, and right-aligned `.ds-nav__tools` (text, bold `.ds-nav__tool` links, the `.ds-nav__input` search field). `.ds-nav__tabs` under it is the row of large glossy tabs, each a `.ds-nav__link`: silver at rest, the current one (`is-current`) taller, white, joined to the sheet, with a lime edge on top. Four or five tabs.\n- `.ds-brand`: the site's mark and name at the left end of the strip, linking to the overview; 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-h2` in `--color-bar-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 at the top of the overview: a rounded block in `--fill-inverse` with up to three `.ds-hero__bubble` spans (`--1` to `--3`). `.ds-hero__main` holds `.ds-hero__title` (24px) and one `.ds-hero__lead` line; `.ds-hero__action` at the right holds one `.ds-button--large`. On the overview only.\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (20px, the page's h1) and a grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right with the page's buttons; a lime rule under the whole. One per inner page.\n- `.ds-stat`: one gauge; three sit in a `.ds-stats` row under the hero. Each is a bordered tile with a small `.ds-stat__label`, a 24px `.ds-stat__number` (its unit in a grey `.ds-stat__unit`) and a `.ds-meter` whose `.ds-meter__bar` (`--full`, `--most`, `--some`) shows the share used.\n- `.ds-grid`: the task tiles, two columns. Each `.ds-grid__cell` (`--1` to `--4` choose the tint it fades from) holds `.ds-grid__body` (`.ds-grid__title`, `.ds-grid__text`) and a `.ds-button--arrow` at the right. One tile per thing the visitor can do.\n- `.ds-tabs`: a segmented control: `.ds-tabs__item` (first `is-first`, last `is-last`) each holding a `.ds-tabs__tab`; the current one `is-current` is lime and pressed in; `.ds-tabs__count` for a number. Directly above the table it filters.\n- `.ds-list`: the activity log. Each `.ds-list__item` (first: `is-first`) is a round `.ds-list__dot` (green; `--warning`, `--danger`) beside `.ds-list__body`: a `.ds-list__title` line and a grey `.ds-list__meta`. Rows are divided by hairlines.\n- `.ds-panel`: a small window (`is-last` on the last of a column): `.ds-panel__title` is a pale lime caption strip, `.ds-panel__body` holds `.ds-panel__text`, a `.ds-panel__facts` list of `.ds-panel__fact` rows (name in `.ds-panel__fact-name`, value at the right) and `.ds-panel__actions`.\n- `.ds-button`: the primary action: aqua gloss, white bold 11px, 24px tall, 3px corners; may end with a `.ds-button__icon` arrow. Variants: `.ds-button--secondary` (silver, the usual button), `.ds-button--danger` (red, only for removing), `.ds-button--large` (34px, the hero), `.ds-button--arrow` (a round button holding only the arrow, at the right of a task tile). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` a toolbar. One primary button per page header, form, panel or dialog. `.ds-steps` shows a wizard's progress above its form: joined `.ds-steps__step` segments (first `is-first`) with a round `.ds-steps__number`; finished steps `is-done`, the current one `is-current`.\n- `.ds-sidebar`: one block of the task pane (`is-last` on the last): a lime-green `.ds-sidebar__title` over a hairline, then `.ds-sidebar__list` of `.ds-sidebar__item` links behind small arrows (current: `is-current`) or a `.ds-sidebar__text` line and a button.\n- `.ds-prose`: long text: h1, h2 (in `--color-heading-alt` over a hairline), h3 (bold), p, ul, ol, code, strong and links inside it are styled. For articles and guides.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` is bold, for titles; `.ds-link--quiet` for minor links. `.ds-links` lays several out in a row.\n- `.ds-form`: label-left form: `.ds-form__row` with a right-aligned bold `.ds-form__label` and a `.ds-form__field` holding `.ds-form__input` (`--short` for half width), `.ds-form__select` or `.ds-form__textarea`; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus` (a glow in `--color-focus`), `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` for the buttons, under a hairline and aligned with the fields.\n- `.ds-table`: data table in a rounded 1px border with the panel shadow: `.ds-table__head` cells form a strip in `--fill-bar-alt`; `.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.\n- `.ds-badge`: a small gel pill in `--fill-accent`. `.ds-badge--count` (flat, a number), `.ds-badge--new` (`--color-accent-alt`). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, one per row. `.ds-badges` lays several out in a row.\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 above the form or list they report on.\n- `.ds-pagination`: a row of small glass keys: `.ds-pagination__link`, `is-current` (the primary button's gel), `is-disabled`, `.ds-pagination__gap` for an ellipsis.\n- `.ds-breadcrumb`: a small trail of `.ds-link` items with `.ds-breadcrumb__sep` guillemets in `--color-heading-alt` and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a window: a glass frame in `--fill-bar` holding `.ds-dialog__title` (with a red `.ds-dialog__close`), a `.ds-dialog__body` in `--color-surface` with `.ds-dialog__text`, and a `.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, directly under the table or form that opened it.\n- `.ds-empty`: a pale well with a round glass `.ds-empty__orb` icon, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the status bar that closes the sheet: a brushed strip with `.ds-footer__legal` at the left and `.ds-footer__links` (`.ds-footer__link`) at the right, the two lower corners rounded.\n\n## Never\n\n- `row-gap <= 20px`: rows are divided by a hairline, not by space.\n- `block-gap <= 28px`: sections are at most 28px apart.\n- `content-width <= 960px`: text stays inside the fixed column.\n- `palette-colours <= 44`: aqua, lime, silver greys, orange, amber, red and four pale tints.\n- `font-size <= 24px`: the welcome title and the gauge figures are 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 <= 4`: a body sans, a heading sans, a control sans, a monospace for inline code.\n- `line-height <= 1.4`: body text is 11px on about 15px.\n- `underlined-links >= 40%`: links in text, lists and the pane are underlined; only titles and tabs are not.\n- `letter-spacing = 0px`: no tracking.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 9px`: corners are 3, 5 or 6px; only dots, round buttons and pills are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 12px`: shadows are short; the dialog's 12px is the deepest.\n- `gradient-fills <= 26%`: gloss belongs to the strips, tabs, buttons, pills and tiles; 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 task is a tile in `.ds-grid` with an arrow button; a new fact box is a `.ds-panel` with a caption; a new group of shortcuts is a `.ds-sidebar` block in the pane; a new multi-step job reuses `.ds-steps` over a `.ds-form`. A new strip is `--fill-bar`, a caption `--fill-bar-alt`, a band `--fill-inverse`. 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`, and make any extra shade with `color-mix()` over existing tokens.\n", "components.css": ":root {\n --size-page: 960px;\n --size-pane: 210px;\n --size-top: 46px;\n --size-tab: 34px;\n --size-search: 170px;\n --size-mark: 26px;\n --size-control: 24px;\n --size-control-large: 34px;\n --size-icon: 14px;\n --size-bubble: 40px;\n --size-meter: 8px;\n --size-glow: 8px;\n --size-label: 150px;\n --size-textarea: 70px;\n --size-dialog: 420px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 14px;\n --space-5: 20px;\n --space-6: 28px;\n}\n\n/* shell: a glass strip across the window, large tabs, one window-like sheet with a task pane on its left */\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: 0 0 var(--space-6);\n}\n.ds-page__frame {\n display: flex;\n align-items: stretch;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 70%, transparent);\n border-radius: 0 var(--radius-page) 0 0;\n background: color-mix(in srgb, var(--color-canvas) 92%, transparent);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n box-shadow: var(--shadow-panel);\n}\n.ds-page__pane {\n flex: 0 0 var(--size-pane);\n width: var(--size-pane);\n padding: var(--space-5) var(--space-4);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n background: linear-gradient(to right, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-5) var(--space-5) var(--space-6);\n}\n.ds-page__split {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-page__half {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: the strip with the brand and the account, then a row of large glossy tabs that the sheet hangs from */\n.ds-nav { margin: 0; }\n.ds-nav__top {\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n width: var(--size-page);\n height: var(--size-top);\n margin: 0 auto;\n}\n.ds-nav__section {\n margin: 0;\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 40%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 0 auto;\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tool {\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__input {\n width: var(--size-search);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 50%, var(--color-shadow));\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-small);\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__tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n width: var(--size-page);\n margin: var(--space-4) auto 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n height: var(--size-tab);\n padding: 0 var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-bottom: 0;\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { box-shadow: var(--shadow-control-hover); }\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(#devices:target) .ds-nav__link[href=\"#devices\"],\n.ds-page:has(#setup:target) .ds-nav__link[href=\"#setup\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n position: relative;\n top: var(--border-width);\n height: calc(var(--size-tab) + var(--space-2));\n border-color: color-mix(in srgb, var(--color-border-strong) 70%, transparent);\n background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-canvas) 100%);\n box-shadow: inset 0 var(--space-1) 0 var(--color-accent);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* hero: the welcome band of the overview; sky, a few bubbles, one action */\n.ds-hero {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: var(--space-5) var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n overflow: hidden;\n}\n.ds-hero__main {\n position: relative;\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-1);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n position: relative;\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-hero__bubble {\n position: absolute;\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) 24%, transparent 58%, color-mix(in srgb, var(--color-inverse-text) 30%, transparent) 100%);\n}\n.ds-hero__bubble--1 { top: 62%; left: 66%; }\n.ds-hero__bubble--2 {\n top: 8%;\n left: 68%;\n width: calc(var(--size-bubble) * 0.5);\n height: calc(var(--size-bubble) * 0.5);\n}\n.ds-hero__bubble--3 {\n top: -30%;\n left: 90%;\n width: calc(var(--size-bubble) * 2);\n height: calc(var(--size-bubble) * 2);\n}\n\n/* page header: head of an inner page, title over a hairline that fades out */\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-3);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent);\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-1) 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-2);\n}\n\n/* stats: three glass gauges, each a figure over a meter */\n.ds-stats {\n display: flex;\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) 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-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-stat__number {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-stat__unit {\n color: var(--color-text-muted);\n font-size: var(--text-h3);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\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__bar--full { width: 100%; }\n.ds-meter__bar--most { width: 60%; }\n.ds-meter__bar--some { width: 42%; }\n\n/* grid: task tiles, two by two; a title, a line, and a round arrow button at the right */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n align-items: center;\n gap: 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-alt);\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) 100%); }\n.ds-grid__cell--2 { background: linear-gradient(to right, var(--color-fill-2) 0, var(--color-surface) 100%); }\n.ds-grid__cell--3 { background: linear-gradient(to right, var(--color-fill-3) 0, var(--color-surface) 100%); }\n.ds-grid__cell--4 { background: linear-gradient(to right, var(--color-fill-4) 0, var(--color-surface) 100%); }\n.ds-grid__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-grid__title {\n margin: 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-grid__text { margin: var(--space-1) 0 0; }\n\n/* tabs: a segmented glass control over the table it switches */\n.ds-tabs {\n display: flex;\n align-items: center;\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n}\n.ds-tabs__item { margin-left: calc(0px - var(--border-width)); }\n.ds-tabs__item.is-first { margin-left: 0; }\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-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\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}\n.ds-tabs__item.is-first .ds-tabs__tab { border-radius: var(--radius-control) 0 0 var(--radius-control); }\n.ds-tabs__item.is-last .ds-tabs__tab { border-radius: 0 var(--radius-control) var(--radius-control) 0; }\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-tabs__tab.is-current {\n border-color: color-mix(in srgb, var(--color-accent) 68%, var(--color-shadow));\n background: var(--fill-accent);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n\n/* list: the activity log; a status dot, what happened, when */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\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-list__item.is-first { border-top: 0; }\n.ds-list__dot {\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n margin-top: var(--space-1);\n border-radius: 50%;\n background: var(--color-success);\n box-shadow: var(--shadow-control);\n}\n.ds-list__dot--warning { background: var(--color-warning); }\n.ds-list__dot--danger { background: var(--color-danger); }\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\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-list__meta {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a small window; a glass caption bar, then the body */\n.ds-panel {\n margin: 0 0 var(--space-5);\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-panel.is-last { margin-bottom: 0; }\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\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 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-panel__body { padding: var(--space-3) var(--space-4) var(--space-4); }\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__fact {\n display: flex;\n justify-content: space-between;\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 { border-top: 0; padding-top: 0; }\n.ds-panel__fact-name { color: var(--color-text-muted); }\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* sidebar: a block of the task pane; a green heading, links after small arrows */\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: 0 0 var(--space-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading-alt);\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;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n}\n.ds-sidebar__item::before {\n content: \"\";\n flex: 0 0 auto;\n width: 0;\n height: 0;\n border: var(--space-1) var(--border-style) transparent;\n border-left-color: var(--color-accent);\n}\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__text { margin: 0 0 var(--space-3); font-size: var(--text-small); }\n\n/* steps: the wizard's progress, joined chevrons of glass */\n.ds-steps {\n display: flex;\n margin: 0 0 var(--space-5);\n padding: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-panel);\n list-style: none;\n overflow: hidden;\n}\n.ds-steps__step {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-steps__step.is-first { border-left: 0; }\n.ds-steps__number {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-control) - var(--space-2));\n height: calc(var(--size-control) - var(--space-2));\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-steps__step.is-done .ds-steps__number {\n border-color: color-mix(in srgb, var(--color-accent) 68%, var(--color-shadow));\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-steps__step.is-current {\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\n/* footer: the status bar that closes the sheet */\n.ds-footer {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n border-top: 0;\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: var(--fill-bar);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-footer__legal { margin: 0; }\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n\n/* brand: the mark on a glossy tile dressed like the primary button, the name on the glass bar */\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\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) 70%, 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: 68%;\n height: 68%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\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\n/* typography */\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 {\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\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-6);\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-control);\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: gel buttons with a bright upper half; the arrow button is a round one */\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-buttons--bar { margin: var(--space-4) 0; }\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) 68%, 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--arrow {\n flex: 0 0 auto;\n width: var(--size-control);\n padding: 0;\n border-radius: 50%;\n}\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 60%, 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) 68%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 55%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 18%) 48%, var(--color-danger) 52%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 20%) 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) 66%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 28%) 48%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 8%) 52%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 32%) 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 */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\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); }\n.ds-form__select { width: auto; padding: 0 var(--space-2); }\n.ds-form__input--short { width: 50%; }\n.ds-form__textarea {\n display: block;\n height: var(--size-textarea);\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 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 padding-top: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: pale glass head, hairlines between rows */\n.ds-table {\n width: 100%;\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-alt);\n color: var(--color-bar-alt-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-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\n/* badge: a small gel pill */\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: var(--color-accent-alt);\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) 35%) 0, var(--color-success) 55%);\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) 45%) 0, var(--color-warning) 55%);\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) 35%) 0, var(--color-danger) 55%);\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: a rounded bar with 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) 55%, 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: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\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}\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 glass keys */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 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) 60%, 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) 68%, 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/* dialog: a glass window with a title bar, set 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 padding: var(--space-2);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-bar);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3) var(--space-3);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) * 2);\n height: var(--size-icon);\n border-radius: var(--radius-control);\n background: var(--color-danger);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: none;\n}\n.ds-dialog__body {\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--color-surface);\n}\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-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top-color: var(--color-border-muted);\n border-radius: 0 0 var(--radius-control) var(--radius-control);\n background: var(--color-surface-strong);\n}\n\n/* empty state: a pale well with a glass bubble */\n.ds-empty {\n padding: var(--space-6) 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) var(--color-border);\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", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero account centre specimen\n\n\n\n\n
\n
\n
\n chronoskin\n

Account centre

\n
\n Signed in as Imre Valdane\n Sign out\n \n
\n
\n
\n \n
\n\n
\n\n
\n
\n \n
\n
\n \n \n \n
\n

Welcome back, Imre

\n

Everything is in step. Your Home plan renews on 14 October.

\n
\n

Set up a new device

\n
\n\n
    \n
  • Storage used10.4 of 25 GB
    • \n
  • Devices3 of 5 allowed
    • \n
  • Files in step18,206 all
    • \n
\n\n

What would you like to do?

\n
\n

Add a computer or phone

Four steps, about five minutes.

\n

Check my devices

See what each one last synced.

\n

Get more storage

Move to the Family plan, 100 GB.

\n

Fix a problem

Guides, or a person to talk to.

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

Recent activity

\n
\n
    \n

  • Study desktop synced 214 photos

    Today, 9:02

    • \n

  • Kitchen laptop has not been seen for 9 days

    Since 9 March

    • \n

  • Password changed from the study desktop

    Monday, 18:40

    • \n

  • Sign-in refused: wrong password, three times

    Sunday, 23:11

    • \n
\n
\n
\n
\n
\n
\n

Your plan

\n
\n
    \n
  • PlanHome Active
    • \n
  • Renews14 October
    • \n
  • Price a year29.00
    • \n
  • Paid byCard ending 4410
    • \n
\n

Change planReceipts

\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  1. Account centre
    2. \n
  2. »
    3. \n
  3. Devices
    4. \n
  4. »
    5. \n
  5. All devices
    6. \n
\n
\n
\n

Devices

\n

Every computer and phone that has signed in with your name.

\n
\n
\n Add a device\n Rename\n Remove\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
DeviceStateLast seenFilesSpace used
Study desktopDesktop computer, added 2 JuneIn stepToday, 9:0218,20610.4 GB
Kitchen laptopLaptop, added 19 AugustNot seen9 March17,95010.1 GB
Pocket phonePhone with a 2 GB cardIn stepToday, 8:401,2041.6 GB
Old towerDesktop computer, added last yearRemoved14 January00 GB
Garden shed netbookLaptop, added 3 MarchSyncingToday, 9:056,4803.9 GB
\n \n
\n

What the states mean

\n

\n Syncing\n 6 devices\n New\n In step\n Not seen\n Removed\n

\n
\n
\n
\n

Remove Kitchen laptop?x

\n
\n

The laptop is signed out and stops syncing. Files already on it stay where they are. You can add it again later.

\n
\n
\n Remove device\n Cancel\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  1. Account centre
    2. \n
  2. »
    3. \n
  3. Set up a device
    4. \n
\n
\n
\n

Set up a new device

\n

Step 2 of 4. Tell us about the computer or phone you are adding.

\n
\n
Help with this step
\n
\n
    \n
  1. 1Download
    2. \n
  2. 2Name the device
    3. \n
  3. 3Choose folders
    4. \n
  4. 4First sync
    5. \n
\n
\n
i

This will be device 4 of 5. Your Home plan allows one more after it.

\n
!

We could not go on. The name is already used by another device.

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

You already have a device called Kitchen laptop. Choose another name.

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

Eight characters, shown in the installer's last window.

\n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n Back\n \n Cancel setup\n
\n
\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  1. Account centre
    2. \n
  2. »
    3. \n
  3. Help
    4. \n
  4. »
    5. \n
  5. Move to a new computer
    6. \n
\n
\n
\n

Help

\n

Guides for chronoskin Sync, and your own questions to us.

\n
\n
Ask a question
\n
\n
\n
\n
\n

Move to a new computer

\n

Your library lives on our servers as well as on your devices, so a new computer only has to sign in and fetch it. Allow an evening for the first pass.

\n

Before you start

\n
    \n
  • Let the old computer finish syncing: the status window should say All in step.
    • \n
  • Have your sign-in name and password to hand.
    • \n
\n

On the new computer

\n
    \n
  1. Download the installer and run it.
    2. \n
  2. Sign in, then type the code it shows, for example 7KQ4-M2XD.
    3. \n
  3. Choose which folders this machine should hold.
    4. \n
\n

If the old computer is gone

\n

Remove it from your device list so that it no longer counts towards your plan. Nothing in your library is deleted.

\n
\n
\n

Related guides

\n

\n Choose which folders sync\n Restore a deleted file\n Remove a device\n Set up a device now\n

\n
\n
\n
\n
\n

Your questions to us

\n
\n
\n \n

Nothing open

\n

Questions you send are listed here until we have answered them.

\n Ask a question\n
\n
\n
\n
\n

Was this guide useful?

\n
\n

1,940 people read it this month and 96 in 100 said yes.

\n

YesNot really

\n
\n
\n
\n
\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.app.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-3333\",\n \"short\": \"v1-fa-3333\"\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: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-heading: \"Trebuchet MS\", \"Lucida Sans\", Tahoma, sans-serif;\n --font-ui: Tahoma, Verdana, Geneva, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 24px;\n --text-h1: 20px;\n --text-h2: 15px;\n --text-h3: 12px;\n --line-body: 1.4;\n --line-heading: 1.25;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 5px;\n --radius-pill: 9px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-shadow) 20%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 1px 1px color-mix(in srgb, var(--color-shadow) 25%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), 0 1px 3px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control-pressed: inset 0 1px 3px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-dialog: 0 3px 12px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-text: 0 1px 0 color-mix(in srgb, white 35%, transparent);\n --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, white 20%, transparent) 0, color-mix(in srgb, white 20%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 3%, transparent) 2px, color-mix(in srgb, black 3%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-page), white 75%) 0, var(--color-page) 280px) 0 0 / 100% 280px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(90deg, color-mix(in srgb, white 22%, transparent) 0, color-mix(in srgb, white 22%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 4%, transparent) 2px, color-mix(in srgb, black 4%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 75%) 0, color-mix(in srgb, var(--color-bar), white 18%) 45%, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), white 42%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 65%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(circle at 12% 130%, color-mix(in srgb, white 32%, transparent) 0, transparent 46%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 30%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 16%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 70%, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 12%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 54%) 0, color-mix(in srgb, var(--color-button), white 24%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, color-mix(in srgb, var(--color-button-secondary), white 20%) 50%, color-mix(in srgb, var(--color-button-secondary), black 6%) 50%, color-mix(in srgb, var(--color-button-secondary), white 35%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }