{ "id": "v1-sg-5281", "long_id": "v1.saas-gradient.app.s05.p02.t08.u01", "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-5281", "preview_url": "https://chrono.skin/s/v1-sg-5281/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\nThese are the conventions of the era; every layout and token set keeps them.\n\n- The gradient is `--fill-inverse`, made in the surface part from `--color-fill-1` and `--color-fill-2`. Text on it is always `--color-inverse-text`, which a palette may make light or dark; here the gradient is yellow to amber and the text ink. `--color-inverse` is the solid middle of the gradient: the text of the `--inverse` button.\n- On the gradient there are two buttons only: `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost` (outline in `--color-inverse-text`). The primary button never stands on the gradient itself; in the hero it stands in the white sign-up card and in the white bar.\n- `--color-fill-1` to `--color-fill-4` are avatars, icon circles and, mixed at 24% into `--color-surface`, the tinted figures and the blocks above the speakers. A fill carries initials or an icon in `--color-inverse-text`, never running text; text on a tint is `--color-heading` and `--color-text`.\n- `--color-page` is the pale page, `--color-surface` the card and the white sections, `--color-surface-alt` the quiet inset (hovered row and link, dialog foot, empty state), `--color-surface-strong` the strongest neutral (current link of the bar, quiet badge, inline code, current sidebar row, progress track).\n- `--fill-bar` with `--color-bar-text` is the table head only. `--fill-bar-alt` with `--color-bar-alt-text` is the footer; nothing else stands on it.\n- Text is `--color-text`, meta `--color-text-muted`, headings and figures `--color-heading`; kickers, sidebar titles, times of the day and h3 in prose are `--color-heading-alt`. A tooltip is `--color-surface` text on `--color-heading`.\n- Links are `--color-link`, bold, underlined only on hover; quiet links and the links of the bar are `--color-link-quiet`.\n- `--fill-button` with `--color-button-text` is the one action colour: the primary button, the current chip, the current page number, the current dot of the carousel, the switch when on. The secondary button is `--color-button-secondary-text` on `--fill-button-secondary` with a `--color-border` edge. The destructive button is `--color-danger` with `--color-button-text`.\n- `--fill-accent` with `--color-accent-text` is the default badge. `--alt` and the status badges are tints: the colour mixed at 16 to 22% into `--color-surface`, with text mixed from the colour and `--color-heading`. `--color-success` is also the tick of a point.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface` with a faint edge.\n- Two families: `--font-heading` and `--font-ui` (Montserrat, Avenir Next) for headings, figures, buttons, labels and navigation, `--font-body` (Open Sans) for text; `--font-mono` for code. The references used commercial geometric faces. `--text-base` 16px at `--line-body` 1.62; `--text-ui` 14px (controls, tables, card text); `--text-small` 13px (meta, badges, labels); `--text-large` 20px (leads, the quote); `--text-display` 56px (hero title); `--text-h1` 38px (section and page titles, figures); `--text-h2` 26px; `--text-h3` 18px (card titles).\n- Headings are heavy: `--weight-heading` and `--weight-display` 800, `--weight-bold` and `--weight-ui` 700, with tight tracking. Nothing is uppercase.\n- Surface: buttons, inputs and badges are pills (`--radius-control`, `--radius-pill` 100px); cards are `--radius-panel` 18px; the bar and the call to action `--radius-page` 32px. `--border-width` is 2px in `--color-border-muted`, `--border-width-strong` 4px (the ring of a speaker's face). `--shadow-panel` is a solid lip of `--color-border` under the card and a wide soft shadow below; `--shadow-control` is a solid darker lip under buttons and fields that grows on hover; `--shadow-dialog` is the deepest and lies under the sign-up card.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: the ellipses that cut the gradient, washes on the gradient (`--color-inverse-text` at 14 to 18%, the ghost border at 55%), tinted badges, figures and blocks, the brand tile's edge, the error notice's edge, the footer rule. Opacity 0.85 to 0.9 dims secondary text on the gradient. The figures of the countdown are set at a line height of 1.1.\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 <= 800`: headings are heavy, nothing is black.\n- `font-size >= 13px`: meta, badges and labels are the smallest text.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-families <= 3`: a display sans, a text sans and monospace for code.\n- `line-height <= 1.7`: body text is set at 1.62.\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 chosen plan.\n- `border-radius <= 12px`: cards are 8px and the largest blocks 12px; only pills and circles are rounder.\n- `box-shadow-blur <= 100px`: shadows are wide and soft but end at 100px.\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.p02.t08.u01\",\n \"library\": \"2026.10.09-1346\",\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-5281\",\n \"short\": \"v1-sg-5281\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f7f9fb;\n --color-canvas: #f7f9fb;\n --color-surface: #ffffff;\n --color-surface-alt: #f0f5f9;\n --color-surface-strong: #e1eaf1;\n --color-bar: #f0f5f9;\n --color-bar-text: #0e304b;\n --color-bar-alt: #033156;\n --color-bar-alt-text: #c3d4e3;\n --color-inverse: #2f93d6;\n --color-inverse-text: #ffffff;\n --color-text: #576f7f;\n --color-text-muted: #8ba7bd;\n --color-heading: #0e304b;\n --color-heading-alt: #1f8fa3;\n --color-link: #3276e8;\n --color-link-quiet: #56708a;\n --color-link-visited: #5a6fc4;\n --color-link-hover: #1f8fa3;\n --color-link-active: #033156;\n --color-border: #dbe5ee;\n --color-border-strong: #b9c8d8;\n --color-border-muted: #e9f0f5;\n --color-accent: #25a2b6;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f2994a;\n --color-fill-1: #22a3b7;\n --color-fill-2: #4284fb;\n --color-fill-3: #f5a742;\n --color-fill-4: #7a68ee;\n --color-button: #033156;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #033156;\n --color-input: #ffffff;\n --color-input-text: #0e304b;\n --color-input-border: #b9c8d8;\n --color-disabled: #dfeaf1;\n --color-disabled-text: #9eacbf;\n --color-danger: #e04f5f;\n --color-danger-surface: #fdf1f2;\n --color-success: #49b882;\n --color-warning: #f2a93b;\n --color-notice: #e3f4f6;\n --color-notice-text: #12707f;\n --color-focus: #4284fb;\n --color-shadow: rgb(3 49 86 / 0.1);\n --color-overlay: rgb(3 49 86 / 0.55);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Segoe UI\", Tahoma, sans-serif;\n --font-heading: Montserrat, \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-ui: Montserrat, \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-mono: \"Roboto Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 20px;\n --text-display: 56px;\n --text-h1: 38px;\n --text-h2: 26px;\n --text-h3: 18px;\n --line-body: 1.62;\n --line-heading: 1.22;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 800;\n --weight-display: 800;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.4px;\n --display-tracking: -1.6px;\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: 100px;\n --radius-panel: 8px;\n --radius-pill: 100px;\n --radius-page: 12px;\n --shadow-panel: 0 15px 35px var(--color-shadow), 0 5px 15px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control: 0 4px 6px var(--color-shadow), 0 1px 3px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-hover: 0 7px 14px var(--color-shadow), 0 3px 6px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-pressed: 0 1px 2px var(--color-shadow);\n --shadow-dialog: 0 50px 100px -20px var(--color-shadow), 0 30px 60px -30px 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(135deg, var(--color-fill-1) 10%, var(--color-fill-2) 90%);\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) 92%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 45%, transparent);\n --transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }