{ "id": "v1-nm-3333-dr", "long_id": "v1.neumorphism.app.s03.p03.t03.u03.dr", "name": "Neumorphism three-pane", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "app", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "density": "roomy", "summary": "Neumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes from a pair of blurred shadows, light towards the top left and dark towards the bottom right. This pack is its working application form, the three-pane mail or task client: a raised icon rail at the left edge, a folder column, one tall raised list pane and a reading column, filling the viewport instead of sitting in a centred sheet. It uses the late, restrained variant of the style, a warm off-white surface with 1px hairlines and a shallow relief, near-black text in a humanist sans, a zinc primary button and one orange accent.", "url": "https://chrono.skin/s/v1-nm-3333-dr", "preview_url": "https://chrono.skin/s/v1-nm-3333-dr/specimen.html", "files": { "STYLE.md": "# Neumorphism three-pane\n\n## Summary\n\nNeumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes from a pair of blurred shadows, light towards the top left and dark towards the bottom right. This pack is its working application form, the three-pane mail or task client: a raised icon rail at the left edge, a folder column, one tall raised list pane and a reading column, filling the viewport instead of sitting in a centred sheet. It uses the late, restrained variant of the style, a warm off-white surface with 1px hairlines and a shallow relief, near-black text in a humanist sans, a zinc primary button and one orange accent.\n\n## Layout\n\n- The frame is `.ds-app`, a grid as wide as `--size-page` (1392px, the 1440px viewport less 24px on each side), with `--space-5` (24px) padding and `--space-6` (32px) between columns. There is no top bar and no centred text column.\n- Navigation is vertical: `.ds-nav` is a raised rail `--size-rail` (112px) wide at the far left, as tall as the frame: the brand at the top, one icon key with a small label per section, and settings at the foot above a rule.\n- Home page, four columns, the rail and the three of `.ds-app__frame`: the rail; the `.ds-sidebar` folder column, `--size-folders` (208px), flat on the page with the compose button at its top and the storage meter at its foot; the `.ds-pane` list column, `--size-pane` (392px), one raised sheet from top to bottom holding title, search, tabs, the `.ds-list` and the pagination at its foot; and `.ds-app__main`, the reading column, which takes the rest (about 590px) and stacks its blocks 32px apart: the `.ds-hero` greeting on the bare page, the `.ds-stat` card, notices, the open item in a `.ds-panel`, and the `.ds-grid` of attachment wells.\n- Inner pages use `.ds-app__frame--inner`, two columns beside the same rail: a wide main column, and a `--size-aside` (400px) `.ds-pane` at the right for a form, a short list or a summary. There is no hero and no folder column. At the top of the main column, in one block, come the `.ds-breadcrumb`, the `.ds-page-header` (title at `--text-h1` left, actions right) and, on a list page, the `.ds-tabs` track (`.ds-tabs--inline`, at least half the column wide); then the `.ds-table` or a form in a `.ds-panel`, and under it `.ds-app__row`, two equal columns for an empty state, a dialog or two panels.\n- Views. The specimen is one site with four views, each `
` inside `.ds-app__views`, the second column of `.ds-app`; the rail and the footer stand outside them and one view shows at a time. `inbox` is the home view: folders, the list pane and the reading column with greeting, figures, notices, the open message and its attachments. `compose` is the form page: an error notice and the message form in a panel, with the drafts and the thread in the pane at the right. `bin` is a list page: the table of deleted threads, under it the dialog that deletes one beside a panel, and a storage pane at the right. `rules` is the settings page: tabs, the table of rules, an empty state beside a panel, and the rule form in the pane. The rail presses in the key of the current view, by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (between list rows, folder links and tab segments), `--space-2` 8px (label to control, between rail keys), `--space-3` 12px (row padding, icon to text, between pagination keys), `--space-4` 16px (between buttons, pane tool gap, rail padding), `--space-5` 24px (pane and panel padding, frame padding, between form fields and sidebar groups, between grid wells), `--space-6` 32px (between columns and between blocks of the reading column), `--space-7` 48px (dialog backdrop padding, between page kinds), `--space-8` 64px (unused by the frame, kept for one-off sections).\n- Other sizes: `--size-avatar` 40px (initials disc), `--size-chip` 36px (colour chip), `--size-glyph` 24px (rail icon), `--size-control-large` 48px (compose button), `--size-dialog` 440px.\n- Raised things need room for their shadows: columns are 32px apart and no raised panel sits inside the pane or inside another panel. Inside the pane use flat rows, wells and rules.\n- `--size-rule` (1px) is the weight of the rules between table rows, stat figures, and above a pane or panel foot; it stays when a surface part sets `--border-width` to 0.\n- Below 1100px the columns stack and the rail turns into a horizontal strip: brand, section keys, the settings key at the right. Stacked, the folder column folds into the compose button and one wrapping row of folder keys (its headings, the labels and the storage meter are hidden), and a list pane shows only its first five rows, the pagination reaching the rest. Below 560px the frame padding drops to `--space-4`, the brand shows its mark only, the stat figures and the attachment wells stack, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways.\n\n## Typography and colour roles\n\n- One humanist family for everything: `--font-body`, `--font-heading` and `--font-ui` are Noto Sans, then Open Sans, Lucida Grande and Verdana; `--font-mono` starts with Inconsolata.\n- Roomy body, compact headings: `--text-base` 16px at `--line-body` 1.63, `--text-ui` 15px (buttons, inputs, folder links, tabs, table cells), `--text-small` 14px (meta, rail labels, badges, form labels), `--text-large` 18px (lead, large buttons), `--text-h3` 16px, `--text-h2` 24px (pane titles, stat figures), `--text-h1` 30px, `--text-display` 36px for the hero greeting only.\n- Two weights with a jump between them: `--weight-body` 400; `--weight-bold`, `--weight-heading` and `--weight-ui` 700; `--weight-display` 900 for the greeting. `--line-heading` 1.25, `--line-display` 1.2.\n- No tracking. Uppercase appears only on `.ds-sidebar__heading` and table head cells, written in the components.\n- One surface: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-input` and `--color-button-secondary` are the same warm off-white (244 244 245). `--color-surface-alt`, `--color-notice` and `--color-danger-surface` are pure white, for hovered rows and notices; `--color-surface-strong` (227 227 231) is for inline code, quiet and status badges and disabled controls.\n- The relief pair: `--color-shadow` (200 200 208) is the dark side and `--color-border-muted` (white) the light side of every shadow; on this pale surface the dark side and the hairline do most of the work. `--color-border-muted` is used for nothing else.\n- Text is near-black zinc (`--color-text`, `--color-heading` 39 39 42); `--color-text-muted` and `--color-heading-alt` (113 113 122) are for meta text, panel titles, sidebar headings and form labels.\n- Each text token goes with its own fill: `--color-bar-text` on `--fill-bar` (rail, table head), `--color-bar-alt-text` on `--fill-bar-alt` (footer band, zinc), `--color-inverse-text` on `--fill-inverse` (code block), `--color-accent-text` on `--fill-accent` (count badge, current page), `--color-button-text` on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary` (secondary button, initials discs, pagination keys, current tab), `--color-input-text` on `--fill-input` (controls, tab track, the open list row, grid wells, empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`. In the open list row every line inherits `--color-input-text`.\n- `--color-accent` is orange (249 115 22) with near-black text: unread count, current page, checked controls, slider thumb, the storage meter and the focus ring. `--color-link` is the darker orange 234 88 12. `--color-accent-alt` (sky blue) only marks \"new\" as a dot. `--color-button` is zinc with white text, the darkest thing on the page.\n- `--color-fill-1` to `--color-fill-4` (orange, zinc, sky blue, green) colour label dots in the sidebar and the chips of the grid wells; no text is set on them.\n- Status: `--color-success` 34 197 94, `--color-warning` 234 179 8, `--color-danger` 239 68 68, as 8px dots and as error text and rings.\n- Surface: `--border-width` is 1px, so the rail, pane, panels, keys and wells are outlined in `--color-border` or `--color-input-border` and the relief only finishes the edge; `--border-width-strong` is 2px. `--shadow-control` is 2px offset with 4px blur, `--shadow-panel` and `--shadow-control-hover` 3px and 6px, `--shadow-dialog` 6px and 12px (its light side at 20%, because the dialog lies on the dark overlay, where a white edge would glow), `--shadow-control-pressed` 2px and 5px inset. Corners: `--radius-control` and `--radius-panel` 8.8px, `--radius-page` 12px (rail, pane, grid wells, dialog, footer band), `--radius-pill` 30px. Fills are flat, `--shadow-text` is `none`, transitions run 0.15s.\n- One-off values with no token: discs use `border-radius: 50%`; tab segments and inline code use half of `--radius-control`; the meter bar is 40% wide in the specimen and takes its real share in an application; secondary lines in a well are `--color-input-text` at opacity 0.75; placeholders at 0.55.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface and sets the base type. The frame is `.ds-app` (the rail and `.ds-app__views`, which holds the screens); `.ds-app__frame` lays out one screen's columns (folders, pane, reading column) and `.ds-app__frame--inner` an inner page's (main, pane); `.ds-app__main` stacks blocks 32px apart; `.ds-app__row` is two equal columns inside it. `.ds-view` is one screen of the specimen (see Layout).\n- `.ds-brand`: the site's mark and name, in the header, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 40px) 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 rail. In the rail it takes `.ds-brand--stacked`, which puts the name under the key at `--text-small`. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the raised rail. the `.ds-brand` stands at its top; `.ds-nav__list` holds `.ds-nav__link` keys, each a `.ds-nav__glyph` icon above a one-word label; `.ds-nav__foot` pins settings to the bottom. The current key (`is-current`) is pressed in, `is-hover` raises one.\n- `.ds-hero`: the greeting at the top of the reading column, on the bare page and left-aligned: `.ds-hero__date`, `.ds-hero__title` at the display size, `.ds-hero__lead` and `.ds-hero__actions` with one primary and one secondary large button.\n- `.ds-page-header`: head of an inner page instead of the hero: `.ds-page-header__text` with `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` at the right with at most one primary button. The breadcrumb goes directly above it and the tabs directly below.\n- `.ds-pane`: a tall raised sheet for one column: `.ds-pane__head` with `.ds-pane__title` and a count badge, `.ds-pane__tools` for a search input and tabs (or a whole form on an inner page), then a `.ds-list`, and `.ds-pane__foot`, pinned to the bottom above a rule, for pagination or one button. A pane may hold two titled lists one after the other.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, zinc, 40px high, raised; `is-hover` lifts it, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action, a surface-coloured key with `--color-danger` text and outline, used once and last in a group. `.ds-button--large` (48px) for the hero and compose; `.ds-button--block` fills its column. `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group.\n- `.ds-form`: a vertical stack of `.ds-form__field` (a `.ds-form__label` and a control): `.ds-form__input`, `.ds-form__textarea` (`.ds-form__textarea--tall` for a message body), `.ds-form__select` (in `.ds-form__select-wrap` with `.ds-form__chevron`), `.ds-form__range`. `.ds-form__check` is a label row with a `.ds-form__checkbox` or a `.ds-form__switch`. `is-error` on an input gives a 2px danger ring and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons. Text controls are wells: `--shadow-control-pressed`. On an inner page the form lives in the right-hand pane.\n- `.ds-table`: one raised sheet with a small uppercase head and 1px rules between rows. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `is-hover` on a row lightens it.\n- `.ds-list`: flat rows inside a pane, 4px apart, no rules. A `.ds-list__item` has a raised `.ds-list__avatar` disc with initials and a `.ds-list__body`: a `.ds-list__line` with `.ds-list__title` and `.ds-list__time`, then one or two single-line `.ds-list__meta` lines that cut off with an ellipsis. A `.ds-list__dot` at the start of a meta line marks state (`--new` unread, `--off` a problem). The open row is `is-current`, a sunk well; `is-hover` lightens a row.\n- `.ds-panel`: the raised card of the reading column: `.ds-panel__title` (with a status badge at its right), an optional `.ds-panel__from` line (avatar, `.ds-panel__who` with `.ds-panel__meta`, a badge), `.ds-panel__body`, and `.ds-panel__foot` for the reply actions above a rule.\n- `.ds-grid`: sunk wells two across, for attachments and linked items. `.ds-grid__cell` (with `--1` to `--4` for the chip colour) holds a raised `.ds-grid__chip` at the left and a `.ds-grid__label` over a `.ds-grid__meta`.\n- `.ds-stat`: the row itself, one raised card; each `.ds-stat__item` is one figure, a `.ds-stat__label` above a `.ds-stat__value` with a `.ds-stat__meta` line under it. Three items, divided by rules, under the hero.\n- `.ds-tabs`: a sunk track as wide as its container with equal `.ds-tabs__item` segments; the `.ds-tabs__tab` with `is-current` is raised out of it. Inside a pane it filters the list; `.ds-tabs--inline` is the view switch under a page header.\n- `.ds-badge`: pill for counts, filled with the accent (`--color-accent-text` on `--fill-accent`). `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`, for neutral counts; it has no shadow, because a well is too deep for a pill this small. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: the folder column, flat on the page: groups of a small uppercase `.ds-sidebar__heading` and a `.ds-sidebar__list` of `.ds-sidebar__link` rows, with a count badge at the right or a `.ds-sidebar__dot` (`--1` to `--4`) at the left; the current folder is pressed in. `.ds-sidebar__foot` pins a last group to the bottom; `.ds-sidebar__note` is a small muted line. `.ds-meter` with `.ds-meter__bar` is a sunk track with an accent bar for a quota.\n- `.ds-notice`: a message sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` takes `--color-danger`. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: raised 40px keys, `.ds-pagination__link`, centred in a pane foot; the current page is flat and filled with the accent.\n- `.ds-breadcrumb`: small muted trail, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, at most 440px wide, raised by `--shadow-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: a sunk well with a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: one rounded band in `--fill-bar-alt` as wide as the frame, 32px under it: a line of small text at the left and `.ds-footer__links` with `.ds-footer__link` at the right, inside `.ds-footer__inner`.\n\n## Never\n\n- `row-gap <= 10px`: list rows and folder links sit 4px apart; table rows touch.\n- `block-gap <= 60px`: columns and blocks sit 32px apart; 48px between page kinds is the largest gap.\n- `content-width <= 1392px`: the frame fills a 1440px viewport and goes no wider.\n- `font-size <= 36px`: the hero greeting is the largest text.\n- `font-size >= 14px`: meta text and badges are the smallest text.\n- `font-weight <= 900`: only the hero greeting is black; headings are 700.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.65`: body text is set at 1.63.\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 sidebar headings and table heads only.\n- `border-width <= 2px`: outlines are 1px hairlines; 2px is the focus and error ring.\n- `border-radius <= 12px`: controls and panels 8.8px, the rail, pane, wells and dialog 12px; only pills and discs go higher.\n- `box-shadow-blur <= 12px`: the relief is shallow: 4px to 7px on the page, 12px on the dialog.\n- `text-shadow = none`: text is flat.\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 and decide first which column it belongs to: navigation between sections is a key in the rail, a way to narrow the list is a link in the sidebar, a collection is rows in a `.ds-pane`, and whatever is opened is a `.ds-panel` in the reading column. A raised container starts from `.ds-panel` (fill, hairline, radius and `--shadow-panel` together); something that shows a state or takes input starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`); something to press starts from `.ds-button--secondary`. Keep every fill equal to the surface behind it, always write the outline as `var(--border-width) var(--border-style)` with a border colour token so that a softer surface part can remove it, and use each shadow token alone as the whole `box-shadow` value, since a token may be `none`. 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 the accent to one small element per column.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1392px;\n --size-rail: 112px;\n --size-folders: 208px;\n --size-pane: 392px;\n --size-aside: 400px;\n --size-dialog: 440px;\n --size-control: 40px;\n --size-control-large: 48px;\n --size-icon: 16px;\n --size-glyph: 24px;\n --size-dot: 8px;\n --size-chip: 36px;\n --size-avatar: 40px;\n --size-thumb: 20px;\n --size-track: 8px;\n --size-check: 20px;\n --size-rule: 1px;\n --size-brand: 40px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n --space-8: 80px;\n}\n\n/* shell: an application frame of panes that fills the viewport */\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-app {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5);\n}\n.ds-app__views {\n min-width: 0;\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\n/* frame: the columns of one view, beside the rail */\n.ds-app__frame {\n display: grid;\n grid-template-columns: var(--size-folders) var(--size-pane) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-app__frame--inner {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n}\n.ds-app__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n.ds-app__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: stretch;\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.ds-brand--stacked {\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-brand--stacked .ds-brand__name {\n font-size: var(--text-small);\n}\n\n/* nav: a raised vertical rail at the left edge, one icon key per section */\n.ds-nav {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-2);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n} \n.ds-nav__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n width: 100%;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-3) var(--space-1);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\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=\"#inbox\"],\n.ds-page:has(#inbox:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#compose:target) .ds-nav__link[href=\"#compose\"],\n.ds-page:has(#bin:target) .ds-nav__link[href=\"#bin\"],\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.ds-nav__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-nav__foot {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-4);\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* sidebar: the folder column, flat on the page, the current folder pressed in */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: var(--space-5);\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 {\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 gap: var(--space-3);\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 .ds-badge {\n margin-left: auto;\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.ds-sidebar__dot {\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n}\n.ds-sidebar__dot--1 {\n background: var(--color-fill-1);\n}\n.ds-sidebar__dot--2 {\n background: var(--color-fill-2);\n}\n.ds-sidebar__dot--3 {\n background: var(--color-fill-3);\n}\n.ds-sidebar__dot--4 {\n background: var(--color-fill-4);\n}\n.ds-sidebar__foot {\n margin-top: auto;\n padding-bottom: var(--space-4);\n}\n.ds-sidebar__note {\n margin: 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* meter: a sunk track with an accent bar */\n.ds-meter {\n height: var(--size-track);\n margin: 0 var(--space-3) var(--space-2);\n overflow: hidden;\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-meter--flush {\n margin: 0;\n}\n.ds-meter__bar {\n width: 40%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--size-track);\n}\n\n/* pane: the list column, one tall raised sheet */\n.ds-pane {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-pane__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-pane__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-pane__tools {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: 0 var(--space-5) var(--space-5);\n}\n.ds-pane__foot {\n display: flex;\n justify-content: center;\n margin-top: auto;\n padding: var(--space-4) var(--space-5) var(--space-5);\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* hero: a greeting on the bare page at the top of the reading column */\n.ds-hero {\n padding: var(--space-2) 0 0;\n}\n.ds-hero__date {\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-hero__title {\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-5);\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:last-child {\n margin-bottom: 0;\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 76ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-panel);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__textarea--tall {\n min-height: calc(4 * var(--size-control));\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 white-space: nowrap;\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n/* panel */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* full-width button, for the compose key above the folders */\n.ds-button--block {\n display: flex;\n width: 100%;\n}\n\n/* list: flat rows inside the pane; the open row is a sunk well */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3) var(--space-3);\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n transition: var(--transition);\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-list__item.is-current {\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-list__avatar {\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: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__line {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-list__title {\n overflow: hidden;\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 text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-list__time {\n flex: none;\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-list__meta {\n display: block;\n margin-top: var(--space-1);\n overflow: hidden;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-list__item.is-current .ds-list__title,\n.ds-list__item.is-current .ds-list__time,\n.ds-list__item.is-current .ds-list__meta {\n color: inherit;\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/* message head inside a panel: sender, address line and time above the text */\n.ds-panel__from {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5) 0;\n}\n.ds-panel__who {\n flex: 1;\n min-width: 0;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-panel__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-panel__foot {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* grid: sunk wells two across, each with a raised colour chip */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: center;\n padding: var(--space-4) 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-page);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-grid__chip {\n grid-row: 1 / span 2;\n width: var(--size-chip);\n height: var(--size-chip);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-grid__cell--1 .ds-grid__chip {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__chip {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__chip {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__chip {\n background: var(--color-fill-4);\n}\n.ds-grid__label {\n overflow: hidden;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-grid__meta {\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* stats: one raised card, three figures divided by rules */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n margin: 0;\n padding: var(--space-4) 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}\n.ds-stat__item {\n padding: 0 var(--space-5);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-stat__label {\n 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 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 display: block;\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 as wide as its pane, equal segments, the current one raised */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-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}\n.ds-tabs__item {\n flex: 1;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-control) / 2);\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-align: center;\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\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.ds-tabs--inline {\n align-self: flex-start;\n min-width: 50%;\n}\n\n/* footer: one rounded band under the panes */\n.ds-footer {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: var(--space-6) auto 0;\n padding: 0 var(--space-5) var(--space-5);\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 padding: var(--space-4) var(--space-5);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-page);\n color: var(--color-bar-alt-text);\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: 1100px) {\n .ds-app,\n .ds-app__frame,\n .ds-app__frame--inner,\n .ds-app__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-nav {\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__list {\n flex-direction: row;\n width: auto;\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__foot {\n width: auto;\n margin-top: 0;\n padding-top: 0;\n border-top: 0;\n }\n /* stacked: the folder column folds into one row of folder keys, labels and storage go */\n .ds-sidebar {\n gap: var(--space-4);\n }\n .ds-sidebar > div + div,\n .ds-sidebar__heading {\n display: none;\n }\n .ds-sidebar__list {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--space-2);\n }\n .ds-sidebar__link {\n gap: var(--space-2);\n }\n /* and the list pane shows its first five rows; the pagination reaches the rest */\n .ds-pane .ds-list__item:nth-child(n+6) {\n display: none;\n }\n}\n@media (max-width: 560px) {\n .ds-app {\n gap: var(--space-5);\n padding: var(--space-4);\n }\n .ds-app__frame,\n .ds-app__main {\n gap: var(--space-5);\n }\n .ds-nav {\n gap: var(--space-2);\n padding: var(--space-3) var(--space-2);\n }\n .ds-nav__list {\n gap: var(--space-1);\n }\n .ds-nav__link {\n padding: var(--space-2);\n }\n .ds-brand--stacked .ds-brand__name {\n display: none;\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-stat {\n grid-template-columns: minmax(0, 1fr);\n padding: 0 var(--space-5);\n }\n .ds-stat .ds-stat__item {\n padding: var(--space-3) 0;\n border-left: 0;\n }\n .ds-stat .ds-stat__item + .ds-stat__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n }\n .ds-tabs--inline {\n align-self: stretch;\n flex-wrap: wrap;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions,\n .ds-pagination,\n .ds-footer__links {\n flex-wrap: wrap;\n }\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-pane__foot {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: mail\n\n\n\n\n\n
\n\n \n\n
\n\n
\n
\n\n \n\n\n
\n
\n

Inbox

\n 12 unread\n
\n
\n \n \n
\n
    \n
  • \n IB\n
    \n
    Ines Baptista09:42
    \n Proofs for the spring catalogue\n The second proof is attached. Two pages changed.\n
    \n
    • \n
  • \n TO\n
    \n
    Tobias Okafor09:10
    \n Paper stock for April\n We can hold the 120 gram until Friday.\n
    \n
    • \n
  • \n HL\n
    \n
    Hanne Lindqvist08:31
    \n Invoice 2041 is ready\n Thirty days from today, same account as before.\n
    \n
    • \n
  • \n RM\n
    \n
    Rafael MoreauTue
    \n Re: binding samples\n The sewn one, without question.\n
    \n
    • \n
  • \n CP\n
    \n
    Courier pickupsTue
    \n Collection missed\n Nobody answered at the side door at 16:05.\n
    \n
    • \n
  • \n AS\n
    \n
    Agnes SatoMon
    \n Sunday lunch\n Bring the folding chairs if they fit in the car.\n
    \n
    • \n
  • \n TO\n
    \n
    Tobias OkaforMon
    \n Delivery note 778\n Four pallets, signed for by the morning shift.\n
    \n
    • \n
  • \n GW\n
    \n
    Guild of Printers3 Mar
    \n Spring meeting, agenda\n Three items and the election of a treasurer.\n
    \n
    • \n
  • \n HL\n
    \n
    Hanne Lindqvist3 Mar
    \n Statement for February\n Nothing is overdue on your account.\n
    \n
    • \n
  • \n NB\n
    \n
    Noor Bakker2 Mar
    \n Type samples\n The narrow cut reads better at nine point.\n
    \n
    • \n
  • \n RM\n
    \n
    Rafael Moreau2 Mar
    \n Workshop keys\n I left the spare set in the top drawer.\n
    \n
    • \n
  • \n IB\n
    \n
    Ines Baptista28 Feb
    \n First proof\n Eleven corrections, most of them on page 14.\n
    \n
    • \n
\n \n
\n\n\n
\n\n
\n Wednesday, 11 March\n

Good morning, Marta

\n

Twelve unread messages, and three people are waiting for an answer from you today.

\n
\n Answer the oldest\n Mark all read\n
\n
\n\n
\n
\n
Unread
\n
12 5 since yesterday
\n
\n
\n
Waiting on you
\n
3 oldest from Monday
\n
\n
\n
Answered
\n
27 this week
\n
\n
\n\n
\n
\n \n
This thread is snoozed until noon. It returns to the top of the inbox then.
\n
\n
\n \n
Your reply of 08:55 was not sent. The attachment is larger than 25 MB.
\n
\n
\n\n
\n

Proofs for the spring catalogue Reply today

\n
\n IB\n Ines Baptista to Marta Keane, 09:42\n 2 files\n
\n
\n
\n

Second proof

\n

Two pages changed since Friday and both are marked in the margin.

\n

Page 14 now carries the corrected price list, and the cover uses the warmer grey you asked for. The file names follow the usual pattern, for example cat-spring-p14.pdf.

\n

What I need from you

\n

A yes or no on the cover by this afternoon, so that the plates can be made tomorrow.

\n

Still open

\n
    \n
  • The back cover address, which the shop has not confirmed.
    • \n
  • Whether the insert is stapled or loose.
    • \n
  • The number of copies for the fair.
    • \n
\n

\n Answer Ines\n First proof\n Print shop rule\n Deleted proofs\n Back to the inbox\n

\n
\n
\n
\n Reply\n Forward\n Delete\n
\n
\n\n
\n
\n \n cat-spring-p14.pdf\n Price list, 1.8 MB\n
\n
\n \n cat-spring-cover.pdf\n Cover, 4.2 MB\n
\n
\n \n Print shop\n Label, 31 threads\n
\n
\n \n Plates on Thursday\n Diary, 08:00\n
\n
\n\n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Inbox
    3. \n
  3. New message
    4. \n
\n
\n
\n

New message

\n

An answer to Ines Baptista, kept as a draft while you write.

\n
\n
\n Back to the inbox\n
\n
\n
\n\n
\n \n
The cover file is 31 MB. Attachments over 25 MB cannot be sent. Share it from Files in its place.
\n
\n\n
\n

Re: Proofs for the spring catalogue Draft, saved 09:58

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n
\n
\n Send\n Save draft\n Discard\n
\n
\n\n
\n\n
\n
\n

Drafts

\n 2\n
\n
    \n
  • \n IB\n
    \n
    Ines Baptista09:58
    \n Re: Proofs for the spring catalogue\n Yes to the cover, the warmer grey is right.\n
    \n
    • \n
  • \n TO\n
    \n
    Tobias OkaforTue
    \n Re: Paper stock for April\n Please hold forty reams of the 120 gram.\n
    \n
    • \n
\n
\n

In this thread

\n 4\n
\n
    \n
  • \n IB\n
    \n
    Ines Baptista09:42
    \n Second proof\n Two pages changed since Friday.\n
    \n
    • \n
  • \n MK\n
    \n
    Marta KeaneFri
    \n Re: First proof\n The grey on the cover is too cold.\n
    \n
    • \n
  • \n IB\n
    \n
    Ines Baptista28 Feb
    \n First proof\n Eleven corrections, most of them on page 14.\n
    \n
    • \n
\n \n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Mail
    3. \n
  3. Bin
    4. \n
\n
\n
\n

Bin

\n

Deleted threads stay here for thirty days and are then removed for good.

\n
\n
\n Back to the inbox\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ThreadFromRemoved inSize
Proofs, first roundInes Baptista2 days6.0 MB
Collection booked for MondayCourier pickups9 days0.1 MB
Winter meeting, minutesGuild of Printers14 days0.4 MB
Type samples, old setNoor Bakker21 days11.2 MB
Statement for JanuaryHanne Lindqvist27 days0.2 MB
\n\n
\n
\n
\n

Delete this thread?

\n
Four messages and two files go to the bin and are removed for good after thirty days.
\n
\n \n \n
\n
\n
\n
\n

Before it is gone

\n
\n A thread can be put back in its folder until its last day. Files that other threads still use are kept, and rules never touch the bin.\n
\n
\n Put back\n
\n
\n
\n\n
\n\n
\n
\n

Storage

\n 6.1 of 15 GB\n
\n
\n
\n The bin holds 17.9 MB in five threads.\n
\n
    \n
  • \n IN\n
    \n
    Inbox2.4 GB
    \n 1,912 threads\n Largest: spring catalogue proofs\n
    \n
    • \n
  • \n PS\n
    \n
    Print shop1.9 GB
    \n 31 threads\n Mostly proofs and plates\n
    \n
    • \n
  • \n AR\n
    \n
    Archive1.6 GB
    \n 4,020 threads\n Nothing newer than January\n
    \n
    • \n
  • \n BN\n
    \n
    Bin17.9 MB
    \n 5 threads\n Emptied a little every day\n
    \n
    • \n
\n \n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Settings
    3. \n
  3. Rules
    4. \n
\n
\n
\n

Rules

\n

Five rules sort incoming mail before it reaches the inbox.

\n
\n
\n Back to mail\n New rule\n
\n
\n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RuleStatusMoves mail toMatchedThis week
Invoices from suppliersActiveInvoices4129
Courier noticesActiveArchive1,23831
Print shop threadsActivePrint shop9614
NewslettersPausedWaiting570
Old guild listFailedFolder was deleted80
\n\n\n
\n
\n \n

No rules for the Family label

\n

Mail with this label is sorted by hand until you add a rule for it.

\n Add a rule\n
\n
\n

When rules run 5

\n
\n Each new message is checked against the rules from the top of the list down, and the first one that matches moves it. A failed rule is skipped until its folder exists again.\n
\n
\n
\n\n
\n\n
\n
\n

New rule

\n Draft\n
\n
\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n Enter at least three characters.\n
\n
\n \n \n
\n
\n \n \n Only you can see this.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s03.p03.t03.u03.dr\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-nm-3333-dr\",\n \"short\": \"v1-nm-3333-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(244 244 245);\n --color-canvas: rgb(244 244 245);\n --color-surface: rgb(244 244 245);\n --color-surface-alt: rgb(255 255 255);\n --color-surface-strong: rgb(227 227 231);\n --color-bar: rgb(244 244 245);\n --color-bar-text: rgb(39 39 42);\n --color-bar-alt: rgb(39 39 42);\n --color-bar-alt-text: rgb(244 244 245);\n --color-inverse: rgb(39 39 42);\n --color-inverse-text: rgb(255 255 255);\n --color-text: rgb(39 39 42);\n --color-text-muted: rgb(113 113 122);\n --color-heading: rgb(39 39 42);\n --color-heading-alt: rgb(113 113 122);\n --color-link: rgb(234 88 12);\n --color-link-quiet: rgb(39 39 42);\n --color-link-visited: rgb(113 113 122);\n --color-link-hover: rgb(39 39 42);\n --color-link-active: rgb(249 115 22);\n --color-border: rgb(227 227 231);\n --color-border-strong: rgb(210 214 218);\n --color-border-muted: rgb(255 255 255);\n --color-accent: rgb(249 115 22);\n --color-accent-text: rgb(24 24 27);\n --color-accent-alt: rgb(14 165 233);\n --color-fill-1: rgb(249 115 22);\n --color-fill-2: rgb(39 39 42);\n --color-fill-3: rgb(14 165 233);\n --color-fill-4: rgb(34 197 94);\n --color-button: rgb(39 39 42);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(244 244 245);\n --color-button-secondary-text: rgb(39 39 42);\n --color-input: rgb(244 244 245);\n --color-input-text: rgb(39 39 42);\n --color-input-border: rgb(210 214 218);\n --color-disabled: rgb(227 227 231);\n --color-disabled-text: rgb(113 113 122 / 0.7);\n --color-danger: rgb(239 68 68);\n --color-danger-surface: rgb(255 255 255);\n --color-success: rgb(34 197 94);\n --color-warning: rgb(234 179 8);\n --color-notice: rgb(255 255 255);\n --color-notice-text: rgb(39 39 42);\n --color-focus: rgb(249 115 22);\n --color-shadow: rgb(200 200 208);\n --color-overlay: rgb(39 39 42 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Noto Sans\", \"Open Sans\", \"Lucida Grande\", \"Segoe UI\", Verdana, sans-serif;\n --font-heading: \"Noto Sans\", \"Open Sans\", \"Lucida Grande\", \"Segoe UI\", Verdana, sans-serif;\n --font-ui: \"Noto Sans\", \"Open Sans\", \"Lucida Grande\", \"Segoe UI\", Verdana, sans-serif;\n --font-mono: Inconsolata, Monaco, Consolas, \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 15px;\n --text-large: 18px;\n --text-display: 36px;\n --text-h1: 30px;\n --text-h2: 24px;\n --text-h3: 16px;\n --line-body: 1.63;\n --line-heading: 1.25;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 900;\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: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8.8px;\n --radius-panel: 8.8px;\n --radius-pill: 30px;\n --radius-page: 12px;\n --shadow-panel: 3px 3px 6px color-mix(in srgb, var(--color-shadow) 80%, transparent), -3px -3px 6px var(--color-border-muted);\n --shadow-control: 2px 2px 4px color-mix(in srgb, var(--color-shadow) 80%, transparent), -2px -2px 4px var(--color-border-muted);\n --shadow-control-hover: 3px 3px 6px var(--color-shadow), -3px -3px 6px var(--color-border-muted);\n --shadow-control-pressed: inset 2px 2px 5px color-mix(in srgb, var(--color-shadow) 80%, transparent), inset -3px -3px 7px var(--color-border-muted);\n --shadow-dialog: 6px 6px 12px var(--color-shadow), -6px -6px 12px color-mix(in srgb, var(--color-border-muted) 20%, 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) 85%, 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.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n --backdrop-blur: 0px;\n}\n" } }