{ "id": "v1-bs-6645", "long_id": "v1.bootstrap-era.app.s06.p06.t04.u05", "name": "Framework default account area", "era": { "slug": "bootstrap-era", "code": "bs", "name": "Framework default", "years": [ 2011, 2014 ], "description": "The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels with tinted heading strips and coloured buttons and labels. This pack is the sign-in page and account area that every small web application of those years had, in a slate theme of the kind the theme galleries offered: gunmetal grey surfaces, bars and buttons with a short vertical gradient, a light blue primary colour, white inputs and small bold controls. It is the glossy 2012 form of the look turned dark.", "url": "https://chrono.skin/s/v1-bs-6645", "preview_url": "https://chrono.skin/s/v1-bs-6645/specimen.html", "files": { "STYLE.md": "# Framework default account area\n\n## Summary\n\nThe framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels with tinted heading strips and coloured buttons and labels. This pack is the sign-in page and account area that every small web application of those years had, in a slate theme of the kind the theme galleries offered: gunmetal grey surfaces, bars and buttons with a short vertical gradient, a light blue primary colour, white inputs and small bold controls. It is the glossy 2012 form of the look turned dark.\n\n## Layout\n\n- Narrow fixed width: a centred `.ds-container` of `--size-page` (900px) on a 1280px viewport; the top bar, the sign-in band and the footer strip span the window.\n- The top bar is `--size-nav` (48px) tall and scrolls away with the page. The brand is at the left; the links and one small button are pushed to the right. The current link is a plate between two hairlines.\n- Home page (signed out): the `.ds-signin` band across the window on `--color-surface-alt`, holding the centred `.ds-hero` column of `--size-signin` (360px): title, one line, the sign-in panel and a line of links. Under the band, in the container: the `.ds-stat` row of three status boxes and the `.ds-grid`, two by two.\n- Inner pages (signed in) use `.ds-account`: a `--size-sidebar` (200px) menu column at the left with the `.ds-user` card and the `.ds-sidebar` stack of pills, and the work at the right. The work starts with the `.ds-breadcrumb` strip and `.ds-page-header`; `.ds-tabs` go directly under the page header; then panels, tables and lists at full width, or a `.ds-row` with a narrower column of panels at the right.\n- Views. The specimen is the account area of a booking service for small studios, with five views. `home` is the sign-in page. `profile` is the tabbed details form with the open confirmation modal for deleting the account. `notifications` is two alerts over a list group of labelled rows with pagination, beside an email panel and an empty box. `billing` is three figures, the invoice table with its legend, and two panels. `help` is an article beside a panel of links.\n- Responsive: below 980px the links of the bar fold into the menu button at its right (`.ds-menu--nav`) and a `.ds-row` beside the account menu stacks its columns; below 760px the menu column moves above the work and its pills wrap into a row, the stat boxes and grid cells go to one column, a notification row puts its text under its label and time, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does. The fold is a `
` whose `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`); it opens the list of every view as a full row under the bar, and the current view's item has the same darker plate as a current bar link.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field), `--space-2` 10px (between adjacent controls, cell padding), `--space-3` 15px (panel padding, the page gutter), `--space-4` 20px (between stacked blocks, well padding), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (above the footer), `--space-7` 60px (the widest padding). Controls are padded by `--space-control-y` and `--space-control-x`.\n- Other sizes: `--size-tile` 64px (the colour square of a grid cell), `--size-icon` 32px, `--size-avatar` 40px, `--size-mark` 26px, `--size-dialog` 480px.\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- Three families. Text is a serif (`--font-body`: Georgia); headings are a heavier display serif (`--font-heading`: Playfair Display, falling back to Georgia); buttons, inputs, labels and navigation are a humanist sans-serif (`--font-ui`: Gill Sans, then Trebuchet MS). `--font-mono` is for code only.\n- Body is `--text-base` 15px at `--line-body` 1.6 in `--color-text`. Headings are bold: `--text-h1` 34px (post titles, page titles), `--text-h2` 25px, `--text-h3` 19px. `--text-display` 54px with `--display-tracking` -0.5px is the blog title only. `--text-large` 19px is the lead under a title; `--text-small` 12px is meta and labels; controls are `--text-ui` 14px.\n- Surfaces: a cream page (`--color-page`), near-white panels (`--color-surface`), `--color-surface-alt` for wells, stripes and the breadcrumb, `--color-surface-strong` for panel heading strips and placeholder pictures. Borders are 1px `--color-border`; `--border-width-strong` (3px) is the rule under the blog header, under a table head and beside the current sidebar link.\n- The bar is dark brown (`--color-bar`) with cream text. Orange is the primary colour: `--color-button`, `--color-accent`, and a darker `--color-link` for text. `--color-heading-alt` is a rust brown for small titles. `--color-fill-1` to `--color-fill-4` (brick, ochre, olive, slate blue) are the topic tiles and the comment squares.\n- Flat: no gradient, no text shadow, no shadow on panels or controls at rest; only the modal casts a soft shadow.\n- Text on fills, the convention every layout and token set of this era keeps:\n - on `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt` and `--color-surface-strong`: body text `--color-text`, headings `--color-heading`, small titles (panel strip, sidebar heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`. A token set keeps these five fills on one side, all light or all dark;\n - on the top bar (`--fill-bar`): `--color-bar-text` only. Hover and current items get a plate of `--color-bar-text` mixed into transparent at 9% and 18%, never a second colour;\n - on the secondary bar (`--fill-bar-alt`): `--color-bar-alt-text`; a link there inherits and is underlined;\n - on `--fill-inverse`: `--color-inverse-text`, with `opacity` for the quieter line;\n - on `--color-fill-1` to `--color-fill-4`, `--fill-accent`, `--color-accent-alt`, `--color-success`, `--color-warning` and `--color-danger` used as a fill: `--color-accent-text`;\n - on `--fill-button`: `--color-button-text`; on `--fill-button-secondary`: `--color-button-secondary-text`;\n - on `--color-notice`: `--color-notice-text`; on `--color-danger-surface`: `--color-danger`;\n - the grey count label is `--color-text-muted` with `--color-canvas` text.\n- Status colours: `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` (info) fill buttons and labels; mixed at 20% into `--color-surface` they tint the heading strip of a contextual panel, whose text stays `--color-heading`.\n- `--fill-button` is either the flat `--color-button` or a translucent gloss laid over it; status buttons reuse it with `background-color` set to their own colour. Button and brand tile borders are `--color-shadow`. Inputs and wells take `--shadow-control-pressed`; buttons and the brand tile take `--shadow-control`.\n- Links are not underlined at rest and underline on hover; footer links are underlined.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's bottom edge (`--color-bar-text` at 22% over `--color-bar`), bar plates (9% and 18%), the hovered secondary button (its text colour at 12% into its fill), contextual panel strips (20%) and their borders (45% into `--color-border`), notice borders (the text colour at 25% into the notice fill).\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, the text colour and `--fill-page`. `.ds-main` wraps the views and has no padding of its own: each view brings its `.ds-container`, and `.ds-container--inner` adds `--space-4` above an inner page.\n- `.ds-nav`: the bar across the top, on `--fill-bar`, not fixed. `.ds-nav__inner` holds the `.ds-brand` at the left, then `.ds-nav__links` pushed to the right with full-height `.ds-nav__link` items (a count label may follow the text; current: `is-current`, an 18% plate between two hairlines) and `.ds-nav__aside` for one small button. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-signin`: the grey band across the window that holds the sign-in column.\n- `.ds-hero`: the centred sign-in column: `.ds-hero__title` (`--text-display`), a grey `.ds-hero__lead`, then `.ds-hero__panel` (bordered, `--radius-page`, `--shadow-dialog`) holding the form with the main action as a large block button, and a small `.ds-hero__note` of links. One per site, on the signed-out home page.\n- `.ds-stat`: the row of summary figures, here three boxes. `.ds-stat` is the row; each `.ds-stat__item` is a panel-like box with a `--border-width-strong` top edge in `--color-accent` (`--success`, `--warning` for the other colours) holding a `.ds-stat__figure` (`--text-h1`), a `.ds-stat__label` and a small grey `.ds-stat__note`. `.ds-progress` with `.ds-progress__bar` (`--60`, `--80` for the width) is a bar in an inset track, for a quota.\n- `.ds-grid`: cells two by two. Each `.ds-grid__cell` is a bordered box holding a square `.ds-grid__tile` (`--color-fill-1`; `--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon`, beside a `.ds-grid__caption` with `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-account`: the frame of a signed-in page: `.ds-account__menu` at the left and `.ds-account__main` at the right. `.ds-user` is the card at the top of the menu: a round `.ds-avatar` with an initial, `.ds-user__name` and `.ds-user__meta`.\n- `.ds-sidebar`: stacked pills without a box: small bold grey `.ds-sidebar__title` headings, each over a `.ds-sidebar__list` of `.ds-sidebar__link` pills with `--radius-control`; `is-current` is filled with `--fill-accent`. `.ds-sidebar__count` floats a label to the right of a pill.\n- `.ds-list--group`: the list as a bordered box of padded rows, for notifications: each `.ds-list__item` is a `.ds-list__label` column holding a label, a `.ds-list__body` with the title and meta, and a `.ds-list__time` at the right; `is-unread` tints the row and gives it a `--color-accent` edge.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side. `.ds-row` lays `.ds-col` columns side by side with a `--space-5` gutter; `.ds-col--wide` takes two shares, `.ds-col--side` is `--size-sidebar` wide, `.ds-col--stack` stacks blocks `--space-4` apart and `.ds-grow` on its last block makes both columns end on one line (with `.ds-row--level`); `.ds-row--flush` drops the bottom margin. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small`; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block; `.ds-nowrap` keeps a date on one line; `.ds-rule` is a faint horizontal rule.\n- `.ds-well`: the inset box (`--color-surface-alt`, faint border, `--shadow-control-pressed`) for an aside. `.ds-figure` is a placeholder picture with its size written on it (`--tall` doubles the height); replace it with a real picture. `.ds-code` is a block of code.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.ds-brand__mark` is a `--size-mark` tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-shadow` border, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-large` in `--color-bar-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` (`--text-h1`) and one grey `.ds-page-header__text` line at `--text-large`, `.ds-page-header__actions` at the right, a faint rule under it all. It follows the breadcrumb.\n- `.ds-prose`: running text: h1, h2, h3 (in `--color-heading-alt`), p, lists, `strong`, and inline `code` in `--color-danger` on a faint chip. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover` (darker and underlined), `is-active`, `is-focus`. `--quiet` is grey for meta. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the primary button on `--fill-button` with a translucent dark border and `--radius-control`. Variants: `--secondary` (the pale default button; the usual choice), `--danger` (destructive), `--success`, `--warning`, `--info`, `--large`, `--small`, `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-2` apart; `.ds-buttongroup` joins small buttons into one strip.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps a bold `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea` (`.ds-form__input--small` in bars). Error: `is-error` on the field and the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the grey strip that closes a form inside a panel; `--flush` removes the gap when the form wraps a panel body and its action strip.\n- `.ds-table`: striped data table: a rule above every row, odd rows on `--color-surface-alt`, a `--border-width-strong` rule under the bold head. `--bordered` adds the outer box and vertical rules. `.ds-table__num` right-aligns numbers; `.ds-table__actions` is a right-aligned cell for buttons. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it for the pagination and a legend.\n- `.ds-list`: rows divided by faint rules. `.ds-list__item` holds a bold link `.ds-list__title`, `.ds-list__text` and small grey `.ds-list__meta`.\n- `.ds-panel`: bordered box with `--radius-panel` and `--shadow-panel`: a tinted `.ds-panel__title` strip (a label may float right in it), `.ds-panel__body`, optional grey `.ds-panel__foot`. Contextual variants colour the strip and the border: `--primary`, `--success`, `--warning`, `--danger`, `--info`.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides, `--color-canvas` behind it and body-coloured text. A count label may follow the text.\n- `.ds-badge`: the small bold label on `--fill-accent` with `--radius-pill`. Variants: `--info`, `--success`, `--warning`, `--danger`, all with `--color-accent-text`; `--quiet` is the grey count. `.ds-badgerow` for several.\n- `.ds-notice`: the alert: a tinted box (`--color-notice`, `--color-notice-text`) with a 1px border of the same hue; `--error` uses `--color-danger-surface` and `--color-danger`. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined bordered boxes of `.ds-pagination__link`; `is-current` is filled with `--fill-accent`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a grey rounded strip of `.ds-breadcrumb__item` separated by slashes; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: the modal, shown open: a `--color-overlay` backdrop block centring `.ds-dialog__box` (bordered, `--radius-page`, `--shadow-dialog`) with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the confirming button last.\n- `.ds-empty`: a centred message in a well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one `.ds-button--secondary`. It stands where a list would be.\n- `.ds-footer`: a full-width strip on `--fill-bar-alt` with a top rule: `.ds-footer__inner` centres one small line, `.ds-footer__text` followed by underlined `.ds-footer__link` in `.ds-footer__links`.\n\n- `.ds-menu`: a drop-down under a navigation item. The list item carries `.ds-menu`, its link `.ds-nav__link.ds-menu__toggle` (which adds the small caret), and the list `.ds-menu__list` of `.ds-menu__item` links with `.ds-menu__divider` rules between groups; `.ds-menu--end` hangs the list from the right edge of its item. It opens on hover and on keyboard focus (`.is-open` shows it statically) as a sheet on `--fill-panel` hanging from the bar, with the accent fill on the hovered item. `.ds-menu--nav` is the same component as the bar's fold: a `
` whose `.ds-menu__toggle` is the bordered button with three `.ds-menu__bars`; below 980px the row of links is hidden and this button opens them as a stack inside the bar, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation. A `
` placed in the bar after the links; hidden above 980px, where `.ds-nav__links` shows. Its `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`), and the list opens in the flow as a full row under the bar, one `.ds-menu__item` per view (a divider and the call to action may follow), the current one on a darker plate.\n- `.ds-accordion`: stacked groups for questions and settings that open one at a time. Each group is a `
` with a `.ds-accordion__head` summary (the panel title strip with a small triangle) and a `.ds-accordion__body`. Give the groups one `name` so that opening one closes the others.\n- `.ds-tooltip`: a hint on hover or focus. The trigger carries `.ds-tooltip` and `tabindex=\"0\"` and holds a `.ds-tooltip__tip`: a small bubble in `--color-inverse` with `--color-inverse-text` and an arrow, above the trigger. `.ds-tooltip--start` aligns the bubble with the trigger's left edge and `.ds-tooltip--end` with its right edge (use them near the edges of a column, so that the bubble stays inside a narrow window), `.ds-tooltip--plain` drops the underline for a badge or button, `.is-open` shows it statically.\n- `.ds-switch`: the sliding on and off control of the period, drawn over a checkbox: a label holding `.ds-switch__input`, the `.ds-switch__track` (it writes ON on the primary button fill or OFF on the disabled fill beside a pale handle) and the `.ds-switch__label`. Use it for a setting that takes effect at once; keep `.ds-form__check` for a box that is sent with a form.\n- `.ds-avatar`: a person's initial on a `--color-fill-1` disc with `--color-accent-text`, `--size-avatar` wide (`--2` to `--4` take the other fills; `--small` is the size of the mark, for a name in a list). It heads the `.ds-user` card.\n\n## Never\n\n- `content-width <= 900px`: content stays in the narrow centred container.\n- `font-families <= 4`: a serif for text, a display serif for headings, a sans-serif for controls, monospace for code.\n- `font-size >= 12px`: meta text and labels are the smallest.\n- `font-size <= 54px`: the blog title is the largest text.\n- `line-height <= 1.6`: body text is set at 24px on 15px, no looser.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 20%`: links are underlined only on hover and in the footer.\n- `text-shadow = none`: text is flat on every fill.\n- `border-width <= 4px`: borders are 1px; 4px only under a table head and above a total.\n- `border-radius <= 12px`: labels are rounded to 12px, controls and boxes to 6px, the carousel and the modal to 8px.\n- `box-shadow-blur <= 24px`: only the modal casts a soft shadow; controls stand on a solid lip.\n- `animation = none`: nothing moves on its own; the carousel is drawn still.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new box is a `.ds-panel` (border, heading strip, body) or a `.ds-well`; a new action is a `.ds-button`, pale `--secondary` unless it is the one main action of the view; a new status is one of the four status colours with `--color-accent-text` on it. Lay new content out in a `.ds-row` of `.ds-col` columns. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the largest blocks and the dialog `--radius-page`. Spacing comes from the `--space-*` scale; any one-off shade is a `color-mix()` of tokens, noted next to the rule. Keep to the text-on-fill convention above, so that the component still reads with another palette of the era.\n", "components.css": ":root {\n --size-page: 900px;\n --size-nav: 48px;\n --size-mark: 26px;\n --size-signin: 360px;\n --size-sidebar: 200px;\n --size-tile: 64px;\n --size-icon: 32px;\n --size-avatar: 40px;\n --size-dialog: 480px;\n --space-control-y: 6px;\n --space-control-x: 12px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n}\n\n/* shell */\n.ds-page {\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/* container, rows and columns: the fixed centred column and its equal columns */\n.ds-container {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n}\n.ds-row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.ds-row--level {\n align-items: stretch;\n}\n.ds-row--flush {\n margin-bottom: 0;\n}\n.ds-col {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-col--wide {\n flex: 2 1 0;\n}\n.ds-col--side {\n flex: 0 0 var(--size-sidebar);\n}\n.ds-col--stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-col--stack > .ds-grow {\n flex: 1 0 auto;\n}\n.ds-col__text {\n margin: 0 0 var(--space-3);\n}\n.ds-rule {\n height: 0;\n margin: var(--space-5) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-title {\n margin: 0 0 var(--space-3);\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.ds-title--small {\n font-size: var(--text-h3);\n}\n.ds-title__small {\n color: var(--color-text-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n}\n.ds-lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-muted {\n color: var(--color-text-muted);\n}\n\n/* well: an inset grey box */\n.ds-well {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-well > :last-child {\n margin-bottom: 0;\n}\n\n/* code block */\n.ds-code {\n display: block;\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n overflow-x: auto;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n}\n\n/* placeholder picture: a grey block with its size written on it */\n.ds-figure {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-tile);\n padding: var(--space-3);\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: var(--radius-panel);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n}\n\n/* brand: the mark on a button-like tile, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-right: var(--space-2);\n color: var(--color-bar-text);\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-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 76%;\n height: 76%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\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-2);\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 font-size: var(--text-h2);\n margin-top: var(--space-4);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n margin-top: var(--space-4);\n color: var(--color-heading-alt);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-2);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-2);\n padding-left: var(--space-4);\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-surface-alt);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\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}\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-link-hover);\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\n\n/* buttons: the primary fill, a pale default, and four status colours */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\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-body);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n vertical-align: middle;\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 background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\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 text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)), color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)));\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: var(--fill-button);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--warning {\n background: var(--fill-button);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info {\n background: var(--fill-button);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success:hover,\n.ds-button--success.is-hover,\n.ds-button--success:active,\n.ds-button--success.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--warning:hover,\n.ds-button--warning.is-hover,\n.ds-button--warning:active,\n.ds-button--warning.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info:hover,\n.ds-button--info.is-hover,\n.ds-button--info:active,\n.ds-button--info.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-page);\n font-size: var(--text-large);\n}\n.ds-button--small {\n padding: calc(var(--space-control-y) / 3) var(--space-2);\n font-size: var(--text-small);\n}\n.ds-button--block {\n display: block;\n width: 100%;\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);\n box-shadow: none;\n text-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.ds-buttongroup {\n display: inline-flex;\n vertical-align: middle;\n}\n.ds-buttongroup > .ds-button {\n border-radius: 0;\n}\n.ds-buttongroup > .ds-button + .ds-button {\n margin-left: calc(var(--border-width) * -1);\n}\n.ds-buttongroup > .ds-button:first-child {\n border-top-left-radius: var(--radius-control);\n border-bottom-left-radius: var(--radius-control);\n}\n.ds-buttongroup > .ds-button:last-child {\n border-top-right-radius: var(--radius-control);\n border-bottom-right-radius: var(--radius-control);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form--flush {\n gap: 0;\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-3);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\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 box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__input--small {\n padding: calc(var(--space-control-y) / 2) var(--space-2);\n}\n.ds-form__textarea {\n min-height: var(--space-7);\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: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}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__field.is-error .ds-form__label {\n 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: baseline;\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 margin-top: var(--space-1);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n\n/* table: striped rows, a rule above every row, a strong rule under the head */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2);\n text-align: left;\n vertical-align: middle;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n color: var(--color-heading);\n border-top: 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n vertical-align: bottom;\n}\n.ds-table tbody th {\n font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(odd) td,\n.ds-table tbody tr:nth-child(odd) th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__actions {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table--bordered {\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table--bordered th,\n.ds-table--bordered td {\n border-left: var(--border-width) var(--border-style) var(--color-border);\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 margin-top: var(--space-3);\n}\n\n/* list: media rows divided by faint rules */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n display: block;\n margin: 0;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a bordered box with a tinted heading strip */\n.ds-panel {\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__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-panel__title .ds-badge {\n float: right;\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__foot {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n font-size: var(--text-small);\n}\n.ds-panel--danger {\n border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));\n}\n.ds-panel--danger > .ds-panel__title {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));\n}\n.ds-panel--info {\n border-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel--info > .ds-panel__title {\n background: color-mix(in srgb, var(--color-accent-alt) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel.ds-grow {\n display: flex;\n flex-direction: column;\n}\n.ds-panel.ds-grow > .ds-panel__body {\n flex: 1 0 auto;\n}\n\n/* tabs: boxed tabs standing on a rule */\n.ds-tabs {\n display: flex;\n gap: var(--border-width-strong);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\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 background: var(--color-surface-strong);\n border-color: var(--color-surface-strong) var(--color-surface-strong) var(--color-border);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border) var(--color-border) var(--color-canvas);\n}\n.ds-tabs__tab .ds-badge {\n margin-left: var(--space-1);\n}\n\n/* badge: the small label; status colours and a count */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-1);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\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-shadow: var(--shadow-text);\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-text-muted);\n color: var(--color-canvas);\n text-shadow: none;\n}\n.ds-badge--info {\n background: var(--color-accent-alt);\n}\n.ds-badge--success {\n background: var(--color-success);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n}\n\n/* notice: the tinted alert box */\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-3);\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) 25%, var(--color-notice));\n border-radius: var(--radius-panel);\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) 25%, var(--color-danger-surface));\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 margin-bottom: var(--space-4);\n}\n\n/* pagination: joined boxes */\n.ds-pagination {\n display: inline-flex;\n flex-wrap: wrap;\n max-width: 100%;\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-pagination > li:first-child .ds-pagination__link {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-pagination > li:last-child .ds-pagination__link {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a grey strip with slashes */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: var(--space-2) var(--space-3);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-radius: var(--radius-panel);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-1);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text-muted);\n}\n\n/* dialog: the modal, shown open on its backdrop */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-3);\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: var(--fill-panel);\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 padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog__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-dialog__close {\n color: var(--color-text-muted);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-h3) * 0.6);\n height: calc(var(--text-h3) * 0.6);\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-3);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--color-surface-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)) calc(var(--radius-page) - var(--border-width));\n}\n\n/* empty state: a well with a message and one button */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* spacing helper: a block that is followed by another */\n.ds-page .ds-spaced {\n margin-bottom: var(--space-4);\n}\n\n/* page header: title with a rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding-bottom: var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\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}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* helper: text that must stay on one line */\n.ds-nowrap {\n white-space: nowrap;\n}\n\n/* nav: a bar that scrolls away: the brand at the left, the links and the account at the right */\n.ds-nav {\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n align-items: stretch;\n gap: var(--space-3);\n}\n.ds-nav__links {\n display: flex;\n align-items: stretch;\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links > li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n color: var(--color-bar-text);\n border-left: var(--border-width) var(--border-style) transparent;\n border-right: var(--border-width) var(--border-style) transparent;\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 transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n}\n.ds-nav__link.is-current {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n border-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* the current view marks its navigation item: a plate between two hairlines */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:not(:has(.ds-view:target)) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"],\n.ds-page:has(#profile:target) .ds-menu--nav .ds-menu__item[href=\"#profile\"],\n.ds-page:has(#notifications:target) .ds-nav__link[href=\"#notifications\"],\n.ds-page:has(#notifications:target) .ds-menu--nav .ds-menu__item[href=\"#notifications\"],\n.ds-page:has(#billing:target) .ds-nav__link[href=\"#billing\"],\n.ds-page:has(#billing:target) .ds-menu--nav .ds-menu__item[href=\"#billing\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"],\n.ds-page:has(#help:target) .ds-menu--nav .ds-menu__item[href=\"#help\"] {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n border-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* main: views bring their own containers; the sign-in band runs to the window edges */\n.ds-main {\n padding-top: 0;\n}\n.ds-container--inner {\n padding-top: var(--space-4);\n}\n\n/* sign-in band: the grey strip across the window that holds the centred sign-in column */\n.ds-signin {\n margin-bottom: var(--space-5);\n padding: var(--space-6) var(--space-3);\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* hero: the centred sign-in column: a title, one line, then the sign-in panel with the main action */\n.ds-hero {\n max-width: var(--size-signin);\n margin: 0 auto;\n text-align: center;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-1);\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}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__panel {\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: three boxes with a strong coloured edge along the top */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n min-width: 0;\n padding: var(--space-3);\n background: 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-accent);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__item--success {\n border-top-color: var(--color-success);\n}\n.ds-stat__item--warning {\n border-top-color: var(--color-warning);\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text);\n}\n.ds-stat__note {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* progress: a bar in an inset track */\n.ds-progress {\n height: var(--space-2);\n margin: var(--space-2) 0 0;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n overflow: hidden;\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n}\n.ds-progress__bar--80 {\n width: 80%;\n}\n\n/* grid: two by two; each cell a colour square beside a title, a line and a link */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n min-width: 0;\n padding: var(--space-3);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-tile);\n height: var(--size-tile);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-control);\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__caption {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-grid__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-grid__text {\n margin: 0 0 var(--space-1);\n}\n\n/* account: the pill menu at the left of every signed-in page, the work at the right */\n.ds-account {\n display: flex;\n align-items: stretch;\n gap: var(--space-5);\n}\n.ds-account__menu {\n display: flex;\n flex: 0 0 var(--size-sidebar);\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-account__main {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* user: who is signed in, at the top of the menu column */\n.ds-user {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-avatar {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: 50%;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-shadow: none;\n vertical-align: middle;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n}\n.ds-avatar--small {\n width: var(--size-mark);\n height: var(--size-mark);\n font-size: var(--text-small);\n}\n.ds-user__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-user__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* sidebar: stacked pills, no box; the current pill is filled */\n.ds-sidebar {\n padding: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-1);\n padding: 0 var(--space-control-x);\n color: var(--color-text-muted);\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}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: calc(var(--border-width) * 2);\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list:last-child {\n margin-bottom: 0;\n}\n.ds-sidebar__link {\n display: block;\n padding: var(--space-control-y) var(--space-control-x);\n color: var(--color-link);\n border-radius: var(--radius-control);\n font-family: var(--font-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-surface-strong);\n}\n.ds-sidebar__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__count {\n float: right;\n}\n\n/* list group: the notification list as a bordered box of rows; an unread row is tinted and edged */\n.ds-list--group {\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--group > .ds-list__item,\n.ds-list--group > .ds-list__item:first-child,\n.ds-list--group > .ds-list__item:last-child {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-list--group > .ds-list__item.is-unread {\n background: var(--color-surface-alt);\n border-left-color: var(--color-accent);\n}\n.ds-list__label {\n flex: 0 0 var(--size-tile);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__time {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* footer: a centred strip */\n.ds-footer {\n margin-top: var(--space-6);\n padding: var(--space-4) 0;\n background-color: var(--color-bar-alt);\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-size: var(--text-small);\n}\n.ds-footer__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-1) var(--space-4);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n\n/* menu: a drop-down under a navigation item, open on hover or keyboard focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-1) solid transparent;\n border-right: var(--space-1) solid transparent;\n border-top: var(--space-1) solid currentColor;\n vertical-align: calc(var(--space-1) / 2);\n margin-left: var(--space-1);\n opacity: 0.7;\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: calc(var(--size-icon) * 4);\n margin: 0;\n padding: var(--space-1) 0;\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:has(:focus-visible) > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-1) 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-body);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu--end > .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-menu__divider {\n height: 0;\n margin: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* menu in the bar: on a narrow window the links fold away behind a button with three bars */\n.ds-menu--nav {\n display: none;\n position: static;\n}\n.ds-menu--nav > .ds-menu__toggle {\n position: absolute;\n top: var(--space-1);\n right: var(--space-3);\n display: flex;\n align-items: center;\n justify-content: center;\n height: calc(var(--size-nav) - var(--space-2));\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n border-radius: var(--radius-control);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu--nav > .ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu--nav > .ds-menu__toggle::after {\n content: none;\n}\n.ds-menu--nav > .ds-menu__toggle:hover,\n.ds-menu--nav[open] > .ds-menu__toggle {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-menu--nav > .ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__bars {\n display: block;\n width: var(--space-4);\n height: calc(var(--space-2) + var(--border-width-strong) * 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu__bars::before {\n content: \"\";\n display: block;\n margin-top: calc((var(--space-2) - var(--border-width-strong)) / 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu--nav > .ds-menu__list {\n display: block;\n position: static;\n min-width: 0;\n padding: var(--space-1) 0 var(--space-2);\n background: transparent;\n border: 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n border-radius: 0;\n box-shadow: none;\n}\n.ds-menu--nav .ds-menu__item {\n padding: var(--space-2) var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: normal;\n}\n.ds-menu--nav .ds-menu__item:hover,\n.ds-menu--nav .ds-menu__item.is-hover,\n.ds-menu--nav .ds-menu__item:focus-visible {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n color: var(--color-bar-text);\n}\n.ds-menu--nav .ds-menu__divider {\n border-top-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* accordion: stacked groups, each a heading that opens its body */\n.ds-accordion {\n margin: 0 0 var(--space-4);\n}\n.ds-accordion__item {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__item + .ds-accordion__item {\n margin-top: var(--space-1);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: calc(var(--radius-panel) - var(--border-width));\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::before {\n content: \"\";\n display: inline-block;\n width: 0;\n height: 0;\n margin-right: calc(var(--space-3) - var(--space-1) * 1.2);\n border-top: var(--space-1) solid transparent;\n border-bottom: var(--space-1) solid transparent;\n border-left: calc(var(--space-1) * 1.2) solid currentColor;\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-accordion__item[open] > .ds-accordion__head::before {\n rotate: 90deg;\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n text-decoration: underline;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: var(--space-3);\n}\n.ds-accordion__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-accordion__body > :last-child {\n margin-bottom: 0;\n}\n\n/* tooltip: a small inverted bubble above its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip--plain {\n border-bottom: 0;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 30;\n width: max-content;\n max-width: var(--size-sidebar);\n padding: var(--space-1) var(--space-2);\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 letter-spacing: 0;\n text-align: center;\n text-shadow: none;\n text-transform: none;\n white-space: normal;\n transform: translateX(-50%);\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--space-2);\n height: var(--space-2);\n margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);\n background: var(--color-inverse);\n transform: rotate(45deg);\n}\n.ds-tooltip--start > .ds-tooltip__tip {\n left: 0;\n transform: none;\n}\n.ds-tooltip--start > .ds-tooltip__tip::after {\n left: var(--space-4);\n}\n.ds-tooltip--end > .ds-tooltip__tip {\n right: 0;\n left: auto;\n transform: none;\n}\n.ds-tooltip--end > .ds-tooltip__tip::after {\n right: var(--space-4);\n left: auto;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .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}\n\n/* switch: the sliding on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-7) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"OFF\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50%;\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 50%;\n background: var(--fill-button-secondary);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: calc(var(--radius-control) - var(--border-width)) 0 0 calc(var(--radius-control) - var(--border-width));\n box-shadow: var(--shadow-control);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-switch__input:checked + .ds-switch__track::before {\n content: \"ON\";\n right: auto;\n left: 0;\n text-shadow: var(--shadow-text);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n right: 0;\n left: auto;\n border-right: 0;\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 calc(var(--radius-control) - var(--border-width)) calc(var(--radius-control) - var(--border-width)) 0;\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__input:disabled + .ds-switch__track {\n opacity: 0.6;\n}\n.ds-switch__label {\n flex: 1 1 0;\n min-width: 0;\n}\n\n.ds-title--gap {\n margin-top: var(--space-4);\n}\n\n/* medium windows: the links of the bar fold into the menu button */\n@media (max-width: 980px) {\n .ds-nav {\n position: static;\n }\n .ds-nav__inner {\n position: relative;\n flex-wrap: wrap;\n gap: 0 var(--space-2);\n }\n .ds-nav__links {\n display: none;\n }\n .ds-brand {\n min-height: var(--size-nav);\n }\n .ds-nav__aside {\n min-height: var(--size-nav);\n margin-right: calc(var(--space-6) + var(--space-3));\n }\n .ds-menu--nav {\n display: block;\n flex: 0 0 100%;\n order: 9;\n }\n /* beside the account menu there is no room for two columns: they stack */\n .ds-account__main .ds-row {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-account__main .ds-col {\n flex: 0 0 auto;\n }\n}\n\n/* narrow windows: the pill menu becomes a wrapped row, columns stack */\n@media (max-width: 760px) {\n .ds-nav__aside {\n margin-left: auto;\n }\n .ds-signin {\n padding: var(--space-4) var(--space-3);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n letter-spacing: 0;\n }\n .ds-row,\n .ds-account {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-col,\n .ds-col--wide,\n .ds-col--side,\n .ds-account__menu,\n .ds-account__main {\n flex: 0 0 auto;\n }\n .ds-sidebar__list {\n flex-direction: row;\n flex-wrap: wrap;\n margin-bottom: var(--space-2);\n }\n .ds-sidebar__count {\n float: none;\n margin-right: var(--space-1);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-stat,\n .ds-grid {\n grid-template-columns: 1fr;\n gap: var(--space-3);\n }\n .ds-list--group > .ds-list__item,\n .ds-list--group > .ds-list__item:first-child,\n .ds-list--group > .ds-list__item:last-child {\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-2);\n }\n .ds-list__label {\n flex: 0 0 auto;\n }\n .ds-list__body {\n order: 3;\n flex: 0 0 100%;\n }\n .ds-list__time {\n margin-left: auto;\n }\n .ds-tabs {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ds-table {\n min-width: 60ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-2);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-pagination {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: framework default account area specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Create account\n
\n
\n \n \n
\n
\n
\n\n
\n\n
\n
\n
\n

Sign in

\n

One account for your studio's bookings, invoices and team.

\n
\n
\n \n \n \n Sign in\n Email me a sign-in link\n
\n
\n

Forgotten your password? New here? Create an account

\n
\n
\n\n
\n
    \n
  • 99.98%uptime in the last 90 daysSigning in and the account pages. Planned maintenance is not counted.All systems normal OK
    • \n
  • 2,140studios signed in this weekBusiest on Monday at 9:00
    • \n
  • 40 minof planned maintenanceSunday 6 April, from 6:00 Planned
    • \n
\n\n

Once you are in four places you will use

\n
\n
\n
\n
\n

Profile

\n

Your name, email address, password and the devices you are signed in on.

\n Open your profile\n
\n
\n
\n
\n
\n

Notifications

\n

Everything that happened while you were away, and what reaches you by email.

\n See what is new\n
\n
\n
\n
\n
\n

Billing

\n

Your plan, the card on file and every invoice since you joined.

\n Go to billing\n
\n
\n
\n
\n
\n

Help

\n

Short answers about signing in, access tokens and closing an account.

\n Read the answers\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", "style.json": "{\n \"id\": \"v1.bootstrap-era.app.s06.p06.t04.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bs-6645\",\n \"short\": \"v1-bs-6645\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #272b30;\n --color-canvas: #272b30;\n --color-surface: #2e3338;\n --color-surface-alt: #353a41;\n --color-surface-strong: #3e444c;\n --color-bar: #484e55;\n --color-bar-text: #d3d7db;\n --color-bar-alt: #202328;\n --color-bar-alt-text: #9aa0a6;\n --color-inverse: #e8eaed;\n --color-inverse-text: #272b30;\n --color-text: #c8c8c8;\n --color-text-muted: #8d949b;\n --color-heading: #ffffff;\n --color-heading-alt: #a9d8ea;\n --color-link: #5bc0de;\n --color-link-quiet: #8d949b;\n --color-link-visited: #5bc0de;\n --color-link-hover: #9adcf0;\n --color-link-active: #3aa6c8;\n --color-border: #1c1e22;\n --color-border-strong: #52575c;\n --color-border-muted: #3a3f45;\n --color-accent: #3fb0d4;\n --color-accent-text: #ffffff;\n --color-accent-alt: #7c93c9;\n --color-fill-1: #3a8fb0;\n --color-fill-2: #4f9d4f;\n --color-fill-3: #c98a2b;\n --color-fill-4: #b65a56;\n --color-button: #3fb0d4;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #52575c;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #3a3f44;\n --color-input-border: #1c1e22;\n --color-disabled: #32373c;\n --color-disabled-text: #6c737a;\n --color-danger: #ee5f5b;\n --color-danger-surface: #4a2c2e;\n --color-success: #62c462;\n --color-warning: #f89406;\n --color-notice: #2f4650;\n --color-notice-text: #a9d8ea;\n --color-focus: #9adcf0;\n --color-shadow: rgb(0 0 0 / 0.4);\n --color-overlay: rgb(0 0 0 / 0.65);\n}\n\n/* @part type */\n:root {\n --font-body: Georgia, \"Times New Roman\", Times, serif;\n --font-heading: \"Playfair Display\", Georgia, \"Times New Roman\", serif;\n --font-ui: \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 54px;\n --text-h1: 34px;\n --text-h2: 25px;\n --text-h3: 19px;\n --line-body: 1.6;\n --line-heading: 1.2;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 6px;\n --radius-panel: 6px;\n --radius-pill: 12px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 3px var(--color-shadow);\n --shadow-control: 0 2px 0 var(--color-shadow);\n --shadow-control-hover: 0 3px 0 var(--color-shadow);\n --shadow-control-pressed: inset 0 2px 0 var(--color-shadow);\n --shadow-dialog: 0 8px 24px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(var(--color-accent) 4px, var(--color-bar) 4px);\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: linear-gradient(color-mix(in srgb, white 14%, transparent), color-mix(in srgb, white 14%, transparent)), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }