{ "id": "v1-gl-5322", "long_id": "v1.glassmorphism.landing.s05.p03.t02.u02", "name": "Glassmorphism landing page", "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": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a light hairline edge and a long soft shadow, floating over a mesh of saturated colour. On product pages of those years it carried the whole pitch: one large glass card for the headline, a pill of navigation floating above it, and a bento of feature tiles below. This pack is that landing page, in ultramarine and cobalt with cream buttons, a mint accent and a heavy geometric headline face.", "url": "https://chrono.skin/s/v1-gl-5322", "preview_url": "https://chrono.skin/s/v1-gl-5322/specimen.html", "files": { "STYLE.md": "# Glassmorphism landing page\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a light hairline edge and a long soft shadow, floating over a mesh of saturated colour. On product pages of those years it carried the whole pitch: one large glass card for the headline, a pill of navigation floating above it, and a bento of feature tiles below. This pack is that landing page, in ultramarine and cobalt with cream buttons, a mint accent and a heavy geometric headline face.\n\n## Layout\n\n- Content column: `--size-page` (1200px), centred, with `--space-4` (24px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport: a mesh of wide ovals in the four fill colours with no plain area between them.\n- Navigation: `.ds-nav` is one pill of bar glass as wide as the column, `--size-nav` (60px) high, sticky 16px under the top edge. Brand at the left, the links centred, one primary button at the right end inside `.ds-nav__actions`. It is written once, above the views; so is the footer.\n- Home page, from the top: the `.ds-hero` card 40px under the pill, the `.ds-stat` strip 24px under the hero, then `.ds-page__band` sections `--space-7` (112px) apart. A band opens with `.ds-page__band-head`: an uppercase `.ds-page__eyebrow` and the `.ds-page__heading` on the left half, a `.ds-page__sub` line on the right half, bottom-aligned, 40px above the content. The bands are the bento `.ds-grid`, then a `.ds-page__split` (the changelog `.ds-list` at three fifths, a quote `.ds-panel` at two fifths, equal height), then `.ds-page__cta`, the closing band on the inverted fill.\n- Inner pages have no hero and no bands. 64px under the pill sits the `.ds-breadcrumb` chip, directly under it the `.ds-page-header` on the backdrop (title at `--text-h1`, a lead line at `--text-large`, the action at the right, bottom-aligned). Then one of three bodies: a `.ds-page__stack` at 24px gaps (centred `.ds-tabs` in `.ds-page__center`, the three plan cards in `.ds-page__plans`, the comparison table, two small panels in a `.ds-page__split`); `.ds-page__cols--side`, a `--size-side` (260px) `.ds-sidebar` on the left of a stack (prose card, list, pagination); or `.ds-page__cols`, a wide stack (form card, dialog band) beside a `--size-form` (420px) stack (notices, a panel, the empty state).\n- Views: the specimen is one site with four screens, one showing at a time. `home` is the landing page. `pricing` has the billing tabs, the plans, the comparison table and two answers. `changelog` has the release list beside its sidebar, the latest release as running text, and pagination. `waitlist` is the sign-up form with its notices, the empty invitation list and the open dialog its destructive button raises. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address.\n- Spacing scale: `--space-1` 6px (inside the segmented tabs, label to control, list bullets), `--space-2` 10px (icon to text, gaps between buttons), `--space-3` 16px (row padding, stacked notices, title to lead), `--space-4` 24px (card padding, the gap between every pair of neighbouring cards, form gaps), `--space-5` 40px (band head to content, hero top margin, dialog band padding), `--space-6` 64px (hero and closing band padding, breadcrumb top margin), `--space-7` 112px (between bands, above the footer).\n- Controls are `--size-control` (46px) high and fully rounded; large buttons 56px.\n- Glass: cards, tiles, the list, the table and the stat strip use `backdrop-filter: blur(var(--backdrop-blur))` (40px in this pack's surface set). The strongest glass, three times that with `saturate()`, is the navigation pill, the hero card and the dialog box. The one glass element allowed inside another is `.ds-hero__card`, which stands over the hero's two orbs.\n- Below 960px the hero, band heads, splits, columns and plans become one column, the hero art is hidden, the bento drops to two columns and the stat strip to two by two, and bands sit 64px apart. Below 1040px the links of the pill fold into a menu button. Below 640px side padding drops to 16px, the pill becomes a rounded block, the hero title drops to `--text-h1`, the hero form stacks, the bento is one column, a list row puts its date above the title, form rows stack, table columns marked `.ds-table__opt` are hidden and dialog buttons stack.\n- On a phone (640px and below) the pill is a rounded block as wide as the window minus `--space-3` at each side, and from 1040px down `.ds-nav__list` is not shown: `.ds-nav__fold` takes its place at the right of the brand, beside the button of `.ds-nav__actions`. It is a `
` that is also a `.ds-menu`, whose `.ds-nav__toggle` summary shows three bars (`.ds-nav__bars`) and whose `.ds-menu__list` opens as a full row under the block with one `.ds-menu__link` per view; the current view's row is on `--color-surface-strong` in bold with a `--color-accent` dot. The Product drop-down is not shown on the bar and its items are not in the list. Below 1100px 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 system sans for everything: `--font-body`, `--font-heading` and `--font-ui` start with \"Segoe UI\" and fall back to the platform font; `--font-mono` for code.\n- Sizes: `--text-base` 16px, `--text-ui` 14px for buttons, navigation, table cells, notices and well text, `--text-small` 12px for meta text, badges and small uppercase titles, `--text-large` 24px for lead text, `--text-h3` 19px, `--text-h2` 24px, `--text-h1` 32px, `--text-display` 64px for the hero title.\n- Weights: `--weight-body` 400, `--weight-ui` 600 for buttons and navigation, `--weight-heading`, `--weight-display` and `--weight-bold` 700.\n- Line height: `--line-body` 1.5, `--line-heading` 1.25, `--line-display` 1.06 for the tight hero title.\n- No tracking and no uppercase from tokens (`--ui-transform` and `--heading-transform` are `none`). Uppercase is written in the component for small labels only: `.ds-page__group-title`, `.ds-sidebar__heading`, `.ds-grid__label` and table head cells. Links are marked by colour and underlined on hover only.\n- Backdrop: `--color-fill-1` (orange, 242 113 33), `--color-fill-2` (red-pink, 233 64 87) and `--color-fill-3` (plum, 138 35 135) are the three stops of the page gradient, one linear gradient at 320deg with no glows; `--color-fill-4` (salmon, 240 112 112) joins them as the fourth tile tint. Tiles mix them with `transparent` at 55%; they are never opaque blocks.\n- Light glass: `--color-surface` is white at 20% for the wells and the shards; the sheet, the sidebar and the navigation pill use `--fill-panel`, the same white made milkier (`--color-surface` mixed with 20% white, about 36% in all), so the frost reads more than the backdrop behind it; `--color-surface-alt` white at 30% for the current item, and list icons, `--color-surface-strong` white at 40% for hovered controls and slider tracks. Borders are white: `--color-border` 30%, `--color-border-strong` 40%, `--color-border-muted` 10% for hairlines and hover tints.\n- Dark glass: `--color-bar` (plum at 75%) for code blocks, `--color-bar-alt` (plum at 60%) for the tab strip and status badges, `--color-input` (plum at 60%) for form controls. Text on all of them is white.\n- Text is white (`--color-text`, `--color-heading`) on glass and on the backdrop; `--color-text-muted` is white at 80%. `--color-link` is cyan (38 230 255), `--color-link-visited` pale lavender (216 205 249); navigation, titles, table links and footer links are `--color-link-quiet` (white).\n- `--color-button` is solid white with plum text (`--color-button-text`); `--color-accent` is white with plum text too, so counts read as white pills. `--color-accent-alt` (green, 0 131 37) marks \"new\".\n- `--color-danger` is a dark maroon (84 10 25) because red does not show on a red backdrop; `--color-danger-surface` is the backdrop red at 60%. `--color-success` is a bright green (42 238 98), `--color-warning` the backdrop orange. They appear as a 1px ring and an 8px dot on status badges, as the border of an error, and at 70% as the tint of the destructive button.\n- `--color-shadow` is black at 20%; `--color-notice` is white at 60% with maroon text.\n- Controls are pills: `--radius-control` 20px on a 40px button. Wells are tighter, `--radius-panel` 10px; `--radius-page` 20px for the sheet, tiles and dialog, `--radius-pill` 30px for badges and the navigation pill.\n- Shadows fall far and soft: `--shadow-panel` 0 22px 38px, pulled in 6px, on the sheets and the navigation pill, `--shadow-dialog` 0 20px 40px, `--shadow-control` 0 1px 1px. `--shadow-text` (0 2px 4px) is used on the brand, the hero title, page titles, large figures and secondary buttons.\n- One-off values with no token: the strongest glass multiplies `--backdrop-blur` by three with `calc()`, `saturate(180%)` is written inline on the navigation pill, tile tints and the destructive button use `color-mix()` over tokens with `transparent`, the shards are `--color-surface` at `opacity: 0.4`.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop, sets the base type and is a column so the footer rests at the bottom of a short page. `.ds-page__inner` is the width container. `.ds-page__band` with `.ds-page__band-head`, `.ds-page__eyebrow`, `.ds-page__heading` and `.ds-page__sub` build a home section; `.ds-page__split`, `.ds-page__cols` (and `--side`), `.ds-page__stack`, `.ds-page__plans` and `.ds-page__center` are the layouts; `.ds-page__cta` with `.ds-page__cta-text`, `.ds-page__cta-title` and `.ds-page__cta-lead` is the closing band; `.ds-page__icon` sizes a 20px icon. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: the floating pill. `.ds-nav__inner`, `.ds-nav__list`, `.ds-nav__link` (current item `is-current`, a lighter pill with a hairline; the specimen sets it from the address) and `.ds-nav__actions` for the one button.\n- `.ds-nav__fold`: on a phone the navigation links fold into a `
` that is also a `.ds-menu`; its `.ds-nav__toggle` summary shows three bars (`.ds-nav__bars`) and the `.ds-menu__list` names every view as a `.ds-menu__link`, the current one on `--color-surface-strong` with a dot. Use it only at 640px and below, where `.ds-nav__list` is not shown.\n- `.ds-brand`: the site's mark and name, at the left end of the pill: `.ds-brand__mark` is a round 32px 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-h3` 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 headline card. `.ds-hero__text` holds a `.ds-badge`, the `.ds-hero__title` at the display size, the `.ds-hero__lead`, the `.ds-hero__form` (one `.ds-form__input` and one large button on a line) and a `.ds-hero__note`. `.ds-hero__art` holds two `.ds-hero__orb` circles behind the tilted `.ds-hero__card`, a small glass card of `.ds-hero__slot` rows (`.ds-hero__time`, `.ds-hero__who`, a badge; `is-current` for the highlighted row) under a `.ds-hero__card-title`. Once per site, on the home page.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.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.\n- `.ds-prose`: running text inside a panel: h1 to h3, paragraphs, lists, inline `code`. `.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. `.ds-link__sample` lays samples out in a row.\n- `.ds-button`: primary, a cream pill 46px high. `.ds-button--secondary` is a glass pill 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--inverse` is for the closing band, `.ds-button--large` for the hero and the closing band, `.ds-button--block` fills its 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 vertical form inside a panel. `.ds-form__row` puts two `.ds-form__field` side by side; a field is a `.ds-form__label` above a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron`), or `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text. `.ds-form__actions` closes the form above a hairline.\n- `.ds-table`: a comparison table as one card of glass: bar-glass head with small uppercase labels, row headings in `th`, hairline rows. `.ds-table__num` right-aligns a numeric column, `.ds-table__hl` lightens the cells of the recommended column, `.ds-table__opt` marks a column hidden below 640px, `.ds-table__meta` is muted text, `is-hover` on a row lightens it.\n- `.ds-list`: a card of glass with hairline rows. `.ds-list__item` is a `.ds-list__date`, a `.ds-list__body` (with `.ds-list__title` and `.ds-list__meta`) and a badge at the right.\n- `.ds-panel`: a free-standing card of glass. `.ds-panel__title` (20px, may carry a badge) and `.ds-panel__body` (15px, muted). In a plan card the body holds `.ds-panel__price` with a `.ds-panel__per` note and a `.ds-panel__list` of ticked lines, and `.ds-panel__foot` holds a block button; `.ds-panel--featured` gives the recommended plan a 2px accent edge. A quote card uses `.ds-panel__quote` and `.ds-panel__by`.\n- `.ds-grid`: the bento, four columns of 190px rows. `.ds-grid__cell--1` is two columns wide and two rows tall, `--2` two columns wide, `--3` and `--4` single; these four are tinted with `--color-fill-1` to `--color-fill-4`. `.ds-grid__cell--wide` is an untinted tile two columns wide. Inside: `.ds-grid__icon` chip, `.ds-grid__title`, `.ds-grid__text`, and in the large tile a `.ds-grid__week` strip of `.ds-grid__day` chips (`is-current` takes the button fill) and a `.ds-grid__figure` with its `.ds-grid__unit`.\n- `.ds-stat`: the row of summary figures, a strip of bar glass under the hero. Each `.ds-stat__item` is a `.ds-stat__value` (40px) above a `.ds-stat__label`, divided from the next by a hairline. Four items; two by two below 960px.\n- `.ds-tabs`: a segmented pill, centred; `.ds-tabs__tab` with `is-current` filled like the primary button. Use it for two to four options of one page (billing period), not for site navigation.\n- `.ds-badge`: pill for labels and counts: mint by default, `.ds-badge--alt` pink 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 left column of an inner page: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link` (a pill row, `is-current` lighter) with an optional count badge.\n- `.ds-notice`: information notice on the notice fill; `.ds-notice--error` is dark glass with the danger border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several 16px apart.\n- `.ds-pagination`: a centred row of round cells, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill, `is-disabled` greys an end.\n- `.ds-breadcrumb`: a small chip of bar glass above the page header, `.ds-breadcrumb__item` separated by angle marks, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed band (`--color-overlay`) with a centred `.ds-dialog__box` of the strongest glass, 460px wide: `.ds-dialog__title`, `.ds-dialog__body`, and `.ds-dialog__actions` as two equal buttons, the confirming one 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, centred: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: a full-width strip of bar glass: `.ds-footer__inner` with `.ds-footer__brand` and a line of text on the left, `.ds-footer__links` with `.ds-footer__link` on the right.\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- `.ds-carousel`: one slide showing in a sheet of glass: `.ds-carousel__track` of `.ds-carousel__slide` items that snap as they scroll, `.ds-carousel__dots` with `.ds-carousel__dot` (the current one `is-current`; dots are not links). On the home page each slide holds a `.ds-carousel__quote` and an `.ds-avatar__row`.\n\n## Never\n\n- `row-gap <= 6px`: rows of a table or list touch and are divided by a hairline; only bullets sit 6px apart.\n- `block-gap <= 112px`: bands sit 112px apart and nothing is further apart than that.\n- `content-width <= 1200px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 25%`: underline is a hover state.\n- `uppercase-text <= 10%`: uppercase is for small labels only.\n- `border-width <= 1px`: every border is a 1px hairline.\n- `border-radius <= 30px`: wells are 10px, the sheet, tiles and controls 20px; only badges and the navigation pill reach 30px.\n- `box-shadow-blur <= 40px`: sheet shadows blur 38px, the dialog 40px.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; the only gradient is the backdrop.\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 feature from `.ds-grid__cell`, a new control from `.ds-button--secondary` or `.ds-form__input`, an overlay from `.ds-dialog__box`, anything that floats over the page from `.ds-nav`. A new topic on the home page becomes a new `.ds-page__band` with its own two-part head. 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 closing band, keep every card free-standing with the mesh visible between cards, and never add a second strongly blurred card to a page that already has the hero.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1200px;\n --size-nav: 60px;\n --size-mock: 400px;\n --size-form: 420px;\n --size-side: 260px;\n --size-dialog: 460px;\n --size-control: 46px;\n --size-tile: 190px;\n --size-date: 112px;\n --size-icon: 20px;\n --size-chip: 44px;\n --size-dot: 8px;\n --size-thumb: 22px;\n --size-track: 6px;\n --space-1: 6px;\n --space-2: 10px;\n --space-3: 16px;\n --space-4: 24px;\n --space-5: 40px;\n --space-6: 64px;\n --space-7: 112px;\n}\n\n/* shell: a mesh backdrop, one centred column, sections stacked as bands */\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__inner {\n flex: 1 0 auto;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-page__band {\n margin-top: var(--space-7);\n}\n.ds-page__band-head {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-3) var(--space-6);\n align-items: end;\n margin-bottom: var(--space-5);\n}\n.ds-page__eyebrow {\n display: block;\n margin-bottom: 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-page__heading {\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__sub {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-4);\n align-items: stretch;\n}\n.ds-page__cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-form);\n gap: var(--space-4);\n align-items: start;\n}\n.ds-page__cols--side {\n grid-template-columns: var(--size-side) minmax(0, 1fr);\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__plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: stretch;\n}\n.ds-page__center {\n display: flex;\n justify-content: center;\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n/* closing band: the one inverted block of the page */\n.ds-page__cta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n padding: var(--space-6);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-page__cta-text {\n flex: 1;\n min-width: 0;\n}\n.ds-page__cta-title {\n margin: 0;\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__cta-lead {\n max-width: 52ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.8;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: one wide pill of bar glass floating over the top of the column */\n.ds-nav {\n position: sticky;\n top: var(--space-3);\n z-index: 5;\n width: calc(100% - 2 * var(--space-4));\n max-width: var(--size-page);\n margin: var(--space-3) auto 0;\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-pill);\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-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-nav);\n padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: 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-1));\n height: calc(var(--size-icon) + 2 * var(--space-1));\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-h3);\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 align-items: center;\n gap: var(--space-1);\n margin: 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\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=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#changelog:target) .ds-nav__link[href=\"#changelog\"],\n.ds-page:has(#waitlist:target) .ds-nav__link[href=\"#waitlist\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n}\n.ds-nav__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* breadcrumb: a small chip of bar glass above the page header */\n.ds-breadcrumb {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-6) 0 0;\n padding: var(--space-1) var(--space-3);\n list-style: none;\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-pill);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\\203A\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: inherit;\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: a large title on the backdrop, one line of lead, the action at the right */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-3) 0 var(--space-5);\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 max-width: 60ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\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: one large card of the strongest glass, text on the left, a tilted glass card on the right */\n.ds-hero {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-mock);\n gap: var(--space-6);\n align-items: center;\n overflow: hidden;\n margin-top: var(--space-5);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width-strong) 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__text {\n position: relative;\n min-width: 0;\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 max-width: 46ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__form {\n display: flex;\n gap: var(--space-2);\n max-width: 52ch;\n margin-top: var(--space-4);\n}\n.ds-hero__form .ds-form__input {\n flex: 1;\n min-width: 0;\n}\n.ds-hero__note {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-hero__art {\n position: relative;\n min-height: calc(var(--size-tile) + var(--space-7));\n}\n.ds-hero__orb {\n position: absolute;\n border-radius: 50%;\n}\n.ds-hero__orb--a {\n top: 0;\n right: 0;\n width: calc(var(--space-7) + var(--space-5));\n height: calc(var(--space-7) + var(--space-5));\n background: radial-gradient(circle at 30% 25%, var(--color-accent), var(--color-fill-2));\n}\n.ds-hero__orb--b {\n bottom: 0;\n left: 0;\n width: var(--space-7);\n height: var(--space-7);\n background: radial-gradient(circle at 30% 25%, var(--color-accent-alt), var(--color-fill-3));\n}\n.ds-hero__card {\n position: absolute;\n top: 8%;\n right: 8%;\n bottom: 8%;\n left: 8%;\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-3);\n background: var(--fill-panel);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transform: rotate(3deg);\n}\n.ds-hero__card-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-hero__slot {\n display: flex;\n align-items: center;\n justify-content: space-between;\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-muted);\n border-radius: min(var(--radius-control), var(--radius-panel));\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-hero__slot.is-current {\n background: var(--color-surface-strong);\n border-color: var(--color-border-strong);\n}\n.ds-hero__time {\n color: var(--color-text-muted);\n font-variant-numeric: tabular-nums;\n}\n.ds-hero__who {\n flex: 1;\n min-width: 0;\n font-weight: var(--weight-bold);\n}\n\n/* stats: a strip of bar glass under the hero, four figures side by side */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0;\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-page);\n color: var(--color-bar-alt-text);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n padding: var(--space-2) var(--space-4);\n text-align: center;\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n opacity: 0.8;\n}\n.ds-stat__value {\n margin: 0;\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\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}\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 padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--space-1);\n color: var(--color-bar-alt-text);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\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: min(var(--radius-control), var(--radius-panel));\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: pills */\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 box-shadow: none;\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-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 box-shadow: none;\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 box-shadow: none;\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n box-shadow: none;\n color: var(--color-button-secondary-text);\n}\n/* on the inverted band the button takes the band'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-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button--block {\n display: flex;\n width: 100%;\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 text-shadow: none;\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 free-standing card of glass */\n.ds-panel {\n display: flex;\n flex-direction: column;\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n flex: 1;\n padding: var(--space-3) var(--space-4) 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 padding-top: var(--space-4);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n.ds-panel__quote {\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n}\n.ds-panel__by {\n display: block;\n margin-top: var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel__price {\n display: flex;\n align-items: baseline;\n gap: 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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-panel__per {\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 letter-spacing: 0;\n text-shadow: none;\n}\n.ds-panel__list {\n margin: var(--space-3) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text);\n}\n.ds-panel__list li {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n}\n.ds-panel__list li::before {\n content: \"\";\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-panel__foot {\n padding: 0 var(--space-4) var(--space-4);\n}\n.ds-panel--featured {\n border: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n\n/* form: one card, fields in two columns */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\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__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-4);\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 color: var(--color-input-text);\n font-family: var(--font-body);\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.6;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\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-5);\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__hint {\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-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin: 0;\n accent-color: var(--color-accent);\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 card of glass, a bar-glass head, hairline rows, one highlighted column */\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 thead 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 tbody th {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n.ds-table tbody th,\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 tbody tr:hover th,\n.ds-table tr.is-hover td,\n.ds-table tr.is-hover th {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table td.ds-table__hl {\n background: var(--color-surface);\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: a card of glass, each row a date, a title with its line of meta, a marker */\n.ds-list {\n margin: 0;\n padding: 0;\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: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr) auto;\n gap: var(--space-3);\n align-items: center;\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__date {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n font-variant-numeric: tabular-nums;\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-family: var(--font-heading);\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}\n\n/* grid: a bento of feature tiles, four of them tinted */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-tile), auto);\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-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-grid__cell--1 {\n grid-column: span 2;\n grid-row: span 2;\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n grid-column: span 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__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-chip);\n height: var(--size-chip);\n flex: none;\n margin-bottom: var(--space-3);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-control), var(--radius-panel));\n color: var(--color-heading);\n}\n.ds-grid__title {\n margin: auto 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\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-grid__cell--1 .ds-grid__title {\n font-size: var(--text-h2);\n}\n.ds-grid__figure {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-grid__unit {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-shadow: none;\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-grid__week {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n}\n.ds-grid__day {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-2) 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: min(var(--radius-control), var(--radius-panel));\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-grid__day strong {\n color: var(--color-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-grid__day.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-grid__day.is-current strong {\n color: var(--color-button-text);\n}\n\n/* tabs: a segmented pill, centred */\n.ds-tabs {\n display: inline-flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\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-pill);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n color: var(--color-bar-alt-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 transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-border-muted);\n}\n.ds-tabs__tab.is-current {\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\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 with headed groups of links */\n.ds-sidebar {\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-sidebar__heading {\n margin: 0 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 calc(-1 * var(--space-2));\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\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\n/* notice */\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-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 color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\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-3);\n}\n\n/* pagination: round cells in a row, centred */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 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-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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\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 band, 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-page);\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 letter-spacing: var(--heading-tracking);\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: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\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: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-5) 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 text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-chip);\n height: var(--size-chip);\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* footer: a full-width strip of bar glass */\n.ds-footer {\n margin-top: var(--space-7);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\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-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: var(--space-5) var(--space-4);\n}\n.ds-footer__brand {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\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 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}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\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-thumb);\n height: var(--size-thumb);\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-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + 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-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - 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-thumb));\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--90 { width: 90%; }\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--2,\n.ds-avatar--3,\n.ds-avatar--4 {\n color: var(--color-text);\n}\n.ds-avatar--2 {\n background: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\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.ds-carousel {\n overflow: hidden;\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-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n opacity: 0.45;\n cursor: default;\n}\n.ds-carousel__track {\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n list-style: none;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__track::-webkit-scrollbar {\n display: none;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n padding: var(--space-4);\n scroll-snap-align: start;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n padding: 0 0 var(--space-3);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-text) 28%, transparent);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-accent);\n}\n.ds-carousel__quote {\n margin: 0 0 var(--space-3);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n@media (max-width: 960px) {\n .ds-hero,\n .ds-page__band-head,\n .ds-page__split,\n .ds-page__cols,\n .ds-page__plans {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero {\n padding: var(--space-5);\n }\n .ds-hero__art {\n display: none;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat__item:nth-child(odd) {\n border-left: 0;\n }\n .ds-page__band {\n margin-top: var(--space-6);\n }\n}\n@media (max-width: 640px) {\n .ds-page__inner {\n padding: 0 var(--space-3);\n }\n .ds-nav {\n width: calc(100% - 2 * var(--space-3));\n border-radius: var(--radius-panel);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-1) var(--space-3);\n padding: var(--space-2) var(--space-2) var(--space-1) var(--space-3);\n }\n .ds-nav__list {\n order: 3;\n flex-basis: 100%;\n justify-content: space-between;\n gap: 0;\n margin: 0;\n }\n .ds-nav__link {\n padding: var(--space-2);\n }\n .ds-hero {\n margin-top: var(--space-4);\n padding: var(--space-4);\n }\n .ds-hero__title,\n .ds-page__heading,\n .ds-page__cta-title {\n font-size: var(--text-h2);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead,\n .ds-page__sub,\n .ds-page__cta-lead,\n .ds-page-header__lead {\n font-size: var(--text-base);\n }\n .ds-hero__form {\n flex-direction: column;\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n grid-auto-rows: auto;\n gap: var(--space-3);\n }\n .ds-grid__cell--1,\n .ds-grid__cell--2,\n .ds-grid__cell--wide {\n grid-column: auto;\n grid-row: auto;\n }\n .ds-grid__title {\n margin-top: 0;\n }\n .ds-grid__figure {\n margin-bottom: var(--space-3);\n font-size: var(--text-h1);\n }\n .ds-page__cta {\n padding: var(--space-4);\n }\n .ds-breadcrumb {\n margin-top: var(--space-5);\n }\n .ds-page-header__text {\n flex-basis: 100%;\n }\n .ds-list__item {\n grid-template-columns: minmax(0, 1fr) auto;\n }\n .ds-list__date {\n grid-column: 1 / -1;\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2);\n }\n .ds-table th:first-child {\n padding-left: var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-3);\n }\n .ds-dialog__actions {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-footer__inner {\n padding: var(--space-4) var(--space-3);\n }\n}\n.ds-carousel {\n display: flex;\n flex-direction: column;\n}\n.ds-carousel__track {\n flex: 1;\n align-items: center;\n}\n.ds-nav__fold {\n display: none;\n}\n.ds-nav__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n color: var(--color-bar-text);\n list-style: none;\n cursor: pointer;\n}\n.ds-nav__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-nav__toggle:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-nav__bars {\n position: relative;\n display: block;\n width: var(--space-4);\n height: var(--space-3);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-nav__bars::before {\n content: \"\";\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n transform: translateY(-50%);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold .ds-menu__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__fold .ds-menu__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__fold .ds-menu__link[href=\"#pricing\"],\n.ds-page:has(#changelog:target) .ds-nav__fold .ds-menu__link[href=\"#changelog\"],\n.ds-page:has(#waitlist:target) .ds-nav__fold .ds-menu__link[href=\"#waitlist\"] {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold .ds-menu__link[href=\"#home\"]::after,\n.ds-page:has(#home:target) .ds-nav__fold .ds-menu__link[href=\"#home\"]::after,\n.ds-page:has(#pricing:target) .ds-nav__fold .ds-menu__link[href=\"#pricing\"]::after,\n.ds-page:has(#changelog:target) .ds-nav__fold .ds-menu__link[href=\"#changelog\"]::after,\n.ds-page:has(#waitlist:target) .ds-nav__fold .ds-menu__link[href=\"#waitlist\"]::after {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent);\n border-radius: var(--radius-pill);\n}\n/* ---------- below 1040px the links fold into a menu at the right of the brand ---------- */\n@media (max-width: 1040px) {\n .ds-nav {\n background: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n .ds-nav::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n border-radius: inherit;\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-nav__inner {\n flex-wrap: wrap;\n }\n .ds-nav__list {\n display: none;\n }\n .ds-brand {\n flex: none;\n }\n .ds-nav__actions {\n margin-left: auto;\n }\n .ds-nav__fold {\n position: static;\n display: block;\n }\n .ds-nav__fold .ds-menu__list {\n top: calc(100% + var(--space-2));\n right: 0;\n left: 0;\n min-width: 0;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n gap: var(--space-1);\n padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);\n }\n .ds-nav__actions {\n gap: var(--space-1);\n }\n .ds-brand__name {\n font-size: var(--text-large);\n }\n .ds-nav__actions .ds-button {\n padding-right: var(--space-2);\n padding-left: var(--space-2);\n white-space: nowrap;\n font-size: var(--text-small);\n }\n}\n@media (max-width: 1100px) {\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", "specimen.html": "\n\n\n\n\nchronoskin: bookings for shared workshops\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Get early access\n
\n \n \n
\n
\n
\n
\n\n
\n\n
\n\n
\n
\n Opening in spring\n

Book the kiln, not a meeting about the kiln

\n

One calendar for every bench, press and kiln in a shared workshop. Members book their own hours and the waitlist moves by itself.

\n
\n \n Join the waitlist\n
\n

214 workshops are ahead of you. No card needed. See the plans

\n
\n
\n \n \n
\n Kiln 2, Thursday 3 free\n 09:00Glaze firingBooked\n 13:00Free until 17:00Book\n 17:00Evening classWaitlist 2\n 21:00Cooling, door lockedAuto\n
\n
\n
\n\n
\n
\n
workshops in the pilot
\n
38
\n
\n
\n
hours booked last month
\n
12,460
\n
\n
\n
of freed slots refilled
\n
91%
\n
\n
\n
to set up a space
\n
25 min
\n
\n
\n\n
\n
\n
\n What it does\n

Everything the sign-up sheet on the door could not do

\n
\n

Six parts, switched on one at a time. Most workshops start with the calendar and add the rest when they miss it.

\n
\n\n
\n
\n
    \n
  • Mon4
    • \n
  • Tue7
    • \n
  • Wed2
    • \n
  • Thu9
    • \n
  • Fri6
    • \n
  • Sat11
    • \n
  • Sun3
    • \n
\n 42 bookings this week, 9 of them today\n

One calendar for every machine

\n

Benches, presses, looms and kilns side by side, each with its own opening hours and its own rules for who may book.

\n
\n
\n \n

A waitlist that moves by itself

\n

When someone cancels, the next member is offered the slot and has two hours to take it.

\n
\n
\n \n

Keys and inductions

\n

Only members who passed the induction can book the lathe.

\n
\n
\n \n

Fair-use limits

\n

Cap the hours per member and week, per machine.

\n
\n
\n \n

Billing by the hour

\n

Kiln hours, materials and day passes land on one statement per member at the end of the month.

\n
\n
\n \n

Opens the door, too

\n

A booking can unlock the room for its own hours and nothing else. Works with the common keypad locks.

\n
\n
\n
\n\n
\n
\n
\n From the pilot\n

Shipped this month

\n
\n

The pilot workshops tell us what is missing and we build it in the open. Read the whole changelog

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

    We used to lose a press day every week to a booking nobody remembered making. Now the slot goes to the next person before we have noticed.

    \n
    MSMarta SolheimA print studio, 46 members
    \n
    • \n
  • \n

    The kiln rota took an evening a month. It takes nothing now.

    \n
    TRTomas ReuterA ceramics studio, 28 members
    \n
    • \n
\n
\n
\n
\n
\n\n
\n
\n
\n

Open your workshop's calendar in an afternoon

\n

Free while we are in the pilot. Bring the spreadsheet you use today and we import it.

\n
\n Join the waitlist\n
\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Product
    3. \n
  3. Pricing
    4. \n
\n\n
\n
\n

Priced by the room, not by the member

\n

Every plan has unlimited members. You pay for the spaces you put on the calendar.

\n
\n
\n Join the waitlist\n
\n
\n\n
\n\n
\n \n
\n\n
\n
\n

Shed

\n
\n

0 for one room, for good

\n
    \n
  • One room, up to five machines
    • \n
  • Calendar and waitlist
    • \n
  • Statements as a spreadsheet
    • \n
\n
\n
Start with Shed
\n
\n
\n

Workshop Most pilots

\n
\n

29 per room and month

\n
    \n
  • Any number of machines
    • \n
  • Inductions and fair-use limits
    • \n
  • Billing by the hour
    • \n
  • Door locks for two rooms
    • \n
\n
\n
Join the waitlist
\n
\n
\n

Guild

\n
\n

79 per site and month

\n
    \n
  • Every room on one site
    • \n
  • Several sites under one account
    • \n
  • Door locks everywhere
    • \n
  • A person to call
    • \n
\n
\n
Talk to us
\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
What you getShedWorkshopGuildNotes
Rooms on the calendar11060A room is anything with a door
Machines per room54040Benches and tables count as machines
Bookings per month2005,00050,000Cancelled bookings are not counted
Door locks0260The common keypad locks
History kept, in months636120Statements are kept for ten years on every plan
\n\n
\n
\nWhat counts as a room?\n

Anything members book as one place: a ceramics studio, a darkroom, the yard with the forge. Machines inside a room are free on every paid plan.

\n
\n
\nIs the pilot free?\n

Yes. Nobody pays until the spring opening, and pilot workshops keep their first room free afterwards.

\n
\n
\nCan we change plan later?\n

At any time. The new price counts from the next month.

\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Product
    3. \n
  3. Changelog
    4. \n
\n\n
\n
\n

Changelog

\n

What changed for the pilot workshops, newest first.

\n
\n
\n Get it by email\n
\n
\n\n
\n\n \n\n
\n\n
\n
\n
\n

Recurring bookings for classes

\n

A class that meets every Tuesday no longer needs twelve bookings.

\n

Pick a slot, choose Repeat weekly and an end date. The whole series is checked against opening hours and fair-use limits before it is saved, and each date can still be moved on its own. In an export a series carries the field series_id.

\n

What happens on a clash

\n

If one date of the series is already taken, the rest is booked and you are put on the waitlist for that date. The Workshop plan allows twenty series at a time.

\n

Also in this release

\n
    \n
  • The week view starts on the day your workshop opens.
    • \n
  • Waitlist offers now say how long the slot is.
    • \n
  • Statements round to the quarter hour, not the minute.
    • \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
\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Pricing
    3. \n
  3. Waitlist
    4. \n
\n\n
\n
\n

Join the waitlist

\n

Tell us about your workshop. We open ten new spaces every week, in the order they signed up.

\n
\n
\n Back to the plans\n
\n
\n\n
\n\n
\n\n
\n

Your workshop

\n
\n
\n
\n
\n \n \n
\n
\n \n \n Enter a complete email address.\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n \n \n A room is anything with a door.\n
\n
\n
\n \n \n
\n \n
\n\n\n
\n
\n \n Not now\n \n \n
\n
\n
\n
\n\n
\n
\n

Leave the waitlist?

\n
You give up place 215. If you join again later you start at the end of the list.
\n
\n Keep my place\n Leave the list\n
\n
\n
\n\n
\n\n
\n\n
\n
\n \n
You would be number 215. At ten spaces a week your turn comes in late summer.
\n
\n
\n \n
This workshop is already on the list. Someone signed up Tidewater Print Room in January. Ask them to add you instead.
\n
\n
\n\n
\n

What happens next

\n
\n
    \n
  1. We write to confirm your place.
    2. \n
  2. When your turn comes, we import the sheet you use today.
    3. \n
  3. You invite your members with one link.
    4. \n
\n
\n
\n\n
\n \n

No invitations sent yet

\n

Every workshop you invite that joins moves you up five places.

\n Invite a workshop\n
\n\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.landing.s05.p03.t02.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"landing\",\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-5322\",\n \"short\": \"v1-gl-5322\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(241 247 255);\n --color-canvas: rgb(241 247 255);\n --color-surface: rgb(255 255 255 / 0.4);\n --color-surface-alt: rgb(255 255 255 / 0.6);\n --color-surface-strong: rgb(255 255 255 / 0.8);\n --color-bar: rgb(225 236 244 / 0.6);\n --color-bar-text: rgb(39 55 76);\n --color-bar-alt: rgb(241 247 255 / 0.6);\n --color-bar-alt-text: rgb(39 55 76);\n --color-inverse: rgb(33 58 90);\n --color-inverse-text: rgb(255 255 255);\n --color-text: rgb(39 55 76);\n --color-text-muted: rgb(39 55 76 / 0.72);\n --color-heading: rgb(31 57 88);\n --color-heading-alt: rgb(33 58 90);\n --color-link: rgb(47 110 211);\n --color-link-quiet: rgb(39 55 76);\n --color-link-visited: rgb(120 64 184);\n --color-link-hover: rgb(73 138 255);\n --color-link-active: rgb(31 57 88);\n --color-border: rgb(255 255 255 / 0.6);\n --color-border-strong: rgb(128 175 231);\n --color-border-muted: rgb(39 55 76 / 0.11);\n --color-accent: rgb(47 110 211);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(128 175 231);\n --color-fill-1: rgb(128 175 231);\n --color-fill-2: rgb(80 149 228);\n --color-fill-3: rgb(73 138 255);\n --color-fill-4: rgb(225 236 244);\n --color-button: rgb(47 110 211);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(31 57 88);\n --color-button-secondary: rgb(255 255 255 / 0.25);\n --color-button-secondary-text: rgb(31 57 88);\n --color-input: rgb(255 255 255 / 0.8);\n --color-input-text: rgb(39 55 76);\n --color-input-border: rgb(128 175 231);\n --color-disabled: rgb(225 236 244);\n --color-disabled-text: rgb(134 134 139);\n --color-danger: rgb(233 66 86);\n --color-danger-surface: rgb(248 200 192 / 0.6);\n --color-success: rgb(11 158 67);\n --color-warning: rgb(255 90 0);\n --color-notice: rgb(33 58 90 / 0.75);\n --color-notice-text: rgb(255 255 255);\n --color-focus: rgb(73 138 255);\n --color-shadow: rgb(71 97 206 / 0.36);\n --color-overlay: rgb(39 55 76 / 0.61);\n}\n\n/* @part type */\n:root {\n --font-body: \"Segoe UI\", -apple-system, Roboto, \"Helvetica Neue\", sans-serif;\n --font-heading: \"Segoe UI\", -apple-system, Roboto, \"Helvetica Neue\", sans-serif;\n --font-ui: \"Segoe UI\", -apple-system, Roboto, \"Helvetica Neue\", sans-serif;\n --font-mono: Consolas, Menlo, Monaco, \"Liberation Mono\", monospace;\n --text-base: 16px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 24px;\n --text-display: 64px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.5;\n --line-heading: 1.25;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 20px;\n --radius-panel: 10px;\n --radius-pill: 30px;\n --radius-page: 20px;\n --shadow-panel: 0 22px 38px -6px var(--color-shadow);\n --shadow-control: 0 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 0 8px 32px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 20px 40px 0 var(--color-shadow);\n --shadow-text: 0 2px 4px var(--color-shadow);\n --fill-page: linear-gradient(320deg, var(--color-fill-1), var(--color-fill-2), var(--color-fill-3));\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: color-mix(in srgb, var(--color-surface), white 20%);\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: var(--color-button-secondary);\n --transition: background-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 16px;\n}\n" } }