{ "id": "v1-gl-8232", "long_id": "v1.glassmorphism.landing.s08.p02.t03.u02", "name": "Glassmorphism onboarding flow", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a light hairline edge and a long soft shadow, floating over a full-bleed gradient. Sign-in and setup screens of those years were its showpiece: the pitch written straight on the gradient at one side and a single tall card of glass holding the form at the other, with the steps of the flow as numbered discs across the top. This pack is that onboarding flow in its light form: white glass over a peach and rose dawn with gold and lilac light, aubergine text and buttons, a vermilion accent and a wide grotesque for headings.", "url": "https://chrono.skin/s/v1-gl-8232", "preview_url": "https://chrono.skin/s/v1-gl-8232/specimen.html", "files": { "STYLE.md": "# Glassmorphism onboarding flow\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a light hairline edge and a long soft shadow, floating over a full-bleed gradient. Sign-in and setup screens of those years were its showpiece: the pitch written straight on the gradient at one side and a single tall card of glass holding the form at the other, with the steps of the flow as numbered discs across the top. This pack is that onboarding flow in its light form: white glass over a peach and rose dawn with gold and lilac light, aubergine text and buttons, a vermilion accent and a wide grotesque for headings.\n\n## Layout\n\n- Content column: `--size-page` (1160px), centred, with `--space-4` (24px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport.\n- Navigation: `.ds-nav` is one row on the backdrop, with no bar: the brand at the left, the steps of the flow in the middle as numbered discs joined by short lines (the current step's disc takes the accent fill and its label is bold), and at the right a Help link that opens a `.ds-menu`, and the account avatar. The row and the footer are written once, around the views.\n- Every screen is split by `.ds-page__split`: a free column on the left and a `--size-card` (480px) column on the right, `--space-6` (52px) apart. The right column holds the work card (`.ds-panel--card`), a tall sheet of glass with the form of that step; the left column holds what explains or accompanies it.\n- Home page: the split is centred vertically. On the left, on the backdrop: the hero (a badge, the title, the lead, two buttons), the row of three figures (`.ds-stat`) and the quotation `.ds-carousel`. On the right the sign-in card, which ends in an inverted band.\n- Inner pages have no hero. Under the navigation come the `.ds-breadcrumb` and, 10px below it, the `.ds-page-header` on the backdrop: title at `--text-h1` and one muted line on the left, at most two buttons on the right. Then the split: panels, notices, lists or an accordion in a `.ds-page__col` on the left, the work card (and, where a step has one, the dialog) on the right. A step that has to show a choice across the whole width (templates) uses one `.ds-page__col`: `.ds-tabs`, the `.ds-grid` of four cards, then `.ds-page__split--wide` with the table and its pagination beside a narrower summary panel.\n- Views: the specimen is one flow with five screens, one showing at a time. `welcome` is the home view (hero, figures, quotations, the sign-in card). `profile` is step 2: the picture, the notification switches and three questions beside the profile form. `workspace` is step 3: tabs, the four template cards, the table of what the chosen template creates, pagination and the summary. `team` is step 4: notices, the list of invited people and the empty list of requests beside the invitation card and the open dialog that withdrawing an invitation raises. `help` is the reading page: running text with the link states beside the contents sidebar and an accordion of questions. Each view is a `.ds-view` section; the step discs and the Help link are marked current from the address.\n- Spacing scale: `--space-1` 4px (inside template cards, between pagination cells), `--space-2` 10px (label to control, disc to label, badge padding), `--space-3` 16px (row padding, gaps between buttons and notices, title to lead), `--space-4` 24px (panel padding, the gap between neighbouring panels, form field gap), `--space-5` 32px (work card padding, gap above the figures and the carousel), `--space-6` 52px (the gap between the two halves, dialog padding, gap above the footer), `--space-7` 88px (textarea height only).\n- Glass: cards use `backdrop-filter: blur(var(--backdrop-blur))` (28px in this pack's surface set); menus, dialogs and the error notice use three times that with `saturate(180%)`. Never put a blurred element inside another; controls inside a card are plain translucent fills.\n- Below 1000px the two halves stack (text first, card second), the step labels are dropped so that only the numbered discs remain, and the template cards go two by two. Below 720px the navigation wraps: brand, Help and avatar on the first row and the discs spread across the second with their lines stretched between them; the hero title drops to `--text-h1`, columns marked `.ds-table__opt` are hidden and the page header's buttons move under its text. Nothing scrolls sideways at 390px except the carousel's own track.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family, Inter first, for `--font-body`, `--font-heading` and `--font-ui`; `--font-mono` for code.\n- Body text is light: `--weight-body` 300 at `--text-base` 16px with `--line-body` 1.6. Bold, and every heading, is 700 (`--weight-bold`, `--weight-heading`).\n- The hero title is large and regular: `--text-display` 64px at `--weight-display` 400, `--line-display` 1.2.\n- Sizes: `--text-ui` 16px for buttons and tabs, `--text-small` 14px for meta text, badges, dock labels, table heads and notices, `--text-large` 20px for lead text, list titles and feature titles, `--text-h1` 28px for band headings, page titles and figures, `--text-h2` 24px, `--text-h3` 16px.\n- Buttons, dock items, tabs and pagination are uppercase at regular weight: `--ui-transform` uppercase, `--weight-ui` 400. Nothing else is uppercase.\n- Links in running text are always underlined (`--link-decoration` underline); quiet links are not.\n- Backdrop: a sky that falls from `--color-fill-2` (80 149 228) at the top edge through `--color-fill-1` (128 175 231) into `--color-page`, a very pale blue (241 247 255), within the first screen, and returns faintly further down; seven crisp-edged white bubbles, 84px to 210px in radius and 30% white at the centre, sit alternately right and left of the column; `--color-fill-3` (73 138 255) is a brighter blue and `--color-fill-4` (225 236 244) a pale grey-blue. Feature cards and list tiles mix them with `transparent` at 55%; the orbs fade from one to another.\n- This palette is light: text is dark navy (`--color-text` 39 55 76, `--color-heading` 31 57 88) on glass and on the backdrop, and `--color-text-muted` is the same navy at 72%.\n- Glass is white: `--color-surface` 40% for cards, `--color-surface-alt` 60% for the current item, chips and the eyebrow, `--color-surface-strong` 80% for hovered controls. `--color-bar` (225 236 244 at 60%) for the dock, the stat strip, table heads and code blocks, and `--color-bar-alt` (241 247 255 at 60%) for tabs, status badges and the footer, are pale frosted fills with navy text, not dark ones.\n- Borders: `--color-border` is white at 60% around glass, `--color-border-strong` a solid light blue (128 175 231) for the hero cards, dialogs, notices, secondary buttons and inputs, `--color-border-muted` navy at 11% for hairlines between rows and for hover tints.\n- `--color-button` and `--color-accent` are the same medium blue (47 110 211) with white text; the current tab takes the accent. `--color-link` is that blue too, `--color-link-visited` violet (120 64 184). `--color-accent-alt` is light blue (128 175 231) and takes navy text.\n- `--color-notice` is navy at 75% with white text, the one dark surface on the page.\n- Status: `--color-danger` 233 66 86 on a pale pink `--color-danger-surface`, `--color-success` 11 158 67, `--color-warning` 255 90 0; they appear as a 1px ring and an 8px dot on status badges, as the border of an error, and at 70% as the tint of the destructive button. `--color-shadow` is a blue (71 97 206) at 36%.\n- Corners: `--radius-control` 22px, which makes buttons, inputs and selects full pills at 44px, `--radius-panel` 6px for list cards, notices and dock items, `--radius-page` 14px for cards, the dock, the stat strip and the footer, `--radius-pill` 30px for badges and tabs.\n- Shadows are short and layered: `--shadow-panel` is 0 10px 21px plus a bevel inside the glass: a 2px white highlight along the top edge and a 2px shade along the bottom; `--shadow-control` 0 2px 8px with a 1px top highlight, `--shadow-dialog` 0 12px 24px on the dialog, the dock and the stat strip. `--shadow-text` is `none`.\n- One-off values with no token: the strongest glass multiplies `--backdrop-blur` by three with `calc()`, `saturate(180%)` is written inline on the dock, stat strip and footer, tints use `color-mix()` over `--color-fill-*` with `transparent`, the hero cards are rotated by -10, -3 and 8 degrees, and the stat labels are the bar text at `opacity: 0.8`.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop and sets the base type. `.ds-page__inner` is the width container; `.ds-page__split` the two halves (`--home` centres them vertically, `--wide` gives the right half less width, for a table beside a summary); `.ds-page__col` a vertical stack; `.ds-page__text` the free left half of the home view; `.ds-page__heading` a small heading on the backdrop with an optional badge; `.ds-page__note` a small muted line. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: the row on the backdrop. `.ds-nav__list` is the ordered list of steps; each `.ds-nav__item` holds a `.ds-nav__link` with a `.ds-nav__num` disc and a `.ds-nav__label`; the current one is `is-current` (the specimen sets it from the address). `.ds-nav__tools` holds `.ds-nav__help` (the trigger of the menu) and the account `.ds-avatar`. In an application without steps the discs can carry icons or be left out of the links.\n- `.ds-brand`: the site's mark and name at the left of the navigation: `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` the name in the heading font at `--text-h3`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the home page's introduction on the backdrop: a `.ds-badge`, `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`. It has no art; the work card beside it is the picture.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, and `.ds-page-header__actions` at the right. No fill of its own. The breadcrumb goes directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block. Put it inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links. `.ds-link__sample` lays several out in a row.\n- `.ds-button`: primary, a dark solid 44px high with an 8px radius. `.ds-button--secondary` is white glass; `.ds-button--danger` is the destructive action, tinted with `--color-danger`, used once at the end of a group or as the confirming button of a dialog; `.ds-button--large` for the hero and the main action of a card; `.ds-button--block` fills the width of a card; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays buttons out. One primary button per group.\n- `.ds-form`: vertical form inside the work card. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range`, `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__row` puts two fields side by side; `.ds-form__label-row` sets a tooltip beside a label; `.ds-form__actions` holds the buttons.\n- `.ds-table`: one sheet of glass with a `--fill-bar` head and hairline rows. `.ds-table__num` right-aligns figures, `.ds-table__opt` marks a column hidden on a phone, `.ds-table__meta` is muted text.\n- `.ds-list`: rows in one sheet of glass. `.ds-list__item` holds an optional `.ds-avatar`, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge or action at the right. `.ds-list__dot` is a status dot.\n- `.ds-panel`: the basic sheet of glass: `.ds-panel__title` strip, `.ds-panel__body`. `.ds-panel--card` is the work card: the largest radius, the dialog shadow, more padding, with a `.ds-panel__heading` (h2 size) and a muted `.ds-panel__text` line at the top (`--after` for one at the foot) and optionally a `.ds-panel__band` at its foot, an inverted strip with a `.ds-panel__band-link`. `.ds-panel--dark` is the bar-coloured variant. `.ds-panel__pair` with `.ds-panel__pair-value` is a label and its value on one line.\n- `.ds-grid`: four template cards of tinted glass. `.ds-grid__cell` with `--1` to `--4` takes its tint from `--color-fill-*` and is a link; the chosen one is `is-current` and wears the focus ring. Inside: `.ds-grid__mock` (a small drawing of the layout from `.ds-grid__bar` blocks; `--rows` stacks them, `.ds-grid__bar--short` shortens one), `.ds-grid__label`, `.ds-grid__value`, `.ds-grid__meta`.\n- `.ds-stat`: the row of three figures on the backdrop; `.ds-stat` is the row and each `.ds-stat__item` a figure behind a 2px rule in the accent colour: `.ds-stat__value` above `.ds-stat__label`. It has no glass.\n- `.ds-tabs`: text tabs on a hairline; `.ds-tabs__tab` with `is-current` carrying a 2px rule in the accent colour. For switching what a page shows.\n- `.ds-badge`: pill for counts and markers in the accent; `.ds-badge--alt` for \"new\", `.ds-badge--glass` for quiet labels, and the status labels `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`: a `--fill-bar-alt` pill with a 1px ring and a dot in the status colour.\n- `.ds-sidebar`: glass block of links in a column: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: information notice on `--color-notice`; `.ds-notice--error` on `--color-danger-surface` with a danger border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several. Notices sit beside the work card, not inside it.\n- `.ds-pagination`: left-aligned row of small glass cells, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill, `is-disabled` greys an end.\n- `.ds-breadcrumb`: small trail above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels. In the flow it names the step.\n- `.ds-dialog`: a dimmed sheet (`--color-overlay`) with a centred `.ds-dialog__box` of the strongest glass: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: empty state on a glass panel: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-footer`: a full-width strip of faint glass over a hairline, `.ds-footer__inner` with `.ds-footer__links` and `.ds-footer__link`.\n- `.ds-menu`: a drop-down under a navigation item, shown on hover or focus (or with `is-open`): `.ds-menu__trigger` with a `.ds-menu__caret`, `.ds-menu__list` of the strongest glass, `.ds-menu__link` rows with an optional `.ds-menu__meta` at the right.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. For the questions a step raises.\n- `.ds-tooltip`: a round hint mark beside a label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). Keep the tip to one sentence.\n- `.ds-carousel`: one slide showing in a sheet of glass: `.ds-carousel__track` of `.ds-carousel__slide` items that snap as they scroll, `.ds-carousel__dots` with `.ds-carousel__dot` (the current one `is-current`), and optionally a `.ds-carousel__head` strip with `.ds-carousel__arrows` of `.ds-carousel__arrow` buttons. `.ds-carousel--quotes` is the home page's form: each slide a `.ds-carousel__quote` and an `.ds-avatar__row`.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. Consecutive switches are divided by a hairline.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--90`. `.ds-progress__label` is a line above it with the name at the left and the figure at the right. Use it for how far the flow has come.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch and are divided by a hairline.\n- `block-gap <= 52px`: neighbouring panels sit 24px apart; 52px is the largest gap on the page.\n- `content-width <= 1160px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `uppercase-text <= 20%`: uppercase is for controls, never for headings or body.\n- `border-width <= 1px`: every border is a 1px hairline.\n- `border-radius <= 30px`: wells are 10px, the sheet, tiles and controls 20px; only badges and the navigation pill reach 30px.\n- `box-shadow-blur <= 40px`: sheet shadows blur 38px, the dialog 40px.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; the only gradient is the backdrop.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new step is a `.ds-page__split` with its explanation on the left and a `.ds-panel--card` on the right; a new container starts from `.ds-panel` (fill, 1px edge, radius, shadow and blur together, never one without the others), a new control from `.ds-button--secondary` or `.ds-form__input`, a new overlay from `.ds-menu__list` or `.ds-dialog__box`. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*` and `--size-*`. Keep one work card per screen and one primary button per card, keep the navigation free of any bar, and place glass only where the backdrop behind it has colour to show through.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1160px;\n --size-card: 480px;\n --size-dialog: 420px;\n --size-control: 44px;\n --size-step: 34px;\n --size-mock: 72px;\n --size-icon: 18px;\n --size-dot: 8px;\n --size-thumb: 22px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 10px;\n --space-3: 16px;\n --space-4: 24px;\n --space-5: 32px;\n --space-6: 52px;\n --space-7: 88px;\n}\n\n/* shell: a full-bleed gradient; every screen is split into a text column on the backdrop and one tall card of glass */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-card);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__split--home {\n align-items: center;\n padding: var(--space-5) 0 0;\n}\n.ds-page__split--wide {\n grid-template-columns: minmax(0, 1fr) calc(var(--size-card) - var(--space-7));\n gap: var(--space-4);\n}\n.ds-page__text {\n min-width: 0;\n}\n.ds-page__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__heading {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-2) 0 calc(-1 * var(--space-2));\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-page__note {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: the steps of the flow as numbered discs joined by a line, on the backdrop between the brand and the help menu */\n.ds-nav {\n position: relative;\n z-index: 4;\n color: var(--color-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n min-height: calc(var(--size-control) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-step);\n height: var(--size-step);\n flex: none;\n padding: var(--space-1);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item {\n display: flex;\n align-items: center;\n}\n.ds-nav__item + .ds-nav__item::before {\n content: \"\";\n width: var(--space-5);\n margin: 0 var(--space-2);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__link {\n display: 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-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__num {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-step);\n height: var(--size-step);\n flex: none;\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-nav__link:hover .ds-nav__num,\n.ds-nav__link.is-hover .ds-nav__num {\n border-color: var(--color-border-strong);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-nav__link.is-current .ds-nav__num,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#welcome\"] .ds-nav__num,\n.ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"] .ds-nav__num,\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"] .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 background: var(--fill-accent);\n border-color: transparent;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#welcome\"],\n.ds-page:has(#welcome:target) .ds-nav__link[href=\"#welcome\"],\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"],\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(#help:target) .ds-nav__help {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-nav__help {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* hero: badge, title, lead and actions on the backdrop, in the left half of the home screen */\n.ds-hero {\n padding: 0;\n}\n.ds-hero__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 46ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: head of an inner page, set on the backdrop like the hero, one size down */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-2) 0 var(--space-4);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--radius-control);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-3);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: not-allowed;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n\n/* panel: the basic sheet of glass */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n.ds-panel--dark {\n background: var(--fill-bar);\n border-color: var(--color-border-muted);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: uppercase;\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-disabled-text);\n opacity: 1;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-5);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-icon);\n height: var(--size-icon);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* table: glass sheet, dark glass head, hairline rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: rows inside a sheet of glass, divided by hairlines */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n background: var(--color-accent-alt);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n/* status badges: a dark glass pill with a 1px ring and a dot in the status colour, like the error notice */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* notice */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* dialog: strongly blurred glass box on a dimmed sheet, shown in the page flow */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-4) var(--space-4) 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 text-align: center;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\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/* sidebar */\n.ds-sidebar {\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__heading + .ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-4);\n}\n.ds-sidebar__list {\n margin: 0 calc(-1 * var(--space-2));\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2);\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: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n}\n\n/* menu: a drop-down of strong glass under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__caret {\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n margin-bottom: var(--space-1);\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: one sheet of glass, sections that open and close */\n.ds-accordion {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* tooltip: a round hint mark; the tip is an inverted block above it, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n\n/* carousel: one slide showing in a sheet of glass, the rest reached by scrolling sideways; dots under it */\n.ds-carousel {\n overflow: hidden;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-carousel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-1);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-control) - var(--space-2));\n height: calc(var(--size-control) - var(--space-2));\n padding: 0;\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-bar-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n opacity: 0.45;\n cursor: default;\n}\n.ds-carousel__track {\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n list-style: none;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__track::-webkit-scrollbar {\n display: none;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n padding: var(--space-4);\n scroll-snap-align: start;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n padding: 0 0 var(--space-3);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-text) 28%, transparent);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-accent);\n}\n\n/* switch: an on/off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-thumb));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n\n/* progress: a thin track with the accent fill */\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar--25 { width: 25%; }\n.ds-progress__bar--75 { width: 75%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* avatar: a round account picture drawn from initials */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar--2,\n.ds-avatar--3,\n.ds-avatar--4 {\n color: var(--color-text);\n}\n.ds-avatar--2 {\n background: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-avatar--3 {\n background: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-avatar--4 {\n background: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-avatar--large {\n width: calc(var(--size-control) * 1.6);\n height: calc(var(--size-control) * 1.6);\n font-size: var(--text-h3);\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* the work card: the tall sheet of glass in the right half of a screen */\n.ds-panel--card {\n border-color: var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-panel--card .ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__heading {\n margin: 0 0 var(--space-1);\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-panel__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__text--after {\n margin: var(--space-3) 0 0;\n}\n.ds-panel__band {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n color: var(--color-inverse-text);\n font-size: var(--text-ui);\n}\n.ds-panel__band-link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-panel__pair {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-panel__pair-value {\n font-weight: var(--weight-bold);\n}\n.ds-button--block {\n width: 100%;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-form__label-row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: figures set straight on the backdrop, each behind a short accent rule */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n margin: var(--space-5) 0 0;\n}\n.ds-stat__item {\n padding-left: var(--space-3);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-stat__value {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* carousel slide of this layout: a short quotation and who said it */\n.ds-carousel--quotes {\n margin-top: var(--space-5);\n}\n.ds-carousel__quote {\n margin: 0 0 var(--space-3);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* tabs: text tabs on a hairline; the current one carries a rule in the accent colour */\n.ds-tabs {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(-1 * var(--border-width));\n padding: var(--space-2) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-accent);\n color: var(--color-heading);\n}\n\n/* grid: template cards of tinted glass, each with a small drawing of its layout */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-3);\n background: linear-gradient(180deg, var(--color-surface-alt), transparent), var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n text-decoration: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-grid__cell--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n box-shadow: var(--shadow-dialog);\n}\n.ds-grid__cell.is-current {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-grid__mock {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-1);\n height: var(--size-mock);\n margin-bottom: var(--space-2);\n padding: var(--space-2);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n}\n.ds-grid__mock--rows {\n grid-template-columns: minmax(0, 1fr);\n}\n.ds-grid__bar {\n background: color-mix(in srgb, var(--color-text) 22%, transparent);\n border-radius: var(--radius-control);\n}\n.ds-grid__bar--short {\n align-self: start;\n height: 55%;\n}\n.ds-grid__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__value {\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__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* footer: one line on the backdrop over a hairline */\n.ds-footer {\n margin-top: var(--space-6);\n background: var(--fill-bar-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: var(--space-3) var(--space-4);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: underline;\n}\n\n/* adjustments to the shared parts for this layout */\n.ds-breadcrumb {\n margin-top: var(--space-2);\n}\n.ds-page-header {\n padding-bottom: var(--space-5);\n}\n.ds-panel__title,\n.ds-form__label,\n.ds-table th,\n.ds-sidebar__heading {\n text-transform: none;\n}\n.ds-nav .ds-menu__list {\n right: 0;\n}\n.ds-notice .ds-link--quiet {\n color: inherit;\n text-decoration: underline;\n}\n.ds-list__item .ds-avatar {\n margin-right: var(--space-1);\n}\n.ds-pagination {\n justify-content: flex-start;\n}\n.ds-list__meta {\n display: block;\n overflow-wrap: anywhere;\n}\n\n@media (max-width: 1000px) {\n .ds-page__split {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n }\n .ds-nav__label {\n display: none;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 720px) {\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-3);\n padding-top: var(--space-3);\n }\n .ds-nav__list {\n order: 3;\n flex-basis: 100%;\n justify-content: space-between;\n }\n .ds-nav__item + .ds-nav__item {\n flex: 1;\n }\n .ds-nav__item + .ds-nav__item::before {\n flex: 1;\n width: auto;\n }\n .ds-page__split--home {\n padding-top: var(--space-3);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-stat {\n gap: var(--space-3);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-panel--card .ds-panel__body {\n padding: var(--space-4);\n }\n .ds-panel__band {\n padding: var(--space-3) var(--space-4);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-tabs {\n gap: var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-list__item {\n flex-wrap: wrap;\n }\n .ds-page-header__text {\n flex-basis: 100%;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-dialog__actions,\n .ds-pagination {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: set up your account\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
    \n
  1. 1Sign in
    2. \n
  2. 2Profile
    3. \n
  3. 3Workspace
    4. \n
  4. 4Team
    5. \n
\n
\n
\n Help \n \n
\n ME\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n New: bring a spreadsheet with you\n

Four short steps and your team is in

\n

Sign in, say who you are, pick a workspace and invite the others. Nothing is charged and every step can be changed later.

\n
\n Create an account\n Read the guide\n
\n
\n
\n
4
steps, one screen each
\n
6 min
for most people
\n
0
card details asked
\n
\n
\n
    \n
  • \n

    We imported the rota on a Friday and ran Monday from the board. Nobody asked where the spreadsheet had gone.

    \n
    DWDana WhitlowHarbour Point boat club
    \n
    • \n
  • \n

    The blank workspace was enough. Two lists and we were away.

    \n
    KOKofi OseiSaltmarsh allotments
    \n
    • \n
\n
\n
\n
\n
\n
\n

Sign in

\n

Step 1 of 4. New here? The same form creates your account.

\n
\n
\n Setup25%\n \n
\n
\n \n \n
\n
\n \n \n
\n \n Continue\n Email me a sign-in link\n
\n

By continuing you accept the terms of use.

\n
\n
\n Invited by a team?\n Enter your code\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Step 2 of 4
    3. \n
  3. Profile
    4. \n
\n
\n
\n

Say who you are

\n

Your team sees this beside everything you add.

\n
\n
\n Skip this step\n
\n
\n
\n
\n
\n

Your picture

\n
\n
\n ME\n Mara EllisonDrawn from your initials until you upload a photo\n
\n
\n MEMEMEME\n \n
\n
\n
\n
\n

Tell me about

\n
\n \n \n \n
\n
\n
\n
\n Why do you ask for my role?\n

It decides which workspace templates are offered in the next step. Nobody else sees it.

\n
\n
\n Can I change my handle later?\n

Once every 30 days, from your profile.

\n
\n
\n Who can see my email address?\n

Only the owners of workspaces you join.

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

Profile

\n

Step 2 of 4. Two fields are required.

\n
\n
\n \n \n
\n
\n \n \n A handle has no spaces. Try mara-ellison.\n
\n
\n \n \n \n \n \n
\n
\n \n \n One or two lines. Optional.\n
\n \n
\n Continue\n Back\n \n Discard\n
\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Step 3 of 4
    3. \n
  3. Workspace
    4. \n
\n
\n
\n

Pick a workspace to start from

\n

A template is only a first arrangement. Everything in it can be renamed or removed.

\n
\n
\n Back\n Use Club rota\n
\n
\n
\n \n
\n SelectedClub rota3 boards, 12 lists, a calendar\n Most usedEvent plan1 board, a timeline, a budget\n For committeesMinutes and actions2 boards, 6 lists\n Start emptyBlank1 board, nothing on it\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
Club rota createsHoldsItemsSample rows
BoardsDuties, boats, members324
ListsOne per week and per boat1296
CalendarTides and race days118
RolesOwner, editor, viewer30
RemindersThe evening before a duty20
\n \n
\n
\n

Your choice

\n
\n

Template Club rota

\n

Sample rows 138

\n

Step 3 of 4

\n \n

Sample rows are marked and can be cleared in one go from workspace settings.

\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Step 4 of 4
    3. \n
  3. Team
    4. \n
\n
\n
\n

Invite the others

\n

Four invitations sent, one accepted, one came back.

\n
\n
\n Back\n Finish setup\n
\n
\n
\n
\n
\n
\n \n
Invitations last seven days. After that the link stops working and you can send a new one.
\n
\n
\n \n
One address bounced. kofi@saltmarsh.example does not accept mail.
\n
\n
\n

Invited 4

\n
    \n
  • \n DW\n
    Dana Whitlowdana@harbourpoint.example, editor
    \n Joined\n
    • \n
  • \n TR\n
    Tobias Renntobias@harbourpoint.example, editor
    \n Invited\n
    • \n
  • \n IV\n
    Ines Vargaines@wrenhill.example, viewer
    \n Invited\n
    • \n
  • \n KO\n
    Kofi Oseikofi@saltmarsh.example, editor
    \n Bounced\n
    • \n
\n
\n \n

Nobody has asked to join

\n

People who open your workspace link without an invitation appear here for you to approve.

\n Copy the workspace link\n
\n
\n
\n
\n
\n

Send an invitation

\n

Step 4 of 4. One address at a time, or paste a list.

\n
\n
\n \n \n
\n
\n ?Editors change rows. Viewers read and comment.\n \n \n \n \n
\n Send invitation\n
\n
\n
\n
\n
\n

Withdraw Kofi's invitation?

\n

The address bounced. Withdrawing frees the seat; you can invite him again at another address.

\n
\n Keep\n Withdraw\n
\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Setup
    2. \n
  2. Help
    3. \n
  3. Setup guide
    4. \n
\n
\n
\n

Setup guide

\n

What each step does and what you can leave for later.

\n
\n
\n Back to setup\n
\n
\n
\n
\n
\n
\n

From sign-in to a working board

\n

Setup has four screens. Only the first is required; the rest fill in sensible defaults if you skip them.

\n

What is saved, and when

\n

Each step is saved when you press Continue. Leaving half way keeps what you entered for seven days under your email address.

\n

What you can skip

\n
    \n
  • Profile: your name is taken from your email address.
    • \n
  • Workspace: you get the blank template.
    • \n
  • Team: you can invite people at any time.
    • \n
\n

Coming back to a step

\n

The numbered steps at the top are links. To reopen one from elsewhere, add #profile or #team to the setup address.

\n

\n Workspace templates\n Visited: profile\n Hovered link\n Active link\n

\n
\n
\n
\n
\n \n
\n
\n Is there anything to pay?\n

No. Setup never asks for card details, and a workspace of up to ten people stays free.

\n
\n
\n Can two people own a workspace?\n

Yes. Give a second person the owner role in step 4.

\n
\n
\n How do I bring a spreadsheet?\n

Choose any template, then use Import on its first board.

\n
\n
\n What if I picked the wrong template?\n

Clear the sample rows and apply another from workspace settings.

\n
\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.landing.s08.p02.t03.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-8232\",\n \"short\": \"v1-gl-8232\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(233 64 87);\n --color-canvas: rgb(233 64 87);\n --color-surface: rgb(255 255 255 / 0.2);\n --color-surface-alt: rgb(255 255 255 / 0.3);\n --color-surface-strong: rgb(255 255 255 / 0.4);\n --color-bar: rgb(138 35 135 / 0.75);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(138 35 135 / 0.6);\n --color-bar-alt-text: rgb(255 255 255);\n --color-inverse: rgb(255 255 255);\n --color-inverse-text: rgb(138 35 135);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(255 255 255 / 0.8);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(255 255 255);\n --color-link: rgb(38 230 255);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(216 205 249);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(79 229 255);\n --color-border: rgb(255 255 255 / 0.3);\n --color-border-strong: rgb(255 255 255 / 0.4);\n --color-border-muted: rgb(255 255 255 / 0.1);\n --color-accent: rgb(255 255 255);\n --color-accent-text: rgb(138 35 135);\n --color-accent-alt: rgb(0 131 37);\n --color-fill-1: rgb(242 113 33);\n --color-fill-2: rgb(233 64 87);\n --color-fill-3: rgb(138 35 135);\n --color-fill-4: rgb(240 112 112);\n --color-button: rgb(255 255 255);\n --color-button-text: rgb(138 35 135);\n --color-button-hover-text: rgb(84 10 25);\n --color-button-secondary: rgb(255 255 255 / 0.2);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(138 35 135 / 0.6);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.4);\n --color-disabled: rgb(255 255 255 / 0.1);\n --color-disabled-text: rgb(255 255 255 / 0.6);\n --color-danger: rgb(84 10 25);\n --color-danger-surface: rgb(233 64 87 / 0.6);\n --color-success: rgb(42 238 98);\n --color-warning: rgb(242 113 33);\n --color-notice: rgb(255 255 255 / 0.6);\n --color-notice-text: rgb(84 10 25);\n --color-focus: rgb(38 230 255);\n --color-shadow: rgb(0 0 0 / 0.2);\n --color-overlay: rgb(84 10 25 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 64px;\n --text-h1: 28px;\n --text-h2: 24px;\n --text-h3: 16px;\n --line-body: 1.6;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 300;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 20px;\n --radius-panel: 10px;\n --radius-pill: 30px;\n --radius-page: 20px;\n --shadow-panel: 0 22px 38px -6px var(--color-shadow);\n --shadow-control: 0 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 0 8px 32px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 20px 40px 0 var(--color-shadow);\n --shadow-text: 0 2px 4px var(--color-shadow);\n --fill-page: linear-gradient(320deg, var(--color-fill-1), var(--color-fill-2), var(--color-fill-3));\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: color-mix(in srgb, var(--color-surface), white 20%);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 40%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --fill-button-secondary: var(--color-button-secondary);\n --transition: background-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 16px;\n}\n" } }