{ "id": "v1-dd-1241", "long_id": "v1.dev-dark.landing.s01.p02.t04.u01", "name": "Dark developer tools landing page", "era": { "slug": "dev-dark", "code": "dd", "name": "Dark developer tools", "years": [ 2019, 2026 ], "description": "Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the product page of a developer tool as it looked from 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans-serif type and one soft glow of colour behind the hero. The claim is centred over the glow, the product is shown as a window with a status list and a build log, and below it come customer names set as text, a ruled strip of figures and a grid of bordered cards that each hold a small line drawing. Monospace is used for every detail that a developer would read as data: commands, dates, ids, labels above sections and the heads of tables.", "url": "https://chrono.skin/s/v1-dd-1241", "preview_url": "https://chrono.skin/s/v1-dd-1241/specimen.html", "files": { "STYLE.md": "# Dark developer tools landing page\n\n## Summary\n\nThis is the product page of a developer tool as it looked from 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans-serif type and one soft glow of colour behind the hero. The claim is centred over the glow, the product is shown as a window with a status list and a build log, and below it come customer names set as text, a ruled strip of figures and a grid of bordered cards that each hold a small line drawing. Monospace is used for every detail that a developer would read as data: commands, dates, ids, labels above sections and the heads of tables.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in one centred column, `.ds-wrap`, at most `--size-page` (1200px) wide with `--space-5` (24px) of side padding. Running text is kept to `--size-narrow` (720px).\n- Navigation is `.ds-nav`, a bar `--size-top` (56px) tall that stays at the top of the window on the translucent `--fill-bar`, blurred by `--backdrop-blur`, with a hairline below. Brand at the left, four links after it, a secondary and a primary small button at the right. There is no sidebar on the home view.\n- The home view stacks, top to bottom: `.ds-hero` (announcement pill, title, lead, two large buttons, a mono command line, then `.ds-frame`, the product window); `.ds-logos`; `.ds-stat`, four figures in one ruled strip; a band with `.ds-section__head` and `.ds-grid` (three columns, the first card two columns wide); a band with `.ds-cols`, a code panel beside the dated `.ds-list`; and `.ds-cta`, the one inverted block. Bands are `.ds-band`, padded by `--space-8` (88px) and parted by a hairline in `--color-border-muted`.\n- Inner pages have no hero. They open with `.ds-page-header`: breadcrumb, a `--text-h1` title and one muted line at the left, at most two buttons at the right, over a small glow. Below it the work sits in `.ds-wrap`: a `.ds-stack` (24px apart) or `.ds-cols`. `.ds-cols` is two equal columns; `--wide` is 2 to 1 and `--side` is a main column beside a `--size-side` (300px) column. Tabs are a segmented control in a `.ds-toolbar` directly under the page header.\n- Views. The specimen is a deployment service with four views. `home` is the landing page described above. `pricing` has the tabs for the billing period, three `.ds-plan` cards, the comparison table beside the panel of the current plan with its buttons, and the open dialog that cancels the plan. `changelog` has two `.ds-entry` articles and the pagination in the main column; the releases sidebar, the label key, an empty state and a row of links at the right. `start` is the sign-up form under its notices, beside the steps, a terminal block and the limits of the free plan.\n- Spacing scale: `--space-1` 4px (inside pills and key caps, between pagination links), `--space-2` 8px (button vertical padding, between adjacent buttons and badges), `--space-3` 12px (panel head and table cell vertical padding), `--space-4` 16px (panel padding, between grid cards, between form rows), `--space-5` 24px (between stacked blocks, side padding, plan padding), `--space-6` 32px (between columns, around a dialog and an empty state), `--space-7` 48px (page header top, hero to frame, inverted block padding), `--space-8` 88px (band and hero padding, above the footer).\n- Other sizes: `--size-art` 168px (the drawing area of a card), `--size-glow` 560px (height of the hero glow), `--size-date` 120px (the date column of lists and entries), `--size-mark` 24px, `--size-dot` 8px, `--size-dialog` 440px.\n- Below 980px cards stand two across and every column pair stacks. Below 640px everything is one column, the links of the bar move to a second row that scrolls sideways, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n- On a phone (640px and below) `.ds-nav__inner` wraps: the brand and `.ds-nav__actions` stay on the first row, `.ds-nav__links` take a second row of their own that scrolls sideways, each link sharing the width equally with centred text; the secondary button of the actions is not shown. The `.ds-menu` stays in the actions and lists every view as `.ds-menu__item--view` rows, the current one with the accent line. A tooltip in a panel title opens under its line with a capped width.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThe conventions for which text sits on which fill are those of the era's first layout and are kept here.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` sit on the page, on `--fill-panel`, `--color-surface-alt` (the stat band, a hovered row, the dialog) and `--color-surface-strong` (the current chip, key caps, quiet badges, empty tally cells). `--color-bar-text` sits on `--fill-bar` (the top bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (the ticker, the head of the release card, code heads, table heads, the footer), with `--color-heading` for a link or the brand on that fill. `--color-input-text` sits on `--fill-input` (form controls and every code block). `--color-inverse-text` sits on `--fill-inverse`, used once per view, for `.ds-callout`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They tint the cover of a card (a gradient from 30% to 6% of the fill over transparent) and colour its drawing (70% of the fill mixed into `--color-heading`); `--color-fill-1` is the hero glow.\n- `--color-accent` marks the current link of the bar and fills the default badge through `--fill-accent`. `--color-accent-alt` is a line and text colour: the mono label of the hero, the node of each timeline entry, the dot of the current sidebar row, the \"changed\" cells of a tally, keywords in code.\n- `--color-success`, `--color-warning` and `--color-danger` are a dot, text, the lit cells of a tally, or a 12% tint with a 32% hairline and the colour as text. Added and removed lines of a diff are a 13% tint with text mixed 55% into `--color-input-text`. Nothing else is filled with them; the destructive button is a tint too.\n- Borders: `--color-border` on boxes and bars, `--color-border-strong` on the release card, secondary buttons, the timeline rule, the current chip and the dialog, `--color-border-muted` between rows inside a box. All `--border-width`; `--border-width-strong` is the line under the current link and the focus offset.\n- Type. One family for body, headings and controls, `--font-mono` for versions, dates, counts, the ticker and code. `--text-base` 15px at `--line-body` 1.5; `--text-ui` 14px for navigation, buttons, forms, tables and card text; `--text-small` 12px for badges, mono labels and dates; `--text-large` 18px for the hero lead and timeline titles. `--text-display` 64px is the hero title only; `--text-h1` 38px page titles, figures and the version on the release card; `--text-h2` 26px column heads and the lead card; `--text-h3` 16px panel and card titles. Headings are `--weight-heading` 700 with negative tracking.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, table heads, sidebar titles), tracked by 6% of the font size. Links are `--color-link` without underline and gain one on hover; quiet links are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 8px for buttons, inputs and the brand tile, `--radius-panel` 12px for panels, code, notices, the callout and the pager, `--radius-page` 18px for the release card, grid cards and the dialog box, `--radius-pill` 4px for badges and chips. `--shadow-panel` is on panels and grid cards, `--shadow-control` (a glow in the button colour) on buttons and the brand tile, `--shadow-dialog` on the release card and the dialog.\n- One-off values written with `calc()` and `color-mix()`: the glow (24% of a fill), cover tints (30% and 6%), drawing colours (70%), status tints (12% and 32%), diff lines (13% and 55%), the notice border (22% and 40%), key cap corners (half of `--radius-control`), tally cell corners (half of `--radius-pill`), mono label tracking, the left column of `.ds-cols--menu` (72% of `--size-side`). Navigation links are at `opacity` 0.62 until current, callout text at 0.78. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and `--fill-page`. `.ds-nav`, the views and `.ds-footer` are its direct children.\n- `.ds-wrap`, `.ds-band`, `.ds-stack`, `.ds-cols`: the centred column, a padded section with a rule above (`--tight`, `--flush`), a vertical stack, and the column pairs (`--wide`, `--side`). `.ds-panel--grow` in a stack takes up spare height.\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 24px tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`) and `.ds-nav__actions`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current`.\n- `.ds-hero`: home view only. `.ds-hero__pill`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions`, `.ds-hero__cmd`, then `.ds-frame`. The glow is its `::before`.\n- `.ds-frame`: the product drawn as a window: `.ds-frame__bar` (lights, path, a status badge), `.ds-frame__body` with `.ds-frame__rows` of `.ds-frame__row` and the mono `.ds-frame__log`.\n- `.ds-logos`: `.ds-logos__row` of `.ds-logos__name` (`--mono`, `--light`, `--italic`) and a mono caption. Text only, never an image.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__inner` with `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions`.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`; `.ds-prose__lead` for the first paragraph.\n- `.ds-code`: a code block on `--fill-input`: optional `.ds-code__head` with `.ds-code__name`, then `.ds-code__body` (a `pre`). Spans `.ds-code__k`, `__s`, `__c`, `__n` colour keywords, strings, comments and names.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot`, `.ds-avatar`: the mono label (`--accent`), mono data text, a key cap, a status dot (`--success`, `--warning`, `--danger`, `--accent`, `--ring`) and an initials disc.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more` (appends an arrow). `.ds-linkrow` lays links in a row.\n- `.ds-button`: 13px medium text, 6px corners. `--secondary` (translucent fill, strong hairline), `--danger` (tint, hairline and text in the danger colour), `--inverse` (on the inverted block only), `--small`, `--large`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces them 8px apart.\n- `.ds-form`: labels above fields. `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono`), `.ds-form__select`, `.ds-form__textarea`, `is-error` plus `.ds-form__error`, `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: inside a panel, edge to edge: a mono uppercase head on `--fill-bar-alt`, hairline rows, `is-hover` rows on `--color-surface-alt`, `.ds-table__num` for right-aligned mono numbers, `.ds-table__state` for a dot with a word. Wrap in `.ds-table__wrap`; `.ds-table__foot` closes the panel.\n- `.ds-list`: dated rows: `.ds-list__item` is `.ds-list__meta` (mono date) beside a `.ds-list__title` link and `.ds-list__text`.\n- `.ds-panel`: hairline box on `--fill-panel`: `.ds-panel__head` with `.ds-panel__title`, `.ds-panel__body`; `.ds-panel__rows` of `.ds-panel__row` (`.ds-panel__key`) for facts. A `.ds-code` directly inside loses its own border.\n- `.ds-stat`: the row of figures. Each `.ds-stat__item` is a `.ds-stat__figure` over a mono `.ds-stat__label`, parted by vertical hairlines.\n- `.ds-section__head`: `.ds-eyebrow` and `.ds-section__title`, whose `strong` part is bright and the rest muted.\n- `.ds-grid`: feature cards. `.ds-grid__cell` (`--wide`) holds `.ds-grid__art` (`--2`, `--3`, `--4` for the other fills) with one inline SVG drawn in strokes, and `.ds-grid__body` with `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-cta`: the inverted block: `.ds-cta__title`, `.ds-cta__text` and one `.ds-button--inverse`.\n- `.ds-tabs`: a segmented control of `.ds-tabs__tab`; the current one (`is-current`) is on `--color-surface-strong`. `.ds-toolbar` puts it in a row with a `.ds-toolbar__note`.\n- `.ds-plans`: three `.ds-plan` cards (`--featured` carries the glow): `.ds-plan__name`, `.ds-plan__price` with `.ds-plan__per`, `.ds-plan__text`, a button, `.ds-plan__items` of `.ds-plan__item`.\n- `.ds-entry`: a changelog entry: `.ds-entry__meta` (date and badge) beside a `.ds-prose`.\n- `.ds-badge`: small pill on `--fill-accent`. `--quiet`, `--outline`, `--new` (accent-alt tint), `--mono`. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a mono `.ds-sidebar__title` over `.ds-sidebar__list` along a rule; `.ds-sidebar__item`, current with `is-current`.\n- `.ds-steps`: numbered `.ds-steps__item` rows with a `.ds-steps__title`.\n- `.ds-notice`: message strip on `--color-notice`; `--error` in the danger colours. `.ds-notice__title`; `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link`; `is-current` on `--color-surface-strong`, `is-disabled` grey.\n- `.ds-breadcrumb`: `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block in `--color-overlay` centring `.ds-dialog__box` with `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a dashed box: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-footer`: on `--fill-bar-alt`: `.ds-footer__inner` with `.ds-footer__brand` (`.ds-footer__about`) and three columns of `.ds-footer__title` and `.ds-footer__links` of `.ds-footer__link`; `.ds-footer__line` is the mono last line with `.ds-footer__status`.\n- `.ds-menu`: a drop-down behind a button in the bar (`.ds-menu__button`, `.ds-menu__list`); it lists every view, so on a phone it is the full navigation.\n- `.ds-menu__item`: one link of the drop-down; the current view carries the accent line and the stronger fill.\n- `.ds-menu__item--view`: an item of the menu that names a view of the site; the current view's item is marked by one `:has()` rule per view, like the bar links, so the menu is a second way to every view on a phone.\n- `.ds-menu__title`: a small mono label over a group of links in the drop-down.\n- `.ds-carousel`: customer quotes in a row that scrolls and snaps (`.ds-carousel__track`, `.ds-carousel__slide`); the dots only count and are not links.\n- `.ds-avatar`: initials in a circle for a person, in the account menu, quotes and lists.\n- `.ds-tooltip`: a small question mark beside a title; `.ds-tooltip__tip` opens on hover or focus, never by default.\n- `.ds-progress`: a thin bar for a build, a rollout or a quota, with a mono line above (`.ds-progress__head`, `.ds-progress__value`, `.ds-progress__bar`).\n- `.ds-switch`: an on or off setting that takes effect at once, drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`).\n- `.ds-accordion`: questions as `details` items (`.ds-accordion__item`, `.ds-accordion__summary`, `.ds-accordion__body`); the first is open.\n\n## Never\n\n- `block-gap <= 88px`: bands are 88px apart at most, blocks inside them 24px.\n- `font-size >= 12px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-weight <= 700`: headings are bold; nothing is heavier.\n- `font-families <= 2`: one grotesque and one monospace.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 5%`: only mono labels are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 3px`: the hero title is pulled together by 2.4px; nothing is spaced wider than that.\n- `border-width <= 2px`: every rule and outline is a 1px hairline; 2px is the most any palette's emphasis takes.\n- `border-radius <= 12px`: 6px on controls, 8px on panels, 12px on the largest boxes; pills are shapes.\n- `box-shadow-blur <= 32px`: only the dialog and the product window cast a wide shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 5%`: gradients are the glows behind the hero, the page header and the card drawings, never a filled box.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block on the page is a `.ds-panel` or a `.ds-grid__cell` with a 1px border in `--color-border`, placed in `.ds-wrap` inside a `.ds-band`; a new feature gets a card with one stroke drawing in the next fill colour; data a developer would copy is set in `--font-mono`. Keep to the conventions above for which text sits on which fill: never put text on a full-strength `--color-fill-*` or status colour, tint it instead. Use one glow per view, always from `--color-fill-1`, and one inverted block. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-page: 1200px;\n --size-narrow: 720px;\n --size-top: 56px;\n --size-side: 300px;\n --size-mark: 24px;\n --size-dot: 8px;\n --size-dialog: 440px;\n --size-art: 168px;\n --size-glow: 560px;\n --size-date: 120px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 88px;\n}\n\n/* shell: one centred column under a bar that stays at the top of the window */\n.ds-page {\n min-height: 100vh;\n margin: 0;\n padding: 0;\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/* 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-wrap {\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-band {\n padding: var(--space-8) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-band--flush {\n padding-top: var(--space-7);\n border-top: 0;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack > .ds-panel--grow {\n flex: 1 0 auto;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: stretch;\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n}\n.ds-cols--wide {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n}\n\n/* nav: a translucent bar; brand at the left, links in the middle, sign-in at the right */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 5;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n max-width: var(--size-page);\n min-height: var(--size-top);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__links {\n display: flex;\n flex: 1 1 auto;\n gap: var(--space-1);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-bar-text);\n border-radius: var(--radius-control);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.66;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__link.is-current {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#changelog:target) .ds-nav__link[href=\"#changelog\"],\n.ds-page:has(#start:target) .ds-nav__link[href=\"#start\"] {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* hero: centred claim over a glow in the first fill colour, then the product in a window */\n.ds-hero {\n position: relative;\n padding: var(--space-8) 0 var(--space-7);\n overflow: hidden;\n text-align: center;\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: var(--size-glow);\n background: radial-gradient(ellipse 46% 78% at 50% 0, color-mix(in srgb, var(--color-fill-1) 34%, transparent), transparent 72%);\n pointer-events: none;\n}\n.ds-hero > .ds-wrap {\n position: relative;\n}\n.ds-hero__pill {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-bottom: var(--space-5);\n padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-hero__pill:hover,\n.ds-hero__pill.is-hover {\n color: var(--color-heading);\n border-color: var(--color-text-muted);\n}\n.ds-hero__title {\n max-width: 18ch;\n margin: 0 auto var(--space-4);\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: 54ch;\n margin: 0 auto var(--space-5);\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 align-items: center;\n justify-content: center;\n gap: var(--space-3);\n}\n.ds-hero__cmd {\n display: block;\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-hero__cmd b {\n color: var(--color-accent-alt);\n font-weight: var(--weight-body);\n}\n\n/* frame: the product drawn as a window; the largest shadow and the page radius show here */\n.ds-frame {\n margin-top: var(--space-7);\n background: var(--fill-panel);\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 overflow: hidden;\n text-align: left;\n}\n.ds-frame__bar {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-frame__lights {\n display: flex;\n gap: var(--space-1);\n}\n.ds-frame__lights span {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-frame__path {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-frame__body {\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);\n}\n.ds-frame__rows {\n margin: 0;\n padding: var(--space-2) 0;\n list-style: none;\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n}\n.ds-frame__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n}\n.ds-frame__row.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-frame__name {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-frame__log {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: 1.9;\n white-space: pre;\n}\n\n/* logos: customer names set as text, each in its own cut of the type set */\n.ds-logos {\n padding: var(--space-6) 0 var(--space-7);\n}\n.ds-logos__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n color: var(--color-heading);\n}\n.ds-logos__name {\n font-family: var(--font-heading);\n font-size: calc(var(--text-h2) * 0.92);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: calc(var(--text-h2) * -0.03);\n opacity: 0.82;\n}\n.ds-logos__name--mono {\n font-family: var(--font-mono);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-large) * 0.12);\n text-transform: uppercase;\n}\n.ds-logos__name--light {\n font-family: var(--font-body);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n.ds-logos__name--italic {\n font-style: italic;\n}\n\n/* stats: figures in one ruled strip */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n min-width: 0;\n padding: var(--space-5) var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-stat__figure {\n display: block;\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 font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* section head: a mono label, then a two-tone statement */\n.ds-section__head {\n max-width: var(--size-narrow);\n margin: 0 0 var(--space-7);\n}\n.ds-section__title {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-section__title strong {\n color: var(--color-heading);\n font-weight: inherit;\n}\n\n/* grid: bordered feature cards; a drawing in the fill colour over a glow, the text below */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__art {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-art);\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-1) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-1) 72%, var(--color-heading));\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-grid__art--2 {\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-2) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-2) 72%, var(--color-heading));\n}\n.ds-grid__art--3 {\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-3) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-3) 72%, var(--color-heading));\n}\n.ds-grid__art--4 {\n background: radial-gradient(ellipse 70% 90% at 50% 110%, color-mix(in srgb, var(--color-fill-4) 26%, transparent), transparent 72%);\n color: color-mix(in srgb, var(--color-fill-4) 72%, var(--color-heading));\n}\n.ds-grid__art svg {\n display: block;\n width: auto;\n max-width: 86%;\n height: 76%;\n}\n.ds-grid__body {\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\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 letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* list: dated rows under a rule */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n gap: var(--space-4);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n border-top: 0;\n padding-top: 0;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-list__meta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-colhead {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n}\n.ds-colhead__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* call to action: the one inverted block */\n.ds-cta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-cta__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-cta__text {\n margin: var(--space-2) 0 0;\n opacity: 0.7;\n}\n\n/* page header: breadcrumb, title and one line over a small glow; the action at the right */\n.ds-page-header {\n position: relative;\n padding: var(--space-7) 0 var(--space-6);\n overflow: hidden;\n}\n.ds-page-header::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background: radial-gradient(ellipse 40% 100% at 30% 0, color-mix(in srgb, var(--color-fill-1) 18%, transparent), transparent 70%);\n pointer-events: none;\n}\n.ds-page-header__inner {\n position: relative;\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-3) 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 text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 62ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* tabs: a segmented control */\n.ds-tabs {\n display: inline-flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) + var(--space-1));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-toolbar__note {\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* plans: three priced cards; the middle one carries the glow */\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-plan {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-plan--featured {\n background: radial-gradient(ellipse 90% 60% at 50% 0, color-mix(in srgb, var(--color-fill-1) 22%, transparent), transparent 75%), var(--color-surface);\n border-color: color-mix(in srgb, var(--color-fill-1) 55%, var(--color-border-strong));\n}\n.ds-plan__name {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\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-bold);\n line-height: var(--line-heading);\n}\n.ds-plan__name .ds-badge {\n line-height: var(--line-heading);\n}\n.ds-plan__price {\n display: block;\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}\n.ds-plan__per {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n.ds-plan__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-plan__items {\n flex: 1 0 auto;\n margin: 0;\n padding: var(--space-4) 0 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-ui);\n}\n.ds-plan__item {\n display: flex;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n}\n.ds-plan__item::before {\n content: \"\\2713\";\n color: var(--color-success);\n}\n\n/* changelog entry: the date in a mono column, the text beside it */\n.ds-entry {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n gap: var(--space-5);\n padding: 0 0 var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-entry__meta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n padding-top: var(--space-2);\n}\n.ds-entry .ds-code {\n margin: 0 0 var(--space-4);\n}\n\n/* sidebar: a labelled list of links along a rule */\n.ds-sidebar {\n font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-1) 0 var(--space-1) var(--space-4);\n border-left: var(--border-width) var(--border-style) transparent;\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n border-left-color: var(--color-accent-alt);\n}\n\n/* steps: a numbered run of what happens next */\n.ds-steps {\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: step;\n font-size: var(--text-ui);\n}\n.ds-steps__item {\n display: flex;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n counter-increment: step;\n}\n.ds-steps__item:last-child {\n border-bottom: 0;\n}\n.ds-steps__item::before {\n content: \"0\" counter(step);\n color: var(--color-accent-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: calc(var(--line-body) * 1.1);\n}\n.ds-steps__title {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* footer: link columns on the secondary bar, a mono line under them */\n.ds-footer {\n margin-top: var(--space-8);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-7) var(--space-5) var(--space-6);\n}\n.ds-footer__about {\n max-width: 34ch;\n margin: var(--space-3) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n opacity: 0.7;\n}\n.ds-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n display: inline-block;\n padding: var(--space-1) 0;\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-heading);\n}\n.ds-footer__line {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-4);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-footer__status {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n\n/* brand: the mark on a tile dressed like the primary button, the name beside it */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* small parts used everywhere: the mono label, the key cap, the status dot, the avatar */\n.ds-eyebrow {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n color: var(--color-accent-alt);\n}\n.ds-kbd {\n display: inline-block;\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-text-muted);\n border-radius: 50%;\n}\n.ds-dot--success {\n background: var(--color-success);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-success) 22%, transparent);\n}\n.ds-dot--warning {\n background: var(--color-warning);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-warning) 22%, transparent);\n}\n.ds-dot--danger {\n background: var(--color-danger);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-danger) 22%, transparent);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n}\n.ds-mono {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\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 0 var(--space-3);\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 font-weight: var(--weight-bold);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-text-muted);\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 background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n\n/* code block: a title strip on the secondary bar, lines in the mono font on the input fill */\n.ds-code {\n min-width: 0;\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-code__head {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-code__name {\n flex: 1 1 auto;\n min-width: 0;\n}\n.ds-code__body {\n display: block;\n margin: 0;\n padding: var(--space-4);\n overflow-x: auto;\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n white-space: pre;\n}\n.ds-code__k {\n color: var(--color-accent-alt);\n}\n.ds-code__s {\n color: var(--color-success);\n}\n.ds-code__c {\n color: var(--color-text-muted);\n}\n.ds-code__n {\n color: var(--color-link);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\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 outline-offset: var(--border-width-strong);\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--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n content: \" \\2192\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\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-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\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-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\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(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n border-color: var(--color-text-muted);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 22%, transparent);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 82%, var(--color-inverse));\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\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 color: var(--color-disabled-text);\n border-color: var(--color-border-muted);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\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 transition: var(--transition);\n}\n.ds-form__input--mono,\n.ds-form__textarea--mono {\n font-family: var(--font-mono);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) * 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:hover,\n.ds-form__select:hover,\n.ds-form__textarea:hover {\n border-color: var(--color-border-strong);\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 outline-offset: 0;\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}\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}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* badge: a small label; the status variants are a tint of their colour with a hairline */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-color: var(--color-border);\n}\n.ds-badge--outline {\n background: transparent;\n color: var(--color-text-muted);\n border-color: var(--color-border-strong);\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 32%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 12%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 32%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 12%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);\n}\n.ds-badge--mono {\n font-family: var(--font-mono);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\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 color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* table: hairline rows; the head is a strip of small mono labels on the secondary bar */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\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 border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.04);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr:hover th,\n.ds-table tbody tr.is-hover td,\n.ds-table tbody tr.is-hover th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n}\n.ds-table__state {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-table__wrap {\n overflow-x: auto;\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-4);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* panel: a hairline box on the surface fill */\n.ds-panel {\n min-width: 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}\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-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading-alt);\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel > .ds-code {\n border: 0;\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n}\n.ds-panel__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-panel__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__key {\n color: var(--color-text-muted);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 22%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\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-2);\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 font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--space-6) - var(--space-1));\n padding: var(--space-1) var(--space-2);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n font-variant-numeric: tabular-nums;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-heading);\n border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* dialog: a dimmed block with the box in its middle */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\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}\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-4) var(--space-4) 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-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-base) * 0.75);\n height: calc(var(--text-base) * 0.75);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\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-2);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\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: var(--space-2) 0 var(--space-1);\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 letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__body > .ds-linkrow {\n margin-top: var(--space-4);\n}\n.ds-panel__body > .ds-badgerow + p {\n margin-top: var(--space-3);\n}\n\n/* medium windows: two cards across, the side column goes under */\n@media (max-width: 980px) {\n .ds-grid,\n .ds-plans {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-cols,\n .ds-cols--side,\n .ds-cols--wide {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .ds-footer__brand {\n grid-column: 1 / -1;\n }\n}\n\n/* narrow windows: one column; the links of the bar move to a second row that scrolls sideways */\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-band {\n padding: var(--space-7) 0;\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: 0 var(--space-3);\n padding: var(--space-2) var(--space-4) 0;\n }\n .ds-nav__actions {\n margin-left: auto;\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n padding: var(--space-2) 0;\n overflow-x: auto;\n }\n .ds-hero {\n padding: var(--space-7) 0 var(--space-6);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-frame {\n margin-top: var(--space-6);\n }\n .ds-frame__body {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-frame__rows {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-logos__row {\n justify-content: flex-start;\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-bottom: 0;\n }\n .ds-stat__item,\n .ds-stat__item:first-child {\n padding: var(--space-4);\n border-left: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-stat__item:nth-child(even) {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-stat__figure {\n font-size: var(--text-h2);\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-section__title,\n .ds-cta__title,\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-grid,\n .ds-plans {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell--wide {\n grid-column: auto;\n }\n .ds-list__item,\n .ds-entry {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-2);\n }\n .ds-list__meta,\n .ds-entry__meta {\n flex-direction: row;\n align-items: center;\n }\n .ds-cta {\n padding: var(--space-5);\n }\n .ds-page-header {\n padding: var(--space-6) 0 var(--space-5);\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-4);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-table {\n min-width: 58ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer {\n margin-top: var(--space-7);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding: var(--space-6) var(--space-4) var(--space-5);\n }\n .ds-footer__line {\n padding: var(--space-4);\n }\n .ds-footer__status {\n margin-left: 0;\n }\n}\n\n/* menu: a drop-down behind a button in the bar; on a phone it is the way to every view */\n.ds-menu {\n position: relative;\n display: inline-block;\n flex: 0 0 auto;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\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 white-space: nowrap;\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button::after {\n content: \"\";\n width: var(--space-1);\n height: var(--space-1);\n margin-left: 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__button .ds-avatar {\n margin: calc(var(--space-1) * -1) 0;\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu[open] > .ds-menu__button {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 30;\n min-width: calc(var(--size-mark) * 9);\n margin: var(--space-1) 0 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\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 text-align: left;\n}\n.ds-menu__title {\n padding: var(--space-2) var(--space-2) var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-menu__title--rule {\n margin-top: var(--space-1);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-1) var(--space-2);\n color: var(--color-text);\n border-left: var(--border-width-strong) var(--border-style) var(--color-surface);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-left-color: var(--color-surface-strong);\n}\n\n/* carousel: customer quotes in a row that scrolls and snaps; the dots only count */\n.ds-carousel {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-4);\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__slide {\n display: flex;\n flex: 0 0 calc(50% - var(--space-2));\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-5);\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n scroll-snap-align: start;\n}\n.ds-carousel__quote {\n margin: 0;\n color: var(--color-heading);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-carousel__person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-carousel__name {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-carousel__role {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-carousel__nav {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-carousel__dots {\n display: flex;\n flex: 1 1 auto;\n gap: var(--space-1);\n}\n.ds-carousel__dot {\n width: var(--space-5);\n height: var(--border-width-strong);\n background: var(--color-border-strong);\n}\n.ds-carousel__dot.is-current {\n background: var(--color-accent);\n}\n.ds-carousel__arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: 1;\n}\n.ds-carousel__arrow::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-ui) * 0.5);\n height: calc(var(--text-ui) * 0.5);\n border-left: calc(var(--space-2) / 4) solid currentColor;\n border-bottom: calc(var(--space-2) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n}\n.ds-carousel__arrow + .ds-carousel__arrow::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__arrow.is-disabled {\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n}\n@media (max-width: 640px) {\n .ds-carousel__slide {\n flex-basis: 100%;\n }\n}\n\n/* tooltip: a hint that opens 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(--space-4);\n height: var(--space-4);\n margin-left: var(--space-1);\n vertical-align: middle;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: calc(var(--size-mark) * 10);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n display: block;\n}\n\n/* progress: a thin bar for a build, a rollout or a quota */\n.ds-progress {\n display: block;\n min-width: 0;\n}\n.ds-progress__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-progress__value {\n color: var(--color-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-dot);\n overflow: hidden;\n appearance: none;\n -webkit-appearance: none;\n background: var(--color-surface-strong);\n color: var(--color-accent);\n border: 0;\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent);\n}\n\n/* switch: an on and off setting drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2 + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n bottom: var(--border-width-strong);\n left: var(--border-width-strong);\n width: 40%;\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background: var(--color-accent);\n border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n left: auto;\n right: var(--border-width-strong);\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__label {\n font-size: var(--text-ui);\n}\n\n/* accordion: questions that open one by one */\n.ds-accordion {\n display: block;\n min-width: 0;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\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) 0;\n color: var(--color-heading);\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 flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-menu__item--view[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu__item--view[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-menu__item--view[href=\"#pricing\"],\n.ds-page:has(#changelog:target) .ds-menu__item--view[href=\"#changelog\"],\n.ds-page:has(#start:target) .ds-menu__item--view[href=\"#start\"] {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-left-color: var(--color-accent);\n font-weight: var(--weight-bold);\n}\n@media (max-width: 640px) {\n .ds-nav__actions > .ds-button--secondary {\n display: none;\n }\n}\n\n/* phones: the tooltip stays inside the window; the links are a row of equal cells */\n@media (max-width: 640px) {\n .ds-panel__title {\n position: relative;\n }\n .ds-panel__title .ds-tooltip {\n position: static;\n }\n .ds-panel__title .ds-tooltip__tip {\n max-width: min(calc(var(--size-mark) * 10), calc(100vw - var(--space-4) * 4));\n }\n .ds-nav__links > li {\n flex: 1 1 0;\n min-width: max-content;\n }\n .ds-nav__link {\n text-align: center;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: dark developer tools landing specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
Docs
\n Log in\n Sign up\n
\n
\n
\n\n
\n
\n
\n New Instant rollbacks are out of beta →\n

Ship every branch the moment it is pushed

\n

chronoskin builds each commit, gives it its own address and puts it in front of your team in under a minute. Production is one more push.

\n
\n Start deploying\n See pricing\n
\n $ npx chronoskin deploy --prod\n\n
\n
\n \n harbour-api / deployments\n Production healthy\n
\n
\n
    \n
  • fix/retry-on-timeouta41f9c2now
    • \n
  • main7be02d14m
    • \n
  • feat/usage-exportc93a77126m
    • \n
  • chore/bump-runtime19d4e0b1h
    • \n
  • docs/webhooks52f8a363h
    • \n
  • spike/edge-cachee07b1151d
    • \n
\n
12:04:31  Cloning harbour-api at a41f9c2\n12:04:33  Restored build cache (212 MB)\n12:04:41  build   compiled 148 modules in 7.6 s\n12:04:44  test    312 passed, 0 failed\n12:04:52  deploy  fra1, iad1, syd1\n12:04:58  ready   fix-retry-on-timeout.chronoskin.app
\n
\n
\n
\n
\n\n
\n
\n
    \n
  • Northwind
    • \n
  • tidal/io
    • \n
  • Larkspur
    • \n
  • quanta
    • \n
  • OBERON
    • \n
  • Fieldnote
    • \n
  • hello.kiln
    • \n
\n Trusted by 4,200 teams that ship every day\n
\n
\n\n
\n \n
\n\n
\n
\n
\n Fig. 01 / the pipeline\n

One pipeline from push to production. Previews, checks, regions and rollbacks are the same few lines of configuration.

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

A preview for every branch

\n

Each push gets its own address with its own environment. Reviewers open a link, not a terminal.

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

Nineteen regions

\n

Name the regions in one line. Traffic goes to the nearest healthy one.

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

Checks that block

\n

Tests, type checks and your own scripts run before anything is promoted.

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

Logs and timings

\n

Every request, build step and cold start, kept for thirty days and searchable.

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

Rollback in one step

\n

Any earlier deployment is still there. Point production back at it in a second.

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

Configured in one file

Read the guide
\n
\n
\n

chronoskin.json

\n v3\n
\n
\n
{\n  \"build\":   \"npm run build\",\n  \"output\":  \"dist\",\n  \"regions\": [\"fra1\", \"iad1\", \"syd1\"],\n  \"checks\":  [\"npm test\", \"npm run types\"],\n  \"preview\": { \"branches\": \"*\", \"expires\": \"14d\" },\n  \"rollback\": { \"onErrorRate\": 0.02 }\n}
\n
\n
\n
\n
\n

Latest changes

Changelog
\n \n
\n
\n
\n
\n\n
\n
\n
\n Fig. 02 / the teams\n

What teams say after a month. Three of the 4,200 that ship every day.

\n
\n
\n
    \n

  • We stopped keeping a release calendar. A branch is pushed, the preview is there, and production is one more push.

    IHIngrid HalvorsenHead of platform, parcel carrier
    • \n

  • The rollback took one second on the day we needed it. Nobody had to remember how it works.

    KOKofi OseiStaff engineer, regional bank
    • \n

  • Reviewers open a link instead of a terminal. Our review time fell by half in the first month.

    MKMira KesslerEngineering lead, course platform
    • \n
\n
01 / 03
\n
\n
\n
\n\n
\n
\n
\n

Your next push could already be live.

\n

Free for personal projects. No card, no sales call.

\n
\n Start deploying\n
\n
\n
\n\n
\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Pricing
    3. \n
  3. Plans
    4. \n
\n

Pay for what you deploy

\n

Every plan has previews, rollbacks and all regions. You pay for seats and build minutes, nothing else.

\n
\n
\n Talk to us\n Start free\n
\n
\n
\n
\n\n
\n
\n
\n \n Prices in US dollars, two months free when billed yearly.\n
\n\n
\n
\n

Hobby

\n
$0forever, one seat
\n

For side projects and trying things out.

\n Start free\n
    \n
  • 400 build minutes a month
    • \n
  • Previews for every branch
    • \n
  • 3 regions
    • \n
  • Logs kept for 1 day
    • \n
\n
\n
\n

Team Most teams

\n
$20per seat, per month
\n

For teams that ship to production every day.

\n Start a 14 day trial\n
    \n
  • 6,000 build minutes a month
    • \n
  • All 19 regions
    • \n
  • Instant rollbacks and blocking checks
    • \n
  • Logs kept for 30 days
    • \n
\n
\n
\n

Scale

\n
Customfrom 50 seats
\n

For companies with compliance and uptime terms.

\n Talk to us\n
    \n
  • Unmetered build minutes
    • \n
  • Single sign-on and audit log
    • \n
  • 99.99% uptime agreement
    • \n
  • A named engineer on call
    • \n
\n
\n
\n\n
\n
\n

What each plan includes ?Limits are per workspace and reset on the first of the month.

per month
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
LimitHobbyTeamScale
Build minutes4006,000unmetered
Concurrent builds11264
Bandwidth, GB1001,00010,000
Regions31919
Log retention, days130365
Preview lifetime, days71490
Team seats150unmetered
Extra build minutenone$0.004$0.002
\n
\n
Usage resets on the first of the month.Limits changed in February
\n
\n\n
\n
\n

Your plan

Team, 8 seats
\n
\n

Renews on 1 April 2025 for $1,600 a year. You have used 2,140 of 6,000 build minutes.

\n
Build minutes, March2,140 / 6,000
36%
\n
\n Add seats\n Invoices\n \n Cancel plan\n
\n
\n
\n
\n
\n
\n

Cancel the Team plan?

\n \n
\n
\n

Your projects move to Hobby on 1 April. Deployments in 16 regions will be stopped.

\n
\n
\n Keep the plan\n Cancel plan\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Changelog
    3. \n
  3. 2025
    4. \n
\n

Changelog

\n

What shipped, in the order it shipped. New entries most weeks.

\n
\n
\n Subscribe by e-mail\n
\n
\n
\n
\n\n
\n
\n
\n
\n
12 Mar 2025New
\n
\n

Instant rollbacks

\n

Production can now point at any earlier deployment without a rebuild.

\n

Every deployment is kept as built. A rollback only moves the production address, so it takes about one second in every region.

\n

What changed

\n
    \n
  • A rollback button on every deployment that was once in production
    • \n
  • Automatic rollback when the error rate passes a limit you set
    • \n
  • The audit log records who rolled back, and from where
    • \n
\n

From the command line

\n

Run chronoskin rollback to go back one step, or pass a deployment id to pick one.

\n
\n
\n
\n
27 Feb 2025Faster
\n
\n

Build cache is shared across branches

\n

A new branch starts from the cache of the branch it was cut from. Cold builds are 40% faster on average.

\n
\n
terminalbefore / after
\n
# feat/usage-export, first build\nbuild  1m 04s   cache miss\nbuild     38s   cache from main
\n
\n

Nothing to switch on. To opt a branch out, set cache: false.

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

Labels

\n
\n
\n Release\n New\n Docs\n Faster\n Deprecated\n Breaking\n
\n
\n
\n
\n \n

No breaking changes in 2025

\n

Nothing you deployed last year needs editing to run today.

\n See 2024\n
\n

\n RSS feed\n Roadmap\n Status page\n Release notes\n

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Start
    3. \n
\n

Create your workspace

\n

Two minutes from here to your first deployment. Free while you try it.

\n
\n
\n Compare plans\n
\n
\n
\n
\n\n
\n
\n
\n
\n

You were invited by Imre Solvang. Joining adds you to the Northwind workspace.

\n

That workspace address is taken. Choose another one below.

\n
\n
\n

Workspace

step 1 of 2
\n
\n
\n
\n \n \n
\n \n \n \n \n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n
\n

What happens next

\n
\n
    \n
  1. Connect a repositoryPick the branches that get previews.
    2. \n
  2. Push a commitThe first build takes about a minute.
    3. \n
  3. Open the previewShare its address with your team.
    4. \n
  4. Promote to productionOne command, or merge to main.
    5. \n
\n
\n
\n
\n
Prefer the terminal?zsh
\n
# install, sign in, deploy the folder you are in\n$ npm install --global chronoskin\n$ chronoskin login\n$ chronoskin deploy\nready  first-project.chronoskin.app
\n
\n
\n

On the free plan

All limits
\n
\n
    \n
  • Build minutes400 / month
    • \n
  • Regions3
    • \n
  • Previewsevery branch
    • \n
\n
\n
Do I need a card to start?

No. The free plan asks for a card only when you move to a paid one.

What happens at 400 build minutes?

Builds wait until the first of the month, or you move to Team and they continue at once.

Can I keep my own domain?

Yes, on every plan. Point the record at us and the certificate is issued in a minute.

\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.dev-dark.landing.s01.p02.t04.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"dev-dark\",\n \"years\": [\n 2019,\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-dd-1241\",\n \"short\": \"v1-dd-1241\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0b0e14;\n --color-canvas: #0b0e14;\n --color-surface: #11141b;\n --color-surface-alt: #171b24;\n --color-surface-strong: #282c33;\n --color-bar: #0b0e14;\n --color-bar-text: #dce0e5;\n --color-bar-alt: #11141b;\n --color-bar-alt-text: #a9afbc;\n --color-inverse: #dce0e5;\n --color-inverse-text: #0b0e14;\n --color-text: #b4bac6;\n --color-text-muted: #7d8696;\n --color-heading: #eef1f5;\n --color-heading-alt: #dce0e5;\n --color-link: #3ecf8e;\n --color-link-quiet: #a9afbc;\n --color-link-visited: #86c2a4;\n --color-link-hover: #74e8b4;\n --color-link-active: #2aa872;\n --color-border: #232831;\n --color-border-strong: #464b57;\n --color-border-muted: #1a1e26;\n --color-accent: #3ecf8e;\n --color-accent-text: #06130d;\n --color-accent-alt: #47b7f8;\n --color-fill-1: #3ecf8e;\n --color-fill-2: #47b7f8;\n --color-fill-3: #fbca00;\n --color-fill-4: #464b57;\n --color-button: #3ecf8e;\n --color-button-text: #06130d;\n --color-button-hover-text: #06130d;\n --color-button-secondary: #171b24;\n --color-button-secondary-text: #dce0e5;\n --color-input: #0b0e14;\n --color-input-text: #dce0e5;\n --color-input-border: #343a45;\n --color-disabled: #171b24;\n --color-disabled-text: #5c6370;\n --color-danger: #ff6465;\n --color-danger-surface: #1e1318;\n --color-success: #3ecf8e;\n --color-warning: #fbca00;\n --color-notice: #0e1d2c;\n --color-notice-text: #9cd4fb;\n --color-focus: #47b7f8;\n --color-shadow: rgb(0 0 0 / 0.4);\n --color-overlay: rgb(5 7 10 / 0.72);\n}\n\n/* @part type */\n:root {\n --font-body: \"Space Grotesk\", \"Familjen Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Space Grotesk\", \"Familjen Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: \"Space Grotesk\", \"Familjen Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Space Mono\", \"Fira Code\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 64px;\n --text-h1: 38px;\n --text-h2: 26px;\n --text-h3: 16px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.6px;\n --display-tracking: -2.4px;\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: 6px;\n --radius-panel: 8px;\n --radius-pill: 9999px;\n --radius-page: 12px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);\n --shadow-control: 0 1px 2px var(--color-shadow);\n --shadow-control-hover: 0 0 0 3px color-mix(in srgb, white 8%, transparent);\n --shadow-control-pressed: inset 0 1px 2px var(--color-shadow);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 5%, transparent), 0 2px 32px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 78%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\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) 55%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 12px;\n}\n" } }