{ "id": "v1-nm-1191", "long_id": "v1.neumorphism.app.s01.p01.t09.u01", "name": "Neumorphism app", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false }, "summary": "Neumorphism, also called soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour, and shape comes only from a pair of blurred shadows: a light one towards the top left and a dark one towards the bottom right. Raised elements carry the pair outside, pressed elements carry it inside, corners are very round, borders are absent and contrast is low, with one saturated accent used in small amounts. This pack is an app layout in that style: a floating navigation strip, a raised sidebar and raised cards on a neutral grey surface, set in a quiet rounded sans at 16px with dark navy text.", "url": "https://chrono.skin/s/v1-nm-1191", "preview_url": "https://chrono.skin/s/v1-nm-1191/specimen.html", "files": { "STYLE.md": "# Neumorphism app\n\n## Summary\n\nNeumorphism, also called soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour, and shape comes only from a pair of blurred shadows: a light one towards the top left and a dark one towards the bottom right. Raised elements carry the pair outside, pressed elements carry it inside, corners are very round, borders are absent and contrast is low, with one saturated accent used in small amounts. This pack is an app layout in that style: a floating navigation strip, a raised sidebar and raised cards on a neutral grey surface, set in a quiet rounded sans at 16px with dark navy text.\n\n## Layout\n\n- Content column: `--size-page` (1200px), centred, with `--space-5` (24px) side padding. The page does not stretch beyond it; the surface colour fills the rest of the viewport.\n- Navigation: `.ds-nav` is not a full-width bar. It is a raised strip `--size-nav` (72px) high, as wide as the column, 24px below the top edge: brand on the left, links after it, one button at the right end.\n- Columns: `.ds-page__layout` puts a `--size-sidebar` (248px) sidebar on the left and the main column on the right. `.ds-page__row` splits the main column in two equal halves. `.ds-page__main` stacks blocks vertically.\n- Home page: the hero sits on the bare page under the navigation strip, then the sidebar column and the main column. The sidebar column is a `.ds-page__main` stack, the `.ds-sidebar` with a small `.ds-panel` under it, so that it runs about as long as the main column, which holds notices, the grid of tiles and one two-column row (`.ds-page__row`: the list beside the dialog it opens).\n- Inner pages have no hero and no sidebar. `--space-6` (32px) under the navigation strip come the `.ds-breadcrumb` trail and, 12px below it, the `.ds-page-header`: title at `--text-h1` (32px) with one muted line on the left, actions on the right, on the bare page. A list page then has a `.ds-page__main` stack at 32px gaps: the `.ds-stat` row of raised cards across the full column, the `.ds-tabs` left-aligned as the view switch, then the working area, `.ds-page__layout--aside`: a wide main column (table and pagination) with a `--size-aside` (400px) column on the right for an empty state and small panels. A form page and a text page go straight to `.ds-page__layout--aside`: the form or the prose in one wide `.ds-panel`, small panels in the aside. A wide form sets pairs of short fields side by side with `.ds-form__row`. Keep the two columns about equally long.\n- Views. The specimen is one site with four views, each `
` inside `.ds-page__inner`; the navigation strip and the footer stand outside them and one view shows at a time. `today` is the home view, the board of the day: hero, floors sidebar, notices, tiles, the list of running bookings and the dialog that releases one. `rooms` is the list page: stats, tabs, the table of rooms with its pagination, and in the aside the empty state of the annexe and a note panel. `book` is the form page: the booking form in a panel, with the door display and two small panels in the aside. `rules` is the text page: the house rules as prose, with small panels in the aside. The current view's link in the navigation is pressed in, by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (dot to text, list bullets), `--space-2` 8px (label to control, tab track padding), `--space-3` 12px (icon to text, gaps between pagination keys), `--space-4` 16px (row padding, gaps between buttons, control side padding), `--space-5` 24px (panel padding, form field gap, gap between grid tiles), `--space-6` 32px (the gap between every pair of raised panels, dialog padding), `--space-7` 48px (hero padding, dialog backdrop padding), `--space-8` 64px (gap above the footer and between page kinds).\n- Raised elements need room for their shadows: never place two raised panels closer than `--space-5`, and never put a raised panel inside another raised panel. Inside a panel use sunk wells, rules and flat tiles.\n- `--size-rule` (1px) is the weight of the rules between table and list rows; it is a layout token because the rules stay when a surface part sets `--border-width` to 0.\n- Below 900px the sidebar, the aside, the two-column row and the hero stack, the grid and stats drop to two columns, and the navigation links wrap to a second line inside the strip under the brand and the button. Below 560px the side padding drops to `--space-4`, the hero title takes `--text-h1`, form rows stack, the tabs fill the width, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways.\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 wide humanist family for everything: Oxygen, then Ubuntu and Verdana; `--font-mono` for code.\n- Small text, because the face is wide: `--text-base` and `--text-ui` 13px at `--line-body` 1.6, `--text-small` 11px, `--text-large` 15px, `--text-h3` 15px, `--text-h2` 19px, `--text-h1` 28px, `--text-display` 40px.\n- Two weights: `--weight-body` 400; `--weight-bold`, `--weight-heading`, `--weight-display` and `--weight-ui` 700. `--line-heading` 1.25, `--line-display` 1.15.\n- No uppercase and no tracking from tokens; links are marked by colour and underlined on hover only.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface colour and sets the base type. `.ds-page__inner` is the width container, `.ds-page__layout` the sidebar-plus-main grid, `.ds-page__main` a vertical stack, `.ds-page__row` two equal columns, `.ds-page__layout--aside` the inner-page grid with a 400px right column. `.ds-view` is one screen of the specimen (see Layout); an application that gives each page its own document does not need it.\n- `.ds-brand`: the site's mark and name, in the 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-bar-text` because it stands on the navigation strip. 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`: floating raised strip. `.ds-nav__inner` is the strip, holding the `.ds-brand`, the `.ds-nav__list`, `.ds-nav__link`; the current item is `is-current` and is pressed into the strip; `is-hover` raises a link.\n- `.ds-hero`: page introduction on the bare page: `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`. `.ds-hero__art` is the era's showpiece, one large raised disc with a sunk `.ds-hero__well` holding a `.ds-hero__figure` and `.ds-hero__caption`. Use it once per page, for one live figure.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.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 with at most one primary button. No fill or shadow of its own. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a 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 navy, undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, navy, 40px high, raised by `--shadow-control`; `is-hover` lifts it (`--shadow-control-hover`), `is-active` sinks it (`--shadow-control-pressed`). `.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; use it once, last in a group or as the confirming button of a dialog. `.ds-button--large` (52px) for the hero. `disabled` or `is-disabled` is flat, with no shadow. `.ds-button__row` spaces a group. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron` icon), `.ds-form__range` (sunk track, raised accent thumb). `.ds-form__check` is a label row holding a `.ds-form__checkbox` (raised square, accent when checked) or a `.ds-form__switch` (sunk pill, raised thumb; flat accent fill when on). An invalid input takes `is-error`, which replaces its well with a 2px danger ring, and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons; `.ds-form__row` puts two fields side by side in a wide form. Text controls are wells: they use `--shadow-control-pressed`, not `--shadow-control`.\n- `.ds-table`: data table as one raised sheet: small uppercase head, rows divided by a 1px rule, no stripes. `.ds-table__num` right-aligns a numeric column, `.ds-table__meta` is muted text, `.ds-table__opt` marks a column that is dropped on a phone, `is-hover` on a row lightens it.\n- `.ds-list`: item list as one raised sheet with rules between rows. `.ds-list__item` holds a `.ds-list__body` (with `.ds-list__title` and `.ds-list__meta`) and an optional action. `.ds-list__dot` is a status dot; `--off` turns it red, `--new` orange.\n- `.ds-panel`: the basic raised card. `.ds-panel__title` is the title line, `.ds-panel__body` the padded content.\n- `.ds-grid`: four flat tiles in `--color-surface-alt` with a 24px radius and no shadow. `.ds-grid__cell` with `--1` to `--4` picks the chip colour from `--color-fill-*`; inside, `.ds-grid__chip` (a raised disc ringed in the surface colour), `.ds-grid__label`, `.ds-grid__value`, `.ds-grid__meta`.\n- `.ds-stat`: the row of summary figures; each `.ds-stat__item` is a single figure on its own raised card, with a `.ds-stat__label` above a `.ds-stat__value` (24px, tabular figures); `.ds-stat__meta` inside the value is a muted note on the same line. Three or four items share the width equally. Use it on inner pages; `.ds-grid` is the home page's form of the same thing.\n- `.ds-tabs`: a sunk track holding `.ds-tabs__tab` segments; the one with `is-current` is raised out of the track. Use it for view switches, left-aligned under the page header and stats, not for site navigation.\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`: raised block in the left column: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link`, pressed in when `is-current`.\n- `.ds-notice`: information notice sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` has a pale red well and `--color-danger` text. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: row of raised 40px keys, `.ds-pagination__link`; the current page is `is-current`, flat (no shadow) and filled with the accent.\n- `.ds-breadcrumb`: small muted trail above the page header of an inner page, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, 480px wide, 24px radius, raised by the deepest shadow (`--shadow-dialog`): `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: empty state as a sunk well: a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: full-width flat strip in `--fill-bar-alt` with small text; `.ds-footer__inner`, `.ds-footer__links`, `.ds-footer__link`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch and are divided by a rule.\n- `block-gap <= 64px`: raised panels sit 32px apart; 64px is the largest gap on the page.\n- `content-width <= 1200px`: the column is capped.\n- `font-size <= 40px`: the hero title is the largest text.\n- `font-size >= 11px`: 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.65`: body text is set at 1.6.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: underline is a hover state.\n- `border-width <= 2px`: there are no outlines; the only lines are 1px rules between rows and a 2px focus or error ring.\n- `border-radius <= 24px`: controls are 10px, panels 16px, tiles and dialogs 24px; only pills and discs go higher.\n- `box-shadow-blur <= 24px`: the relief is soft but shallow: 6px on controls, 12px on panels, 24px on the dialog and the hero disc.\n- `text-shadow = none`: text is flat; only boxes have relief.\n- `gradient-fills <= 5%`: every fill is one flat colour.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Decide first whether it is raised or sunk: a container that holds content is raised and starts from `.ds-panel` (fill, radius and `--shadow-panel` together); something the user fills in or that shows a state is sunk and starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`); something the user presses starts from `.ds-button--secondary`. Keep the fill equal to the surface behind it, since the shadows only read on the shared colour, and never draw a shadow in a raw colour: use the shadow tokens as they are. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to, and keep the accent to one small element per group.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1200px;\n --size-sidebar: 248px;\n --size-aside: 400px;\n --size-dialog: 480px;\n --size-nav: 72px;\n --size-control: 40px;\n --size-control-large: 52px;\n --size-icon: 16px;\n --size-dot: 8px;\n --size-chip: 40px;\n --size-thumb: 20px;\n --size-track: 8px;\n --size-check: 20px;\n --size-art: 280px;\n --size-rule: 1px;\n --size-brand: 36px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-page__layout {\n display: grid;\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__layout--aside {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n}\n.ds-page__main {\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-6);\n align-items: start;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n/* an inner view starts one step below the navigation strip */\n.ds-view:not(.ds-view--home) {\n padding-top: var(--space-6);\n}\n.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\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-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: var(--size-thumb);\n height: var(--size-thumb);\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* nav: a raised strip that floats on the page */\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: flex;\n align-items: center;\n gap: var(--space-6);\n min-height: var(--size-nav);\n padding: 0 var(--space-4) 0 var(--space-5);\n background: var(--fill-bar);\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-bar-text);\n} \n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 auto 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\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 box-shadow: var(--shadow-control);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#today:target) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#rooms:target) .ds-nav__link[href=\"#rooms\"],\n.ds-page:has(#book:target) .ds-nav__link[href=\"#book\"],\n.ds-page:has(#rules:target) .ds-nav__link[href=\"#rules\"] {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* hero: title and actions on the bare page, one soft dial beside them */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-7);\n align-items: center;\n padding: var(--space-7) var(--space-5) var(--space-7) 0;\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-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 56ch;\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 gap: var(--space-4);\n margin-top: var(--space-6);\n}\n.ds-hero__art {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-art);\n height: var(--size-art);\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-dialog);\n}\n.ds-hero__well {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 72%;\n height: 72%;\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-hero__figure {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n font-variant-numeric: tabular-nums;\n}\n.ds-hero__caption {\n max-width: 14ch;\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\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n padding: var(--space-1);\n background: var(--fill-input);\n border-radius: 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\n/* list */\n.ds-list {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-list__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__dot {\n display: inline-block;\n width: var(--size-dot);\n height: var(--size-dot);\n margin-right: var(--space-1);\n background: var(--color-success);\n border-radius: 50%;\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n.ds-list__dot--new {\n background: var(--color-accent-alt);\n}\n\n/* panel */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n\n/* grid: flat tiles one step off the surface, each with a raised colour chip */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n color: var(--color-text);\n}\n.ds-grid__chip {\n width: var(--size-chip);\n height: var(--size-chip);\n margin-bottom: var(--space-4);\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__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__value {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-grid__meta {\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\n/* stats: a row of raised cards, one figure each */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n margin: 0;\n}\n.ds-stat__item {\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-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: var(--space-1) 0 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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n\n/* tabs: a sunk track, the current tab raised out of it */\n.ds-tabs {\n display: inline-flex;\n align-self: flex-start;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\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}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-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(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar */\n.ds-sidebar {\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 box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-3) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\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 + .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/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* footer */\n.ds-footer {\n margin-top: var(--space-8);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n@media (max-width: 900px) {\n .ds-page__layout,\n .ds-page__layout--aside,\n .ds-page__row,\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-4);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__list {\n order: 3;\n flex-wrap: wrap;\n width: 100%;\n }\n .ds-nav__inner > .ds-button {\n margin-left: auto;\n }\n .ds-hero {\n padding-right: 0;\n }\n .ds-hero__art {\n justify-self: center;\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__list {\n gap: var(--space-1);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-hero {\n gap: var(--space-6);\n padding: var(--space-6) 0;\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 .ds-stat,\n .ds-page__main,\n .ds-page__layout,\n .ds-page__row {\n gap: var(--space-5);\n }\n .ds-stat__item,\n .ds-grid__cell {\n padding: var(--space-4);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs {\n display: flex;\n align-self: stretch;\n flex-wrap: wrap;\n gap: var(--space-1);\n }\n .ds-tabs > * {\n flex: 1 1 auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n text-align: center;\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-list__item {\n flex-wrap: wrap;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer__inner {\n padding: var(--space-5) var(--space-4);\n }\n .ds-footer__links {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: practice rooms\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n Book a room\n
\n
\n\n
\n\n
\n\n
\n
\n

Practice rooms, Tuesday

\n

Nine rooms on two floors. Six are in use now and the next one comes free at half past three.

\n
\n Book a room\n See the rooms\n
\n
\n
\n
\n 6 / 9\n rooms in use at 14:50\n
\n
\n
\n\n\n
\n\n
\n \n
\n

Caretaker's note 2

\n
\n The upright in room 5 has a sticking pedal. It can be played, and the tuner will look at it on Friday.\n
\n
\n
\n\n\n
\n\n
\n
\n \n
Piano tuning on Friday. Rooms 2 and 5 cannot be booked between nine and noon.
\n
\n
\n \n
Room 7 was not locked last night. The door sensor has reported it open since 22:10.
\n
\n
\n\n\n
\n
\n \n In use now\n 6 rooms\n Two free on the upper floor\n
\n
\n \n Booked today\n 41 hours\n Of 63 that can be booked\n
\n
\n \n Waiting\n 3 people\n All for the evening\n
\n
\n \n Next free\n 15:30\n Room 4, with a piano\n
\n
\n\n\n
\n\n \n\n\n
\n
\n

Release room 7?

\n
The brass section loses this booking and the room is offered to the waiting list.
\n
\n \n \n
\n
\n
\n\n
\n\n
\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Rooms
    3. \n
  3. All floors
    4. \n
\n\n
\n
\n

Rooms

\n

Eight rooms on two floors, listed from the entrance to the attic.

\n
\n
\n House rules\n Book a room\n
\n
\n\n
\n\n
\n
\n
In use
\n
5 of 8 rooms
\n
\n
\n
Hours booked
\n
36.5 today
\n
\n
\n
No-shows
\n
1 this week
\n
\n
\n
Longest wait
\n
40 min for room 2
\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 \n
RoomStatusBooked bySeatsHours today
1 Garden roomFreeNobody until 19:00244.0
2 Small pianoEnds soonAnsel Brandvold26.5
3 Quartet roomIn useString quartet65.0
4 Large pianoIn useMarit Oyelaran47.5
5 Yard roomClosedPedal repair30.0
6 Drum roomIn usePercussion class58.0
7 Brass roomNo check-inBrass section123.0
8 Attic studioFreeNobody until 17:0022.5
\n\n\n \n
\n\n
\n
\n \n

Nothing booked in the annexe

\n

Its hall can be booked by the day for recitals. No day is taken this month.

\n Book the annexe hall\n
\n
\n

Room 5 is closed

\n
\n The upright has a sticking pedal and the tuner comes on Friday. Bookings for the yard room were moved to the attic studio.\n
\n
\n
\n\n
\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Rooms
    3. \n
  3. New booking
    4. \n
\n\n
\n
\n

New booking

\n

Whole hours, up to two a day. The room is held for ten minutes after the start.

\n
\n
\n Back to rooms\n
\n
\n\n
\n\n
\n

Tuesday, from 19:00

\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 complete email address.\n
\n
\n
\n \n \n Shown on the door display.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n

On the door display

\n
\n 
room:    4\nfrom:    14:30\nhold:    10 minutes\nrelease: waiting list
\n
\n
\n
\n

Free at 19:00 3

\n
\n The garden room, the quartet room and the attic studio. The large piano is taken until eight.\n
\n
\n
\n

Your week 2 of 10 hours

\n
\n You have the small piano on Thursday at 17:00. A repeating booking counts against each week it falls in.\n
\n
\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. Today
    3. \n
  3. House rules
    4. \n
\n\n
\n
\n

House rules

\n

What every member agrees to when booking a room.

\n
\n
\n Book a room\n
\n
\n\n
\n\n
\n
\n
\n

How booking works

\n

A room is held for the person who booked it until ten minutes past the hour.

\n

Members book in whole hours, up to two hours a day. A booking is kept under its own reference, such as R4-1430, which is printed on the door display.

\n

Checking in

\n

Tap the door display when you arrive. If nobody has checked in ten minutes after the start, the room is released and offered to the waiting list.

\n

Who is asked first

\n
    \n
  • Whoever has waited longest for that floor.
    • \n
  • Then anyone waiting for a room with the same instrument.
    • \n
  • Then the room is shown as free to everyone.
    • \n
\n

Giving a room back

\n

If you finish early, tap the display again and choose Done. The remaining time goes back on the board at once, and it does not count against your two hours. See which rooms are free or book the next one.

\n

\n Rooms free now\n Today's board\n Book a room\n Waiting list\n Opening hours\n

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

Opening hours

\n
\n Monday to Friday from eight until ten in the evening, Saturday from nine until six. The building is closed on Sunday.\n
\n
\n
\n

Waiting list 3

\n
\n Three people are waiting for this evening. Put your name down from the booking form, and you are asked first when a room is released.\n
\n
\n
\n

Ask the caretaker

\n
\n The desk by the entrance is staffed until six. After that, leave a note with your booking.\n
\n
\n
\n

Recitals 2

\n
\n On a recital day the garden room is set out with chairs from four, and it cannot be booked after three.\n
\n
\n
\n\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s01.p01.t09.u01\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-nm-1191\",\n \"short\": \"v1-nm-1191\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(224 224 224);\n --color-canvas: rgb(224 224 224);\n --color-surface: rgb(224 224 224);\n --color-surface-alt: rgb(232 232 232);\n --color-surface-strong: rgb(216 216 216);\n --color-bar: rgb(224 224 224);\n --color-bar-text: rgb(0 31 63);\n --color-bar-alt: rgb(232 232 232);\n --color-bar-alt-text: rgb(48 72 96);\n --color-inverse: rgb(0 31 63);\n --color-inverse-text: rgb(224 224 224);\n --color-text: rgb(0 31 63);\n --color-text-muted: rgb(48 72 96);\n --color-heading: rgb(0 31 63);\n --color-heading-alt: rgb(48 72 96);\n --color-link: rgb(24 99 75);\n --color-link-quiet: rgb(0 31 63);\n --color-link-visited: rgb(48 72 96);\n --color-link-hover: rgb(0 31 63);\n --color-link-active: rgb(59 132 60);\n --color-border: rgb(208 208 208);\n --color-border-strong: rgb(190 190 190);\n --color-border-muted: rgb(255 255 255);\n --color-accent: rgb(59 132 60);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(214 84 0);\n --color-fill-1: rgb(0 31 63);\n --color-fill-2: rgb(59 132 60);\n --color-fill-3: rgb(214 84 0);\n --color-fill-4: rgb(48 72 96);\n --color-button: rgb(0 31 63);\n --color-button-text: rgb(224 224 224);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(224 224 224);\n --color-button-secondary-text: rgb(0 31 63);\n --color-input: rgb(224 224 224);\n --color-input-text: rgb(0 31 63);\n --color-input-border: rgb(208 208 208);\n --color-disabled: rgb(216 216 216);\n --color-disabled-text: rgb(48 72 96 / 0.55);\n --color-danger: rgb(169 30 44);\n --color-danger-surface: rgb(255 224 224);\n --color-success: rgb(59 132 60);\n --color-warning: rgb(214 84 0);\n --color-notice: rgb(232 232 232);\n --color-notice-text: rgb(0 31 63);\n --color-focus: rgb(0 31 63);\n --color-shadow: rgb(190 190 190);\n --color-overlay: rgb(0 31 63 / 0.25);\n}\n\n/* @part type */\n:root {\n --font-body: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n --font-heading: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n --font-ui: Oxygen, Ubuntu, Verdana, \"DejaVu Sans\", sans-serif;\n --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 15px;\n --text-display: 40px;\n --text-h1: 28px;\n --text-h2: 19px;\n --text-h3: 15px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\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: 10px;\n --radius-panel: 16px;\n --radius-pill: 50px;\n --radius-page: 24px;\n --shadow-panel: 6px 6px 12px var(--color-shadow), -6px -6px 12px color-mix(in srgb, var(--color-border-muted) 90%, transparent);\n --shadow-control: 3px 3px 6px var(--color-shadow), -3px -3px 6px color-mix(in srgb, var(--color-border-muted) 90%, transparent);\n --shadow-control-hover: 6px 6px 12px var(--color-shadow), -6px -6px 12px color-mix(in srgb, var(--color-border-muted) 90%, transparent);\n --shadow-control-pressed: inset 2px 2px 5px var(--color-shadow), inset -3px -3px 7px color-mix(in srgb, var(--color-border-muted) 90%, transparent);\n --shadow-dialog: 12px 12px 24px var(--color-shadow), -12px -12px 24px color-mix(in srgb, var(--color-border-muted) 90%, transparent);\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.2s ease, background-color 0.2s ease, color 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }