{ "id": "v1-nm-5455-dr", "long_id": "v1.neumorphism.app.s05.p04.t05.u05.dr", "name": "Neumorphism wallet", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "density": "roomy", "summary": "Neumorphism, also called soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. Its best known showpieces were banking and wallet apps: a balance card, a row of round keys, a list of payments, a drawn card. This pack is that app on a periwinkle surface with one magenta accent: a raised shelf across the window, a wallet column that stays at the left on every page, pill-shaped keys and a rounded display face over a plain humanist sans.", "url": "https://chrono.skin/s/v1-nm-5455-dr", "preview_url": "https://chrono.skin/s/v1-nm-5455-dr/specimen.html", "files": { "STYLE.md": "# Neumorphism wallet\n\n## Summary\n\nNeumorphism, also called soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. Its best known showpieces were banking and wallet apps: a balance card, a row of round keys, a list of payments, a drawn card. This pack is that app on a periwinkle surface with one magenta accent: a raised shelf across the window, a wallet column that stays at the left on every page, pill-shaped keys and a rounded display face over a plain humanist sans.\n\n## Layout\n\n- Content column: `--size-page` (1280px), centred, with `--space-5` (24px) side padding and `--space-7` (48px) under the navigation shelf. The page does not stretch beyond it.\n- Navigation: `.ds-nav` is a full-width raised shelf `--size-bar` (72px) high, flush with the top edge. Inside the column: brand at the left, the section links after it, round keys (alerts, account) at the right. The current section is marked by a 4px bar in the accent on the lower edge of the shelf, not by a pressed or raised key.\n- Home page: `.ds-board`, three columns 32px apart that start at the same height. The wallet column, `--size-wallet` (360px): the `.ds-hero` balance card, the `.ds-keys` row of round keys, the drawn `.ds-card`. The activity column takes the rest (about 576px): the `.ds-stat` wells, the notices, the `.ds-list` of payments. The accounts column, `--size-side` (280px): the `.ds-sidebar` and the `.ds-grid` of pots. Each column is a `.ds-page__stack` at 32px gaps; keep the three about equally long.\n- Inner pages have no hero. On the bare page come the `.ds-breadcrumb` and, 8px below it, the `.ds-page-header` (title at `--text-h1` with one muted line at the left, actions at the right). Then `.ds-split`: the wallet column stays at the left, 360px wide, and now holds context for the page (a drawn card, a panel of facts or meters, an empty state), and the working column at the right holds the page's work. A list page stacks the `.ds-tabs` groove across the full working column, the `.ds-table` and the `.ds-pagination`. A form page puts the form in one `.ds-panel`, pairs of short fields side by side with `.ds-form__row`. A text page puts the prose in one `.ds-panel`. `.ds-page__row` splits the working column in two equal halves (a panel beside the dialog it opens).\n- Views. The specimen is one site with five views, each `
` inside `.ds-page__inner`; the shelf and the footer stand outside them and one view shows at a time. `overview` is the home view: balance card, keys and card, the month's figures, notices and latest payments, accounts and pots. `activity` is the list page: spending meters and the empty state of pending requests at the left, tabs, the table of payments and its pagination at the right. `send` is the form page: the paying account and its limits at the left, the transfer form at the right. `cards` is the card page: the card, its keys and its facts at the left, the switches beside the dialog that freezes the card, and the card's payments, at the right. `help` is the text page: fees in short at the left, the prose at the right. The shelf marks the link of the current view by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (dot to text, tab groove padding, the height of the navigation marker), `--space-2` 8px (label to control, key to its caption, breadcrumb to title), `--space-3` 12px (row padding in the list, icon to text, between pagination keys), `--space-4` 16px (between buttons, pot tile padding, list icon to text), `--space-5` 24px (panel padding, between form fields, between stat wells and pot tiles), `--space-6` 32px (every gutter between columns and between raised blocks, hero padding), `--space-7` 48px (under the shelf, dialog backdrop padding), `--space-8` 64px (above the footer).\n- Other sizes: `--size-key` 56px (round action key), `--size-chip` 40px (list initials well, card chip), `--size-card` 208px (least height of the drawn card), `--size-glyph` 22px (icon in a round key), `--size-dialog` 440px.\n- Raised blocks need room for their shadows: never closer than `--space-5`, and never a raised panel inside another. Inside a panel use wells, rules, meters and flat rows.\n- `--size-rule` (1px) is the weight of the rules between table and list rows; it stays when a surface part sets `--border-width` to 0.\n- Below 1100px the accounts column moves under the other two and lays its two blocks side by side. Below 800px every grid stacks into one column and the shelf becomes two lines: brand and round keys, then the links spread across the width. Below 560px the side padding drops to `--space-4`, gutters to `--space-5`, the balance takes `--text-h1`, form rows stack, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways. On a phone (560px and below) `.ds-nav__list` stays a row of links spread across the width under the brand and the round `.ds-nav__key` keys, the current link keeping its accent bar. In `.ds-nav__tools` a `.ds-menu` loses its caret (`.ds-menu__caret`) and its toggle shrinks to the avatar or icon.\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- Two families: `--font-heading` is a rounded geometric face (Quicksand, then Varela Round, Century Gothic and Trebuchet MS) for the brand, titles and every figure; `--font-body` and `--font-ui` are one humanist sans (Open Sans, then Segoe UI and Tahoma) for text, controls and labels. `--font-mono` is for code only.\n- Sizes: `--text-base` 15px, `--text-ui` 14px (buttons, inputs, navigation, table cells, notices, amounts), `--text-small` 12px (meta text, labels, badges, key captions), `--text-large` 18px (lead text, the card number), `--text-h3` 17px (panel and sidebar titles, pot figures), `--text-h2` 22px (stat figures, dialog title), `--text-h1` 30px (page title), `--text-display` 44px for the balance only.\n- Weights: `--weight-body` 400, `--weight-bold` and `--weight-ui` 600, `--weight-heading` and `--weight-display` 700. `--line-body` 1.5, `--line-heading` 1.35, `--line-display` 1.15.\n- Uppercase appears only on table head cells, written in the component. No tracking.\n- One surface: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-input` and `--color-button-secondary` are the same periwinkle (209 216 236). `--color-surface-alt` and `--color-notice` (216 224 240) are a step lighter, for hovered rows and links and for notices; `--color-surface-strong` (200 208 224) a step darker, for inline code, quiet and status badges and disabled controls.\n- The relief pair: `--color-shadow` (178 184 201) is the dark side and `--color-border-muted` (240 248 255, a bluish white) the light side of every shadow. `--color-border-muted` is used for nothing else.\n- Text is `--color-text` (50 48 52) with slate blue `--color-text-muted` and `--color-heading-alt` (53 64 104) for meta text, lead text, labels and panel titles; `--color-heading` (39 55 76) for titles and figures.\n- Each text token goes with its own fill and no other: `--color-bar-text` on `--fill-bar` (shelf, table head), `--color-bar-alt-text` on `--fill-bar-alt` (footer), `--color-inverse-text` on `--fill-inverse` (the drawn card, a code block), `--color-accent-text` on `--fill-accent` (count badge, current page), `--color-button-text` on `--fill-button` (primary button, brand key, the first round key), `--color-button-secondary-text` on `--fill-button-secondary` (secondary button, round keys, pagination keys, the current tab), `--color-input-text` on `--fill-input` (controls, stat wells, the tab groove, list initials, empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`, `--color-text` on `--color-surface-alt` and `--color-surface-strong`.\n- `--color-accent` and `--color-button` are one magenta (203 12 159) with white text: the navigation marker, meter bars, the count badge, the current page, switches that are on. `--color-link` is violet (121 40 202), turning magenta on hover; `--color-accent-alt` (blue, 33 82 255) only marks \"scheduled\" or \"new\" as a dot.\n- `--color-fill-1` to `--color-fill-4` (magenta, blue, green, slate) colour the chip and the bar of the four pot tiles and nothing else; no text is set on them.\n- Status: `--color-success` 23 173 55, `--color-warning` 233 130 12, `--color-danger` 234 6 6, as 8px dots; `--color-success` is also the text of an amount that came in, and `--color-danger` the text of errors and of the destructive button.\n- Surface: `--border-width` is 0; `--border-width-strong` (2px) is the focus and error ring. Controls are pills: `--radius-control` and `--radius-pill` 30px; panels are tighter, `--radius-panel` 16px, and the balance card, the drawn card and the dialog take `--radius-page` 24px. `--shadow-control` is 3px offset and 6px blur, `--shadow-control-hover` 6px and 12px, `--shadow-panel` 12px and 24px, `--shadow-control-pressed` 3px and 7px inset, `--shadow-dialog` a 20px offset 60px blur dark side with a 12px light side. Two fills are gradients running to the top left: `--fill-button` (the button colour from 20% darker to 14% lighter) and `--fill-inverse` (the inverse colour to 28% lighter); every other fill is flat. `--shadow-text` is `none`. Transitions run 0.25s.\n- One-off values with no token: discs use `border-radius: 50%`; the tab groove's radius is `--radius-control` plus `--space-1`; inline code uses half of `--radius-control`; a checkbox corner is a quarter of `--size-check` at most; navigation links that are not current, card labels and stat labels are set at opacity 0.7 to 0.8 of their own text token; placeholders are `--color-input-text` at opacity 0.55; the card chip is `--color-inverse-text` at opacity 0.4.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface colour and sets the base type. `.ds-page__inner` is the width container, `.ds-page__stack` a vertical stack at 32px gaps, `.ds-page__row` two equal columns, `.ds-page__icon` a 16px icon. `.ds-board` is the home view's three columns and `.ds-split` an inner view's two. `.ds-view` is one screen of the specimen (see Layout); an application that gives each page its own document does not need it.\n- `.ds-brand`: the site's mark and name, in the shelf, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 36px) dressed like the primary button (`--fill-button`, `--color-button-text` for the mark, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the full-width raised shelf. `.ds-nav__inner` is the row inside the column, `.ds-nav__list` and `.ds-nav__link` the section links; the current one is `is-current` and carries the accent bar; `is-hover` brings a link to full strength. `.ds-nav__tools` holds `.ds-nav__key`, round raised keys for alerts and the account.\n- `.ds-hero`: the balance card at the top of the wallet column, raised by the deepest shadow (`--shadow-dialog`): `.ds-hero__eyebrow` (account name and a status badge), `.ds-hero__title` (one line of greeting at `--text-h3`), `.ds-hero__figure` (the balance at `--text-display`), `.ds-hero__lead`, `.ds-hero__limit` with a `.ds-hero__limit-text` line over a `.ds-progress`, and `.ds-hero__actions` with one primary and one secondary button. Once per application, on the home view.\n- `.ds-progress`: a sunk groove with a `.ds-progress__bar` in the accent; `--quarter`, `--most` and `--full` set its length. Use it inside the hero or a panel (`.ds-panel__meters` stacks several, each under a `.ds-panel__meter-text` line).\n- `.ds-keys`: a row of up to four round action keys; each `.ds-keys__key` is a `.ds-keys__disc` (56px, raised, holding an icon) over a caption. `.ds-keys__key--primary` fills the first disc like a primary button; `is-hover` lifts a disc, `is-active` sinks it. Use it under a card for the things done most often.\n- `.ds-card`: a payment card drawn on `--fill-inverse`: `.ds-card__top` (label and `.ds-card__chip`), `.ds-card__number` (groups of digits, or an account name), `.ds-card__row` of `.ds-card__label` over `.ds-card__value` pairs. It stands in the wallet column, never inside a panel.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.ds-page-header__text` holds `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` sits at the right with at most one primary button. No fill or shadow of its own. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block on the inverted fill. Put prose inside a `.ds-panel`.\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 out a row of links.\n- `.ds-button`: primary, a 40px pill in the magenta gradient, raised by `--shadow-control`; `is-hover` lifts it and flattens the fill, `is-active` sinks it. `.ds-button--secondary` is the same pill in the surface colour. `.ds-button--danger` is the destructive action: a surface-coloured pill with `--color-danger` text; use it once, last in a group or as the confirming button of a dialog. `.ds-button--large` (52px). `disabled` or `is-disabled` is flat, with no shadow. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.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` icon), `.ds-form__range` (sunk track, raised accent thumb). `.ds-form__check` is a label row holding a `.ds-form__checkbox` (raised square, accent when checked) or a `.ds-switch` (sunk pill, raised thumb; accent fill when on). An invalid input takes `is-error`, which replaces its well with a 2px danger ring, and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons; `.ds-form__row` puts two fields side by side. Text controls are wells: they use `--shadow-control-pressed`.\n- `.ds-table`: data table as one raised sheet: small uppercase head, rows divided by a 1px rule, no stripes. `.ds-table__num` right-aligns a numeric column, `.ds-table__meta` is muted text, `.ds-table__opt` marks a column that is dropped on a phone, `is-hover` on a row lightens it.\n- `.ds-list`: the payments sheet, one raised panel. `.ds-list__head` is its title line with a link at the right. Each `.ds-list__item` holds a `.ds-list__icon` (a sunk disc with initials), a `.ds-list__body` (`.ds-list__title` and `.ds-list__meta`) and the `.ds-list__amount` at the right; `.ds-list__amount--in` colours money that came in. `.ds-list__dot` is a status dot; `--off` turns it red, `--new` takes the second accent.\n- `.ds-panel`: the basic raised card. `.ds-panel__title` is the title line, `.ds-panel__body` the padded content. `.ds-panel__facts` is a list of label and value rows, values right-aligned.\n- `.ds-grid`: the pots, two tiles a row. `.ds-grid__cell` is a small raised tile (`--shadow-control`, lifted by `is-hover`); `--1` to `--4` pick its colour from `--color-fill-*` for the `.ds-grid__chip` disc and the `.ds-grid__bar` inside the sunk `.ds-grid__track`; `.ds-grid__label` and `.ds-grid__value` between them.\n- `.ds-stat`: the row of three summary figures; each `.ds-stat__item` is a single figure in its own sunk well, a `.ds-stat__label` above a `.ds-stat__value` (22px, tabular figures) with a `.ds-stat__meta` line under it. Use it once, at the top of the activity column.\n- `.ds-tabs`: one sunk groove as wide as its column, with `.ds-tabs__tab` segments of equal width; the one with `is-current` is raised out of the groove. Use it to filter the list under it, not for site navigation.\n- `.ds-badge`: pill for counts, filled with the accent. `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`, for neutral counts. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: the raised accounts block of the right column: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link`, pressed in when `is-current`; `.ds-sidebar__sum` is a balance at the right end of a link.\n- `.ds-notice`: information notice sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` takes the danger surface and `--color-danger` text. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: row of raised 40px keys, `.ds-pagination__link`; the current page is `is-current`, flat and filled with the accent.\n- `.ds-breadcrumb`: small muted trail above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, at most 440px wide, raised by `--shadow-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: empty state as a sunk well: a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: full-width flat strip in `--fill-bar-alt` with small text; `.ds-footer__inner`, `.ds-footer__links`, `.ds-footer__link`.\n- `.ds-tooltip`: a hint on hover or focus. Wrap the trigger and follow it with `.ds-tooltip__tip` (`role=\"tooltip\"`), a small label in `--fill-inverse`; `--below` drops it under the trigger, `--end` lines it up with the trigger's right edge. Use it for an icon key or a short badge whose meaning needs a word; never force it open.\n- `.ds-avatar`: a person as initials on a raised disc (`.ds-avatar__pic`, `--size-avatar`, `--shadow-control`), with an optional `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. Use it wherever a person is named.\n- `.ds-accordion`: one raised sheet of `
` sections; `.ds-accordion__head` is the summary with a round `.ds-accordion__chevron` that is pressed while open, `.ds-accordion__body` the answer. Use it for questions and grouped settings in a side column.\n- `.ds-menu`: the account menu, a `
`: `.ds-menu__toggle` is a sunk well holding the `.ds-avatar` and a `.ds-menu__caret`, `.ds-menu__list` the raised list of `.ds-menu__link` items (`--danger` for signing out) that opens under it.\n\n## Never\n\n- `row-gap <= 5px`: rows of a table or list touch and are divided by a rule.\n- `block-gap <= 80px`: raised blocks sit 32px apart; 64px above the footer is the largest gap.\n- `content-width <= 1280px`: the column is capped.\n- `font-size <= 44px`: the balance is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: titles and figures are bold, never black.\n- `font-families <= 3`: a display face, a text face and one monospace for code.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: links are marked by colour and weight; underline is a hover state.\n- `uppercase-text <= 5%`: uppercase is for table heads only.\n- `border-width <= 2px`: there are no outlines; the only lines are 1px rules between rows and a 2px focus or error ring.\n- `border-radius <= 30px`: panels are 16px, the large cards 24px, controls 30px pills; only discs go higher.\n- `box-shadow-blur <= 60px`: controls blur 6px, panels 24px; only the balance card and the dialog reach 60px.\n- `text-shadow = none`: text is flat; only boxes have relief.\n- `gradient-fills <= 15%`: only primary keys and the drawn card are gradients.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first which column it belongs to: something about the money itself (a balance, a card, an account) goes in the wallet column and is a raised card of its own; something the user works through goes in the working column inside a `.ds-panel`. Then decide whether it is raised or sunk: a container that holds content is raised and starts from `.ds-panel` (fill, radius and `--shadow-panel` together); something the user fills in or that shows a state is sunk and starts from `.ds-form__input` or `.ds-stat__item` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`); something the user presses starts from `.ds-button--secondary`, or from `.ds-keys__disc` when it is an icon. Keep the fill equal to the surface behind it, since the shadows only read on the shared colour, and never draw a shadow in a raw colour. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to, and keep the accent to one small element per group.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1280px;\n --size-wallet: 360px;\n --size-side: 280px;\n --size-dialog: 440px;\n --size-bar: 72px;\n --size-control: 40px;\n --size-control-large: 52px;\n --size-key: 56px;\n --size-icon: 16px;\n --size-glyph: 22px;\n --size-dot: 8px;\n --size-chip: 40px;\n --size-thumb: 20px;\n --size-avatar: 36px;\n --size-track: 8px;\n --size-check: 20px;\n --size-card: 208px;\n --size-rule: 1px;\n --size-brand: 36px;\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 --space-8: 80px;\n}\n\n/* shell */\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-7) var(--space-5) 0;\n}\n/* a vertical stack of blocks, one step apart */\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n/* two equal columns inside the main column */\n.ds-page__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n\n/* board: the home view, three columns: wallet, activity, accounts */\n.ds-board {\n display: grid;\n grid-template-columns: var(--size-wallet) minmax(0, 1fr) var(--size-side);\n gap: var(--space-6);\n align-items: start;\n}\n/* split: an inner view, the wallet column kept at the left of the working column */\n.ds-split {\n display: grid;\n grid-template-columns: var(--size-wallet) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\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/* brand: the mark on a small raised key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\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: none;\n width: var(--size-brand);\n height: var(--size-brand);\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 width: var(--size-thumb);\n height: var(--size-thumb);\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 text-shadow: var(--shadow-text);\n}\n\n/* nav: a raised shelf across the whole window, the current section marked by an accent bar */\n.ds-nav {\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n min-height: var(--size-bar);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__list {\n display: flex;\n align-self: stretch;\n gap: var(--space-2);\n margin: 0 auto 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__list > li {\n display: flex;\n}\n.ds-nav__link {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0 var(--space-4);\n color: var(--color-bar-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: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n opacity: 0.72;\n transition: var(--transition);\n}\n.ds-nav__link::after {\n content: \"\";\n position: absolute;\n left: var(--space-4);\n right: var(--space-4);\n bottom: 0;\n height: var(--space-1);\n border-radius: var(--radius-pill) var(--radius-pill) 0 0;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#activity:target) .ds-nav__link[href=\"#activity\"],\n.ds-page:has(#send:target) .ds-nav__link[href=\"#send\"],\n.ds-page:has(#cards:target) .ds-nav__link[href=\"#cards\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n opacity: 1;\n}\n.ds-nav__link.is-current::after,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"]::after,\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"]::after,\n.ds-page:has(#activity:target) .ds-nav__link[href=\"#activity\"]::after,\n.ds-page:has(#send:target) .ds-nav__link[href=\"#send\"]::after,\n.ds-page:has(#cards:target) .ds-nav__link[href=\"#cards\"]::after,\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"]::after {\n background: var(--fill-accent);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n/* a round key in the shelf: alerts, the account */\n.ds-nav__key {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-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 transition: var(--transition);\n}\n.ds-nav__key:hover,\n.ds-nav__key.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-nav__key:active,\n.ds-nav__key.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* hero: the balance card, the deepest raised thing on the page */\n.ds-hero {\n display: flex;\n flex-direction: column;\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__eyebrow {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-hero__title {\n margin: var(--space-4) 0 0;\n color: var(--color-heading-alt);\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-hero__figure {\n display: block;\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-hero__lead {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-hero__limit {\n margin-top: var(--space-5);\n}\n.ds-hero__limit-text {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-5);\n}\n.ds-hero__actions .ds-button {\n flex: 1 1 auto;\n}\n\n/* meter: a sunk groove with a bar in it */\n.ds-progress {\n height: var(--size-track);\n overflow: hidden;\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--size-track);\n}\n.ds-progress__bar--quarter {\n width: 25%;\n}\n.ds-progress__bar--most {\n width: 72%;\n}\n\n/* keys: the round action keys under the balance card */\n.ds-keys {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n}\n.ds-keys__key {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-link-quiet);\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}\n.ds-keys__disc {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-key);\n height: var(--size-key);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n transition: var(--transition);\n}\n.ds-keys__disc svg {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-keys__key--primary .ds-keys__disc {\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-keys__key:hover .ds-keys__disc,\n.ds-keys__key.is-hover .ds-keys__disc {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-keys__key:active .ds-keys__disc,\n.ds-keys__key.is-active .ds-keys__disc {\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* card: a payment card drawn on the inverted fill */\n.ds-card {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-card);\n padding: var(--space-5);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\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 color: var(--color-inverse-text);\n text-decoration: none;\n}\n.ds-card__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-card__chip {\n width: var(--size-chip);\n height: calc(var(--size-chip) * 0.7);\n background: var(--color-inverse-text);\n border-radius: calc(var(--radius-panel) / 3);\n opacity: 0.4;\n}\n.ds-card__number {\n display: flex;\n gap: var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-card__row {\n display: flex;\n gap: var(--space-6);\n}\n.ds-card__label {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.7;\n}\n.ds-card__value {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-2) 0 var(--space-6);\n}\n.ds-page-header__text {\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}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 76ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 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 margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\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-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\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__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\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 margin: 0;\n padding: 0 var(--space-5);\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 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 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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-panel);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\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 cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\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-pressed);\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__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\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-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: 0 0 0 var(--border-width-strong) 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 display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n padding: var(--space-1);\n background: var(--fill-input);\n border-radius: min(calc(var(--radius-control) / 2), calc(var(--size-check) / 4));\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--fill-accent);\n background-clip: content-box;\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n/* the era's switch: a sunk pill with a raised thumb */\n.ds-switch {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 2 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: var(--fill-input);\n border-radius: var(--size-thumb);\n box-shadow: var(--shadow-control-pressed);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-switch:checked {\n background: var(--fill-accent);\n box-shadow: none;\n}\n.ds-switch:checked::before {\n left: calc(var(--size-thumb) + var(--space-1));\n}\n/* the era's slider: a sunk track with a raised round thumb */\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\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 -webkit-appearance: none;\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one raised sheet, rows divided by a rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\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-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n\n.ds-table .ds-table__num {\n white-space: nowrap;\n}\n\n/* list: the activity sheet, one payment a row, the amount at the right */\n.ds-list {\n margin: 0;\n padding: 0 var(--space-5) var(--space-2);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) 0 var(--space-2);\n color: var(--color-heading-alt);\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-list__head .ds-link {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-list__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-chip);\n height: var(--size-chip);\n background: var(--fill-input);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n overflow: hidden;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__dot {\n display: inline-block;\n width: var(--size-dot);\n height: var(--size-dot);\n margin-right: var(--space-1);\n background: var(--color-success);\n border-radius: 50%;\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n.ds-list__dot--new {\n background: var(--color-accent-alt);\n}\n.ds-list__amount {\n flex: none;\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.ds-list__amount--in {\n color: var(--color-success);\n}\n\n/* panel */\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 display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\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-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n\n/* rows of a label and a value inside a panel */\n.ds-panel__facts {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: var(--space-2) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-panel__facts dt {\n color: var(--color-text-muted);\n}\n.ds-panel__facts dd {\n margin: 0;\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-panel__meters {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-panel__meter-text {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n\n/* grid: the pots, small raised tiles, each with its own colour */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-4);\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-control);\n color: var(--color-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__chip {\n width: calc(var(--size-chip) * 0.7);\n height: calc(var(--size-chip) * 0.7);\n margin-bottom: var(--space-3);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-grid__cell--1 .ds-grid__chip,\n.ds-grid__cell--1 .ds-grid__bar {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__chip,\n.ds-grid__cell--2 .ds-grid__bar {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__chip,\n.ds-grid__cell--3 .ds-grid__bar {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__chip,\n.ds-grid__cell--4 .ds-grid__bar {\n background: var(--color-fill-4);\n}\n.ds-grid__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__value {\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 font-variant-numeric: tabular-nums;\n}\n.ds-grid__track {\n display: block;\n height: var(--size-track);\n margin-top: var(--space-3);\n overflow: hidden;\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--size-track);\n}\n.ds-grid__cell--1 .ds-grid__bar {\n width: 62%;\n}\n.ds-grid__cell--2 .ds-grid__bar {\n width: 35%;\n}\n.ds-grid__cell--3 .ds-grid__bar {\n width: 88%;\n}\n.ds-grid__cell--4 .ds-grid__bar {\n width: 20%;\n}\n\n/* stats: three figures, each in its own well */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n opacity: 0.8;\n}\n.ds-stat__value {\n margin: var(--space-1) 0 0;\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 display: block;\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-shadow: none;\n opacity: 0.8;\n}\n\n/* tabs: one sunk groove across the column, equal segments, the current one raised */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: calc(var(--radius-control) + var(--space-1));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs > li {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-3);\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 font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: none;\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(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\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 white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\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::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar: the accounts block of the right column */\n.ds-sidebar {\n padding: var(--space-5) 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-sidebar__heading {\n margin: 0 var(--space-3) var(--space-2);\n color: var(--color-heading-alt);\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-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-5);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\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) var(--space-3);\n border-radius: min(var(--radius-control), var(--radius-panel));\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 line-height: var(--line-body);\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-alt);\n}\n.ds-sidebar__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-sidebar__sum {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n}\n\n/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\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-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\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-secondary-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 transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\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 color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\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-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\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-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* footer */\n.ds-footer {\n margin-top: var(--space-8);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\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 max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\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@media (max-width: 1100px) {\n .ds-board {\n grid-template-columns: var(--size-wallet) minmax(0, 1fr);\n }\n .ds-board > :last-child {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: start;\n }\n}\n@media (max-width: 800px) {\n .ds-board,\n .ds-board > :last-child,\n .ds-split,\n .ds-page__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: 0 var(--space-4);\n padding-top: var(--space-3);\n }\n .ds-nav__tools {\n margin-left: auto;\n }\n .ds-nav__list {\n order: 3;\n justify-content: space-between;\n width: 100%;\n min-height: var(--size-control-large);\n margin: var(--space-2) 0 0;\n }\n .ds-page__inner {\n padding-top: var(--space-6);\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__list {\n gap: 0;\n }\n .ds-nav__link {\n padding: 0 var(--space-2);\n }\n .ds-nav__link::after {\n left: var(--space-2);\n right: var(--space-2);\n }\n .ds-nav__tools {\n gap: var(--space-3);\n }\n .ds-board,\n .ds-split,\n .ds-page__row,\n .ds-page__stack {\n gap: var(--space-5);\n }\n .ds-hero {\n padding: var(--space-5);\n }\n .ds-hero__figure {\n font-size: var(--text-h1);\n }\n .ds-stat {\n gap: var(--space-3);\n }\n .ds-stat__item {\n padding: var(--space-3);\n }\n .ds-stat__value {\n font-size: var(--text-h3);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-1);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer__inner {\n padding: var(--space-5) var(--space-4);\n }\n .ds-footer__links {\n flex-wrap: wrap;\n }\n}\n\n/* tooltip: a small inverted label by its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--space-3));\n color: var(--color-inverse-text);\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-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip--below .ds-tooltip__tip {\n top: calc(100% + var(--space-2));\n bottom: auto;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n left: auto;\n right: 0;\n transform: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* avatar: initials on a raised disc, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: one raised sheet of sections that open and close */\n.ds-accordion {\n background-color: var(--color-surface);\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 color: var(--color-text);\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-3));\n height: calc(var(--size-icon) + var(--space-3));\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: inherit;\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron svg {\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* menu: the account disc in a sunk well opens a raised list */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--size-avatar);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__caret {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-2));\n right: 0;\n z-index: 5;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 22ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: min(var(--radius-panel), var(--space-5));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: min(var(--radius-control), 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 line-height: var(--line-heading);\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-surface-alt);\n}\n.ds-menu__link--danger {\n color: var(--color-danger);\n}\n\n@media (max-width: 560px) {\n .ds-menu__caret {\n display: none;\n }\n .ds-menu__toggle {\n padding: var(--space-1);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: your money\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n One payment was declined\n
\n IV\n \n
\n
\n
\n
\n\n
\n\n
\n
\n\n
\n\n
\n
Main account, ends 4418 Open
\n

Good evening, Ilse. You have

\n 4,812.60\n

Two payments leave tomorrow. After them you keep 4,263.10 until the 28th.

\n
\n
Spent of this month's plan 1,440 of 2,000
\n
\n
\n
\n Send money\n Statement\n
\n
\n\n \n\n \n chronoskin debit \n ············4418\n \n Card holderIlse Varga\n Expires09 / 23\n \n \n\n
\n\n
\n\n
\n
\n
Money in
\n
3,150.00 this month
\n
\n
\n
Money out
\n
1,440.35 28 payments
\n
\n
\n
Set aside
\n
420.00 into four pots
\n
\n
\n\n
\n
\n \n
Rent leaves tomorrow. 780.00 to Harbour Lettings, as on the first of every month.
\n
\n
\n \n
A card payment was declined. 64.90 at Linden Books, because the online limit was reached.
\n
\n
\n\n \n\n
\n\n
\n\n \n\n
\n \n \n Holiday\n 930\n \n \n \n \n New bike\n 280\n \n \n \n \n Bills\n 440\n \n \n \n \n Rainy day\n 200\n \n \n
\n\n
\n\n
\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Main account
    3. \n
  3. Activity
    4. \n
\n\n
\n
\n

Activity

\n

Every payment in and out of the main account since the first of the month.

\n
\n
\n Download statement\n Send money\n
\n
\n\n
\n\n
\n
\n

Where it went

\n
\n
\n
Home and bills 840.00
\n
\n
\n
\n
Groceries 312.40
\n
\n
\n
\n
Travel 148.50
\n
\n
\n
\n
Everything else 139.45
\n
\n
\n
\n
\n
\n \n

Nothing is waiting

\n

No payment is pending approval. Requests you send to others show up here until they are paid.

\n Request money\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 \n \n \n \n \n \n \n
DatePayeeCategoryStatusAmount
12 MayMarket GardenGroceriesPaid- 23.80
12 MayTomas OkonjoFriendsReceived+ 40.00
12 MayLinden BooksShoppingDeclined64.90
11 MayNorthway RailTravelPaid- 18.50
10 MayQuay Press, salaryIncomeReceived+ 3,110.00
9 MayFenwick EnergyBillsPending- 61.20
8 MayCorner BakeryGroceriesPaid- 7.40
13 MayHarbour LettingsHomeScheduled- 780.00
\n\n \n\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Activity
    3. \n
  3. Send money
    4. \n
\n\n
\n
\n

Send money

\n

A transfer to a saved payee arrives within the hour, on any day.

\n
\n
\n Back to overview\n
\n
\n\n
\n\n
\n \n Paying from \n Main account\n \n Available4,812.60\n After this transfer4,692.60\n \n \n
\n

Limits today

\n
\n
\n
One transfer
5,000.00
\n
Left today
9,880.00
\n
New payees
1,000.00
\n
\n
\n
\n
\n

Check the name

\n
\n We compare the name you type with the name on the account, and tell you before any money moves if they differ.\n
\n
\n
\n\n
\n

To a saved payee

\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n Enter 5,000.00 or less for one transfer.\n
\n
\n \n \n Goes to the holiday pot with this transfer.\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
  1. chronoskin
    2. \n
  2. Main account
    3. \n
  3. Cards
    4. \n
\n\n
\n
\n

Cards

\n

One debit card on the main account. Limits and locks apply at once.

\n
\n
\n Order a second card\n
\n
\n\n
\n\n
\n \n chronoskin debit \n ············4418\n \n Card holderIlse Varga\n Expires09 / 23\n \n \n \n
\n

This card

\n
\n
\n
Online limit
500.00 a day
\n
Cash limit
300.00 a day
\n
Spent today
42.30
\n
\n
\n
\n
\n\n
\n\n
\n\n
\n

Where it works

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

Freeze the card ending 4418?

\n
Every new payment is declined until you unfreeze it. Scheduled transfers still leave.
\n
\n \n \n
\n
\n
\n\n
\n\n
    \n
  • Paid with this card See all
    • \n
  • \n MG\n
    \n Market Garden\n Today 18:12 · contactless\n
    \n - 23.80\n
    • \n
  • \n LB\n
    \n Linden Books\n Today 09:05 · online, declined\n
    \n 64.90\n
    • \n
  • \n NW\n
    \n Northway Rail\n Yesterday · online\n
    \n - 18.50\n
    • \n
\n\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Help
    3. \n
  3. Fees and limits
    4. \n
\n\n
\n
\n

Fees and limits

\n

What the main account costs and how much can move in a day.

\n
\n
\n Send money\n
\n
\n\n
\n\n
\n
\n

In short

\n
\n
\n
Monthly fee
0.00
\n
Transfers
Free
\n
Cash abroad
1.5%
\n
Replacement card
5.00
\n
\n
\n
\n
\n
\n Talk to someone \n
The chat is staffed from seven until ten in the evening. A lost card can be frozen at any hour from the cards page.
\n
\n
\n Is my money protected? \n
Balances are held in a separate client account and are covered by the national deposit scheme up to its limit.
\n
\n
\n Lost your card? \n
Freeze it at once from the cards page. A replacement arrives within five working days.
\n
\n
\n
\n\n
\n
\n
\n

How much can move

\n

Limits protect the account when a phone or a card is lost. You can lower any of them yourself.

\n

One transfer can be up to 5,000.00 and a day's transfers up to 10,000.00. A transfer carries its own reference, such as TR-0512-88, which both sides see on their statement.

\n

New payees

\n

The first transfer to a new payee is limited to 1,000.00 and is held for an hour, so that a mistake can still be stopped.

\n

What we check first

\n
    \n
  • That the name matches the name on the receiving account.
    • \n
  • That the amount fits what is left of today's limit.
    • \n
  • That the device has been used with this account before.
    • \n
\n

Cards

\n

The card has its own limits for shops, online payments and cash. See the card's limits or what was declined.

\n

\n Card limits\n Last statement\n Send money\n Rates abroad\n Terms\n

\n
\n
\n
\n\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s05.p04.t05.u05.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\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-nm-5455-dr\",\n \"short\": \"v1-nm-5455-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(228 235 245);\n --color-canvas: rgb(228 235 245);\n --color-surface: rgb(228 235 245);\n --color-surface-alt: rgb(237 242 249);\n --color-surface-strong: rgb(210 219 235);\n --color-bar: rgb(228 235 245);\n --color-bar-text: rgb(16 17 18);\n --color-bar-alt: rgb(210 219 235);\n --color-bar-alt-text: rgb(16 17 18);\n --color-inverse: rgb(44 52 64);\n --color-inverse-text: rgb(228 235 245);\n --color-text: rgb(16 17 18);\n --color-text-muted: rgb(70 74 82);\n --color-heading: rgb(16 17 18);\n --color-heading-alt: rgb(70 74 82);\n --color-link: rgb(41 98 255);\n --color-link-quiet: rgb(16 17 18);\n --color-link-visited: rgb(112 128 144);\n --color-link-hover: rgb(16 17 18);\n --color-link-active: rgb(41 121 255);\n --color-border: rgb(206 214 234);\n --color-border-strong: rgb(190 200 228);\n --color-border-muted: rgb(255 255 255);\n --color-accent: rgb(41 121 255);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(0 119 170);\n --color-fill-1: rgb(41 121 255);\n --color-fill-2: rgb(102 153 0);\n --color-fill-3: rgb(221 74 104);\n --color-fill-4: rgb(112 128 144);\n --color-button: rgb(41 121 255);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(228 235 245);\n --color-button-secondary-text: rgb(16 17 18);\n --color-input: rgb(228 235 245);\n --color-input-text: rgb(16 17 18);\n --color-input-border: rgb(190 200 228);\n --color-disabled: rgb(210 219 235);\n --color-disabled-text: rgb(70 74 82 / 0.6);\n --color-danger: rgb(198 40 72);\n --color-danger-surface: rgb(246 228 236);\n --color-success: rgb(102 153 0);\n --color-warning: rgb(214 118 0);\n --color-notice: rgb(237 242 249);\n --color-notice-text: rgb(16 17 18);\n --color-focus: rgb(41 121 255);\n --color-shadow: rgb(190 200 228);\n --color-overlay: rgb(44 52 64 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Segoe UI\", Tahoma, \"DejaVu Sans\", sans-serif;\n --font-heading: Quicksand, \"Varela Round\", \"Century Gothic\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Open Sans\", \"Segoe UI\", Tahoma, \"DejaVu Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 44px;\n --text-h1: 30px;\n --text-h2: 22px;\n --text-h3: 17px;\n --line-body: 1.5;\n --line-heading: 1.35;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 30px;\n --radius-panel: 16px;\n --radius-pill: 30px;\n --radius-page: 24px;\n --shadow-panel: 12px 12px 24px var(--color-shadow), -12px -12px 24px var(--color-border-muted);\n --shadow-control: 3px 3px 6px var(--color-shadow), -3px -3px 6px var(--color-border-muted);\n --shadow-control-hover: 6px 6px 12px var(--color-shadow), -6px -6px 12px var(--color-border-muted);\n --shadow-control-pressed: inset 3px 3px 7px var(--color-shadow), inset -3px -3px 7px var(--color-border-muted);\n --shadow-dialog: 20px 20px 60px var(--color-shadow), -12px -12px 24px var(--color-border-muted);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(to left top, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 72%, white));\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to left top, color-mix(in srgb, var(--color-button) 80%, black), color-mix(in srgb, var(--color-button) 86%, white));\n --fill-button-hover: linear-gradient(var(--color-button), 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: box-shadow 0.25s ease-out, background-color 0.25s ease-out, color 0.25s ease-out;\n --backdrop-blur: 0px;\n}\n" } }