{ "id": "v1-gl-6779", "long_id": "v1.glassmorphism.app.s06.p07.t07.u09", "name": "Glassmorphism player app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panes with a blurred backdrop, a light hairline edge and a soft inner glow, floating over a dark ground with blurred points of colour. Media players, wallets and launchers of those years were built from it: a card of navigation at the side, one large card for what is on now, and a transport bar pinned to the bottom of the window. This pack is that player, on plum charcoal with a hot pink primary colour, amber highlights and a thin, large display face.", "url": "https://chrono.skin/s/v1-gl-6779", "preview_url": "https://chrono.skin/s/v1-gl-6779/specimen.html", "files": { "STYLE.md": "# Glassmorphism player app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panes with a blurred backdrop, a light hairline edge and a soft inner glow, floating over a dark ground with blurred points of colour. Media players, wallets and launchers of those years were built from it: a card of navigation at the side, one large card for what is on now, and a transport bar pinned to the bottom of the window. This pack is that player, on plum charcoal with a hot pink primary colour, amber highlights and a thin, large display face.\n\n## Layout\n\n- Frame: `.ds-page__frame` is `--size-page` (1320px) wide, centred, padded `--space-4` (20px), with two columns: the navigation card (`--size-nav`, 224px) and `.ds-page__main`. The backdrop (`--fill-page` on `.ds-page`) fills the viewport. Under the frame, `.ds-player` is a full-width bar of bar glass, sticky at the bottom edge of the window, `--size-player` (72px) high.\n- Navigation: `.ds-nav` is a card of bar glass at the left, sticky 20px from the top: the brand, a vertical `.ds-nav__list` of text links with an 18px icon each, and a small `.ds-nav__foot` note. It is never a bar across the top.\n- The main column starts with `.ds-page__top` on every page: a search field with a round end (`.ds-page__search`) and `.ds-page__tools` at the right with one secondary and one primary button. The navigation card, this row, the footer and the player bar are written once, around the views.\n- Home page: the `.ds-hero` now-playing card, then `.ds-page__section` blocks 28px apart, each opened by a `.ds-page__heading` on the backdrop (26px, with an optional link at the right): `.ds-page__cols` with the queue `.ds-list` on the left and a `--size-aside` (340px) `.ds-page__stack` on the right (the `.ds-sidebar` of playlists and the inverted `.ds-page__promo` card); the `.ds-grid` of four album tiles; one full-width `.ds-panel`.\n- Inner pages have no hero. Under the search row come the `.ds-breadcrumb` trail and the `.ds-page-header` on the backdrop: an optional cover tile (`.ds-page-header__art`, 84px), the title at `--text-h1` and one muted line, the actions at the right. Then either a `.ds-page__stack` at 20px gaps across the whole column (the `.ds-stat` cards, `.ds-tabs`, the table, the pagination line), or `.ds-page__cols`: the main thing on the left (track table, settings sheet, running text) and the 340px stack on the right (dialog, notices, empty state, small panels). Fill the shorter column with something that belongs to the page.\n- Views: the specimen is one application with five screens, one showing at a time. `listen` is the home view (now playing, the queue, playlists, recently added). `library` is the list (figures, tabs, the track table, pagination). `album` is one album: its tracks and an error beside the open dialog its Remove button raises. `settings` is the settings sheet beside the notices and the empty list of speakers. `guide` is the reading page with the link states. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address, and `album` marks Library.\n- Spacing scale: `--space-1` 4px (title to meta, pagination gaps), `--space-2` 8px (icon to text, gaps between buttons, chips and notices, list row padding), `--space-3` 14px (row padding, tile padding, gaps inside a row), `--space-4` 20px (card padding, the gap between every pair of neighbouring cards), `--space-5` 28px (hero padding, between home sections), `--space-6` 44px (under a view, before the footer), `--space-7` 84px (cover tile of a page header, textarea height).\n- Controls are `--size-control` (40px) high; large buttons 48px; pagination cells 32px.\n- Glass: cards use `backdrop-filter: blur(var(--backdrop-blur))` (12px in this pack's surface set). The strongest glass, three times that with `saturate()`, is the navigation card, the hero, the dialog box and the player bar. The only glass inside glass is `.ds-hero__disc` on the cover.\n- Below 1000px the frame and the columns become one column, the navigation card turns into a row (brand left, links right), the hero cover shrinks to 180px, the grid drops to two columns and the stat cards to two by two. Below 640px padding drops to 14px, the links move to their own row under the brand with the icon above the label, the hero stacks with the title at `--text-h1`, list rows lose their number and duration, table columns marked `.ds-table__opt` are hidden, a settings row puts its control under its label, and the player bar keeps the track and the play button only.\n- On a phone (1000px and below) the navigation card is a row with the brand at the left and the links at the right, and `.ds-nav__foot` is not shown; at 640px and below the links take their own row under the brand, spread over the width with the icon above a `--text-small` label, the current one marked by a `--color-accent` line along its bottom edge. There is no menu button. A tooltip on a form label opens at the left edge of the label, at most 26 characters wide.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family for text, headings and controls (`--font-body`, `--font-heading`, `--font-ui`: a Manrope-first geometric sans) and `--font-mono` for code. The references used commercial geometric and system faces; this is the closest open stack.\n- Sizes: `--text-base` 15px body, `--text-ui` 14px for controls, navigation, table cells and notices, `--text-small` 12px for meta text, badges and labels, `--text-large` 19px for lead text, `--text-h3` 17px, `--text-h2` 22px (tile figures), `--text-h1` 34px (page titles, stat figures), `--text-display` 58px for the hero title and the present temperature.\n- Weights: 400 body, 500 headings and display figures, 600 controls and navigation, 700 bold and small labels. Headings are tracked at -0.01em and display text at -0.035em. No uppercase anywhere.\n- Text on the backdrop: titles in `--color-heading`, navigation and running lines in `--color-text`, lead and meta lines in `--color-text-muted`, small headings above a list in `--color-heading-alt`.\n- Text on glass (`--fill-panel`, `--color-surface*`) is `--color-text`, with `--color-text-muted` for meta. On `--fill-bar` (table head, carousel head) it is `--color-bar-text`; on `--fill-bar-alt` (tabs, footer, status badges) `--color-bar-alt-text` or `--color-text`; on `--fill-accent` (current tab, badge, avatar, the on switch) `--color-accent-text`; on `--fill-inverse` (daylight panel, tooltip) `--color-inverse-text`; on `--color-notice` `--color-notice-text`; on `--fill-button` `--color-button-text`.\n- Links in running text are `--color-link` and underlined; titles, navigation and table links are `--color-link-quiet` without underline. A quiet link inside a notice inherits the notice's text colour and is underlined.\n- `--color-fill-1` to `--color-fill-4` are the colours of the backdrop's light and the tints of tiles and avatars; components mix them with `transparent` at 55% and set `--color-text` on them. They are never opaque block fills.\n- `--color-accent` marks what is current or measured: the navigation rule, the current tab, progress bars, weather glyphs, counts. `--color-accent-alt` is for \"new\" badges.\n- Status colours appear only as a 1px ring and an 8px dot on status badges, as the border and title of an error, and at 70% as the tint of the destructive button.\n- One-off values with no token: `calc(var(--backdrop-blur) * 3)` and `saturate(180%)` for the strongest glass, `color-mix()` over `--color-fill-*` for tints, `color-mix()` of `--color-text` at 18% for the progress track and at 28% for carousel dots, and `color-mix()` of `--color-danger` at 70% for the destructive button.\n\n- `--fill-page` is the page colour with one glow colour, `--color-fill-1`, as large round glows (680px to 760px radius) alternating right and left down the page; between them the backdrop stays near-black.\n- Corners are generous: `--radius-panel` 16px, `--radius-page` and `--radius-pill` 22px, `--radius-control` 8px.\n- `--border-width` 1px; `--border-width-strong` 2px.\n- Glass is tinted and lit from its edge, not lifted: `--fill-panel` lays a diagonal wash of `--color-accent` (22%) into `--color-fill-1` (26%) over `--color-surface`, and `--shadow-panel` and `--shadow-dialog` are a 1px ring of the accent at 45% with a glow of the same colour, 28px to 30px wide, on every side. Controls glow too: `--shadow-control` is a 12px halo of the accent, 20px when hovered. Nothing casts a dark drop shadow.\n- `--shadow-text` is a wide soft 0 4px 10px on the brand, the hero title and large figures.\n- Buttons and inputs are flat; the secondary button carries the same accent wash as the glass. Transitions run 0.3s.\n- `--backdrop-blur` is 18px: a firm frost that turns the glow behind a pane into an even wash of colour. The strongest glass of a layout (bars, dialogs) blurs three times that, 54px.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop, sets the base type and is a column so the player bar sits at the bottom of the window even on a short page. `.ds-page__frame` is the two-column frame, `.ds-page__main` its right column, `.ds-page__top` the search row with `.ds-page__search` and `.ds-page__tools`. `.ds-page__section`, `.ds-page__heading`, `.ds-page__cols` and `.ds-page__stack` lay a page out; `.ds-page__promo` with `.ds-page__promo-title` is the inverted tip card; `.ds-page__icon` sizes an 18px icon. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: the navigation card. `.ds-nav__list`, `.ds-nav__link` (icon and label; the current item `is-current` is lighter with a 3px accent marker on its left; the specimen sets it from the address) and `.ds-nav__foot`. Four to six items.\n- `.ds-brand`: the site's mark and name, at the top of the navigation card: `.ds-brand__mark` is a 34px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` is the name in the heading font at `--text-large` in `--color-bar-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the now-playing card of the home page: `.ds-hero__cover` (a square of the fill colours with a glass `.ds-hero__disc`) and `.ds-hero__text` with a `.ds-hero__eyebrow` line (a badge and a few words), the `.ds-hero__title` at the display size, the `.ds-hero__lead`, a `.ds-hero__progress` track with its `.ds-hero__elapsed` part and `.ds-hero__times`, and `.ds-hero__actions` with one large primary button. Once per application.\n- `.ds-page-header`: head of an inner page, used instead of the hero: an optional `.ds-page-header__art` tile, `.ds-page-header__text` with `.ds-page-header__title` and one `.ds-page-header__lead`, and `.ds-page-header__actions` at the right with at most one primary button. No fill or border of its own. The breadcrumb goes directly above it.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code` and `kbd`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block on bar glass.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in rows and tables. `.ds-link__sample` lays samples out in a row.\n- `.ds-button`: primary, pink, 40px high. `.ds-button--secondary` is a glass button with a light edge; `.ds-button--danger` is the destructive action, tinted with the danger colour at 70% and solid on hover, used once at the end of a group or as the confirming button of a dialog. `.ds-button--large` for the hero, `.ds-button--icon` a round button holding one icon, `.ds-button--inverse` for the promo card; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays buttons out in a row. One primary button per group.\n- `.ds-form`: a settings sheet inside a `.ds-panel--sheet`. A `.ds-form__group-title` opens each group; each `.ds-form__field` is a row with a hairline above it, the `.ds-form__label` (with its `.ds-form__hint` under it) on the left and the control in a `--size-field` (300px) column on the right: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range`, or `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__control` stacks an input and its message; an invalid input takes `is-error` and is followed by `.ds-form__error`. `.ds-form__actions` closes the sheet.\n- `.ds-table`: a track list as one card of glass: bar-glass head with small uppercase labels, hairline rows. `.ds-table__num` right-aligns a numeric column, `.ds-table__opt` marks a column hidden below 640px, `.ds-table__meta` is muted text, `is-current` on a row marks the playing track, `is-hover` lightens a row.\n- `.ds-list`: the queue, a card of glass with rounded rows and no dividers. `.ds-list__item` is a `.ds-list__index`, a `.ds-list__thumb` (tinted by `--1` to `--4`), a `.ds-list__body` (with `.ds-list__title` and `.ds-list__meta`), an optional badge and a `.ds-list__time`; `is-current` marks the playing row.\n- `.ds-panel`: a card of glass with a `.ds-panel__title` (17px, bold, may carry a badge) and a `.ds-panel__body` (14px, muted). `.ds-panel--sheet` keeps the body in the full text colour, for a form or running text.\n- `.ds-grid`: four album tiles in a row. `.ds-grid__cell` with `--1` to `--4` picks the tint from `--color-fill-*`; inside, a grooved `.ds-grid__art` area that may hold a badge, then `.ds-grid__title` and `.ds-grid__meta`. A tile may be a link.\n- `.ds-stat`: the row of summary figures as separate small cards. Each `.ds-stat__item` has a small uppercase `.ds-stat__label` above a light `.ds-stat__value` (34px, tabular figures) with a muted `.ds-stat__meta` on the same line. Three or four items, on inner pages.\n- `.ds-tabs`: a row of separate chips; `.ds-tabs__tab` with `is-current` filled like the primary button, and an optional `.ds-tabs__count`. Use it for the views of one page, not for navigation.\n- `.ds-badge`: pill for labels and counts: amber by default, `.ds-badge--alt` blue for \"new\", `.ds-badge--glass` neutral. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a bar-glass pill with a 1px ring and a leading 8px dot in the status colour.\n- `.ds-sidebar`: a card of glass in the right column: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link` (`is-current` lighter) with an optional leading `.ds-sidebar__dot` (`--alt` for the second accent) and a count badge at the right.\n- `.ds-notice`: information notice on the notice fill with a 3px accent edge on its left; `.ds-notice--error` takes the danger surface, edge, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several 8px apart.\n- `.ds-pagination`: a line under a table: `.ds-pagination__info` (the count) on the left, small `.ds-pagination__link` cells on the right; the current page is `is-current` and takes the primary button fill, `is-disabled` greys an end.\n- `.ds-breadcrumb`: small muted trail above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed pane (`--color-overlay`) with a `.ds-dialog__box` of the strongest glass, 440px wide: `.ds-dialog__title`, `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned, the confirming button last. The box lays `--color-surface-alt` over `--color-canvas` at 82%, so its text keeps its contrast under any palette.\n- `.ds-empty`: empty state on a glass card, left-aligned: a round `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-footer`: a quiet rounded strip of bar glass at the foot of the main column: one line of text and `.ds-footer__links` with `.ds-footer__link`.\n- `.ds-player`: the transport bar. `.ds-player__inner` holds `.ds-player__now` (a `.ds-list__thumb`, `.ds-player__title`, a link to the album that is playing, `.ds-player__meta`), `.ds-player__controls` (round `.ds-player__button` links; `--play` takes the primary button fill, `--skip` is hidden on a phone) and `.ds-player__seek` (two times around a `.ds-player__track` with its `.ds-player__fill`).\n- `.ds-menu`: a drop-down of the strongest glass under its `.ds-menu__trigger`, shown on hover or focus (or with `is-open`): `.ds-menu__list` of `.ds-menu__link` rows with an optional `.ds-menu__meta`. Use it for the account or workspace menu; `.ds-menu__group` sets it beside a button, `.ds-menu__list--start` hangs it from the left edge.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. Use it for questions and for settings that are rarely opened; `.ds-accordion--flush` drops its own sheet when it sits inside another panel.\n- `.ds-tooltip`: a round hint mark inside a form label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). One sentence.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. `.ds-switch__group` is the tinted box that holds a few of them, divided by hairlines.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--85`, `--90`. Use it under a figure that is a share of a whole; `.ds-progress__label` is an optional line above it.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch; only bullets sit 4px apart.\n- `block-gap <= 44px`: neighbouring cards sit 20px apart, sections 28px, and nothing is further apart than 44px.\n- `content-width <= 1320px`: the frame is capped while the backdrop and the player bar fill the viewport.\n- `font-size <= 58px`: the hero title and the present temperature are the largest text.\n- `font-size >= 12px`: labels and meta text are the smallest text.\n- `font-weight <= 700`: headings are medium; 700 is for small labels and bold only.\n- `font-families <= 2`: one sans for everything and one monospace for code.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `uppercase-text <= 1%`: nothing is set in capitals.\n- `border-width <= 2px`: borders are 1px; 2px is the strong width.\n- `border-radius <= 22px`: panels are 16px, tiles and dialogs 22px.\n- `box-shadow-blur <= 30px`: the widest glow, on the dialog, spreads 30px.\n- `gradient-fills <= 60%`: glass carries one diagonal tint; controls, bars and rows stay flat.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new card starts from `.ds-panel` (fill, 1px edge, radius, shadow and blur together, never one without the others), a new row of items from `.ds-list__item`, a new tile from `.ds-grid__cell`, a new control from `.ds-button--secondary` or `.ds-form__input`, an overlay from `.ds-dialog__box`. A new destination is a link in the navigation card, never a second bar; anything that must stay in reach while the page scrolls belongs in `.ds-player`. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*`. Keep opaque fills to buttons, badges and the one promo card, and keep the strongest blur to the navigation card, the hero, the dialog and the player bar.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1320px;\n --size-nav: 224px;\n --size-aside: 340px;\n --size-cover: 264px;\n --size-field: 300px;\n --size-dialog: 440px;\n --size-control: 40px;\n --size-player: 72px;\n --size-thumb: 44px;\n --size-icon: 18px;\n --size-index: 22px;\n --size-dot: 8px;\n --size-knob: 16px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 14px;\n --space-4: 20px;\n --space-5: 28px;\n --space-6: 44px;\n --space-7: 84px;\n}\n\n/* shell: the backdrop, a frame of two columns, and the player bar along the bottom of the window */\n.ds-page {\n display: flex;\n flex-direction: column;\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-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 {\n box-sizing: border-box;\n}\n.ds-page__frame {\n display: grid;\n flex: 1 0 auto;\n grid-template-columns: var(--size-nav) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: start;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: var(--space-4);\n}\n.ds-page__main {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n min-width: 0;\n}\n.ds-page__top {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n}\n.ds-page__search {\n position: relative;\n flex: 1;\n max-width: 56ch;\n color: var(--color-input-text);\n}\n.ds-page__search .ds-page__icon {\n position: absolute;\n top: 50%;\n left: var(--space-3);\n transform: translateY(-50%);\n opacity: 0.7;\n pointer-events: none;\n}\n.ds-page__search .ds-form__input {\n padding-left: calc(var(--size-icon) + 2 * var(--space-3));\n border-radius: var(--radius-pill);\n}\n.ds-page__tools {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n.ds-page__cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-4);\n align-items: start;\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__section {\n margin-top: var(--space-5);\n}\n.ds-page__heading {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: 0 var(--space-3);\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__heading .ds-link {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n/* the one inverted block: a small card for a tip */\n.ds-page__promo {\n padding: var(--space-4);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n font-size: var(--text-ui);\n}\n.ds-page__promo-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-page__promo .ds-button {\n margin-top: var(--space-3);\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: a card of bar glass down the left side, text links with icons */\n.ds-nav {\n position: sticky;\n top: var(--space-4);\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-3);\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) + 2 * var(--space-2));\n height: calc(var(--size-icon) + 2 * var(--space-2));\n flex: none;\n padding: var(--space-1);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\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 text-shadow: var(--shadow-text);\n}\n.ds-nav__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#listen\"],\n.ds-page:has(#listen:target) .ds-nav__link[href=\"#listen\"],\n.ds-page:has(#library:target) .ds-nav__link[href=\"#library\"],\n.ds-page:has(#album:target) .ds-nav__link[href=\"#library\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--color-surface-alt);\n box-shadow: inset var(--border-width-strong) 0 0 0 var(--color-accent);\n}\n.ds-nav__foot {\n margin-top: var(--space-5);\n padding: var(--space-3) var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n opacity: 0.75;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: title and one line on the backdrop, an optional cover tile before them, actions at the right */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n padding: var(--space-2) 0 var(--space-4);\n}\n.ds-page-header__art {\n width: var(--space-7);\n height: var(--space-7);\n flex: none;\n background:\n radial-gradient(circle at 30% 25%, var(--color-fill-3), transparent 60%),\n radial-gradient(circle at 85% 85%, var(--color-fill-1), transparent 60%),\n var(--color-fill-2);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-page-header__text {\n flex: 1;\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 text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* hero: the now-playing card, cover on the left, title, progress and transport on the right */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-cover) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: center;\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(160%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(160%);\n}\n.ds-hero__cover {\n position: relative;\n aspect-ratio: 1;\n overflow: hidden;\n background:\n radial-gradient(circle at 25% 20%, var(--color-fill-3), transparent 55%),\n radial-gradient(circle at 85% 90%, var(--color-fill-1), transparent 60%),\n var(--color-fill-2);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__disc {\n position: absolute;\n top: 18%;\n right: 18%;\n bottom: 18%;\n left: 18%;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-hero__disc::after {\n content: \"\";\n position: absolute;\n top: 38%;\n right: 38%;\n bottom: 38%;\n left: 38%;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-hero__text {\n min-width: 0;\n}\n.ds-hero__eyebrow {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-hero__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__progress {\n height: var(--size-track);\n margin-top: var(--space-5);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-hero__elapsed {\n display: block;\n width: 38%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-hero__times {\n display: flex;\n justify-content: space-between;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin-top: var(--space-3);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\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 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code,\n.ds-prose kbd {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--space-1);\n color: var(--color-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\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 {\n color: var(--color-link-active);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin-top: var(--space-3);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-4);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\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-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\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 box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n/* on the inverted card the button takes the card's own text colour as its fill */\n.ds-button--inverse,\n.ds-button--inverse:hover {\n background: var(--color-inverse-text);\n box-shadow: none;\n color: var(--color-inverse);\n}\n.ds-button--large {\n min-height: calc(var(--size-control) + var(--space-2));\n padding: var(--space-2) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n border-radius: 50%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: not-allowed;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* panel: a card of glass with a small title line */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) var(--space-4) 0;\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}\n.ds-panel__body {\n padding: var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-2);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n.ds-panel--sheet .ds-panel__body {\n color: var(--color-text);\n}\n\n/* form: a settings sheet, one row per setting, label on the left and control on the right */\n.ds-form {\n display: flex;\n flex-direction: column;\n}\n.ds-form__group-title {\n margin: 0;\n padding: var(--space-4) 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-form__group-title:first-child {\n padding-top: 0;\n}\n.ds-form__field {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-field);\n gap: var(--space-1) var(--space-4);\n align-items: center;\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n display: flex;\n flex-direction: column;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-form__control {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-6);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-icon);\n height: var(--size-icon);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-knob);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-knob);\n height: var(--size-knob);\n margin-top: calc((var(--size-track) - var(--size-knob)) / 2);\n background: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-knob);\n height: var(--size-knob);\n background: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: a track list on a card of glass, quiet head, hairline rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: the queue, numbered rows with a small cover tile */\n.ds-list {\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n}\n.ds-list__item.is-current {\n background: var(--color-surface-alt);\n}\n.ds-list__index {\n width: var(--size-index);\n flex: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n text-align: right;\n}\n.ds-list__thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background-color: var(--color-surface-strong);\n background-image: radial-gradient(circle at 30% 25%, var(--color-surface-strong), transparent 70%);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-list__thumb--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-list__thumb--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-list__thumb--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__time {\n flex: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n\n/* grid: album tiles, a tinted pane with a grooved cover area above the title */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-3);\n background: radial-gradient(circle at 0 0, var(--color-surface-alt), transparent 70%), var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n text-decoration: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-grid__cell--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__art {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n aspect-ratio: 16 / 10;\n margin-bottom: var(--space-3);\n padding: var(--space-2);\n background:\n repeating-radial-gradient(circle at 50% 130%, transparent 0, transparent var(--space-3), var(--color-border-muted) var(--space-3), var(--color-border-muted) calc(var(--space-3) + var(--border-width))),\n var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-page) - var(--space-3));\n}\n.ds-grid__title {\n margin: 0;\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}\n.ds-grid__meta {\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: separate small cards in a row */\n.ds-stat {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n gap: var(--space-4);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-stat__label {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\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-display);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n\n/* tabs: a row of separate chips, the current one filled like the primary button */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-tabs__tab.is-current {\n background-color: var(--color-button);\n background: var(--fill-button);\n border-color: transparent;\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-tabs__count {\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n opacity: 0.7;\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\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: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n text-shadow: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n/* status badges: a bar-glass pill with a ring and a dot in the status colour */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar: a card of glass listing playlists, a tinted dot before each */\n.ds-sidebar {\n padding: var(--space-4) var(--space-3);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-4);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link .ds-badge {\n margin-left: auto;\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n background: var(--color-accent);\n}\n.ds-sidebar__dot--alt {\n background: var(--color-accent-alt);\n}\n\n/* notice: a pane with a strong edge on its left */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n border-radius: var(--radius-control);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n margin-top: var(--border-width);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination: a count on the left, small cells on the right */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__info {\n margin-right: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: calc(var(--size-control) - var(--space-2));\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-2);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background-color: var(--color-button);\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* dialog: a box of the strongest glass on a dimmed pane, shown in the page flow */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-4);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__body {\n margin-top: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n margin-top: var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-empty__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n padding: var(--space-2);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\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}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* footer: a quiet line at the foot of the main column */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n margin-top: auto;\n padding: var(--space-3) var(--space-4);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-view {\n margin-bottom: var(--space-6);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* player: the transport bar, bar glass along the bottom edge of the window */\n.ds-player {\n position: sticky;\n bottom: 0;\n z-index: 6;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-dialog);\n color: var(--color-bar-text);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-player__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n gap: var(--space-4);\n align-items: center;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n min-height: var(--size-player);\n margin: 0 auto;\n padding: var(--space-2) var(--space-4);\n}\n.ds-player__now {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-player__title {\n display: block;\n overflow: hidden;\n color: inherit;\n text-decoration: none;\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-player__title:hover,\n.ds-player__title:focus-visible {\n text-decoration: underline;\n}\n.ds-player__meta {\n display: block;\n font-size: var(--text-small);\n opacity: 0.7;\n}\n.ds-player__controls {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-player__button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n border-radius: 50%;\n color: inherit;\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-player__button:hover,\n.ds-player__button.is-hover {\n background: var(--color-border-muted);\n}\n.ds-player__button--play {\n background-color: var(--color-button);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-player__seek {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n.ds-player__track {\n flex: 1;\n height: var(--size-track);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-player__fill {\n display: block;\n width: 38%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\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 transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-accordion {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-index);\n height: var(--size-index);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-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 letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-index) * 2);\n height: var(--size-index);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-index) * 2);\n height: calc(var(--size-index) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-index) - var(--space-1));\n height: calc(var(--size-index) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-index));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar--65 { width: 65%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\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 text-decoration: none;\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-menu__list--start {\n right: auto;\n left: 0;\n}\n.ds-menu__group {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-stat__value .ds-progress,\n.ds-stat__item > .ds-progress,\n.ds-grid__cell .ds-progress {\n width: 100%;\n min-width: calc(var(--space-6) * 2);\n margin-top: var(--space-2);\n}\n.ds-accordion--flush {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n.ds-accordion--flush .ds-accordion__summary,\n.ds-accordion--flush .ds-accordion__body {\n padding-left: 0;\n padding-right: 0;\n}\n.ds-switch__group {\n padding: var(--space-3) var(--space-4);\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-form__label .ds-tooltip {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n@media (max-width: 1000px) {\n .ds-page__frame,\n .ds-page__cols {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page__frame {\n grid-template-rows: auto minmax(0, 1fr);\n }\n .ds-nav {\n position: static;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__list {\n flex-direction: row;\n }\n .ds-nav__foot {\n display: none;\n }\n .ds-hero {\n grid-template-columns: calc(var(--size-cover) - var(--space-7)) minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat {\n grid-auto-flow: row;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 640px) {\n .ds-page__frame {\n gap: var(--space-3);\n padding: var(--space-3);\n }\n .ds-nav {\n flex-wrap: wrap;\n gap: var(--space-2);\n border-radius: var(--radius-panel);\n }\n .ds-nav__list {\n flex-basis: 100%;\n justify-content: space-between;\n gap: 0;\n }\n .ds-nav__link {\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-2);\n font-size: var(--text-small);\n }\n .ds-nav__link.is-current,\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#listen\"],\n .ds-page:has(#listen:target) .ds-nav__link[href=\"#listen\"],\n .ds-page:has(#library:target) .ds-nav__link[href=\"#library\"],\n .ds-page:has(#album:target) .ds-nav__link[href=\"#library\"],\n .ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n .ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n box-shadow: inset 0 calc(-1 * var(--border-width-strong)) 0 0 var(--color-accent);\n }\n .ds-page__tools .ds-button--secondary {\n display: none;\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n padding: var(--space-4);\n }\n .ds-hero__cover {\n max-width: calc(var(--size-cover) - var(--space-7));\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-hero__progress {\n margin-top: var(--space-4);\n }\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-stat {\n gap: var(--space-3);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-page-header__art {\n width: var(--space-6);\n height: var(--space-6);\n border-radius: var(--radius-control);\n }\n .ds-page-header__actions {\n flex-basis: 100%;\n }\n .ds-list__time,\n .ds-list__index {\n display: none;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-form__field {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-3);\n }\n .ds-player__inner {\n grid-template-columns: minmax(0, 1fr) auto;\n padding: var(--space-2) var(--space-3);\n }\n .ds-player__seek,\n .ds-player__button--skip {\n display: none;\n }\n}\n@media (max-width: 640px) {\n .ds-page__top {\n flex-wrap: wrap;\n }\n .ds-page__search {\n flex-basis: 100%;\n max-width: none;\n }\n}\n@media (max-width: 600px) {\n .ds-form__label {\n position: relative;\n }\n .ds-form__label .ds-tooltip {\n position: static;\n }\n .ds-form__label .ds-tooltip__tip {\n left: 0;\n max-width: min(26ch, 100%);\n transform: none;\n }\n}\n\n/* a label with a question mark keeps the mark on the label's line; its hint takes the next line */\n.ds-form__label:has(> .ds-tooltip) {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n}\n.ds-form__label:has(> .ds-tooltip) > :not(.ds-tooltip) {\n flex: 1 0 100%;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: listen now\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n \n
1,912 tracks on this computer. Nothing leaves it.
\n
\n\n
\n\n
\n
\n \n \n
\n
\n Shuffle the library\n Import files\n
\nOV\n\n
\n
\n
\n\n
\n\n
\n
\n
\n Now playing Track 3 of 9 · from your library\n

Salt and Lanterns

\n

The Harbour Quartet · Night Ferry · recorded live in one room

\n
\n
1:524:56
\n
\n Play the album\n Add to a playlist\n \n
\n
\n
\n\n
\n\n
\n

Up next Open the library

\n
    \n
  1. \n 3\n \n
    \n Salt and Lanterns\n The Harbour Quartet · Night Ferry\n
    \n Playing\n 4:56\n
    2. \n
  2. \n 4\n \n
    \n Low Water\n The Harbour Quartet · Night Ferry\n
    \n 6:10\n
    3. \n
  3. \n 5\n \n
    \n The Pilot Sleeps\n The Harbour Quartet · Night Ferry\n
    \n 3:41\n
    4. \n
  4. \n 6\n \n
    \n Paper Kites over Marlow\n Odile Varga · Small Hours · added by you\n
    \n New\n 5:02\n
    5. \n
  5. \n 7\n \n
    \n Copper Weather\n Tomas Reuter Trio · Field Days\n
    \n 7:18\n
    6. \n
\n
\n\n
\n \n
\n

Sleep timer

\n Stop at the end of this album and fade the last minute out.\n \n
\n
\n\n
\n\n
\n

Recently added All albums

\n
\n \n 11 tracks\n Small Hours\n Odile Varga · added today\n \n \n 9 tracks\n Night Ferry\n The Harbour Quartet · 2 days ago\n \n \n 7 tracks\n Field Days\n Tomas Reuter Trio · last week\n \n \n 14 tracks\n Orchard Tapes\n Ines Brandt · last week\n \n
\n
\n\n
\n
\n

This week in your library Week 11

\n
You listened for 9 hours and 40 minutes, mostly after ten in the evening. Night Ferry was played through four times, and 23 tracks were new to you.
\n
\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Library
    3. \n
  3. Tracks
    4. \n
\n\n
\n
\n

Library

\n

Everything in the music folder on this computer, read again each time it changes.

\n
\n
\n Choose the folder\n
\n
\n\n
\n\n
\n
\n
Tracks
\n
1,912 23 new this week
\n
\n
\n
Albums
\n
164 from 97 artists
\n
\n
\n
Playing time
\n
131 h five and a half days
\n
\n
\n
On disk
\n
58.2 GB lossless where it exists
\n\n
\n
\n\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TitleArtistAlbumFilePlaysTime
Harbour Lights, SlowlyThe Harbour QuartetNight FerryLossless125:31
Second CrossingThe Harbour QuartetNight FerryLossless94:07
Salt and Lanterns PlayingThe Harbour QuartetNight FerryLossless174:56
Paper Kites over MarlowOdile VargaSmall HoursCompressed15:02
Copper WeatherTomas Reuter TrioField DaysLossless67:18
WindfallInes BrandtOrchard TapesMissing32:49
The Long RowInes BrandtOrchard TapesCompressed43:55
\n\n \n\n
\n
\n\n
\n\n
    \n
  1. Library
    2. \n
  2. Albums
    3. \n
  3. Night Ferry
    4. \n
\n\n
\n \n
\n

Night Ferry

\n

The Harbour Quartet · 9 tracks, 44 minutes · added two days ago

\n
\n
\n Play\n Add to a playlist\n Remove\n
\n
\n\n
\n\n
\n\n
\n \n
One file has moved. Track 8 is listed but its file is no longer in the music folder.
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
No.TitlePlaysTime
1Harbour Lights, Slowly125:31
2Second Crossing94:07
3Salt and Lanterns Playing174:56
4Low Water86:10
5The Pilot Sleeps83:41
8Ropes and Bells Missing25:14
\n\n
\n\n
\n\n
\n
\n

Remove Night Ferry?

\n
The album leaves the library and two playlists. The nine files stay in the music folder.
\n
\n Keep it\n Remove\n
\n
\n
\n\n
\n

About this album

\n
Recorded in one evening, with the windows open. You have played it through four times this week, most often starting at track 3.
\n
\n\n
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Settings
    3. \n
  3. Playback
    4. \n
\n\n
\n
\n

Settings

\n

How the player sounds, where it looks for music and what it plays through.

\n
\n
\n Keyboard shortcuts\n
\n
\n\n
\n\n
\n
\n
\n

Playback

\n
\n \n \n \n \n \n
\n
\n \n \n
\n
\n Gapless albums Never fade inside an album.\n
\n\n
\n\n\n
\n
\n
\n

Library

\n
\n \n \n \n This disk is not connected.\n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n Cancel\n \n \n
\n
\n
\n
\n\n
\n\n
\n
\n \n
Last scan at 08:14. 23 new tracks were found and none were removed.
\n
\n
\n \n
The music folder cannot be read. Connect the disk named Archive, or choose another folder.
\n
\n
\n\n
\n \n

No speakers paired

\n

Speakers on your network show up here once they are switched on.

\n Look again\n
\n\n
\n

Sleep timer Off

\n
Stops at the end of the album and fades the last minute out. Set it from the player bar.
\n
\n\n
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Guide
    3. \n
  3. The queue
    4. \n
\n\n
\n
\n

Guide

\n

How the queue decides what plays next, and the keys that steer it.

\n
\n
\n Back to listening\n
\n
\n\n
\n\n
\n
\n
\n

How the queue works

\n

The queue is a plain list. What you add goes after the current album, not after the current track.

\n

Playing an album puts all of its tracks in the queue in order. Play next places a track directly after the one you hear; Add to queue places it at the end. The queue is saved in the file queue.txt beside your library, so it survives a restart.

\n

Keys

\n

Every key works while the window is in front. They can be changed on the settings page.

\n

The ones worth learning

\n
    \n
  • Space plays and pauses.
    • \n
  • N skips to the next track, P goes back.
    • \n
  • Q adds the selected track to the queue.
    • \n
\n

\n Normal link\n Visited link\n Hovered link\n Active link\n Quiet link\n

\n
\n
\n
\n\n
\n\n \n
\n
\nWhy is a track marked missing?\n

Its file was moved or renamed outside the player. Rescan the folder and it is found again.

\n
\n
\nDoes anything leave this computer?\n

No. The library, the queue and the play counts are plain files beside your music.

\n
\n
\nCan two libraries be open?\n

One at a time. Change the music folder in the settings.

\n
\n
\n\n
\n

The queue as saved

\n
\n 
night-ferry/03.flac  playing\nnight-ferry/04.flac\nnight-ferry/05.flac\nsmall-hours/02.m4a   added
\n

Edit the file by hand if you like; it is read again when it changes.

\n
\n
\n\n
\n
\n
\n\n \n\n
\n
\n\n
\n
\n
\n \n
\n Salt and Lanterns\n The Harbour Quartet\n
\n
\n
\n \n \n \n
\n
\n 1:52\n \n 4:56\n
\n
\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s06.p07.t07.u09\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-6779\",\n \"short\": \"v1-gl-6779\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(6 34 42);\n --color-canvas: rgb(6 34 42);\n --color-surface: rgb(236 253 245 / 0.12);\n --color-surface-alt: rgb(236 253 245 / 0.18);\n --color-surface-strong: rgb(236 253 245 / 0.32);\n --color-bar: rgb(4 28 36 / 0.62);\n --color-bar-text: rgb(236 253 245);\n --color-bar-alt: rgb(4 28 36 / 0.42);\n --color-bar-alt-text: rgb(204 238 228);\n --color-inverse: rgb(214 255 236);\n --color-inverse-text: rgb(6 60 58);\n --color-text: rgb(244 255 250);\n --color-text-muted: rgb(244 255 250 / 0.74);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(167 243 208);\n --color-link: rgb(255 214 102);\n --color-link-quiet: rgb(244 255 250);\n --color-link-visited: rgb(214 190 130);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(255 232 163);\n --color-border: rgb(236 253 245 / 0.22);\n --color-border-strong: rgb(236 253 245 / 0.38);\n --color-border-muted: rgb(236 253 245 / 0.12);\n --color-accent: rgb(255 200 87);\n --color-accent-text: rgb(54 36 0);\n --color-accent-alt: rgb(13 148 136);\n --color-fill-1: rgb(8 94 86);\n --color-fill-2: rgb(22 163 114);\n --color-fill-3: rgb(76 62 168);\n --color-fill-4: rgb(20 132 180);\n --color-button: rgb(214 255 236);\n --color-button-text: rgb(6 60 58);\n --color-button-hover-text: rgb(4 40 40);\n --color-button-secondary: rgb(236 253 245 / 0.14);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(4 28 36 / 0.5);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(236 253 245 / 0.3);\n --color-disabled: rgb(58 84 88);\n --color-disabled-text: rgb(150 176 176);\n --color-danger: rgb(255 122 122);\n --color-danger-surface: rgb(60 12 30 / 0.6);\n --color-success: rgb(74 222 128);\n --color-warning: rgb(251 176 64);\n --color-notice: rgb(214 255 236 / 0.82);\n --color-notice-text: rgb(6 60 58);\n --color-focus: rgb(255 214 102);\n --color-shadow: rgb(0 20 24 / 0.45);\n --color-overlay: rgb(2 20 26 / 0.62);\n}\n\n/* @part type */\n:root {\n --font-body: Manrope, \"Plus Jakarta Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-heading: Manrope, \"Plus Jakarta Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-ui: Manrope, \"Plus Jakarta Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-mono: \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 58px;\n --text-h1: 34px;\n --text-h2: 22px;\n --text-h3: 17px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.01em;\n --display-tracking: -0.035em;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\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: 8px;\n --radius-panel: 16px;\n --radius-pill: 22px;\n --radius-page: 22px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 0 28px 0 color-mix(in srgb, var(--color-accent) 32%, transparent);\n --shadow-control: 0 0 12px 0 color-mix(in srgb, var(--color-accent) 30%, transparent);\n --shadow-control-hover: 0 0 20px 0 color-mix(in srgb, var(--color-accent) 60%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 0 30px 0 color-mix(in srgb, var(--color-accent) 45%, transparent);\n --shadow-text: 0 4px 10px var(--color-shadow);\n --fill-page:\n radial-gradient(circle 760px at 78% 240px, var(--color-fill-1), transparent),\n radial-gradient(circle 680px at 10% 1500px, var(--color-fill-1), transparent),\n radial-gradient(circle 760px at 85% 2700px, var(--color-fill-1), transparent),\n radial-gradient(circle 680px at 15% 3900px, var(--color-fill-1), transparent),\n var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 22%, transparent), color-mix(in srgb, var(--color-fill-1) 26%, transparent)), var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 40%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --fill-button-secondary: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent), var(--color-button-secondary);\n --transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\n --backdrop-blur: 18px;\n}\n" } }