{ "id": "v1-nm-1129", "long_id": "v1.neumorphism.app.s01.p01.t02.u09", "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, "responsive": true }, "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-1129", "preview_url": "https://chrono.skin/s/v1-nm-1129/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. On a phone (560px and below) the four views `.ds-nav__list` become one tab row of equal keys set in a pressed track under the brand, the current `.ds-nav__link` (`is-current`) a raised key in it, and the strip's button stays, set small; the tabs fill the width and wrap. In `.ds-nav__tools` a `.ds-menu` loses its caret (`.ds-menu__caret`) and its toggle shrinks to the avatar or icon.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family for everything: `--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\n- Fully soft with tight corners: `--border-width` is 0; `--radius-control` 5px, `--radius-panel` and `--radius-page` 10px, `--radius-pill` 30px.\n- Medium relief with deep wells: `--shadow-control` 4px offset and 8px blur, `--shadow-panel` and `--shadow-control-hover` 7px and 14px, `--shadow-dialog` 12px and 24px. `--shadow-control-pressed` is 7px and 14px inset, so inputs, the tab track and the empty state are visibly hollow. Resting shadows use both colours at 85%.\n- Keys are convex: `--fill-button` and `--fill-button-secondary` are a 145 degree gradient, from the button colour mixed 40% with the light colour to the same mixed 30% with the shadow colour; the secondary key, which has the surface's own colour, runs from 55% light to 35% shadow so that its dome still reads. `--fill-button-hover` is the flat button colour. Panels, bars and wells stay flat.\n- `--shadow-text` is a soft drop (0 3px 4px, the shadow colour at 40%) on the brand, the hero title and large figures.\n- Transitions run 0.2s.\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-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- `.ds-tooltip`: a hint on hover or focus. Wrap the trigger and follow it with `.ds-tooltip__tip` (`role=\"tooltip\"`), a small label in `--fill-inverse`; `--below` drops it under the trigger, `--end` lines it up with the trigger's right edge. Use it for an icon key or a short badge whose meaning needs a word; never force it open.\n- `.ds-avatar`: a person as initials on a raised disc (`.ds-avatar__pic`, `--size-avatar`, `--shadow-control`), with an optional `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. Use it wherever a person is named.\n- `.ds-accordion`: one raised sheet of `
` sections; `.ds-accordion__head` is the summary with a round `.ds-accordion__chevron` that is pressed while open, `.ds-accordion__body` the answer. Use it for questions and grouped settings in a side column.\n- `.ds-menu`: the account menu, a `
`: `.ds-menu__toggle` is a sunk well holding the `.ds-avatar` and a `.ds-menu__caret`, `.ds-menu__list` the raised list of `.ds-menu__link` items (`--danger` for signing out) that opens under it.\n- `.ds-progress`: a pressed track (`--size-track`, `--shadow-control-pressed`) with a `.ds-progress__bar` in the accent; `--20`, `--60` and `--90` set its length and `.ds-progress__legend` is the line of name and reading over it. Use it for a share of a whole.\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 <= 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 between rows and the 2px ring are the only lines.\n- `border-radius <= 10px`: controls 5px, panels, tiles and dialogs 10px.\n- `box-shadow-blur <= 24px`: panels blur 14px, the dialog and the hero disc 24px.\n- `gradient-fills <= 15%`: only the keys are convex; panels and wells are flat.\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-avatar: 36px;\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\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-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-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-switch:checked {\n background: var(--fill-accent);\n box-shadow: none;\n}\n.ds-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__tools {\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);\n }\n .ds-table th {\n white-space: normal;\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\n/* tooltip: a small inverted label by its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--space-3));\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n left: auto;\n right: 0;\n transform: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* avatar: initials on a raised disc, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-button-secondary);\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: 1;\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: one raised sheet of sections that open and close */\n.ds-accordion {\n background-color: var(--color-surface);\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}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-3));\n height: calc(var(--size-icon) + var(--space-3));\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: inherit;\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron svg {\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* menu: the account disc in a sunk well opens a raised list */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--size-avatar);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__caret {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-2));\n right: 0;\n z-index: 5;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 22ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: min(var(--radius-panel), var(--space-5));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: min(var(--radius-control), var(--space-4));\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-menu__link--danger {\n color: var(--color-danger);\n}\n\n/* progress: a pressed track with an accent bar */\n.ds-progress {\n display: block;\n height: var(--size-track);\n overflow: hidden;\n background-color: var(--color-input);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n border-radius: var(--size-track);\n}\n.ds-progress--20 .ds-progress__bar {\n width: 20%;\n}\n.ds-progress__legend {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-panel__body > .ds-progress {\n margin-bottom: var(--space-4);\n}\n\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n@media (max-width: 560px) {\n /* the bar's action stays, set small so that it fits beside the brand and the account key */\n .ds-nav__tools .ds-button {\n min-height: 0;\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-small);\n white-space: nowrap;\n }\n /* the four views are one tab row of equal keys set in a pressed track; the current key is raised */\n .ds-nav__list {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0 0 var(--space-2);\n padding: var(--space-1);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n }\n .ds-nav__list li {\n display: flex;\n }\n .ds-nav__link {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-width: 0;\n padding: var(--space-2) var(--space-1);\n font-size: var(--text-small);\n text-align: center;\n overflow-wrap: anywhere;\n }\n .ds-nav__link:hover,\n .ds-nav__link.is-hover {\n box-shadow: none;\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);\n }\n .ds-menu__caret {\n display: none;\n }\n .ds-menu__toggle {\n padding: var(--space-1);\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
\n Book a room\n
\n AP\n \n
\n
\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 2Two notes this week

\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
\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
\n Ask the caretaker \n
The desk by the entrance is staffed until six. After that, leave a note with your booking.
\n
\n
\n Recitals \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 Bringing a guest \n
A guest plays under your booking and your name stays on the door display.
\n
\n
\n
\n\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s01.p01.t02.u09\",\n \"library\": \"2026.10.09-1036\",\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 \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-nm-1129\",\n \"short\": \"v1-nm-1129\"\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: 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 --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 5px;\n --radius-panel: 10px;\n --radius-pill: 30px;\n --radius-page: 10px;\n --shadow-panel: 7px 7px 14px color-mix(in srgb, var(--color-shadow) 85%, transparent), -7px -7px 14px color-mix(in srgb, var(--color-border-muted) 85%, transparent);\n --shadow-control: 4px 4px 8px color-mix(in srgb, var(--color-shadow) 85%, transparent), -4px -4px 8px color-mix(in srgb, var(--color-border-muted) 85%, transparent);\n --shadow-control-hover: 7px 7px 14px color-mix(in srgb, var(--color-shadow) 85%, transparent), -7px -7px 14px color-mix(in srgb, var(--color-border-muted) 85%, transparent);\n --shadow-control-pressed: inset 7px 7px 14px color-mix(in srgb, var(--color-shadow) 85%, transparent), inset -7px -7px 14px color-mix(in srgb, var(--color-border-muted) 85%, transparent);\n --shadow-dialog: 12px 12px 24px var(--color-shadow), -12px -12px 24px var(--color-border-muted);\n --shadow-text: 0 3px 4px color-mix(in srgb, var(--color-shadow) 40%, transparent);\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: linear-gradient(145deg, color-mix(in srgb, var(--color-button) 60%, var(--color-border-muted)), color-mix(in srgb, var(--color-button) 70%, var(--color-shadow)));\n --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n --fill-button-secondary: linear-gradient(145deg, color-mix(in srgb, var(--color-button-secondary) 45%, var(--color-border-muted)), color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow)));\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" } }