{ "id": "v1-fa-7443", "long_id": "v1.frutiger-aero.docs.s07.p04.t04.u03", "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-7443", "preview_url": "https://chrono.skin/s/v1-fa-7443/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- One family: `--font-body`, `--font-heading` and `--font-ui` are \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif: system and open faces only. `--font-mono` (Menlo) is for inline code.\n- `--text-base` 12px at `--line-body` 1.5. `--text-small` 11px for meta lines, hints, readout labels, the control strip. `--text-ui` 11px bold for buttons, tabs and table heads (`--weight-ui` 700).\n- Headings are light (`--weight-heading`, `--weight-display` 300) and get their weight from size: `--text-display` 34px for the stage title with `--display-tracking` -1px, `--text-h1` 24px page titles and readout figures, `--text-h2` 16px section titles and the brand name, `--text-h3` 12px (bold) panel and source list titles, navigation. `--text-large` 14px (bold) for album names, the stage lead and large keys. Nothing is uppercased.\n- Links are not underlined at rest (`--link-decoration` none) and underline on hover; titles are bold (`.ds-link--title`).\n- `--color-page` #e8e8e8 with `--fill-page`: pearl, lit white from the top and a little darker towards the floor.\n- `--color-bar` #303030 with `--fill-bar` (dark glass under an arched highlight) and white `--color-bar-text` under `--shadow-text`: the title bar, the control strip, the current tab, the dialog's title bar.\n- `--color-bar-alt` #d0d0d0 with `--fill-bar-alt` (silver, light to mid grey): the readout strip, table heads, the current source.\n- `--color-inverse` #080808 with `--fill-inverse` (black under a soft spotlight): the stage only, with `--color-inverse-text` #f0f0f0.\n- `--color-heading` #202020 page, section and panel titles; `--color-heading-alt` #4a8a05 (green) source list titles, prose h2, breadcrumb marks. `--color-text` #565656, `--color-text-muted` #6e6e6e.\n- `--color-link` #2971a7, `--color-link-quiet` #666666, visited #6c5a9c, hover #0060d0, active #59990e.\n- `--color-button` #59a80f with `--fill-button` (green gel under the same arch): the primary key, the brand tile, the play key, the current page number. `--color-button-secondary` #d0d0d0 with `--fill-button-secondary` (silver): every other key, tabs at rest.\n- `--color-accent` #6bbf12 with `--fill-accent`: badges, meter bars, the lamp under the current link, the frame of the current thumbnail. `--color-accent-alt` #2971a7: the New label.\n- `--color-fill-1` to `--color-fill-4` (pearl, mist, leaf, lilac grey): the upper end of each album cell's fade; never text or borders.\n- Borders are 1px solid: `--color-border` #cccccc for boxes, `--color-border-muted` #e5e5e5 for rules inside a box, `--color-border-strong` #767676 for the window and the dialog, `--color-input-border` #a8a8a8 for fields.\n- `--color-notice` #eef6e2 for notices; `--color-danger` #b3261e on `--color-danger-surface` #fbeceb for errors; `--color-success` #4a9a0a and `--color-warning` #e89a00 fill the status badges and signs.\n- Surface: `--radius-control` 12px (controls are capsules), `--radius-panel` 6px, `--radius-pill` 3px (labels and pictures are nearly square), `--radius-page` 8px. `--shadow-panel` is a white upper edge and a short shadow thrown on the floor under a box; `--shadow-control` a bright rim; a hovered key gains a ring in `--color-focus`; `--shadow-dialog` is the deep 30px shadow of a floating window and of the cover in front. Nothing is translucent: `--backdrop-blur` 0px. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills, dividers on the bars (`--color-bar-text` with transparent), the sheen and the motifs of `.ds-art` (mixed from `--color-bar`, `--color-accent`, `--color-accent-alt`, `--color-inverse`, `--color-button` and `--color-button-text`), the floor line of the stage (`--color-inverse-text` with transparent).\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 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 or band take that 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` and `--color-success` as text on the surfaces and on their own pale mixes.\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 a focused field and of a hovered button. `--color-shadow` tints every shadow and darkens the outline of every glossy fill (the fill's colour mixed with `--color-shadow`).\n - A `--fill-*` token may end in a plain colour layer, so it is always the last layer of a `background`.\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 <= 48`: greys, black, one green, one blue for links, amber and red for status.\n- `font-size <= 34px`: the stage title is the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight; headings are light.\n- `font-families <= 2`: one grotesque, a monospace only for inline code.\n- `line-height <= 1.5`: body text is 12px on 18px.\n- `underlined-links <= 10%`: links underline on hover only.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 9px`: corners are 3, 5 or 6px; only dots, round buttons and pills are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 12px`: shadows are short; the dialog's 12px is the deepest.\n- `gradient-fills <= 26%`: gloss belongs to the strips, tabs, buttons, pills and tiles; 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.p04.t04.u03\",\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-7443\",\n \"short\": \"v1-fa-7443\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f6f6f6;\n --color-surface-strong: #e5e5e5;\n --color-bar: #303030;\n --color-bar-text: #ffffff;\n --color-bar-alt: #d0d0d0;\n --color-bar-alt-text: #2c2c2c;\n --color-inverse: #080808;\n --color-inverse-text: #f0f0f0;\n --color-text: #565656;\n --color-text-muted: #6e6e6e;\n --color-heading: #202020;\n --color-heading-alt: #4a8a05;\n --color-link: #2971a7;\n --color-link-quiet: #666666;\n --color-link-visited: #6c5a9c;\n --color-link-hover: #0060d0;\n --color-link-active: #59990e;\n --color-border: #cccccc;\n --color-border-strong: #767676;\n --color-border-muted: #e5e5e5;\n --color-accent: #6bbf12;\n --color-accent-text: #ffffff;\n --color-accent-alt: #2971a7;\n --color-fill-1: #f0f0f0;\n --color-fill-2: #e8f0f0;\n --color-fill-3: #eaf3dc;\n --color-fill-4: #f0f0f8;\n --color-button: #59a80f;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #d0d0d0;\n --color-button-secondary-text: #202020;\n --color-input: #ffffff;\n --color-input-text: #202020;\n --color-input-border: #a8a8a8;\n --color-disabled: #ededed;\n --color-disabled-text: #a8a8a8;\n --color-danger: #b3261e;\n --color-danger-surface: #fbeceb;\n --color-success: #4a9a0a;\n --color-warning: #e89a00;\n --color-notice: #eef6e2;\n --color-notice-text: #35520f;\n --color-focus: #6aa7de;\n --color-shadow: #101010;\n --color-overlay: rgba(8, 8, 8, 0.55);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-mono: Menlo, \"DejaVu Sans Mono\", \"Courier New\", monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 34px;\n --text-h1: 24px;\n --text-h2: 16px;\n --text-h3: 12px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -1px;\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: 1px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 5px;\n --radius-pill: 9px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-shadow) 20%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 1px 1px color-mix(in srgb, var(--color-shadow) 25%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), 0 1px 3px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control-pressed: inset 0 1px 3px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-dialog: 0 3px 12px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-text: 0 1px 0 color-mix(in srgb, white 35%, transparent);\n --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, white 20%, transparent) 0, color-mix(in srgb, white 20%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 3%, transparent) 2px, color-mix(in srgb, black 3%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-page), white 75%) 0, var(--color-page) 280px) 0 0 / 100% 280px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(90deg, color-mix(in srgb, white 22%, transparent) 0, color-mix(in srgb, white 22%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 4%, transparent) 2px, color-mix(in srgb, black 4%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 75%) 0, color-mix(in srgb, var(--color-bar), white 18%) 45%, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), white 42%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 65%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(circle at 12% 130%, color-mix(in srgb, white 32%, transparent) 0, transparent 46%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 30%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 16%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 70%, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 12%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 54%) 0, color-mix(in srgb, var(--color-button), white 24%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, color-mix(in srgb, var(--color-button-secondary), white 20%) 50%, color-mix(in srgb, var(--color-button-secondary), black 6%) 50%, color-mix(in srgb, var(--color-button-secondary), white 35%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }