{ "id": "v1-nm-2222-dc", "long_id": "v1.neumorphism.app.s02.p02.t02.u02.dc", "name": "Neumorphism console", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "app", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "density": "compact", "summary": "Neumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. This pack is the style's favourite showpiece, the control panel: a centred column with a sunk navigation track, a centred headline and one deep raised console that holds a dial, sliders, switches and lamp keys, the way smart home, player and thermostat concepts of those years were drawn. It is set in a small, dense grotesque on a cool grey-lilac surface with slate-indigo text and one royal blue accent, and its relief is the deepest of the era.", "url": "https://chrono.skin/s/v1-nm-2222-dc", "preview_url": "https://chrono.skin/s/v1-nm-2222-dc/specimen.html", "files": { "STYLE.md": "# Neumorphism console\n\n## Summary\n\nNeumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, a light one towards the top left and a dark one towards the bottom right. This pack is the style's favourite showpiece, the control panel: a centred column with a sunk navigation track, a centred headline and one deep raised console that holds a dial, sliders, switches and lamp keys, the way smart home, player and thermostat concepts of those years were drawn. It is set in a small, dense grotesque on a cool grey-lilac surface with slate-indigo text and one royal blue accent, and its relief is the deepest of the era.\n\n## Layout\n\n- One centred column: `--size-page` (1040px) with `--space-5` (24px) side padding. There is no page sidebar and no multi-column page grid; the page does not stretch, the surface colour fills the rest of the viewport.\n- Navigation: `.ds-nav` is not a bar. On a row `--size-nav` (56px) high, 24px below the top edge, the brand stands on the bare page at the left, a sunk pill track with the section links sits in the exact centre, and round `.ds-key` keys (alerts, account) stand at the right.\n- Home page, top to bottom in `.ds-page__body`, blocks `--space-7` (48px) apart: the centred `.ds-hero`; the `.ds-console`; the `.ds-grid` of four big keys; then one `.ds-page__row` of equal columns (the activity list beside notices and a panel).\n- The console is one raised body across the full column with three columns divided by 1px rules: `--size-rail` (232px) for the `.ds-sidebar` (rooms, scenes), the centre for the `.ds-dial`, its plus and minus keys and the mode `.ds-tabs`, and `--size-rail` again for sliders and switches.\n- Inner pages have no hero and no console. Under the navigation come the `.ds-breadcrumb` and the `.ds-page-header` (title at `--text-h1` left, actions right, on the bare page), then, 32px apart in one `.ds-page__section` stack, the working blocks. A list page: the `.ds-stat` readout strip, the `.ds-tabs` keys left-aligned (`.ds-tabs--start`), the `.ds-table`, the pagination centred under it (`.ds-pagination--centre`). A form page: the form in a `.ds-panel` with its fields in two columns (`.ds-form__grid`), then a `.ds-page__row` of small panels. A page of two kinds of content uses one `.ds-page__row`: table or prose in the left half, a `.ds-page__stack` of dialog, empty state or panels in the right. There is no aside column.\n- Views. The specimen is one site with five views, each `
` inside `.ds-page__inner`; the navigation row and the footer stand outside them and one view shows at a time. `home` is the living room: hero, console, the four big keys, the activity list beside notices and tonight's panel. `devices` is a list page in two columns: the table of devices beside the dialog a lock opens and the empty state of a room without devices. `schedules` is the full-width list page: readout strip, tab keys, table, pagination. `new` is the form page reached from the schedules: the two-column form in a panel and two small panels under it. `scenes` is the text page: prose beside three small panels. The navigation track raises the link of the current view, by one `:has()` rule per view next to `.ds-nav__link.is-current`; `new` marks Schedules.\n- Spacing scale: `--space-1` 4px (gaps inside the navigation track, list bullets), `--space-2` 8px (label to control, lamp to label), `--space-3` 12px (between tab keys, icon to text), `--space-4` 16px (between buttons, row padding, dial rim), `--space-5` 24px (panel and key padding, between list rows, between form fields, console column padding), `--space-6` 32px (between raised blocks of a stack, between grid keys, console top and bottom padding), `--space-7` 48px (between the page's main blocks, between the two columns of a row), `--space-8` 64px (above the footer).\n- Other sizes: `--size-dial` 264px, `--size-key` 56px (large round key; a grid key is at least three times this high), `--size-chip` 44px (colour chip, list status well), `--size-dialog` 440px.\n- Raised blocks need room for their shadows: never closer than `--space-5`. The console is the only raised body that holds raised things, and those are controls (dial, keys), never panels.\n- `--size-rule` (1px) is the weight of the rules between table rows, console columns and readout figures; it stays when a surface part sets `--border-width` to 0.\n- Below 900px the console, the rows and the form grid stack, the grid and readout drop to two columns, and the navigation becomes two lines: brand and keys, then the link track centred. Below 560px the side padding drops to `--space-4`, the hero title takes `--text-h1`, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways.\n\n## Typography and colour roles\n\n- One family for everything: `--font-body`, `--font-heading` and `--font-ui` are Inter, then Helvetica Neue and Arial; `--font-mono` is for code only.\n- The scale is small and dense: `--text-base` and `--text-ui` 14px, `--text-small` 12px (meta, labels, badges), `--text-large` 16px (lead, large buttons), `--text-h3` 16px, `--text-h2` 20px (also readout figures), `--text-h1` 30px, `--text-display` 48px for the hero title and the dial figure only.\n- Weights are heavy for the size: `--weight-body` 400, `--weight-ui` and `--weight-bold` 600, `--weight-heading` and `--weight-display` 700. `--line-body` 1.5, `--line-heading` 1.3, `--line-display` 1.2.\n- No tracking. Uppercase appears only on table head cells, written in the component; the tokens set none.\n- One surface: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-input` and `--color-button-secondary` are the same cool grey-lilac (230 231 238). `--color-surface-alt` (236 240 243) is a step lighter, for hovered rows and notices; `--color-surface-strong` (209 217 230) a step darker, for inline code, quiet and status badges, disabled controls, unlit lamps and the unused part of the dial arc.\n- The relief pair: `--color-shadow` (184 185 190) is the dark side and `--color-border-muted` (white) the light side of every shadow. `--color-border-muted` is used for nothing else.\n- Text is slate-indigo, never black: `--color-text` 68 71 106, `--color-text-muted` 82 84 128, `--color-heading` 49 52 75, `--color-heading-alt` for panel, console and sidebar titles and form labels.\n- Each text token goes with its own fill: `--color-bar-text` on `--fill-bar` (navigation track, table head), `--color-bar-alt-text` on `--fill-bar-alt` (footer, dark indigo), `--color-inverse-text` on `--fill-inverse` (code block), `--color-accent-text` on `--fill-accent` (badge, current page), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary button, round keys, tab keys, grid keys, pagination keys, current navigation link), `--color-input-text` on `--fill-input` (controls, dial face, readout strip, empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`. Secondary text on a key or in the readout is the same token at opacity 0.75 to 0.8, not `--color-text-muted`.\n- `--color-accent` and `--color-button` are one royal blue (45 76 200) with near-white text; `--color-link` is the same blue and `--color-link-visited` a muted violet. The accent marks the dial arc, the lit lamp of the current tab key, slider thumbs, switches that are on, the default badge and the current page. `--color-accent-alt` (pink, 232 62 140) only marks \"new\" as a dot, so that it cannot be mistaken for the green of `--color-success`.\n- `--color-fill-1` to `--color-fill-4` colour the round chips of the grid keys and nothing else; no text is set on them.\n- Status: `--color-success` 24 99 75, `--color-warning` 214 84 0, `--color-danger` 169 30 44, as 8px dots (badges, list wells, the lamp of a key that is on) and as error text.\n- Surface: `--border-width` is 0, so nothing has an outline; `--border-width-strong` (2px) is the focus and error ring. `--shadow-control` is 7px offset with 14px blur, `--shadow-panel` and `--shadow-control-hover` 14px and 28px, `--shadow-dialog` 20px and 60px (the console and the dialog); `--shadow-control-pressed` is the control pair inset. Corners: `--radius-control` 16px, `--radius-panel` 28px, `--radius-page` 30px (console, grid keys, dialog), `--radius-pill` 50px (navigation track, badges). Fills are flat. `--shadow-text` is `none`. Transitions run 0.3s.\n- One-off values with no token: discs use `border-radius: 50%`; the dial arc is a `conic-gradient()` over `--color-accent`, `--color-surface-strong` and `transparent`, turned by 225 degrees and stopped at percentages (the accent stop is the reading); inline code uses half of `--radius-control`; placeholders are `--color-input-text` at opacity 0.55.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface and sets the base type. `.ds-page__inner` is the centred column, `.ds-page__body` stacks the home page's blocks 48px apart, `.ds-page__section` stacks an inner page 32px apart, `.ds-page__stack` stacks blocks 32px apart inside a column, `.ds-page__row` is two equal columns, `.ds-page__heading` is a centred section title. `.ds-view` is one screen of the specimen (see Layout).\n- `.ds-brand`: the site's mark and name, in the header, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 36px) dressed like the primary button (`--fill-button`, `--color-button-text` for the mark, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-heading` because it stands on the bare page, not on a bar. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the top row. `.ds-nav__inner` is a three-part grid: the `.ds-brand`, the sunk pill `.ds-nav__list` of `.ds-nav__link` items, and `.ds-nav__tools`. The current link (`is-current`) is a raised pill inside the track; `is-hover` tints a link.\n- `.ds-key`: a round raised key, 40px, for one icon (`.ds-key__icon`) or one or two letters; `.ds-key--large` is 56px, used for the plus and minus keys beside the dial. `is-hover` lifts it, `is-active` sinks it.\n- `.ds-hero`: centred introduction on the bare page: an optional status `.ds-badge` above, `.ds-hero__title` at the display size (at most 22 characters a line), `.ds-hero__lead`, `.ds-hero__actions` with one primary and one secondary large button. The console follows directly below it.\n- `.ds-console`: the device, once per page: fill of the surface, `--radius-page`, `--shadow-dialog`. Children in order: a `.ds-sidebar`, `.ds-console__centre` (dial, `.ds-console__keys` with a `.ds-console__readout` between two keys, mode tabs), `.ds-console__side` (a `.ds-console__title` and a `.ds-form` of sliders and switches).\n- `.ds-dial`: a raised knob holding `.ds-dial__ring` (the accent arc) and the sunk `.ds-dial__face` with a `.ds-dial__figure` and a short `.ds-dial__caption`. One per console, for the one live value.\n- `.ds-page-header`: head of an inner page instead of the hero: `.ds-page-header__text` with `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` at the right with at most one primary button. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, blue, 40px high, raised; `is-hover` lifts it, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action, a surface-coloured key with `--color-danger` text, used once and last in a group. `.ds-button--large` (52px) for the hero. `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group.\n- `.ds-form`: a vertical stack of `.ds-form__field` (a `.ds-form__label` and a control): `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with `.ds-form__chevron`), `.ds-form__range` (sunk track, raised accent thumb; a label may carry the value in a `span` at its right end). `.ds-form__check` is a label row with a `.ds-form__checkbox` or a `.ds-form__switch` (sunk pill, raised thumb, flat accent when on). `is-error` on an input replaces its well with a 2px danger ring and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons. On an inner page the fields go into `.ds-form__grid`, two `.ds-form__column` stacks. Text controls are wells: `--shadow-control-pressed`.\n- `.ds-table`: one raised sheet with a small uppercase head and 1px rules between rows. `.ds-table__opt` marks a column that is dropped on a phone; `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `is-hover` on a row lightens it.\n- `.ds-list`: a stack of separate raised rows, 24px apart. Each `.ds-list__item` starts with a sunk `.ds-list__well` holding a `.ds-list__dot` (green; `--off` red, `--new` the second accent), then `.ds-list__body` with `.ds-list__title` and `.ds-list__meta`, then `.ds-list__time` at the right.\n- `.ds-panel`: the basic raised card: `.ds-panel__title`, `.ds-panel__body`.\n- `.ds-grid`: four big soft keys in a row, 32px apart. `.ds-grid__cell` (with `--1` to `--4` for the chip colour) is a link; `.ds-grid__top` holds the `.ds-grid__chip` and a `.ds-grid__state` word with a lamp; below come `.ds-grid__label` and `.ds-grid__meta`. `is-on` presses the key in and lights its lamp green.\n- `.ds-stat`: the row itself, a sunk readout strip; each `.ds-stat__item` is one centred figure, a `.ds-stat__label` above a `.ds-stat__value` with a `.ds-stat__meta` line under it. Three or four items, divided by rules. Use it at the top of an inner page.\n- `.ds-tabs`: a row of separate raised keys, `.ds-tabs__tab`, each with a small lamp; the current one (`is-current`) is pressed in and its lamp takes the accent. Centred inside the console for modes; `.ds-tabs--start` left-aligns it as the view switch of an inner page.\n- `.ds-badge`: pill for counts, filled with the accent (`--color-accent-text` on `--fill-accent`). `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`, for neutral counts; it has no shadow, because a well is too deep for a pill this small. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: the console's left column, flat: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` with a count badge at its right; the current link is pressed in. It has no fill or shadow of its own and is not used outside a console or panel.\n- `.ds-notice`: a message sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` takes `--color-danger`. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: raised 40px keys, `.ds-pagination__link`; the current page is flat and filled with the accent. `.ds-pagination--centre` centres the row under a table.\n- `.ds-breadcrumb`: small muted trail, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, 440px wide, raised by `--shadow-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: a sunk well with a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: full-width flat band in `--fill-bar-alt`, everything centred in a stack: `.ds-footer__brand`, `.ds-footer__links` with `.ds-footer__link`, one line of small print.\n\n## Never\n\n- `row-gap <= 24px`: list rows are separate keys 24px apart; table rows touch.\n- `block-gap <= 64px`: main blocks sit 48px apart; 64px above the footer is the largest gap.\n- `content-width <= 1040px`: everything stays in the centred column.\n- `font-size <= 48px`: the hero title and the dial figure are the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: underline is a hover state.\n- `uppercase-text <= 5%`: uppercase is for table heads only.\n- `border-width <= 2px`: nothing is outlined; 1px rules and the 2px ring are the only lines.\n- `border-radius <= 30px`: controls 16px, panels 28px, the console, grid keys and dialog 30px; only pills and discs go higher.\n- `box-shadow-blur <= 60px`: the console and the dialog blur 60px; nothing is softer.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 5%`: every fill is one flat colour; the dial arc is the single exception.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and decide first whether it is raised or sunk. A new device control goes inside the `.ds-console`: something to press starts from `.ds-key` or `.ds-tabs__tab` (`--fill-button-secondary`, `--color-button-secondary-text`, `--shadow-control`, pressed when on), something that shows a value starts from `.ds-dial__face` or `.ds-stat` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`). A container outside the console starts from `.ds-panel`. Keep every fill equal to the surface behind it, since the relief only reads on the shared colour, use each shadow token alone as the whole `box-shadow` value (a token may be `none`), and mark state with a lamp or a dot, not with a coloured fill. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep the page in the single centred column: a new section is a full-width block or a `.ds-page__row` pair, never a page sidebar.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1040px;\n --size-rail: 232px;\n --size-dial: 264px;\n --size-dialog: 440px;\n --size-nav: 56px;\n --size-control: 40px;\n --size-control-large: 52px;\n --size-key: 56px;\n --size-icon: 16px;\n --size-dot: 8px;\n --size-chip: 44px;\n --size-thumb: 20px;\n --size-track: 8px;\n --size-check: 20px;\n --size-rule: 1px;\n --size-brand: 36px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 13px;\n --space-5: 19px;\n --space-6: 26px;\n --space-7: 38px;\n --space-8: 51px;\n}\n\n/* shell: one centred column, everything stacked in it */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: 0 var(--space-5);\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/* the home view's stack of main blocks */\n.ds-page__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-7);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n.ds-page__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-7);\n align-items: start;\n}\n.ds-page__section {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n margin-top: var(--space-5);\n}\n.ds-page__heading {\n margin: 0 0 calc(-1 * var(--space-3));\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-align: center;\n}\n\n/* brand: the mark on a small raised key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: var(--size-thumb);\n height: var(--size-thumb);\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* nav: brand on the bare page, a sunk pill track in the middle, round keys at the right */\n.ds-nav {\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-nav__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-nav);\n} \n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-pill);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-text);\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(#devices:target) .ds-nav__link[href=\"#devices\"],\n.ds-page:has(#schedules:target) .ds-nav__link[href=\"#schedules\"],\n.ds-page:has(#new:target) .ds-nav__link[href=\"#schedules\"],\n.ds-page:has(#scenes:target) .ds-nav__link[href=\"#scenes\"] {\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__tools {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n\n/* key: a round soft key for one icon or one or two letters */\n.ds-key {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n margin: 0;\n padding: 0;\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-key:hover,\n.ds-key.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-key:active,\n.ds-key.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-key:focus-visible,\n.ds-key.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-key--large {\n width: var(--size-key);\n height: var(--size-key);\n font-size: var(--text-large);\n}\n.ds-key__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* hero: centred on the bare page, directly above the console */\n.ds-hero {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-7) 0 0;\n text-align: center;\n}\n.ds-hero__title {\n max-width: 22ch;\n margin: var(--space-4) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* console: the device. One deep raised body, three columns divided by rules */\n.ds-console {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr) var(--size-rail);\n align-items: stretch;\n padding: var(--space-6) 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-console__centre {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n padding: 0 var(--space-5);\n border-left: var(--size-rule) var(--border-style) var(--color-border);\n border-right: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-console__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: 0 var(--space-5);\n}\n.ds-console__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-console__keys {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n}\n.ds-console__readout {\n min-width: 12ch;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n}\n\n/* dial: a raised knob, an accent arc and a sunk face with the live figure */\n.ds-dial {\n display: flex;\n flex: none;\n width: var(--size-dial);\n height: var(--size-dial);\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-panel);\n}\n.ds-dial__ring {\n display: flex;\n flex: 1;\n padding: var(--space-2);\n background: conic-gradient(from 225deg, var(--color-accent) 0% 46%, var(--color-surface-strong) 46% 75%, transparent 75% 100%);\n border-radius: 50%;\n}\n.ds-dial__face {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: var(--fill-input);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-dial__figure {\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 font-variant-numeric: tabular-nums;\n}\n.ds-dial__caption {\n max-width: 16ch;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 76ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-panel);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n padding: var(--space-1);\n background: var(--fill-input);\n border-radius: calc(var(--radius-control) / 2);\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--fill-accent);\n background-clip: content-box;\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n/* the era's switch: a sunk pill with a raised thumb */\n.ds-form__switch {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 2 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: var(--fill-input);\n border-radius: var(--size-thumb);\n box-shadow: var(--shadow-control-pressed);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__switch::before {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__switch:checked {\n background: var(--fill-accent);\n box-shadow: none;\n}\n.ds-form__switch:checked::before {\n left: calc(var(--size-thumb) + var(--space-1));\n}\n/* the era's slider: a sunk track with a raised round thumb */\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n -webkit-appearance: none;\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one raised sheet, rows divided by a rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n/* panel */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* list: every row is its own soft key, with a sunk status well at the front */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n.ds-list__well {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-chip);\n height: var(--size-chip);\n background: var(--fill-input);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n}\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-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__time {\n flex: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n}\n.ds-list__dot {\n display: block;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-success);\n border-radius: 50%;\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n.ds-list__dot--new {\n background: var(--color-accent-alt);\n}\n\n/* grid: four big soft keys; the one that is on is pressed in */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-height: calc(3 * var(--size-key));\n padding: var(--space-5);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-button-secondary-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__cell.is-on {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: auto;\n}\n.ds-grid__chip {\n width: var(--size-chip);\n height: var(--size-chip);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-grid__cell--1 .ds-grid__chip {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__chip {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__chip {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__chip {\n background: var(--color-fill-4);\n}\n.ds-grid__state {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__state::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border-radius: 50%;\n}\n.ds-grid__cell.is-on .ds-grid__state::before {\n background: var(--color-success);\n}\n.ds-grid__label {\n margin-top: var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__meta {\n margin-top: var(--space-1);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* stats: one sunk readout strip, the figures divided by rules */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n padding: var(--space-4) 0;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-stat__item {\n padding: var(--space-1) var(--space-5);\n text-align: center;\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n opacity: 0.8;\n}\n.ds-stat__value {\n margin: var(--space-1) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__meta {\n display: block;\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n opacity: 0.8;\n}\n\n/* tabs: a row of separate soft keys with a lamp; the current key is pressed and lit */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab::before {\n content: \"\";\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border-radius: 50%;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-tabs__tab.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__tab.is-current::before {\n background: var(--fill-accent);\n}\n.ds-tabs--start {\n justify-content: flex-start;\n}\n\n/* sidebar: the console's left column, flat, the current room pressed in */\n.ds-sidebar {\n padding: 0 var(--space-4);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-3) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-5);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: 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 line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* form in two columns, for the wide inner page */\n.ds-form__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5) var(--space-7);\n align-items: start;\n}\n.ds-form__column {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n\n/* pagination sits centred under the table */\n.ds-pagination--centre {\n justify-content: center;\n}\n\n/* footer: a centred stack on the secondary bar */\n.ds-footer {\n margin-top: var(--space-8);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-6) var(--space-5);\n text-align: center;\n}\n.ds-footer__brand {\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\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-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n@media (max-width: 900px) {\n .ds-console,\n .ds-page__row,\n .ds-form__grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-console__centre {\n padding: var(--space-5);\n border-left: 0;\n border-right: 0;\n }\n .ds-nav__inner {\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-4);\n }\n .ds-nav__list {\n grid-column: 1 / -1;\n grid-row: 2;\n flex-wrap: wrap;\n justify-content: center;\n justify-self: center;\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat {\n row-gap: var(--space-4);\n }\n .ds-stat__item:nth-child(odd) {\n border-left: 0;\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-page__body,\n .ds-page__row {\n gap: var(--space-6);\n }\n .ds-hero {\n padding-top: var(--space-6);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-grid {\n gap: var(--space-5);\n }\n .ds-stat__item {\n padding: var(--space-1) var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-4);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer__links {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: home control\n\n\n\n\n\n
\n
\n
\n \n \n chronoskin\n \n
\n \n
\n \n +\n
\n
\n
\n\n
\n\n
\n
\n\n
\n All 14 devices online\n

The living room is at 21 degrees

\n

Heating holds until eleven tonight, then the house drops to its night setting of 17 degrees.

\n
\n Start evening scene\n Edit schedule\n
\n
\n\n\n
\n\n \n\n
\n
\n
\n
\n 21.5\n heating to 22\n
\n
\n
\n
\n \n Target 22.0\n \n
\n \n
\n\n
\n

Living room 5 on

\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 On\n Lights\n 4 of 9 lamps, 70%\n \n \n Off\n Blinds\n Open since 07:10\n \n \n On\n Front door\n Locked at 18:42\n \n \n Off\n Speakers\n Kitchen and study\n \n
\n\n\n
\n\n
\n \n
\n\n
\n
\n
\n \n
Cheaper power after 22:00. The water heater waits until then unless you start it by hand.
\n
\n
\n \n
The study sensor is offline. Heating in the study runs on its schedule alone.
\n
\n
\n\n
\n

Tonight 3 steps

\n
\n At 23:00 the lights fade over ten minutes, the blinds close and the heating drops to 17 degrees until 06:30.\n
\n
\n
\n\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Home
    3. \n
  3. Devices
    4. \n
\n\n
\n
\n

Devices

\n

Fourteen devices in five rooms. One has stopped reporting.

\n
\n
\n Schedules\n Add a device\n
\n
\n\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DeviceStatusRoomWatts
HeatingOnLiving room1 240
Ceiling lightOnLiving room42
Floor lampOffLiving room0
Front door lockLockedHallway2
BlindsOpenKitchen0
Water heaterWaitingKitchen0
Climate sensorOfflineStudy0
SpeakersOffStudy3
Bedside lampNot placedBedroom0
PanelOnHallway4
\n
\n\n
\n
\n
\n

Unlock the front door?

\n
The door stays unlocked for two minutes and then locks itself again.
\n
\n \n \n
\n
\n
\n\n
\n \n

Nothing in the garage yet

\n

Add a device to the garage and its controls appear here.

\n Add a device\n
\n
\n\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Living room
    3. \n
  3. Schedules
    4. \n
\n\n
\n
\n

Schedules

\n

Six schedules run in the living room, listed by the time they start.

\n
\n
\n Scenes\n New schedule\n
\n
\n\n
\n
\n
Running now
\n
2 of 6 schedules
\n
\n
\n
Used today
\n
6.4 kWh 1.1 under Tuesday
\n
\n
\n
Heating time
\n
3 h 20 since midnight
\n
\n
\n
Next change
\n
23:00 night setting
\n
\n
\n\n\n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ScheduleStatusDaysDeviceStartsRuns this month
Wake the houseDone todayMonday to FridayHeating, blinds06:3012
Daytime savingDone todayMonday to FridayHeating08:4512
Evening warm-upRunningEvery dayHeating, lamps17:3016
Night settingStarts soonEvery dayHeating, lamps, blinds23:0015
Weekend lie-inFailedSaturday, SundayBlinds09:004
Sunday reading lightDraftSundayFloor lamp16:000
\n\n\n \n\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Schedules
    3. \n
  3. New schedule
    4. \n
\n\n
\n
\n

New schedule

\n

One device, one value, at a time you choose. It runs from the next day it matches.

\n
\n
\n Back to schedules\n
\n
\n\n
\n

Sunday reading light Draft

\n
\n
\n
\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n Enter a time between 00:00 and 23:59.\n
\n
\n \n \n
\n
\n
\n
\n \n \n Shown next to the schedule on the wall panel.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n\n\n
\n
\n

Runs next

\n
\n Sunday at 16:00, if somebody is home. The floor lamp goes to 60% and stays there until the night setting at 23:00.\n
\n
\n
\n

Also on Sunday 3

\n
\n Weekend lie-in at 09:00, evening warm-up at 17:30 and the night setting at 23:00. None of them uses the floor lamp.\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Home
    3. \n
  3. Scenes
    4. \n
\n\n
\n
\n

Scenes

\n

Three scenes are set up: morning, evening and away.

\n
\n
\n New schedule\n
\n
\n\n
\n\n
\n
\n
\n

How scenes work

\n

A scene is a list of settings that are applied together, in order.

\n

Each step names one device and one value, such as blinds: closed. A scene can hold up to twelve steps and runs from a key, a schedule or a sensor.

\n

When a step fails

\n

The scene carries on with the next step and reports the device that did not answer.

\n

What is tried again

\n
    \n
  • Lamps and plugs, twice within a minute.
    • \n
  • Blinds, once after thirty seconds.
    • \n
  • Locks are never tried again without you.
    • \n
\n

Running a scene from a schedule

\n

A schedule can start a scene in place of a single device. Open Schedules, choose a time and pick the scene as its device.

\n

\n All schedules\n Living room\n New schedule\n Devices\n Scene limits\n

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

Evening scene 4 steps

\n
\n 
ceiling light: 40%\nfloor lamp:    on\nblinds:        closed\nheating:       21.5
\n
\n
\n
\n

Away

\n
\n Everything off, heating at 15 degrees and the front door locked. It starts when the last phone leaves the flat.\n
\n
\n
\n

Morning

\n
\n Blinds open, the kitchen lamps come on at 50% and the heating goes to 20 degrees. It runs with the schedule that wakes the house.\n
\n
\n
\n\n
\n\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s02.p02.t02.u02.dc\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-nm-2222-dc\",\n \"short\": \"v1-nm-2222-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(230 231 238);\n --color-canvas: rgb(230 231 238);\n --color-surface: rgb(230 231 238);\n --color-surface-alt: rgb(236 240 243);\n --color-surface-strong: rgb(209 217 230);\n --color-bar: rgb(230 231 238);\n --color-bar-text: rgb(49 52 75);\n --color-bar-alt: rgb(49 52 75);\n --color-bar-alt-text: rgb(236 240 243);\n --color-inverse: rgb(49 52 75);\n --color-inverse-text: rgb(250 251 254);\n --color-text: rgb(68 71 106);\n --color-text-muted: rgb(82 84 128);\n --color-heading: rgb(49 52 75);\n --color-heading-alt: rgb(68 71 106);\n --color-link: rgb(45 76 200);\n --color-link-quiet: rgb(49 52 75);\n --color-link-visited: rgb(75 54 124);\n --color-link-hover: rgb(34 54 135);\n --color-link-active: rgb(34 54 135);\n --color-border: rgb(209 217 230);\n --color-border-strong: rgb(184 185 190);\n --color-border-muted: rgb(255 255 255);\n --color-accent: rgb(45 76 200);\n --color-accent-text: rgb(250 251 254);\n --color-accent-alt: rgb(232 62 140);\n --color-fill-1: rgb(45 76 200);\n --color-fill-2: rgb(24 99 75);\n --color-fill-3: rgb(169 30 44);\n --color-fill-4: rgb(49 52 75);\n --color-button: rgb(45 76 200);\n --color-button-text: rgb(250 251 254);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(230 231 238);\n --color-button-secondary-text: rgb(49 52 75);\n --color-input: rgb(230 231 238);\n --color-input-text: rgb(68 71 106);\n --color-input-border: rgb(209 217 230);\n --color-disabled: rgb(209 217 230);\n --color-disabled-text: rgb(68 71 106 / 0.55);\n --color-danger: rgb(169 30 44);\n --color-danger-surface: rgb(236 240 243);\n --color-success: rgb(24 99 75);\n --color-warning: rgb(214 84 0);\n --color-notice: rgb(236 240 243);\n --color-notice-text: rgb(49 52 75);\n --color-focus: rgb(45 76 200);\n --color-shadow: rgb(184 185 190);\n --color-overlay: rgb(49 52 75 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Inter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: Inter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 16px;\n --text-display: 48px;\n --text-h1: 30px;\n --text-h2: 20px;\n --text-h3: 16px;\n --line-body: 1.5;\n --line-heading: 1.3;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 16px;\n --radius-panel: 28px;\n --radius-pill: 50px;\n --radius-page: 30px;\n --shadow-panel: 14px 14px 28px var(--color-shadow), -14px -14px 28px var(--color-border-muted);\n --shadow-control: 7px 7px 14px var(--color-shadow), -7px -7px 14px var(--color-border-muted);\n --shadow-control-hover: 14px 14px 28px var(--color-shadow), -14px -14px 28px var(--color-border-muted);\n --shadow-control-pressed: inset 7px 7px 14px var(--color-shadow), inset -7px -7px 14px var(--color-border-muted);\n --shadow-dialog: 20px 20px 60px var(--color-shadow), -20px -20px 60px var(--color-border-muted);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: 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) 88%, var(--color-border-muted));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;\n --backdrop-blur: 0px;\n}\n" } }