{
  "id": "v1-dd-6512",
  "long_id": "v1.dev-dark.shop.s06.p05.t01.u02",
  "name": "Dark developer tools pricing and sign-up",
  "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": "shop",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": false,
    "responsive": true
  },
  "summary": "This is the buying side of a developer service from 2019 to 2026: a pricing page that leads into a short sign-up, an order review and the team settings behind it. A rounded bar floats at the top, the plans are joined columns of one box, a calculator of static sliders stands beside its estimate, and each later step sits under a numbered row that shows how far the visitor has come. In this set the page is a dark green-grey, type is a soft humanist sans, corners are large and shadows gentle, and the one accent is an amber that also glows behind the claim.",
  "url": "https://chrono.skin/s/v1-dd-6512",
  "preview_url": "https://chrono.skin/s/v1-dd-6512/specimen.html",
  "files": {
    "STYLE.md": "# Dark developer tools pricing and sign-up\n\n## Summary\n\nThis is the buying side of a developer service from 2019 to 2026: a pricing page that leads into a short sign-up, an order review and the team settings behind it. A rounded bar floats at the top, the plans are joined columns of one box, a calculator of static sliders stands beside its estimate, and each later step sits under a numbered row that shows how far the visitor has come. In this set the page is a dark green-grey, type is a soft humanist sans, corners are large and shadows gentle, and the one accent is an amber that also glows behind the claim.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. Content sits in `.ds-wrap`, at most `--size-page` (1080px) wide with `--space-5` (24px) of side padding. Section heads are centred and kept to `--size-narrow` (620px).\n- Navigation is `.ds-nav`, which stays at the top of the window with `--space-3` of air above it; its `.ds-nav__inner` is a rounded bar (`--radius-page`, `--shadow-panel`) on `--fill-bar`, as wide as the content, `--size-top` (52px) tall: brand at the left, four links centred, whose current one has a hairline outline, a secondary and a primary small button at the right. There is no rail.\n- The home view stacks: `.ds-hero` (a badge, the title, a lead, two large buttons and a mono note, all centred over the glow); `.ds-tiers`, four plans as joined columns; a `.ds-colhead` and `.ds-cols`, the calculator panel beside the inverted `.ds-estimate` (`--size-side` 344px); a `.ds-colhead` and `.ds-grid`, four cells of two widths; `.ds-stat`, four figures in one rounded strip; a `.ds-colhead` and `.ds-list`, questions with their answers. Sections are `.ds-section`, `--space-8` (88px) apart; `--tight` is 36px.\n- Inner pages have no hero. Inside `.ds-wrap` they open with `.ds-page-header`, a rounded band holding the breadcrumb, a `--text-h1` title and one muted line at the left and at most two buttons at the right. A page of the sign-up follows it with `.ds-steps`; then `.ds-cols` puts the work at the left and a 344px column of summaries at the right. A settings page uses `.ds-cols--menu`, a `--size-menu` (220px) column with the `.ds-sidebar` at the left; tabs are a segmented control in a `.ds-toolbar` over the table, and the pagination is in the `.ds-table__foot`.\n- Views. The specimen sells a build service in four views. `pricing` is the home view described above. `signup` is the account step: two notices and the form at the left; the chosen plan with its total, a terminal block and the terms of the trial at the right. `review` is the order: the table of line items and the billing rules as prose at the left; the inverted amount due, the payment panel with its buttons and a row of document links at the right. `team` is the settings page behind it: the section menu and the seats in use at the left; tabs, the table of members with pagination, the open dialog that removes a member, the key of role and state labels and an empty state at the right.\n- Spacing scale: `--space-1` 4px (inside the segmented control, between navigation links), `--space-2` 8px (button vertical padding, between adjacent buttons and badges, menu rows), `--space-3` 12px (panel head and table cell vertical padding, air above the bar), `--space-4` 16px (panel padding, between grid cells, between form rows, slider rows), `--space-5` 24px (between stacked blocks, side padding, plan and cell padding), `--space-6` 36px (below a section head, above a page header), `--space-7` 56px (hero bottom, sections on a narrow window), `--space-8` 88px (between sections, above the footer).\n- Other sizes: `--size-thumb` 18px and `--size-track` 6px (a slider), `--size-art` 96px (the drawing of a cell), `--size-glow` 420px, `--size-mark` 26px, `--size-dot` 8px, `--size-dialog` 420px.\n- Below 960px plans stand two across, cells take the full row and every column pair stacks. Below 640px everything is one column, the links of the bar move to a second row that scrolls sideways, the steps stand two across without their rule, a question sits over its answer, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n- On a phone (640px and below) the floating bar wraps inside `--radius-panel`: the brand and `.ds-nav__actions` stay on the first row, `.ds-nav__links` take a second row, centred when they fit and scrolling sideways when they do not, and the secondary button of the actions is not shown. The `.ds-menu` stays and lists every view, the current one with the accent line.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era. Every layout and every token set of dev-dark keeps to them.\n\n- Which text sits on which fill. `--color-text`, `--color-heading` and `--color-text-muted` sit on `--color-page`, `--color-canvas`, `--fill-panel`, `--color-surface-alt` and `--color-surface-strong`. `--color-bar-text` sits on `--fill-bar` (the top bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (a side rail, the title strip of a code block, a table head, the footer); a heading on that fill may use `--color-heading`. `--color-inverse-text` sits on `--fill-inverse`, which is used for exactly one block per view. `--color-button-text` sits on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary`, `--color-accent-text` on `--fill-accent`, `--color-input-text` on `--fill-input` (form controls and code blocks), `--color-notice-text` on `--color-notice`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They are glows and tints: mixed with `transparent` at 12% to 34% behind text in the ordinary text colours, and at full strength or mixed 72% into `--color-heading` only for drawings, bars, cells and icons. `--color-fill-1` is the palette's glow colour: the hero, the page header, the featured plan. A palette may make any fill light or dark.\n- `--color-accent-alt` is a text and line colour, not a fill: mono labels, keywords in code, the marker of the current item, the \"new\" badge. It must read on the page and on a panel.\n- `--color-success`, `--color-warning` and `--color-danger` are used as a dot, as text, or as a 12% tint with a 32% hairline and the colour itself as text. Nothing is ever filled solid with them, so they need no text colour of their own. The destructive button is built the same way.\n- Borders: `--color-border` on every box and bar, `--color-border-strong` on secondary buttons, the dialog, the product window and the dashed empty state, `--color-border-muted` between rows inside a box and between bands. All `--border-width`; `--border-width-strong` is the focus offset and the ring around a status dot.\n- Type. One sans family for body, headings and controls, with `--font-mono` for data. `--text-base` 15px at `--line-body` 1.6; `--text-ui` 13px for navigation, buttons, forms, tables and card text; `--text-small` 12px for badges, mono labels, dates and table heads; `--text-large` 17px for the hero lead. `--text-display` 56px is the hero title only; `--text-h1` 36px page titles, section statements, figures and prices; `--text-h2` 24px column heads; `--text-h3` 15px panel and card titles in `--weight-bold`. Headings are `--weight-heading` 500 with slight negative tracking.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, table heads, sidebar and footer titles), tracked by 6% of the font size; `--ui-transform` applies to buttons, tabs and navigation.\n- Links are `--color-link` without underline and gain one on hover; quiet links in breadcrumbs, the sidebar and the footer are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 6px for buttons, inputs and the brand tile, `--radius-panel` 8px for panels, code blocks, notices and the empty state, `--radius-page` 12px for the product window, grid cards, plans, the dialog and the inverted block, `--radius-pill` for badges and the announcement pill. `--shadow-panel` is on panels and cards, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the dialog and the product window. `--shadow-text` reaches navigation links and buttons.\n- One-off values written with `calc()` and `color-mix()` because the vocabulary has no token: the glows (a fill at 18% to 34% over transparent), the drawing colour (72% of a fill in `--color-heading`), the wash behind the current navigation link (`--color-bar-text` at 9%), status tints (12% and 32%), the hovered destructive button (22%), the hovered inverse button (82% of `--color-inverse-text` in `--color-inverse`), the notice border (22% and 40%), key cap and inline code corners (half of `--radius-control`), the segmented control's corner (`--radius-control` plus `--space-1`), mono label tracking. Navigation links are at `opacity` 0.66 until current, customer names at 0.82, the text of the inverted block at 0.7. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the font, text colour and `--fill-page`. `.ds-nav`, the views and `.ds-footer` are its direct children.\n- `.ds-wrap`, `.ds-section`, `.ds-stack`, `.ds-cols`, `.ds-colhead`: the centred column, a section 88px below the last (`--tight`), a vertical stack 24px apart (`.ds-panel--grow` in it takes spare height), the column pairs (`--even`, `--menu`) and a centred section head (`.ds-eyebrow`, `.ds-colhead__title`, `.ds-colhead__text`).\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 26px 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 floating 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. A badge, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` and `.ds-hero__note`, centred. The glow is its `::before`.\n- `.ds-tiers`: the plans as one box of joined columns. Each `.ds-tier` (`--featured` for the recommended one) holds `.ds-tier__name`, `.ds-tier__price` with `.ds-tier__per`, `.ds-tier__text`, one button and `.ds-tier__items` of `.ds-tier__item`.\n- `.ds-range`: a static slider: `.ds-range__label`, `.ds-range__value`, `.ds-range__track` with `.ds-range__fill` (`--low`, `--high`; the thumb is its `::after`) and an optional `.ds-range__scale`. `.ds-calc__extras` rows the checkboxes under the sliders. A project that makes it live keeps the same parts.\n- `.ds-estimate`: the inverted block: `.ds-estimate__label`, `.ds-estimate__figure`, `.ds-estimate__lines` of `.ds-estimate__line`, one `.ds-button--inverse` and `.ds-estimate__note`.\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-steps`: the steps of the sign-up: `.ds-steps__item` with `is-done` (a tick) and `is-current` (a filled disc), joined by a rule.\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; `.ds-person` puts one before a name.\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`: 14px semibold text, 14px corners, a soft shadow. `--secondary` (dark fill, strong hairline), `--danger` (tint, hairline and text in the danger colour), `--inverse` (on the estimate 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. Wrap in `.ds-table__wrap`; `.ds-table__foot` closes the panel and holds the pagination.\n- `.ds-list`: questions between rules. `.ds-list__item` is the `.ds-list__title` with a mono `.ds-list__meta` under it at the left and the answer, `.ds-list__text`, at the right.\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, closed by `.ds-total` with `.ds-total__figure` when they add up.\n- `.ds-stat`: the row of figures, one rounded strip. Each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`, parted by vertical hairlines.\n- `.ds-grid`: what every plan includes. `.ds-grid__cell` (`--wide`; `--2`, `--3`, `--4` for the other fills) holds `.ds-grid__body` with a mono number, `.ds-grid__title` and `.ds-grid__text`, and `.ds-grid__art`, one inline SVG drawn in strokes.\n- `.ds-tabs`: a segmented control of `.ds-tabs__tab`; the current one (`is-current`) is dressed like the primary button. `.ds-toolbar` puts it in a row with a `.ds-toolbar__note`.\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`: the menu of a settings page, a box with a mono `.ds-sidebar__title` over `.ds-sidebar__list`; the current `.ds-sidebar__item` (`is-current`) is on `--color-surface-strong`.\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`: centred on `--fill-bar-alt`, rounded at the top: the brand, `.ds-footer__links` of `.ds-footer__link` and the mono `.ds-footer__line`.\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-tooltip`: a small question mark beside a title; `.ds-tooltip__tip` opens on hover or focus, never by default.\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-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\n## Never\n\n- `block-gap <= 88px`: sections 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 <= 56px`: the hero title is the largest text.\n- `font-weight <= 600`: headings are medium, labels semibold; nothing is bold or black.\n- `font-families <= 2`: one sans-serif family and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\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`: only the mono customer names are spaced out, by 2px.\n- `border-width <= 3px`: rules are 1px; 3px marks the current tab and rings a status dot.\n- `border-radius <= 4px`: 2px on controls and tags, 4px on boxes.\n- `box-shadow-blur <= 25px`: only the dialog casts a blurred shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 3%`: gradients are the hero glow and the tint at the top of a project card.\n- `animation = none`: nothing moves by itself.\n- `transition = none`: states change at once.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block is a `.ds-panel` with a 1px border in `--color-border`, or a `.ds-grid__cell` when it promotes something; a further plan is one more `.ds-tier` in the same box, a further setting of the calculator one more `.ds-range`, a further step of the flow a `.ds-steps__item` and a view that opens with `.ds-page-header`. Anything that adds up ends in a `.ds-total`. 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 and one inverted block per view. 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: 1080px;\n  --size-narrow: 620px;\n  --size-top: 52px;\n  --size-side: 344px;\n  --size-menu: 220px;\n  --size-mark: 26px;\n  --size-dot: 8px;\n  --size-dialog: 420px;\n  --size-thumb: 18px;\n  --size-track: 6px;\n  --size-art: 96px;\n  --size-glow: 420px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 36px;\n  --space-7: 56px;\n  --space-8: 88px;\n}\n\n/* shell: a floating bar, then one narrow centred column */\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-section {\n  padding-top: var(--space-8);\n}\n.ds-section--tight {\n  padding-top: var(--space-6);\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) var(--size-side);\n  gap: var(--space-5);\n  align-items: stretch;\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-cols--menu {\n  grid-template-columns: var(--size-menu) minmax(0, 1fr);\n  align-items: start;\n}\n.ds-colhead {\n  max-width: var(--size-narrow);\n  margin: 0 auto var(--space-6);\n  text-align: center;\n}\n.ds-colhead__title {\n  margin: var(--space-2) 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-colhead__text {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n}\n\n/* nav: a rounded bar that floats under the top of the window; links in its middle */\n.ds-nav {\n  position: sticky;\n  top: 0;\n  z-index: 5;\n  padding: var(--space-3) var(--space-4) 0;\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-4);\n  max-width: calc(var(--size-page) - var(--space-5) * 2);\n  min-height: var(--size-top);\n  margin: 0 auto;\n  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\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: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\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.64;\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  border-color: color-mix(in srgb, var(--color-bar-text) 36%, transparent);\n  opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#signup\"],\n.ds-page:has(#review:target) .ds-nav__link[href=\"#review\"],\n.ds-page:has(#team:target) .ds-nav__link[href=\"#team\"] {\n  border-color: color-mix(in srgb, var(--color-bar-text) 36%, 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: a centred claim over one glow; the plans follow directly */\n.ds-hero {\n  position: relative;\n  padding: var(--space-8) 0 var(--space-7);\n  text-align: center;\n}\n.ds-hero::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: calc(var(--space-8) * -1);\n  height: var(--size-glow);\n  background: radial-gradient(ellipse 42% 60% at 50% 60%, color-mix(in srgb, var(--color-fill-1) 20%, transparent), transparent 72%);\n  pointer-events: none;\n}\n.ds-hero > .ds-wrap {\n  position: relative;\n}\n.ds-hero__title {\n  max-width: 17ch;\n  margin: var(--space-4) 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: 50ch;\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__note {\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\n/* tiers: the plans as joined columns of one box; the recommended column is tinted and ruled above */\n.ds-tiers {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\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}\n.ds-tier {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n  padding: var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tier:first-child {\n  border-left: 0;\n}\n.ds-tier--featured {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-1) 17%, transparent), transparent 62%);\n  box-shadow: inset 0 var(--border-width-strong) 0 var(--color-accent);\n}\n.ds-tier__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-body);\n  text-transform: var(--heading-transform);\n}\n.ds-tier__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-tier__per {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-tier__text {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n.ds-tier__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-tier__item {\n  display: flex;\n  gap: var(--space-2);\n  padding: var(--space-1) 0;\n}\n.ds-tier__item::before {\n  content: \"+\";\n  color: var(--color-accent-alt);\n  font-family: var(--font-mono);\n}\n\n/* calculator: static sliders; a track, the filled part and a thumb dressed like the button */\n.ds-range {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: var(--space-1) var(--space-3);\n  align-items: baseline;\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-ui);\n}\n.ds-range:first-child {\n  padding-top: 0;\n}\n.ds-range__label {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n.ds-range__value {\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-range__track {\n  grid-column: 1 / -1;\n  display: block;\n  height: var(--size-track);\n  margin: var(--space-3) calc(var(--size-thumb) * 0.5) var(--space-2);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n}\n.ds-range__fill {\n  position: relative;\n  display: block;\n  width: 50%;\n  height: 100%;\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n}\n.ds-range__fill::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: calc(var(--size-thumb) * -0.5);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  margin-top: calc(var(--size-thumb) * -0.5);\n  background: var(--fill-button);\n  border: var(--border-width-strong) var(--border-style) var(--color-surface);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-range__fill--low {\n  width: 22%;\n}\n.ds-range__fill--high {\n  width: 72%;\n}\n.ds-range__scale {\n  grid-column: 1 / -1;\n  display: flex;\n  justify-content: space-between;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-calc__extras {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3) var(--space-5);\n  padding-top: var(--space-4);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n\n/* estimate: the one inverted block of a view; a figure, its parts, one action */\n.ds-estimate {\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-5);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-estimate__label {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: calc(var(--text-small) * 0.06);\n  text-transform: uppercase;\n  opacity: 0.7;\n}\n.ds-estimate__figure {\n  display: block;\n  margin: var(--space-2) 0 var(--space-1);\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}\n.ds-estimate__figure small {\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n  opacity: 0.7;\n}\n.ds-estimate__lines {\n  flex: 1 0 auto;\n  margin: var(--space-4) 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n}\n.ds-estimate__line {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n}\n.ds-estimate__line b {\n  font-family: var(--font-mono);\n  font-weight: var(--weight-body);\n}\n.ds-estimate__note {\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-small);\n  opacity: 0.7;\n}\n\n/* stats: figures in one rounded strip on the alternate surface, parted by hairlines */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  padding: var(--space-2) 0;\n  list-style: none;\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  text-align: center;\n}\n.ds-stat__item {\n  min-width: 0;\n  padding: var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\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-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n\n/* grid: what every plan includes; cells of two widths, each tinted from one corner with a drawing at the right */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  grid-column: span 2;\n  min-width: 0;\n  padding: var(--space-5);\n  background: radial-gradient(ellipse 80% 110% at 100% 100%, color-mix(in srgb, var(--color-fill-1) 20%, transparent), transparent 70%), 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 3;\n}\n.ds-grid__cell--2 {\n  background: radial-gradient(ellipse 80% 110% at 100% 100%, color-mix(in srgb, var(--color-fill-2) 20%, transparent), transparent 70%), var(--fill-panel);\n}\n.ds-grid__cell--3 {\n  background: radial-gradient(ellipse 80% 110% at 100% 100%, color-mix(in srgb, var(--color-fill-3) 20%, transparent), transparent 70%), var(--fill-panel);\n}\n.ds-grid__cell--4 {\n  background: radial-gradient(ellipse 80% 110% at 100% 100%, color-mix(in srgb, var(--color-fill-4) 20%, transparent), transparent 70%), var(--fill-panel);\n}\n.ds-grid__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-grid__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  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n.ds-grid__art {\n  flex: 0 0 auto;\n  width: var(--size-art);\n  height: var(--size-art);\n  color: color-mix(in srgb, var(--color-fill-1) 72%, var(--color-heading));\n}\n.ds-grid__cell--2 .ds-grid__art {\n  color: color-mix(in srgb, var(--color-fill-2) 72%, var(--color-heading));\n}\n.ds-grid__cell--3 .ds-grid__art {\n  color: color-mix(in srgb, var(--color-fill-3) 72%, var(--color-heading));\n}\n.ds-grid__cell--4 .ds-grid__art {\n  color: color-mix(in srgb, var(--color-fill-4) 72%, var(--color-heading));\n}\n\n/* list: questions; the question and its subject at the left, the answer at the right */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);\n  gap: var(--space-5);\n  padding: var(--space-5) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link);\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-list__text {\n  margin: 0;\n  color: var(--color-text);\n}\n\n/* page header: a rounded band that holds the breadcrumb, the title and one line; the action at its right */\n.ds-page-header {\n  padding: var(--space-6) 0 var(--space-5);\n}\n.ds-page-header__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-5);\n  background: radial-gradient(ellipse 50% 140% at 100% 0, color-mix(in srgb, var(--color-fill-1) 14%, transparent), transparent 70%), 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-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: var(--space-2) 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: 60ch;\n  margin: var(--space-1) 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/* steps: where the visitor is in the sign-up; numbered discs joined by a rule */\n.ds-steps {\n  display: flex;\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  list-style: none;\n  counter-reset: step;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-steps__item {\n  display: flex;\n  align-items: center;\n  flex: 1 1 0;\n  gap: var(--space-2);\n  min-width: 0;\n  color: var(--color-text-muted);\n  counter-increment: step;\n  white-space: nowrap;\n}\n.ds-steps__item::before {\n  content: counter(step);\n  display: block;\n  flex: 0 0 auto;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: 1;\n  align-content: center;\n  text-align: center;\n  text-box: trim-both cap alphabetic;\n}\n.ds-steps__item::after {\n  content: \"\";\n  flex: 1 1 auto;\n  height: var(--border-width);\n  margin: 0 var(--space-3) 0 var(--space-1);\n  background: var(--color-border-strong);\n}\n.ds-steps__item:last-child {\n  flex: 0 0 auto;\n}\n.ds-steps__item:last-child::after {\n  display: none;\n}\n.ds-steps__item.is-done {\n  color: var(--color-text);\n}\n.ds-steps__item.is-done::before {\n  content: \"\";\n  color: var(--color-success);\n  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);\n  background: linear-gradient(45deg, transparent calc(50% - var(--border-width-strong) / 2 - var(--border-width) / 2), currentColor calc(50% - var(--border-width-strong) / 2), currentColor calc(50% + var(--border-width-strong) / 2), transparent calc(50% + var(--border-width-strong) / 2 + var(--border-width) / 2)) 31% 59.5% / 16% 16% no-repeat, linear-gradient(135deg, transparent calc(50% - var(--border-width-strong) / 2 - var(--border-width) / 2), currentColor calc(50% - var(--border-width-strong) / 2), currentColor calc(50% + var(--border-width-strong) / 2), transparent calc(50% + var(--border-width-strong) / 2 + var(--border-width) / 2)) 61.8% 50% / 32% 32% no-repeat;\n}\n.ds-steps__item.is-current {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n.ds-steps__item.is-current::before {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: transparent;\n}\n\n/* tabs: a segmented control; the current segment is dressed like the primary button */\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-alt);\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: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-4);\n  color: var(--color-text-muted);\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(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-tabs__tab.is-current .ds-mono {\n  color: inherit;\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/* sidebar: the sections of the settings as a box of links; the current one is filled */\n.ds-sidebar {\n  padding: var(--space-3);\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  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n  margin: var(--space-1) var(--space-3) var(--space-2);\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}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-control);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n\n/* total: the last row of a summary, set larger */\n.ds-total {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: var(--space-3);\n  padding-top: var(--space-3);\n  color: var(--color-heading);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-total__figure {\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  line-height: var(--line-heading);\n}\n.ds-person {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  white-space: nowrap;\n}\n\n/* footer: centred on the secondary bar, rounded at the top */\n.ds-footer {\n  margin-top: var(--space-8);\n  padding: var(--space-6) var(--space-5) var(--space-5);\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  border-radius: var(--radius-page) var(--radius-page) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-align: center;\n}\n.ds-footer .ds-brand {\n  color: var(--color-heading);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-2) var(--space-5);\n  margin: var(--space-4) 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  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  margin: 0;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  opacity: 0.8;\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-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\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-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__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: plans stand two across, column pairs stack */\n@media (max-width: 960px) {\n  .ds-cols,\n  .ds-cols--even,\n  .ds-cols--menu {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-tiers {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-tier:nth-child(odd) {\n    border-left: 0;\n  }\n  .ds-tier:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-grid__cell,\n  .ds-grid__cell--wide {\n    grid-column: 1 / -1;\n  }\n}\n\n/* narrow windows: one column; the links of the bar take a second row that scrolls sideways */\n@media (max-width: 640px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-section {\n    padding-top: var(--space-7);\n  }\n  .ds-nav {\n    padding: var(--space-2) var(--space-2) 0;\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    gap: var(--space-1) var(--space-3);\n    padding: var(--space-2) var(--space-3);\n    border-radius: var(--radius-panel);\n  }\n  .ds-nav__actions {\n    margin-left: auto;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 0 0 100%;\n    justify-content: flex-start;\n    overflow-x: auto;\n  }\n  .ds-hero {\n    padding: var(--space-7) 0 var(--space-6);\n  }\n  .ds-hero__title,\n  .ds-estimate__figure {\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-colhead__title,\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-tiers {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-tier,\n  .ds-tier:nth-child(odd) {\n    padding: var(--space-4);\n    border-left: 0;\n  }\n  .ds-tier + .ds-tier {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item:nth-child(odd) {\n    border-left: 0;\n  }\n  .ds-stat__figure {\n    font-size: var(--text-h2);\n  }\n  .ds-grid__cell {\n    padding: var(--space-4);\n  }\n  .ds-grid__art {\n    width: calc(var(--size-art) * 0.6);\n    height: calc(var(--size-art) * 0.6);\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-2);\n    padding: var(--space-4) 0;\n  }\n  .ds-page-header {\n    padding: var(--space-5) 0 var(--space-4);\n  }\n  .ds-page-header__inner {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-4);\n    padding: var(--space-4);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-steps {\n    flex-wrap: wrap;\n    gap: var(--space-2) 0;\n  }\n  .ds-steps__item {\n    flex: 0 0 50%;\n  }\n  .ds-steps__item::after {\n    display: none;\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    padding: var(--space-5) var(--space-4);\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/* 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/* 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/* 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.ds-page:not(:has(.ds-view:target)) .ds-menu__item--view[href=\"#pricing\"],\n.ds-page:has(#pricing:target) .ds-menu__item--view[href=\"#pricing\"],\n.ds-page:has(#signup:target) .ds-menu__item--view[href=\"#signup\"],\n.ds-page:has(#review:target) .ds-menu__item--view[href=\"#review\"],\n.ds-page:has(#team:target) .ds-menu__item--view[href=\"#team\"] {\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 links sit centred in the bar, as on a desk */\n@media (max-width: 640px) {\n  .ds-nav__links {\n    justify-content: safe center;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: dark developer tools pricing and sign-up specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#pricing\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"20,3 8,3 3,12 8,21 20,21 20,16.5 10.6,16.5 8.1,12 10.6,7.5 20,7.5\"/><polygon points=\"16,9.6 18.4,12 16,14.4 13.6,12\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#pricing\">Pricing</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#signup\">Sign up</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#review\">Review</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#team\">Team</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <details class=\"ds-menu\"><summary class=\"ds-menu__button\">Docs</summary><ul class=\"ds-menu__list\"><li class=\"ds-menu__title\">Billing</li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#pricing\">Pricing</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#signup\">Sign up</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#review\">Review</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#team\">Team</a></li><li class=\"ds-menu__title ds-menu__title--rule\">Help</li><li><a class=\"ds-menu__item\" href=\"#review\">What counts as a minute</a></li><li><a class=\"ds-menu__item\" href=\"#team\">Who needs a seat</a></li><li><a class=\"ds-menu__item\" href=\"#team\">Log in</a></li></ul></details>\n      <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#team\">Log in</a>\n      <a class=\"ds-button ds-button--small\" href=\"#signup\">Start free</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"pricing\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-wrap\">\n      <span class=\"ds-badge ds-badge--new\">Usage pricing, no seat minimum</span>\n      <h1 class=\"ds-hero__title\">Pay for the builds you run</h1>\n      <p class=\"ds-hero__lead\">chronoskin runs your tests and builds on fast machines. Every plan has the same runners; you pay for minutes and for the people who use them.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--large\" href=\"#signup\">Start free</a>\n        <a class=\"ds-button ds-button--secondary ds-button--large is-hover\" href=\"#review\">Estimate your bill</a>\n      </div>\n      <span class=\"ds-hero__note\">2,000 minutes a month free. No card until you pass them.</span>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-tiers\">\n      <div class=\"ds-tier\">\n        <h2 class=\"ds-tier__name\">Free</h2>\n        <div><span class=\"ds-tier__price\">$0</span><span class=\"ds-tier__per\">for ever</span></div>\n        <p class=\"ds-tier__text\">For side projects.</p>\n        <a class=\"ds-button ds-button--secondary\" href=\"#signup\">Start free</a>\n        <ul class=\"ds-tier__items\">\n          <li class=\"ds-tier__item\">2,000 minutes a month</li>\n          <li class=\"ds-tier__item\">2 builds at once</li>\n          <li class=\"ds-tier__item\">Logs kept for 7 days</li>\n        </ul>\n      </div>\n      <div class=\"ds-tier ds-tier--featured\">\n        <h2 class=\"ds-tier__name\">Pro <span class=\"ds-badge\">Most teams</span></h2>\n        <div><span class=\"ds-tier__price\">$12</span><span class=\"ds-tier__per\">per seat, per month</span></div>\n        <p class=\"ds-tier__text\">For teams that merge daily.</p>\n        <a class=\"ds-button\" href=\"#signup\">Try for 14 days</a>\n        <ul class=\"ds-tier__items\">\n          <li class=\"ds-tier__item\">10,000 minutes included</li>\n          <li class=\"ds-tier__item\">20 builds at once</li>\n          <li class=\"ds-tier__item\">Shared cache, 50 GB</li>\n          <li class=\"ds-tier__item\">Logs kept for 90 days</li>\n        </ul>\n      </div>\n      <div class=\"ds-tier\">\n        <h2 class=\"ds-tier__name\">Team</h2>\n        <div><span class=\"ds-tier__price\">$29</span><span class=\"ds-tier__per\">per seat, per month</span></div>\n        <p class=\"ds-tier__text\">For several repositories.</p>\n        <a class=\"ds-button ds-button--secondary\" href=\"#signup\">Try for 14 days</a>\n        <ul class=\"ds-tier__items\">\n          <li class=\"ds-tier__item\">50,000 minutes included</li>\n          <li class=\"ds-tier__item\">100 builds at once</li>\n          <li class=\"ds-tier__item\">Single sign-on</li>\n          <li class=\"ds-tier__item\">Audit log, 1 year</li>\n        </ul>\n      </div>\n      <div class=\"ds-tier\">\n        <h2 class=\"ds-tier__name\">Scale</h2>\n        <div><span class=\"ds-tier__price\">Custom</span><span class=\"ds-tier__per\">from 100 seats</span></div>\n        <p class=\"ds-tier__text\">For your own cloud.</p>\n        <a class=\"ds-button ds-button--secondary\" href=\"#signup\">Talk to us</a>\n        <ul class=\"ds-tier__items\">\n          <li class=\"ds-tier__item\">Runners in your account</li>\n          <li class=\"ds-tier__item\">99.95% uptime agreement</li>\n          <li class=\"ds-tier__item\">A named engineer</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap ds-section\">\n    <div class=\"ds-colhead\">\n      <span class=\"ds-eyebrow ds-eyebrow--accent\">Calculator</span>\n      <h2 class=\"ds-colhead__title\">What would a month cost?</h2>\n      <p class=\"ds-colhead__text\">Set your seats and minutes. Extra minutes are $0.004 each on every paid plan.</p>\n    </div>\n    <div class=\"ds-cols\">\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <div class=\"ds-panel__head\"><h3 class=\"ds-panel__title\">Your usage <span class=\"ds-tooltip\" tabindex=\"0\">?<span class=\"ds-tooltip__tip\" role=\"tooltip\">The estimate uses list prices, in US dollars, before tax.</span></span></h3><span class=\"ds-mono\">Pro plan</span></div>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-range\">\n            <span class=\"ds-range__label\">Seats</span><span class=\"ds-range__value\">12</span>\n            <span class=\"ds-range__track\"><span class=\"ds-range__fill ds-range__fill--low\"></span></span>\n            <span class=\"ds-range__scale\"><span>1</span><span>25</span><span>50</span></span>\n          </div>\n          <div class=\"ds-range\">\n            <span class=\"ds-range__label\">Build minutes a month</span><span class=\"ds-range__value\">36,000</span>\n            <span class=\"ds-range__track\"><span class=\"ds-range__fill ds-range__fill--high\"></span></span>\n            <span class=\"ds-range__scale\"><span>0</span><span>25k</span><span>50k</span></span>\n          </div>\n          <div class=\"ds-range\">\n            <span class=\"ds-range__label\">Cache storage</span><span class=\"ds-range__value\">100 GB</span>\n            <span class=\"ds-range__track\"><span class=\"ds-range__fill\"></span></span>\n            <span class=\"ds-range__scale\"><span>50 GB</span><span>100 GB</span><span>150 GB</span></span>\n          </div>\n          <div class=\"ds-calc__extras\">\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Large runners, 8 cores</span></label>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>macOS runners</span></label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Bill yearly, two months free</span></label>\n          </div>\n        </div>\n      </section>\n      <div class=\"ds-estimate\">\n        <span class=\"ds-estimate__label\">Estimate</span>\n        <span class=\"ds-estimate__figure\">$263 <small>a month</small></span>\n        <ul class=\"ds-estimate__lines\">\n          <li class=\"ds-estimate__line\"><span>12 seats</span><b>$144.00</b></li>\n          <li class=\"ds-estimate__line\"><span>26,000 extra minutes</span><b>$104.00</b></li>\n          <li class=\"ds-estimate__line\"><span>50 GB extra cache</span><b>$15.00</b></li>\n        </ul>\n        <a class=\"ds-button ds-button--inverse ds-button--large\" href=\"#signup\">Start with this plan</a>\n        <p class=\"ds-estimate__note\">Billed yearly: $2,630. Taxes are added at checkout.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap ds-section\">\n    <div class=\"ds-colhead\">\n      <span class=\"ds-eyebrow\">On every plan</span>\n      <h2 class=\"ds-colhead__title\">The same runners, whatever you pay</h2>\n    </div>\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <div class=\"ds-grid__cell ds-grid__cell--wide\">\n        <div class=\"ds-grid__body\"><span class=\"ds-mono\">01</span><h3 class=\"ds-grid__title\">Machines that start in two seconds</h3><p class=\"ds-grid__text\">Warm runners wait for your push. You are billed from the first command, not from the queue.</p></div>\n        <svg class=\"ds-grid__art\" viewBox=\"0 0 96 96\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"48\" cy=\"52\" r=\"32\"/><path d=\"M48 52l16-20 M48 12v8 M40 8h16\"/><circle cx=\"48\" cy=\"52\" r=\"3\" fill=\"currentColor\"/></svg>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--2\">\n        <div class=\"ds-grid__body\"><span class=\"ds-mono\">02</span><h3 class=\"ds-grid__title\">A cache shared by branches</h3><p class=\"ds-grid__text\">A new branch starts from its parent's cache.</p></div>\n        <svg class=\"ds-grid__art\" viewBox=\"0 0 96 96\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><ellipse cx=\"48\" cy=\"24\" rx=\"30\" ry=\"10\"/><path d=\"M18 24v24c0 5.5 13.400 10 30 10s30-4.5 30-10V24 M18 48v24c0 5.5 13.400 10 30 10s30-4.5 30-10V48\"/></svg>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--3\">\n        <div class=\"ds-grid__body\"><span class=\"ds-mono\">03</span><h3 class=\"ds-grid__title\">Secrets stay in your vault</h3><p class=\"ds-grid__text\">Short-lived tokens, never stored on a runner.</p></div>\n        <svg class=\"ds-grid__art\" viewBox=\"0 0 96 96\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M22 44h52v38H22z\"/><path d=\"M32 44V30a16 16 0 0 1 32 0v14\"/><circle cx=\"48\" cy=\"60\" r=\"4\" fill=\"currentColor\"/><path d=\"M48 64v8\"/></svg>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--4\">\n        <div class=\"ds-grid__body\"><span class=\"ds-mono\">04</span><h3 class=\"ds-grid__title\">A bill you can read</h3><p class=\"ds-grid__text\">One line per repository and per runner size, exported as CSV. Set a monthly cap and builds queue instead of costing more.</p></div>\n        <svg class=\"ds-grid__art\" viewBox=\"0 0 96 96\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M20 10h56v76l-9-6-9 6-10-6-10 6-9-6-9 6z\"/><path d=\"M32 28h32 M32 42h32 M32 56h18\"/></svg>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap ds-section ds-section--tight\">\n    <ul class=\"ds-stat\" data-component=\"stats\">\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">2 s</span><span class=\"ds-stat__label\">median time to first command</span></li>\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">$0.004</span><span class=\"ds-stat__label\">per extra build minute</span></li>\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">2,000</span><span class=\"ds-stat__label\">free minutes every month</span></li>\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">14 days</span><span class=\"ds-stat__label\">trial of any paid plan</span></li>\n    </ul>\n  </div>\n\n  <div class=\"ds-wrap ds-section\">\n    <div class=\"ds-colhead\">\n      <span class=\"ds-eyebrow\">Questions</span>\n      <h2 class=\"ds-colhead__title\">Before you sign up</h2>\n    </div>\n    <ul class=\"ds-list\" data-component=\"list\">\n      <li class=\"ds-list__item\">\n        <div><a class=\"ds-list__title\" href=\"#review\">What counts as a build minute?</a><span class=\"ds-list__meta\">Billing, updated 4 Mar 2025</span></div>\n        <p class=\"ds-list__text\">Time a runner spends on your commands, rounded up to the second. Waiting in the queue and restoring the cache are free.</p>\n      </li>\n      <li class=\"ds-list__item\">\n        <div><a class=\"ds-list__title\" href=\"#team\">Who needs a seat?</a><span class=\"ds-list__meta\">Seats, updated 18 Feb 2025</span></div>\n        <p class=\"ds-list__text\">Anyone who starts builds or changes settings. People who only read logs through a shared link do not.</p>\n      </li>\n      <li class=\"ds-list__item\">\n        <div><a class=\"ds-list__title\" href=\"#review\">What happens when I pass my minutes?</a><span class=\"ds-list__meta\">Limits, updated 18 Feb 2025</span></div>\n        <p class=\"ds-list__text\">On Free, builds wait for the next month. On a paid plan they keep running at $0.004 a minute, up to the cap you set.</p>\n      </li>\n    </ul>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"signup\">\n  <div class=\"ds-wrap\">\n    <header class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__inner\">\n        <div class=\"ds-page-header__copy\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#pricing\">Pricing</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#pricing\">Pro</a></li>\n            <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Sign up</li>\n          </ol>\n          <h1 class=\"ds-page-header__title\">Create your account</h1>\n          <p class=\"ds-page-header__text\">Fourteen days of Pro, then the plan you pick. No card for the trial.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#pricing\">Compare plans</a>\n        </div>\n      </div>\n    </header>\n\n    <ol class=\"ds-steps\">\n      <li class=\"ds-steps__item is-done\">Plan</li>\n      <li class=\"ds-steps__item is-current\">Account</li>\n      <li class=\"ds-steps__item\">Review and pay</li>\n      <li class=\"ds-steps__item\">Invite your team</li>\n    </ol>\n\n    <div class=\"ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Your estimate came with you.</span> 12 seats and 36,000 minutes on Pro, billed yearly.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">That organisation address is taken.</span> Choose another one below.</p>\n        </div>\n        <section class=\"ds-panel ds-panel--grow\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Account</h2><span class=\"ds-mono\">step 2 of 4</span></div>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#review\">\n              <div class=\"ds-form__row\">\n                <label class=\"ds-form__field\"><span class=\"ds-form__label\">Your name</span><input class=\"ds-form__input\" type=\"text\" value=\"Ada Okonkwo\"></label>\n                <label class=\"ds-form__field\"><span class=\"ds-form__label\">Work e-mail</span><input class=\"ds-form__input is-focus\" type=\"email\" placeholder=\"you@company.dev\"></label>\n              </div>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Organisation address</span><input class=\"ds-form__input ds-form__input--mono is-error\" type=\"text\" value=\"chronoskin.dev/northwind\"><span class=\"ds-form__error\">This address already belongs to another organisation.</span></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Where is your code?</span>\n                <select class=\"ds-form__select\"><option>A Git host, connect after sign-up</option><option>Our own Git server</option><option>Nowhere yet</option></select>\n              </label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">What do you build?</span><textarea class=\"ds-form__textarea\" rows=\"3\" placeholder=\"A monorepo with a web app and two services. A sentence is enough.\"></textarea><span class=\"ds-form__hint\">Used to pick a runner size for your first build.</span></label>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Tell me when I reach 80% of my minutes</span></label>\n              <div class=\"ds-form__actions\">\n                <button class=\"ds-button\" type=\"submit\">Continue to review</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#pricing\">Back</a>\n              </div>\n            </form>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Your plan</h2><span class=\"ds-badge\">Pro</span></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__rows\">\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Seats</span><span class=\"ds-mono\">12</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Minutes included</span><span class=\"ds-mono\">10,000</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Extra minutes</span><span class=\"ds-mono\">26,000</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Cache</span><span class=\"ds-mono\">100 GB</span></li>\n            </ul>\n            <div class=\"ds-total\"><span>After the trial</span><span class=\"ds-total__figure\">$263 / mo</span></div>\n          </div>\n          <div class=\"ds-panel__body\"><div class=\"ds-progress\"><div class=\"ds-progress__head\"><span>Trial, day 3 of 14</span><span class=\"ds-progress__value\">11 days left</span></div><progress class=\"ds-progress__bar\" value=\"21\" max=\"100\">21%</progress></div></div>\n        </section>\n        <div class=\"ds-code\">\n          <div class=\"ds-code__head\"><span class=\"ds-code__name\">Then, in your repository</span><span class=\"ds-kbd\">zsh</span></div>\n<pre class=\"ds-code__body\"><span class=\"ds-code__k\">$</span> npx chronoskin init\n<span class=\"ds-code__c\">found 3 workflows</span>\n<span class=\"ds-code__s\">ok</span>  runners set to chronoskin</pre>\n        </div>\n        <section class=\"ds-panel ds-panel--grow\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">During the trial</h2></div>\n          <div class=\"ds-panel__body\">\n            <p>Every Pro feature and 10,000 minutes. If you do nothing, the organisation moves to Free on day 15.</p>\n            <p class=\"ds-linkrow\"><a class=\"ds-link ds-link--more\" href=\"#pricing\">What Free includes</a></p>\n          </div>\n        </section>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"review\">\n  <div class=\"ds-wrap\">\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__inner\">\n        <div class=\"ds-page-header__copy\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#pricing\">Pricing</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#signup\">Sign up</a></li>\n            <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Review</li>\n          </ol>\n          <h1 class=\"ds-page-header__title\">Review your order</h1>\n          <p class=\"ds-page-header__text\">Nothing is charged today. The first invoice is on 2 April, when the trial ends.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#signup\">Edit account</a>\n          <a class=\"ds-button\" href=\"#team\">Confirm</a>\n        </div>\n      </div>\n    </header>\n\n    <ol class=\"ds-steps\">\n      <li class=\"ds-steps__item is-done\">Plan</li>\n      <li class=\"ds-steps__item is-done\">Account</li>\n      <li class=\"ds-steps__item is-current\">Review and pay</li>\n      <li class=\"ds-steps__item\">Invite your team</li>\n    </ol>\n\n    <div class=\"ds-cols\">\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Pro, billed yearly</h2><span class=\"ds-mono\">US dollars</span></div>\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th scope=\"col\">Item</th><th scope=\"col\" class=\"ds-table__num\">Quantity</th><th scope=\"col\" class=\"ds-table__num\">Unit price</th><th scope=\"col\" class=\"ds-table__num\">Per month</th></tr>\n              </thead>\n              <tbody>\n                <tr><th scope=\"row\">Seats</th><td class=\"ds-table__num\">12</td><td class=\"ds-table__num\">12.00</td><td class=\"ds-table__num\">144.00</td></tr>\n                <tr><th scope=\"row\">Minutes included</th><td class=\"ds-table__num\">10,000</td><td class=\"ds-table__num\">0.00</td><td class=\"ds-table__num\">0.00</td></tr>\n                <tr class=\"is-hover\"><th scope=\"row\">Extra minutes, estimate</th><td class=\"ds-table__num\">26,000</td><td class=\"ds-table__num\">0.004</td><td class=\"ds-table__num\">104.00</td></tr>\n                <tr><th scope=\"row\">Extra cache, GB</th><td class=\"ds-table__num\">50</td><td class=\"ds-table__num\">0.30</td><td class=\"ds-table__num\">15.00</td></tr>\n                <tr><th scope=\"row\">Large runners</th><td class=\"ds-table__num\">1</td><td class=\"ds-table__num\">0.00</td><td class=\"ds-table__num\">0.00</td></tr>\n              </tbody>\n            </table>\n          </div>\n          <div class=\"ds-table__foot\"><span>Two months free on yearly billing are taken off the first invoice.</span><span class=\"ds-mono\">$263.00 a month</span></div>\n        </section>\n\n        <section class=\"ds-panel ds-panel--grow\">\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>How you are billed</h1>\n              <p class=\"ds-prose__lead\">Seats are charged ahead for the year. Minutes are charged behind, month by month.</p>\n              <p>The estimate above uses the numbers from the calculator. The real figure comes from <code>usage.minutes</code> at the end of each month and is <strong>never more than your cap</strong>.</p>\n              <h2>Changing seats</h2>\n              <ul>\n                <li>A seat added mid-year is charged for the months that remain</li>\n                <li>A seat removed becomes credit on the next invoice</li>\n                <li>Invited people cost nothing until they accept</li>\n              </ul>\n              <h3>Refunds</h3>\n              <p>Cancel within 30 days of the first invoice and the whole amount is returned.</p>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-estimate\">\n          <span class=\"ds-estimate__label\">Due on 2 April</span>\n          <span class=\"ds-estimate__figure\">$2,630 <small>a year</small></span>\n          <ul class=\"ds-estimate__lines\">\n            <li class=\"ds-estimate__line\"><span>Seats, 12 months</span><b>$1,728.00</b></li>\n            <li class=\"ds-estimate__line\"><span>Two months free</span><b>-$288.00</b></li>\n            <li class=\"ds-estimate__line\"><span>Usage, estimated</span><b>$1,190.00</b></li>\n          </ul>\n          <a class=\"ds-button ds-button--inverse ds-button--large\" href=\"#team\">Confirm and invite team</a>\n        </div>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Payment</h2><span class=\"ds-badge ds-badge--warning\">Not set</span></div>\n          <div class=\"ds-panel__body\">\n            <p>Add a card or ask for an invoice. You can do either after the trial starts.</p>\n            <div class=\"ds-buttonrow\" data-component=\"buttons\">\n              <a class=\"ds-button\" href=\"#review\">Add a card</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#review\">Pay by invoice</a>\n              <button class=\"ds-button\" type=\"button\" disabled>Apply credit</button>\n              <a class=\"ds-button ds-button--danger\" href=\"#pricing\">Cancel order</a>\n            </div>\n          </div>\n        </section>\n        <section class=\"ds-panel ds-panel--grow\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Documents</h2></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-linkrow\" data-component=\"links\">\n              <a class=\"ds-link\" href=\"#review\">Order form</a>\n              <a class=\"ds-link is-visited\" href=\"#review\">Terms of service</a>\n              <a class=\"ds-link is-hover\" href=\"#review\">Data processing</a>\n              <a class=\"ds-link is-active\" href=\"#review\">Tax details</a>\n            </p>\n          </div>\n        </section>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"team\">\n  <div class=\"ds-wrap\">\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__inner\">\n        <div class=\"ds-page-header__copy\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#pricing\">northwind</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#team\">Settings</a></li>\n            <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Team</li>\n          </ol>\n          <h1 class=\"ds-page-header__title\">Team</h1>\n          <p class=\"ds-page-header__text\">9 of 12 seats are in use. Invited people take a seat when they accept.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#review\">Add seats</a>\n          <a class=\"ds-button\" href=\"#team\">Invite people</a>\n        </div>\n      </div>\n    </header>\n\n    <div class=\"ds-cols ds-cols--menu\">\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Settings</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#team\">General</a></li>\n            <li class=\"ds-sidebar__item is-current\">Team <span class=\"ds-mono\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#review\">Billing</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#team\">Runners</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#team\">Secrets</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#team\">Audit log</a></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Seats</h2><span class=\"ds-mono\">9 / 12</span></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-range\">\n              <span class=\"ds-range__label\">In use</span><span class=\"ds-range__value\">75%</span>\n              <span class=\"ds-range__track\"><span class=\"ds-range__fill ds-range__fill--high\"></span></span>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#team\">Members <span class=\"ds-mono\">9</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#team\">Invited</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#team\">Roles</a></li>\n          </ul>\n          <span class=\"ds-toolbar__note\">Owners can change billing and remove people.</span>\n        </div>\n\n        <section class=\"ds-panel\">\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\">\n              <thead>\n                <tr><th scope=\"col\">Person</th><th scope=\"col\">Role</th><th scope=\"col\">State</th><th scope=\"col\" class=\"ds-table__num\">Minutes, March</th></tr>\n              </thead>\n              <tbody>\n                <tr><th scope=\"row\"><span class=\"ds-person\"><span class=\"ds-avatar\">AO</span> Ada Okonkwo</span></th><td>Owner</td><td><span class=\"ds-badge ds-badge--success\">Active</span></td><td class=\"ds-table__num\">6,204</td></tr>\n                <tr><th scope=\"row\"><span class=\"ds-person\"><span class=\"ds-avatar\">IS</span> Imre Solvang</span></th><td>Admin</td><td><span class=\"ds-badge ds-badge--success\">Active</span></td><td class=\"ds-table__num\">9,871</td></tr>\n                <tr class=\"is-hover\"><th scope=\"row\"><span class=\"ds-person\"><span class=\"ds-avatar\">MK</span> Mira Kessler</span></th><td>Member</td><td><span class=\"ds-badge ds-badge--success\">Active</span></td><td class=\"ds-table__num\">4,410</td></tr>\n                <tr><th scope=\"row\"><span class=\"ds-person\"><span class=\"ds-avatar\">TR</span> Tomas Ruiz</span></th><td>Member</td><td><span class=\"ds-badge ds-badge--warning\">Invited</span></td><td class=\"ds-table__num\">0</td></tr>\n                <tr><th scope=\"row\"><span class=\"ds-person\"><span class=\"ds-avatar\">LV</span> Lena Voss</span></th><td>Billing</td><td><span class=\"ds-badge ds-badge--danger\">Suspended</span></td><td class=\"ds-table__num\">112</td></tr>\n              </tbody>\n            </table>\n          </div>\n          <div class=\"ds-table__foot\">\n            <span>5 of 9 members</span>\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li><a class=\"ds-pagination__link is-disabled\" href=\"#team\">Previous</a></li>\n              <li><a class=\"ds-pagination__link is-current\" href=\"#team\">1</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#team\">2</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#team\">Next</a></li>\n            </ul>\n          </div>\n        </section>\n\n        <div class=\"ds-cols ds-cols--even\">\n          <div class=\"ds-stack\">\n            <div class=\"ds-dialog\" data-component=\"dialog\">\n              <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"dialog-title\">\n                <div class=\"ds-dialog__head\">\n                  <h2 class=\"ds-dialog__title\" id=\"dialog-title\">Remove Lena Voss?</h2>\n                  <a class=\"ds-dialog__close\" href=\"#team\" aria-label=\"Close\"></a>\n                </div>\n                <div class=\"ds-dialog__body\">\n                  <p>Her seat becomes free at once. The unused part is credited on the April invoice.</p>\n                </div>\n                <div class=\"ds-dialog__actions\">\n                  <a class=\"ds-button ds-button--secondary\" href=\"#team\">Keep</a>\n                  <a class=\"ds-button ds-button--danger\" href=\"#team\">Remove</a>\n                </div>\n              </div>\n            </div>\n            <section class=\"ds-panel ds-panel--grow\">\n              <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Roles</h2></div>\n              <div class=\"ds-panel__body\">\n                <div class=\"ds-badgerow\" data-component=\"badge\">\n                  <span class=\"ds-badge\">Owner</span>\n                  <span class=\"ds-badge ds-badge--quiet\">Member</span>\n                  <span class=\"ds-badge ds-badge--outline\">Billing</span>\n                  <span class=\"ds-badge ds-badge--success\">Active</span>\n                  <span class=\"ds-badge ds-badge--warning\">Invited</span>\n                  <span class=\"ds-badge ds-badge--danger\">Suspended</span>\n                </div>\n              </div>\n            </section>\n          </div>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <svg class=\"ds-empty__icon\" viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 8h24v16H4z\"/><path d=\"M4 9l12 9 12-9\"/></svg>\n            <h2 class=\"ds-empty__title\">No invitations are waiting</h2>\n            <p class=\"ds-empty__text\">Three seats are free. Invite by e-mail or share a link that expires in a week.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#team\">Copy an invite link</a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <a class=\"ds-brand\" href=\"#pricing\">\n    <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"20,3 8,3 3,12 8,21 20,21 20,16.5 10.6,16.5 8.1,12 10.6,7.5 20,7.5\"/><polygon points=\"16,9.6 18.4,12 16,14.4 13.6,12\"/></svg></span>\n    <span class=\"ds-brand__name\">chronoskin</span>\n  </a>\n  <ul class=\"ds-footer__links\">\n    <li><a class=\"ds-footer__link\" href=\"#pricing\">Pricing</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#signup\">Sign up</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#review\">Billing</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#team\">Team settings</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#pricing\">Terms</a></li>\n  </ul>\n  <p class=\"ds-footer__line\">&copy; 2025 chronoskin. Prices in US dollars, before tax.</p>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.dev-dark.shop.s06.p05.t01.u02\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"dev-dark\",\n    \"years\": [\n      2019,\n      2026\n    ]\n  },\n  \"archetype\": \"shop\",\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-6512\",\n  \"short\": \"v1-dd-6512\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #000000;\n  --color-canvas: #000000;\n  --color-surface: #0a0a0a;\n  --color-surface-alt: #111111;\n  --color-surface-strong: #1c1c1c;\n  --color-bar: #000000;\n  --color-bar-text: #ededed;\n  --color-bar-alt: #0a0a0a;\n  --color-bar-alt-text: #a1a1a1;\n  --color-inverse: #ffffff;\n  --color-inverse-text: #000000;\n  --color-text: #e1e1e1;\n  --color-text-muted: #8f8f8f;\n  --color-heading: #ffffff;\n  --color-heading-alt: #ededed;\n  --color-link: #ff4d9d;\n  --color-link-quiet: #a1a1a1;\n  --color-link-visited: #c97aa6;\n  --color-link-hover: #ff8fc2;\n  --color-link-active: #e0126f;\n  --color-border: #2e2e2e;\n  --color-border-strong: #616161;\n  --color-border-muted: #1c1c1c;\n  --color-accent: #ff2e88;\n  --color-accent-text: #000000;\n  --color-accent-alt: #ffd84d;\n  --color-fill-1: #ff2e88;\n  --color-fill-2: #ffd84d;\n  --color-fill-3: #6ee7ff;\n  --color-fill-4: #616161;\n  --color-button: #ff2e88;\n  --color-button-text: #000000;\n  --color-button-hover-text: #000000;\n  --color-button-secondary: #0a0a0a;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #000000;\n  --color-input-text: #ffffff;\n  --color-input-border: #616161;\n  --color-disabled: #111111;\n  --color-disabled-text: #5a5a5a;\n  --color-danger: #ff5247;\n  --color-danger-surface: #1f0b09;\n  --color-success: #3ddc84;\n  --color-warning: #ff9b3d;\n  --color-notice: #111111;\n  --color-notice-text: #ededed;\n  --color-focus: #ff8fc2;\n  --color-shadow: rgb(0 0 0 / 0.8);\n  --color-overlay: rgb(0 0 0 / 0.8);\n}\n\n/* @part type */\n:root {\n  --font-body: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n  --font-heading: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n  --font-ui: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n  --font-mono: \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 17px;\n  --text-display: 56px;\n  --text-h1: 36px;\n  --text-h2: 24px;\n  --text-h3: 15px;\n  --line-body: 1.6;\n  --line-heading: 1.25;\n  --line-display: 1.1;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 500;\n  --weight-display: 500;\n  --weight-ui: 500;\n  --heading-transform: none;\n  --heading-tracking: -0.3px;\n  --display-tracking: -1.6px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 2px;\n  --radius-panel: 4px;\n  --radius-pill: 2px;\n  --radius-page: 4px;\n  --shadow-panel: none;\n  --shadow-control: inset 0 -2px 0 color-mix(in srgb, black 22%, transparent);\n  --shadow-control-hover: inset 0 -2px 0 color-mix(in srgb, black 40%, transparent);\n  --shadow-control-pressed: inset 0 2px 0 color-mix(in srgb, black 30%, transparent);\n  --shadow-dialog: 0 20px 25px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(color-mix(in srgb, var(--color-border) 45%, transparent) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, color-mix(in srgb, var(--color-border) 45%, transparent) 1px, transparent 1px) 0 0 / 56px 56px, var(--color-page);\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: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 82%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}