{ "id": "v1-sg-3323-dc", "long_id": "v1.saas-gradient.docs.s03.p03.t02.u03.dc", "name": "SaaS gradient help centre", "era": { "slug": "saas-gradient", "code": "sg", "name": "SaaS gradient", "years": [ 2016, 2021 ], "description": "The start-up product page of 2016 to 2021: slanted or curved bands of purple-to-blue gradient, white rounded cards with soft wide shadows, friendly geometric sans, pill buttons and flat illustration blocks." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "density": "compact", "summary": "This is the help centre of a start-up product of 2016 to 2021: a band of two-colour gradient whose lower edge is one long curve carries a centred question and a large white search field, and the collections sit below as white cards with round icon tiles that climb onto the band. Inner pages keep a shorter band for the breadcrumb and title and put articles, lists and forms in soft-shadowed cards on a warm pale page. The type pairs a geometric display face with a plain humanist sans, and corners are tight.", "url": "https://chrono.skin/s/v1-sg-3323-dc", "preview_url": "https://chrono.skin/s/v1-sg-3323-dc/specimen.html", "files": { "STYLE.md": "# SaaS gradient help centre\n\n## Summary\n\nThis is the help centre of a start-up product of 2016 to 2021: a band of two-colour gradient whose lower edge is one long curve carries a centred question and a large white search field, and the collections sit below as white cards with round icon tiles that climb onto the band. Inner pages keep a shorter band for the breadcrumb and title and put articles, lists and forms in soft-shadowed cards on a warm pale page. The type pairs a geometric display face with a plain humanist sans, and corners are tight.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in `.ds-wrap`, centred, at most `--size-page` (980px) wide with `--space-5` side padding. The band and the footer run the full width of the window.\n- Navigation is one transparent row, `--size-nav` (68px) tall, on the gradient: the `.ds-brand`, a `.ds-nav__tag` naming the help centre behind a hairline, and three links at the right, the current one underlined. The hero or page header is pulled up under it by a negative margin.\n- The home view stacks: `.ds-hero`, centred, with the title, one line, the `.ds-search` field and a line of often-asked links, its lower edge curved with `clip-path: ellipse()`; then `.ds-main--home`, which rises onto the band: `.ds-grid`, six collection cards three across; `.ds-cols` (5 to 3, `--level`) with the most-read list beside the service status; `.ds-stat`, three figures on a tinted strip; and `.ds-cta`, a gradient card. Blocks are `--space-6` apart.\n- Inner pages have no hero. They open with `.ds-page-header`: the same curved band, shorter, holding the breadcrumb, the title, one line of text and at most one white button at the right. `.ds-main` rises `--space-8` onto it. A collection is `.ds-cols--side` (2 to 5): the collections `.ds-sidebar` in a card at the left, and at the right one card with `.ds-tabs` on its head, the article list and a `.ds-table__foot` with the pagination. An article and the contact form use `.ds-cols` (5 to 3) with small cards at the right.\n- Views. The specimen is the help centre of an online booking product. `home` is the search page. `collection` lists the articles of one collection under tabs, with the collections at the left and an empty video box. `article` is one article with a table of plan limits and the feedback row, beside a notice, related links and what comes next. `contact` is the message form with its notices and buttons beside two suggested articles and the open discard dialog.\n- Below 860px the columns stack and collections stand two across; below 640px `.ds-nav__links` is not shown and the menu `.ds-nav__menu` takes its place at the end of the bar after the brand, listing every view and marking the one showing, the curve flattens, and grids and figures go to one column. A wide table scrolls inside `.ds-table__wrap`; the page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, pagination gaps), `--space-2` 8px (search field padding, between badges, service rows), `--space-3` 12px (button and cell vertical padding), `--space-4` 16px (list rows, between form rows, tab padding), `--space-5` 24px (card padding, grid gap, page gutter), `--space-6` 36px (between blocks, footer padding), `--space-7` 60px (hero top, foot of a view), `--space-8` 88px (how far the body rises onto the band).\n- Other sizes: `--size-mark` 30px, `--size-icon` 48px (icon tiles), `--size-control` 36px (pagination), `--size-search` 620px, `--size-dialog` 400px.\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\nThe conventions are the era's, as its first layout sets them out.\n\n- The gradient is `--fill-inverse` (from `--color-fill-1` to `--color-fill-2`); text on it is `--color-inverse-text`. It fills the band, the trial card in the rail and the progress bars. Only `.ds-button--inverse` and `.ds-button--ghost` stand on it; the search field on the band is a translucent pill in `--color-inverse-text`.\n- `--color-fill-1` to `--color-fill-4` colour the rail icons, the round icon tiles, avatars, sparklines and the two chart lines. A fill carries an icon or initials in `--color-inverse-text`, never running text.\n- `--color-page` is the work area, `--color-surface` (through `--fill-panel`) the cards and the rail, `--color-surface-alt` a hovered table row, the dialog foot and the empty state, `--color-surface-strong` the current rail link, the current sidebar row, the quiet badge and the progress track.\n- `--fill-bar` with `--color-bar-text` is the table head. `--fill-bar-alt` with `--color-bar-alt-text` is the footer line.\n- Text is `--color-text` (`#576f7f`), meta `--color-text-muted`, headings and figures `--color-heading` (`#0e304b`); sidebar titles and h3 in prose are `--color-heading-alt`. The change under a figure is `--color-success` (`.ds-stat__up`) or `--color-danger` (`.ds-stat__down`).\n- `--color-button` (navy `#033156`, white text) is the action colour on cards, the current page number and the edge under the current tab. Links are `--color-link`, bold, underlined only on hover.\n- Badges, notices and the destructive button follow the era's rules: `--fill-accent` for the default badge, tints mixed into `--color-surface` for `--alt` and the status variants, `--color-notice` with `--color-notice-text`, `--color-danger` with `--color-button-text`.\n- Two families: `--font-heading` is a rounded sans (Varela Round, Arial Rounded MT Bold) for titles and figures, `--font-body` and `--font-ui` a plain humanist sans (Nunito, Open Sans, Helvetica Neue); `--font-mono` for code. `--text-base` 16px at `--line-body` 1.6; `--text-ui` 15px; `--text-small` 13px (labels, meta, badges); `--text-large` 20px (band text); `--text-h1` 38px (band titles, figures); `--text-h2` 27px; `--text-h3` 19px (card titles). `--text-display` 50px is not used in this layout: the greeting is `--text-h1`.\n- Headings and controls are bold (`--weight-heading`, `--weight-ui` 700). Nothing is uppercase.\n- Surface: pills for buttons, inputs, rail links and badges (`--radius-control`, `--radius-pill` 100px); cards `--radius-panel` 16px; `--radius-page` 28px on the dialog's backdrop. `--shadow-panel` is one very wide, soft, tinted shadow (60px blur); `--shadow-dialog` is deeper and also marks a hovered project card. `--border-width-strong` 3px is the edge under the current tab, the ring of an unticked checklist mark and the ring of the account's initials.\n- One-off values made with `calc()` and `color-mix()`: the translucent search field (`--color-inverse-text` at 16%, its edge at 30%), the ghost button border (55%), the account ring's wash (20%), tinted badges, the hairlines of the chart (a repeating gradient of `--color-border-muted` every 25%), the area under the first chart line (its own colour at 10% opacity). Progress widths are percentages.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column. `.ds-main` is the body of a view, stacked `--space-6` apart and raised onto the band (`--home` a little further).\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a 30px tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in bold. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the transparent row on the gradient. `.ds-nav__inner` centres it; `.ds-nav__tag` names the section; `.ds-nav__links` holds `.ds-nav__link`, the current one underlined (`is-current`). In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the curved gradient band of the home view, centred: `.ds-hero__title`, `.ds-hero__lead`, a `.ds-search` and `.ds-hero__topics` of `.ds-hero__topic` links. One per site.\n- `.ds-search`: the large search field, a white bar holding a `.ds-search__icon`, the `.ds-search__input` and one primary button.\n- `.ds-page-header`: the band of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` holds the breadcrumb, `.ds-page-header__title` and `.ds-page-header__text` at the left and `.ds-page-header__actions` at the right.\n- `.ds-cols`: main and side column, 5 to 3; `--side` 2 to 5 with the sidebar first; `--level` ends the columns on one line. `.ds-stack` stacks cards; `.ds-panel--grow` fills a column.\n- `.ds-grid`: six collection cards, three across. Each `.ds-grid__cell` is a centred link: a round `.ds-tile`, `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__count`.\n- `.ds-tile`: an icon tile on `--color-fill-1` (`--2`, `--3`, `--4`; `--round`).\n- `.ds-stat`: the strip of three figures on `--color-surface-strong`; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`.\n- `.ds-rows`: plain rows in a card, `.ds-rows__row`, a name at the left and a badge at the right; used for the service status.\n- `.ds-cta`: the closing call to action, a gradient card with `.ds-cta__title`, `.ds-cta__text` and one inverse button.\n- `.ds-prose`: running text of an article: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph. `.ds-article__meta` is the line above it (a badge, the date, the author); `.ds-article__block` frames a table inside the text; `.ds-feedback` is the closing row with the question and two small buttons.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: button with 5px corners, 13px bold uppercase. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` and `--ghost` (on the gradient only), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields, inside a card. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table: a small bold head on `--fill-bar`, hairlines between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the last row of a card, pagination at the left and a count at the right.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the white card with the soft shadow. `.ds-panel__head` holds the `.ds-panel__title` and an optional link above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph; `--side` is a slim card around a `.ds-sidebar`.\n- `.ds-tabs`: underlined tabs on the head of a card: `.ds-tabs__tab`, the current one (`is-current`) in the heading colour over a 2px edge in `--color-button`.\n- `.ds-badge`: small tag, 12px bold, on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with a `.ds-sidebar__count`; the current row (`is-current`) is on `--color-surface-strong`.\n- `.ds-notice`: tinted message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` squares; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`. It stands on the band, above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a card in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned on `--color-surface-alt`.\n- `.ds-empty`: a centred message on `--color-surface-alt`: `.ds-empty__icon` (a circle of `--color-fill-3`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-footer`: the closing band on `--fill-bar-alt`, centred: the brand, `.ds-footer__links` of `.ds-footer__link`, and a `.ds-footer__legal` line.\n- `.ds-menu`: a drop-down, a `
` whose `.ds-menu__button` is the summary and whose `.ds-menu__list` of `.ds-menu__link` opens as a small card under it. Use it for a group of links under one bar item and for the account.\n- `.ds-nav__menu`: the `.ds-menu` that replaces the bar's links on a phone. It lists every view, marks the one showing, and sits last in the bar after the brand and the one action that stays.\n- `.ds-switch`: an on or off setting drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, then the label). Use it for a setting that takes effect at once, not for a choice sent with a form's other fields.\n- `.ds-tooltip`: a short hint on hover or focus; `.ds-tooltip--mark` is the small round question mark beside a label, `.ds-tooltip__text` the hint, `.ds-tooltip--start` opens it from the left edge. One sentence at most.\n- `.ds-accordion`: questions that open one by one, each a `
` with `.ds-accordion__title` and `.ds-accordion__body`. Use it for common questions inside a panel.\n- `.ds-progress`: a thin pill bar with `.ds-progress__bar` (`--20` to `--100` set the width). `.ds-meter` puts a name and a figure above it. Use it for steps done and for usage against a limit.\n- `.ds-avatar`: a person as initials on a round fill (`--1`, `--2`, `--4` change the fill); `.ds-who` sets it beside a name. Use it wherever a named person appears.\n\n## Never\n\n- `font-weight <= 700`: headings and figures are bold, never black.\n- `font-size >= 13px`: labels, meta and badges are the smallest text.\n- `font-size <= 38px`: band titles and figures are the largest text.\n- `font-families <= 3`: a rounded heading face, a body sans and monospace for code.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `text-shadow = none`: text is flat, also on the gradient.\n- `animation = none`: nothing moves by itself; only hover states ease.\n- `border-width <= 2px`: borders are hairlines; 2px marks the current tab and navigation link.\n- `border-radius <= 8px`: controls and cards are 5px and the largest blocks 8px; only circles are rounder.\n- `box-shadow-blur <= 64px`: shadows are soft and wide but end at 64px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new kind of page opens with a `.ds-page-header` band and puts its content in `.ds-main`, in cards; a new collection is another `.ds-grid__cell` with a round tile on one of the fills; anything that lists or explains is a `.ds-panel` in a column of `.ds-cols`. Text goes on cards, on the page and, in `--color-inverse-text`, on the gradient; fills take an icon only. Put only `--inverse` and `--ghost` buttons directly on the gradient, and keep at most one primary button in a card. Keep corners tight on their tokens, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-menu: 190px;\n --size-tip: 220px;\n --size-page: 980px;\n --size-nav: 68px;\n --size-nav-tall: 104px;\n --size-mark: 30px;\n --size-icon: 48px;\n --size-control: 36px;\n --size-dialog: 400px;\n --size-search: 620px;\n --size-avatar: 36px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 13px;\n --space-5: 19px;\n --space-6: 29px;\n --space-7: 48px;\n --space-8: 70px;\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.ds-page {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 35%, transparent);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n max-width: 68ch;\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-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n color: var(--color-text);\n font-size: var(--text-large);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\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}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--more::after {\n content: \" \\2192\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\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 margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\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-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n transform: translateY(calc(var(--space-1) * -0.25));\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: none;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-border);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: color-mix(in srgb, var(--color-inverse-text) 55%, transparent);\n background: transparent;\n color: var(--color-inverse-text);\n box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-button--small {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n border-color: transparent;\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\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 color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-8) + var(--space-6));\n border-radius: var(--radius-panel);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\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-ui);\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 color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--space-4);\n height: var(--space-4);\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n}\n\n/* table */\n.ds-table__wrap {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-ui);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-list__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-list__title {\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: the white card with the soft wide shadow */\n.ds-panel {\n min-width: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__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 text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n font-size: var(--text-ui);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.7;\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 60%, var(--color-heading));\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\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}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\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 text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-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 color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\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 font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item {\n color: inherit;\n opacity: 0.8;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"/\";\n margin-left: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-7) var(--space-4);\n border-radius: var(--radius-page);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) 0;\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 text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n position: relative;\n display: inline-block;\n flex: none;\n width: calc(var(--text-large) * 0.8);\n height: calc(var(--text-large) * 0.8);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: max(var(--border-width), calc(var(--text-large) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body {\n padding: var(--space-3) var(--space-5) var(--space-5);\n font-size: var(--text-ui);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--color-surface-alt);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-inverse-text);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-1) 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}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* tabs */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-tabs__tab {\n display: inline-block;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n margin-bottom: calc(var(--border-width) * -1);\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-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-button);\n color: var(--color-heading);\n}\n\n/* shared small pieces: an icon tile on one of the four fills, a sparkline */\n.ds-tile {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: var(--radius-panel);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n}\n.ds-tile svg {\n width: 55%;\n height: 55%;\n}\n.ds-tile--2 { background: var(--color-fill-2); }\n.ds-tile--3 { background: var(--color-fill-3); }\n.ds-tile--4 { background: var(--color-fill-4); }\n.ds-tile--round { border-radius: 50%; }\n\n@media (max-width: 640px) {\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n}\n\n/* ---- layout: help centre ---- */\n.ds-wrap {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* nav: one centred row lying on the curved gradient band */\n.ds-nav {\n position: relative;\n z-index: 2;\n height: var(--size-nav);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n height: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__tag {\n padding-left: var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n font-size: var(--text-ui);\n opacity: 0.9;\n white-space: nowrap;\n}\n.ds-nav__links {\n display: flex;\n gap: var(--space-5);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n opacity: 0.85;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\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(#collection:target) .ds-nav__link[href=\"#collection\"],\n.ds-page:has(#article:target) .ds-nav__link[href=\"#collection\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n border-bottom-color: var(--color-inverse-text);\n opacity: 1;\n}\n\n/* hero: a centred search on the band, whose lower edge is one long curve */\n.ds-hero {\n margin-top: calc(var(--size-nav) * -1);\n padding: calc(var(--size-nav) + var(--space-7)) 0 calc(var(--space-8) + var(--space-8));\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-align: center;\n clip-path: ellipse(90% 100% at 50% 0%);\n}\n.ds-hero__title {\n margin: 0;\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-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) auto 0;\n font-size: var(--text-large);\n opacity: 0.9;\n}\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n max-width: var(--size-search);\n margin: var(--space-6) auto 0;\n padding: var(--space-2);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: var(--shadow-dialog);\n}\n.ds-search__icon {\n flex: none;\n width: var(--space-5);\n height: var(--space-5);\n margin-left: var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-search__input {\n flex: 1;\n min-width: 0;\n padding: var(--space-2);\n border: 0;\n background: transparent;\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-base);\n}\n.ds-search__input:focus {\n outline: 0;\n}\n.ds-hero__topics {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-4);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-hero__topic {\n color: inherit;\n text-decoration: underline;\n opacity: 0.9;\n}\n\n/* page header: the same band, shorter */\n.ds-page-header {\n margin-top: calc(var(--size-nav) * -1);\n padding: calc(var(--size-nav) + var(--space-6)) 0 calc(var(--space-8) + var(--space-6));\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n clip-path: ellipse(90% 100% at 50% 0%);\n}\n.ds-page-header__inner {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-page-header__title {\n margin: var(--space-2) 0 0;\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 56ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.9;\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n\n/* body of a view */\n.ds-main {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n margin-top: calc(var(--space-8) * -1);\n padding-bottom: var(--space-7);\n}\n.ds-main--home {\n margin-top: calc((var(--space-8) + var(--space-5)) * -1);\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);\n}\n.ds-cols--level {\n align-items: stretch;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-panel--side {\n padding: var(--space-4);\n}\n.ds-panel--grow {\n flex: 1;\n}\n\n/* grid: six collection cards, three across */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n min-width: 0;\n padding: var(--space-6) var(--space-5) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-page);\n background: var(--fill-panel);\n color: inherit;\n text-align: center;\n text-decoration: none;\n box-shadow: var(--shadow-panel);\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n box-shadow: var(--shadow-dialog);\n transform: translateY(calc(var(--space-1) * -0.5));\n}\n/* the lift leaves a strip under the pointer; it stays part of the element, so the hover holds at the lower edge */\n.ds-grid__cell:hover::after,\n.ds-grid__cell.is-hover::after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n height: calc(var(--space-1) * 0.5);\n}\n.ds-grid__title {\n margin: var(--space-2) 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}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n}\n.ds-grid__count {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: three figures on a tinted strip */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n padding: var(--space-5);\n border-radius: var(--radius-page);\n background: var(--color-surface-strong);\n text-align: center;\n}\n.ds-stat__figure {\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}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n}\n\n.ds-stat__item {\n min-width: 0;\n}\n.ds-tabs {\n padding: 0 var(--space-5);\n}\n.ds-tabs__tab {\n padding: var(--space-4) 0;\n}\n\n/* service rows inside a card */\n.ds-rows {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-rows__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading);\n}\n.ds-rows__row:last-child {\n border-bottom: 0;\n}\n\n/* contact strip under the lists */\n.ds-cta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-5) var(--space-6);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-cta__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-cta__text {\n margin: var(--space-1) 0 0;\n opacity: 0.9;\n}\n\n/* article pieces */\n.ds-article__meta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-article__block {\n margin-top: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-feedback {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-5);\n padding-top: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* footer: centred */\n.ds-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-6) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-ui);\n text-align: center;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-5);\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 opacity: 0.8;\n}\n.ds-footer__legal {\n margin: 0;\n font-size: var(--text-small);\n opacity: 0.75;\n}\n\n@media (max-width: 860px) {\n .ds-cols,\n .ds-cols--side {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-nav__inner {\n gap: var(--space-4);\n padding: 0 var(--space-4);\n }\n .ds-hero,\n .ds-page-header {\n margin-top: calc(var(--size-nav-tall) * -1);\n padding-top: calc(var(--size-nav-tall) + var(--space-5));\n clip-path: ellipse(140% 100% at 50% 0%);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-search .ds-button {\n padding: var(--space-2) var(--space-4);\n }\n .ds-search__icon {\n display: none;\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell {\n padding: var(--space-5) var(--space-4);\n }\n .ds-panel__body {\n padding: var(--space-4);\n }\n .ds-cta {\n padding: var(--space-5);\n }\n .ds-tabs {\n gap: 0 var(--space-4);\n padding: 0 var(--space-4);\n }\n .ds-tabs__tab {\n padding: var(--space-3) 0;\n }\n}\n\n/* components shared across the era: menu, switch, tooltip, accordion, progress, avatar */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-control);\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border: calc(var(--text-small) * 0.3) solid transparent;\n border-top: calc(var(--text-small) * 0.36) solid currentColor;\n border-bottom-width: 0;\n font-size: var(--text-small);\n vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__button:focus-visible,\n.ds-menu__button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.ds-switch__track {\n position: relative;\n flex: none;\n width: calc(var(--space-5) * 1.75);\n height: var(--space-5);\n border-radius: var(--radius-pill);\n background: var(--color-border-strong);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: calc(var(--space-5) - var(--space-1));\n height: calc(var(--space-5) - var(--space-1));\n border-radius: var(--radius-pill);\n background: var(--color-button-text);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: var(--fill-button);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n left: calc(var(--space-5) * 0.75 + var(--space-1) / 2);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: help;\n}\n.ds-tooltip--mark {\n width: calc(var(--space-4) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n border-radius: 50%;\n background: var(--color-surface-strong);\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}\n.ds-tooltip:focus-visible,\n.ds-tooltip.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tooltip__text {\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: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-panel);\n background: var(--color-heading);\n color: var(--color-surface);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-align: left;\n white-space: normal;\n box-shadow: var(--shadow-control);\n transform: translateX(-50%);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus .ds-tooltip__text,\n.ds-tooltip.is-open .ds-tooltip__text {\n display: block;\n}\n.ds-accordion {\n min-width: 0;\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child > .ds-accordion__title {\n padding-top: 0;\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__item:last-child:not([open]) > .ds-accordion__title {\n padding-bottom: 0;\n}\n.ds-accordion__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__title::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-large) * 0.7);\n height: calc(var(--text-large) * 0.7);\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-large) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-large) * 0.12)) 100% no-repeat;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] > .ds-accordion__title::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-large) * 0.12)) no-repeat;\n}\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: 0 0 var(--space-4);\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n.ds-progress {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-inverse);\n}\n.ds-progress__bar--82 { width: 82%; }\n.ds-meter {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n font-size: var(--text-small);\n}\n.ds-meter + .ds-meter {\n margin-top: var(--space-4);\n}\n.ds-meter__row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-meter__name {\n color: var(--color-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-who {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-progress__bar--82 { width: 82%; }\n.ds-meter--gap {\n margin-bottom: var(--space-4);\n}\n.ds-tooltip--mark {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n.ds-tooltip--start .ds-tooltip__text {\n left: 0;\n transform: none;\n}\n.ds-form__check > .ds-switch {\n flex: 1;\n min-width: 0;\n}\n.ds-nav__links .ds-menu__button {\n display: block;\n padding: var(--space-1) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.85;\n transition: var(--transition);\n}\n.ds-nav__links .ds-menu__button::after {\n margin-left: var(--space-1);\n}\n.ds-nav__links .ds-menu__list {\n right: auto;\n left: 0;\n}\n\n/* phone: the links fold into a menu behind a button; the brand and one action stay in the bar */\n.ds-nav__menu {\n display: none;\n}\n.ds-nav__menu > .ds-menu__button {\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: inherit;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__menu > .ds-menu__button::before {\n content: \"\";\n box-sizing: border-box;\n flex: none;\n width: var(--text-ui);\n height: calc(var(--text-ui) * 0.75);\n border-top: max(var(--border-width), calc(var(--text-ui) * 0.12)) solid currentColor;\n border-bottom: max(var(--border-width), calc(var(--text-ui) * 0.12)) solid currentColor;\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat;\n}\n.ds-nav__menu > .ds-menu__button::after {\n content: none;\n}\n.ds-nav__menu .ds-menu__link {\n border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__menu .ds-menu__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__menu .ds-menu__link[href=\"#home\"],\n.ds-page:has(#collection:target) .ds-nav__menu .ds-menu__link[href=\"#collection\"],\n.ds-page:has(#article:target) .ds-nav__menu .ds-menu__link[href=\"#article\"],\n.ds-page:has(#contact:target) .ds-nav__menu .ds-menu__link[href=\"#contact\"] {\n border-left-color: var(--color-accent);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n@media (max-width: 640px) {\n .ds-nav__menu {\n display: block;\n flex: none;\n }\n .ds-nav > .ds-nav__links,\n .ds-nav__inner > .ds-nav__links {\n display: none;\n }\n}\np + .ds-meter {\n margin-top: var(--space-3);\n}\n.ds-nav__links li:has(> .ds-menu) {\n align-items: center;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient help centre specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n Help centre\n \n
\n Menu\n \n
\n
\n
\n\n
\n
\n
\n

How can we help?

\n

Answers about bookings, calendars and payments, written by the people who build chronoskin.

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

Getting started

\n

Open your booking page in an afternoon.

\n

12 articles

\n \n \n \n

Calendars

\n

Hours, days off and two-way sync.

\n

18 articles

\n \n \n \n

Payments

\n

Deposits, refunds and payouts.

\n

21 articles

\n \n \n \n

Reminders

\n

Emails and texts before a visit.

\n

9 articles

\n \n \n \n

Staff and rooms

\n

Who can be booked, and where.

\n

14 articles

\n \n \n \n

For developers

\n

The booking widget and its options.

\n

7 articles

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

Read most this week

All guides
\n
\n \n
\n
\n
\n

Service status

\n
\n
    \n
  • Booking pages Working
    • \n
  • Calendar sync Slow
    • \n
  • Text reminders Down
    • \n
  • Payments Working
    • \n
  • Widget Maintenance at 2am
    • \n
\n
\n
\n
\n\n
\n

81

articles, checked every release

\n

9 min

median first reply on weekdays

\n

96%

of questions closed in one answer

\n
\n\n
\n
\n

Still stuck?

\n

Write to us. A person answers, usually within the hour.

\n
\n Contact us\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Help centre
    2. \n
  2. Guides
    3. \n
  3. Getting started
    4. \n
\n

Getting started

\n

Twelve articles that take you from a new account to a first booking.

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

No videos here yet

\n

This collection is text only for now.

\n Ask for one\n
\n
\n
\n \n
\n
    \n
  • \n
    Set your opening hoursGuide
    \n

    Tell chronoskin when you can be booked, and when you cannot.

    \n

    Updated 4 March, 3 minute read

    \n
    • \n
  • \n
    Booking limits on each planUpdated
    \n

    How many bookings, staff and reminders each plan allows in a month.

    \n

    Updated 11 March, 3 minute read

    \n
    • \n
  • \n
    Add your first serviceGuide
    \n

    A name, a length and a price are all a service needs.

    \n

    Updated 20 February, 2 minute read

    \n
    • \n
  • \n
    Share your booking page
    \n

    A link, a button for your site, or a code to print.

    \n

    Updated 2 February, 2 minute read

    \n
    • \n
\n
\n
\n \n 1 to 4 of 12\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Help centre
    2. \n
  2. Getting started
    3. \n
  3. Booking limits
    4. \n
\n

Getting started

\n

Article 2 of 12 in this collection.

\n
\n
\n
\n
\n
\n
\n
\n
UpdatedMA11 March, 3 minute read, by Maya from support
\n
\n

Booking limits on each plan

\n

Every plan counts the same three things each month. When you reach a limit, clients can still book; you are asked to move up a plan.

\n

What is counted

\n

A booking counts when it is made, not when the visit happens. A cancelled booking still counts; a booking you move does not count twice.

\n
\n
\n \n \n \n \n \n \n \n \n \n \n
Each monthStarterSalonClinic
Bookings505005,000
Staff calendars1640
Text reminders ?Emails are not counted, only texts.03004,000
Rooms1425
\n
\n
\n

Seeing where you stand

\n

Open Account and choose Usage. The same figures are returned by the widget as usage.bookings if you show them on your own site.

\n
Bookings this month410 of 500
\n

If you go over

\n
    \n
  • Nothing is switched off in the month you go over.
    • \n
  • You get one email at 80% and one at 100%.
    • \n
  • Text reminders stop at the limit; email reminders carry on.
    • \n
\n
\n
\n Did this answer your question?\n
\n Yes, thanks\n Not quite\n
\n
\n
\n
\n
\n

On a yearly plan? Limits are still counted month by month.

\n
\n

Related

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

Next in this collection

\n
\n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Help centre
    2. \n
  2. Contact
    3. \n
  3. New message
    4. \n
\n

Contact us

\n

Weekdays from 8 to 18, Central European time. We answer in the order messages arrive.

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

Your message

\n
\n
\n
\n

Text reminders are down. We know, and are working on it.

\n

Not sent. Please describe what happened.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n A short summary helps us send this to the right person.\n
\n
\n \n \n A booking number or a link saves a round of questions.\n
\n
\n
\n \n Back to help\n \n \n
\n
\n
\n
\n
\n
\n

Before you write

\n
\n
\n
\n Booking limits on each plan\n

Every plan counts bookings, staff calendars and text reminders each month. Read the article

\n
\n
\n Why a reminder was not sent\n

Most often the client has no mobile number, or the month's texts are used up. See what is counted

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

Discard this message?

\n

What you have written will be lost. Nothing has been sent to support.

\n
\n Keep writing\n Discard\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.saas-gradient.docs.s03.p03.t02.u03.dc\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"saas-gradient\",\n \"years\": [\n 2016,\n 2021\n ]\n },\n \"archetype\": \"docs\",\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-sg-3323-dc\",\n \"short\": \"v1-sg-3323-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f8f5f3;\n --color-canvas: #f8f5f3;\n --color-surface: #ffffff;\n --color-surface-alt: #f3f0ee;\n --color-surface-strong: #eae4df;\n --color-bar: #f3f0ee;\n --color-bar-text: #46585c;\n --color-bar-alt: #17262b;\n --color-bar-alt-text: #c8d3d5;\n --color-inverse: #fb5a62;\n --color-inverse-text: #ffffff;\n --color-text: #46585c;\n --color-text-muted: #8d9a9c;\n --color-heading: #17262b;\n --color-heading-alt: #2f4347;\n --color-link: #f0336b;\n --color-link-quiet: #5b6c70;\n --color-link-visited: #b8517f;\n --color-link-hover: #f27a3e;\n --color-link-active: #c22f62;\n --color-border: #e6dfd9;\n --color-border-strong: #cbc2ba;\n --color-border-muted: #f1ebe6;\n --color-accent: #f27a3e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #7b5fd3;\n --color-fill-1: #ff3d6e;\n --color-fill-2: #ff9440;\n --color-fill-3: #7b5fd3;\n --color-fill-4: #23b5a3;\n --color-button: #5b4bd6;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #17262b;\n --color-input: #ffffff;\n --color-input-text: #17262b;\n --color-input-border: #cbc2ba;\n --color-disabled: #efe8e3;\n --color-disabled-text: #a9a29c;\n --color-danger: #d6344a;\n --color-danger-surface: #fdf0f1;\n --color-success: #23a586;\n --color-warning: #eda02b;\n --color-notice: #fff1e6;\n --color-notice-text: #9a4a17;\n --color-focus: #5b4bd6;\n --color-shadow: rgb(23 38 43 / 0.1);\n --color-overlay: rgb(23 38 43 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Nunito, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Varela Round\", \"Arial Rounded MT Bold\", Nunito, \"Helvetica Neue\", sans-serif;\n --font-ui: Nunito, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Roboto Mono\", Monaco, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 50px;\n --text-h1: 38px;\n --text-h2: 27px;\n --text-h3: 19px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --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: 2px;\n --border-style: solid;\n --radius-control: 5px;\n --radius-panel: 5px;\n --radius-pill: 3px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 3px var(--color-shadow), 0 10px 28px var(--color-shadow);\n --shadow-control: 0 1px 2px var(--color-shadow), 0 3px 8px var(--color-shadow);\n --shadow-control-hover: 0 2px 4px var(--color-shadow), 0 8px 18px var(--color-shadow);\n --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n --shadow-dialog: 0 4px 10px var(--color-shadow), 0 24px 64px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(200deg, var(--color-fill-2), var(--color-fill-1) 85%);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 88%, white), var(--color-button));\n --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.12s ease-out, background-color 0.12s ease-out;\n --backdrop-blur: 0px;\n}\n" } }