{
  "id": "v1-dd-6554-dr",
  "long_id": "v1.dev-dark.shop.s06.p05.t05.u04.dr",
  "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
  },
  "density": "roomy",
  "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-6554-dr",
  "preview_url": "https://chrono.skin/s/v1-dd-6554-dr/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\nThe conventions for which text sits on which fill are those of the era's first layout and are kept here.\n\n- `--color-text`, `--color-heading` and `--color-text-muted` sit on the page, on `--fill-panel`, `--color-surface-alt` (a hovered row, the current sidebar row, the dialog) and `--color-surface-strong` (the current tab, key caps, quiet badges). `--color-bar-text` sits on `--fill-bar` (both rows of the bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (table heads, the sidebar title, code heads, the footer), with `--color-heading` for the brand there. `--color-input-text` sits on `--fill-input` (form controls and code). `--color-inverse-text` sits on `--fill-inverse`, used once per view, for `.ds-callout`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They colour the sparkline of a tile and the lines of the chart (78% or 82% of the fill mixed into `--color-heading`), rule the top of a region cell at full strength and tint it at 13%; `--color-fill-1` is the glow in the corner of the banner.\n- `--color-accent` marks the current section and fills the default badge through `--fill-accent`. `--color-accent-alt` is a line and text colour: the mono label of the banner, the rule of the page header, the line under the current tab, keywords in code.\n- `--color-success`, `--color-warning` and `--color-danger` carry the meaning of the page and are used at full strength only for things without text on them: the daily bars, dots, meters, the knob of a switch. With text they are a 12% tint with a 32% hairline and the colour as text. The destructive button is a tint too.\n- Borders: `--color-border` on boxes, bars and between cells, `--color-border-strong` on the banner, secondary buttons, grid lines of the chart and the dialog, `--color-border-muted` between rows inside a box. All `--border-width`; `--border-width-strong` is the line of the current section and tab, the top of a region cell and the rule of the page header.\n- Type. `--font-mono` for every figure, date, id and label; body, headings and controls use their own tokens. `--text-base` 14px at `--line-body` 1.7; `--text-ui` 13px for navigation, buttons, forms, tables, rows and rules; `--text-small` 12px for badges, mono labels, facts and legends; `--text-large` 15px for the banner's lead. `--text-display` 44px is the verdict only; `--text-h1` 26px page titles and tile figures; `--text-h2` 18px section heads and region figures; `--text-h3` 13px panel and cell titles. Headings take `--heading-transform` and `--heading-tracking`.\n- Uppercase comes from `--heading-transform` on headings and from mono labels (`.ds-stat__label`, table heads, sidebar titles, region codes), tracked by 6% of the font size. Links in running text and tables follow `--link-decoration`; quiet links are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` for buttons, inputs and the tabs, `--radius-panel` for panels, tiles, the list, notices and the callout, `--radius-page` for the banner, region cells and the dialog box, `--radius-pill` for badges, meters and switches. `--shadow-panel` is on panels, tiles, cells and the list, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the banner and the dialog.\n- One-off values written with `calc()` and `color-mix()`: the banner glow (20% of a fill), region tints (13%), line colours (78% and 82%), status tints (12%, 14%, 22%, 32%, 40%, 55%), the wash of the current section (9%), the notice border (22% and 40%), the corners of a daily bar (30% of `--radius-control`), the gap between bars (half of `--space-1`), mono label tracking. Navigation cells are at `opacity` 0.6 until current, daily bars at 0.86, callout text at 0.78. The empty state's outline is dashed.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\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 <= 110px`: sections are 88px apart at most, blocks inside them 24px.\n- `font-size >= 12px`: badges, mono labels and facts are the smallest text.\n- `font-size <= 44px`: the verdict of the banner is the largest text.\n- `font-weight <= 700`: headings are bold; nothing is heavier.\n- `font-families <= 1`: one monospace family for everything.\n- `line-height <= 1.7`: body text is set at 1.7.\n- `uppercase-text <= 15%`: headings and mono labels are uppercase, running text never.\n- `letter-spacing <= 1px`: labels are spaced by 6% of their size, headings by 0.4px.\n- `border-width <= 2px`: rules and outlines are 1px hairlines; 2px is the line under the current link.\n- `border-radius <= 18px`: 8px on controls, 12px on panels, 18px on the largest boxes.\n- `box-shadow-blur <= 70px`: only the release card and the dialog cast a wide shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block 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: 5px;\n  --space-2: 10px;\n  --space-3: 15px;\n  --space-4: 20px;\n  --space-5: 30px;\n  --space-6: 45px;\n  --space-7: 70px;\n  --space-8: 110px;\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.t05.u04.dr\",\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-6554-dr\",\n  \"short\": \"v1-dd-6554-dr\",\n  \"density\": \"roomy\"\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: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --font-heading: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --font-ui: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --font-mono: \"Commit Mono\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 14px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 15px;\n  --text-display: 44px;\n  --text-h1: 26px;\n  --text-h2: 18px;\n  --text-h3: 13px;\n  --line-body: 1.7;\n  --line-heading: 1.35;\n  --line-display: 1.2;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.4px;\n  --display-tracking: -0.8px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 8px;\n  --radius-panel: 12px;\n  --radius-pill: 4px;\n  --radius-page: 18px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 14px 36px -14px var(--color-shadow);\n  --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 14%, transparent), 0 4px 14px color-mix(in srgb, var(--color-button) 26%, transparent);\n  --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 24%, transparent), 0 6px 26px color-mix(in srgb, var(--color-button) 46%, transparent);\n  --shadow-control-pressed: inset 0 2px 6px var(--color-shadow);\n  --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 6%, transparent), 0 28px 70px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 80%, transparent), transparent 720px) no-repeat, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt) 88%, var(--color-fill-2)), var(--color-bar-alt));\n  --fill-inverse: linear-gradient(135deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 78%, var(--color-accent)));\n  --fill-accent: var(--color-accent);\n  --fill-panel: linear-gradient(160deg, color-mix(in srgb, var(--color-surface) 93%, white), var(--color-surface) 55%);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 78%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: color 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}