{ "id": "v1-sg-5534", "long_id": "v1.saas-gradient.app.s05.p05.t03.u04", "name": "SaaS gradient sign-up and onboarding flow", "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": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the sign-up and set-up flow of a start-up product of 2016 to 2021: the window is split, with a tall panel of two-colour gradient at the left that carries the brand, the numbered steps and one customer's words, and at the right a narrow working column where each step asks one thing in soft-shadowed cards. Plans are chosen from cards with an icon tile, forms are short, and every step ends in a row of numbered pages and one primary button. Almost every product of the period greeted a new account this way.", "url": "https://chrono.skin/s/v1-sg-5534", "preview_url": "https://chrono.skin/s/v1-sg-5534/specimen.html", "files": { "STYLE.md": "# SaaS gradient sign-up and onboarding flow\n\n## Summary\n\nThis is the sign-up and set-up flow of a start-up product of 2016 to 2021: the window is split, with a tall panel of two-colour gradient at the left that carries the brand, the numbered steps and one customer's words, and at the right a narrow working column where each step asks one thing in soft-shadowed cards. Plans are chosen from cards with an icon tile, forms are short, and every step ends in a row of numbered pages and one primary button. Almost every product of the period greeted a new account this way.\n\n## Layout\n\n- The page is designed for a 1440px viewport. `.ds-page` is a grid of two columns: the gradient panel (`.ds-nav`, `--size-rail` 460px) for the whole height, and beside it the top line (`.ds-topbar`), the showing view and the footer line. The working column is centred in its half: `.ds-content` is at most `--size-page` (760px) wide plus `--space-7` side padding and stacks its children `--space-5` apart.\n- Navigation is the panel: the `.ds-brand`, a `.ds-nav__title`, then the five steps as an ordered list of links, each a numbered ring, a label and a hint, the current one on a translucent block with its ring filled; a `.ds-quote` closes the panel. Its content stays in view while the working column scrolls.\n- The home view is the first step: `.ds-hero` set straight on the page (a badge naming the step, the title, one paragraph, a field with the primary button beside it and a note), `.ds-stat` (three figures under a hairline) and one `.ds-aside` card for people who were invited.\n- Inner pages have no hero. Each opens with `.ds-page-header` on the page: the breadcrumb, the step's title, one line of text and at most one secondary button at the right. The working components follow in one column: `.ds-tabs` and the `.ds-grid` of plans, or one `.ds-panel` with the form; `.ds-cols` (3 to 2, `--level` for equal height) holds two things side by side. A step ends with `.ds-stepfoot`: the pagination at the left and the primary button at the right.\n- Views. The specimen is the set-up of a rota planner for cafes and shops, with five views. `start` is the home view. `plan` has the switch between monthly and yearly, four plan cards, the comparison table and the step foot. `workspace` is the form with its notices and buttons. `team` is the invite line and the list of people, then the open remove dialog beside an empty list of stand-ins. `welcome` closes the flow: a gradient card, the first week as running text, and reading, links and status labels at the right.\n- Below 1180px the panel narrows to `--size-rail-narrow`; below 900px it becomes a band across the top holding the brand and the steps as one row of pills that scrolls sideways, without title, hints or quote; below 640px the step pills of `.ds-nav__links` shrink to their `.ds-nav__num` rings spread across the width and only the open step (its `.ds-nav__link`) keeps its `.ds-nav__label`, and plans, columns and the invite line are one column and the figures become rows. A wide table scrolls inside `.ds-table__wrap`; the page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, between steps), `--space-2` 8px (between badges), `--space-3` 12px (step padding, people rows, button padding), `--space-4` 16px (ring to label, between form rows), `--space-5` 24px (between cards, card padding, grid gap), `--space-6` 36px (panel padding, between parts of the panel, the closing card), `--space-7` 52px (side padding of the panel and the working column), `--space-8` 72px (foot of a view).\n- Other sizes: `--size-mark` 32px, `--size-icon` 44px (icon tiles), `--size-control` 36px (step rings, pagination), `--size-avatar` 40px, `--size-dialog` 440px.\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 and the `.ds-cta` card. Only `.ds-button--inverse` and `.ds-button--ghost` stand directly on it. The search field is a card on the band (`--fill-input`), so its button is the primary one.\n- `--color-fill-1` to `--color-fill-4` are the round icon tiles of the collections and the empty state's icon. A fill carries an icon in `--color-inverse-text`, never running text.\n- `--color-page` is the warm pale page, `--color-surface` (through `--fill-panel`) the cards, `--color-surface-alt` the dialog foot and the empty state, `--color-surface-strong` the strip of figures, the current sidebar row, the quiet badge and inline code.\n- `--fill-bar` with `--color-bar-text` is the table head. `--fill-bar-alt` with `--color-bar-alt-text` is the footer.\n- Text is `--color-text` (`#46585c`), meta `--color-text-muted`, headings and figures `--color-heading` (`#17262b`); sidebar titles and h3 in prose are `--color-heading-alt`.\n- `--color-button` (violet `#5b4bd6`, white text) is the action colour on cards, the current page number and the edge under the current tab. Links are `--color-link`, bold, not underlined; only the often-asked links on the band are underlined, because colour cannot mark them there.\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 geometric display sans (Poppins, Montserrat, Futura) for titles and figures, `--font-body` and `--font-ui` a humanist sans (Lato, Lucida Grande); `--font-mono` for code. `--text-base` 15px at `--line-body` 1.55; `--text-ui` 13px (controls, card text, navigation); `--text-small` 12px (meta, badges, labels); `--text-large` 18px (leads); `--text-display` 42px (the hero question); `--text-h1` 32px (page titles, figures, article title); `--text-h2` 23px; `--text-h3` 16px (card and list titles).\n- The hero and page titles are bold (`--weight-display` 700); other headings are medium (`--weight-heading` 500). Buttons, tabs and navigation links are uppercase and bold (`--ui-transform`, `--weight-ui` 700); nothing else is uppercase.\n- Surface: tight corners (`--radius-control` and `--radius-panel` 5px, `--radius-pill` 3px for badges, `--radius-page` 8px for collection cards, the strip and the call to action). `--shadow-panel` is a close 3px shadow under a wide 28px one; `--shadow-dialog` is deeper and also lifts the search field and a hovered collection card. The primary button has a faint top-to-bottom gradient of its own colour (`--fill-button`).\n- One-off values made with `calc()` and `color-mix()`: the curve (`ellipse(90% 100% at 50% 0%)`), the hairline before the navigation tag (`--color-inverse-text` at 40%), the ghost button border (55%), tinted badges, the error notice's edge (`--color-danger` at 35%). Opacity 0.75 to 0.9 dims secondary text on the gradient and in the footer.\n\n## Components\n\n- `.ds-page`: on ``. The two-column grid; sets font, text colour and `--fill-page`.\n- `.ds-brand`: the site's mark and name, at the head of the panel and again in the footer line. `.ds-brand__mark` is a tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the gradient side panel. `.ds-nav__inner` holds the brand, `.ds-nav__title`, `.ds-nav__links` (an ordered list of `.ds-nav__link`, each a `.ds-nav__num` ring, a `.ds-nav__label` and a `.ds-nav__hint`) and the quote. In the specimen the showing view marks its step with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-quote`: one customer's words on a translucent block: `.ds-quote__text` and `.ds-quote__by` with a `.ds-avatar--plain` and `.ds-quote__name`.\n- `.ds-avatar`: a circle of initials on a fill (`--1`, `--2`, `--4`; `--plain` on the gradient).\n- `.ds-topbar`: the line above the working column: `.ds-topbar__note` with a `.ds-topbar__dot` at the left, the sign-in link at the right.\n- `.ds-content`: the working column of a view. `.ds-stack` stacks things 24px apart; `.ds-cols` puts two side by side (3 to 2), `--level` at equal height.\n- `.ds-hero`: the first question, on the home view only: `.ds-hero__kicker` (a badge), `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__form` (one field and the primary button) and `.ds-hero__note`.\n- `.ds-stat`: the row of three figures under a hairline; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`.\n- `.ds-aside`: a card that asks one side question: `.ds-aside__body` (a round `.ds-tile`, `.ds-aside__title`, `.ds-aside__text`) and one small secondary button.\n- `.ds-page-header`: head of a step, used instead of `.ds-hero`: the breadcrumb, then `.ds-page-header__inner` with `.ds-page-header__title`, `.ds-page-header__text` and `.ds-page-header__actions`.\n- `.ds-tabs`: a row of `.ds-tabs__tab` over a hairline; the current one (`is-current`) has an edge in `--color-button`.\n- `.ds-grid`: plan cards, two across. Each `.ds-grid__cell` is a link: `.ds-grid__head` (a `.ds-tile`, `.ds-grid__title`, an optional badge), `.ds-grid__price` with `.ds-grid__per`, `.ds-grid__text` and `.ds-points`. `is-current` is the chosen plan.\n- `.ds-points`: ticked `.ds-points__item` lines.\n- `.ds-tile`: an icon tile on `--color-fill-1` (`--2`, `--3`, `--4`; `--round` for a circle).\n- `.ds-stepfoot`: the foot of a step: the pagination and one primary button over a hairline.\n- `.ds-invite`: a field, a select and a button in one line.\n- `.ds-cta`: the gradient card that closes the flow: `.ds-cta__title`, `.ds-cta__text` and the two gradient buttons.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\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`: 14px medium. 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. `.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 inside a card: 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 a foot row.\n- `.ds-list`: rows parted by hairlines: `.ds-list__item` with a `.ds-list__title` (alone or in a `.ds-list__head`), `.ds-list__text` and `.ds-list__meta`. `--people` lays a row out as avatar, `.ds-list__grow` (name and meta) and a status badge.\n- `.ds-panel`: the card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph; `--side` pads a card that holds a sidebar block.\n- `.ds-badge`: small tag 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 an optional `.ds-sidebar__count`; the current row (`is-current`) is filled.\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`: the steps as numbers: `.ds-pagination__link`; `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`.\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`, `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-footer`: one line on `--fill-bar-alt` at the foot of the working column: the brand, `.ds-footer__links` of `.ds-footer__link` and `.ds-footer__legal`.\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-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-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-nav__progress`: the `.ds-progress` under the steps in the bar; it fills by one fifth with each view.\n\n## Never\n\n- `font-weight <= 700`: titles are bold, never black.\n- `font-size >= 12px`: meta, badges and labels are the smallest text.\n- `font-size <= 42px`: the hero question is the largest text.\n- `font-families <= 3`: a display face, a body sans and monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `uppercase-text <= 10%`: only buttons, tabs and navigation links are uppercase.\n- `underlined-links <= 10%`: only the often-asked links on the band are underlined.\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 <= 3px`: borders are hairlines; 3px marks the current navigation link and the figures.\n- `border-radius <= 6px`: controls and cards are 4px and the largest blocks 6px; only pills and circles are rounder.\n- `box-shadow-blur <= 40px`: shadows are small and close; the deepest ends at 40px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new step is another `.ds-nav__link` in the panel and a view that opens with `.ds-page-header`, asks one thing in a `.ds-panel` or a `.ds-grid` of choices, and ends in a `.ds-stepfoot`; a side question is a `.ds-aside`. Keep the working column to `--size-page` and one primary button per step. Text goes on cards, on the page and, in `--color-inverse-text`, on the gradient; the four fills take an icon or initials only, and only the `--inverse` and `--ghost` buttons stand on the gradient. Keep corners, shadows and borders 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: 760px;\n --size-rail: 460px;\n --size-rail-narrow: 340px;\n --size-mark: 32px;\n --size-icon: 44px;\n --size-control: 36px;\n --size-dialog: 440px;\n --size-avatar: 40px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 36px;\n --space-7: 52px;\n --space-8: 72px;\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-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: sign-up and onboarding flow ---- */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n}\n.ds-view {\n grid-column: 2;\n min-width: 0;\n}\n\n/* nav: the gradient side panel with the steps of the flow and one customer's words */\n.ds-nav {\n position: relative;\n grid-column: 1;\n grid-row: 1 / span 3;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n overflow: hidden;\n}\n.ds-nav::before,\n.ds-nav::after {\n content: \"\";\n position: absolute;\n aspect-ratio: 1;\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-inverse-text) 10%, transparent);\n}\n.ds-nav::before {\n top: calc(var(--space-8) * -2);\n right: calc(var(--space-8) * -2);\n width: 80%;\n}\n.ds-nav::after {\n top: 62vh;\n left: calc(var(--space-8) * -1);\n width: 50%;\n}\n.ds-nav__inner {\n position: sticky;\n top: 0;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n padding: var(--space-6) var(--space-7) var(--space-7);\n}\n.ds-nav__title {\n max-width: 16ch;\n margin: var(--space-5) 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-nav__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0 calc(var(--space-4) * -1);\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n border-radius: var(--radius-panel);\n color: inherit;\n line-height: var(--line-heading);\n text-decoration: none;\n opacity: 0.8;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__num {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 50%, transparent);\n border-radius: 50%;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__label {\n display: block;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-nav__hint {\n display: block;\n margin-top: var(--space-1);\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#start\"],\n.ds-page:has(#start:target) .ds-nav__link[href=\"#start\"],\n.ds-page:has(#plan:target) .ds-nav__link[href=\"#plan\"],\n.ds-page:has(#workspace:target) .ds-nav__link[href=\"#workspace\"],\n.ds-page:has(#team:target) .ds-nav__link[href=\"#team\"],\n.ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"] {\n background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n opacity: 1;\n}\n.ds-nav__link.is-current .ds-nav__num,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#start\"] .ds-nav__num,\n.ds-page:has(#start:target) .ds-nav__link[href=\"#start\"] .ds-nav__num,\n.ds-page:has(#plan:target) .ds-nav__link[href=\"#plan\"] .ds-nav__num,\n.ds-page:has(#workspace:target) .ds-nav__link[href=\"#workspace\"] .ds-nav__num,\n.ds-page:has(#team:target) .ds-nav__link[href=\"#team\"] .ds-nav__num,\n.ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"] .ds-nav__num {\n border-color: var(--color-inverse-text);\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n\n/* the customer's words at the foot of the panel */\n.ds-quote {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: var(--space-5) 0 0;\n padding: var(--space-5);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-inverse-text) 13%, transparent);\n}\n.ds-quote__text {\n margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-quote__by {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-quote__name {\n display: block;\n margin-bottom: var(--space-1);\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}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--plain {\n background: color-mix(in srgb, var(--color-inverse-text) 24%, transparent);\n}\n\n/* top line of the working column */\n.ds-topbar {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-5) var(--space-7);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-topbar__note {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-topbar__dot {\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: var(--color-success);\n}\n\n/* the working column */\n.ds-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n width: 100%;\n max-width: calc(var(--size-page) + var(--space-7) * 2);\n margin: 0 auto;\n padding: var(--space-5) var(--space-7) var(--space-8);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--level {\n align-items: stretch;\n}\n.ds-cols--level .ds-empty {\n justify-content: center;\n}\n.ds-panel--side {\n padding: var(--space-5);\n}\n\n/* hero: the first question of the flow, set straight on the page */\n.ds-hero {\n padding: var(--space-6) 0 var(--space-4);\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-4);\n}\n.ds-hero__title {\n max-width: 14ch;\n margin: 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-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 48ch;\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__form {\n display: flex;\n gap: var(--space-3);\n max-width: 56ch;\n margin-top: var(--space-6);\n}\n.ds-hero__form .ds-form__input {\n flex: 1;\n min-width: 0;\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: three figures in a row under one hairline */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n padding-top: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\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: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* a card that asks one side question */\n.ds-aside {\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);\n}\n.ds-aside__body {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-aside__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-aside__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n\n/* page header: the question of a step, set on the page */\n.ds-page-header {\n padding: var(--space-5) 0 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 margin-top: var(--space-3);\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-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: 52ch;\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n.ds-page-header .ds-breadcrumb {\n color: var(--color-text-muted);\n}\n\n/* grid: plan choice cards, two across */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-5);\n border: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\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 border-color: var(--color-border-strong);\n}\n.ds-grid__cell.is-current {\n border-color: var(--color-button);\n box-shadow: var(--shadow-dialog);\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-grid__title {\n flex: 1;\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-grid__price {\n margin: var(--space-4) 0 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-grid__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}\n.ds-grid__text {\n margin: var(--space-1) 0 var(--space-3);\n font-size: var(--text-ui);\n}\n.ds-points {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-points__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-points__item::before {\n content: \"\\2713\";\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n\n/* foot of a step: where you are, back and onward */\n.ds-stepfoot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding-top: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* people rows and the invite line */\n.ds-list--people .ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-list__grow {\n flex: 1;\n min-width: 0;\n}\n.ds-list--people .ds-list__title {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-invite {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n align-items: end;\n gap: var(--space-3);\n}\n\n/* the gradient card that closes the flow */\n.ds-cta {\n position: relative;\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-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 overflow: hidden;\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 font-size: var(--text-ui);\n opacity: 0.9;\n}\n\n/* footer: one line at the foot of the working column */\n.ds-footer {\n grid-column: 2;\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 padding: var(--space-4) var(--space-7);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer .ds-brand {\n font-size: var(--text-ui);\n}\n.ds-footer__links {\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.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n opacity: 0.8;\n}\n.ds-footer__legal {\n margin: 0;\n opacity: 0.8;\n}\n\n@media (max-width: 1180px) {\n .ds-page {\n grid-template-columns: var(--size-rail-narrow) minmax(0, 1fr);\n }\n .ds-nav__inner {\n padding: var(--space-5) var(--space-6) var(--space-6);\n }\n .ds-topbar,\n .ds-footer {\n padding-left: var(--space-6);\n padding-right: var(--space-6);\n }\n .ds-content {\n padding-left: var(--space-6);\n padding-right: var(--space-6);\n }\n}\n@media (max-width: 900px) {\n .ds-page {\n display: block;\n }\n .ds-nav::after {\n display: none;\n }\n .ds-nav__inner {\n position: static;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-4) var(--space-3);\n }\n .ds-nav__title,\n .ds-nav__hint,\n .ds-quote {\n display: none;\n }\n .ds-nav__links {\n flex-direction: row;\n gap: var(--space-2);\n margin: 0;\n overflow-x: auto;\n }\n .ds-nav__link {\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);\n border-radius: var(--radius-pill);\n white-space: nowrap;\n }\n .ds-topbar,\n .ds-footer {\n padding: var(--space-3) var(--space-4);\n }\n .ds-content {\n padding: var(--space-3) var(--space-4) var(--space-7);\n }\n .ds-hero {\n padding-top: var(--space-4);\n }\n}\n@media (max-width: 640px) {\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__form {\n flex-direction: column;\n }\n .ds-grid,\n .ds-cols,\n .ds-invite {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-3);\n }\n .ds-stat__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n }\n .ds-stat__figure {\n flex: none;\n font-size: var(--text-h2);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-page-header__title {\n font-size: var(--text-h2);\n }\n .ds-cta {\n padding: var(--space-5);\n }\n .ds-topbar__note {\n display: none;\n }\n .ds-aside__body {\n flex-basis: 100%;\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-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-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-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__progress {\n background: color-mix(in srgb, var(--color-inverse-text) 25%, transparent);\n}\n.ds-nav__progress .ds-progress__bar {\n width: 20%;\n background: var(--color-inverse-text);\n transition: var(--transition);\n}\n.ds-page:has(#start:target) .ds-nav__progress .ds-progress__bar { width: 20%; }\n.ds-page:has(#plan:target) .ds-nav__progress .ds-progress__bar { width: 40%; }\n.ds-page:has(#workspace:target) .ds-nav__progress .ds-progress__bar { width: 60%; }\n.ds-page:has(#team:target) .ds-nav__progress .ds-progress__bar { width: 80%; }\n.ds-page:has(#welcome:target) .ds-nav__progress .ds-progress__bar { width: 100%; }\n.ds-topbar > .ds-menu {\n margin-left: auto;\n}\n.ds-topbar > .ds-menu > .ds-menu__button {\n padding: 0;\n}\n/* phone: every step stays in sight as a number; only the step showing keeps its name */\n@media (max-width: 640px) {\n .ds-nav__links {\n justify-content: space-between;\n overflow-x: visible;\n }\n .ds-nav__link {\n padding: var(--space-1);\n }\n .ds-nav__label {\n display: none;\n }\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#start\"] .ds-nav__label,\n .ds-page:has(#start:target) .ds-nav__link[href=\"#start\"] .ds-nav__label,\n .ds-page:has(#plan:target) .ds-nav__link[href=\"#plan\"] .ds-nav__label,\n .ds-page:has(#workspace:target) .ds-nav__link[href=\"#workspace\"] .ds-nav__label,\n .ds-page:has(#team:target) .ds-nav__link[href=\"#team\"] .ds-nav__label,\n .ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"] .ds-nav__label {\n display: inline;\n padding-right: var(--space-2);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient sign-up and onboarding specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n

Next week's rota, done in five short steps

\n
    \n
  1. 1Your accountA work address is all we need
    2. \n
  2. 2PlanFree for 14 days on any of them
    3. \n
  3. 3WorkspaceName it and set the opening hours
    4. \n
  4. 4TeamInvite the people on the rota
    5. \n
  5. 5WelcomeYour first week, laid out
    6. \n
\n \n
\n

I used to text the rota on Sunday night and fix it until Tuesday. Now it is out by Thursday lunch and nobody swaps without me knowing.

\n
HVHedda VikOwner of two cafes, Bergen
\n
\n
\n
\n\n
\n Saved as you go. Close the tab and carry on later.\n
\n Help\n \n
\n Already with us? Sign in\n
\n\n
\n
\n
\n

Step 1 of 5

\n

Start with your work address

\n

chronoskin plans shifts for cafes, shops and studios. Tell us where to send the rota and you can have one out before closing time.

\n
\n \n Get started\n
\n

14 days free on every plan. No card needed.

\n
\n\n
\n

38,000

venues plan their week here

\n

6 min

from this page to a first rota

\n

3 hours

saved each week by a typical owner

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

Joining a team that is already here?

\n

Ask whoever writes the rota for an invitation. It skips all five steps.

\n
\n
\n Find my team\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Set up
    3. \n
  3. Plan
    4. \n
\n
\n
\n

Choose a plan

\n

You pay nothing for 14 days and can change your mind on any of them.

\n
\n
\n Decide later\n
\n
\n
\n\n \n\n
\n \n Corner\n 0 for one venue\n A weekly rota for up to five people.\n One rota, one week aheadShifts by email\n \n \n ShopChosen\n 19 a month per venue\n For a team that swaps shifts and takes holidays.\n 25 people, four weeks aheadSwaps and time off, approved by you\n \n \n High street\n 39 a month per venue\n Several venues, one pool of people.\n People shared between venuesHours and wage cost per week\n \n \n GroupTalk to us\n 99 a month, ten venues\n For groups with managers and a payroll office.\n Manager roles and sign-offExport to payroll\n \n
\n\n
\n

Side by side

Prices exclude tax
\n
\n \n \n \n \n \n \n \n \n \n \n
IncludedCornerShopHigh streetGroup
People on the rota52560400
Weeks planned ahead141252
Venues11510
Text reminders a month ?Sent the evening before a shift. Emails are not counted.02001,0005,000
\n
\n
\n\n
\n \n Continue with Shop\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Set up
    3. \n
  3. Workspace
    4. \n
\n
\n
\n

Set up your workspace

\n

One workspace per business. Venues and people live inside it.

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

About the business

Step 3 of 5
\n
\n
\n
\n

Plan saved. You are trying Shop, free until 26 March.

\n

One thing to fix. The web address below is already taken.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n Somebody has this one. Try kaffe-vik or kaffevik-bergen.\n
\n
\n
\n \n \n
\n
\n \n \n Shifts outside these are flagged, not blocked.\n
\n
\n
\n \n \n
\n
\n
\n \n Back to plans\n \n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Set up
    3. \n
  3. Team
    4. \n
\n
\n
\n

Invite the people on the rota

\n

They get one message with a link. No account to make, no app to install.

\n
\n
\n Skip for now\n
\n
\n
\n\n
\n

Kaffe Vik

4 of 25 people
\n
\n
\n
\n \n \n
\n
\n \n \n
\n Invite\n
\n
    \n
  • \n HV\n Hedda Vik

    Owner, writes the rota

    \n You\n
    • \n
  • \n TS\n Tomas Sande

    Barista, joined a minute ago

    \n Joined\n
    • \n
  • \n AL\n Aino Lehto

    Baker, invited by text 4 minutes ago

    \n Invited\n
    • \n
  • \n MO\n Mikkel Oyen

    Barista, the address did not accept mail

    \n Bounced\n
    • \n
\n
\n
\n\n
\n
\n
\n

Remove Mikkel?

\n

His invitation is withdrawn and his sample shifts go back to open. You can invite him again with another address.

\n
\n Keep him\n Remove\n
\n
\n
\n
\n \n

No stand-ins yet

\n

Stand-ins see open shifts only. Add the people you call when someone is ill.

\n Add a stand-in\n
\n
\n\n
\n \n Finish set-up\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Set up
    3. \n
  3. Welcome
    4. \n
\n
\n
\n

You are in, Hedda

\n

Kaffe Vik has a workspace, a plan and three people on the way.

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

Next week is waiting for its shifts

\n

We filled Monday with samples. Drag them about, then publish.

\n
\n
\n Open the rota\n Invite more people\n
\n
\n\n
\n
\n
\n
\n

Your first week

\n

Three small jobs turn a workspace into a rota people trust.

\n

Publish by Thursday

\n

A rota that arrives before the weekend gets fewer swaps. Press Publish and everyone receives their own shifts, nothing else.

\n

Let people swap

\n

A swap needs your yes. The request shows as swap pending on both shifts until you answer.

\n

Before you publish

\n
    \n
  • Check that every opening shift has two people.
    • \n
  • Mark holidays so nobody is asked twice.
    • \n
  • Look at the hours column: it turns amber over 40.
    • \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n Shop plan\n Trial\n 2 joined\n 1 invited\n 1 bounced\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.saas-gradient.app.s05.p05.t03.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"saas-gradient\",\n \"years\": [\n 2016,\n 2021\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-sg-5534\",\n \"short\": \"v1-sg-5534\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0b1430;\n --color-canvas: #0b1430;\n --color-surface: #141f45;\n --color-surface-alt: #1a2854;\n --color-surface-strong: #24346a;\n --color-bar: #1a2854;\n --color-bar-text: #c5d1f2;\n --color-bar-alt: #070d22;\n --color-bar-alt-text: #9aa9d4;\n --color-inverse: #2456e8;\n --color-inverse-text: #ffffff;\n --color-text: #b4c0e4;\n --color-text-muted: #7f8dba;\n --color-heading: #ffffff;\n --color-heading-alt: #ffd23f;\n --color-link: #6ea0ff;\n --color-link-quiet: #a5b3dc;\n --color-link-visited: #9c8cf5;\n --color-link-hover: #ffd23f;\n --color-link-active: #ffffff;\n --color-border: #2a3a70;\n --color-border-strong: #3d5096;\n --color-border-muted: #1f2d5c;\n --color-accent: #2f6bff;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ffd23f;\n --color-fill-1: #3b7bff;\n --color-fill-2: #1c3fd1;\n --color-fill-3: #f0a81c;\n --color-fill-4: #ff5fa2;\n --color-button: #ffd23f;\n --color-button-text: #0b1430;\n --color-button-hover-text: #0b1430;\n --color-button-secondary: #1a2854;\n --color-button-secondary-text: #ffffff;\n --color-input: #0f1a3c;\n --color-input-text: #ffffff;\n --color-input-border: #3d5096;\n --color-disabled: #1f2d5c;\n --color-disabled-text: #6373a6;\n --color-danger: #ff6b7a;\n --color-danger-surface: #3a1a33;\n --color-success: #3ddc97;\n --color-warning: #ffb84d;\n --color-notice: #162e6e;\n --color-notice-text: #b9d0ff;\n --color-focus: #6ea0ff;\n --color-shadow: rgb(0 0 0 / 0.35);\n --color-overlay: rgb(4 8 24 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n --font-heading: Poppins, Montserrat, Futura, \"Century Gothic\", sans-serif;\n --font-ui: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n --font-mono: \"Fira Mono\", \"Courier New\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 42px;\n --text-h1: 32px;\n --text-h2: 23px;\n --text-h3: 16px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: none;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 4px;\n --radius-pill: 100px;\n --radius-page: 6px;\n --shadow-panel: 0 2px 4px var(--color-shadow);\n --shadow-control: 0 1px 2px var(--color-shadow);\n --shadow-control-hover: 0 4px 10px var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 12px 40px var(--color-shadow), 0 2px 6px 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(160deg, var(--color-fill-1), var(--color-fill-2) 70%);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 80%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 40%, transparent);\n --transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }