{ "id": "v1-gl-2b91", "long_id": "v1.glassmorphism.app.s02.p11.t09.u01", "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-2b91", "preview_url": "https://chrono.skin/s/v1-gl-2b91/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- One family for everything, \"Helvetica Neue\" then Helvetica and Arial; `--font-mono` for code.\n- The scale is small and dense: `--text-base` and `--text-ui` 14px, `--text-small` 12px, `--text-large` 18px, `--text-h3` 16px, `--text-h2` 22px, `--text-h1` 28px, `--text-display` 56px.\n- Line height is tight: `--line-body` 1.375, `--line-heading` 1.3, `--line-display` 1.07.\n- Weights: `--weight-body` 400, `--weight-ui` 500, `--weight-heading` and `--weight-display` 600, `--weight-bold` 700.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n- Backdrop: `--color-page` is a blue-black (7 8 10) with a fine grid of faint dots and one ember glow: `--color-fill-1` (150 28 36), a dark crimson, falling from the top centre and returning at the edges further down. `--color-fill-2` (graphite, 67 67 69), `--color-fill-3` (62 43 104) and `--color-fill-4` (80 70 228) are used only as tile tints.\n- Glass is almost clear: `--color-surface` white at 5%, `--color-surface-alt` 9%, `--color-surface-strong` 16%. The edge does the work: `--color-border` white at 12%, `--color-border-strong` white at 40% for dialogs, notices and secondary buttons, `--color-border-muted` 6% for hairlines.\n- Dark glass: `--color-bar` (black at 60%) for bars, table heads and code blocks, `--color-bar-alt` (17 18 20 at 70%) for tabs, footer and status badges, `--color-input` (17 18 20 at 80%) for form controls.\n- Text is white; `--color-text-muted` is neutral grey (156 156 157) with no colour cast, and `--color-heading-alt` is light grey (230 230 230).\n- `--color-button` is a light grey solid (230 230 230) with near-black text, the brightest thing on the page. The secondary button is clear glass with the bright edge.\n- `--color-accent`, `--color-link` and `--color-focus` are sky blue (86 194 255) with near-black text on it. `--color-accent-alt` is indigo (80 70 228) with white text.\n- Status: `--color-danger` is the coral red of the glow family (255 99 99), `--color-success` 89 212 153, `--color-warning` 255 197 49. `--color-notice` is the accent at 10% with light grey text.\n- `--color-shadow` and `--color-overlay` are black at 60%.\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 >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are semibold; 700 is for bold only.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.4`: body text is set at 1.375.\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`: borders are 1px hairlines; 2px appears only as the focus ring.\n- `border-radius <= 30px`: panels are 12px, large containers 16px, controls 4px; only pills and round dots go higher.\n- `box-shadow-blur <= 40px`: shadows are soft but bounded: 32px on panels, 40px on dialogs.\n- `gradient-fills <= 10%`: glass is a flat translucent fill; gradients are the backdrop, the orbs and a faint sheen on tiles and secondary buttons.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. 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.p11.t09.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-2b91\",\n \"short\": \"v1-gl-2b91\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(7 8 10);\n --color-canvas: rgb(7 8 10);\n --color-surface: rgb(255 255 255 / 0.05);\n --color-surface-alt: rgb(255 255 255 / 0.09);\n --color-surface-strong: rgb(255 255 255 / 0.16);\n --color-bar: rgb(0 0 0 / 0.6);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(17 18 20 / 0.7);\n --color-bar-alt-text: rgb(230 230 230);\n --color-inverse: rgb(230 230 230);\n --color-inverse-text: rgb(7 8 10);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(156 156 157);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(230 230 230);\n --color-link: rgb(86 194 255);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(147 130 255);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(255 99 99);\n --color-border: rgb(255 255 255 / 0.12);\n --color-border-strong: rgb(255 255 255 / 0.4);\n --color-border-muted: rgb(255 255 255 / 0.06);\n --color-accent: rgb(86 194 255);\n --color-accent-text: rgb(7 8 10);\n --color-accent-alt: rgb(80 70 228);\n --color-fill-1: rgb(150 28 36);\n --color-fill-2: rgb(67 67 69);\n --color-fill-3: rgb(62 43 104);\n --color-fill-4: rgb(80 70 228);\n --color-button: rgb(230 230 230);\n --color-button-text: rgb(7 8 10);\n --color-button-hover-text: rgb(0 0 0);\n --color-button-secondary: rgb(255 255 255 / 0.06);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(17 18 20 / 0.8);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.12);\n --color-disabled: rgb(31 32 37);\n --color-disabled-text: rgb(106 107 108);\n --color-danger: rgb(255 99 99);\n --color-danger-surface: rgb(255 99 99 / 0.1);\n --color-success: rgb(89 212 153);\n --color-warning: rgb(255 197 49);\n --color-notice: rgb(86 194 255 / 0.1);\n --color-notice-text: rgb(230 230 230);\n --color-focus: rgb(86 194 255);\n --color-shadow: rgb(0 0 0 / 0.6);\n --color-overlay: rgb(0 0 0 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Monaco, Menlo, Consolas, \"Courier New\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 56px;\n --text-h1: 28px;\n --text-h2: 22px;\n --text-h3: 16px;\n --line-body: 1.375;\n --line-heading: 1.3;\n --line-display: 1.07;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 600;\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: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 12px;\n --radius-pill: 30px;\n --radius-page: 16px;\n --shadow-panel: 0 8px 32px 0 var(--color-shadow);\n --shadow-control: 0 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 0 4px 30px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 20px 40px 0 var(--color-shadow);\n --shadow-text: 0 2px 4px var(--color-shadow);\n --fill-page:\n radial-gradient(circle 560px at 8% 180px, var(--color-fill-3), transparent),\n radial-gradient(circle 640px at 88% 420px, var(--color-fill-2), transparent),\n radial-gradient(circle 520px at 30% 1150px, var(--color-fill-2), transparent),\n radial-gradient(circle 600px at 95% 1650px, var(--color-fill-3), transparent),\n radial-gradient(circle 560px at 10% 2250px, var(--color-fill-4), transparent),\n radial-gradient(circle 620px at 75% 2900px, var(--color-fill-3), transparent),\n radial-gradient(circle 560px at 20% 3600px, var(--color-fill-2), transparent),\n linear-gradient(160deg, var(--color-fill-1) 0%, var(--color-page) 55%, var(--color-fill-1) 100%);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 70%);\n --fill-button-secondary: linear-gradient(color-mix(in srgb, white 15%, transparent), transparent), var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 6px;\n}\n" } }