{ "id": "v1-fa-4282", "long_id": "v1.frutiger-aero.app.s04.p02.t08.u02", "name": "Frutiger Aero media gallery", "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": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A fixed-width media gallery in the glossy black and pearl variety of the Frutiger Aero look: the whole site is one player window on a pale page, with a dark glass title bar, a black stage where album covers stand on their own reflections, and a control strip with round transport keys to close it. Galleries, players and media centres of this kind were common from about 2005 to 2010, when photos, music and films first shared one library on the home computer. Dark glass with an arched highlight is kept for bars and keys, the working area is opaque white and pale grey, controls are capsules, one green lights whatever is current, and the type is a neutral grotesque with large light headings.", "url": "https://chrono.skin/s/v1-fa-4282", "preview_url": "https://chrono.skin/s/v1-fa-4282/specimen.html", "files": { "STYLE.md": "# Frutiger Aero media gallery\n\n## Summary\n\nA fixed-width media gallery in the glossy black and pearl variety of the Frutiger Aero look: the whole site is one player window on a pale page, with a dark glass title bar, a black stage where album covers stand on their own reflections, and a control strip with round transport keys to close it. Galleries, players and media centres of this kind were common from about 2005 to 2010, when photos, music and films first shared one library on the home computer. Dark glass with an arched highlight is kept for bars and keys, the working area is opaque white and pale grey, controls are capsules, one green lights whatever is current, and the type is a neutral grotesque with large light 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- Everything sits in `.ds-page__wrap` (960px) inside `.ds-page__player`, one window with `--radius-page` corners: the title bar (`.ds-nav`, `--size-nav` 44px), then the showing view, then the control strip (`.ds-footer`). Under the window `.ds-page__floor` mirrors the strip and fades out: the window stands on a reflecting floor.\n- The home page fills the window edge to edge with the stage (`.ds-hero`) and the readout strip (`.ds-stats`); the rest sits in `.ds-page__body` (18px padding, 30px at the bottom): the row of four album cells, then two columns.\n- Columns in `.ds-page__columns`, `--space-5` (18px) apart: `.ds-page__main` beside a right column `.ds-page__aside` of `--size-side` (300px) for panels, or beside a left source list `.ds-page__source` of `--size-source` (190px) on the library page. Never three columns.\n- Spacing scale: `--space-1` 2px (hairline gaps, the lamp under the current link), `--space-2` 5px (inside controls, table cell padding), `--space-3` 8px (gaps between buttons, row padding, panel title padding), `--space-4` 12px (panel padding, gaps between cells and thumbnails), `--space-5` 18px (gutter, body padding, gap between stacked blocks), `--space-6` 30px (stage padding, gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 24px tall, large keys `--size-control-large` 34px, shelf covers `--size-tile` 124px (the current one 1.22 times that), list pictures `--size-thumb` 38px, the now-playing cover `--size-cover` 64px, form labels `--size-label` 170px, the dialog `--size-dialog` 430px.\n- Inner pages drop the stage and the readout strip. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the full width, then the columns. `.ds-tabs` sit at the top of the main column directly above the table or form they switch; notices sit between the tabs and the form; a dialog follows the columns across the full width on its dimmed strip. Further blocks are `.ds-section` blocks 30px apart with a `.ds-section__title`.\n- Views: the specimen is one gallery of four screens, each a `.ds-view` inside the window, with the title bar and the control strip written once around them. `home` is the gallery front (stage with the shelf, readout, albums, recently added, now playing). `library` lists everything (source list, tabs, table with status badges, pagination and the key to the badges, an empty playlist). `album` shows one album (thumbnails, the text about it, onward links, details and comments at the side). `settings` is the settings form (tabs, notices, the form with its buttons, disk space, screens, the dialog that empties the library). Links are plain `href=\"#name\"`; the title bar link of the showing view is pressed in over a green lamp by a `.ds-page:has(#name:target)` rule, the Home link also when no view is named.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Three families and a monospace: `--font-body` is Arial, `--font-heading` Georgia, `--font-ui` Verdana, all system faces of the period; `--font-mono` (Courier New) only for a file name in running text.\n- `--text-base` 13px at `--line-body` 1.5. `--text-small` 11px for meta lines, hints, captions and the footer. `--text-ui` 11px bold Verdana (`--weight-ui` 700) for keys, buttons, tabs and form labels.\n- Headings are regular-weight Georgia: `--text-display` 38px hero title, tightened by `--display-tracking` -0.5px; `--text-h1` 27px page titles, figures and the brand name; `--text-h2` 20px card titles and entry titles; `--text-h3` 15px panel, album, dialog and empty-state titles. `--text-large` 15px hero lead and the large button. Nothing is uppercased.\n- Links in running text and plain lists are underlined (`--link-decoration` underline); titles (`.ds-link--title`, bold), quiet links, keys and tabs are not.\n- `--color-page` #5aa51c with `--fill-page`: grass green, lit from the top, with two slanted sunbeams, paler at the foot.\n- `--color-bar` #3f7d12 with `--fill-bar` (satin: a bright line at the top, light to dark without a break) and white `--color-bar-text` under `--shadow-text`: the name plate.\n- `--color-bar-alt` #d6e9a6 with `--fill-bar-alt`: the figures card, table heads, the dialog's title strip.\n- `--color-inverse` #1c6fb0 with `--fill-inverse` (sky blue, darker at the foot, the same sunbeams): the hero and the footer card, white text.\n- `--color-heading` #2f6b0a card and page titles; `--color-heading-alt` #1d74b8 (sky) panel and link-card titles, prose h2, breadcrumb marks. `--color-text` #33382b, `--color-text-muted` #687058.\n- `--color-link` #1b6fb5, `--color-link-quiet` #55703a, visited #7a5a9a, hover #e0561a, active #2f6b0a.\n- `--color-button` #1e88d2 with `--fill-button` (sky glass): the primary button, the brand gel, the current key and page number. `--color-button-secondary` #e3ead3 with `--fill-button-secondary`: every other key and button, comment tiles.\n- `--color-accent` #f26a2e (poppy) with `--fill-accent`: labels and the stroke under the current tab. `--color-accent-alt` #9a52c4: the New marker and the dusk sky of the town picture.\n- `--color-fill-1` to `--color-fill-4` (lime, sky, sun, petal): the lower end of each album cell's fade and the skies and sands of the pictures; never text or borders.\n- Pictures are drawn from the palette: `--color-inverse` sky and sea, `--color-success` hills, `--color-warning` sun, `--color-text-muted` rock, `--color-shadow` roofs. They stand in for the project's own photographs.\n- Borders are 1px solid, 3px (`--border-width-strong`) for the dialog's rim, the stroke at the left of a notice and under the current tab. `--color-border` #c4dc9a, `--color-border-muted` #e2edc9 inside a card, `--color-border-strong` #5c9a2a for the dialog and (at 60%) the cards.\n- `--color-notice` #e3f1fb for notices; `--color-danger` #b81d2a on `--color-danger-surface` #fbe7e6 for errors; `--color-success` #2e8b3d and `--color-warning` #e8a200 fill the status labels.\n- Surface: `--radius-control` 2px, `--radius-panel` 3px, `--radius-pill` 2px, `--radius-page` 4px. `--shadow-panel` is a white inner rim and a short contact shadow under the card; `--shadow-dialog` the deeper one under prints and the dialog; a hovered key gains a rim and glow in `--color-focus`. `--fill-panel` is opaque and `--backdrop-blur` 0px: nothing is frosted. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glass fills (the fill's colour mixed with `--color-shadow`), the cards (92% `--color-canvas`), the notice border, roofs and rock in the pictures, gloss on danger, success and warning fills (mixed with `--color-button-text`). Prints and the blank print of the empty state are turned by a few degrees with `transform`.\n- The era's conventions for which text sits on which fill are kept: body, heading and link colours on canvas, surfaces, `--fill-panel` and the four tints; `--color-bar-text` only on `--fill-bar`, `--color-bar-alt-text` only on `--fill-bar-alt`, `--color-inverse-text` only on `--fill-inverse`; `--color-button-text` on `--fill-button` and on fills made from `--color-danger`, `--color-success` or `--color-accent-alt`; `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-button-secondary-text` on `--fill-button-secondary`; `--color-notice-text` on `--color-notice`. No text is set directly on the page.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, base font and colour. `.ds-page__wrap` is the 960px column; `.ds-page__player` the window; `.ds-page__floor` its reflection; `.ds-page__body` the padded content area of a view; `.ds-page__columns` holds `.ds-page__main` with `.ds-page__aside` or `.ds-page__source`. `.ds-section` (last: `is-last`) with a `.ds-section__title` (16px, an optional small `.ds-section__more` link at its right end) separates blocks by 30px. `.ds-view` is one screen of the example site (`.ds-view--home` the first).\n- `.ds-nav`: the window's title bar: the `.ds-brand`, then `.ds-nav__links` of `.ds-nav__item` segments, each a `.ds-nav__link` divided from the next by a light hairline (current: `is-current`, pressed in over a 2px lamp in `--color-accent`; hover: `is-hover`), then `.ds-nav__search` at the right end with a capsule `.ds-nav__input`. Five links at most.\n- `.ds-brand`: the site's mark and name at the left end of the title bar, linking home; one per page. `.ds-brand__mark` is a tile dressed like the primary button (`--fill-button`, a darker outline, `--radius-control`, `--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 stage, on the home page only: `--fill-inverse` with a bright floor line. `.ds-hero__main` holds a small `.ds-hero__kicker` behind a glowing `.ds-hero__lamp`, `.ds-hero__title` (34px light), `.ds-hero__lead` (14px) and `.ds-hero__action` (a `.ds-button--large` and a secondary one). `.ds-shelf` on the right is a list of three or four `.ds-shelf__tile` links, each a mirrored `.ds-art` cover; the one that is showing is `is-current` (larger, a white frame, `--shadow-dialog`).\n- `.ds-art`: a square picture drawn from the palette, used wherever a cover or a photo stands: `.ds-art--1` hills, `--2` sun on the sea, `--3` a record, `--4` a film still, `--5` a peak, `--6` blossoms. `.ds-art--wide` is 4 to 3; `.ds-art--mirror` adds the fading mirror image under it (leave 46% of its height free below). An installing project replaces the motif classes with its own pictures and keeps the frame, the sheen and the mirror.\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (`--text-h1`, the page's h1) and one grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right with one or two buttons or a status badge; a hairline under the whole. One per inner page, directly under the breadcrumb.\n- `.ds-stat`: one figure; four or five sit in a `.ds-stats` row, the silver readout strip across the window directly under the stage, divided by hairlines (first: `is-first`). Each is an 11px `.ds-stat__label` over a 24px light `.ds-stat__number`. On an inner page the row takes `.ds-stats--boxed`.\n- `.ds-grid`: a row of four album cells 12px apart. `.ds-grid__cell` (`--1` to `--4` choose the tint it fades from) holds a `.ds-grid__cover` link with a mirrored `.ds-art`, a bold `.ds-grid__title` and a grey `.ds-grid__text` line, all centred.\n- `.ds-thumbs`: the pictures of one album, four to a row: `.ds-thumbs__item` (the one that is showing: `is-current`) with a `.ds-art--wide` and a `.ds-thumbs__name`.\n- `.ds-prose`: long text: h1, h2 (in `--color-heading-alt`), h3 (bold), p, ul, ol, code, strong and links inside it are styled.\n- `.ds-link`: any link on the sheet. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` is bold, for titles; `.ds-link--quiet` for minor links and tools. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: a glossy key in `--fill-button`, bold `--text-ui`, `--size-control` tall, `--radius-control` corners; may start with a `.ds-button__icon`. Variants: `.ds-button--secondary` (the usual button, `--fill-button-secondary`), `.ds-button--danger` (red gel, only for an action that removes or cancels), `.ds-button--large` (`--size-control-large`, the hero and the main action of a panel), `.ds-button--round` (a circle holding only an icon). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row. One primary button per form, panel or dialog.\n- `.ds-form`: settings rows: `.ds-form__row` (first: `is-first`) with a bold `.ds-form__label` at the left (170px) 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`; rows are divided by hairlines; `.ds-form__actions` holds the buttons under a rule.\n- `.ds-table`: the library table in a rounded 1px border: `.ds-table__head` cells form a silver strip divided by hairlines (first: `is-first`); `.ds-table__row` with `is-alt` on alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns; `.ds-table__cell--thumb` holds a small `.ds-art`; `.ds-table__note` is a second grey line in a cell. `.ds-table__foot` under it holds the pagination at the left and the key to the badges at the right.\n- `.ds-list`: recently added items. Each `.ds-list__item` (first: `is-first`) is a `.ds-list__thumb` picture, a `.ds-list__body` with a bold `.ds-list__title` and a grey `.ds-list__meta` line, a `.ds-list__length` and a round play key. Rows are divided by hairlines, never boxed.\n- `.ds-panel`: a box in the side column (`is-last` on the last block of a column): a bold `.ds-panel__title` on a grey strip (`--color-surface-strong`), `.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`. `.ds-now` inside a panel is what is playing: `.ds-now__cover`, `.ds-now__title`, `.ds-now__meta`, a meter and `.ds-now__time`.\n- `.ds-tabs`: one segmented capsule: `.ds-tabs__item` holding a `.ds-tabs__tab`, the current one `is-current` (dark glass, pressed in). Two to five segments over the table or form they switch.\n- `.ds-badge`: a small glossy label in `--fill-accent` with `--radius-pill` corners. `.ds-badge--count` (flat, a number), `.ds-badge--new` (in `--color-accent-alt`). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, one per row or tile. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: a source list in the left column (`is-last` on the last): a green `.ds-sidebar__title`, a `.ds-sidebar__list` of `.ds-sidebar__item` rows with a right-aligned `.ds-sidebar__count`; the current source (`is-current`) lies on a silver capsule.\n- `.ds-notice`: a rounded one-line message with a round `.ds-notice__sign`, `.ds-notice__text` and a bold `.ds-notice__title`. Variant `.ds-notice--error`. Notices sit directly above the form or list they report on.\n- `.ds-pagination`: a row of small glossy keys: `.ds-pagination__link`, `is-current` (in `--fill-button`), `is-disabled`, `.ds-pagination__gap` for an ellipsis. It shares the `.ds-table__foot` row under a table or grid with the key to the badges.\n- `.ds-breadcrumb`: `--text-small` trail of `.ds-link` items with `.ds-breadcrumb__sep` marks in `--color-heading-alt` and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small window: `.ds-dialog__title` on dark glass (with a round `.ds-dialog__close`), a white `.ds-dialog__body` with `.ds-dialog__text`, and a pale `.ds-dialog__actions` strip with the buttons at the right. It casts `--shadow-dialog` and sits on `.ds-dialog__backdrop`, a dimmed rounded strip in the page flow.\n- `.ds-empty`: a pale well with a round glass `.ds-empty__orb` icon, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-meter`: a small progress bar; `.ds-meter__bar` with `--full`, `--most`, `--half` or `--some`; `.ds-meter--spaced` when a list follows.\n- `.ds-footer`: the control strip that closes the window, in `--fill-bar`: `.ds-footer__controls` (round previous, play and next keys, the play key large), a `.ds-footer__list` of `.ds-footer__link` items and the `.ds-footer__legal` line at the right.\n- `.ds-menu`: a glass drop-down under a navigation item (`.ds-menu__list` of `.ds-menu__link`), opened on hover or focus, never forced open.\n- `.ds-progress`: the glossy accent progress bar, a native `` in a `.ds-progress__row` with label and value; for downloads, installs and storage.\n- `.ds-carousel`: a picture viewer with previous and next orbs and dots (`.ds-carousel__stage`, `__track`, `__slide`, `__dots`); static, dots are not links.\n\n## Never\n\n- `row-gap <= 24px`: rows are divided by a hairline, not by space.\n- `block-gap <= 30px`: sections are at most 30px apart.\n- `content-width <= 960px`: text stays inside the window.\n- `palette-colours <= 46`: night blues, cyan, violet, a green, amber, red and greys.\n- `font-size <= 38px`: the hero title is the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight; headings are regular.\n- `font-families <= 4`: body, heading and control faces, a monospace only for a file name.\n- `line-height <= 1.5`: body text is 13px on about 20px.\n- `underlined-links <= 45%`: only links in running text, plain lists and the footer are underlined; titles, keys and tabs are not.\n- `letter-spacing <= 0.5px`: only the hero title is tightened, by half a pixel; nothing is spaced out.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 16px`: corners are 10, 13 or 16px; only orbs, bullets and pills are rounder.\n- `border-width <= 2px`: hairlines everywhere, 2px only around the dialog.\n- `box-shadow-blur <= 40px`: glows and drops are soft, the dialog's 40px is the deepest.\n- `gradient-fills <= 28%`: gloss belongs to bars, gadget heads, buttons, orbs, 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 dark band `--fill-inverse`; anything round and pressable is dressed like `.ds-button--round`. Keep to the conventions above for which text token sits on which fill, give glossy fills an outline mixed from their colour and `--color-shadow`, take highlights from the surface tokens instead of drawing new ones, put a `--fill-*` token last in a layered background, and make any extra shade with `color-mix()` over existing tokens. A new picture slot takes a `.ds-art` frame; a new list of sources is a `.ds-sidebar`; a new readout is a `.ds-stat`.\n", "components.css": ":root {\n --size-page: 960px;\n --size-side: 300px;\n --size-source: 190px;\n --size-nav: 44px;\n --size-search: 150px;\n --size-mark: 26px;\n --size-tile: 124px;\n --size-thumb: 38px;\n --size-cover: 64px;\n --size-control: 24px;\n --size-control-large: 34px;\n --size-icon: 16px;\n --size-meter: 7px;\n --size-glow: 6px;\n --size-label: 170px;\n --size-textarea: 72px;\n --size-dialog: 430px;\n --space-1: 2px;\n --space-2: 5px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 18px;\n --space-6: 30px;\n}\n\n/* shell: the whole site is one player window standing on a reflecting floor */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 var(--space-5);\n}\n.ds-page__player {\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 85%, transparent);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-canvas) 94%, 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__floor {\n display: block;\n height: calc(var(--space-6) * 2);\n margin: var(--space-1) 0 0;\n border-radius: var(--radius-page);\n background: var(--fill-bar);\n opacity: 0.28;\n transform: scaleY(-1);\n -webkit-mask-image: linear-gradient(to bottom, transparent 25%, currentColor 100%);\n mask-image: linear-gradient(to bottom, transparent 25%, currentColor 100%);\n}\n.ds-page__body { padding: var(--space-5) var(--space-5) var(--space-6); }\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__aside {\n flex: 0 0 var(--size-side);\n width: var(--size-side);\n}\n.ds-page__source {\n flex: 0 0 var(--size-source);\n width: var(--size-source);\n}\n.ds-section { margin: 0 0 var(--space-6); }\n.ds-section.is-last { margin-bottom: 0; }\n.ds-section__title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-section__more {\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* nav: the window's title bar; the showing view is pressed in over a lamp */\n.ds-nav {\n display: flex;\n align-items: stretch;\n height: var(--size-nav);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav .ds-brand { padding: 0 var(--space-5); }\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; }\n.ds-nav__link {\n display: flex;\n align-items: center;\n padding: 0 var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 16%, 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 white-space: nowrap;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { background: color-mix(in srgb, var(--color-bar-text) 14%, 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(#library:target) .ds-nav__link[href=\"#library\"],\n.ds-page:has(#album:target) .ds-nav__link[href=\"#album\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n background: color-mix(in srgb, var(--color-shadow) 42%, transparent);\n box-shadow: var(--shadow-control-pressed), inset 0 calc(0px - var(--space-1)) 0 var(--color-accent);\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) 16%, transparent);\n}\n.ds-nav__input {\n width: var(--size-search);\n height: calc(var(--size-control) - var(--space-1));\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 45%, 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\n/* brand: the mark on a glossy tile dressed like the primary button, the name on the title 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) 66%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 66%;\n height: 66%;\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 text-shadow: var(--shadow-text);\n}\n\n/* art: a picture drawn from the palette; six motifs, a sheen, and for covers a mirror image under them */\n.ds-art {\n position: relative;\n display: block;\n width: 100%;\n aspect-ratio: 1;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 45%, transparent);\n border-radius: var(--radius-pill);\n background: linear-gradient(to bottom, var(--color-bar) 0, var(--color-bar-alt) 100%);\n}\n.ds-art::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background: linear-gradient(125deg, color-mix(in srgb, var(--color-button-text) 34%, transparent) 0, color-mix(in srgb, var(--color-button-text) 6%, transparent) 42%, transparent 42.5%);\n}\n.ds-art--wide { aspect-ratio: 4 / 3; }\n.ds-art--mirror::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: var(--space-1);\n border-radius: inherit;\n background: inherit;\n opacity: 0.38;\n transform: scaleY(-1);\n -webkit-mask-image: linear-gradient(to bottom, transparent 58%, currentColor 100%);\n mask-image: linear-gradient(to bottom, transparent 58%, currentColor 100%);\n pointer-events: none;\n}\n.ds-art--1 { background: radial-gradient(circle at 74% 28%, var(--color-button-text) 0, var(--color-button-text) 7%, color-mix(in srgb, var(--color-button-text) 30%, transparent) 8%, transparent 20%), radial-gradient(ellipse 75% 42% at 22% 108%, var(--color-accent) 0, color-mix(in srgb, var(--color-accent), var(--color-shadow) 25%) 99%, transparent 100%), radial-gradient(ellipse 80% 40% at 88% 112%, color-mix(in srgb, var(--color-accent), var(--color-shadow) 40%) 0, color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%) 99%, transparent 100%), linear-gradient(to bottom, var(--color-bar) 0, var(--color-bar-alt) 100%); }\n.ds-art--2 { background: linear-gradient(to bottom, transparent 0, transparent 58%, color-mix(in srgb, var(--color-inverse), var(--color-accent-alt) 30%) 58%, var(--color-inverse) 100%), radial-gradient(circle at 50% 58%, var(--color-button-text) 0, var(--color-button-text) 11%, color-mix(in srgb, var(--color-button-text) 35%, transparent) 12%, transparent 30%), linear-gradient(to bottom, var(--color-accent-alt) 0, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 62%) 58%, var(--color-inverse) 58%); }\n.ds-art--3 { background: radial-gradient(circle closest-side at 50% 50%, var(--color-button-text) 0, var(--color-button-text) 5%, var(--color-accent) 6%, var(--color-accent) 26%, var(--color-inverse) 27%, color-mix(in srgb, var(--color-inverse), var(--color-inverse-text) 26%) 56%, var(--color-inverse) 86%, transparent 88%), linear-gradient(135deg, var(--color-fill-2) 0, var(--color-surface-strong) 100%); }\n.ds-art--4 { background: linear-gradient(to bottom, var(--color-inverse) 0, var(--color-inverse) 14%, transparent 14%, transparent 86%, var(--color-inverse) 86%), linear-gradient(120deg, color-mix(in srgb, var(--color-button), var(--color-shadow) 60%) 0, var(--color-button) 62%, color-mix(in srgb, var(--color-button), var(--color-button-text) 55%) 100%); }\n.ds-art--5 { background: linear-gradient(to top left, color-mix(in srgb, var(--color-bar), var(--color-button-text) 14%) 0, color-mix(in srgb, var(--color-bar), var(--color-button-text) 30%) 49.6%, transparent 50%) 0 100% / 56% 64% no-repeat, linear-gradient(to top right, color-mix(in srgb, var(--color-bar), var(--color-shadow) 30%) 0, var(--color-bar) 49.6%, transparent 50%) 100% 100% / 44% 64% no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 30%) 0, var(--color-fill-4) 100%); }\n.ds-art--6 { background: radial-gradient(circle at 30% 34%, var(--color-accent-alt) 0, var(--color-accent-alt) 13%, transparent 14%), radial-gradient(circle at 68% 58%, var(--color-accent) 0, var(--color-accent) 18%, transparent 19%), radial-gradient(circle at 38% 78%, var(--color-warning) 0, var(--color-warning) 9%, transparent 10%), linear-gradient(160deg, var(--color-fill-3) 0, var(--color-surface-strong) 100%); }\n\n/* hero: the stage. What is showing on the left, a shelf of covers standing on their reflections on the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-6) var(--space-6) var(--space-5);\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse-text) 45%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 16%, transparent) var(--border-width), transparent 100%) 0 100% / 100% calc(var(--space-5) + var(--size-tile) * 0.46) no-repeat, var(--fill-inverse);\n color: var(--color-inverse-text);\n overflow: hidden;\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__kicker {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__lamp {\n display: block;\n width: var(--space-3);\n height: var(--space-3);\n border-radius: 50%;\n background: var(--fill-accent);\n box-shadow: 0 0 var(--size-glow) var(--color-accent);\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 opacity: 0.85;\n}\n.ds-hero__action {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-shelf {\n display: flex;\n flex: 0 0 auto;\n align-items: flex-end;\n align-self: flex-end;\n gap: var(--space-4);\n margin: 0;\n padding: 0 0 calc(var(--size-tile) * 0.46);\n list-style: none;\n}\n.ds-shelf__tile {\n display: block;\n width: var(--size-tile);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n.ds-shelf__tile .ds-art { border-color: color-mix(in srgb, var(--color-inverse-text) 55%, transparent); }\n.ds-shelf__tile.is-current { width: calc(var(--size-tile) * 1.22); }\n.ds-shelf__tile.is-current .ds-art {\n border: var(--border-width-strong) var(--border-style) var(--color-inverse-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-shelf__tile:hover .ds-art,\n.ds-shelf__tile.is-hover .ds-art { border-color: var(--color-inverse-text); }\n\n/* stats: the readout strip under the stage */\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-direction: column;\n min-width: 0;\n padding: var(--space-3) var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n box-shadow: inset var(--border-width) 0 0 color-mix(in srgb, var(--color-surface) 70%, transparent);\n}\n.ds-stat.is-first { border-left: 0; box-shadow: none; }\n.ds-stat__label { font-size: var(--text-small); opacity: 0.8; }\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\n/* grid: four albums, each cover standing on its mirror image */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0;\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-alt) 0, var(--color-surface) 64%);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-grid__cell--1 { background: linear-gradient(to bottom, var(--color-fill-1) 0, var(--color-surface) 64%); }\n.ds-grid__cell--2 { background: linear-gradient(to bottom, var(--color-fill-2) 0, var(--color-surface) 64%); }\n.ds-grid__cell--3 { background: linear-gradient(to bottom, var(--color-fill-3) 0, var(--color-surface) 64%); }\n.ds-grid__cell--4 { background: linear-gradient(to bottom, var(--color-fill-4) 0, var(--color-surface) 64%); }\n.ds-grid__cover {\n display: block;\n width: 58%;\n margin: 0 auto 26%;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* thumbs: the pictures of one album */\n.ds-thumbs {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-thumbs__item {\n padding: var(--space-2);\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}\n.ds-thumbs__item.is-current { border-color: var(--color-accent); box-shadow: 0 0 var(--size-glow) var(--color-accent); }\n.ds-thumbs__name {\n display: block;\n padding: var(--space-2) var(--space-1) 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* list: recently added items, a small picture, a line of meta, a play key at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { padding-top: 0; border-top: 0; }\n.ds-list__thumb {\n flex: 0 0 var(--size-thumb);\n width: var(--size-thumb);\n}\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-bold);\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.ds-list__length {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n\n/* panel: a box under a title strip */\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-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: color-mix(in srgb, var(--color-surface-strong) 80%, transparent);\n color: var(--color-heading);\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-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__facts.is-last { margin-bottom: 0; }\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 { padding-top: 0; 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 margin: 0;\n}\n.ds-now {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n}\n.ds-now__cover {\n flex: 0 0 var(--size-cover);\n width: var(--size-cover);\n}\n.ds-now__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-now__title {\n margin: 0;\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-now__meta {\n margin: var(--space-1) 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-now__time {\n display: flex;\n justify-content: space-between;\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n\n/* sidebar: the source list of the library, the current source on a glass key */\n.ds-sidebar {\n margin: 0 0 var(--space-4);\n padding: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n}\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-3);\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-body);\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: center;\n gap: var(--space-3);\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n}\n.ds-sidebar__item.is-current {\n border-color: color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__item.is-current .ds-link { color: var(--color-bar-alt-text); }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-sidebar__item.is-current .ds-sidebar__count { color: var(--color-bar-alt-text); }\n\n/* tabs: one segmented glass key; the current segment is dark glass */\n.ds-tabs {\n display: flex;\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n height: var(--size-control);\n margin-left: calc(0px - var(--border-width));\n padding: 0 var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, 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 text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-tabs__item:first-child .ds-tabs__tab {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-tabs__item:last-child .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-bar) 55%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* table: the library; a pale glass head, hairlines between rows */\n.ds-table {\n width: 100%;\n margin: 0 0 var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n overflow: hidden;\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 18%, transparent);\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__head.is-first { border-left: 0; }\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\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__cell--thumb { width: calc(var(--size-thumb) + var(--space-3)); padding-right: 0; }\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-6);\n}\n\n/* form: settings rows, the label at the left, a hairline between rows */\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__row.is-first { padding-top: 0; border-top: 0; }\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* dialog: a small window with a dark glass title bar, in the page flow on a dimmed strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n margin: var(--space-5) 0 0;\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\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: var(--size-icon);\n height: var(--size-icon);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 45%, transparent);\n border-radius: 50%;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: 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 { padding: var(--space-5) var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-alt);\n}\n\n/* footer: the control strip that closes the window */\n.ds-footer {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-5);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n}\n.ds-footer__controls {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-footer__list {\n display: flex;\n gap: var(--space-4);\n margin: 0;\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 text-shadow: var(--shadow-text);\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 0 0 auto;\n opacity: 0.75;\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/* typography: long text on the sheet */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link-hover); }\n\n/* buttons: glossy keys; the outline is the fill's colour darkened with the shadow colour */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button__icon {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--round {\n flex: 0 0 auto;\n width: var(--size-control);\n padding: 0;\n border-radius: 50%;\n}\n.ds-button--round.ds-button--large { width: var(--size-control-large); }\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 66%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 48%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 12%) 50%, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 18%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 60%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 22%) 50%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 8%) 50%, var(--color-danger) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n\n/* form controls */\n.ds-form { margin: 0; }\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); padding-top: 0; padding-bottom: 0; }\n.ds-form__select { width: auto; max-width: 100%; }\n.ds-form__input--short { width: 50%; }\n.ds-form__textarea {\n display: block;\n height: var(--size-textarea);\n border-radius: var(--radius-panel);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error,\n.ds-form__textarea.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n\n/* badge: a small glossy label */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) + var(--space-3));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-badge--new {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 32%) 0, var(--color-accent-alt) 60%);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 32%) 0, var(--color-success) 60%);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning), var(--color-button-text) 42%) 0, var(--color-warning) 60%);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 32%) 0, var(--color-danger) 60%);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* notice: one line behind a round sign */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-warning) 50%, var(--color-notice));\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__sign {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-warning);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-notice__text { margin: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__sign {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n\n/* pagination: small glossy keys */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-button) 66%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n}\n.ds-pagination__gap { padding: 0 var(--space-2); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-heading-alt); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* page header: head of an inner page, action on the right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* meter: a small progress bar */\n.ds-meter {\n display: block;\n height: var(--size-meter);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-meter__bar {\n display: block;\n height: 100%;\n background: var(--fill-accent);\n}\n.ds-meter--spaced { margin-bottom: var(--space-3); }\n.ds-meter__bar--most { width: 72%; }\n.ds-meter__bar--half { width: 46%; }\n\n/* empty state: a pale well around a round glass sign */\n.ds-empty {\n padding: var(--space-5) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__orb {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin: 0 auto var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 62%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__orb svg {\n display: block;\n width: 55%;\n height: 55%;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* Components of the period: menu, progress, carousel, accordion, tooltip, avatar */\n:root {\n --size-progress: 14px;\n --size-orb: 24px;\n --size-slide: 96px;\n --size-avatar: 44px;\n --size-avatar-small: 28px;\n --size-menu: 200px;\n --size-tip: 220px;\n --size-dot: 8px;\n}\n.ds-nav:has(.ds-menu),\n.ds-nav:has(.ds-menu) .ds-nav__bar { overflow: visible; }\n.ds-menu { position: relative; }\n.ds-menu > .ds-nav__link::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-2) solid transparent;\n border-right: var(--space-2) solid transparent;\n border-top: var(--space-2) solid currentColor;\n vertical-align: calc(var(--space-2) / 2);\n margin-left: var(--space-2);\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list { display: block; }\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: none;\n text-transform: none;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-progress__row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-progress__label { flex: 0 0 auto; color: var(--color-text); }\n.ds-progress__value { flex: 0 0 auto; color: var(--color-text-muted); }\n.ds-progress__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\n.ds-carousel { margin: 0 0 var(--space-3); }\n.ds-carousel__stage { display: flex; align-items: center; gap: var(--space-2); }\n.ds-carousel__orb {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-orb);\n height: var(--size-orb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 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-large);\n line-height: 1;\n}\n.ds-carousel__orb::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-large) * 0.4);\n height: calc(var(--text-large) * 0.4);\n border-left: calc(var(--space-3) / 4) solid currentColor;\n border-bottom: calc(var(--space-3) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n}\n.ds-carousel__orb ~ .ds-carousel__orb::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1 1 0;\n min-width: 0;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n justify-content: flex-end;\n box-sizing: border-box;\n min-height: var(--size-slide);\n margin: 0;\n padding: var(--space-3);\n scroll-snap-align: start;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-carousel__slide--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-carousel__slide--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-carousel__title { margin: 0; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); }\n.ds-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }\n.ds-carousel__dot {\n display: block;\n width: var(--size-dot);\n height: var(--size-dot);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface);\n}\n.ds-carousel__dot.is-current { background: var(--color-accent); }\n", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero media gallery specimen\n\n\n\n\n
\n
\n\n
\n chronoskin\n \n
\n \n
\n
\n\n
\n\n
\n
\n

Now showing

\n

Harbour summer

\n

48 photos and two short films from July, in the order they were taken. chronoskin Gallery keeps every picture, song and film you own on one shelf.

\n

\n Play the slideshow\n Open the library\n

\n
\n
    \n
    • \n
    • \n
    • \n
    • \n
\n
\n\n
    \n
  • Photos1,204
    • \n
  • Songs3,860
    • \n
  • Films27
    • \n
  • Hours of music241
    • \n
  • Space left3.2 GB
    • \n
\n\n
\n\n
\n

Albums All 86 albums

\n
\n
\n \n

Harbour summer

\n

48 photos, 2 films

\n
\n
\n \n

Hill walk in April

\n

112 photos

\n
\n
\n \n

The allotment New

\n

64 photos

\n
\n
\n \n

Kitchen radio

\n

212 songs, 13 hours

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

Recently added Show everything

\n
    \n
  • \n \n
    \n

    Evening ferry New

    \n

    Album of 31 photos, added today at 9:40 from the camera

    \n
    \n 31 items\n \n
    • \n
  • \n \n
    \n

    Slow tide

    \n

    Song by the Quay Street Band, added yesterday

    \n
    \n 4:12\n \n
    • \n
  • \n \n
    \n

    The long way north

    \n

    Film, converted for the living room screen on Monday

    \n
    \n 1:38:05\n \n
    • \n
  • \n \n
    \n

    First tomatoes

    \n

    Photo in The allotment, added on Sunday from a phone

    \n
    \n 2.1 MB\n \n
    • \n
\n
\n \n
\n\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Library
    4. \n
  4. ›
    5. \n
  5. Everything
    6. \n
\n
\n
\n

Library

\n

5,091 items in 86 albums and 14 playlists, newest first.

\n
\n
Library settingsAdd files
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
TitleAlbumKindLengthSizeOn the screen
Gangway at duskAdded today, 9:40Evening ferryPhoto3.4 MBReady
Slow tideQuay Street BandKitchen radioSong4:125.8 MBReady
The long way northConverted on MondayFilmsFilm1:38:05702 MBConverting
First tomatoesFrom a phone, SundayThe allotmentPhoto2.1 MBReady
Cairn in the cloudScanned slideHill walk in AprilPhoto6.0 MBFile missing
Harbour from the hillFirst of 48Harbour summerPhoto4.2 MBReady
\n
\n \n

\n Playing\n 5,091\n New\n Ready\n Converting\n File missing\n

\n
\n
\n

Playlists for this week

\n
\n \n

No playlist for this week yet

\n

Drag songs here, or let the gallery pick an hour of music you have not heard for a while.

\n Make a playlist\n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Library
    4. \n
  4. ›
    5. \n
  5. Harbour summer
    6. \n
\n
\n
\n

Harbour summer

\n

48 photos and 2 films, taken between 3 and 19 July.

\n
\n
Share the album Play the slideshow
\n
\n
\n
\n
    \n
  • Harbour from the hill
    • \n
  • Last boat in
    • \n
  • Breakwater
    • \n
  • Market stall
    • \n
  • Film: the regatta
    • \n
  • Lamp room
    • \n
  • Picnic field
    • \n
  • Low tide
    • \n
\n
\n
Harbour summer, photo 1
On the pier, photo 2
Sunset sail, photo 3
\n
\n
\n
\n

About this album

\n

Two weeks in the house above the harbour. The pictures are in the order they were taken, so the slideshow runs from the first morning on the hill to the last boat coming in.

\n

How the slideshow plays

\n

Each picture stays for five seconds and the two films play in full where they fall. Captions come from the file names unless you write your own.

\n
    \n
  • Press space to pause, and the arrow keys to step.
    • \n
  • Pictures marked hidden stay in the album but are skipped.
    • \n
\n

Sending it to the living room

\n

Choose a screen under Settings and the album is resized for it once, then kept ready.

\n
\n
\n

More from the same summer

\n

\n Evening ferry\n Hill walk in April\n The allotment\n Everything from July\n

\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Settings
    4. \n
\n
\n
\n

Settings

\n

Where the library lives, how it plays and who may see it.

\n
\n
Back to the library
\n
\n
\n
\n \n
\n
i

The film is still converting. Changes to the screen size apply to it when it has finished.

\n
!

The settings were not saved. The watched folder below cannot be found.

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

There is no folder with this name. Check the spelling or choose another.

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

Originals are never changed. Resized copies take about a tenth of the space.

\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n New files\n
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n \n
\n
\n
\n

Empty the library?

\n
\n

All 5,091 items leave the gallery and every screen. The files themselves stay in their folders on this disk.

\n
\n
\n Empty the library\n Keep everything\n
\n
\n
\n
\n
\n\n
\n
\n \n \n \n
\n \n

chronoskin Gallery is a placeholder in a design specimen. All names and figures are invented.

\n
\n\n
\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.app.s04.p02.t08.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-4282\",\n \"short\": \"v1-fa-4282\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #060c1a;\n --color-canvas: #0b1526;\n --color-surface: #101c33;\n --color-surface-alt: #162740;\n --color-surface-strong: #203552;\n --color-bar: #181818;\n --color-bar-text: #eef6ff;\n --color-bar-alt: #1b3d6b;\n --color-bar-alt-text: #d4e9ff;\n --color-inverse: #123c8f;\n --color-inverse-text: #ffffff;\n --color-text: #c9d6e6;\n --color-text-muted: #989898;\n --color-heading: #ffffff;\n --color-heading-alt: #62d8ff;\n --color-link: #62c8ff;\n --color-link-quiet: #a3b8cf;\n --color-link-visited: #b59cff;\n --color-link-hover: #a8ecff;\n --color-link-active: #ffffff;\n --color-border: #2a4466;\n --color-border-strong: #4d7fb3;\n --color-border-muted: #1c2f4a;\n --color-accent: #19c2f0;\n --color-accent-text: #03131f;\n --color-accent-alt: #c86bff;\n --color-fill-1: #10305e;\n --color-fill-2: #0d3a55;\n --color-fill-3: #2a1d5c;\n --color-fill-4: #123f3a;\n --color-button: #0f8fd0;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #26374f;\n --color-button-secondary-text: #dcecff;\n --color-input: #060d1a;\n --color-input-text: #e6f1ff;\n --color-input-border: #35557d;\n --color-disabled: #1a2434;\n --color-disabled-text: #5d6d82;\n --color-danger: #e0483c;\n --color-danger-surface: #3a1418;\n --color-success: #2fa84a;\n --color-warning: #f2b31c;\n --color-notice: #132c4a;\n --color-notice-text: #d4e9ff;\n --color-focus: #5fe6ff;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, \"Liberation Sans\", sans-serif;\n --font-heading: Georgia, Constantia, \"Times New Roman\", serif;\n --font-ui: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-mono: \"Courier New\", Courier, \"Liberation Mono\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 15px;\n --text-display: 38px;\n --text-h1: 27px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.5;\n --line-heading: 1.22;\n --line-display: 1.12;\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.5px;\n --figure-shift: 0.1em;\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: 2px;\n --border-style: solid;\n --radius-control: 13px;\n --radius-panel: 10px;\n --radius-pill: 20px;\n --radius-page: 16px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 24%, transparent), inset 0 0 0 1px color-mix(in srgb, white 6%, transparent), 0 6px 18px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 0 8px color-mix(in srgb, var(--color-focus) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), 0 0 14px color-mix(in srgb, var(--color-focus) 85%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-pressed: inset 0 2px 6px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 12%, transparent), 0 0 30px color-mix(in srgb, var(--color-focus) 35%, transparent), 0 16px 40px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n --shadow-text: 0 0 6px color-mix(in srgb, var(--color-focus) 55%, transparent), 0 -1px 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --fill-page: radial-gradient(ellipse 70% 420px at 18% 0, color-mix(in srgb, var(--color-accent) 42%, transparent) 0, transparent 100%) 0 0 / 100% 420px no-repeat, radial-gradient(ellipse 55% 380px at 86% 40px, color-mix(in srgb, var(--color-accent-alt) 40%, transparent) 0, transparent 100%) 0 0 / 100% 420px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 35%) 0, var(--color-page) 640px) 0 0 / 100% 640px no-repeat, var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 8%, transparent) 50%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 14%) 0, color-mix(in srgb, var(--color-bar), black 35%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, white 20%, transparent) 0, transparent 60%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 10%) 0, color-mix(in srgb, var(--color-bar-alt), black 25%) 100%);\n --fill-inverse: radial-gradient(ellipse 50% 110% at 22% 100%, color-mix(in srgb, var(--color-accent) 55%, transparent) 0, transparent 100%), radial-gradient(ellipse 45% 120% at 80% 0, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 55%) 0, var(--color-inverse) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, white 55%, transparent) 0, transparent 55%), linear-gradient(to bottom, var(--color-accent) 0, color-mix(in srgb, var(--color-accent), black 22%) 100%);\n --fill-panel: linear-gradient(to bottom, color-mix(in srgb, white 10%, transparent) 0, transparent 34px), linear-gradient(to bottom, color-mix(in srgb, var(--color-surface-alt) 78%, transparent) 0, color-mix(in srgb, var(--color-surface) 72%, transparent) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, white 60%, transparent) 0, color-mix(in srgb, white 14%, transparent) 46%, transparent 50%, color-mix(in srgb, white 22%, transparent) 100%), var(--color-button);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, white 72%, transparent) 0, color-mix(in srgb, white 24%, transparent) 46%, color-mix(in srgb, white 8%, transparent) 50%, color-mix(in srgb, white 34%, transparent) 100%), var(--color-button);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, white 34%, transparent) 0, color-mix(in srgb, white 8%, transparent) 46%, transparent 50%, color-mix(in srgb, white 10%, transparent) 100%), var(--color-button-secondary);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 40%) 0, var(--color-input) 8px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 10px;\n}\n" } }