{ "id": "v1-fa-1353", "long_id": "v1.frutiger-aero.landing.s01.p03.t05.u03", "name": "Frutiger Aero product page", "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": "landing", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A fixed-width product page in the glossy, optimistic look that desktop operating systems wore in the second half of the 2000s: a sky-blue page with a pale glow at the top, one segmented glass bar for navigation, and a single rounded sheet that opens with a sky band where a glass window floats over its own reflection above green hills. It was common from about 2004 to 2010 on the pages of operating systems, desktop software, phones and gadgets. Gloss is everywhere a finger would go (bars, buttons, orbs, pills, tabs), panels are white glass with a bright upper edge and a soft shadow, corners are rounded by 4 to 10px, and the text is a small humanist sans in deep blue and grass green.", "url": "https://chrono.skin/s/v1-fa-1353", "preview_url": "https://chrono.skin/s/v1-fa-1353/specimen.html", "files": { "STYLE.md": "# Frutiger Aero product page\n\n## Summary\n\nA fixed-width product page in the glossy, optimistic look that desktop operating systems wore in the second half of the 2000s: a sky-blue page with a pale glow at the top, one segmented glass bar for navigation, and a single rounded sheet that opens with a sky band where a glass window floats over its own reflection above green hills. It was common from about 2004 to 2010 on the pages of operating systems, desktop software, phones and gadgets. Gloss is everywhere a finger would go (bars, buttons, orbs, pills, tabs), panels are white glass with a bright upper edge and a soft shadow, corners are rounded by 4 to 10px, and the text is a small humanist sans in deep blue and grass green.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 940px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- Everything sits in `.ds-page__wrap` (940px): the navigation bar (`--size-nav` 38px tall), then `.ds-page__sheet`, the one glass sheet of the page (88% `--color-canvas`, `--radius-page` corners, `--shadow-panel`), then the footer band. `--space-4` (12px) separates bar and sheet, `--space-5` (20px) sheet and footer.\n- The home page fills the sheet edge to edge with the hero and the stats strip under it; all other content sits in `.ds-page__body` (20px padding at the sides and top, 32px at the bottom): the row of four feature cells, then two columns.\n- Two columns in `.ds-page__columns`: main (600px) and a right column of `--size-sidebar` (280px), `--space-5` (20px) apart. The side column is always on the right and holds `.ds-panel` and `.ds-sidebar` blocks.\n- Spacing scale: `--space-1` 2px (hairline gaps, date tile padding), `--space-2` 4px (between a title and its rule, inside controls), `--space-3` 8px (control padding, gaps between buttons, table cell padding), `--space-4` 12px (panel padding, gaps between grid cells, list row padding), `--space-5` 20px (gutter, sheet padding, gap between stacked blocks), `--space-6` 32px (hero padding, gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 26px tall, the hero buttons `--size-control-large` 38px, feature orbs `--size-orb` 56px, the hero window `--size-window` 350px with a reflection of `--size-reflection` 46px, date tiles `--size-date` 44px, form labels `--size-label` 150px, the dialog `--size-dialog` 440px.\n- Inner pages drop the hero and the stats strip. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the full 900px (title and one line on the left, one or two buttons on the right, a hairline under it), then either a full-width block (the comparison table, the `.ds-steps` row, a boxed `.ds-stats--boxed` row) or the same two columns. `.ds-tabs` sit at the top of the main column directly above the text or list they switch; 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 32px apart with a `.ds-section__title`.\n- Views: the specimen is one product site of five screens, each a `.ds-view` inside the sheet, with the bar and the footer written once around them. `home` is the product page (hero, stats, feature cells, news list, requirements panel, popular answers). `tour` explains one feature (tabs, long text, onward links, the tour's contents and a call to action in the side column). `editions` compares the editions (table with status badges, the key to the labels, a panel and a link block). `download` is the order form (steps, notices, the form with its buttons, a summary panel, the cancelling dialog). `help` lists help articles (boxed stats, tabs, list, pagination, topics, an empty state for open questions). Links are plain `href=\"#name\"`; the bar segment of the showing view is pressed in by a `.ds-page:has(#name:target)` rule, the Home segment 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- Three families, system and open faces only: `--font-body` is \"Trebuchet MS\", \"Lucida Sans Unicode\", \"DejaVu Sans\"; `--font-heading` is \"Century Gothic\", \"URW Gothic\", Futura, \"Trebuchet MS\", a geometric sans standing in for the commercial display faces shops of the time used on their banners; `--font-ui` is Arial, Helvetica, \"Liberation Sans\". `--font-mono` (\"Lucida Console\") is for inline code.\n- `--text-base` 12px at `--line-body` 1.4. `--text-small` 11px for meta lines, hints, counts, the footer. `--text-ui` 12px bold for buttons, tabs, labels and table heads (`--weight-ui` 700).\n- Headings are regular weight (`--weight-heading`, `--weight-display` 400): `--text-display` 36px the banner title and the large price, `--text-h1` 24px page titles and the brand name, `--text-h2` 18px section titles, prices, promise figures, `--text-h3` 13px (bold) product names, navigation, list titles. `--text-large` 14px (bold) panel titles, form legends, the banner lead and large buttons. Nothing is uppercased or tracked.\n- Links are not underlined at rest (`--link-decoration` none) and underline on hover; titles are bold (`.ds-link--title`).\n- `--color-page` #f28c28 with `--fill-page`: a sunrise, deep red at the top with a magenta glow at the left, orange behind the header, a white sun low in the middle, peach below.\n- `--color-bar` #c2185b with `--fill-bar` (magenta glass, lighter above, with two diagonal streaks of light near its left end) and white `--color-bar-text` under `--shadow-text`: the category bar, sidebar titles, the dark gadget body.\n- `--color-bar-alt` #ffd9a8 with `--fill-bar-alt` (peach glass with the same streaks): the promise strip, panel titles, table heads, score tiles, the footer strip, the pale gadget body.\n- `--color-inverse` #4a0f2e with `--fill-inverse` (plum, almost black at the top, with a pink glow and a white core rising from the foot): the offer banner only, with `--color-inverse-text` #fff3e0.\n- `--color-heading` #8a1244 page, section and dialog titles and the brand name; `--color-heading-alt` #d95a00 (orange) prices, form legends, prose h2, breadcrumb and list marks. `--color-text` #3a2a2a, `--color-text-muted` #7a6260.\n- `--color-link` #b3124f, `--color-link-quiet` #8a4a1a, visited #7a4a9a, hover #e86a00, active #8a1244.\n- `--color-button` #f57c00 with `--fill-button` (orange candy: a dome of light at the top, a glow at the foot): the primary button, the brand tile, the round add button, the current step and page number. `--color-button-secondary` #f3e0cf with `--fill-button-secondary` (cream candy): every other button, tabs at rest, the steps bar.\n- `--color-accent` #e0407f with `--fill-accent` (pink gel): labels, the round signs of the promises, the current tab and the rule the tabs stand on, meter bars. `--color-accent-alt` #7b3fb5 (violet): the New label and gadget screens.\n- `--color-fill-1` to `--color-fill-4` (apricot, rose, sun, lilac): the upper end of each product plate's fade and the product stage; never text or borders.\n- Borders are 1px solid, 2px (`--border-width-strong`) for the sheet's rim, the rule under section titles and tabs, the total line and the dialog's rim: `--color-border` #f2c9a0 for boxes, `--color-border-muted` #f8e3cf for rules inside a box, `--color-border-strong` #c96a3a for a hovered basket, `--color-input-border` #e0a878 for fields.\n- `--color-notice` #fff6c9 for notices; `--color-danger` #c21f1f on `--color-danger-surface` #fde8e4 for errors; `--color-success` #5a9a1a and `--color-warning` #f2b000 fill the stock labels and signs.\n- Surface: `--radius-control` 6px, `--radius-panel` 12px, `--radius-pill` 12px, `--radius-page` 18px. `--shadow-panel` is a clear inner rim plus a soft 12px plum shadow; `--shadow-control` the same rim on a button; a hovered button gains a halo in `--color-focus`; `--shadow-dialog` is the 28px shadow of a floating sheet. `--fill-panel` is translucent and `--backdrop-blur` 8px blurs what lies behind sheet, panels and tiles. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills, dividers on the bars, the sheet (86% `--color-canvas`) and its rim, the lights on the banner (`--color-inverse-text` with transparent), and every part of a `.ds-device` (screens from `--color-accent-alt` and `--color-inverse`, wheels and lenses from the surface colours).\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 940px column; `.ds-page__sheet` the glass sheet; `.ds-page__body` its padded content area; `.ds-page__columns` holds `.ds-page__main` and `.ds-page__aside`. `.ds-section` with a `.ds-section__title` (17px over a hairline) separates blocks by 32px. `.ds-view` is one screen of the example site (`.ds-view--home` the first).\n- `.ds-nav`: the header. `.ds-nav__bar` is one rounded glass bar: the `.ds-brand`, then `.ds-nav__links` of equal `.ds-nav__item` segments, each a centred `.ds-nav__link` divided from the next by a light hairline (current: `is-current`, pressed in and darker; hover: `is-hover`), then `.ds-nav__search` with a pill-shaped `.ds-nav__input`. Five segments at most.\n- `.ds-brand`: the site's mark and name at the left end of the bar, 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-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 product page's opening band, on the home page only: `--fill-inverse` sky with two green hills along the bottom. `.ds-hero__main` holds `.ds-hero__title` (28px), `.ds-hero__lead` (15px), `.ds-hero__action` (a `.ds-button--large` and a secondary one) and a small `.ds-hero__note`. `.ds-hero__product` on the right holds `.ds-hero__window`, a glass panel with a `.ds-hero__window-bar` caption and `.ds-hero__rows` of `.ds-hero__row` (first: `is-first`; `.ds-hero__row-name`, a `.ds-meter`, `.ds-hero__row-state`), and under it `.ds-hero__reflection`, an empty mirrored copy that fades out. Up to four `.ds-hero__bubble` spans (`--1` to `--4`) float in the sky. `.ds-meter` with `.ds-meter__bar` (`--full`, `--most`, `--some`) is a small progress bar.\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (22px, the page's h1) and one grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right with one or two buttons; a hairline under the whole. One per inner page.\n- `.ds-stat`: one figure; three or four sit in a `.ds-stats` row, a pale glass strip across the sheet directly under the hero, figures divided by hairlines (first: `is-first`). Each is a 22px `.ds-stat__number` with an 11px `.ds-stat__label` beside it. On an inner page the row takes `.ds-stats--boxed` (a rounded border, 20px below).\n- `.ds-grid`: a row of four feature cells 12px apart. `.ds-grid__cell` (`--1` to `--4` choose the tint it fades into) holds a `.ds-orb`, a `.ds-grid__title`, a `.ds-grid__text` and a small `.ds-grid__more` link, all centred. `.ds-orb` is a 56px glossy ball with a line icon: green by default, `.ds-orb--bar` blue, `.ds-orb--accent` grass, `.ds-orb--alt` orange.\n- `.ds-prose`: long text: h1, h2 (green over a hairline), h3 (bold 13px), p, ul, ol, code, strong and links inside it are styled. For tour and help pages.\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-button`: the primary action: green gel, white bold 12px, 26px tall, 4px corners; may end with a `.ds-button__icon` arrow. Variants: `.ds-button--secondary` (silver-blue glass, the usual button), `.ds-button--danger` (red gel, only for an action that removes or cancels), `.ds-button--large` (38px, the hero), `.ds-button--arrow` (a round button holding only the arrow icon, placed before the link it belongs to). States `is-hover` (a halo), `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` a toolbar. One primary button per form, panel or dialog.\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), `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. `.ds-steps` above a form shows a wizard's progress: `.ds-steps__step` with a round `.ds-steps__number`, the current one `is-current`.\n- `.ds-table`: data table in a rounded 1px border with the panel shadow: `.ds-table__head` cells form a pale 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.\n- `.ds-list`: news and article list. Each `.ds-list__item` (first: `is-first`) is an optional `.ds-list__date` tile (`.ds-list__month` on pale glass over `.ds-list__day`) beside `.ds-list__body`: a bold `.ds-list__title`, a `.ds-list__text` line and a grey `.ds-list__meta`. Rows are divided by hairlines, never boxed.\n- `.ds-panel`: a white glass box in the side column (`is-last` on the last block of a column): green `.ds-panel__title` over a hairline, `.ds-panel__body` with `.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-tabs`: glass tabs with rounded tops on a hairline: `.ds-tabs__tab`, the current one `is-current` (white, joined to the sheet, a green edge on top). Two to five tabs over the text or list they switch.\n- `.ds-badge`: a small gel pill, green by default. `.ds-badge--count` (flat pale, a number), `.ds-badge--new` (orange). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, one per table row. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: a link block in the side column (`is-last` on the last): `.ds-sidebar__title` on a pale glass strip, `.ds-sidebar__list` of `.ds-sidebar__item` rows behind small round green bullets (current: `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`.\n- `.ds-pagination`: a row of small glass keys: `.ds-pagination__link`, `is-current` (green gel), `is-disabled`, `.ds-pagination__gap` for an ellipsis.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with green `.ds-breadcrumb__sep` guillemets 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 white `.ds-dialog__body` 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.\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`: a rounded sky band under the sheet: `.ds-footer__columns` of four link groups (`.ds-footer__heading`, `.ds-footer__list`, `.ds-footer__link`) and a `.ds-footer__legal` line over a light hairline.\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-tooltip`: a round `?` hint that opens a pale balloon (`__trigger`, `__text`) on hover or focus, beside a label or title.\n\n## Never\n\n- `row-gap <= 24px`: list rows are divided by a hairline, not by space.\n- `block-gap <= 32px`: sections are at most 32px apart.\n- `content-width <= 940px`: text stays inside the fixed column.\n- `palette-colours <= 44`: aqua, lime, silver greys, orange, amber, red and four pale tints.\n- `font-size <= 36px`: the banner title and the large price are the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 4`: body, heading and control faces, a monospace only for inline code.\n- `line-height <= 1.5`: body text is 12px on about 17px.\n- `underlined-links <= 10%`: links underline on hover only.\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 bar is `--fill-bar`, a pale strip `--fill-bar-alt`, a sky band `--fill-inverse`; a new box is a `.ds-panel` if it explains and a `.ds-sidebar` if it lists links; anything round and pressable is dressed like `.ds-orb` or `.ds-button--arrow`. 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, and make any extra shade with `color-mix()` over existing tokens.\n", "components.css": ":root {\n --size-page: 940px;\n --size-sidebar: 280px;\n --size-nav: 38px;\n --size-search: 150px;\n --size-mark: 24px;\n --size-control: 26px;\n --size-control-large: 38px;\n --size-icon: 16px;\n --size-orb: 56px;\n --size-bubble: 34px;\n --size-window: 350px;\n --size-reflection: 46px;\n --size-date: 44px;\n --size-meter: 8px;\n --size-glow: 8px;\n --size-label: 150px;\n --size-textarea: 76px;\n --size-dialog: 440px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 20px;\n --space-6: 32px;\n}\n\n/* shell: a sky page, a segmented glass bar, one glass sheet, a sky 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-4) 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) 70%, transparent);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-canvas) 88%, 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 overflow: hidden;\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-sidebar);\n width: var(--size-sidebar);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section__title {\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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: one rounded glass bar cut into equal segments, the search at its right end */\n.ds-nav { margin: 0 0 var(--space-4); }\n.ds-nav__bar {\n display: flex;\n align-items: stretch;\n height: var(--size-nav);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--fill-bar);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n overflow: hidden;\n}\n.ds-nav__bar .ds-brand { padding: 0 var(--space-5) 0 var(--space-4); }\n.ds-nav__links {\n display: flex;\n flex: 1 1 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item { display: flex; flex: 1 1 0; }\n.ds-nav__link {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: center;\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 28%, transparent);\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 text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { background: color-mix(in srgb, var(--color-bar-text) 16%, 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(#tour:target) .ds-nav__link[href=\"#tour\"],\n.ds-page:has(#editions:target) .ds-nav__link[href=\"#editions\"],\n.ds-page:has(#download:target) .ds-nav__link[href=\"#download\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n background: color-mix(in srgb, var(--color-shadow) 38%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__search {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n margin: 0;\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 28%, transparent);\n}\n.ds-nav__input {\n width: var(--size-search);\n height: calc(var(--size-control) - var(--space-2));\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 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-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\n/* hero: a sky with hills and bubbles, the claim on the left, a glass window and its reflection on the right */\n.ds-hero {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-6) var(--space-6) calc(var(--space-6) + var(--space-5));\n background: radial-gradient(ellipse 60% 34% at 22% 112%, color-mix(in srgb, var(--color-accent) 92%, transparent) 0, color-mix(in srgb, var(--color-accent) 70%, transparent) 96%, transparent 100%), radial-gradient(ellipse 70% 30% at 82% 116%, color-mix(in srgb, var(--color-accent) 70%, transparent) 0, color-mix(in srgb, var(--color-accent) 45%, transparent) 96%, transparent 100%), var(--fill-inverse);\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-3);\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 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__note {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n opacity: 0.85;\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) 55%, transparent);\n border-radius: 50%;\n background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--color-inverse-text) 85%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 12%, transparent) 24%, transparent 58%, color-mix(in srgb, var(--color-inverse-text) 32%, transparent) 100%);\n}\n.ds-hero__bubble--1 { top: 3%; left: 57%; }\n.ds-hero__bubble--2 {\n top: 76%;\n left: 54%;\n width: calc(var(--size-bubble) * 0.6);\n height: calc(var(--size-bubble) * 0.6);\n}\n.ds-hero__bubble--3 {\n top: 6%;\n left: 92%;\n width: calc(var(--size-bubble) * 1.6);\n height: calc(var(--size-bubble) * 1.6);\n}\n.ds-hero__bubble--4 {\n top: 4%;\n left: 1%;\n width: calc(var(--size-bubble) * 0.45);\n height: calc(var(--size-bubble) * 0.45);\n}\n.ds-hero__product {\n position: relative;\n flex: 0 0 var(--size-window);\n width: var(--size-window);\n}\n.ds-hero__window {\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 70%, transparent);\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-dialog);\n color: var(--color-text);\n overflow: hidden;\n}\n.ds-hero__window-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-3) 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-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-hero__rows {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-4);\n list-style: none;\n}\n.ds-hero__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-hero__row.is-first { border-top: 0; }\n.ds-hero__row-name { flex: 0 0 34%; }\n.ds-hero__row-state {\n flex: 0 0 22%;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: right;\n}\n.ds-meter {\n display: block;\n flex: 1 1 0;\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: 72%; }\n.ds-meter__bar--some { width: 38%; }\n.ds-hero__reflection {\n display: block;\n height: var(--size-reflection);\n margin: var(--space-1) 0 0;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 70%, transparent);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n opacity: 0.4;\n transform: scaleY(-1);\n -webkit-mask-image: linear-gradient(to bottom, transparent 0, currentColor 100%);\n mask-image: linear-gradient(to bottom, transparent 0, currentColor 100%);\n}\n\n/* page header: head of an inner page on the sheet, 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 font-size: var(--text-h3);\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/* stats: a pale glass strip under the hero, figures divided by hairlines */\n.ds-stats {\n display: flex;\n margin: 0;\n padding: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n list-style: none;\n}\n.ds-stats--boxed {\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 overflow: hidden;\n}\n.ds-stat {\n display: flex;\n flex: 1 1 0;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: center;\n gap: 0 var(--space-3);\n min-width: 0;\n padding: var(--space-4) var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat.is-first { border-left: 0; }\n.ds-stat__number {\n white-space: nowrap;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label { font-size: var(--text-small); }\n\n/* grid: four feature cells, each under a glossy orb */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0 0 var(--space-6);\n}\n.ds-grid__cell {\n padding: var(--space-5) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-grid__cell--1 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%); }\n.ds-grid__cell--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-grid__cell--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-grid__cell--4 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-4) 100%); }\n.ds-orb {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-orb);\n height: var(--size-orb);\n margin: 0 auto 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: 50%;\n background: var(--fill-button);\n box-shadow: var(--shadow-control), 0 var(--space-2) var(--space-3) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n color: var(--color-button-text);\n}\n.ds-orb::before {\n content: \"\";\n position: absolute;\n top: 4%;\n left: 14%;\n width: 72%;\n height: 46%;\n border-radius: 50%;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-text) 75%, transparent) 0, color-mix(in srgb, var(--color-button-text) 8%, transparent) 100%);\n}\n.ds-orb svg {\n position: relative;\n display: block;\n width: 46%;\n height: 46%;\n}\n.ds-orb--bar {\n border-color: color-mix(in srgb, var(--color-bar) 68%, 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) 68%, var(--color-shadow));\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-orb--alt {\n border-color: color-mix(in srgb, var(--color-accent-alt) 68%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 30%) 0, var(--color-accent-alt) 100%);\n}\n.ds-grid__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-grid__text { margin: 0 0 var(--space-3); }\n.ds-grid__more { margin: 0; font-size: var(--text-small); }\n\n/* tabs: glass tabs on a hairline; the current one joins the sheet under a coloured edge */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(0px - var(--border-width));\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel) var(--radius-panel) 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 line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\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-top-color: var(--color-accent);\n border-bottom-color: var(--color-surface);\n background: var(--color-surface);\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/* list: news items beside a small glass date tile */\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-4);\n padding: var(--space-4) 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__date {\n display: flex;\n flex: 0 0 var(--size-date);\n flex-direction: column;\n align-items: center;\n width: var(--size-date);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n line-height: var(--line-heading);\n overflow: hidden;\n}\n.ds-list__month {\n width: 100%;\n padding: var(--space-1) 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-list__day {\n padding: var(--space-1) 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}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0 0 var(--space-1);\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}\n.ds-list__text { margin: 0 0 var(--space-1); }\n.ds-list__meta {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a white glass box, green title over a hairline */\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 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-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-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__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; }\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 link block under a pale glass strip, round green bullets */\n.ds-sidebar {\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(--color-surface);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) 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-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n}\n.ds-sidebar__item::before {\n content: \"\";\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n border-radius: 50%;\n background: var(--fill-accent);\n}\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* steps: the three numbered orbs of the download page */\n.ds-steps {\n display: flex;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-steps__step {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-steps__number {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\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 font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-steps__step.is-current { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-steps__step.is-current .ds-steps__number {\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}\n\n/* footer: a rounded sky band under the sheet */\n.ds-footer {\n margin: var(--space-5) 0 0;\n padding: var(--space-5) var(--space-5) var(--space-4);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-5);\n margin: 0 0 var(--space-4);\n}\n.ds-footer__heading {\n margin: 0 0 var(--space-2);\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}\n.ds-footer__list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__link {\n color: var(--color-inverse-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.ds-footer__legal {\n margin: 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 35%, transparent);\n font-size: var(--text-small);\n}\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: 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 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__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-small) * 0.9);\n height: calc(var(--text-small) * 0.9);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) calc(50% - var(--space-3) / 8), 100% calc(50% - var(--space-3) / 8), 100% calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) calc(50% + var(--space-3) / 8), 0 calc(50% + var(--space-3) / 8), 0 calc(50% - var(--space-3) / 8), calc(50% - var(--space-3) / 8) calc(50% - var(--space-3) / 8));\n rotate: 45deg;\n vertical-align: middle;\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\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__note { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); }\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-tooltip { position: relative; display: inline-block; vertical-align: middle; }\n.ds-tooltip__trigger {\n display: inline-block;\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) 68%, var(--color-shadow));\n border-radius: var(--radius-pill);\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-small);\n font-weight: var(--weight-bold);\n cursor: help;\n text-transform: none;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__text {\n display: none;\n position: absolute;\n top: calc(100% + var(--space-1));\n left: 0;\n z-index: 20;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: var(--shadow-panel);\n color: var(--color-notice-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n text-transform: none;\n text-shadow: none;\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text { display: block; }\n", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero product page specimen\n\n\n\n\n
\n\n
\n
\n chronoskin\n \n
\n \n
\n
\n
\n\n
\n\n
\n\n
\n \n \n \n \n
\n

Everything you own, in step everywhere

\n

chronoskin Sync 3 keeps your photos, music and calendar the same on every computer and phone in the house, quietly, while you get on with the day.

\n

\n Download free \n Take the tour\n

\n

Version 3.2, 14 MB. Free for two devices, no account needed to try it.

\n
\n
\n
\n

Sync statusAll in step

\n
    \n
  • Summer photos1,204 items
    • \n
  • Music library72%
    • \n
  • Family calendarUp to date
    • \n
  • Kitchen laptop38%
    • \n
\n
\n \n
\n
\n\n
    \n
  • 2.4 milliondownloads this year
    • \n
  • 31languages
    • \n
  • 14 MBto download
    • \n
  • 4.5 / 5from 8,120 reviews
    • \n
\n\n
\n\n
\n
\n \n

Sync

\n

Change a file on one machine and it is there on the others in under a minute.

\n

See how it works

\n
\n
\n \n

Share

\n

Send an album to the family with one click. They need nothing installed.

\n

Sharing albums

\n
\n
\n \n

Protect

\n

Every version of every file is kept for thirty days, so nothing is lost for good.

\n

About backups

\n
\n
\n \n

Take it along

\n

Your phone carries the same library, sized down to fit its memory card.

\n

Supported phones

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

What is new

\n \n
\n \n
\n\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Tour
    4. \n
  4. »
    5. \n
  5. Sync
    6. \n
\n
\n
\n

Take the tour

\n

Three things chronoskin Sync does, and how each one works.

\n
\n
Download free
\n
\n
\n
\n \n
\n

One library on every screen

\n

Pick the folders that matter and chronoskin Sync watches them. When a file changes on one computer, only the part that changed travels to the others, so a long video you trimmed by ten seconds does not upload again from the start.

\n

How a sync happens

\n

The program sits beside the clock and wakes when a watched folder changes. It compares what is there with what the other devices hold, then sends the difference.

\n
    \n
  1. Choose the folders in Settings, or drag one onto the status window.
    2. \n
  2. Sign in on the second computer with the same name.
    3. \n
  3. Leave both switched on for the first pass. After that it takes seconds.
    4. \n
\n

When two people change the same file

\n

Both versions are kept. The later one takes the name and the earlier one is saved beside it with the date added, for example budget (kitchen laptop, 18 March).xls. Nothing is merged or thrown away without asking.

\n

What is never synced

\n
    \n
  • Temporary files and anything larger than the free space on the other device
    • \n
  • Folders you marked as local only
    • \n
\n
\n
\n

Read next

\n

\n Sharing an album\n How backups are kept\n Which edition fits\n Download and install\n

\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Editions
    4. \n
\n
\n
\n

Choose an edition

\n

The same program in four sizes. You can move up at any time and keep your library.

\n
\n
Ask before you buy
\n
\n \n \n \n \n \n \n \n \n \n \n \n
EditionMade forDevicesStoragePrice a yearAvailability
FreeTrying it out on a desktop and a laptop22 GB0.00AvailableDownload
HomeOne person with a phone and two computers325 GB29.00AvailableChoose
Family NewA household with a shared calendar8100 GB59.00From 1 AprilChoose
StudioPhotographers and small offices20500 GB149.00AvailableChoose
Classic 2The earlier version, for older computers21 GB19.00Withdrawn
\n
\n

What the labels mean

\n

\n Included\n 3 devices\n New\n Available\n From 1 April\n Withdrawn\n

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

Every paid edition includes

\n
\n

Thirty days of file versions, shared albums without limits, help by mail within one working day, and every update to version 3 as it appears. Prices are for one year and include tax.

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

Before you choose

\n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Download
    4. \n
\n
\n
\n

Download chronoskin Sync 3.2

\n

Tell us where to send the licence, then save the installer.

\n
\n
Compare editions
\n
\n
    \n
  1. 1Choose an edition
    2. \n
  2. 2Your details
    3. \n
  3. 3Save and install
    4. \n
\n
\n
\n
\n
i

The Family edition opens on 1 April. Order it today and the licence arrives that morning.

\n
!

One field needs another look. The mail address is missing its ending.

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

This address has no ending such as .example. Please check it.

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

You can move to a larger edition later and keep your library.

\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n News\n
\n
\n
\n \n Back\n \n \n
\n
\n
\n \n
\n
\n
\n

Cancel this order?

\n
\n

Your details will be cleared and no licence will be sent. The free edition stays available whenever you want it.

\n
\n
\n Cancel the order\n Keep going\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Help
    4. \n
\n
\n
\n

Help and how-to

\n

Answers written by the people who make chronoskin Sync.

\n
\n
Ask a question
\n
\n
    \n
  • 214articles
    • \n
  • 1 dayusual reply by mail
    • \n
  • 96%answered first time
    • \n
\n
\n
\n \n
    \n
  • \n
    \n

    Install on your first computer

    \n

    From the download to the first finished sync, with pictures of every window.

    \n

    Updated 18 March, read 41,200 times

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

    Add a second computer

    \n

    Sign in with the same name and choose which folders this machine should hold.

    \n

    Updated 2 March, read 28,950 times

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

    Moving to a new computer in four steps

    \n

    What to do before the old machine is switched off for the last time.

    \n

    Updated 27 January, read 19,400 times

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

    Bring back a deleted photo

    \n

    Deleted files wait thirty days in the versions drawer before they go.

    \n

    Updated 9 January, read 15,070 times

    \n
    \n
    • \n
\n
    \n
  • Previous
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
  • ...
    • \n
  • 9
    • \n
  • Next
    • \n
\n
\n

Common questions

\n
\n
Can I use it on two computers?

Yes. The free edition covers two devices and 2 GB of files.

\n
Where do my files go?

They stay on your own computers. Sync only keeps the copies the same.

\n
How do I get my licence back?

Open Download and choose Resend my licence. It arrives by mail within a minute.

\n
\n
\n
\n \n
\n
\n
\n\n
\n\n\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.landing.s01.p03.t05.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-1353\",\n \"short\": \"v1-fa-1353\"\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: \"Trebuchet MS\", \"Lucida Sans Unicode\", \"DejaVu Sans\", sans-serif;\n --font-heading: \"Century Gothic\", \"URW Gothic\", Futura, \"Trebuchet MS\", sans-serif;\n --font-ui: Arial, Helvetica, \"Liberation Sans\", sans-serif;\n --font-mono: \"Lucida Console\", Monaco, monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 14px;\n --text-display: 36px;\n --text-h1: 24px;\n --text-h2: 18px;\n --text-h3: 13px;\n --line-body: 1.4;\n --line-heading: 1.15;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 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" } }