{ "id": "v1-gl-24bb", "long_id": "v1.glassmorphism.app.s02.p04.t11.u11", "name": "Glassmorphism sheet app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panels with a blurred backdrop, a 1px light border and a soft shadow, floating over a saturated gradient. It was common in tool pages, settings screens and operating-system chrome, set in a system sans with white text. This pack is the single-sheet form of it: a floating pill of navigation, a centred title on the backdrop, and one large sheet of glass in a narrow column that holds the whole page as groups of settings-style rows, with tilted shards of glass scattered behind it.", "url": "https://chrono.skin/s/v1-gl-24bb", "preview_url": "https://chrono.skin/s/v1-gl-24bb/specimen.html", "files": { "STYLE.md": "# Glassmorphism sheet app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panels with a blurred backdrop, a 1px light border and a soft shadow, floating over a saturated gradient. It was common in tool pages, settings screens and operating-system chrome, set in a system sans with white text. This pack is the single-sheet form of it: a floating pill of navigation, a centred title on the backdrop, and one large sheet of glass in a narrow column that holds the whole page as groups of settings-style rows, with tilted shards of glass scattered behind it.\n\n## Layout\n\n- Content column: `--size-page` (880px), centred, with `--space-4` (18px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport; `.ds-page__backdrop` scatters eight tilted `.ds-page__shard` plates (220px by 264px, 40% opacity) down both margins. There are no side columns anywhere.\n- Navigation: `.ds-nav` is a pill of light glass, `--size-nav` (56px) high and only as wide as its content, centred 18px below the top edge and sticky 12px from it. Brand on the left, links in the middle, one button at the right end. It is never a full-width bar.\n- Home page: under the pill comes the `.ds-hero`, centred on the backdrop with 44px above and below. Then a `.ds-page__stack` at 28px gaps: the main `.ds-page__sheet` (notices, figures, the room list, the scene tiles) and the `.ds-sidebar` sheet of related links.\n- The sheet: `.ds-page__sheet` is the only blurred surface in the column. It is cut into `.ds-page__group` sections by hairlines, each padded `--space-5` (28px) and opened by a small uppercase `.ds-page__group-title`. Inside a group, lists and tables are open rows with hairlines and no box; panels, stats, tiles and the empty state are wells: a lighter pane with a 1px border and no shadow or blur. `.ds-page__pair` puts two wells side by side.\n- Inner pages have no hero. The `.ds-breadcrumb` trail sits centred on the backdrop, 28px under the navigation pill and 12px above a sheet whose first section is the `.ds-page-header` (title and one line on the left, one action on the right, inside the glass). The next group holds `.ds-tabs` stretched across the full width of the sheet when the page has sub-pages, then come the groups of the page: figures, table, pagination, or the settings form and a last group with the buttons right-aligned. The column stays 880px; nothing sits beside the sheet. A dialog shows as a dimmed band under the sheet that opened it.\n- Views: the specimen is one site with five screens, one showing at a time; the pill and the footer are written once around them. `home` is the home view (hero, notices, figures, rooms, scenes, related links). `kitchen` is one room: its tabs, three figures, the week's table and the pagination by week. `schedules` lists the weekday schedules and shows the empty weekend beside a panel that explains why. `settings` is the room's form with its buttons and, under the sheet, the open dialog that the destructive button raises. `guide` is the reading page with the running text and the link states. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address, and `settings` marks the Rooms link.\n- Spacing scale: `--space-1` 4px (gaps inside the segmented tabs, label to hint), `--space-2` 8px (icon to text, stacked notices and dialog buttons, pagination gaps), `--space-3` 12px (row padding top and bottom, gaps between wells and buttons), `--space-4` 18px (well padding, form row padding, column side padding), `--space-5` 28px (group padding, gap between sheets, form label to control), `--space-6` 44px (hero padding, dialog band padding, gap above the footer), `--space-7` 80px (textarea height).\n- Form rows: `--size-label` (240px) for the label column, the control fills the rest. Controls are `--size-control` (40px) high.\n- Glass: the sheet and the sidebar use `backdrop-filter: blur(var(--backdrop-blur))`, the surface token for how strongly glass blurs what lies behind it (16px in this pack's surface set); the navigation pill and the dialog, the strongest glass, use three times that: `blur(calc(var(--backdrop-blur) * 3))` (48px). Never put a blurred element inside the sheet.\n- Below 720px the pairs, the tile grid and the form rows stack and the shards are hidden. Below 560px the navigation pill becomes a rounded block as wide as the column with the links on a second row, the hero title drops to `--text-h1`, group padding drops to 18px, table columns marked `.ds-table__opt` are hidden and the action of a list row or page header wraps under its text.\n- On a phone (560px and below) `.ds-nav__list` is the second row of the rounded block, its links spread over the width and kept on one line each (`white-space: nowrap`): the row scrolls sideways without a scrollbar if they do not fit. The current link stays a lighter pill. There is no menu button. Below 900px a tooltip on a form label opens at the left edge of the label, at most 26 characters wide.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two families: Inter for body and headings, and a monospace (`--font-ui`: Geist Mono, JetBrains Mono, then the system monospace) for buttons, inputs, navigation, tabs and table cells as well as code.\n- Sizes: `--text-base` 16px, `--text-ui` and `--text-small` 13px, `--text-large` 18px, `--text-h3` 18px, `--text-h2` 24px, `--text-h1` 36px, `--text-display` 56px.\n- Body is airy and headings are light: `--line-body` 1.6, `--line-heading` 1.33, `--line-display` 1.14; `--weight-heading`, `--weight-display` and `--weight-ui` 500, `--weight-bold` 600.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n- `--fill-page` layers a 24px grid of 1px dots over the ember glow (an oval 760px wide at the top centre, 620px ovals at alternating edges below) on the page colour.\n- Corners are tight: `--radius-control` 3px, `--radius-panel` 6px, `--radius-page` 10px; only `--radius-pill` (30px) stays round.\n- `--border-width` and `--border-width-strong` are both 2px: the outline is the surface. Glass is smoked, `--fill-panel` being `--color-surface` mixed with 35% black, so a panel is a darker pane inside a pale 2px frame.\n- Nothing floats: `--shadow-panel` and `--shadow-control` are `none`. Only the dialog casts a shadow (`--shadow-dialog`, 0 24px 48px in black). A hovered button gains a 2px bright ring, and `--focus-ring` is a 2px dashed line.\n- `--shadow-text` is `none`.\n- `--backdrop-blur` is 3px, the lightest of the era: the dot grid and the glow stay readable through a pane, only softened. The strongest glass of a layout blurs three times that, 9px.\n- Every fill is flat; transitions run 0.15s.\n\n## Components\n\n- `.ds-page`: on ``; paints the gradient backdrop and sets the base type. `.ds-page__backdrop` with `.ds-page__shard` (`--a` to `--h`) is the scattered glass behind the column. `.ds-page__inner` is the width container, `.ds-page__stack` the vertical stack of sheets, `.ds-page__sheet` the large sheet of glass, `.ds-page__group` one of its sections, `.ds-page__group-title` the small uppercase title of a section, `.ds-page__pair` two equal wells, `.ds-page__icon` an 18px icon. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: floating pill of light glass inside `.ds-nav__wrap`. The `.ds-brand` first, then `.ds-nav__list`, `.ds-nav__link`; the current item is `is-current`, a lighter pill with a border. At most five links and one button.\n- `.ds-brand`: the site's mark and name, at the left end of the navigation pill: `.ds-brand__mark` is a small tile (28px) dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` is the name in the heading font at `--text-h3` in `--color-heading`, with the text shadow. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: centred page introduction on the backdrop: `.ds-hero__title` at the display size, `.ds-hero__lead` (24px, at most 44 characters wide), `.ds-hero__actions` with large buttons. No art; the shards behind the column are the decoration.\n- `.ds-page-header`: head of an inner page, the first section of its sheet: `.ds-page-header__text` holds `.ds-page-header__title` (32px) and one line of `.ds-page-header__lead`; `.ds-page-header__actions` sits at the right, centred on the text, with one primary button. Put the breadcrumb directly above the sheet.\n- `.ds-prose`: running text in a group of the sheet: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark glass code block.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for white, undecorated links in tables and titles. `.ds-link__sample` is a row of links.\n- `.ds-button`: primary, solid white pill, 40px high. `.ds-button--secondary` is a glass pill with a light border; `.ds-button--danger` is the destructive action: a glass pill tinted with the danger colour at 70%, solid on hover; use it once per group. `.ds-button--large` for the hero, `.ds-button--block` for full width in a dialog; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` right-aligns a group of buttons in the last section of a sheet.\n- `.ds-form`: settings rows. Each `.ds-form__field` is a row with the `.ds-form__label` on the left (240px, with an optional `.ds-form__hint` under it) and a `.ds-form__control` on the right, rows divided by hairlines. Controls: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range` (thin light track, round glass thumb), `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`.\n- `.ds-table`: open table inside a group: small uppercase head cells over a 1px rule, hairline row dividers, no box and no fill. `.ds-table__opt` marks a column hidden below 560px, `.ds-table__num` right-aligns a numeric column, `.ds-table__meta` is muted text, `is-hover` on a row tints it.\n- `.ds-list`: settings rows divided by hairlines: `.ds-list__icon` (a 40px round chip), `.ds-list__body` with `.ds-list__title` and `.ds-list__meta`, then a muted `.ds-list__value` and one secondary button.\n- `.ds-panel`: a well inside the sheet: lighter pane, 1px border, 10px radius, no shadow, no blur. `.ds-panel__title` (19px, bold) and `.ds-panel__body` (14px). Never place it directly on the backdrop.\n- `.ds-grid`: two columns of tinted tiles inside a group. `.ds-grid__cell` with `--1` to `--4` picks the tint; inside, `.ds-grid__head` holds the uppercase `.ds-grid__label` and a badge, then `.ds-grid__value` and `.ds-grid__meta`.\n- `.ds-stat`: one summary figure as a centred well: `.ds-stat__value` (32px, bold) above a muted `.ds-stat__label`. The row is `.ds-stat__row`, three to four equal wells 12px apart.\n- `.ds-tabs`: segmented control on dark glass across the full width of the sheet; each `.ds-tabs__item` takes an equal share, `.ds-tabs__tab` with `is-current` for the selected segment.\n- `.ds-badge`: pill for counts and markers: white by default, `.ds-badge--alt` solid green for \"new\", `.ds-badge--glass` neutral glass for quiet values. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a dark glass pill with white text, a 1px ring and a leading 8px dot in the status colour.\n- `.ds-sidebar`: not a column: a second, smaller sheet under the main one. `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list` in three columns, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: banner in the first group of the sheet, pale frosted fill with dark text; `.ds-notice--error` takes the danger surface, a danger border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several 8px apart.\n- `.ds-pagination`: centred row of round glass cells in its own group, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill.\n- `.ds-breadcrumb`: small centred trail on the backdrop above an inner page's sheet, `.ds-breadcrumb__item` separated by chevrons, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed band (`--color-overlay`) with a narrow centred `.ds-dialog__box` (380px, strongly blurred glass, 20px radius): `.ds-dialog__title`, `.ds-dialog__body`, and `.ds-dialog__actions` with the buttons stacked full width, the confirming one first. 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 well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button, all centred.\n- `.ds-footer`: two centred lines of small text on the backdrop, no bar: a line of text, then `.ds-footer__links` with `.ds-footer__link`.\n- `.ds-menu`: a drop-down of the strongest glass under its `.ds-menu__trigger`, shown on hover or focus (or with `is-open`): `.ds-menu__list` of `.ds-menu__link` rows with an optional `.ds-menu__meta`. Use it for the account or workspace menu; `.ds-menu__group` sets it beside a button, `.ds-menu__list--start` hangs it from the left edge.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. Use it for questions and for settings that are rarely opened; `.ds-accordion--flush` drops its own sheet when it sits inside another panel.\n- `.ds-tooltip`: a round hint mark inside a form label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). One sentence.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. `.ds-switch__group` is the tinted box that holds a few of them, divided by hairlines.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--85`, `--90`. Use it under a figure that is a share of a whole; `.ds-progress__label` is an optional line above it.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a list or table touch and are divided by a hairline.\n- `block-gap <= 44px`: sheets sit 28px apart; 44px, above the footer, is the largest gap.\n- `content-width <= 880px`: everything lives in one narrow centred column.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-size >= 13px`: controls and meta text are the smallest text.\n- `font-weight <= 600`: headings are medium; 600 is for bold only.\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- `underlined-links <= 25%`: underline is a hover state.\n- `uppercase-text <= 10%`: uppercase is for small labels only.\n- `border-width <= 2px`: every border is 2px, never heavier.\n- `border-radius <= 30px`: panels are 6px, large containers 10px, pills 30px.\n- `box-shadow-blur <= 48px`: only the dialog casts a shadow, blurred 48px.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 10%`: glass is a flat translucent fill.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. New content goes into the sheet as another `.ds-page__group`; a boxed thing inside a group starts from `.ds-panel` (lighter pane and 1px border, no shadow, no blur), a row of things from `.ds-list__item`, a control from `.ds-button--secondary` or `.ds-form__input`, an overlay from `.ds-dialog__box`. Something that does not belong to the page's main subject becomes a second sheet in the `.ds-page__stack`, never a column beside the first. 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 text white on glass, and keep the column at 880px.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 880px;\n --size-nav: 56px;\n --size-control: 40px;\n --size-label: 240px;\n --size-dialog: 380px;\n --size-tile: 128px;\n --size-shard: 220px;\n --size-icon: 18px;\n --size-dot: 8px;\n --size-thumb: 20px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 18px;\n --space-5: 28px;\n --space-6: 44px;\n --space-7: 80px;\n}\n\n/* shell: backdrop with scattered glass shards, one centred column */\n.ds-page {\n position: relative;\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__backdrop {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n}\n.ds-page__shard {\n position: absolute;\n width: var(--size-shard);\n height: calc(var(--size-shard) * 1.2);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n opacity: 0.4;\n}\n.ds-page__shard--a {\n top: 3%;\n left: 5%;\n transform: rotate(-16deg);\n}\n.ds-page__shard--b {\n top: 9%;\n left: 82%;\n transform: rotate(24deg);\n}\n.ds-page__shard--c {\n top: 22%;\n left: 9%;\n transform: rotate(12deg);\n}\n.ds-page__shard--d {\n top: 36%;\n left: 78%;\n transform: rotate(-22deg);\n}\n.ds-page__shard--e {\n top: 52%;\n left: 3%;\n transform: rotate(-8deg);\n}\n.ds-page__shard--f {\n top: 66%;\n left: 84%;\n transform: rotate(15deg);\n}\n.ds-page__shard--g {\n top: 80%;\n left: 8%;\n transform: rotate(28deg);\n}\n.ds-page__shard--h {\n top: 90%;\n left: 76%;\n transform: rotate(-12deg);\n}\n.ds-page__inner {\n position: relative;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4) var(--space-6);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-page__sheet {\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__group {\n padding: var(--space-5);\n}\n.ds-page__group + .ds-page__group {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-page__group-title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-page__pair {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: stretch;\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__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n\n/* nav: floating pill of light glass, centred above the sheet */\n.ds-nav {\n position: sticky;\n top: var(--space-3);\n z-index: 2;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n width: fit-content;\n max-width: calc(100% - 2 * var(--space-4));\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-panel);\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__wrap {\n position: relative;\n padding-top: var(--space-4);\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-thumb) + var(--space-2));\n height: calc(var(--size-thumb) + 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-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.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\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-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=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#kitchen:target) .ds-nav__link[href=\"#kitchen\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#kitchen\"],\n.ds-page:has(#schedules:target) .ds-nav__link[href=\"#schedules\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--color-surface-alt);\n border-color: var(--color-border);\n}\n\n/* breadcrumb: centred trail on the backdrop, above the sheet */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 var(--space-3);\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: the first group of an inner page's sheet */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-5);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: centred title, lead and actions on the backdrop */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) 0;\n text-align: center;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 44ch;\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-5);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--radius-panel);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n 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-ui);\n line-height: var(--line-heading);\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}\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: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n 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-base);\n}\n.ds-button--block {\n width: 100%;\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 justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* panel: a well inside the sheet, a lighter pane without shadow or blur */\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}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n\n/* form: settings rows, label on the left and control on the right */\n.ds-form {\n display: flex;\n flex-direction: column;\n}\n.ds-form__field {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-2) var(--space-5);\n align-items: start;\n padding: var(--space-4) 0;\n}\n.ds-form__field:first-child {\n padding-top: 0;\n}\n.ds-form__field + .ds-form__field {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding-top: var(--space-2);\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}\n.ds-form__control {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\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-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);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\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-6);\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 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 font-weight: var(--weight-body);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-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\n/* table: open rows inside the sheet, hairlines only */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n padding-top: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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 text-transform: uppercase;\n}\n.ds-table tbody tr + tr 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: settings rows, a round icon, title and meta, a value or action at the end */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--color-surface-alt);\n border-radius: 50%;\n color: var(--color-text);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n 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 color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__value {\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n font-variant-numeric: tabular-nums;\n}\n\n/* grid: two columns of tinted tiles inside the sheet */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-height: var(--size-tile);\n padding: var(--space-4);\n background-color: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\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__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n}\n.ds-grid__label {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-grid__value {\n margin-top: auto;\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 text-shadow: var(--shadow-text);\n}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: separate wells, figure above label, centred */\n.ds-stat__row {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n gap: var(--space-3);\n margin: 0;\n}\n.ds-stat {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n padding: var(--space-4) 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 text-align: center;\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\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: segmented control across the full width of the sheet */\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-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) + var(--space-1));\n}\n.ds-tabs__item {\n flex: 1;\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-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-align: center;\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-border-muted);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n 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 second, smaller sheet under the main one, links in three columns */\n.ds-sidebar {\n padding: var(--space-4) 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-sidebar__heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-1) var(--space-3);\n margin: 0 calc(-1 * var(--space-3));\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: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n}\n\n/* notice: a banner at the head of the sheet */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-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}\n\n/* pagination: centred row of round cells */\n.ds-pagination {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\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(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-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 narrow alert of strongly blurred glass, actions stacked full width */\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 text-align: center;\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 font-size: var(--text-ui);\n}\n.ds-dialog__actions {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin-top: var(--space-5);\n}\n\n/* empty state: a well with a round icon */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-5) 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 text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* footer: centred lines on the backdrop, no bar */\n.ds-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n margin-top: var(--space-6);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-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.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-accordion {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-thumb));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar--40 { width: 40%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-menu__list--start {\n right: auto;\n left: 0;\n}\n.ds-menu__group {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-stat__value .ds-progress,\n.ds-stat__item > .ds-progress,\n.ds-grid__cell .ds-progress {\n width: 100%;\n min-width: calc(var(--space-6) * 2);\n margin-top: var(--space-2);\n}\n.ds-accordion--flush {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n.ds-accordion--flush .ds-accordion__summary,\n.ds-accordion--flush .ds-accordion__body {\n padding-left: 0;\n padding-right: 0;\n}\n.ds-switch__group {\n padding: var(--space-3) var(--space-4);\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-form__label .ds-tooltip {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n@media (max-width: 720px) {\n .ds-page__pair,\n .ds-grid,\n .ds-form__field {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat__row {\n grid-auto-flow: row;\n }\n .ds-sidebar__list {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page__backdrop {\n display: none;\n }\n}\n@media (max-width: 560px) {\n .ds-nav {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2);\n width: auto;\n margin: 0 var(--space-4);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);\n border-radius: var(--radius-page);\n }\n .ds-nav__list {\n order: 3;\n flex-basis: 100%;\n justify-content: space-between;\n }\n .ds-hero {\n padding: var(--space-5) 0;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-page__group,\n .ds-page-header {\n padding: var(--space-4);\n }\n .ds-page-header__text,\n .ds-list__body {\n flex-basis: 60%;\n }\n .ds-list__item {\n flex-wrap: wrap;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-1);\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-button__row {\n justify-content: flex-start;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n}\n@media (max-width: 560px) {\n .ds-nav__list {\n gap: 0;\n min-width: 0;\n overflow-x: auto;\n scrollbar-width: none;\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n white-space: nowrap;\n }\n .ds-brand {\n min-width: 0;\n }\n}\n@media (max-width: 900px) {\n .ds-form__label {\n position: relative;\n }\n .ds-form__label .ds-tooltip {\n position: static;\n }\n .ds-form__label .ds-tooltip__tip {\n left: 0;\n max-width: min(26ch, 100%);\n transform: none;\n }\n}\n@media (max-width: 560px) {\n .ds-page-header__actions,\n .ds-form__actions,\n .ds-tabs,\n .ds-button__row {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 560px) {\n .ds-page-header__actions {\n flex: 0 1 auto;\n }\n}\n@media (max-width: 560px) {\n .ds-page__group:has(> .ds-table) {\n overflow-x: auto;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: warm when you are in\n\n\n\n\n\n
\n \n \n \n \n \n \n \n \n
\n\n
\n
\n \n \n chronoskin\n \n \n
\nSettings\n
\nOB\n\n
\n
\n
\n
\n\n
\n\n
\n\n
\n

Warm when you are in

\n

Seven rooms on one boiler, each kept at its own temperature.

\n
\n Set a schedule\n How it decides\n
\n
\n\n
\n\n
\n\n
\n
\n
\n \n
Frost guard is on. Every room is held above 7 °C until Sunday evening.
\n
\n
\n \n
The attic valve does not answer. It last reported at 06:20. Replace its batteries or move the hub closer.
\n
\n
\n
\n\n
\n

Right now

\n
\n
\n
Average indoors
\n
20.5 °C
\n
\n
\n
Rooms heating
\n
3 of 7
\n
\n
\n
Used today
\n
14.2 kWh
\n
\n
\n
\n\n
\n

Rooms

\n \n
\n\n
\n

Scenes

\n
\n
\n
Morning On
\n 21 °C\n Kitchen and bathroom from 06:30\n
\n
\n
Away Off
\n 15 °C\n Whole house while nobody is in\n
\n
\n
Night Off
\n 17 °C\n Bedrooms only, from 23:00\n
\n
\n
Guests Off
\n 20 °C\n Adds the back bedroom\n
\n
\n
\n\n
\n\n \n\n
\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. Rooms
    3. \n
  3. Kitchen
    4. \n
\n\n
\n\n
\n
\n

Kitchen

\n

One radiator valve and a window sensor, on the weekday schedule.

\n
\n
\n Boost for an hour\n
\n
\n\n
\n \n
\n\n
\n
\n
\n
Now
\n
19.8 °C
\n
\n
\n
Target until 21:00
\n
21.0 °C
\n
\n
\n
Used this week
\n
10.8 kWh
\n
\n
\n
\n\n
\n

This week

\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
DayStateWarm betweenTarget (°C)Used (kWh)
MondayReached06:30 to 08:15, 17:00 to 21:0021.02.6
TuesdayReached06:30 to 08:15, 17:00 to 21:0021.02.4
WednesdayWindow open06:30 to 07:10, 17:00 to 21:0021.01.9
ThursdayMissedBoiler locked out until 09:4021.00.8
FridayReached06:30 to 08:15, 16:00 to 22:0021.53.1
\n
\n\n
\n \n
\n\n
\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. Heating
    3. \n
  3. Schedules
    4. \n
\n\n
\n\n
\n\n
\n
\n

Schedules

\n

Times and targets a room follows. Scenes sit on top while they are on.

\n
\n
\n Assign to a room\n
\n
\n\n
\n

Weekdays

\n
    \n
  • \n \n
    \n Weekday, early start\n 06:30 to 08:15 and 17:00 to 21:00 · kitchen, bathroom, living room\n
    \n In use\n Open\n
    • \n
  • \n \n
    \n Weekday, late start\n 08:00 to 09:30 and 18:00 to 23:00 · both bedrooms\n
    \n In use\n Open\n
    • \n
  • \n \n
    \n Always on\n 18 °C day and night · no room follows it\n
    \n Unused\n Open\n
    • \n
\n
\n\n
\n

Weekend

\n
\n
\n \n

No schedule for the weekend

\n

Saturday and Sunday follow the weekday times until you add one.

\n Add weekend times\n
\n
\n

Frost guard Until Sunday

\n
\n Every room is held above 7 °C until Sunday evening, whatever its schedule says. Weekend times you add now start once frost guard ends.\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. Kitchen
    3. \n
  3. Settings
    4. \n
\n\n
\n\n
\n\n
\n
\n

Kitchen settings

\n

What the room is called, which times it follows and how low it may fall.

\n
\n
\n Back to the week\n
\n
\n\n
\n \n
\n\n
\n

Room settings

\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 Enter a temperature between 5 and 25 °C.\n
\n
\n
\n \n
\n \n
\n
\n
\n Open window\n
\n \n
\n\n\n
\n
\n
\n
\n
\n\n
\n
\n \n \n Cancel\n \n
\n
\n\n
\n\n
\n
\n

Remove the kitchen?

\n
The room leaves every schedule and scene. Its history stays in the energy report.
\n
\n Remove room\n Keep it\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. Heating
    3. \n
  3. Guide
    4. \n
\n\n
\n\n
\n
\n

Guide

\n

How the hub chooses which room gets heat, and when a schedule steps aside.

\n
\n
\n See the schedules\n
\n
\n\n
\n
\n

How the house decides

\n

Each room asks for heat on its own, and the boiler answers the room that is furthest from its target.

\n

A room has a target and a comfort band of half a degree around it. Inside the band the valve rests. The hub stores each change with the field set_by, so you can tell a schedule from a hand on the dial.

\n

Schedules

\n

A schedule is a list of times and targets for one room. Scenes sit on top: while a scene is on, its targets win.

\n

When a schedule is skipped

\n
    \n
  • A window in the room has been open for five minutes.
    • \n
  • Someone changed the dial in the last two hours.
    • \n
  • Frost guard is holding the whole house.
    • \n
\n 
room:   kitchen\nat:     06:30\ntarget: 21.0\nuntil:  08:15
\n
\n
\n\n
\n
\n
\nWhy is a room colder than its target?\n

The boiler answers the room that is furthest from its target first. The others follow within the hour.

\n
\n
\nWhat does an open window do?\n

Heating in that room stops after five minutes and starts again when the window closes.

\n
\n
\nCan a scene run on a timer?\n

Yes. A scene can end by itself after one to twelve hours.

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

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

\n
\n\n
\n
\n\n \n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s02.p04.t11.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-24bb\",\n \"short\": \"v1-gl-24bb\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(9 13 16);\n --color-canvas: rgb(9 13 16);\n --color-surface: rgb(144 161 185 / 0.1);\n --color-surface-alt: rgb(144 161 185 / 0.16);\n --color-surface-strong: rgb(144 161 185 / 0.28);\n --color-bar: rgb(9 13 16 / 0.7);\n --color-bar-text: rgb(226 232 240);\n --color-bar-alt: rgb(21 30 40 / 0.6);\n --color-bar-alt-text: rgb(226 232 240);\n --color-inverse: rgb(226 232 240);\n --color-inverse-text: rgb(9 13 16);\n --color-text: rgb(226 232 240);\n --color-text-muted: rgb(144 161 185);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(226 232 240);\n --color-link: rgb(60 227 171);\n --color-link-quiet: rgb(226 232 240);\n --color-link-visited: rgb(102 160 245);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(199 242 132);\n --color-border: rgb(255 255 255 / 0.12);\n --color-border-strong: rgb(255 255 255 / 0.2);\n --color-border-muted: rgb(255 255 255 / 0.06);\n --color-accent: rgb(199 242 132);\n --color-accent-text: rgb(9 13 16);\n --color-accent-alt: rgb(39 117 202);\n --color-fill-1: rgb(6 76 67);\n --color-fill-2: rgb(39 117 202);\n --color-fill-3: rgb(7 82 41);\n --color-fill-4: rgb(99 63 13);\n --color-button: rgb(199 242 132);\n --color-button-text: rgb(9 13 16);\n --color-button-hover-text: rgb(9 13 16);\n --color-button-secondary: rgb(144 161 185 / 0.16);\n --color-button-secondary-text: rgb(226 232 240);\n --color-input: rgb(9 13 16 / 0.55);\n --color-input-text: rgb(226 232 240);\n --color-input-border: rgb(255 255 255 / 0.12);\n --color-disabled: rgb(21 30 40);\n --color-disabled-text: rgb(73 86 104);\n --color-danger: rgb(242 54 116);\n --color-danger-surface: rgb(242 54 116 / 0.14);\n --color-success: rgb(96 205 136);\n --color-warning: rgb(255 153 0);\n --color-notice: rgb(39 117 202 / 0.28);\n --color-notice-text: rgb(226 232 240);\n --color-focus: rgb(199 242 132);\n --color-shadow: rgb(0 0 0 / 0.4);\n --color-overlay: rgb(9 13 16 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"SF Pro Text\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: Inter, \"SF Pro Text\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n --font-ui: \"Geist Mono\", \"JetBrains Mono\", ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, monospace;\n --font-mono: \"Geist Mono\", \"JetBrains Mono\", ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 24px;\n --text-h3: 18px;\n --line-body: 1.6;\n --line-heading: 1.33;\n --line-display: 1.14;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 500;\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: 2px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 6px;\n --radius-pill: 30px;\n --radius-page: 10px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 0 0 2px var(--color-border-strong);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 24px 48px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page:\n radial-gradient(circle, color-mix(in srgb, var(--color-text) 16%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,\n radial-gradient(ellipse 760px 420px at 50% 0, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 100% 1500px, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 0 2700px, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 100% 3900px, var(--color-fill-1), transparent),\n var(--color-page);\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: color-mix(in srgb, var(--color-surface), black 35%);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 60%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 3px;\n}\n" } }