{ "id": "v1-fa-7228", "long_id": "v1.frutiger-aero.docs.s07.p02.t02.u08", "name": "Frutiger Aero developer guide", "era": { "slug": "frutiger-aero", "code": "fa", "name": "Frutiger Aero", "years": [ 2004, 2010 ], "description": "The glossy optimism of 2004 to 2010: sky blue and grass green, glass panels with a bright top highlight, bubbles and soft glows, rounded corners, humanist sans type and reflections under everything." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A fixed-width developer guide in the violet glass variety of the Frutiger Aero look: an amethyst page with an orchid and a lilac glow, a contents rail of frosted glass on the left, and one glass sheet beside it that opens with a dark band holding a small window of sample code. Guides of this kind were common from about 2006 to 2010, when desktops grew sidebars and every platform invited people to write gadgets and widgets for them. Bars, keys and labels are smooth gels lit along the top with no hard break, panels are translucent with a bright upper edge and a soft violet shadow, corners are rounded by 8 to 20px, and the type pairs a small humanist body with light, wide headings.", "url": "https://chrono.skin/s/v1-fa-7228", "preview_url": "https://chrono.skin/s/v1-fa-7228/specimen.html", "files": { "STYLE.md": "# Frutiger Aero developer guide\n\n## Summary\n\nA fixed-width developer guide in the violet glass variety of the Frutiger Aero look: an amethyst page with an orchid and a lilac glow, a contents rail of frosted glass on the left, and one glass sheet beside it that opens with a dark band holding a small window of sample code. Guides of this kind were common from about 2006 to 2010, when desktops grew sidebars and every platform invited people to write gadgets and widgets for them. Bars, keys and labels are smooth gels lit along the top with no hard break, panels are translucent with a bright upper edge and a soft violet shadow, corners are rounded by 8 to 20px, and the type pairs a small humanist body with light, wide headings.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 960px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- `.ds-page__wrap` is a grid of two columns of equal height, `--space-5` (18px) apart: the contents rail (`.ds-nav`, `--size-rail` 196px) on the left and `.ds-page__content` (746px) with the glass sheet `.ds-page__sheet` (90% `--color-canvas`, `--radius-page` corners). The footer band runs under both, 18px lower.\n- The navigation is the rail, never a bar across the top. Top to bottom: the name on a bar of `--size-nav` (48px), the search field, the contents tree, a list of the kit's samples, and at the foot a pale strip with the kit version and its download button. The rail is as tall as the sheet.\n- The home page fills the sheet edge to edge with the hero; the rest sits in `.ds-page__body` (18px padding, 28px at the bottom): the row of four figures, the six topics in three columns under a `.ds-section__title`, then two columns.\n- Two columns in `.ds-page__columns`: main (462px) and a right column `.ds-page__aside` of `--size-side` (230px), 18px apart. With the rail that makes three columns on the screen; never more.\n- Spacing scale: `--space-1` 2px (hairline gaps, sub-link padding), `--space-2` 4px (inside controls, between a label and its field), `--space-3` 8px (gaps between buttons, row and cell padding), `--space-4` 12px (panel and cell padding, gaps between cells and figures), `--space-5` 18px (gutter, sheet padding, gap between stacked blocks), `--space-6` 28px (hero padding, gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 26px tall, the hero buttons `--size-control-large` 36px, the brand tile `--size-mark` 26px, topic tiles `--size-tile` 34px, icons `--size-icon` 16px, the code window `--size-code` 290px, the dialog `--size-dialog` 430px.\n- Inner pages drop the hero and the figures; the rail stays. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the sheet (title and one line on the left, one or two buttons on the right, a 2px rule under it), then either the two columns or a full-width block. `.ds-tabs` sit directly above the text or table they switch; under a table `.ds-table__foot` holds the key to the labels on the left and the pagination on the right; notices sit above the form; a dialog follows the columns across the sheet on its dimmed strip. Further blocks are `.ds-section` blocks 28px apart.\n- Views: the specimen is one guide of four screens, each a `.ds-view` inside the sheet, with the rail and the footer written once around them. `home` is the overview (hero with the code window, figures, six topics, recent updates, the kit panel, most read). `guide` is one guide (tabs, long text with a code block, the contents of the page, the series, onward links). `reference` lists the objects (tabs, table with status labels, the key and pagination, a note on reading an entry, an empty bookmark list). `submit` is the gallery form (notices, the form with its buttons, the checks, the rules, the discarding dialog). Links are plain `href=\"#name\"`; the rail link of the showing view becomes a gel bar by a `.ds-page:has(#name:target)` rule, the Overview link also when no view is named.\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- Two families: `--font-body` and `--font-ui` are \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana; `--font-heading` is \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\": system faces only, a humanist sans with Trebuchet MS where Gill Sans is not installed. `--font-mono` (Monaco) is for inline code.\n- `--text-base` 12px at `--line-body` 1.5. `--text-small` 10px for times, tools, stat labels and the footer. `--text-ui` 12px for buttons, fields and tabs; buttons and bar links are bold.\n- Headings are semibold (`--weight-heading`, `--weight-display` 600): `--text-display` 40px for the greeting in the search band, tightened by `--display-tracking` -0.5px; `--text-h1` 26px page titles and forecast figures; `--text-h2` 18px the brand name and empty-state titles; `--text-h3` 14px (bold) gadget titles, lead headlines, section titles. `--text-large` 16px for the lead and the search field. Nothing is uppercased.\n- Links are not underlined at rest and underline on hover; the scopes and suggestions in the search band are the exception and show where the search goes.\n- `--color-page` #060c1a with `--fill-page`: night blue with a cyan glow at the upper left and a violet one at the upper right.\n- `--color-bar` #181818 with `--fill-bar` (black glass: a lit upper half ending at 50%) and near-white `--color-bar-text` with a glowing `--shadow-text`: the bar, the current tab, the dialog frame, channel orbs.\n- `--color-bar-alt` #1b3d6b with `--fill-bar-alt` (blue glass lit from above): the small-print strip, gadget heads, table head, sidebar titles, the footer link strip.\n- `--color-inverse` #123c8f with `--fill-inverse` (aurora: cyan rising from the lower left, violet from the upper right): the search band and the last strip of the footer, white text.\n- `--color-text` #c9d6e6 on the dark surfaces `--color-canvas` #0b1526, `--color-surface` #101c33, `--color-surface-alt` #162740, `--color-surface-strong` #203552; `--color-heading` #ffffff; `--color-heading-alt` #62d8ff (cyan) section titles, prose h2, breadcrumb marks; `--color-text-muted` #989898.\n- `--color-link` #62c8ff, `--color-link-quiet` #a3b8cf, visited #b59cff, hover #a8ecff, active #ffffff.\n- `--color-button` #0f8fd0 with `--fill-button` (a gel capsule: a white sheen over the upper half, a faint second light at the foot) and a halo from `--shadow-control`: the primary button, the brand tile, arrow buttons, the current page number. `--color-button-secondary` #26374f with the same sheen: every other button.\n- `--color-accent` #19c2f0 with dark `--color-accent-text`: pill badges and list bullets. `--color-accent-alt` #c86bff (violet): the New marker.\n- `--color-fill-1` to `--color-fill-4` (deep blue, teal, violet, sea green): the lower end of forecast tiles and channel tiles.\n- Borders: `--color-border` #2a4466 around gadgets, `--color-border-muted` #1c2f4a between rows, `--color-border-strong` #4d7fb3 for the sheet and the 2px dialog frame, `--color-input-border` #35557d.\n- `--color-notice` #132c4a; `--color-danger` #e0483c on `--color-danger-surface` #3a1418; `--color-success` #2fa84a and `--color-warning` #f2b31c fill status badges.\n- Surface: `--radius-control` 13px (capsule buttons and fields), `--radius-panel` 10px, `--radius-page` 16px, `--radius-pill` 20px. `--shadow-panel` is a lit inner top edge and an 18px drop; `--shadow-control` adds an 8px halo in `--color-focus` that grows to 14px on hover; `--shadow-dialog` is a 40px drop inside a 30px glow. `--fill-panel` is translucent and `--backdrop-blur` 10px blurs what lies behind it. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills (the fill's colour mixed with `--color-shadow`), the lit bar link (`--color-bar-text` with transparent), the sheet (90% `--color-canvas`), the halo of the search field (`--color-focus` with transparent), gloss on status fills (mixed with `--color-button-text`).\n- The era's conventions for which text sits on which fill, kept by every layout and every token set of the era:\n - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours sit on `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong`, `--fill-panel` and the four `--color-fill-*` tints. A palette keeps page, canvas, surfaces and fills on one side (all light or all dark) so that these stay readable on every one of them.\n - `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`. Links on a bar take the bar's text colour, never `--color-link`.\n - `--color-button-text` on `--fill-button` and on any fill made from `--color-danger`, `--color-success` or `--color-accent-alt`; it is always the light colour and also supplies the gloss on those fills (mixed in with `color-mix()`).\n - `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-button-secondary-text` on `--fill-button-secondary`; `--color-notice-text` on `--color-notice`; `--color-danger` as text on `--color-danger-surface` and on the surfaces.\n - Nothing but decoration sits on `--fill-page`: no text is set directly on the page.\n - `--color-focus` is the glow colour: the focus ring, the halo of the search field and of a hovered button. `--color-inverse-text` draws the bubbles on the sky band. `--color-shadow` tints every shadow and darkens the outline of every glossy fill.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__wrap` is the 960px grid; `.ds-page__content` its right column; `.ds-page__sheet` the glass sheet; `.ds-page__body` its padded area; `.ds-page__columns` holds `.ds-page__main` and `.ds-page__aside`. `.ds-section` separates blocks by 28px, `.ds-section__title` (19px) heads one. `.ds-view` is one screen (`.ds-view--home` the first).\n- `.ds-nav`: the contents rail. `.ds-nav__head` is the bar with the `.ds-brand`; `.ds-nav__search` holds a capsule `.ds-nav__input`; `.ds-nav__links` is the tree: each `.ds-nav__item` has a `.ds-nav__link` with a `.ds-nav__icon` (current: `is-current`, a gel bar; hover: `is-hover`) and may hold a `.ds-nav__sub` list of `.ds-nav__sublink` pages on a hairline. A `.ds-nav__label` heads a further plain list of pages (`.ds-nav__sub--plain`). `.ds-nav__foot` at the bottom holds a `.ds-nav__note` with the `.ds-nav__version` and one `.ds-button--block`. Four to six top links.\n- `.ds-brand`: the site's mark and name on the rail's bar, linking home; one per page. `.ds-brand__mark` is a rounded tile dressed like the primary button; `.ds-brand__name` is the name at `--text-h2` in `--color-bar-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the overview's opening band on `--fill-inverse`, home page only. `.ds-hero__main` holds `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large` and a secondary one) and a small `.ds-hero__note`. `.ds-hero__window` on the right is a glass window: `.ds-hero__window-bar` caption and a `.ds-hero__code` block of at most twelve short lines (`.ds-hero__code-key` for object names, `.ds-hero__code-note` for comments).\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (25px) and one grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right; a 2px rule under the whole. One per inner page.\n- `.ds-stat`: one figure, a pale glass tile with a 25px `.ds-stat__number` over an 11px `.ds-stat__label`; four sit in a `.ds-stats` row at the top of the overview.\n- `.ds-grid`: topics in three columns, 12px apart. `.ds-grid__cell` (`--1` to `--4` choose the tint it fades into) holds a `.ds-grid__icon` tile (aqua by default, `--bar` violet, `--accent` orchid, `--alt` orange) beside `.ds-grid__body` with a `.ds-grid__title` and one grey `.ds-grid__text` line.\n- `.ds-prose`: long text: h1, h2 (teal), h3 (bold 14px), p, ul, ol, code, strong and links inside it are styled. `.ds-code` is a block of sample code inside or beside it.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` bold, `.ds-link--quiet` for minor links, `.ds-link--code` for object names. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: aqua gel, white bold 12px, 26px tall, 8px corners; may end with a `.ds-button__icon`. Variants: `.ds-button--secondary` (lavender glass, the usual button), `.ds-button--danger` (red gel, only for an action that removes), `.ds-button--large` (36px, the hero), `.ds-button--block` (full width, the rail). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row. One primary button per form, panel or dialog.\n- `.ds-form`: labels above their fields. `.ds-form__row` holds a bold `.ds-form__label` and a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea`; `.ds-form__pair` sets two short rows side by side; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` for the buttons over a hairline.\n- `.ds-table`: data table in a rounded border with the panel shadow: `.ds-table__head` cells are a strip of `--fill-bar`; `.ds-table__row` with `is-alt` on alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns; `.ds-table__note` is a second grey line. `.ds-table__foot` under it holds the key and the pagination.\n- `.ds-list`: list of updates. Each `.ds-list__item` is a `.ds-list__mark` dot beside `.ds-list__body`: a bold `.ds-list__title`, a `.ds-list__text` line and a grey `.ds-list__meta`. Rows are divided by hairlines.\n- `.ds-panel`: a glass box in the side column (`is-last` on the last block): teal `.ds-panel__title` over a hairline, `.ds-panel__body` with `.ds-panel__text`, a `.ds-panel__facts` list of `.ds-panel__fact` rows (name in `.ds-panel__fact-name`, value at the right) and `.ds-panel__actions`.\n- `.ds-tabs`: a pale toolbar strip of `.ds-tabs__tab` links; the current one `is-current` is a white raised plate. Two to five tabs.\n- `.ds-badge`: a small gel label, orchid by default. `.ds-badge--count` (flat pale), `.ds-badge--new` (orange). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: an unboxed link block in the side column (`is-last` on the last): `.ds-sidebar__title` and a `.ds-sidebar__list` hanging from a 2px rule; each `.ds-sidebar__item` (current: `is-current`, marked in `--color-accent`) may end with a `.ds-sidebar__count`. For the contents of a page and short link lists.\n- `.ds-notice`: a rounded message with a square `.ds-notice__sign`, `.ds-notice__text` and a bold `.ds-notice__title`. Variant `.ds-notice--error`.\n- `.ds-pagination`: one segmented key: `.ds-pagination__item` holding `.ds-pagination__link`, `is-current` (aqua gel), `is-disabled`.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with teal `.ds-breadcrumb__sep` marks and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small window with a 2px rim: `.ds-dialog__title` on `--fill-bar` (with a round red `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and a pale `.ds-dialog__actions` strip with the buttons at the right. It casts `--shadow-dialog` and sits on `.ds-dialog__backdrop`, a dimmed rounded strip in the page flow.\n- `.ds-empty`: a pale well with a glass `.ds-empty__icon` tile, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: a dark band under the rail and the sheet: a `.ds-footer__list` of `.ds-footer__link` items on the left, the `.ds-footer__legal` line on the right.\n- `.ds-progress`: the glossy accent progress bar, a native `` in a `.ds-progress__row` with label and value; for downloads, installs and storage.\n- `.ds-accordion`: expanding help sections, one `
` per question with `__head` and `__body`.\n- `.ds-tooltip`: a round `?` hint that opens a pale balloon (`__trigger`, `__text`) on hover or focus, beside a label or title.\n\n## Never\n\n- `row-gap <= 24px`: rows are divided by a hairline, not by space.\n- `block-gap <= 28px`: sections are at most 28px apart.\n- `content-width <= 960px`: text stays inside the rail and the sheet.\n- `palette-colours <= 46`: night blues, cyan, violet, a green, amber, red and greys.\n- `font-size <= 40px`: the greeting is the largest text.\n- `font-size >= 10px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: a body sans, a heading sans, a monospace for inline code.\n- `line-height <= 1.5`: body text is 12px on 18px.\n- `underlined-links <= 12%`: only the search band's scopes and suggestions are underlined at rest.\n- `letter-spacing <= 0.5px`: only the greeting is tightened, by half a pixel; nothing is spaced out.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 4px`: corners are 1, 2, 3 or 4px; only the round brand gel is rounder.\n- `border-width <= 3px`: hairlines, and 3px for the dialog's rim, notice strokes, the current tab and the blank print.\n- `box-shadow-blur <= 20px`: shadows are short contact shadows; only prints and the dialog reach 20px.\n- `gradient-fills <= 40%`: gloss belongs to the plate, keys, labels, cells and the drawn pictures; text areas stay plain.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new bar is `--fill-bar`, a pale strip `--fill-bar-alt`, a dark band `--fill-inverse`; a new box is a `.ds-panel` if it explains and a `.ds-sidebar` if it lists links; a new entry in the rail is a `.ds-nav__item`, never a second bar. Keep to the conventions above for which text token sits on which fill, give gels an outline mixed from their colour and `--color-shadow`, take highlights from the surface tokens instead of drawing new ones, and make any extra shade with `color-mix()` over existing tokens.\n", "components.css": ":root {\n --size-page: 960px;\n --size-rail: 196px;\n --size-side: 230px;\n --size-nav: 48px;\n --size-mark: 26px;\n --size-control: 26px;\n --size-control-large: 36px;\n --size-icon: 16px;\n --size-tile: 34px;\n --size-code: 290px;\n --size-glow: 8px;\n --size-textarea: 84px;\n --size-dialog: 430px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 18px;\n --space-6: 28px;\n}\n\n/* shell: a contents rail on the left, one glass sheet beside it, a band across both to close */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-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 { box-sizing: border-box; }\n.ds-page__wrap {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n gap: var(--space-5);\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-page__content { min-width: 0; }\n.ds-page__sheet {\n height: 100%;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 70%, transparent);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-canvas) 90%, transparent);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-page__body { padding: var(--space-5) var(--space-5) var(--space-6); }\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__aside {\n flex: 0 0 var(--size-side);\n width: var(--size-side);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section__title {\n margin: 0 0 var(--space-4);\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\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/* nav: the rail, a glass pane with the name on a bar, the search, the contents tree and the kit at its foot */\n.ds-nav {\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 70%, transparent);\n border-radius: var(--radius-page);\n background-color: color-mix(in srgb, var(--color-canvas) 84%, transparent);\n background-image: var(--fill-panel);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-nav__head {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n height: var(--size-nav);\n padding: 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__search {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-3);\n}\n.ds-nav__input {\n width: 100%;\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus {\n outline: var(--focus-ring);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-nav__links {\n margin: 0;\n padding: 0 var(--space-3) var(--space-4);\n list-style: none;\n}\n.ds-nav__item { margin: var(--space-1) 0 0; }\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\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}\n.ds-nav__icon {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n border-color: var(--color-border);\n background: var(--color-surface-strong);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#reference:target) .ds-nav__link[href=\"#reference\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"] {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__sub {\n margin: var(--space-1) 0 var(--space-3) calc(var(--space-3) + var(--size-icon) / 2);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-nav__sublink {\n display: block;\n padding: var(--space-1) 0;\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__sublink:hover,\n.ds-nav__sublink.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__label {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-nav__sub--plain {\n margin: 0 var(--space-4) var(--space-4);\n padding: 0;\n border-left: 0;\n}\n.ds-nav__foot {\n margin: auto 0 0;\n padding: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-nav__note {\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-nav__version {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n\n/* brand: the mark on a rounded gel tile, the name on the rail's bar */\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n\n/* hero: a dark band at the head of the sheet, the claim on the left, a window of sample code on the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-hero__note {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-hero__window {\n flex: 0 0 var(--size-code);\n width: var(--size-code);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n border-radius: var(--radius-panel);\n background-color: color-mix(in srgb, var(--color-canvas) 88%, transparent);\n background-image: var(--fill-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n overflow: hidden;\n}\n.ds-hero__window-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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}\n.ds-hero__code {\n margin: 0;\n padding: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n overflow: hidden;\n}\n.ds-hero__code-key { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-hero__code-note { color: var(--color-text-muted); }\n\n/* page header: head of an inner page, action on the right, a rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n flex: 1 1 0;\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}\n.ds-page-header__text {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* stats: four pale glass tiles, the figure over its label */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0 0 var(--space-6);\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-alt-text);\n}\n.ds-stat__number {\n display: block;\n white-space: nowrap;\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}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n}\n\n/* grid: six topics in three columns, each beside a small gel tile */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-4);\n margin: 0;\n}\n.ds-grid__cell {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n min-width: 0;\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: linear-gradient(to right, var(--color-surface) 0, var(--color-surface-alt) 100%);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--1 { background: linear-gradient(to right, var(--color-surface) 0, var(--color-fill-1) 100%); }\n.ds-grid__cell--2 { background: linear-gradient(to right, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-grid__cell--3 { background: linear-gradient(to right, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-grid__cell--4 { background: linear-gradient(to right, var(--color-surface) 0, var(--color-fill-4) 100%); }\n.ds-grid__icon {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-tile);\n height: var(--size-tile);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-grid__icon svg {\n display: block;\n width: 56%;\n height: 56%;\n}\n.ds-grid__icon--bar {\n border-color: color-mix(in srgb, var(--color-bar) 68%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-grid__icon--accent {\n border-color: color-mix(in srgb, var(--color-accent) 68%, var(--color-shadow));\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-grid__icon--alt {\n border-color: color-mix(in srgb, var(--color-accent-alt) 68%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt), var(--color-button-text) 40%) 0, var(--color-accent-alt) 100%);\n}\n.ds-grid__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* tabs: a pale toolbar strip, the current tab a raised plate on it */\n.ds-tabs {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--fill-bar-alt);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: calc(var(--radius-control) - var(--space-1));\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { border-color: var(--color-border); }\n.ds-tabs__tab.is-current {\n border-color: var(--color-border-strong);\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n color: var(--color-heading);\n}\n\n/* list: what changed in the documentation, a gel dot before each title */\n.ds-list {\n margin: 0;\n padding: 0;\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) 0;\n}\n.ds-list__item + .ds-list__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-list__mark {\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n margin-top: var(--space-2);\n border-radius: 50%;\n background: var(--fill-accent);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-list__text { margin: var(--space-1) 0 0; }\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a glass box in the side column */\n.ds-panel {\n margin: 0 0 var(--space-5);\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-panel);\n}\n.ds-panel.is-last { margin-bottom: 0; }\n.ds-panel__title {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__text.is-last { margin-bottom: 0; }\n.ds-panel__facts {\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n}\n.ds-panel__fact {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n}\n.ds-panel__fact + .ds-panel__fact { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-panel__fact-name { color: var(--color-text-muted); }\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* sidebar: an unboxed list of links hanging from a rule on its left */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n border-left: var(--border-width-strong) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n margin-left: calc(0px - var(--border-width-strong));\n padding: var(--space-1) 0 var(--space-1) var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-sidebar__item.is-current {\n border-left-color: var(--color-accent);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* code: a block of sample code */\n.ds-code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface-alt);\n color: var(--color-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n overflow: hidden;\n}\n\n/* footer: a dark band across the rail and the sheet */\n.ds-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n grid-column: 1 / -1;\n padding: var(--space-4) var(--space-5);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-footer__legal { margin: 0; }\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\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 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li { margin: 0 0 var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) / 2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link-hover); }\n.ds-link--code {\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: gel keys, lit along the top */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\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-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\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 background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button__icon {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--block { display: flex; }\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 68%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 50%) 0, var(--color-danger) 45%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 12%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 62%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 14%) 45%, var(--color-danger) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n\n/* form: labels over their fields, short fields two to a row */\n.ds-form { margin: 0; }\n.ds-form__pair {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-5);\n}\n.ds-form__row { margin: 0 0 var(--space-4); }\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\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-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { padding: 0 var(--space-2); }\n.ds-form__textarea {\n height: var(--size-textarea);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\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 font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: the head is a strip of the primary bar */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n overflow: hidden;\n}\n.ds-table__head {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table__cell {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: top;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-4) 0 0;\n}\n\n/* badge: a small gel label */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\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: calc(var(--text-small) + var(--space-3));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 35%) 0, var(--color-success) 60%);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning), var(--color-button-text) 45%) 0, var(--color-warning) 60%);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 35%) 0, var(--color-danger) 60%);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* notice: a rounded line with a square sign */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 35%, var(--color-notice));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__sign {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: var(--space-1);\n border-radius: calc(var(--radius-control) / 2);\n background: var(--color-notice-text);\n color: var(--color-notice);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-notice__text { margin: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__sign {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n\n/* pagination: one segmented key */\n.ds-pagination {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1;\n}\n.ds-pagination__item + .ds-pagination__item { margin-left: calc(0px - var(--border-width)); }\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n.ds-pagination__item:first-child .ds-pagination__link { border-radius: var(--radius-control) 0 0 var(--radius-control); }\n.ds-pagination__item:last-child .ds-pagination__link { border-radius: 0 var(--radius-control) var(--radius-control) 0; }\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n position: relative;\n border-color: color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\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__sep { color: var(--color-heading-alt); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog: a small window with a bar for its title, shown in the page flow on a dimmed strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n margin: var(--space-5) 0 0;\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-danger);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-small) * 0.9);\n height: calc(var(--text-small) * 0.9);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) calc(50% - var(--space-3) / 8), 100% calc(50% - var(--space-3) / 8), 100% calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) calc(50% + var(--space-3) / 8), 0 calc(50% + var(--space-3) / 8), 0 calc(50% - var(--space-3) / 8), calc(50% - var(--space-3) / 8) calc(50% - var(--space-3) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body { padding: var(--space-5); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-alt);\n}\n\n/* empty state: a pale well with a glass tile */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-tile);\n height: var(--size-tile);\n margin: 0 auto var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__icon svg {\n display: block;\n width: 56%;\n height: 56%;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* Components of the period: menu, progress, carousel, accordion, tooltip, avatar */\n:root {\n --size-progress: 14px;\n --size-orb: 24px;\n --size-slide: 96px;\n --size-avatar: 44px;\n --size-avatar-small: 28px;\n --size-menu: 200px;\n --size-tip: 220px;\n --size-dot: 8px;\n}\n\n.ds-progress__row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-progress__label { flex: 0 0 auto; color: var(--color-text); }\n.ds-progress__value { flex: 0 0 auto; color: var(--color-text-muted); }\n.ds-progress__note { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n display: block;\n flex: 1 1 0;\n width: 100%;\n height: var(--size-progress);\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-progress::-moz-progress-bar { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-carousel__dot.is-current { background: var(--color-accent); }\n\n.ds-accordion { margin: 0 0 var(--space-3); border: var(--border-width) var(--border-style) var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); overflow: hidden; }\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-accordion__item:first-child { border-top: 0; }\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__head::marker { color: var(--color-accent-alt); }\n.ds-accordion__head:hover { color: var(--color-link-hover); }\n.ds-accordion__body { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); color: var(--color-text); font-size: var(--text-small); }\n.ds-accordion__body p { margin: 0; }\n\n.ds-tooltip { position: relative; display: inline-block; vertical-align: middle; }\n.ds-tooltip__trigger {\n display: inline-block;\n width: var(--size-orb);\n height: var(--size-orb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n cursor: help;\n text-transform: none;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__text {\n display: none;\n position: absolute;\n top: calc(100% + var(--space-1));\n left: 0;\n z-index: 20;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: var(--shadow-panel);\n color: var(--color-notice-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n text-transform: none;\n text-shadow: none;\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text { display: block; }\n", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero developer guide specimen\n\n\n\n\n
\n\n
\n
\n chronoskin\n
\n
\n \n
\n \n

Samples in the kit

\n \n
\n

Kit 2.1Released 18 March, 6 MB, for every edition of chronoskin Desktop.

\n Download the kit\n
\n
\n\n
\n
\n\n
\n\n
\n
\n

Build a desktop gadget in an afternoon

\n

A gadget is one small page and a settings file. The chronoskin Gadget Kit gives you the glass, the clock and the storage; you bring the idea.

\n

\n Start the first guide \n Browse the reference\n

\n

Free to use. You need a text editor and twenty minutes.

\n
\n
\n

hello.gadget12 lines

\n
// a clock that says hello\ngadget.title = \"Hello\";\ngadget.size(130, 130);\n\nclock.every(\"minute\", function () {\n  face.text = clock.time(\"HH:mm\");\n  face.glow = clock.isNight();\n});\n\ngadget.show();
\n
\n
\n\n
\n\n
    \n
  • 3,840gadgets in the gallery
    • \n
  • 46guides and samples
    • \n
  • 212members in the reference
    • \n
  • 2 daysto review a submission
    • \n
\n\n

Start here

\n
\n
\n \n
\n

Your first gadget

\n

From an empty folder to a clock on the desktop.

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

Settings and storage

\n

Remember what the owner chose, between restarts.

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

Drawing on glass

\n

Blur, glow and reflection without a single picture.

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

Clock and weather

\n

The two feeds every gadget may read for free.

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

Objects and events

\n

Every member, with the version it arrived in.

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

Into the gallery

\n

Pack it, send it, and what the reviewers look for.

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

Recently updated

\n \n
\n \n
\n
\n\n
\n
\n\n
\n
\n
    \n
  1. Overview
    2. \n
  2. ›
    3. \n
  3. Guides
    4. \n
  4. ›
    5. \n
  5. Your first gadget
    6. \n
\n
\n
\n

Guides: getting started

\n

Part 1 of 4. Written for kit 2.1, nine minutes to read.

\n
\n
\n Download the sample\n
\n
\n
\n
\n \n
\n

Your first gadget

\n

A gadget is a folder with two files in it: a page that draws the gadget and a settings file that tells the desktop its name and size. This guide builds a small clock and puts it on the desktop. Nothing has to be installed except the kit.

\n

Make the folder

\n

Create a folder called hello.gadget anywhere you like. The ending matters: the desktop treats every folder that ends in .gadget as one gadget.

\n
    \n
  • gadget.page holds what the gadget shows.
    • \n
  • gadget.settings holds its name, its size and what it may read.
    • \n
  • Anything else in the folder, such as sounds, is packed along with it.
    • \n
\n

Say hello

\n

Open gadget.page in a text editor and type the lines below. The clock object calls your function once a minute, so the gadget never has to ask for the time itself.

\n
gadget.title = \"Hello\";\ngadget.size(130, 130);\n\nclock.every(\"minute\", function () {\n  face.text = clock.time(\"HH:mm\");\n});\n\ngadget.show();
\n

Try it

\n

Double click the folder. The preview tool opens the gadget on a sheet of glass and reloads it every time you save. When the clock looks right, read on in Settings and storage.

\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Overview
    2. \n
  2. ›
    3. \n
  3. Reference
    4. \n
  4. ›
    5. \n
  5. Objects
    6. \n
\n
\n
\n

Reference

\n

Every object a gadget may use, with the kit version it arrived in.

\n
\n
\n Printable version\n Download the kit\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ObjectWhat it is forMembersSinceState
gadgetThe gadget itself: title, size, showing and hiding.Every gadget uses it.311.0Stable
clockThe time, the date and calls at a steady interval.121.0Stable
storageSmall values kept between restarts.Limited to 2 MB from kit 2.1.91.2Changed
weatherToday and four days ahead for the owner's town.172.0Stable
glassBlur, glow and reflection for any part of the page.82.1New in 2.1
tickerScrolling text along the lower edge.Use the clock and a text field instead.51.0Removed
\n
\n

\n New in 2.1\n Stable\n Changed\n Removed\n 6 of 23 objects\n

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

Reading an entry ?Entries are listed in alphabetical order.

\n
\n

Each object has a page of its own that lists its members in the order you are likely to need them. Since is the first kit version that had the object; a gadget that names a newer object will not start on an older desktop, so set needs in the settings file to match.

\n
\n
\n

Common questions

\n
\n
Which file draws the gadget?

The page file named in the settings file.

\n
Can a gadget run in the background?

No. It runs only while it is on the desktop.

\n
\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Overview
    2. \n
  2. ›
    3. \n
  3. Gallery
    4. \n
  4. ›
    5. \n
  5. Submit a gadget
    6. \n
\n
\n
\n

Submit a gadget

\n

Send a packed gadget to the gallery. A reviewer answers within two working days.

\n
\n
\n How to pack a gadget\n
\n
\n
\n
\n
\n
\n i\n

Your draft is saved. You can close this page and come back to it within thirty days.

\n
\n
\n !\n

One field needs another look. The version number below is not one the gallery can read.

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

Write the version as numbers, for example 1.2.

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

Two or three sentences. This is the text people see in the gallery.

\n
\n
\n \n
\n
\n \n \n \n Discard the draft\n
\n
\n
\n \n
\n
\n
\n

Discard the draft?

\n
\n

The packed gadget and everything you typed on this page will be removed from the gallery. The folder on your computer is not touched.

\n
\n
\n Keep the draft\n Discard\n
\n
\n
\n
\n
\n\n
\n
\n\n\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.docs.s07.p02.t02.u08\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-7228\",\n \"short\": \"v1-fa-7228\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #060c1a;\n --color-canvas: #0b1526;\n --color-surface: #101c33;\n --color-surface-alt: #162740;\n --color-surface-strong: #203552;\n --color-bar: #181818;\n --color-bar-text: #eef6ff;\n --color-bar-alt: #1b3d6b;\n --color-bar-alt-text: #d4e9ff;\n --color-inverse: #123c8f;\n --color-inverse-text: #ffffff;\n --color-text: #c9d6e6;\n --color-text-muted: #989898;\n --color-heading: #ffffff;\n --color-heading-alt: #62d8ff;\n --color-link: #62c8ff;\n --color-link-quiet: #a3b8cf;\n --color-link-visited: #b59cff;\n --color-link-hover: #a8ecff;\n --color-link-active: #ffffff;\n --color-border: #2a4466;\n --color-border-strong: #4d7fb3;\n --color-border-muted: #1c2f4a;\n --color-accent: #19c2f0;\n --color-accent-text: #03131f;\n --color-accent-alt: #c86bff;\n --color-fill-1: #10305e;\n --color-fill-2: #0d3a55;\n --color-fill-3: #2a1d5c;\n --color-fill-4: #123f3a;\n --color-button: #0f8fd0;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #26374f;\n --color-button-secondary-text: #dcecff;\n --color-input: #060d1a;\n --color-input-text: #e6f1ff;\n --color-input-border: #35557d;\n --color-disabled: #1a2434;\n --color-disabled-text: #5d6d82;\n --color-danger: #e0483c;\n --color-danger-surface: #3a1418;\n --color-success: #2fa84a;\n --color-warning: #f2b31c;\n --color-notice: #132c4a;\n --color-notice-text: #d4e9ff;\n --color-focus: #5fe6ff;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\n --font-heading: \"Gill Sans\", \"Gill Sans MT\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\n --font-mono: Monaco, \"Lucida Console\", monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 40px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 2px;\n --radius-panel: 3px;\n --radius-pill: 2px;\n --radius-page: 4px;\n --shadow-panel: inset 0 0 0 1px color-mix(in srgb, white 65%, transparent), 0 9px 7px -7px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 75%, transparent), 0 2px 0 -1px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-focus) 90%, transparent), 0 0 5px color-mix(in srgb, var(--color-focus) 70%, transparent);\n --shadow-control-pressed: inset 0 1px 4px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 50%, transparent), 0 18px 16px -10px color-mix(in srgb, var(--color-shadow) 55%, transparent), 0 2px 20px color-mix(in srgb, var(--color-shadow) 30%, transparent);\n --shadow-text: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: linear-gradient(115deg, transparent 0, transparent 28%, color-mix(in srgb, white 11%, transparent) 28%, color-mix(in srgb, white 11%, transparent) 41%, transparent 41%, transparent 56%, color-mix(in srgb, white 7%, transparent) 56%, color-mix(in srgb, white 7%, transparent) 61%, transparent 61%) 0 0 / 100% 620px no-repeat, radial-gradient(ellipse 80% 340px at 50% 0, color-mix(in srgb, white 50%, transparent) 0, transparent 100%) 0 0 / 100% 340px no-repeat, linear-gradient(to bottom, var(--color-page) 0, color-mix(in srgb, var(--color-page), black 14%) 520px, color-mix(in srgb, var(--color-page), white 34%) 1300px) 0 0 / 100% 1300px no-repeat, color-mix(in srgb, var(--color-page), white 34%);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, white 45%, transparent) 0, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 34%) 0, var(--color-bar) 46%, color-mix(in srgb, var(--color-bar), black 20%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 70%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: linear-gradient(115deg, transparent 0, transparent 52%, color-mix(in srgb, white 10%, transparent) 52%, color-mix(in srgb, white 10%, transparent) 64%, transparent 64%, transparent 70%, color-mix(in srgb, white 6%, transparent) 70%, color-mix(in srgb, white 6%, transparent) 73%, transparent 73%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 16%) 0, var(--color-inverse) 55%, color-mix(in srgb, var(--color-inverse), black 25%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 35%) 0, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 12%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 60%, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 8%) 45%, color-mix(in srgb, var(--color-button), black 14%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 60%) 0, color-mix(in srgb, var(--color-button), white 22%) 45%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, var(--color-button-secondary) 55%, color-mix(in srgb, var(--color-button-secondary), black 8%) 100%);\n --fill-input: linear-gradient(to bottom, var(--color-input) 0, var(--color-input) 60%, var(--color-surface-alt) 100%);\n --focus-ring: 1px dotted var(--color-text);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }