{ "id": "v1-gl-3333", "long_id": "v1.glassmorphism.app.s03.p03.t03.u03", "name": "Glassmorphism showcase app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a 1px light border and a soft tinted shadow, floating over a sky of colour that fades down the page, with pale translucent bubbles drifting in it. It was common in product pages, generators and dashboards, and in its light form it used white glass over pale blue with dark navy text. This pack is the showcase form of it: a wide centred hero over a stage of overlapping tilted glass cards, bands of free-standing cards set far apart, a three-column feature row, and the navigation as a dock floating at the bottom of the window.", "url": "https://chrono.skin/s/v1-gl-3333", "preview_url": "https://chrono.skin/s/v1-gl-3333/specimen.html", "files": { "STYLE.md": "# Glassmorphism showcase app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a 1px light border and a soft tinted shadow, floating over a sky of colour that fades down the page, with pale translucent bubbles drifting in it. It was common in product pages, generators and dashboards, and in its light form it used white glass over pale blue with dark navy text. This pack is the showcase form of it: a wide centred hero over a stage of overlapping tilted glass cards, bands of free-standing cards set far apart, a three-column feature row, and the navigation as a dock floating at the bottom of the window.\n\n## Layout\n\n- Content column: `--size-page` (1120px), centred, with `--space-4` (24px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport. There is no bar at the top or bottom; every surface is a rounded card standing free on the backdrop.\n- Navigation: `.ds-nav` is a dock, a rounded strip of frosted bar glass, centred and sticky 24px above the bottom edge of the window. Each item is `--size-dock` (76px) wide at least, an icon above a short label. The top of the page only carries `.ds-page__top`: the brand on the left and one secondary button on the right, on the backdrop.\n- Home page: brand row, then announcements (`.ds-notice__stack`, centred, at most 76 characters wide), then the `.ds-hero`: eyebrow pill, display title, lead and two large buttons, all centred, and below them the `.ds-hero__stage` (`--size-stage`, 340px high) with three overlapping tilted cards and two orbs. The `.ds-stat` strip is pulled up 64px over the foot of the stage and inset 64px on each side.\n- Bands: the rest of the home page is a series of `.ds-page__band` sections `--space-7` (104px) apart. A band opens with a centred `.ds-page__heading` and `.ds-page__sub` on the backdrop, 40px above its content. Content is either the three-column `.ds-grid`, or a `.ds-page__split`: a wide column on the left and a `--size-aside` (340px) column on the right holding the `.ds-sidebar` and small cards in a `.ds-page__stack`. The aside is always on the right.\n- Inner pages have no hero and no stage. Their one band is `.ds-page__band--first`, 16px under the brand row, and starts with the `.ds-breadcrumb` trail centred on the backdrop; 16px below it the `.ds-page-header` is a full-width glass card with the title and one line on the left and the actions on the right. Under it a `.ds-page__stack` at 24px gaps. A working page has `.ds-tabs` as a centred row of pills, the table as one wide card and the pagination with previous and next pushed to the two ends, or the form in a wide card with its fields in two columns and the dialog as a dimmed band under it; nothing sits beside a table or a form. A reading or overview page uses the `.ds-page__split`: list cards or the prose card on the left, small cards, a notice and the empty state in the aside.\n- Views: the specimen is one site with five screens, one showing at a time; the brand row, the footer and the dock are written once around them. `desk` is the home view (announcements, hero, figures, the tile grid, the week's activity beside the jump list). `invoices` is the list (tabs, table, pagination). `invoice` is one invoice being edited: the form card and, under it, the open dialog its Void button raises. `clients` is the client list beside an error notice and two small cards. `reminders` is the reading page: running text and link states beside a note card and the empty list of disputed invoices. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address, and `invoice` marks the Invoices item.\n- The footer is a rounded card of bar glass 104px below the last band, with four columns. `.ds-page` is a column as tall as the window and `.ds-page__views` (the `
` around the views) takes the spare height, so on a page shorter than the window the footer and, under it, the dock still sit at the bottom edge instead of the dock hanging in the middle of the window.\n- Spacing scale: `--space-1` 4px (icon to label in the dock, badge dot), `--space-2` 8px (label to control, gaps between pills and notices), `--space-3` 16px (row padding, gap between list cards and buttons), `--space-4` 24px (card padding, gap between cards, form gap), `--space-5` 40px (large card padding, heading to content, hero top), `--space-6` 64px (stat strip overlap and inset, dialog band padding, list tile size), `--space-7` 104px (between bands, textarea height).\n- Controls are `--size-control` (44px) high; large hero buttons 60px.\n- Glass: cards use `backdrop-filter: blur(var(--backdrop-blur))`, the surface token for how strongly glass blurs what lies behind it (10px in this pack's surface set); the dock, the stat strip, the footer and the dialog, the strongest glass, use three times that: `blur(calc(var(--backdrop-blur) * 3))` (30px). Never put a blurred element inside another blurred element.\n- Below 900px the split, the form and the footer become one column, the grid two, the stage is hidden and the stat strip stacks. Below 600px the side padding drops to 16px, bands sit 64px apart, the hero title drops to `--text-h1`, the grid is one column, tabs, pagination and button rows wrap, table columns marked `.ds-table__opt` are hidden, the footer shows its three link columns side by side under its first block, and the dock items lose their minimum width so the dock fits the window.\n\n## Typography and colour roles\n\n- One family, Inter first, for `--font-body`, `--font-heading` and `--font-ui`; `--font-mono` for code.\n- Body text is light: `--weight-body` 300 at `--text-base` 16px with `--line-body` 1.6. Bold, and every heading, is 700 (`--weight-bold`, `--weight-heading`).\n- The hero title is large and regular: `--text-display` 64px at `--weight-display` 400, `--line-display` 1.2.\n- Sizes: `--text-ui` 16px for buttons and tabs, `--text-small` 14px for meta text, badges, dock labels, table heads and notices, `--text-large` 20px for lead text, list titles and feature titles, `--text-h1` 28px for band headings, page titles and figures, `--text-h2` 24px, `--text-h3` 16px.\n- Buttons, dock items, tabs and pagination are uppercase at regular weight: `--ui-transform` uppercase, `--weight-ui` 400. Nothing else is uppercase.\n- Links in running text are always underlined (`--link-decoration` underline); quiet links are not.\n- Backdrop: a sky that falls from `--color-fill-2` (80 149 228) at the top edge through `--color-fill-1` (128 175 231) into `--color-page`, a very pale blue (241 247 255), within the first screen, and returns faintly further down; seven crisp-edged white bubbles, 84px to 210px in radius and 30% white at the centre, sit alternately right and left of the column; `--color-fill-3` (73 138 255) is a brighter blue and `--color-fill-4` (225 236 244) a pale grey-blue. Feature cards and list tiles mix them with `transparent` at 55%; the orbs fade from one to another.\n- This palette is light: text is dark navy (`--color-text` 39 55 76, `--color-heading` 31 57 88) on glass and on the backdrop, and `--color-text-muted` is the same navy at 72%.\n- Glass is white: `--color-surface` 40% for cards, `--color-surface-alt` 60% for the current item, chips and the eyebrow, `--color-surface-strong` 80% for hovered controls. `--color-bar` (225 236 244 at 60%) for the dock, the stat strip, table heads and code blocks, and `--color-bar-alt` (241 247 255 at 60%) for tabs, status badges and the footer, are pale frosted fills with navy text, not dark ones.\n- Borders: `--color-border` is white at 60% around glass, `--color-border-strong` a solid light blue (128 175 231) for the hero cards, dialogs, notices, secondary buttons and inputs, `--color-border-muted` navy at 11% for hairlines between rows and for hover tints.\n- `--color-button` and `--color-accent` are the same medium blue (47 110 211) with white text; the current tab takes the accent. `--color-link` is that blue too, `--color-link-visited` violet (120 64 184). `--color-accent-alt` is light blue (128 175 231) and takes navy text.\n- `--color-notice` is navy at 75% with white text, the one dark surface on the page.\n- Status: `--color-danger` 233 66 86 on a pale pink `--color-danger-surface`, `--color-success` 11 158 67, `--color-warning` 255 90 0; they appear as a 1px ring and an 8px dot on status badges, as the border of an error, and at 70% as the tint of the destructive button. `--color-shadow` is a blue (71 97 206) at 36%.\n- Corners: `--radius-control` 22px, which makes buttons, inputs and selects full pills at 44px, `--radius-panel` 6px for list cards, notices and dock items, `--radius-page` 14px for cards, the dock, the stat strip and the footer, `--radius-pill` 30px for badges and tabs.\n- Shadows are short and layered: `--shadow-panel` is 0 10px 21px plus a bevel inside the glass: a 2px white highlight along the top edge and a 2px shade along the bottom; `--shadow-control` 0 2px 8px with a 1px top highlight, `--shadow-dialog` 0 12px 24px on the dialog, the dock and the stat strip. `--shadow-text` is `none`.\n- One-off values with no token: the strongest glass multiplies `--backdrop-blur` by three with `calc()`, `saturate(180%)` is written inline on the dock, stat strip and footer, tints use `color-mix()` over `--color-fill-*` with `transparent`, the hero cards are rotated by -10, -3 and 8 degrees, and the stat labels are the bar text at `opacity: 0.8`.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop and sets the base type. `.ds-page__inner` is the width container, `.ds-page__views` the block around the views that takes the spare height of the window, `.ds-page__top` the brand row with the `.ds-brand` and `.ds-page__mark`, `.ds-page__band` a section 104px below the previous one (`--first` for the one band of an inner page), `.ds-view` one screen of the specimen, `.ds-page__heading` and `.ds-page__sub` its centred heading and lead on the backdrop, `.ds-page__split` the wide-plus-aside grid, `.ds-page__stack` a vertical stack at 24px, `.ds-page__icon` a 22px icon.\n- `.ds-brand`: the site's mark and name, at the left of `.ds-page__top`, on the backdrop: `.ds-brand__mark` is a small tile (30px) dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` is the name in the heading font at `--text-h2` in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the dock: a floating strip of bar glass at the bottom of the window, placed last in ``. `.ds-nav__list`, `.ds-nav__link` (icon above label); the current item is `is-current`, a pane of light glass with a border. Four to six items.\n- `.ds-hero`: centred page introduction: `.ds-hero__eyebrow` (a glass pill with one short fact), `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`, then `.ds-hero__stage` with `.ds-hero__orb` (`--a`, `--b`) and three `.ds-hero__card` plates (`--a` left, `--b` centre and in front, `--c` right) that overlap and tilt; each holds `.ds-hero__caption` and `.ds-hero__figure`. One stage per page.\n- `.ds-page-header`: head of an inner page, used instead of the hero: a full-width glass card with `.ds-page-header__text` (`.ds-page-header__title` at 28px, `.ds-page-header__lead` at 20px) and `.ds-page-header__actions` on the right, at most one primary button. 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 bar glass. Put prose inside a `.ds-panel`.\n- `.ds-link`: underlined link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for navy, undecorated links in tables and lists. `.ds-link__sample` is a row of links.\n- `.ds-button`: primary, a solid blue pill, 44px high, uppercase. `.ds-button--secondary` is a glass button with a light blue border; `.ds-button--danger` is the destructive action: a glass button tinted red at 70% with a red border, solid red on hover; use it once per group. `.ds-button--large` for the hero; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays out a group.\n- `.ds-form`: a two-column grid of fields inside a `.ds-panel`. `.ds-form__field` stacks a bold `.ds-form__label` over a control; `.ds-form__field--wide` spans both columns. Controls: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range`, `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text. `.ds-form__actions` is the button row across the bottom, above a hairline.\n- `.ds-table`: data table as one wide glass card: a head row on bar glass with bold 14px labels, rows 16px padded and divided by hairlines. `.ds-table__num` right-aligns a numeric column, `.ds-table__opt` marks a column hidden below 600px, `.ds-table__meta` is muted text, `is-hover` on a row tints it.\n- `.ds-list`: a stack of separate glass cards 16px apart, one per item: `.ds-list__tile` (a 64px tinted square with an icon; `--alt` for the second tint), `.ds-list__body` with `.ds-list__title` (20px, bold) and `.ds-list__meta`, then a quiet link.\n- `.ds-panel`: a free-standing glass card, 40px padded, 14px radius, with a 24px `.ds-panel__title` and `.ds-panel__body`. `.ds-panel--compact` (24px padding) for the aside column.\n- `.ds-grid`: three columns of large feature cards, six cells in two rows. `.ds-grid__cell` with `--1` to `--4` picks the tint; inside, a round `.ds-grid__chip` with an icon, the `.ds-grid__label` (20px, bold) and a muted `.ds-grid__meta`.\n- `.ds-stat`: the row of summary figures: one strip of bar glass laid over the foot of the hero stage. Each `.ds-stat__item` is centred, `.ds-stat__value` (28px, bold) above `.ds-stat__label`. Three to five items. Use it once, on the home page.\n- `.ds-tabs`: a centred row of separate pills, `.ds-tabs__tab`; the selected one is `is-current` and takes the accent fill. Use it for view switches under the page header.\n- `.ds-badge`: pill for counts and markers: blue by default, `.ds-badge--alt` light blue for \"new\", `.ds-badge--glass` neutral glass for quiet counts. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a frosted pill with navy text, a 1px ring and a leading 8px dot in the status colour.\n- `.ds-sidebar`: a glass card in the right column of a split band: `.ds-sidebar__heading` (16px, bold), `.ds-sidebar__list` with hairlines between items, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: announcement above the hero, navy glass with white text; `.ds-notice--error` is pale pink glass with a red border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` centres and stacks several.\n- `.ds-pagination`: row of glass cells; the first and last items are `.ds-pagination__edge` (and `--end`) so previous and next sit at the two ends of the column with the numbers centred. `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill.\n- `.ds-breadcrumb`: small centred trail above the page header, `.ds-breadcrumb__item` separated by arrows, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed band (`--color-overlay`) with a centred `.ds-dialog__box` of strongly blurred glass, 560px wide: `.ds-dialog__title` and `.ds-dialog__body` left-aligned, `.ds-dialog__actions` right-aligned with the confirming button last. The box is frosted glass over the canvas colour (`--color-surface-alt` laid over `--color-canvas` at 82%, written with `color-mix()`), so its text keeps the contrast it has on the page under any palette.\n- `.ds-empty`: empty state as a small left-aligned glass card: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: a rounded card of bar glass in the column: a first block with `.ds-footer__brand` and one line, then three columns of `.ds-footer__heading` over `.ds-footer__links` with `.ds-footer__link`.\n\n## Never\n\n- `row-gap <= 16px`: list cards sit 16px apart; table rows touch.\n- `block-gap <= 104px`: bands sit 104px apart and nothing is further apart than that.\n- `content-width <= 1120px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `uppercase-text <= 20%`: uppercase is for controls, never for headings or body.\n- `border-width <= 2px`: borders are 1px; 2px is the strong width.\n- `border-radius <= 30px`: list cards are 6px, cards 14px, controls 22px (full pills); only badges and tabs reach 30px.\n- `box-shadow-blur <= 24px`: shadows are short: 21px on cards, 24px on the dialog and the dock.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; gradients are the backdrop, the two orbs and the sheen of secondary buttons.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new container starts from `.ds-panel` (fill, 1px border, radius, shadow and blur together, never one without the others), a new row of items from `.ds-list__item`, a new control from `.ds-button--secondary` or `.ds-form__input`, an overlay from `.ds-dialog__box`, anything that floats over the page from `.ds-nav`. A new topic becomes a new `.ds-page__band` with its own centred heading, not a card squeezed beside an existing one. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*`. Keep opaque fills to buttons and badges, keep every card free-standing with the backdrop visible between cards, and never add a full-width bar.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1120px;\n --size-aside: 340px;\n --size-dialog: 560px;\n --size-dock: 76px;\n --size-control: 44px;\n --size-stage: 340px;\n --size-card: 300px;\n --size-orb: 150px;\n --size-chip: 48px;\n --size-icon: 22px;\n --size-dot: 8px;\n --size-thumb: 20px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 24px;\n --space-5: 40px;\n --space-6: 64px;\n --space-7: 104px;\n}\n\n/* shell: full backdrop, one wide column, bands stacked far apart */\n.ds-page {\n display: flex;\n flex-direction: column;\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/* the column fills the window, so on a short page the footer and the dock still rest at its bottom edge */\n.ds-page__inner {\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-page__views {\n flex: 1 0 auto;\n}\n.ds-page__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) + var(--space-2));\n height: calc(var(--size-icon) + var(--space-2));\n flex: none;\n padding: var(--space-1);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-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 text-shadow: var(--shadow-text);\n}\n.ds-page__band {\n margin-top: var(--space-7);\n}\n.ds-page__band--first {\n margin-top: var(--space-3);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-page__heading {\n max-width: 28ch;\n margin: 0 auto;\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-align: center;\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page__sub {\n max-width: 56ch;\n margin: var(--space-2) auto var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-4);\n align-items: start;\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n\n/* nav: a dock of dark glass that floats at the bottom edge of the window */\n.ds-nav {\n position: sticky;\n bottom: var(--space-4);\n z-index: 3;\n display: flex;\n align-items: stretch;\n gap: var(--space-1);\n width: fit-content;\n max-width: calc(100% - 2 * var(--space-4));\n margin: var(--space-5) auto var(--space-4);\n padding: var(--space-2);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-nav__list {\n display: flex;\n align-items: stretch;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n min-width: var(--size-dock);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#desk\"],\n.ds-page:has(#desk:target) .ds-nav__link[href=\"#desk\"],\n.ds-page:has(#invoices:target) .ds-nav__link[href=\"#invoices\"],\n.ds-page:has(#invoice:target) .ds-nav__link[href=\"#invoices\"],\n.ds-page:has(#clients:target) .ds-nav__link[href=\"#clients\"],\n.ds-page:has(#reminders:target) .ds-nav__link[href=\"#reminders\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n}\n\n/* breadcrumb: centred trail above the page header */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"→\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: a band of glass, title left and action right */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin-top: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: centred text, then a stage of overlapping tilted glass cards */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-5) 0 0;\n text-align: center;\n}\n.ds-hero__eyebrow {\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-alt);\n border-radius: var(--radius-pill);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-hero__title {\n max-width: 18ch;\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n.ds-hero__stage {\n position: relative;\n width: 100%;\n height: var(--size-stage);\n margin-top: var(--space-5);\n text-align: left;\n}\n.ds-hero__orb {\n position: absolute;\n width: var(--size-orb);\n height: var(--size-orb);\n border-radius: 50%;\n background: radial-gradient(circle at 30% 25%, var(--color-fill-4), var(--color-fill-2));\n}\n.ds-hero__orb--a {\n top: 0;\n left: 27%;\n}\n.ds-hero__orb--b {\n top: 44%;\n left: 82%;\n background: radial-gradient(circle at 30% 25%, var(--color-accent), var(--color-fill-3));\n}\n.ds-hero__card {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n width: var(--size-card);\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-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-hero__card--a {\n top: 22%;\n left: 12%;\n transform: rotate(-10deg);\n}\n.ds-hero__card--b {\n top: 6%;\n left: calc(50% - var(--size-card) / 2 - var(--space-4));\n z-index: 1;\n width: calc(var(--size-card) + 2 * var(--space-4));\n padding: var(--space-5) var(--space-4);\n transform: rotate(-3deg);\n}\n.ds-hero__card--c {\n top: 28%;\n left: 64%;\n transform: rotate(8deg);\n}\n.ds-hero__caption {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-hero__figure {\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 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;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-2);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--radius-control);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-panel);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-4);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n 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 background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--large {\n min-height: calc(var(--size-control) + var(--space-3));\n padding: var(--space-3) var(--space-5);\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 text-shadow: none;\n cursor: not-allowed;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* panel: a free-standing glass card with a large heading */\n.ds-panel {\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-panel--compact {\n padding: var(--space-4);\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 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}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n\n/* form: fields in two columns inside a wide card */\n.ds-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--wide {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-disabled-text);\n opacity: 1;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-5);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-thumb);\n height: var(--size-thumb);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-control);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n grid-column: 1 / -1;\n gap: var(--space-3);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: a wide glass card, tall rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\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-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\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}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: every item is its own glass card, with a tinted tile in front */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4) var(--space-3) 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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-list__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n flex: none;\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n color: var(--color-text);\n}\n.ds-list__tile--alt {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: three columns of large tinted feature cards */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-5) var(--space-4);\n background-color: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-grid__cell--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__chip {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-chip);\n height: var(--size-chip);\n margin-bottom: var(--space-3);\n background: var(--color-surface-alt);\n border-radius: 50%;\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n.ds-grid__label {\n color: var(--color-heading);\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}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: one strip of dark glass pulled up over the foot of the hero stage */\n.ds-stat {\n position: relative;\n z-index: 2;\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n gap: var(--space-4);\n margin: calc(-1 * var(--space-6)) var(--space-6) 0;\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n color: var(--color-bar-text);\n text-align: center;\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column-reverse;\n}\n.ds-stat__label {\n font-size: var(--text-small);\n opacity: 0.8;\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n\n/* tabs: a centred row of separate pills */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n color: var(--color-bar-alt-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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar: a glass card in the right column of a split band */\n.ds-sidebar {\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-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-3);\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-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list > li + li {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\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-3) var(--space-2);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n\n/* notice: a centred announcement under the brand row */\n.ds-notice {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n color: var(--color-notice-text);\n font-size: var(--text-small);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n width: 100%;\n max-width: 76ch;\n margin: 0 auto;\n}\n\n/* pagination: previous and next at the ends, numbers in the middle */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__edge {\n flex: 1;\n}\n.ds-pagination__edge--end {\n display: flex;\n justify-content: flex-end;\n}\n.ds-pagination__link {\n display: inline-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(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n text-transform: var(--ui-transform);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\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 background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* dialog: a wide glass box on a dimmed band, text left, actions right */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3));\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__body {\n margin-top: var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\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-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-empty__icon {\n width: var(--size-chip);\n height: var(--size-chip);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* footer: a rounded block of dark glass with link columns */\n.ds-footer {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin-top: var(--space-7);\n padding: var(--space-5);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-footer__brand {\n display: block;\n margin-bottom: var(--space-2);\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}\n.ds-footer__heading {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-footer__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\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: 900px) {\n .ds-page__split,\n .ds-form,\n .ds-footer {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat {\n grid-auto-flow: row;\n margin: var(--space-4) 0 0;\n }\n .ds-hero__stage {\n display: none;\n }\n}\n@media (max-width: 600px) {\n .ds-page__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-page__band {\n margin-top: var(--space-6);\n }\n .ds-page__band--first {\n margin-top: var(--space-2);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead,\n .ds-page__sub {\n font-size: var(--text-base);\n }\n .ds-page__heading {\n font-size: var(--text-h2);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header__text,\n .ds-list__body {\n flex-basis: 60%;\n }\n .ds-page-header,\n .ds-list__item,\n .ds-tabs,\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-table th,\n .ds-table td {\n padding-left: var(--space-2);\n padding-right: var(--space-2);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-3);\n }\n .ds-nav__link {\n min-width: 0;\n padding: var(--space-2) var(--space-1);\n }\n .ds-nav__list {\n gap: var(--space-2);\n }\n .ds-footer {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-4) var(--space-3);\n padding: var(--space-4);\n }\n .ds-footer > :first-child {\n grid-column: 1 / -1;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: get paid without the chasing\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n New invoice\n
\n\n
\n\n
\n\n
\n
\n \n
Quarter closes on Friday. Invoices sent after 18:00 that day are dated to the next quarter.
\n
\n
\n \n
Two reminders were not delivered. The address for Fennick & Row bounced twice. Correct it before the next run.
\n
\n
\n\n
\n Spring quarter · 41 invoices so far\n

Get paid without the chasing

\n

Write an invoice in a minute, send it, and let the reminders go out on their own.

\n
\n New invoice\n See your clients\n
\n
\n \n \n
\n Invoice 0139 · Oakhollow Dairy\n 640.00\n Reminder goes out tomorrow\n
\n
\n Invoice 0142 · Marrow Lane Studio\n 1,280.00\n Paid in full, four days early\n
\n
\n Invoice 0144 · Tessel Print\n 2,015.50\n Draft, three lines\n
\n
\n
\n\n
\n
\n
Billed this quarter
\n
38,420
\n
\n
\n
Still outstanding
\n
6,115
\n
\n
\n
Paid on time
\n
87%
\n
\n
\n
Days to payment
\n
11.4
\n
\n
\n\n
\n

Everything between the work and the money

\n

Six parts of the workspace; the first three are a tap from the dock.

\n
\n
\n \n Invoices 41\n Numbered in order, with your terms and tax lines filled in.\n
\n
\n \n Clients 18\n One card per client: addresses, rates and what they still owe.\n
\n
\n \n Reminders New\n A polite note at seven days, a firmer one at twenty-one.\n
\n
\n \n Time sheets\n Hours logged against a client turn into invoice lines.\n
\n
\n \n Reports\n Billed, paid and overdue by month, ready for the accountant.\n
\n
\n \n Payments\n Bank transfers are matched to invoices by their reference.\n
\n
\n
\n\n
\n

This week on your desk

\n

What moved since Monday, newest first.

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

Next run

\n
\n Four reminders are queued for tomorrow at 09:00. See how reminders work.\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Invoices
    3. \n
  3. Spring quarter
    4. \n
\n\n
\n
\n
\n

Invoices

\n

Forty-one invoices dated between April and June.

\n
\n
\n Clients\n New invoice\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
NumberClientStatusDueAmount
0142Marrow Lane StudioPaid14 May1,280.00
0141Halewick BoatyardDue soon19 May3,460.00
0139Oakhollow DairyDue soon17 May640.00
0131Oakhollow DairyOverdue21 April2,015.50
0128Fennick & RowPaid12 April890.00
0127Tessel PrintPaid9 April1,150.00
0125Marrow Lane StudioPaid2 April2,400.00
\n\n \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Invoices
    3. \n
  3. 0139
    4. \n
\n\n
\n
\n
\n

Invoice 0139 Due soon

\n

Oakhollow Dairy, 640.00, due on 17 May. One reminder has gone out.

\n
\n
\n Back to the list\n
\n
\n\n
\n

Edit invoice 0139

\n
\n
\n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n Enter the amount as a number, for example 640.00.\n
\n
\n \n \n Between 7 and 30 days after the invoice date.\n
\n
\n \n \n
\n \n
\n \n Save draft\n \n \n
\n
\n
\n\n
\n
\n

Void invoice 0139?

\n
The number stays used and the invoice is kept as void. Oakhollow Dairy receives a short note that nothing is owed.
\n
\n Keep invoice\n Void it\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Clients
    3. \n
  3. All
    4. \n
\n\n
\n
\n
\n

Clients

\n

Eighteen clients, the ones who owe most first.

\n
\n
\n New invoice\n
\n
\n\n
\n
    \n
  • \n \n
    \n Oakhollow Dairy\n Owes 2,655.50 · two open invoices, one overdue\n
    \n Overdue\n
    • \n
  • \n \n
    \n Halewick Boatyard\n Owes 3,460.00 · one open invoice, due 19 May\n
    \n Due soon\n
    • \n
  • \n \n
    \n Marrow Lane Studio\n Nothing owed · paid 3,680.00 this quarter\n
    \n Paid up\n
    • \n
  • \n \n
    \n Tessel Print\n Nothing owed · one draft waiting\n
    \n Draft\n
    • \n
  • \n \n
    \n Fennick & Row\n Nothing owed · address bounced twice\n
    \n Paid up\n
    • \n
\n
\n
\n \n
One address bounces. Correct the address for Fennick & Row before the next run.
\n
\n
\n

Newest client

\n
\n Halewick Boatyard was added on Monday by Odile Brandt, at the day rate with terms of 14 days.\n
\n
\n
\n

Owed in total

\n
\n 6,115.50 across three invoices and two clients. Open invoices\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Workspace
    2. \n
  2. Invoices
    3. \n
  3. Reminders
    4. \n
\n\n
\n
\n
\n

Reminders

\n

Notes that go out on their own when an invoice is late.

\n
\n
\n See open invoices\n
\n
\n\n
\n
\n
\n

How reminders work

\n

A reminder is an ordinary message from you, sent on the day you would have remembered to write it.

\n

Each invoice has a due date and a grace period of three days. After that the first reminder goes out. Every message is stored with the field sent_as, so a reply reaches your own inbox.

\n

Stopping a run

\n

A run ends the moment a payment is matched. You can also pause it by hand for one client or for one invoice.

\n

A reminder is held back when

\n
    \n
  • the client has written to you in the last two days,
    • \n
  • part of the amount has already arrived,
    • \n
  • the invoice is marked as disputed.
    • \n
\n 
invoice: 0131\nfirst:   due + 3 days\nsecond:  due + 21 days\ntone:    polite
\n

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

\n
\n
\n
\n
\n

Tone of the notes

\n
\n First notes are short and friendly. Second notes name the amount and the day it was due. Nothing is sent at weekends.\n
\n
\n
\n \n

No disputed invoices

\n

When a client questions an amount, mark the invoice and it will wait here.

\n Mark an invoice\n
\n
\n
\n
\n\n
\n
\n\n
\n\n \n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-gl-3333\",\n \"short\": \"v1-gl-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(241 247 255);\n --color-canvas: rgb(241 247 255);\n --color-surface: rgb(255 255 255 / 0.4);\n --color-surface-alt: rgb(255 255 255 / 0.6);\n --color-surface-strong: rgb(255 255 255 / 0.8);\n --color-bar: rgb(225 236 244 / 0.6);\n --color-bar-text: rgb(39 55 76);\n --color-bar-alt: rgb(241 247 255 / 0.6);\n --color-bar-alt-text: rgb(39 55 76);\n --color-inverse: rgb(33 58 90);\n --color-inverse-text: rgb(255 255 255);\n --color-text: rgb(39 55 76);\n --color-text-muted: rgb(39 55 76 / 0.72);\n --color-heading: rgb(31 57 88);\n --color-heading-alt: rgb(33 58 90);\n --color-link: rgb(47 110 211);\n --color-link-quiet: rgb(39 55 76);\n --color-link-visited: rgb(120 64 184);\n --color-link-hover: rgb(73 138 255);\n --color-link-active: rgb(31 57 88);\n --color-border: rgb(255 255 255 / 0.6);\n --color-border-strong: rgb(128 175 231);\n --color-border-muted: rgb(39 55 76 / 0.11);\n --color-accent: rgb(47 110 211);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(128 175 231);\n --color-fill-1: rgb(128 175 231);\n --color-fill-2: rgb(80 149 228);\n --color-fill-3: rgb(73 138 255);\n --color-fill-4: rgb(225 236 244);\n --color-button: rgb(47 110 211);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(31 57 88);\n --color-button-secondary: rgb(255 255 255 / 0.25);\n --color-button-secondary-text: rgb(31 57 88);\n --color-input: rgb(255 255 255 / 0.8);\n --color-input-text: rgb(39 55 76);\n --color-input-border: rgb(128 175 231);\n --color-disabled: rgb(225 236 244);\n --color-disabled-text: rgb(134 134 139);\n --color-danger: rgb(233 66 86);\n --color-danger-surface: rgb(248 200 192 / 0.6);\n --color-success: rgb(11 158 67);\n --color-warning: rgb(255 90 0);\n --color-notice: rgb(33 58 90 / 0.75);\n --color-notice-text: rgb(255 255 255);\n --color-focus: rgb(73 138 255);\n --color-shadow: rgb(71 97 206 / 0.36);\n --color-overlay: rgb(39 55 76 / 0.61);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: Inter, -apple-system, Nunito, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 64px;\n --text-h1: 28px;\n --text-h2: 24px;\n --text-h3: 16px;\n --line-body: 1.6;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 300;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 22px;\n --radius-panel: 6px;\n --radius-pill: 30px;\n --radius-page: 14px;\n --shadow-panel: 0 10px 21px 0 var(--color-shadow), inset 0 2px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 -2px 0 0 color-mix(in srgb, black 12%, transparent);\n --shadow-control: 0 2px 8px 0 var(--color-shadow), inset 0 1px 0 0 color-mix(in srgb, white 35%, transparent);\n --shadow-control-hover: 0 5px 15px 0 var(--color-shadow);\n --shadow-control-pressed: inset 0 1px 12px 0 var(--color-shadow);\n --shadow-dialog: 0 12px 24px 0 var(--color-shadow), inset 0 2px 0 0 color-mix(in srgb, white 55%, transparent), inset 0 -2px 0 0 color-mix(in srgb, black 12%, transparent);\n --shadow-text: none;\n --fill-page:\n radial-gradient(circle 150px at 86% 250px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 84px at 7% 520px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 210px at 97% 1280px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 120px at 4% 1850px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 170px at 92% 2550px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 110px at 10% 3250px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n radial-gradient(circle 190px at 88% 3950px, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 6%, transparent) 99%, transparent 100%),\n linear-gradient(180deg, var(--color-fill-2) 0, var(--color-fill-1) 380px, var(--color-page) 1000px, var(--color-fill-4) 2100px, var(--color-page) 3100px, var(--color-fill-1) 4400px);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 40%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --fill-button-secondary: radial-gradient(circle at 30% 20%, color-mix(in srgb, white 15%, transparent), transparent 70%), var(--color-button-secondary);\n --transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 10px;\n}\n" } }