{ "id": "v1-gl-4231", "long_id": "v1.glassmorphism.app.s04.p02.t03.u01", "name": "Glassmorphism window app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panels with a blurred backdrop, a 1px light border and a soft shadow, floating over a dark or colourful blurred background. It was common in finance and trading consoles, launchers, note tools and operating-system chrome, where the whole application was drawn as one glass window with a rail of icons down its side. This pack is that windowed form: one frosted window on a near-black slate backdrop with teal, blue and green glows, its strips divided by hairlines and its working area laid out as panes of glass, with lime as the one bright colour and a rounded sans at medium weight.", "url": "https://chrono.skin/s/v1-gl-4231", "preview_url": "https://chrono.skin/s/v1-gl-4231/specimen.html", "files": { "STYLE.md": "# Glassmorphism window app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panels with a blurred backdrop, a 1px light border and a soft shadow, floating over a dark or colourful blurred background. It was common in finance and trading consoles, launchers, note tools and operating-system chrome, where the whole application was drawn as one glass window with a rail of icons down its side. This pack is that windowed form: one frosted window on a near-black slate backdrop with teal, blue and green glows, its strips divided by hairlines and its working area laid out as panes of glass, with lime as the one bright colour and a rounded sans at medium weight.\n\n## Layout\n\n- Content width: `--size-page` (1320px), centred, with `--space-5` (24px) side padding below that width and `--space-6` (40px) above and below. The backdrop (`--fill-page` on `.ds-page`) fills the viewport; everything else lives inside `.ds-page__window`.\n- The window: `.ds-page__window` is the only blurred surface of the page besides the dialog box: `backdrop-filter: blur(var(--backdrop-blur)) saturate(160%)`, where `--backdrop-blur` is the surface token for how strongly glass blurs what lies behind it (24px in this pack's surface set). It is a faint frame, `--color-surface` thinned to 45%, with a 1px `--color-border-strong` edge, `--radius-page` corners and `--shadow-panel`. It is a grid of two columns: the navigation rail (`--size-rail`, 104px) and `.ds-page__body`.\n- Navigation: `.ds-nav` is a rail of bar glass down the left edge of the window, never a bar across the top. It holds one item per section, a 20px icon above a 12px label, then a round account chip; the brand is not in the rail but in the toolbar. The rail content is sticky, so it stays in view while the window scrolls.\n- The frame of the body is a stack of full-width strips divided by hairlines: `.ds-page__toolbar` (`--size-toolbar`, 64px: the `.ds-brand`, then a search field, `.ds-page__tools` on the right), then the page itself, then the `.ds-footer` status bar. The rail, the toolbar and the footer are the frame of the window and stay the same on every page.\n- Panes: `.ds-page__panes` splits the body into `.ds-page__main` and a `--size-aside` (320px) `.ds-page__aside` on the right, 16px apart and 16px from the edges of the window. Each column is a stack of `.ds-page__pane` sections 16px apart. A pane is a panel of the surface set: `--fill-panel`, a 1px `--color-border` edge, `--radius-panel` corners and `--shadow-panel`, padded `--space-5` (24px); it opens with a small uppercase `.ds-page__pane-title`. `.ds-page__pane--flush` has no padding and clips its content, for a table that runs to the pane's edges. A pane that stands alone under the strips (the table of a list page) keeps the same 16px margin.\n- Home page: under the toolbar the hero (title, lead and two large buttons on the left, a ring gauge of `--size-gauge` 220px on the right, a soft glow behind it), then the panes: notices, the bento `.ds-grid` and the activity `.ds-list` in the main column; `.ds-sidebar`, saved views, a `.ds-panel` well and the `.ds-empty` state under its own heading in the right column, so both columns end together.\n- Inner pages have no hero. Under the toolbar the `.ds-breadcrumb` trail sits 16px from the top of the page, directly above the `.ds-page-header` strip (title and one line on the left, actions on the right). A list page continues with the `.ds-stat` strip across the whole body, then `.ds-tabs` as a row of underlined labels on the next hairline, then a flush pane with the `.ds-table` and, under it, `.ds-page__status`: a count on the left and the `.ds-pagination` on the right. A record page continues with the panes: the form in the main column with its fields in two columns, facts about the record in the right column; a dialog dims one full-width pane under them. A reading page puts the running text in the main column and a contents list and one well in the right column.\n- Views: the specimen is one window with four screens, one showing at a time between the toolbar and the footer. `home` is the home view (hero, notices, balances, recent activity, the accounts column). `transfers` is the list (stats, tabs, table, status line with pagination). `transfer` is one transfer: its form beside the payee's facts and, below, the open dialog its Delete button raises. `guide` is the reading page with the running text and the link states. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address, and `transfer` marks the Transfers item.\n- Spacing scale: `--space-1` 4px (icon to label in the rail, gaps between pagination cells), `--space-2` 8px (label to control, stacked notices, link padding), `--space-3` 12px (row padding, gaps between tiles and buttons), `--space-4` 16px (tile and well padding, form row gap, stat padding), `--space-5` 24px (pane padding, toolbar side padding, form column gap, gap between tabs), `--space-6` 40px (hero padding, dialog pane padding, page margin), `--space-7` 72px (sparkline and textarea height).\n- Controls are `--size-control` (38px) high; pagination cells and small buttons 30px.\n- Below 900px the window, the panes, the hero and the form become one column, the rail turns into a row, the grid drops to two columns and the stat strip stacks. Below 600px the page margin drops to 12px, the rail row spreads across the top of the window with the account chip at its right end, the toolbar wraps so the tools sit under the brand, pane padding drops to 16px, the hero title drops to `--text-h1`, tile figures drop to `--text-h3`, tabs wrap and table columns marked `.ds-table__opt` are hidden.\n- On a phone (600px and below) `.ds-nav__list` shares the row with `.ds-nav__foot`: each `.ds-nav__link` takes an equal share of the width, the account chip stays at the right end, and the rail's top corners are rounded to the page radius with a hairline below. There is no menu button. Below 1100px a tooltip on a form label opens at the left edge of the label, at most 26 characters wide.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family, Inter first, for `--font-body`, `--font-heading` and `--font-ui`; `--font-mono` for code.\n- Body text is light: `--weight-body` 300 at `--text-base` 16px with `--line-body` 1.6. Bold, and every heading, is 700 (`--weight-bold`, `--weight-heading`).\n- The hero title is large and regular: `--text-display` 64px at `--weight-display` 400, `--line-display` 1.2.\n- Sizes: `--text-ui` 16px for buttons and tabs, `--text-small` 14px for meta text, badges, dock labels, table heads and notices, `--text-large` 20px for lead text, list titles and feature titles, `--text-h1` 28px for band headings, page titles and figures, `--text-h2` 24px, `--text-h3` 16px.\n- Buttons, dock items, tabs and pagination are uppercase at regular weight: `--ui-transform` uppercase, `--weight-ui` 400. Nothing else is uppercase.\n- Links in running text are always underlined (`--link-decoration` underline); quiet links are not.\n- Backdrop: a sky that falls from `--color-fill-2` (80 149 228) at the top edge through `--color-fill-1` (128 175 231) into `--color-page`, a very pale blue (241 247 255), within the first screen, and returns faintly further down; seven crisp-edged white bubbles, 84px to 210px in radius and 30% white at the centre, sit alternately right and left of the column; `--color-fill-3` (73 138 255) is a brighter blue and `--color-fill-4` (225 236 244) a pale grey-blue. Feature cards and list tiles mix them with `transparent` at 55%; the orbs fade from one to another.\n- This palette is light: text is dark navy (`--color-text` 39 55 76, `--color-heading` 31 57 88) on glass and on the backdrop, and `--color-text-muted` is the same navy at 72%.\n- Glass is white: `--color-surface` 40% for cards, `--color-surface-alt` 60% for the current item, chips and the eyebrow, `--color-surface-strong` 80% for hovered controls. `--color-bar` (225 236 244 at 60%) for the dock, the stat strip, table heads and code blocks, and `--color-bar-alt` (241 247 255 at 60%) for tabs, status badges and the footer, are pale frosted fills with navy text, not dark ones.\n- Borders: `--color-border` is white at 60% around glass, `--color-border-strong` a solid light blue (128 175 231) for the hero cards, dialogs, notices, secondary buttons and inputs, `--color-border-muted` navy at 11% for hairlines between rows and for hover tints.\n- `--color-button` and `--color-accent` are the same medium blue (47 110 211) with white text; the current tab takes the accent. `--color-link` is that blue too, `--color-link-visited` violet (120 64 184). `--color-accent-alt` is light blue (128 175 231) and takes navy text.\n- `--color-notice` is navy at 75% with white text, the one dark surface on the page.\n- Status: `--color-danger` 233 66 86 on a pale pink `--color-danger-surface`, `--color-success` 11 158 67, `--color-warning` 255 90 0; they appear as a 1px ring and an 8px dot on status badges, as the border of an error, and at 70% as the tint of the destructive button. `--color-shadow` is a blue (71 97 206) at 36%.\n- Corners: `--radius-control` 22px, which makes buttons, inputs and selects full pills at 44px, `--radius-panel` 6px for list cards, notices and dock items, `--radius-page` 14px for cards, the dock, the stat strip and the footer, `--radius-pill` 30px for badges and tabs.\n- Shadows are short and layered: `--shadow-panel` is 0 10px 21px plus a bevel inside the glass: a 2px white highlight along the top edge and a 2px shade along the bottom; `--shadow-control` 0 2px 8px with a 1px top highlight, `--shadow-dialog` 0 12px 24px on the dialog, the dock and the stat strip. `--shadow-text` is `none`.\n- One-off values with no token: the strongest glass multiplies `--backdrop-blur` by three with `calc()`, `saturate(180%)` is written inline on the dock, stat strip and footer, tints use `color-mix()` over `--color-fill-*` with `transparent`, the hero cards are rotated by -10, -3 and 8 degrees, and the stat labels are the bar text at `opacity: 0.8`.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop and sets the base type. `.ds-page__inner` is the width container, `.ds-page__window` the glass window, `.ds-page__body` its right column, `.ds-page__toolbar` the top strip with `.ds-page__search` (a search field with `.ds-page__search-text` and a `.ds-page__key` hint) and `.ds-page__tools`. `.ds-page__panes`, `.ds-page__main`, `.ds-page__aside`, `.ds-page__pane`, `.ds-page__pane--flush` and `.ds-page__pane-title` build the pane layout; `.ds-page__status` is the strip under a table; `.ds-page__icon` sizes a 20px icon.\n- `.ds-nav`: the rail. `.ds-nav__inner` (sticky), `.ds-nav__list`, `.ds-nav__link` (icon above label; `is-current` is a lighter chip with a hairline), `.ds-nav__foot` (round account chip). Five or six items at most.\n- `.ds-brand`: the site's mark and name, at the left end of the toolbar, before the search field or the breadcrumb: `.ds-brand__mark` is a 24px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` is the name in the heading font at `--text-h3` in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: first strip of the home window: `.ds-hero__text` with `.ds-hero__title` at the display size, `.ds-hero__lead` and `.ds-hero__actions`; on the right `.ds-hero__gauge`, stacked `.ds-hero__ring` circles (track, `--value` in the accent, `--alt` thinner in the second accent) around a `.ds-hero__readout` with `.ds-hero__figure` and `.ds-hero__caption`. Once per application, on the home page.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.ds-page-header__text` holds `.ds-page-header__title` (30px) and one line of `.ds-page-header__lead`; `.ds-page-header__actions` sits at the right with at most one primary button. It is a strip of the window with a hairline under it, not a card.\n- `.ds-prose`: running text in a pane: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block on bar glass. In a full-width pane, `.ds-prose__cols` sets two `.ds-prose__col` columns under the title and lead so lines stay short.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays samples out in a row.\n- `.ds-button`: primary, lime solid, 38px high, 12px radius. `.ds-button--secondary` is a translucent slate button with a hairline; `.ds-button--danger` is the destructive action: tinted with the danger colour at 70%, solid on hover, used once at the end of a group or as the confirming button of a dialog. `.ds-button--large` for the hero, `.ds-button--small` (30px) for tight rows; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays buttons out in a row. One primary button per group.\n- `.ds-form`: a grid of two columns inside a pane. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range`, and `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__field--wide` spans both columns. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text. `.ds-form__actions` closes the form under a hairline.\n- `.ds-table`: data table that runs edge to edge in a flush pane: a thin head strip of bar glass with small uppercase labels, hairline rows, no stripes and no box of its own. `.ds-table__num` right-aligns a numeric column, `.ds-table__opt` marks a column hidden below 600px, `.ds-table__meta` is muted text, `is-hover` on a row lightens it.\n- `.ds-list`: open rows in a pane, divided by hairlines. `.ds-list__item` holds a round `.ds-list__icon`, a `.ds-list__body` (with `.ds-list__title` and `.ds-list__meta`) and a `.ds-list__value` figure on the right. `.ds-list__dot` is a status dot; `--off` turns it to the danger colour.\n- `.ds-panel`: a well inside a pane: lighter fill, hairline, the smaller of the panel and control radius (12px here), no shadow and no blur. `.ds-panel__title` (18px) and `.ds-panel__body` (14px, muted). Use it for a short note beside the main content, not as the main container; the pane is the main container.\n- `.ds-grid`: a bento of four tinted tiles in three columns: `.ds-grid__cell--1` is two rows tall and may hold a `.ds-grid__spark` line, `--2` and `--3` are single, `--4` is two columns wide. Inside, `.ds-grid__label`, `.ds-grid__value`, `.ds-grid__meta`.\n- `.ds-stat`: the row of summary figures as a strip across the window, cut by vertical hairlines. Each `.ds-stat__item` has a small uppercase `.ds-stat__label`, a `.ds-stat__value` (24px, tabular figures) with a muted `.ds-stat__meta` on the same line, and a `.ds-stat__bar` meter in the accent (`--low`, default or `--high`). Three to five items; inner pages only, the tinted `.ds-grid` is the home page's form of the same thing.\n- `.ds-tabs`: a row of labels sitting on a hairline; `.ds-tabs__tab` with `is-current` underlined in the accent. It spans the body under the stat strip and may carry a count badge. Use it for views of one page, not for site navigation.\n- `.ds-badge`: pill for counts and markers: lime by default, `.ds-badge--alt` solid blue for \"new\", `.ds-badge--glass` neutral for quiet counts and values. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a bar glass pill with a 1px ring and a leading 8px dot in the status colour.\n- `.ds-sidebar`: put on a pane of the right column, which gives it its box: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: information notice, a tinted well with a hairline; `.ds-notice--error` has the danger border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several 8px apart.\n- `.ds-pagination`: row of small cells at the right end of `.ds-page__status`, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill, `is-disabled` greys an end.\n- `.ds-breadcrumb`: trail at the top of an inner page, directly above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a pane across the body, 16px in from the window's edges, dimmed with `--color-overlay` and a `.ds-dialog__box` of frosted glass, 480px wide, 20px radius: `.ds-dialog__title`, `.ds-dialog__body`, both left-aligned, and `.ds-dialog__actions` right-aligned above a hairline.\n- `.ds-empty`: empty state centred in its pane, with no box of its own: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the status bar at the foot of the window, bar glass with small text on the left and `.ds-footer__links` with `.ds-footer__link` on the right.\n- `.ds-menu`: a drop-down of the strongest glass under its `.ds-menu__trigger`, shown on hover or focus (or with `is-open`): `.ds-menu__list` of `.ds-menu__link` rows with an optional `.ds-menu__meta`. Use it for the account or workspace menu; `.ds-menu__group` sets it beside a button, `.ds-menu__list--start` hangs it from the left edge.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. Use it for questions and for settings that are rarely opened; `.ds-accordion--flush` drops its own sheet when it sits inside another panel.\n- `.ds-tooltip`: a round hint mark inside a form label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). One sentence.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. `.ds-switch__group` is the tinted box that holds a few of them, divided by hairlines.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--85`, `--90`. Use it under a figure that is a share of a whole; `.ds-progress__label` is an optional line above it.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch and are divided by a hairline.\n- `block-gap <= 40px`: panes sit 16px apart; nothing on the page is further apart than the 40px page margin.\n- `content-width <= 1320px`: the window is capped while the backdrop fills the viewport.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `uppercase-text <= 20%`: uppercase is for controls, never for headings or body.\n- `border-width <= 2px`: borders are 1px hairlines; 2px appears only as the focus ring.\n- `border-radius <= 30px`: panels are 12px, large containers 16px, controls 4px; only pills and round dots go higher.\n- `box-shadow-blur <= 40px`: shadows are soft but bounded: 32px on panels, 40px on dialogs.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; gradients are the backdrop, the orbs and a faint sheen on tiles and secondary buttons.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new section is a `.ds-page__pane` with a `.ds-page__pane-title`, 16px from its neighbours, dressed from the panel tokens and never given a blur of its own; a boxed note starts from `.ds-panel`, a new control from `.ds-button--secondary` or `.ds-form__input`, an overlay from `.ds-dialog__box`. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*`. Keep the window the only blurred surface, keep opaque fills to buttons and badges, and put navigation in the rail, never in a bar across the top.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1320px;\n --size-rail: 104px;\n --size-aside: 320px;\n --size-dialog: 480px;\n --size-toolbar: 64px;\n --size-control: 38px;\n --size-tile: 128px;\n --size-gauge: 220px;\n --size-icon: 20px;\n --size-dot: 8px;\n --size-thumb: 18px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 40px;\n --space-7: 72px;\n}\n\n/* shell: the backdrop fills the viewport, the application is one window of glass on it */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-6) var(--space-5);\n}\n.ds-page__window {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n background: color-mix(in srgb, var(--color-surface) 45%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(160%);\n backdrop-filter: blur(var(--backdrop-blur)) saturate(160%);\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.ds-page__body {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-page__toolbar {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-toolbar);\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n/* brand: mark and name at the head of the toolbar */\n.ds-brand {\n display: flex;\n flex: none;\n margin-right: var(--space-2);\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) + var(--space-1));\n height: calc(var(--size-icon) + var(--space-1));\n flex: none;\n padding: calc(var(--space-1) / 2);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__search {\n display: flex;\n flex: 0 1 var(--size-aside);\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-page__search-text {\n flex: 1;\n opacity: 0.7;\n}\n.ds-page__key {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-page__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-left: auto;\n}\n.ds-page__panes {\n display: grid;\n flex: 1;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-4);\n align-items: start;\n padding: var(--space-4);\n}\n.ds-page__main {\n min-width: 0;\n}\n.ds-page__aside {\n min-width: 0;\n}\n/* a pane is a panel of the surface set: its fill, its edge, its corner and its shadow */\n.ds-page__pane {\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__pane + .ds-page__pane {\n margin-top: var(--space-4);\n}\n.ds-view > .ds-page__pane {\n margin: var(--space-4);\n}\n.ds-page__pane--flush {\n overflow: hidden;\n padding: 0;\n}\n.ds-page__pane-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-page__pane--flush > .ds-page__pane-title {\n margin: 0;\n padding: var(--space-5) var(--space-5) var(--space-3);\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n.ds-page__status {\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-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* nav: a rail of bar glass down the left edge of the window, icon above label */\n.ds-nav {\n background: var(--fill-bar);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-page) - var(--border-width)) 0 0 calc(var(--radius-page) - var(--border-width));\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-2) var(--space-5);\n}\n.ds-nav__list {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-2) var(--space-1);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\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 opacity: 0.72;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-border-muted);\n opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#transfers:target) .ds-nav__link[href=\"#transfers\"],\n.ds-page:has(#transfer:target) .ds-nav__link[href=\"#transfers\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--color-surface-alt);\n border-color: var(--color-border);\n opacity: 1;\n}\n.ds-nav .ds-nav__foot {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--color-surface-alt);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* breadcrumb: sits in the toolbar of an inner page */\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-view > .ds-breadcrumb {\n padding: var(--space-4) var(--space-5) 0;\n}\n.ds-breadcrumb + .ds-page-header {\n padding-top: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: first pane of an inner page */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: the first pane of the home window, title on the left, a ring gauge on the right */\n.ds-hero {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-gauge);\n gap: var(--space-6);\n align-items: center;\n overflow: hidden;\n padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: -60%;\n right: -8%;\n width: 62%;\n height: 220%;\n background: radial-gradient(closest-side, color-mix(in srgb, var(--color-fill-2) 55%, transparent), transparent);\n pointer-events: none;\n}\n.ds-hero__text {\n position: relative;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n.ds-hero__gauge {\n position: relative;\n width: var(--size-gauge);\n height: var(--size-gauge);\n}\n.ds-hero__ring {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n color: var(--color-border-strong);\n}\n.ds-hero__ring--value {\n color: var(--color-accent);\n}\n.ds-hero__ring--alt {\n color: var(--color-accent-alt);\n}\n.ds-hero__readout {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-align: center;\n}\n.ds-hero__figure {\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-hero__caption {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--radius-control);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-prose__cols {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 var(--space-6);\n align-items: start;\n}\n.ds-prose__col {\n min-width: 0;\n}\n.ds-prose .ds-prose__col > h2:first-child,\n.ds-prose .ds-prose__col > h3:first-child {\n margin-top: var(--space-4);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-3);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: not-allowed;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n.ds-button--small {\n min-height: calc(var(--size-control) - var(--space-2));\n padding: var(--space-1) var(--space-3);\n font-size: var(--text-small);\n}\n\n/* panel: a well inside a pane, lighter fill and a hairline, no shadow and no blur of its own */\n.ds-panel {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: min(var(--radius-panel), var(--radius-control));\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n\n/* form */\n.ds-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4) var(--space-5);\n align-items: start;\n}\n.ds-form__field--wide {\n grid-column: 1 / -1;\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-disabled-text);\n opacity: 1;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-5);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-icon);\n height: var(--size-icon);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n grid-column: 1 / -1;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: rows run edge to edge in a flush pane, a thin strip of bar glass as the head */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th:first-child,\n.ds-table td:first-child {\n padding-left: var(--space-5);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n padding-right: var(--space-5);\n}\n.ds-table 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 font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: open rows in a pane, an icon chip on the left and a figure on the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-text);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__value {\n flex: none;\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n font-variant-numeric: tabular-nums;\n text-align: right;\n}\n.ds-list__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n background: var(--color-success);\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n\n/* grid: a bento of tinted tiles, one tall, two small, one wide */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-tile), auto);\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-4);\n background-color: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__cell--1 {\n grid-row: span 2;\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n grid-column: span 2;\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__label {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-grid__spark {\n width: 100%;\n height: var(--space-7);\n margin-top: auto;\n color: var(--color-text);\n}\n.ds-grid__value {\n margin-top: auto;\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-grid__spark + .ds-grid__value {\n margin-top: var(--space-3);\n}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: a strip across the window, figures divided by hairlines, a thin meter under each */\n.ds-stat {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n margin: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n padding: var(--space-4) var(--space-5);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__label {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: var(--space-1) 0 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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n.ds-stat__bar {\n display: block;\n height: var(--size-track);\n margin-top: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-stat__bar::after {\n content: \"\";\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-stat__bar--low::after {\n width: 18%;\n}\n.ds-stat__bar--high::after {\n width: 84%;\n}\n\n/* tabs: a row of labels on the pane hairline, the current one underlined in the accent */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\n border-bottom: 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 margin-bottom: calc(-1 * var(--border-width));\n padding: var(--space-3) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-accent);\n color: var(--color-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n\n/* status badges: a bar glass pill with a 1px ring and a dot in the status colour */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar: a pane of the right column, a small heading above a list of links */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0 calc(-1 * var(--space-2));\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n}\n\n/* notice */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination: sits at the right end of the status strip under a table */\n.ds-pagination {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: calc(var(--size-control) - var(--space-2));\n min-height: calc(var(--size-control) - var(--space-2));\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-alt);\n border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* dialog: a dimmed pane with a frosted box of the canvas colour, shown in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n margin: 0 var(--space-4) var(--space-4);\n padding: var(--space-6) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-5) var(--space-5) 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}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-5) var(--space-5);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* empty state: centred in its pane, no box */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-4) 0;\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n max-width: 36ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* footer: the status bar at the foot of the window */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: auto;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) 0;\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-accordion {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-thumb));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-menu__list--start {\n right: auto;\n left: 0;\n}\n.ds-menu__group {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-progress__bar--85 { width: 85%; }\n.ds-stat__value .ds-progress,\n.ds-stat__item > .ds-progress,\n.ds-grid__cell .ds-progress {\n width: 100%;\n min-width: calc(var(--space-6) * 2);\n margin-top: var(--space-2);\n}\n.ds-accordion--flush {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n.ds-accordion--flush .ds-accordion__summary,\n.ds-accordion--flush .ds-accordion__body {\n padding-left: 0;\n padding-right: 0;\n}\n.ds-switch__group {\n padding: var(--space-3) var(--space-4);\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-form__label .ds-tooltip {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n@media (min-width: 901px) {\n .ds-menu--side .ds-menu__list {\n top: auto;\n right: auto;\n bottom: 0;\n left: 100%;\n }\n}\n@media (max-width: 900px) {\n .ds-page__window,\n .ds-page__panes,\n .ds-hero,\n .ds-form,\n .ds-prose__cols {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-nav__inner,\n .ds-nav__list {\n flex-direction: row;\n }\n .ds-stat {\n grid-auto-flow: row;\n }\n .ds-stat__item + .ds-stat__item {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-left: 0;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-hero__gauge,\n .ds-page__search {\n display: none;\n }\n}\n@media (max-width: 600px) {\n .ds-page__inner {\n padding: var(--space-3);\n }\n .ds-page__panes {\n gap: var(--space-3);\n padding: var(--space-3);\n }\n .ds-page__pane + .ds-page__pane {\n margin-top: var(--space-3);\n }\n .ds-view > .ds-page__pane,\n .ds-dialog {\n margin: var(--space-3);\n }\n .ds-nav {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width)) 0 0;\n }\n .ds-nav__inner {\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n }\n .ds-page__toolbar,\n .ds-page__tools,\n .ds-tabs,\n .ds-form__actions,\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-page__toolbar,\n .ds-page__pane,\n .ds-page-header,\n .ds-stat__item {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-page__pane--flush {\n padding-left: 0;\n padding-right: 0;\n }\n .ds-view > .ds-breadcrumb {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-page__tools {\n margin-left: 0;\n }\n .ds-hero {\n padding: var(--space-5) var(--space-4);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-page-header__text {\n flex-basis: 100%;\n }\n .ds-tabs {\n gap: 0 var(--space-4);\n padding: 0 var(--space-4);\n }\n .ds-table th,\n .ds-table td {\n padding-left: var(--space-2);\n padding-right: var(--space-2);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-page__status {\n padding: var(--space-3) var(--space-4);\n }\n .ds-grid__cell {\n padding: var(--space-3);\n }\n .ds-grid__value {\n font-size: var(--text-h3);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer {\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width));\n }\n}\n@media (max-width: 600px) {\n .ds-nav__list {\n flex: 1;\n align-self: auto;\n min-width: 0;\n }\n .ds-nav__list > li {\n flex: 1;\n min-width: 0;\n }\n .ds-nav__inner {\n gap: var(--space-3);\n }\n}\n@media (max-width: 1100px) {\n .ds-form__label {\n position: relative;\n }\n .ds-form__label .ds-tooltip {\n position: static;\n }\n .ds-form__label .ds-tooltip__tip {\n left: 0;\n max-width: min(26ch, 100%);\n transform: none;\n }\n}\n@media (max-width: 600px) {\n .ds-page__status,\n .ds-page-header__actions,\n .ds-pagination {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 600px) {\n .ds-breadcrumb {\n flex-wrap: wrap;\n }\n .ds-stat__item,\n .ds-page-header__text {\n min-width: 0;\n }\n}\n@media (max-width: 600px) {\n .ds-page-header__actions {\n flex: 0 1 auto;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: every account on one desk\n\n\n\n\n\n
\n\n
\n\n
\n
\n \n
\nRM\n\n
\n
\n
\n\n
\n\n
\n \n \n chronoskin\n \n
\n \n Search accounts and transfers\n /\n
\n
\n 3 to approve\n Export\n New transfer\n
\n
\n\n
\n\n
\n
\n

Every account on one desk

\n

Balances, payment runs and approvals for the whole co-op, checked against the bank each morning.

\n
\n See the payment run\n How a run works\n
\n
\n
\n \n \n \n
\n 68%\n of this year's budget\n
\n
\n
\n\n
\n\n
\n\n
\n
\n
\n \n
Bank holiday on Monday. Transfers approved after 15:00 on Friday leave on Tuesday morning.
\n
\n
\n \n
One transfer was returned. The payment to Harrow Roofing came back with a closed account. Check the details and send it again.
\n
\n
\n
\n\n
\n

Balances All transfers

\n
\n
\n Operating account\n \n 48,210.00\n Up 3,120.40 since the first of the month\n
\n
\n Reserve\n 120,000.00\n Untouched since March\n
\n
\n Due this week\n 6,430.50\n Seven payments, three to approve\n
\n
\n Repairs fund\n 17,905.20\n Enough for the roof work planned in autumn, with 2,400.00 to spare\n\n
\n
\n
\n\n
\n

Recent activity

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

Saved views

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

Next run Friday

\n
\n Seven payments worth 6,430.50 are queued. Three still need a second approval before the cut-off at 15:00.\n
\n
\n
\n\n
\n

Payees on hold

\n
\n \n

No payees on hold

\n

Nobody is paused right now. Put a payee on hold to keep them out of the next run.

\n Hold a payee\n
\n
\n\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. Alder Court
    2. \n
  2. Operating account
    3. \n
  3. Transfers
    4. \n
\n\n
\n
\n

Transfers

\n

Everything that left or is about to leave the operating account this month.

\n
\n
\n How a run works\n New transfer\n
\n
\n\n
\n
\n
Sent this month
\n
31,480.00 41 transfers
\n \n
\n
\n
Queued
\n
6,430.50 7 for Friday
\n \n
\n
\n
Waiting for approval
\n
3 oldest 2 days
\n \n
\n
\n
Returned
\n
1 since Tuesday
\n \n
\n
\n\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PayeeStatusRequested byDateAmount
Northgate LiftsSentRuna MeliToday, 08:151,840.00
Wren and Dale CleaningSentOtis BrandtYesterday412.50
Fenwater InsuranceNeeds approvalOtis BrandtQueued for Friday3,208.00
Harrow RoofingReturnedLena OkaforTuesday620.00
Repairs fundSentStanding order3 days ago1,500.00
Alder Court garden clubNeeds approvalLena OkaforQueued for Friday260.00
Calder WaterSentStanding order5 days ago938.40
\n
\n Showing 8 to 14 of 41 transfers\n \n
\n
\n\n
\n\n
\n\n
    \n
  1. Alder Court
    2. \n
  2. Transfers
    3. \n
  3. Fenwater Insurance
    4. \n
\n\n
\n
\n

Fenwater Insurance Needs approval

\n

Building insurance, second quarter. Queued for the run on Friday.

\n
\n
\n Back to transfers\n
\n
\n\n
\n\n
\n

Schedule a transfer

\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n Enter the full policy reference.\n
\n
\n \n \n The limit for one transfer from this account is 5,000.00.\n
\n
\n \n \n
\n \n
\n\n\n
\n
\n \n Save as draft\n \n \n
\n
\n
\n\n
\n
\n

This payee

\n \n
\n
\n
\n

Second approval

\n
\n Anything above 2,500.00 waits for a second treasurer. Lena Okafor is next on the list this week.\n
\n
\n
\n
\n\n
\n\n
\n
\n

Delete this transfer?

\n
It is taken out of Friday's run. The payee and the reference stay in the history, so it can be scheduled again.
\n
\n Keep it\n Delete\n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Alder Court
    2. \n
  2. Help
    3. \n
  3. Payment runs
    4. \n
\n\n
\n
\n

Guide

\n

What a payment run is, who approves it and what holds it back.

\n
\n
\n See this week's run\n
\n
\n\n
\n\n
\n
\n

How a payment run works

\n

Payments are gathered through the week and leave together, once two people have looked at them.

\n
\n
\n

A run is a list of transfers with one date. Anyone on the desk can add to it; only a treasurer can approve it. Each transfer keeps the field requested_by, so a question always has someone to go to.

\n

Approvals

\n

A run needs two approvals before the cut-off at 15:00. After that it is locked and sent to the bank as one file.

\n
\n
\n

What stops a run

\n
    \n
  • A transfer larger than the limit of the account.
    • \n
  • A payee whose details changed in the last seven days.
    • \n
  • A balance that would fall below the agreed floor.
    • \n
\n 
run:      friday\n    cutoff:   15:00\n    approve:  2 of 3\n    floor:    5,000.00
\n

\n Normal link\n Visited link\n Hovered link\n Active link\n Quiet link\n

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

In this guide

\n \n
\n
\n
\n
\nWho may approve?\n

Any treasurer who did not add the transfer.

\n
\n
\nWhat if the cut-off passes?\n

The run is locked at 15:00 and anything unapproved moves to the next one.

\n
\n
\nCan a sent transfer be recalled?\n

No. Ask the payee to return it and record it as received.

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

This week Friday

\n
\n Seven payments are queued and three still wait for a second approval. Open the run\n
\n
\n
\n
\n\n
\n\n
\n\n \n\n
\n
\n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s04.p02.t03.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\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-gl-4231\",\n \"short\": \"v1-gl-4231\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(233 64 87);\n --color-canvas: rgb(233 64 87);\n --color-surface: rgb(255 255 255 / 0.2);\n --color-surface-alt: rgb(255 255 255 / 0.3);\n --color-surface-strong: rgb(255 255 255 / 0.4);\n --color-bar: rgb(138 35 135 / 0.75);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(138 35 135 / 0.6);\n --color-bar-alt-text: rgb(255 255 255);\n --color-inverse: rgb(255 255 255);\n --color-inverse-text: rgb(138 35 135);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(255 255 255 / 0.8);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(255 255 255);\n --color-link: rgb(38 230 255);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(216 205 249);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(79 229 255);\n --color-border: rgb(255 255 255 / 0.3);\n --color-border-strong: rgb(255 255 255 / 0.4);\n --color-border-muted: rgb(255 255 255 / 0.1);\n --color-accent: rgb(255 255 255);\n --color-accent-text: rgb(138 35 135);\n --color-accent-alt: rgb(0 131 37);\n --color-fill-1: rgb(242 113 33);\n --color-fill-2: rgb(233 64 87);\n --color-fill-3: rgb(138 35 135);\n --color-fill-4: rgb(240 112 112);\n --color-button: rgb(255 255 255);\n --color-button-text: rgb(138 35 135);\n --color-button-hover-text: rgb(84 10 25);\n --color-button-secondary: rgb(255 255 255 / 0.2);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(138 35 135 / 0.6);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.4);\n --color-disabled: rgb(255 255 255 / 0.1);\n --color-disabled-text: rgb(255 255 255 / 0.6);\n --color-danger: rgb(84 10 25);\n --color-danger-surface: rgb(233 64 87 / 0.6);\n --color-success: rgb(42 238 98);\n --color-warning: rgb(242 113 33);\n --color-notice: rgb(255 255 255 / 0.6);\n --color-notice-text: rgb(84 10 25);\n --color-focus: rgb(38 230 255);\n --color-shadow: rgb(0 0 0 / 0.2);\n --color-overlay: rgb(84 10 25 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 64px;\n --text-h1: 28px;\n --text-h2: 24px;\n --text-h3: 16px;\n --line-body: 1.6;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 300;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 12px;\n --radius-pill: 30px;\n --radius-page: 16px;\n --shadow-panel: 0 8px 32px 0 var(--color-shadow);\n --shadow-control: 0 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 0 4px 30px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 20px 40px 0 var(--color-shadow);\n --shadow-text: 0 2px 4px var(--color-shadow);\n --fill-page:\n radial-gradient(circle 560px at 8% 180px, var(--color-fill-3), transparent),\n radial-gradient(circle 640px at 88% 420px, var(--color-fill-2), transparent),\n radial-gradient(circle 520px at 30% 1150px, var(--color-fill-2), transparent),\n radial-gradient(circle 600px at 95% 1650px, var(--color-fill-3), transparent),\n radial-gradient(circle 560px at 10% 2250px, var(--color-fill-4), transparent),\n radial-gradient(circle 620px at 75% 2900px, var(--color-fill-3), transparent),\n radial-gradient(circle 560px at 20% 3600px, var(--color-fill-2), transparent),\n linear-gradient(160deg, var(--color-fill-1) 0%, var(--color-page) 55%, var(--color-fill-1) 100%);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 70%);\n --fill-button-secondary: linear-gradient(color-mix(in srgb, white 15%, transparent), transparent), var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 6px;\n}\n" } }