{
  "id": "v1-dd-5153",
  "long_id": "v1.dev-dark.app.s05.p01.t05.u03",
  "name": "Dark developer tools status dashboard",
  "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": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": false,
    "responsive": true
  },
  "summary": "This is the status and observability page of a developer service from 2019 to 2026: a dark page of hairline boxes that answers one question first, whether everything is up, and then shows the evidence. A banner states the verdict, tiles carry a figure over a sparkline, each service has a bar for every one of the last 60 days, latency is three lines on a chart and incidents are dated rows with a state label. In this set the page is true black, every letter is monospace and headings are uppercase, corners are square, nothing has a soft shadow and the one accent is a hot pink.",
  "url": "https://chrono.skin/s/v1-dd-5153",
  "preview_url": "https://chrono.skin/s/v1-dd-5153/specimen.html",
  "files": {
    "STYLE.md": "# Dark developer tools status dashboard\n\n## Summary\n\nThis is the status and observability page of a developer service from 2019 to 2026: a dark page of hairline boxes that answers one question first, whether everything is up, and then shows the evidence. A banner states the verdict, tiles carry a figure over a sparkline, each service has a bar for every one of the last 60 days, latency is three lines on a chart and incidents are dated rows with a state label. In this set the page is true black, every letter is monospace and headings are uppercase, corners are square, nothing has a soft shadow and the one accent is a hot pink.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. `.ds-main` is the only column: at most `--size-page` (1280px) wide, padded by `--space-6` above and `--space-5` at the sides, stacking its children `--space-5` (20px) apart.\n- Navigation is `.ds-nav`, a bar of two rows on `--fill-bar` that scrolls with the page. The first row, `.ds-nav__inner` (`--size-top` 52px), holds the brand, the mono `.ds-nav__scope` (organisation and environment after slashes) and at the right a state badge and two small buttons. The second row, `.ds-nav__links`, is the sections as joined cells with hairlines between them; the current cell has a 9% wash of the bar's text colour and a `--border-width-strong` line in `--color-accent` along its top. There is no rail and no sidebar on the home view.\n- The home view stacks: `.ds-hero`, a banner with a ringed dot, the verdict, two buttons and `.ds-hero__facts` at the right; `.ds-stat`, four tiles; `.ds-cols` with the services panel (`.ds-uptime`) beside a `--size-side` (380px) column holding the latency chart and the inverted `.ds-callout`; a `.ds-colhead` and `.ds-grid`, six region cells in one row; a `.ds-colhead` and `.ds-list`, the recent incidents.\n- Inner pages have no hero. `.ds-main` opens with `.ds-page-header`: breadcrumb, a `--text-h1` title (a state badge may follow it on the same line) and one muted line at the left of a `--border-width-strong` rule in `--color-accent-alt`, at most two buttons at the right. Tabs are joined cells in a `.ds-toolbar` directly over the panel that holds the table; the pagination is in the `.ds-table__foot`. `.ds-cols` puts a 380px column at the right, `.ds-cols--even` halves.\n- Views. The specimen is the status page of a hosted query service in four views. `overview` is the home view described above. `incidents` has the tabs, the table of incidents with pagination, then an empty state beside the key of state labels with a row of links. `incident` is one incident: its updates as `.ds-timeline` and the postmortem as prose in the main column; affected components, facts, the action buttons and the open dialog that resolves it at the right. `alerts` has two notices, the form for a new rule and, beside it, the existing rules with their switches and the payload a webhook receives.\n- Spacing scale: `--space-1` 4px (meter height, inside key caps), `--space-2` 8px (button and tab vertical padding, between adjacent buttons and badges, sidebar rows), `--space-3` 12px (panel head, table cell and uptime row vertical padding), `--space-4` 16px (panel, tile and cell padding, between region cells), `--space-5` 20px (between blocks, side padding, between tiles), `--space-6` 28px (banner padding, top of the column), `--space-7` 40px (sparkline height), `--space-8` 64px (above the footer).\n- Other sizes: `--size-label` 208px (the name column of a service and the date column of an incident), `--size-bar` 28px (height of the daily bars), `--size-pulse` 44px (the ringed dot), `--size-mark` 22px, `--size-dot` 8px, `--size-dialog` 460px.\n- Below 1080px the side column goes under, the facts move under the verdict, tiles stand two across and regions three. Below 640px everything is one column, the section cells scroll sideways, a service's bars go under its name, an incident's date goes over it, and a wide table scrolls inside `.ds-table__wrap`; the page itself never scrolls sideways.\n- On a phone (640px and below) `.ds-nav__inner` wraps and the second line of `.ds-nav__scope` (the environment) is not shown; `.ds-nav__links` is a second row of cells that scrolls sideways with tighter padding. The `.ds-menu` keeps only its avatar (`.ds-menu__label` is not shown) and still 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\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-main`, `.ds-stack`, `.ds-cols`, `.ds-colhead`: the column of a view, a vertical stack 20px apart (`.ds-panel--grow` in it takes spare height), the column pairs (`--even`) and a section title with a note at its right (`.ds-colhead__title`).\n- `.ds-brand`: the site's mark and name. `.ds-brand__mark` is a 22px 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 bar. `.ds-nav__inner` holds the brand, `.ds-nav__scope` and `.ds-nav__actions`; `.ds-nav__links` is the second row of `.ds-nav__link` cells (current: `is-current`). 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, the state banner: `.ds-hero__pulse`, then `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions`, then `.ds-hero__facts` of `.ds-hero__fact` rows. For a degraded or failing state change the wording; the dot keeps `--color-success` only when all is well.\n- `.ds-stat`: the row of four tiles. Each `.ds-stat__item` (`--2`, `--3`, `--4` for the other fills) is a mono `.ds-stat__label`, a `.ds-stat__row` with `.ds-stat__figure` and `.ds-stat__delta` (`--down`), and `.ds-stat__spark`, an inline SVG line along the foot.\n- `.ds-uptime`: one `.ds-uptime__row` per service: `.ds-uptime__name` with a dot, `.ds-uptime__days` of 60 `.ds-uptime__day` bars (`--warn`, `--down`, `--none`) and `.ds-uptime__pct`. `.ds-uptime__axis` closes the panel with the ends of the range and `.ds-uptime__key` entries.\n- `.ds-chart`: `.ds-chart__plot` is an inline SVG whose groups take their colour from `.ds-chart__grid`, `.ds-chart__p50`, `.ds-chart__p95` and `.ds-chart__p99`; `.ds-chart__legend` of `.ds-chart__key` names the lines.\n- `.ds-grid`: region cells. `.ds-grid__cell` (`--2`, `--3`, `--4`) holds `.ds-grid__code` with a dot, `.ds-grid__title`, `.ds-grid__figure` and a `.ds-meter` whose `.ds-meter__fill` (`--mid`, `--high`) shows the load.\n- `.ds-list`: incidents as rows of one box. `.ds-list__item` is `.ds-list__meta` (mono date and duration), then `.ds-list__title` with `.ds-list__text`, then a state badge.\n- `.ds-callout`: the inverted block: `.ds-callout__title`, `.ds-callout__text` and one `.ds-button--inverse`.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__text`) and `.ds-page-header__actions`.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`; `.ds-prose__lead` for the first paragraph.\n- `.ds-code`: a code block on `--fill-input`: optional `.ds-code__head` with `.ds-code__name`, then `.ds-code__body` (a `pre`). Spans `.ds-code__k`, `__s`, `__c`, `__n` colour keywords, strings, comments and names.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot`, `.ds-avatar`: the mono label (`--accent`), mono data text, a key cap, a status dot (`--success`, `--warning`, `--danger`, `--accent`, `--ring`) and an initials disc.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more` (appends an arrow). `.ds-linkrow` lays links in a row.\n- `.ds-button`: 13px medium text. `--secondary` (dark fill, strong hairline), `--danger` (tint, hairline and text in the danger colour), `--inverse` (on the callout 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-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. Uptime rows, the chart, a timeline and rules sit in it edge to edge.\n- `.ds-tabs`: joined cells of `.ds-tabs__tab`; the current one (`is-current`) is on `--color-surface-strong` over a line in `--color-accent-alt`. `.ds-toolbar` puts it in a row with a `.ds-toolbar__note`.\n- `.ds-badge`: small label on `--fill-accent`. `--quiet`, `--outline`, `--new` (accent-alt tint), `--mono`. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a box with a mono `.ds-sidebar__title` strip on `--fill-bar-alt` over `.ds-sidebar__list`; each `.ds-sidebar__item` is a dot, a link and a mono word at the right, the current one (`is-current`) on `--color-surface-alt`.\n- `.ds-timeline`: the updates of an incident: `.ds-timeline__item` is a mono time, a state badge and `.ds-timeline__text`.\n- `.ds-rules`: alert rules: `.ds-rules__item` is `.ds-rules__name` (with its condition as `.ds-mono`), a channel badge and `.ds-switch` (`is-on`), a static drawing of a toggle.\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`: one line on `--fill-bar-alt`: `.ds-footer__inner` with the brand, a mono `.ds-footer__note` and `.ds-footer__links` of `.ds-footer__link` at the right.\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-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 <= 64px`: blocks are 20px apart, the footer 64px below the last.\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 are 1px; 2px marks the current section and the stat rules.\n- `border-radius <= 20px`: 10px on controls, 14px on panels, 20px on cards and the dialog; pills are shapes.\n- `box-shadow-blur <= 50px`: the dialog and the hero code block cast the widest shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 8%`: gradients are the glow, the faint light on panels and the primary button; no box is filled with a strong gradient.\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`, a direct child of `.ds-main` or of a `.ds-cols` column; a new measurement is a `.ds-stat__item` with a sparkline, a new service is a `.ds-uptime__row`, a new place or shard is a `.ds-grid__cell`. Draw charts as inline SVG painted with `currentColor` and give each line its colour through a class that mixes a `--color-fill-*` into `--color-heading`. Keep to the conventions above for which text sits on which fill: status colours are solid only where no text sits on them, tinted otherwise. Use 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: 1280px;\n  --size-top: 52px;\n  --size-side: 380px;\n  --size-label: 208px;\n  --size-mark: 22px;\n  --size-dot: 8px;\n  --size-dialog: 460px;\n  --size-bar: 28px;\n  --size-pulse: 44px;\n  --size-glow: 360px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 20px;\n  --space-6: 28px;\n  --space-7: 40px;\n  --space-8: 64px;\n}\n\n/* shell: a bar of two rows, then one wide column of boxes */\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-main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-5) 0;\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-stack > .ds-panel--grow {\n  flex: 1 0 auto;\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 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-colhead {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: var(--space-4) 0 calc(var(--space-2) * -1);\n}\n.ds-colhead__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* nav: the brand, the project and the account in the first row; the sections as joined cells in the second */\n.ds-nav {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  max-width: var(--size-page);\n  min-height: var(--size-top);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n.ds-nav__scope {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  font-family: var(--font-mono);\n  white-space: nowrap;\n}\n.ds-nav__scope > span::before {\n  content: \"/\";\n  margin-right: var(--space-3);\n  opacity: 0.4;\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n.ds-nav__links {\n  display: flex;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n  list-style: none;\n}\n.ds-nav__links > li {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__links > li:first-child {\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-5);\n  color: var(--color-bar-text);\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.6;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link.is-current {\n  background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n  box-shadow: inset 0 var(--border-width-strong) 0 var(--color-accent);\n  opacity: 1;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#incidents:target) .ds-nav__link[href=\"#incidents\"],\n.ds-page:has(#incident:target) .ds-nav__link[href=\"#incident\"],\n.ds-page:has(#alerts:target) .ds-nav__link[href=\"#alerts\"] {\n  background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n  box-shadow: inset 0 var(--border-width-strong) 0 var(--color-accent);\n  opacity: 1;\n}\n\n/* hero: the state of the system as a banner; a ringed dot, the verdict, and the facts of the last 90 days */\n.ds-hero {\n  position: relative;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--size-side);\n  gap: var(--space-6);\n  align-items: center;\n  padding: var(--space-6);\n  background: radial-gradient(ellipse 46% 130% at 0 0, 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-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-hero__pulse {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: start;\n  width: var(--size-pulse);\n  height: var(--size-pulse);\n  margin-top: var(--space-2);\n  background: color-mix(in srgb, var(--color-success) 14%, transparent);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-success) 40%, transparent);\n  border-radius: 50%;\n}\n.ds-hero__pulse::before {\n  content: \"\";\n  width: 32%;\n  height: 32%;\n  background: var(--color-success);\n  border-radius: 50%;\n}\n.ds-hero__title {\n  margin: var(--space-1) 0 var(--space-2);\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: 58ch;\n  margin: 0 0 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  gap: var(--space-2);\n}\n.ds-hero__facts {\n  margin: 0;\n  padding: 0 0 0 var(--space-6);\n  list-style: none;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-hero__fact {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  color: var(--color-text-muted);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-hero__fact:last-child {\n  border-bottom: 0;\n}\n.ds-hero__fact b {\n  color: var(--color-heading);\n  font-weight: var(--weight-body);\n}\n\n/* stats: four tiles; a label, the figure, its change, and a sparkline along the foot */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__item {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-4) var(--space-4) 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  overflow: hidden;\n}\n.ds-stat__label {\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  letter-spacing: calc(var(--text-small) * 0.06);\n  text-transform: uppercase;\n}\n.ds-stat__row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n.ds-stat__figure {\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__delta {\n  color: var(--color-success);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  white-space: nowrap;\n}\n.ds-stat__delta--down {\n  color: var(--color-danger);\n}\n.ds-stat__spark {\n  display: block;\n  width: calc(100% + var(--space-4) * 2);\n  height: var(--space-7);\n  margin: var(--space-2) calc(var(--space-4) * -1) 0;\n  color: color-mix(in srgb, var(--color-fill-1) 78%, var(--color-heading));\n}\n.ds-stat__item--2 .ds-stat__spark {\n  color: color-mix(in srgb, var(--color-fill-2) 78%, var(--color-heading));\n}\n.ds-stat__item--3 .ds-stat__spark {\n  color: color-mix(in srgb, var(--color-fill-3) 78%, var(--color-heading));\n}\n.ds-stat__item--4 .ds-stat__spark {\n  color: color-mix(in srgb, var(--color-fill-4) 78%, var(--color-heading));\n}\n\n/* uptime: one row per service; a bar for each of the last 60 days */\n.ds-uptime {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-uptime__row {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr) 7ch;\n  gap: var(--space-4);\n  align-items: center;\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-uptime__name {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n  color: var(--color-heading);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n}\n.ds-uptime__days {\n  display: flex;\n  gap: calc(var(--space-1) * 0.5);\n  height: var(--size-bar);\n}\n.ds-uptime__day {\n  flex: 1 1 0;\n  background: var(--color-success);\n  border-radius: calc(var(--radius-control) * 0.3);\n  opacity: 0.86;\n}\n.ds-uptime__day--warn {\n  background: var(--color-warning);\n  opacity: 1;\n}\n.ds-uptime__day--down {\n  background: var(--color-danger);\n  opacity: 1;\n}\n.ds-uptime__day--none {\n  background: var(--color-surface-strong);\n  opacity: 1;\n}\n.ds-uptime__pct {\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n.ds-uptime__axis {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-uptime__key {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin-left: var(--space-3);\n}\n\n/* chart: lines drawn in SVG, each in its own fill colour, over a grid of hairlines */\n.ds-chart {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4);\n}\n.ds-chart__plot {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n.ds-chart__grid {\n  color: var(--color-border-strong);\n}\n.ds-chart__p50 {\n  color: color-mix(in srgb, var(--color-fill-1) 82%, var(--color-heading));\n}\n.ds-chart__p95 {\n  color: color-mix(in srgb, var(--color-fill-2) 82%, var(--color-heading));\n}\n.ds-chart__p99 {\n  color: color-mix(in srgb, var(--color-fill-3) 82%, var(--color-heading));\n}\n.ds-chart__legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-chart__key {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-chart__key::before {\n  content: \"\";\n  width: var(--space-4);\n  height: var(--border-width-strong);\n  background: currentColor;\n}\n.ds-chart__key b {\n  color: var(--color-heading);\n  font-weight: var(--weight-body);\n}\n\n/* grid: one cell per region; a tint and a rule in the colour of its continent, the latency as a figure and a meter */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  min-width: 0;\n  padding: var(--space-4);\n  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-1) 13%, transparent), transparent 70%), var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-2) 13%, transparent), transparent 70%), var(--fill-panel);\n  border-top-color: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-3) 13%, transparent), transparent 70%), var(--fill-panel);\n  border-top-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-4) 13%, transparent), transparent 70%), var(--fill-panel);\n  border-top-color: var(--color-fill-4);\n}\n.ds-grid__code {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  text-transform: uppercase;\n}\n.ds-grid__title {\n  margin: var(--space-2) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__figure {\n  display: block;\n  margin-top: var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-h2);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-grid__figure small {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-meter {\n  display: block;\n  height: var(--space-1);\n  margin-top: var(--space-2);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n  overflow: hidden;\n}\n.ds-meter__fill {\n  display: block;\n  width: 30%;\n  height: 100%;\n  background: var(--color-success);\n}\n.ds-meter__fill--mid {\n  width: 55%;\n}\n.ds-meter__fill--high {\n  width: 82%;\n  background: var(--color-warning);\n}\n\n/* list: the incidents; the date, what happened, and its state at the right, as rows of one box */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr) auto;\n  gap: var(--space-4);\n  align-items: start;\n  padding: var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n  border-top: 0;\n}\n.ds-list__meta {\n  display: flex;\n  flex-direction: column;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-list__title {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link);\n}\n.ds-list__text {\n  max-width: 78ch;\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* callout: the one inverted block of a view */\n.ds-callout {\n  padding: var(--space-4);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n}\n.ds-callout__title {\n  margin: 0;\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-callout__text {\n  margin: var(--space-2) 0 var(--space-3);\n  font-size: var(--text-ui);\n  opacity: 0.78;\n}\n\n/* page header: breadcrumb, then the title with one line of text beside a rule in the second accent; actions at the right */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-5);\n  padding: var(--space-2) 0 var(--space-2) var(--space-4);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\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: 72ch;\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/* tabs: joined cells; the current one is filled and ruled below */\n.ds-tabs {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  overflow: hidden;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs > li + li {\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-text-muted);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent-alt);\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: a box with a title strip on the secondary bar; each row a dot, a link and a word */\n.ds-sidebar {\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n  font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n  margin: 0;\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  font-weight: var(--weight-body);\n  line-height: var(--line-body);\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  gap: var(--space-2);\n  padding: var(--space-2) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item:last-child {\n  border-bottom: 0;\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n}\n.ds-sidebar__item > .ds-mono {\n  margin-left: auto;\n}\n\n/* timeline: the updates of an incident, newest first; time, state, text */\n.ds-timeline {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n}\n.ds-timeline__item {\n  display: grid;\n  grid-template-columns: 10ch 15ch minmax(0, 1fr);\n  gap: var(--space-4);\n  align-items: start;\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-timeline__item:last-child {\n  border-bottom: 0;\n}\n.ds-timeline__text {\n  margin: 0;\n}\n\n/* rules: the alert rules; a name, its condition, where it goes and a switch */\n.ds-rules {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n}\n.ds-rules__item {\n  display: flex;\n  align-items: center;\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-muted);\n}\n.ds-rules__item:last-child {\n  border-bottom: 0;\n}\n.ds-rules__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n.ds-rules__name .ds-mono {\n  display: block;\n  font-weight: var(--weight-body);\n  white-space: normal;\n}\n.ds-switch {\n  position: relative;\n  flex: 0 0 auto;\n  width: calc(var(--space-4) * 2);\n  height: calc(var(--space-4) + var(--border-width-strong));\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}\n.ds-switch::after {\n  content: \"\";\n  position: absolute;\n  top: var(--border-width);\n  bottom: var(--border-width);\n  left: var(--border-width);\n  width: 42%;\n  background: var(--color-text-muted);\n  border-radius: var(--radius-pill);\n}\n.ds-switch.is-on {\n  background: color-mix(in srgb, var(--color-success) 22%, transparent);\n  border-color: color-mix(in srgb, var(--color-success) 55%, transparent);\n}\n.ds-switch.is-on::after {\n  left: auto;\n  right: var(--border-width);\n  background: var(--color-success);\n}\n\n/* footer: one line on the secondary bar */\n.ds-footer {\n  margin-top: var(--space-8);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-5);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-4) var(--space-5);\n}\n.ds-footer__inner > .ds-brand {\n  color: var(--color-heading);\n}\n.ds-footer__note {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0 0 0 auto;\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\n/* brand: the mark on a tile dressed like the primary button, the name beside it */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n  gap: var(--space-2);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* small parts used everywhere: the mono label, the key cap, the status dot, the avatar */\n.ds-eyebrow {\n  display: block;\n  margin: 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.06);\n  text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n  color: var(--color-accent-alt);\n}\n.ds-kbd {\n  display: inline-block;\n  padding: 0 var(--space-1);\n  background: var(--color-surface-strong);\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: calc(var(--radius-control) * 0.5);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n}\n.ds-dot {\n  display: inline-block;\n  flex: 0 0 auto;\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-text-muted);\n  border-radius: 50%;\n}\n.ds-dot--success {\n  background: var(--color-success);\n  box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-success) 22%, transparent);\n}\n.ds-dot--warning {\n  background: var(--color-warning);\n  box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-warning) 22%, transparent);\n}\n.ds-dot--danger {\n  background: var(--color-danger);\n  box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-danger) 22%, transparent);\n}\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 50%;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n}\n.ds-mono {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n/* typography */\n.ds-prose {\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n}\n.ds-prose > :first-child {\n  margin-top: 0;\n}\n.ds-prose p {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-text-muted);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: calc(var(--radius-control) * 0.5);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose > :last-child {\n  margin-bottom: 0;\n}\n.ds-prose__lead {\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n}\n\n/* code block: a title strip on the secondary bar, lines in the mono font on the input fill */\n.ds-code {\n  min-width: 0;\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-code__head {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-code__name {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.ds-code__body {\n  display: block;\n  margin: 0;\n  padding: var(--space-4);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n  white-space: pre;\n}\n.ds-code__k {\n  color: var(--color-accent-alt);\n}\n.ds-code__s {\n  color: var(--color-success);\n}\n.ds-code__n {\n  color: var(--color-link);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n  content: \" \\2192\";\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  font-size: var(--text-ui);\n}\n\n/* buttons */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-text-muted);\n}\n.ds-button--danger {\n  background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n  color: var(--color-danger);\n  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: color-mix(in srgb, var(--color-danger) 22%, transparent);\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-button--inverse {\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: color-mix(in srgb, var(--color-inverse-text) 82%, var(--color-inverse));\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--small {\n  padding: var(--space-1) var(--space-3);\n}\n.ds-button: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: the side column goes under, tiles and regions stand fewer across */\n@media (max-width: 1080px) {\n  .ds-cols,\n  .ds-cols--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero {\n    grid-template-columns: auto minmax(0, 1fr);\n  }\n  .ds-hero__facts {\n    grid-column: 1 / -1;\n    padding: var(--space-4) 0 0;\n    border-left: 0;\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-grid {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n/* narrow windows: one column; the section cells scroll sideways, a service's bars go under its name */\n@media (max-width: 640px) {\n  .ds-main {\n    gap: var(--space-4);\n    padding: var(--space-5) var(--space-4) 0;\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    gap: var(--space-2) var(--space-3);\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-nav__scope > span:last-child {\n    display: none;\n  }\n  .ds-nav__links {\n    padding: 0 var(--space-4);\n    overflow-x: auto;\n  }\n  .ds-nav__link {\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-hero {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-4);\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-hero__pulse {\n    margin-top: 0;\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-stat {\n    gap: var(--space-3);\n  }\n  .ds-stat__figure {\n    font-size: var(--text-h2);\n  }\n  .ds-stat__row {\n    flex-direction: column;\n    gap: 0;\n  }\n  .ds-uptime__row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: var(--space-2) var(--space-3);\n  }\n  .ds-uptime__days {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    gap: 0;\n  }\n  .ds-uptime__key {\n    margin-left: 0;\n    margin-right: var(--space-3);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-3);\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-2);\n  }\n  .ds-list__item > .ds-badge {\n    justify-self: start;\n  }\n  .ds-list__meta {\n    flex-direction: row;\n    gap: var(--space-3);\n  }\n  .ds-page-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-4);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-tabs {\n    display: flex;\n    max-width: 100%;\n    overflow-x: auto;\n  }\n  .ds-table {\n    min-width: 62ch;\n  }\n  .ds-timeline__item {\n    grid-template-columns: auto minmax(0, 1fr);\n    gap: var(--space-2) var(--space-3);\n  }\n  .ds-timeline__text {\n    grid-column: 1 / -1;\n  }\n  .ds-rules__item {\n    flex-wrap: wrap;\n  }\n  .ds-form__row {\n    flex-direction: column;\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-footer {\n    margin-top: var(--space-7);\n  }\n  .ds-footer__inner {\n    padding: var(--space-4);\n  }\n  .ds-footer__links {\n    margin-left: 0;\n  }\n}\n\n/* menu: a drop-down behind a button in the bar; on a phone it is the way to every view */\n.ds-menu {\n  position: relative;\n  display: inline-block;\n  flex: 0 0 auto;\n}\n.ds-menu__button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__button::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__button::after {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  margin-left: var(--space-1);\n  border-right: var(--border-width) var(--border-style) currentColor;\n  border-bottom: var(--border-width) var(--border-style) currentColor;\n  transform: rotate(45deg);\n}\n.ds-menu__button .ds-avatar {\n  margin: calc(var(--space-1) * -1) 0;\n}\n.ds-menu__button:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-menu[open] > .ds-menu__button {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 30;\n  min-width: calc(var(--size-mark) * 9);\n  margin: var(--space-1) 0 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--color-surface);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  text-align: left;\n}\n.ds-menu__title {\n  padding: var(--space-2) var(--space-2) var(--space-1);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  white-space: nowrap;\n}\n.ds-menu__title--rule {\n  margin-top: var(--space-1);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-1) var(--space-2);\n  color: var(--color-text);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-surface);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border-left-color: var(--color-surface-strong);\n}\n.ds-menu__hint {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a hint that opens on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin-left: var(--space-1);\n  vertical-align: middle;\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: 0;\n  text-transform: none;\n  cursor: help;\n}\n.ds-tooltip:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  z-index: 20;\n  display: none;\n  width: max-content;\n  max-width: calc(var(--size-mark) * 10);\n  margin-bottom: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-align: left;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n  display: block;\n}\n\n/* progress: a thin bar for a build, a rollout or a quota */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-progress__value {\n  color: var(--color-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--size-dot);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  background: var(--color-surface-strong);\n  color: var(--color-accent);\n  border: 0;\n  border-radius: var(--radius-pill);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: var(--color-surface-strong);\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-menu__item--view[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-menu__item--view[href=\"#overview\"],\n.ds-page:has(#incidents:target) .ds-menu__item--view[href=\"#incidents\"],\n.ds-page:has(#incident:target) .ds-menu__item--view[href=\"#incident\"],\n.ds-page:has(#alerts:target) .ds-menu__item--view[href=\"#alerts\"] {\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-menu__label {\n    display: none;\n  }\n}\n@media (max-width: 640px) {\n  .ds-nav .ds-nav__link {\n    padding-right: var(--space-2);\n    padding-left: var(--space-2);\n  }\n}\n\n/* phones: the table keeps its title column readable and scrolls */\n@media (max-width: 640px) {\n  .ds-table {\n    min-width: 92ch;\n  }\n  .ds-table tbody th {\n    min-width: 24ch;\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 status dashboard 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=\"#overview\">\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    <div class=\"ds-nav__scope\"><span>northwind</span><span>production</span></div>\n    <div class=\"ds-nav__actions\">\n      <span class=\"ds-badge ds-badge--success\"><span class=\"ds-dot ds-dot--success\"></span> Operational</span>\n      <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#alerts\">Alerts</a>\n      <a class=\"ds-button ds-button--small\" href=\"#incidents\">Report</a>\n      <details class=\"ds-menu\"><summary class=\"ds-menu__button\"><span class=\"ds-avatar\" aria-hidden=\"true\">IS</span><span class=\"ds-menu__label\">Imre</span></summary><ul class=\"ds-menu__list\"><li class=\"ds-menu__title\">Status</li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#overview\">Overview</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#incidents\">Incidents</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#incident\">INC-214</a></li><li><a class=\"ds-menu__item ds-menu__item--view\" href=\"#alerts\">Alert rules</a></li><li class=\"ds-menu__title ds-menu__title--rule\">Imre Solvang, on call</li><li><a class=\"ds-menu__item\" href=\"#overview\">northwind <span class=\"ds-menu__hint\">production</span></a></li><li><a class=\"ds-menu__item\" href=\"#alerts\">Alert history</a></li><li><a class=\"ds-menu__item\" href=\"#overview\">Sign out</a></li></ul></details>\n    </div>\n  </div>\n  <ul class=\"ds-nav__links\">\n    <li><a class=\"ds-nav__link\" href=\"#overview\">Overview</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#incidents\">Incidents <span class=\"ds-kbd\">1</span></a></li>\n    <li><a class=\"ds-nav__link\" href=\"#incident\">INC-214</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#alerts\">Alert rules</a></li>\n  </ul>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"overview\">\n  <div class=\"ds-main\">\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <span class=\"ds-hero__pulse\" aria-hidden=\"true\"></span>\n      <div>\n        <span class=\"ds-eyebrow ds-eyebrow--accent\">Status / checked 40 seconds ago</span>\n        <h1 class=\"ds-hero__title\">All systems operational</h1>\n        <p class=\"ds-hero__lead\">Six of six services answer in every region. One incident is being watched after a fix.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button\" href=\"#alerts\">Subscribe to updates</a>\n          <a class=\"ds-button ds-button--secondary is-hover\" href=\"#incidents\">Incident history</a>\n        </div>\n      </div>\n      <ul class=\"ds-hero__facts\">\n        <li class=\"ds-hero__fact\"><span>uptime, 90 days</span><b>99.982%</b></li>\n        <li class=\"ds-hero__fact\"><span>open incidents</span><b>1 monitoring</b></li>\n        <li class=\"ds-hero__fact\"><span>last outage</span><b>19 days ago</b></li>\n        <li class=\"ds-hero__fact\"><span>next maintenance</span><b>Sun 23 Mar, 02:00 UTC</b></li>\n      </ul>\n    </div>\n\n    <ul class=\"ds-stat\" data-component=\"stats\">\n      <li class=\"ds-stat__item\">\n        <span class=\"ds-stat__label\">Requests / s</span>\n        <span class=\"ds-stat__row\"><span class=\"ds-stat__figure\">18.4k</span><span class=\"ds-stat__delta\">+6.1%</span></span>\n        <svg class=\"ds-stat__spark\" viewBox=\"0 0 200 40\" preserveAspectRatio=\"none\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path vector-effect=\"non-scaling-stroke\" d=\"M0 30L14 27L28 29L42 22L56 24L70 18L84 21L98 15L112 17L126 12L140 16L154 9L168 12L182 6L200 8\"/></svg>\n      </li>\n      <li class=\"ds-stat__item ds-stat__item--2\">\n        <span class=\"ds-stat__label\">Latency p95</span>\n        <span class=\"ds-stat__row\"><span class=\"ds-stat__figure\">142 ms</span><span class=\"ds-stat__delta\">-11 ms</span></span>\n        <svg class=\"ds-stat__spark\" viewBox=\"0 0 200 40\" preserveAspectRatio=\"none\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path vector-effect=\"non-scaling-stroke\" d=\"M0 14L14 16L28 12L42 15L56 11L70 9L84 30L98 34L112 20L126 18L140 21L154 19L168 22L182 20L200 23\"/></svg>\n      </li>\n      <li class=\"ds-stat__item ds-stat__item--3\">\n        <span class=\"ds-stat__label\">Error rate</span>\n        <span class=\"ds-stat__row\"><span class=\"ds-stat__figure\">0.04%</span><span class=\"ds-stat__delta ds-stat__delta--down\">+0.01</span></span>\n        <svg class=\"ds-stat__spark\" viewBox=\"0 0 200 40\" preserveAspectRatio=\"none\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path vector-effect=\"non-scaling-stroke\" d=\"M0 33L14 33L28 32L42 33L56 31L70 32L84 8L98 12L112 28L126 32L140 33L154 31L168 32L182 30L200 31\"/></svg>\n      </li>\n      <li class=\"ds-stat__item ds-stat__item--4\">\n        <span class=\"ds-stat__label\">Time to recover</span>\n        <span class=\"ds-stat__row\"><span class=\"ds-stat__figure\">14 min</span><span class=\"ds-stat__delta\">median of 9</span></span>\n        <svg class=\"ds-stat__spark\" viewBox=\"0 0 200 40\" preserveAspectRatio=\"none\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path vector-effect=\"non-scaling-stroke\" d=\"M0 10V34 M25 18V34 M50 26V34 M75 6V34 M100 22V34 M125 28V34 M150 16V34 M175 24V34 M198 20V34\"/></svg>\n      </li>\n    </ul>\n\n    <div class=\"ds-cols\">\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Services <span class=\"ds-tooltip\" tabindex=\"0\">?<span class=\"ds-tooltip__tip\" role=\"tooltip\">One bar is one day. A bar turns amber after five minutes of errors.</span></span></h2><span class=\"ds-mono\">last 60 days, one bar a day</span></div>\n        <ul class=\"ds-uptime\">\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--success\"></span> API gateway</span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i></span><span class=\"ds-uptime__pct\">99.99%</span></li>\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--warning\"></span> Query engine</span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--down\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i></span><span class=\"ds-uptime__pct\">99.91%</span></li>\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--success\"></span> Storage</span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i></span><span class=\"ds-uptime__pct\">99.99%</span></li>\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--success\"></span> Webhooks</span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day ds-uptime__day--down\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i></span><span class=\"ds-uptime__pct\">99.94%</span></li>\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--success\"></span> Dashboard</span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i></span><span class=\"ds-uptime__pct\">100.00%</span></li>\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--success\"></span> Scheduler</span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i></span><span class=\"ds-uptime__pct\">99.97%</span></li>\n          <li class=\"ds-uptime__row\"><span class=\"ds-uptime__name\"><span class=\"ds-dot ds-dot--success\"></span> Edge cache <span class=\"ds-badge ds-badge--new\">New</span></span><span class=\"ds-uptime__days\"><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day ds-uptime__day--none\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day ds-uptime__day--warn\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i><i class=\"ds-uptime__day\"></i></span><span class=\"ds-uptime__pct\">99.98%</span></li>\n        </ul>\n        <div class=\"ds-uptime__axis\">\n          <span>60 days ago</span>\n          <span><span class=\"ds-uptime__key\"><span class=\"ds-dot ds-dot--success\"></span> up</span><span class=\"ds-uptime__key\"><span class=\"ds-dot ds-dot--warning\"></span> degraded</span><span class=\"ds-uptime__key\"><span class=\"ds-dot ds-dot--danger\"></span> outage</span></span>\n          <span>today</span>\n        </div>\n      </section>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel ds-panel--grow\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Latency, 24 hours</h2><span class=\"ds-mono\">fra1</span></div>\n          <div class=\"ds-chart\">\n            <svg class=\"ds-chart__plot\" viewBox=\"0 0 340 170\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" role=\"img\" aria-label=\"Latency over 24 hours: p50, p95 and p99\">\n              <g class=\"ds-chart__grid\" stroke-width=\"1\" stroke-dasharray=\"2 4\"><path d=\"M0 20h340 M0 65h340 M0 110h340\"/></g>\n              <g class=\"ds-chart__grid\" stroke-width=\"1\"><path d=\"M0 155h340\"/></g>\n              <g class=\"ds-chart__p99\"><path d=\"M0 62L24 58L48 66L72 54L96 60L120 48L144 16L168 24L192 56L216 60L240 52L264 58L288 50L312 56L340 54\"/></g>\n              <g class=\"ds-chart__p95\"><path d=\"M0 92L24 90L48 94L72 88L96 91L120 84L144 58L168 66L192 88L216 92L240 86L264 90L288 85L312 89L340 88\"/></g>\n              <g class=\"ds-chart__p50\"><path d=\"M0 130L24 129L48 131L72 128L96 130L120 127L144 118L168 121L192 129L216 130L240 128L264 130L288 127L312 129L340 128\"/><circle cx=\"340\" cy=\"128\" r=\"3\" fill=\"currentColor\"/></g>\n            </svg>\n            <ul class=\"ds-chart__legend\">\n              <li class=\"ds-chart__key ds-chart__p50\">p50 <b>38 ms</b></li>\n              <li class=\"ds-chart__key ds-chart__p95\">p95 <b>142 ms</b></li>\n              <li class=\"ds-chart__key ds-chart__p99\">p99 <b>310 ms</b></li>\n            </ul>\n          </div>\n        </section>\n        <div class=\"ds-callout\">\n          <h2 class=\"ds-callout__title\">Maintenance on Sunday</h2>\n          <p class=\"ds-callout__text\">Storage nodes in fra1 restart one at a time from 02:00 UTC. No downtime is expected.</p>\n          <a class=\"ds-button ds-button--inverse ds-button--small\" href=\"#incidents\">See the plan</a>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ds-colhead\"><h2 class=\"ds-colhead__title\">Regions</h2><span class=\"ds-mono\">p95 from the nearest probe</span></div>\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <div class=\"ds-grid__cell\"><span class=\"ds-grid__code\">fra1 <span class=\"ds-dot ds-dot--success\"></span></span><h3 class=\"ds-grid__title\">Frankfurt</h3><span class=\"ds-grid__figure\">142 <small>ms</small></span><span class=\"ds-meter\"><span class=\"ds-meter__fill ds-meter__fill--mid\"></span></span></div>\n      <div class=\"ds-grid__cell\"><span class=\"ds-grid__code\">lhr1 <span class=\"ds-dot ds-dot--success\"></span></span><h3 class=\"ds-grid__title\">London</h3><span class=\"ds-grid__figure\">96 <small>ms</small></span><span class=\"ds-meter\"><span class=\"ds-meter__fill\"></span></span></div>\n      <div class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__code\">iad1 <span class=\"ds-dot ds-dot--success\"></span></span><h3 class=\"ds-grid__title\">Virginia</h3><span class=\"ds-grid__figure\">88 <small>ms</small></span><span class=\"ds-meter\"><span class=\"ds-meter__fill\"></span></span></div>\n      <div class=\"ds-grid__cell ds-grid__cell--2\"><span class=\"ds-grid__code\">gru1 <span class=\"ds-dot ds-dot--warning\"></span></span><h3 class=\"ds-grid__title\">Sao Paulo</h3><span class=\"ds-grid__figure\">231 <small>ms</small></span><span class=\"ds-meter\"><span class=\"ds-meter__fill ds-meter__fill--high\"></span></span></div>\n      <div class=\"ds-grid__cell ds-grid__cell--3\"><span class=\"ds-grid__code\">sin1 <span class=\"ds-dot ds-dot--success\"></span></span><h3 class=\"ds-grid__title\">Singapore</h3><span class=\"ds-grid__figure\">118 <small>ms</small></span><span class=\"ds-meter\"><span class=\"ds-meter__fill ds-meter__fill--mid\"></span></span></div>\n      <div class=\"ds-grid__cell ds-grid__cell--4\"><span class=\"ds-grid__code\">syd1 <span class=\"ds-dot ds-dot--success\"></span></span><h3 class=\"ds-grid__title\">Sydney</h3><span class=\"ds-grid__figure\">104 <small>ms</small></span><span class=\"ds-meter\"><span class=\"ds-meter__fill\"></span></span></div>\n    </div>\n\n    <div class=\"ds-colhead\"><h2 class=\"ds-colhead__title\">Recent incidents</h2><a class=\"ds-link ds-link--more\" href=\"#incidents\">All incidents</a></div>\n    <ol class=\"ds-list\" data-component=\"list\">\n      <li class=\"ds-list__item\">\n        <div class=\"ds-list__meta\"><span>18 Mar 2025</span><span>09:12 UTC, 21 min</span></div>\n        <div><a class=\"ds-list__title\" href=\"#incident\">Elevated query latency in fra1</a><p class=\"ds-list__text\">A replica fell behind after a schema change and was taken out of rotation. We are watching the fix.</p></div>\n        <span class=\"ds-badge ds-badge--warning\">Monitoring</span>\n      </li>\n      <li class=\"ds-list__item\">\n        <div class=\"ds-list__meta\"><span>27 Feb 2025</span><span>22:40 UTC, 48 min</span></div>\n        <div><a class=\"ds-list__title\" href=\"#incident\">Webhook deliveries delayed</a><p class=\"ds-list__text\">A queue worker ran out of memory. Deliveries were retried and none were lost.</p></div>\n        <span class=\"ds-badge ds-badge--success\">Resolved</span>\n      </li>\n      <li class=\"ds-list__item\">\n        <div class=\"ds-list__meta\"><span>9 Feb 2025</span><span>02:00 UTC, 35 min</span></div>\n        <div><a class=\"ds-list__title\" href=\"#incident\">Scheduled storage maintenance</a><p class=\"ds-list__text\">Nodes in iad1 were restarted one at a time. Finished ten minutes early.</p></div>\n        <span class=\"ds-badge ds-badge--quiet\">Maintenance</span>\n      </li>\n    </ol>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"incidents\">\n  <div class=\"ds-main\">\n    <header class=\"ds-page-header\" data-component=\"page-header\">\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=\"#overview\">Status</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Incidents</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Incidents</h1>\n        <p class=\"ds-page-header__text\">Everything that went wrong or was planned since January, with how long it took to put right.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#alerts\">Alert rules</a>\n        <a class=\"ds-button\" href=\"#incident\">Report an incident</a>\n      </div>\n    </header>\n\n    <div class=\"ds-toolbar\">\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#incidents\">All <span class=\"ds-mono\">23</span></a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#incidents\">Open <span class=\"ds-mono\">1</span></a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#incidents\">Resolved</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#incidents\">Maintenance</a></li>\n      </ul>\n      <span class=\"ds-toolbar__note\">Times in UTC. Durations count from first alert to resolution.</span>\n    </div>\n\n    <section class=\"ds-panel\">\n      <div class=\"ds-table__wrap\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th scope=\"col\">Id</th><th scope=\"col\">Incident</th><th scope=\"col\">Service</th><th scope=\"col\">State</th><th scope=\"col\">Started</th><th scope=\"col\" class=\"ds-table__num\">Minutes</th><th scope=\"col\" class=\"ds-table__num\">Requests failed</th></tr>\n          </thead>\n          <tbody>\n            <tr><td class=\"ds-mono\">INC-214</td><th scope=\"row\"><a class=\"ds-link\" href=\"#incident\">Elevated query latency in fra1</a></th><td>Query engine</td><td><span class=\"ds-badge ds-badge--warning\">Monitoring</span></td><td class=\"ds-mono\">18 Mar, 09:12</td><td class=\"ds-table__num\">21</td><td class=\"ds-table__num\">0</td></tr>\n            <tr><td class=\"ds-mono\">INC-213</td><th scope=\"row\"><a class=\"ds-link\" href=\"#incident\">Webhook deliveries delayed</a></th><td>Webhooks</td><td><span class=\"ds-badge ds-badge--success\">Resolved</span></td><td class=\"ds-mono\">27 Feb, 22:40</td><td class=\"ds-table__num\">48</td><td class=\"ds-table__num\">0</td></tr>\n            <tr class=\"is-hover\"><td class=\"ds-mono\">INC-212</td><th scope=\"row\"><a class=\"ds-link\" href=\"#incident\">Write errors on large batches</a></th><td>Query engine</td><td><span class=\"ds-badge ds-badge--success\">Resolved</span></td><td class=\"ds-mono\">12 Feb, 14:03</td><td class=\"ds-table__num\">40</td><td class=\"ds-table__num\">1,284</td></tr>\n            <tr><td class=\"ds-mono\">MNT-031</td><th scope=\"row\"><a class=\"ds-link\" href=\"#incident\">Scheduled storage maintenance</a></th><td>Storage</td><td><span class=\"ds-badge ds-badge--quiet\">Maintenance</span></td><td class=\"ds-mono\">9 Feb, 02:00</td><td class=\"ds-table__num\">35</td><td class=\"ds-table__num\">0</td></tr>\n            <tr><td class=\"ds-mono\">INC-211</td><th scope=\"row\"><a class=\"ds-link\" href=\"#incident\">Dashboard sign-in failing</a></th><td>Dashboard</td><td><span class=\"ds-badge ds-badge--success\">Resolved</span></td><td class=\"ds-mono\">30 Jan, 11:26</td><td class=\"ds-table__num\">9</td><td class=\"ds-table__num\">312</td></tr>\n            <tr><td class=\"ds-mono\">INC-210</td><th scope=\"row\"><a class=\"ds-link\" href=\"#incident\">Gateway returning 502 in gru1</a></th><td>API gateway</td><td><span class=\"ds-badge ds-badge--danger\">Outage</span></td><td class=\"ds-mono\">17 Jan, 05:51</td><td class=\"ds-table__num\">14</td><td class=\"ds-table__num\">8,906</td></tr>\n          </tbody>\n        </table>\n      </div>\n      <div class=\"ds-table__foot\">\n        <span>6 of 23 incidents</span>\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#incidents\">Prev</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#incidents\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#incidents\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#incidents\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#incidents\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#incidents\">Next</a></li>\n        </ul>\n      </div>\n    </section>\n\n    <div class=\"ds-cols ds-cols--even\">\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=\"M6 9h20v17H6z\"/><path d=\"M6 14h20 M11 5v6 M21 5v6\"/></svg>\n        <h2 class=\"ds-empty__title\">No maintenance after 23 March</h2>\n        <p class=\"ds-empty__text\">Planned work is announced here at least seven days ahead.</p>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#alerts\">Notify me</a>\n      </div>\n      <section class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">States</h2><span class=\"ds-mono\">what each label means</span></div>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-badgerow\" data-component=\"badge\">\n            <span class=\"ds-badge\">Investigating</span>\n            <span class=\"ds-badge ds-badge--new\">Identified</span>\n            <span class=\"ds-badge ds-badge--warning\">Monitoring</span>\n            <span class=\"ds-badge ds-badge--success\">Resolved</span>\n            <span class=\"ds-badge ds-badge--danger\">Outage</span>\n            <span class=\"ds-badge ds-badge--quiet\">Maintenance</span>\n          </div>\n          <p>An incident opens with the first alert and closes when the error rate has been normal for thirty minutes.</p>\n          <p class=\"ds-linkrow\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#incidents\">Export as CSV</a>\n            <a class=\"ds-link is-visited\" href=\"#incidents\">Postmortems</a>\n            <a class=\"ds-link is-hover\" href=\"#incidents\">Uptime report</a>\n            <a class=\"ds-link is-active\" href=\"#incidents\">Status feed</a>\n          </p>\n        </div>\n      </section>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"incident\">\n  <div class=\"ds-main\">\n    <header class=\"ds-page-header\">\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=\"#overview\">Status</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#incidents\">Incidents</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">INC-214</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Elevated query latency in fra1 <span class=\"ds-badge ds-badge--warning\">Monitoring</span></h1>\n        <p class=\"ds-page-header__text\">Started 18 Mar 2025 at 09:12 UTC. Queries were slow for 21 minutes; none failed.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#alerts\">Subscribe</a>\n        <a class=\"ds-button\" href=\"#incident\">Post an update</a>\n      </div>\n    </header>\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\">Updates</h2><span class=\"ds-mono\">newest first</span></div>\n          <ol class=\"ds-timeline\">\n            <li class=\"ds-timeline__item\"><span class=\"ds-mono\">09:33 UTC</span><span><span class=\"ds-badge ds-badge--warning\">Monitoring</span></span><p class=\"ds-timeline__text\">The replica is out of rotation and p95 is back under 150 ms. We will watch for thirty minutes before closing.</p></li>\n            <li class=\"ds-timeline__item\"><span class=\"ds-mono\">09:24 UTC</span><span><span class=\"ds-badge ds-badge--new\">Identified</span></span><p class=\"ds-timeline__text\">One replica in fra1 is 90 seconds behind after this morning's schema change. Reads sent to it wait for it to catch up.</p></li>\n            <li class=\"ds-timeline__item\"><span class=\"ds-mono\">09:12 UTC</span><span><span class=\"ds-badge\">Investigating</span></span><p class=\"ds-timeline__text\">Latency alerts fired for the query engine in fra1. Other regions are normal.</p></li>\n          </ol>\n        </section>\n\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Postmortem</h2><span class=\"ds-badge ds-badge--outline\">Draft</span></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>A replica that could not keep up</h1>\n              <p class=\"ds-prose__lead\">A schema change rewrote a large table, and one replica applied it more slowly than the others.</p>\n              <p>The router sends reads to any replica less than <code>max_lag</code> behind. That setting was <strong>120 seconds</strong>, so a replica 90 seconds behind still took traffic.</p>\n              <h2>What we are changing</h2>\n              <ul>\n                <li>The default for <code>max_lag</code> drops to 10 seconds</li>\n                <li>Schema changes on tables over 50 GB are throttled per replica</li>\n                <li>A new alert fires when any replica is behind for more than a minute</li>\n              </ul>\n              <h3>What you need to do</h3>\n              <p>Nothing. The new default applies to every project from 20 March.</p>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Affected components</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><span class=\"ds-dot ds-dot--warning\"></span> Query engine, fra1 <span class=\"ds-mono\">degraded</span></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span> <a class=\"ds-link ds-link--quiet\" href=\"#overview\">API gateway</a> <span class=\"ds-mono\">normal</span></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span> <a class=\"ds-link ds-link--quiet\" href=\"#overview\">Storage</a> <span class=\"ds-mono\">normal</span></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-dot ds-dot--success\"></span> <a class=\"ds-link ds-link--quiet\" href=\"#overview\">Dashboard</a> <span class=\"ds-mono\">normal</span></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Facts</h2><span class=\"ds-mono\">INC-214</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\">Severity</span><span class=\"ds-mono\">minor</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Detected by</span><span class=\"ds-mono\">alert, p95 latency</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">Time to identify</span><span class=\"ds-mono\">12 min</span></li>\n              <li class=\"ds-panel__row\"><span class=\"ds-panel__key\">On call</span><span class=\"ds-mono\">Imre Solvang</span></li>\n            </ul>\n          </div>\n          <div class=\"ds-panel__body\"><div class=\"ds-progress\"><div class=\"ds-progress__head\"><span>Error budget, March</span><span class=\"ds-progress__value\">18% used</span></div><progress class=\"ds-progress__bar\" value=\"18\" max=\"100\">18%</progress></div></div>\n        </section>\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Actions</h2></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-buttonrow\" data-component=\"buttons\">\n              <a class=\"ds-button\" href=\"#incident\">Resolve</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#incident\">Edit</a>\n              <button class=\"ds-button\" type=\"button\" disabled>Reopen</button>\n              <a class=\"ds-button ds-button--danger\" href=\"#incident\">Delete</a>\n            </div>\n          </div>\n        </section>\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\">Mark INC-214 as resolved?</h2>\n              <a class=\"ds-dialog__close\" href=\"#incident\" aria-label=\"Close\"></a>\n            </div>\n            <div class=\"ds-dialog__body\">\n              <p>412 subscribers get a last e-mail and the banner on the status page goes back to green.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#incident\">Keep watching</a>\n              <a class=\"ds-button\" href=\"#incidents\">Resolve</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"alerts\">\n  <div class=\"ds-main\">\n    <header class=\"ds-page-header\">\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=\"#overview\">Status</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Alert rules</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Alert rules</h1>\n        <p class=\"ds-page-header__text\">A rule watches one measurement and tells a channel when it crosses a line for long enough.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#incidents\">Alert history</a>\n      </div>\n    </header>\n\n    <div class=\"ds-noticerow\" data-component=\"notice\">\n      <p class=\"ds-notice\"><span class=\"ds-notice__title\">Alerts are quiet during maintenance.</span> Rules pause for the services named in a maintenance window.</p>\n      <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">The webhook for the on-call channel answered 500.</span> Three alerts could not be delivered there today.</p>\n    </div>\n\n    <div class=\"ds-cols ds-cols--even\">\n      <section class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">New rule</h2><span class=\"ds-mono\">7 of 20 used</span></div>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\" action=\"#alerts\">\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Name</span><input class=\"ds-form__input\" type=\"text\" value=\"Replica lag over one minute\"></label>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Measurement</span>\n                <select class=\"ds-form__select\"><option>Replica lag, seconds</option><option>Latency p95, milliseconds</option><option>Error rate, percent</option><option>Queue depth</option></select>\n              </label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Is above</span><input class=\"ds-form__input ds-form__input--mono is-error\" type=\"text\" value=\"sixty\"><span class=\"ds-form__error\">Enter a number of seconds.</span></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">For at least</span><input class=\"ds-form__input ds-form__input--mono is-focus\" type=\"text\" value=\"1m\"></label>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Open an incident when this fires</span></label>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>Also alert when it recovers</span></label>\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Message</span><textarea class=\"ds-form__textarea\" rows=\"3\" placeholder=\"What should the person on call check first?\"></textarea><span class=\"ds-form__hint\">Sent with the alert. Plain text, up to 500 characters.</span></label>\n            <div class=\"ds-form__actions\">\n              <button class=\"ds-button\" type=\"submit\">Create rule</button>\n              <a class=\"ds-button ds-button--secondary\" href=\"#alerts\">Send a test alert</a>\n            </div>\n          </form>\n        </div>\n      </section>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Rules</h2><span class=\"ds-mono\">3 on, 1 off</span></div>\n          <ul class=\"ds-rules\">\n            <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Latency p95 over 400 ms <span class=\"ds-mono\">any region, for 5m</span></span><span class=\"ds-badge ds-badge--quiet\">on-call</span><span class=\"ds-switch is-on\" role=\"img\" aria-label=\"On\"></span></li>\n            <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Error rate over 1% <span class=\"ds-mono\">API gateway, for 2m</span></span><span class=\"ds-badge ds-badge--quiet\">on-call</span><span class=\"ds-switch is-on\" role=\"img\" aria-label=\"On\"></span></li>\n            <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Webhook queue over 10,000 <span class=\"ds-mono\">for 10m</span></span><span class=\"ds-badge ds-badge--quiet\">e-mail</span><span class=\"ds-switch is-on\" role=\"img\" aria-label=\"On\"></span></li>\n            <li class=\"ds-rules__item\"><span class=\"ds-rules__name\">Disk over 85% <span class=\"ds-mono\">storage, for 30m</span></span><span class=\"ds-badge ds-badge--outline\">paused</span><span class=\"ds-switch\" role=\"img\" aria-label=\"Off\"></span></li>\n          </ul>\n        </section>\n        <div class=\"ds-code\">\n          <div class=\"ds-code__head\"><span class=\"ds-code__name\">What the webhook receives</span><span class=\"ds-kbd\">json</span></div>\n<pre class=\"ds-code__body\">{\n  <span class=\"ds-code__k\">\"rule\"</span>:    <span class=\"ds-code__s\">\"replica-lag\"</span>,\n  <span class=\"ds-code__k\">\"state\"</span>:   <span class=\"ds-code__s\">\"firing\"</span>,\n  <span class=\"ds-code__k\">\"value\"</span>:   <span class=\"ds-code__n\">92</span>,\n  <span class=\"ds-code__k\">\"region\"</span>:  <span class=\"ds-code__s\">\"fra1\"</span>,\n  <span class=\"ds-code__k\">\"since\"</span>:   <span class=\"ds-code__s\">\"2025-03-18T09:12:04Z\"</span>\n}</pre>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <a class=\"ds-brand\" href=\"#overview\">\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    <span class=\"ds-footer__note\">status page, probes every 30 s from 6 regions</span>\n    <ul class=\"ds-footer__links\">\n      <li><a class=\"ds-footer__link\" href=\"#overview\">Overview</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#incidents\">Incidents</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#alerts\">Alert rules</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#incidents\">Status feed</a></li>\n    </ul>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.dev-dark.app.s05.p01.t05.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"dev-dark\",\n    \"years\": [\n      2019,\n      2026\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-dd-5153\",\n  \"short\": \"v1-dd-5153\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #08090a;\n  --color-canvas: #08090a;\n  --color-surface: #0f1011;\n  --color-surface-alt: #151617;\n  --color-surface-strong: #1f2023;\n  --color-bar: #08090a;\n  --color-bar-text: #d0d6e0;\n  --color-bar-alt: #0c0d0e;\n  --color-bar-alt-text: #8a8f98;\n  --color-inverse: #e5e5e6;\n  --color-inverse-text: #08090a;\n  --color-text: #d0d6e0;\n  --color-text-muted: #8a8f98;\n  --color-heading: #f7f8f8;\n  --color-heading-alt: #e5e5e6;\n  --color-link: #8c97ff;\n  --color-link-quiet: #8a8f98;\n  --color-link-visited: #a69fd8;\n  --color-link-hover: #f7f8f8;\n  --color-link-active: #5e6ad2;\n  --color-border: rgb(255 255 255 / 0.08);\n  --color-border-strong: rgb(255 255 255 / 0.16);\n  --color-border-muted: rgb(255 255 255 / 0.05);\n  --color-accent: #5e6ad2;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #e4f222;\n  --color-fill-1: #5e6ad2;\n  --color-fill-2: #52a8ff;\n  --color-fill-3: #62c073;\n  --color-fill-4: #8a8f98;\n  --color-button: #e5e5e6;\n  --color-button-text: #08090a;\n  --color-button-hover-text: #08090a;\n  --color-button-secondary: rgb(255 255 255 / 0.05);\n  --color-button-secondary-text: #f7f8f8;\n  --color-input: #0c0d0e;\n  --color-input-text: #f7f8f8;\n  --color-input-border: rgb(255 255 255 / 0.12);\n  --color-disabled: #1f2023;\n  --color-disabled-text: #62666d;\n  --color-danger: #f34e52;\n  --color-danger-surface: #1d1011;\n  --color-success: #62c073;\n  --color-warning: #ffd60a;\n  --color-notice: #11132a;\n  --color-notice-text: #c3c8ff;\n  --color-focus: #8c97ff;\n  --color-shadow: rgb(0 0 0 / 0.5);\n  --color-overlay: rgb(0 0 0 / 0.6);\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: 10px;\n  --radius-panel: 14px;\n  --radius-pill: 9999px;\n  --radius-page: 20px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 1px 3px var(--color-shadow);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 0 20px color-mix(in srgb, var(--color-button) 40%, transparent);\n  --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n  --shadow-dialog: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 24px 50px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: radial-gradient(ellipse 70% 480px at 50% 0, color-mix(in srgb, var(--color-fill-1) 9%, transparent), transparent) no-repeat, var(--color-page);\n  --fill-bar: color-mix(in srgb, var(--color-bar) 55%, transparent);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 95%, white), var(--color-surface));\n  --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 86%, white), var(--color-button));\n  --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 74%, white), color-mix(in srgb, var(--color-button) 92%, white));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}