{ "id": "v1-sk-5333-dr", "long_id": "v1.skeuomorphism.landing.s05.p03.t03.u03.dr", "name": "Skeuomorphism landing (one phone app, device on a counter)", "era": { "slug": "skeuomorphism", "code": "sk", "name": "Skeuomorphism", "years": [ 2009, 2013 ], "description": "App-era product sites, 2009 to 2013: pages that imitate materials, with linen and paper textures, bevelled glossy keys, inset wells, stitched edges and engraved text." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1280, "fluid": false }, "density": "roomy", "summary": "The page of a single phone app from the years when web pages imitated physical materials: the app's glossy tile and name, a headline, one large key, and beside them a phone drawn in the page with the app running on its screen. It was the common shape for the site of an app sold through a phone's store between about 2010 and 2013, built as one fixed column on a softly textured page, with a press page, a list of versions and a support form behind it. The richness is in the surfaces: a glossy bar hanging from the top of the window, convex keys, icon tiles with a hard gloss line, engraved type and hairline edges with a bright line beside them.", "url": "https://chrono.skin/s/v1-sk-5333-dr", "preview_url": "https://chrono.skin/s/v1-sk-5333-dr/specimen.html", "files": { "STYLE.md": "# Skeuomorphism landing (one phone app, device on a counter)\n\n## Summary\n\nThe page of a single phone app from the years when web pages imitated physical materials: the app's glossy tile and name, a headline, one large key, and beside them a phone drawn in the page with the app running on its screen. It was the common shape for the site of an app sold through a phone's store between about 2010 and 2013, built as one fixed column on a softly textured page, with a press page, a list of versions and a support form behind it. The richness is in the surfaces: a glossy bar hanging from the top of the window, convex keys, icon tiles with a hard gloss line, engraved type and hairline edges with a bright line beside them.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 920px (`.ds-page__wrap`). Only the page texture and the dark footer band run the full window width.\n- Navigation is one glossy bar `--size-nav` (40px) high and exactly as wide as the column, hanging from the top edge of the window with its lower corners rounded. It is cut into segments by etched lines: the `.ds-brand` first, then one segment per section, the current one pressed in; at the right end a small text link and one small key. It is written once, above the views, and the footer band once below them.\n- Order of the home page: the hero, two columns bottom-aligned on the page texture (the copy at the left: app tile and name, headline, lead, the large key with one link, and under an etched rule a field and a key that send the link; the phone at the right, `--size-phone` 256px wide, cut off at its foot); directly under it, touching the phone's foot, the `.ds-stats` counter plate across the whole column; a `.ds-page__title` on the page texture; the `.ds-grid` sheet of four feature rows, two to a line; then `.ds-page__columns`: a wide column with a title and a sheet holding the `.ds-list`, and a `--size-side` (280px) column with a title and the price `.ds-panel`. Both columns are one height: the rows of the list share whatever the price card adds. Then the footer band.\n- Section headings on the home page (`.ds-page__title`) stand on the page texture above their sheet, `--space-6` above and `--space-3` below. Sheets have no headings of their own.\n- Inner pages keep the navigation bar, the column and the footer band; the hero, the counter plate and the feature sheet are left out. The breadcrumb stands on the page texture (`.ds-page__trail`) under the bar. Below it the whole page is one `.ds-page__sheet`: it opens with `.ds-page-header` (a small app tile, title and one line, keys at the right), then, where a subject has several pages, the `.ds-tabs` strip across the sheet, then `.ds-row` parts. Every row has a label column at the left (`--size-label`, 200px: a heading and a small note, or a `.ds-sidebar` block of links) and its content at the right (`.ds-row__body`: a table, running text, a form, a well). Rows are parted by a hairline; every second or the last row is tinted (`.ds-row--tint`). There is no side column on an inner page: what a sidebar would hold goes in the label column of a row. A full-bleed strip, such as the `.ds-quotes` of the press page, may stand between the page header and the first row.\n- Views. The specimen is a five-screen site, one `.ds-view` showing at a time. `home` is the app's page: hero with the phone, counter plate, feature rows, the latest notes and the price. `versions` is the list of versions: the notes of the newest one as running text, then the table of all versions with its labels and pagination. `press` is the press page: three quotes, the press kit as a table with its links, and the questions asked often. `support` is the Write to us tab: notices, the letter form with its keys, and the alert that the destructive key opens. `questions` is the Your questions tab: the empty well of letters waiting and the list of answered ones. The navigation leads to the first four; `questions` is reached from the tool link and the tabs and keeps Support pressed. Each view needs one `:has()` selector in the navigation rule of `components.css`.\n- Spacing scale: `--space-1` 4px (badge and code padding, between tabs), `--space-2` 8px (cell padding, between keys), `--space-3` 12px (table cells, list rows, under a page title), `--space-4` 16px (control side padding, panel padding, icon gaps), `--space-5` 24px (sheet and row padding, between columns), `--space-6` 32px (above a page title, hero side room), `--space-7` 48px (hero top padding, above the footer band).\n- Control heights: `--size-pill` 22px (small keys, badges), `--size-control` 30px (keys, fields, tabs), `--size-control-large` 44px (the hero key and the footer key). `--size-tile` 84px is the app tile of the hero and `--size-tile-small` 48px that of a page header; `--size-glyph` 52px a feature's icon tile; `--size-screen` 344px the phone's screen; `--size-hair` 1px the offset of every highlight and engraving.\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- Cool metal grey, charcoal and saddle brown. `--color-page` #c8cbd0 is the grey page; `--color-canvas` and `--color-surface` #f0f0f0 the sheet, which is pale grey and not white; `--color-surface-alt` #e8e8e8 wells and alternate rows; `--color-surface-strong` #d8d8e0 toolbar strips. Only form fields are white (`--color-input` #ffffff).\n- `--color-bar` #31333a (charcoal, white text) is the navigation bar, table head, count badges and pressed \"current\" states; `--color-bar-alt` #c8c8d0 with #333333 text is title strips and the segmented control; `--color-inverse` #3a6683 (navy, white text) only the closing band.\n- Text is `--color-text` #333333, meta `--color-text-muted` #5e5e5e, headings `--color-heading` #303038; sidebar and panel titles and form labels are the dark brown `--color-heading-alt` #554230.\n- Links are `--color-link` #1178b5, hover `--color-link-hover` #0a4e9d, visited the grey blue #607890, active magenta #951c83.\n- `--color-button` #88502b (saddle brown, white text) is the one primary action colour; the secondary key is `--color-button-secondary` #e8e8e8 with #333333 text.\n- `--color-accent` #c73dab (magenta) for badges, `--color-accent-alt` #fca904 (amber) for \"new\" markers; `--color-success` #5b9a00, `--color-warning` #fca904, `--color-danger` #8e2126. Notices are quiet: `--color-notice` #d8d8e0 with #303038 text.\n- `--color-fill-1` to `--color-fill-4` (#3a6683 navy, #88502b brown, #5b9a00 green, #31333a charcoal) colour the grid blocks only; white text on all four.\n- Borders are firmer than on a white style: `--color-border` #d8d8e0, `--color-border-strong` #aaaaaa.\n- `--font-body` and `--font-ui` are Verdana (Geneva, DejaVu Sans); `--font-heading` is Georgia, standing in for the era's commercial slab serif; `--font-mono` Courier New.\n- `--text-base` 12px at `--line-body` 1.5; `--text-small` 10px for meta, badges and footer; `--text-large` 14px for the lead.\n- Controls, navigation, tabs and table heads are small bold capitals: `--text-ui` 11px, `--weight-ui` 700, `--ui-transform: uppercase`.\n- Headings are regular-weight serif: `--weight-heading` and `--weight-display` 400; `--text-h3` 14px (bold), `--text-h2` 20px, `--text-h1` 26px, `--text-display` 36px at `--line-display` 1.15. Emphasis inside the headline is the bold cut.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Brushed metal and matte bars. `--fill-page` is brushed metal: horizontal hairlines at a 3px pitch and a 140px glare at the top over `--color-page`. `--fill-bar` is matte: a 2px dark lip at the top, then an almost flat fill.\n- `--fill-bar-alt` (title strips, tabs) and `--fill-inverse` (closing band) carry diagonal 135deg stripes.\n- Corners are nearly square: `--radius-control`, `--radius-panel` and `--radius-pill` 3px, so navigation items and badges are tags, not lozenges; `--radius-page` 6px for blocks and wells.\n- Keys are bevelled, not glossy: `--fill-button` runs only from 12% lighter to 10% darker, and `--shadow-control` adds a light inner top edge, a dark inner bottom edge and a light line below, as if set into the metal. No drop shadow under keys.\n- Panels and the sheet are edged, not floated: `--shadow-panel` is a 1px ring at 14%, a faint 0 1px 2px at 7% and a light line beneath. `--shadow-dialog` is a ring and 0 1px 4px at 40%.\n- `--shadow-text` is a dark line one pixel below light text (0 1px 0 at 30%). `--fill-input` is flat. `--focus-ring` is 1px solid. `--transition` is none.\n- Pairings this structure uses: `--color-button-secondary-text` on `--fill-button-secondary` (navigation pills, pagination keys) and `--color-button-text` on `--fill-button` (keys, the current navigation pill, the app tile of the page header); `--color-bar-text` on `--fill-bar` (the screen's title bar and current source, table head, dialog title bar) and on the darkened bar colour of pressed \"current\" states (tab, page, count badge); `--color-bar-alt-text` on `--fill-bar-alt` (the window bar); `--color-heading-alt` on `--color-surface-strong` (tab strip, source list); `--color-accent-text` on `--fill-accent` (badges, the ribbon) and on the danger key; `--color-inverse-text` on the four `--color-fill-*` boards and on `--fill-inverse`, which here is the footer band. On the page texture: `--color-heading`, `--color-heading-alt`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the folded ends of the ribbon (a diagonal gradient of `--color-accent` darkened 45% toward `--color-shadow`), the spine of a board (a `--space-3` stripe of `--color-shadow` at 26% with a hairline highlight) and its sheen, the bezel of the device (`--fill-bar-alt` with a hairline and `--shadow-dialog`), the white engraving shadow `0 var(--size-hair) 0 var(--color-canvas)` under dark text on the page and on light glossy fills, the inset well shadow of fields and the empty-state well, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, and `dashed` for the rule of the price card.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Paints the textured page. `.ds-page__wrap` is the 920px column of a view; `.ds-page__title` a heading on the page texture above a sheet; `.ds-page__sheet` a sheet (`--color-canvas`, `--radius-panel`, `--shadow-panel`); `.ds-page__columns` the two columns of the home page, `.ds-page__main` and `.ds-page__side`, of one height; `.ds-page__trail` the breadcrumb's place above an inner sheet; `.ds-page__foot` the tinted strip at the foot of a sheet (a link left, a count right).\n- `.ds-view`: one screen of the site, a `
` with an id; only the one named in the address shows, and `.ds-view--home` when none is named.\n- `.ds-row`: one part of an inner sheet: `.ds-row__label` (with `.ds-row__title` and `.ds-row__note`, or a `.ds-sidebar`) and `.ds-row__body`; `.ds-row--tint` for the tinted ones; `.ds-row__foot` a line under the body's main block (pagination or links left, a count right).\n- `.ds-nav`: the hanging bar. `.ds-nav__items` holds `.ds-nav__item` segments (an optional `.ds-nav__glyph` before the word); the current segment is pressed in, by `is-current` or, in the specimen, by one selector per view. `.ds-nav__items--tools` is the group at the right end with a `.ds-nav__tool` text link and one `.ds-button--small`.\n- `.ds-brand`: the first segment of the bar. `.ds-brand__mark` is a 26px tile dressed as the primary key (`--fill-button`, darkened border, `--radius-control`, `--shadow-control`) holding the mark in `--color-button-text`; `.ds-brand__name` the name at 17px, always `--weight-bold`, engraved. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: `.ds-hero__copy` with `.ds-hero__app` (the `.ds-hero__tile` app tile, `.ds-hero__name` and a `.ds-hero__kicker` line), `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one `.ds-button--large` and one link), `.ds-hero__send` (a field and a secondary key under an etched rule) and `.ds-hero__note`; and `.ds-hero__stage` holding `.ds-hero__phone`, whose `.ds-hero__screen` shows `.ds-hero__status`, `.ds-hero__topbar` and `.ds-hero__rows` of `.ds-hero__group` and `.ds-hero__row` (with `.ds-hero__row-meta`). Once, at the top of the home page; the counter plate follows it with no gap.\n- `.ds-page-header`: the head of an inner sheet: `.ds-page-header__tile`, `.ds-page-header__copy` with `.ds-page-header__title` (30px) and one `.ds-page-header__text` line, and `.ds-page-header__actions` with at most two keys of the normal height.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links. `.ds-prose__lead` is a 19px opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for breadcrumbs and meta links. `.ds-links` is a wrapping row of links.\n- `.ds-button`: convex key, 30px high. `.ds-button--secondary` the light key; `.ds-button--danger` the same key in `--color-danger` for a destructive action; `.ds-button--large` the 44px key of the hero and footer; `.ds-button--small` a 22px key. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph. `.ds-buttons` is a row.\n- `.ds-form`: `.ds-form__row` with a `.ds-form__label` column (`--size-field`) and a `.ds-form__field`. `.ds-form__input` and `.ds-form__textarea` are inset wells, `.ds-form__select` a light key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, where `.ds-form__actions-end` pushes the destructive key to the right edge.\n- `.ds-table`: framed table with a light engraved `.ds-table__head`; `.ds-table__row` with `is-first` and `is-alt`; `.ds-table__cell`, `.ds-table__cell--name` for the bold leading column, `is-numeric` for right-aligned figures.\n- `.ds-list`: rows as on a phone, edge to edge in a sheet: `.ds-list__item` (`is-first` on the first) with a round `.ds-list__icon`, `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`), an optional badge and a `.ds-list__chevron`.\n- `.ds-panel`: the price card: `.ds-panel__title` strip, `.ds-panel__body` with `.ds-panel__price`, `.ds-panel__text` and a ruled `.ds-panel__list` of `.ds-panel__line`, and a tinted `.ds-panel__foot` holding the key.\n- `.ds-stat`: one figure, `.ds-stat__value` beside its `.ds-stat__label` on one line. Four of them make the `.ds-stats` row, the counter plate under the hero (`--fill-bar-alt`, etched grooves between the figures, `is-first` on the first).\n- `.ds-grid`: one sheet of four `.ds-grid__cell` feature rows, two to a line, parted by hairlines. Each has a glossy `.ds-grid__icon` tile in `--color-fill-1` (`.ds-grid__cell--2`, `--3`, `--4` for the other fills) with a `.ds-grid__glyph`, and a `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__more`.\n- `.ds-quotes`: a strip of three `.ds-quote` columns (`is-first` on the first), each a `.ds-quote__text` in italics and a `.ds-quote__source`.\n- `.ds-tabs`: a tinted strip across the sheet under the page header; `.ds-tabs__tab` stands on its lower edge and the `is-current` one is the sheet's own paper.\n- `.ds-badge`: glossy lozenge for a count or a word. `.ds-badge--count` is pressed in and grey, `.ds-badge--new` the marker in `--color-accent-alt`. Status labels: `.ds-badge--success`, `.ds-badge--warning` (dark text) and `.ds-badge--danger`. `.ds-badges` is a row.\n- `.ds-sidebar`: a block of links in the label column of a row: `.ds-sidebar__title` (small capitals), `.ds-sidebar__list` of ruled `.ds-sidebar__item` (`is-first` on the first), each a link and a `.ds-sidebar__meta` line.\n- `.ds-notice`: rounded message; `.ds-notice__title` the bold lead-in; `.ds-notice--error` for errors. A link inside a notice takes the notice's own text colour and an underline. `.ds-notices` wraps several.\n- `.ds-pagination`: one joined strip of small keys, `.ds-pagination__link` (`is-first` on the first); `is-current` is pressed in and takes the bar colour, `is-disabled` is flat.\n- `.ds-breadcrumb`: small engraved trail with `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a phone alert: a rounded box in the bar fill with a pale edge, a centred `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with two keys of equal width, the confirming one last. `.ds-dialog__backdrop` is the dimmed area behind it.\n- `.ds-empty`: a well sunk into the sheet with `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: the dark band: `.ds-footer__inner` holds `.ds-footer__copy` (`.ds-footer__title`, `.ds-footer__links` of `.ds-footer__link`, `.ds-footer__note`) and one large secondary key.\n- `.ds-switch`: glossy sliding ON/OFF switch over a checkbox (`.ds-switch__track`, inset, with a raised knob), set as rows of a `.ds-switches` list (`.ds-switches__row`, `.ds-switches__name`). Here: the \"With the letter\" row of the support form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the same row, for a picture being sent.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: on that row's label.\n- `.ds-carousel`: scroll-snap strip of `.ds-carousel__slide` screenshots, each with a glossy window bar, and static `.ds-carousel__dots`; `.ds-shots` with `.ds-shots__title` (`.ds-shots--inset` inside a sheet) frames it as a band. Here: an \"On the screen\" band of the home view.\n- `.ds-avatar`: framed photo with an inner shadow (`.ds-avatar__photo`, `.ds-avatar__glyph`), used in a `.ds-testimonial` (`.ds-testimonial__text`, `.ds-testimonial__who`). Here: a panel under the price.\n\n## Never\n\n- `content-width <= 940px`: everything stays inside the 920px column.\n- `block-gap <= 60px`: the largest gap between blocks is the 48px above the footer band.\n- `row-gap <= 15px`: list and table rows touch.\n- `font-size <= 36px`: the hero headline is the largest text.\n- `font-size >= 10px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: Verdana, a serif for headings and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `uppercase-text <= 15%`: capitals are for controls, navigation and table heads only.\n- `letter-spacing <= 1px`: nothing is tracked beyond the small capital titles.\n- `border-radius <= 6px`: keys, panels and tags are 3px, blocks 6px; nothing is a lozenge.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 4px`: only a window casts a 4px shadow; everything else is an edge.\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 feature is another `.ds-grid__cell` with one of the four fills on its icon tile; new content on the home page is another titled sheet in the column; new content on an inner page is another `.ds-row` with its label at the left, never a side column. A raised thing (a key, a tile, the bar, a title strip) takes a `--fill-*` gradient, a 1px border darkened toward `--color-shadow` and `--shadow-control`; a sunk thing (a field, a well, a current segment) takes a flat fill and an inset shadow. Text on a gloss is engraved by one pixel: dark above on dark fills, light below on light ones. Do not add flat coloured rectangles, wide soft shadows, borders thicker than 1px, a second type family or new colours.\n", "components.css": ":root {\n --size-page: 920px;\n --size-nav: 40px;\n --size-label: 200px;\n --size-side: 280px;\n --size-phone: 256px;\n --size-screen: 344px;\n --size-tile: 84px;\n --size-tile-small: 48px;\n --size-glyph: 52px;\n --size-pill: 22px;\n --size-control: 30px;\n --size-control-large: 44px;\n --size-icon: 16px;\n --size-field: 110px;\n --size-dialog: 280px;\n --size-well: 48px;\n --size-hair: 1px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n}\n\n/* shell: textured page, one fixed column; the navigation hangs from the top of the window */\n.ds-page {\n min-width: var(--size-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 width: var(--size-page);\n margin: 0 auto;\n}\n.ds-page__title {\n margin: var(--space-6) 0 var(--space-3);\n padding: 0 var(--space-1);\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-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--heading-transform);\n}\n.ds-page__sheet {\n overflow: hidden;\n border-radius: var(--radius-panel);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__columns {\n display: flex;\n align-items: stretch;\n gap: var(--space-5);\n margin: var(--space-5) 0 0;\n}\n.ds-page__main {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n}\n.ds-page__main .ds-page__title { margin-top: 0; }\n.ds-page__main .ds-page__sheet {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n}\n.ds-page__main .ds-list {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n}\n.ds-page__main .ds-list__item { flex: 1 1 auto; }\n.ds-page__side {\n display: flex;\n flex: 0 0 var(--size-side);\n flex-direction: column;\n width: var(--size-side);\n}\n.ds-page__side .ds-page__title { margin-top: 0; }\n.ds-page__side .ds-panel { flex: 1 1 auto; }\n.ds-page__trail {\n padding: var(--space-5) var(--space-1) var(--space-3);\n}\n.ds-page__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-text-muted);\n font-size: var(--text-small);\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: a glossy bar the width of the column, hanging from the top edge, cut into segments by etched lines */\n.ds-nav {\n display: flex;\n align-items: stretch;\n width: var(--size-page);\n height: var(--size-nav);\n margin: 0 auto;\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n border-top: 0;\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--fill-bar);\n box-shadow: inset 0 calc(var(--size-hair) * -1) 0 color-mix(in srgb, var(--color-bar-text) 16%, transparent), var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n padding: 0 var(--space-5) 0 var(--space-4);\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n color: var(--color-bar-text);\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: calc(var(--size-pill) + var(--space-1));\n height: calc(var(--size-pill) + var(--space-1));\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, 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: 100%;\n height: 100%;\n}\n.ds-brand__name {\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-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-nav__items {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__items > li { display: flex; }\n.ds-nav__items--tools {\n align-items: center;\n gap: var(--space-4);\n margin-left: auto;\n padding: 0 var(--space-3) 0 0;\n}\n.ds-nav__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: 0 var(--space-5);\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n box-shadow: inset var(--size-hair) 0 0 color-mix(in srgb, var(--color-bar-text) 14%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__glyph {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-nav__item:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-bar-text) 14%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__item[href=\"#home\"],\n.ds-page:has(#press:target) .ds-nav__item[href=\"#press\"],\n.ds-page:has(#versions:target) .ds-nav__item[href=\"#versions\"],\n.ds-page:has(#support:target) .ds-nav__item[href=\"#support\"],\n.ds-page:has(#questions:target) .ds-nav__item[href=\"#support\"] {\n background: color-mix(in srgb, var(--color-shadow) 28%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n.ds-nav__tool {\n color: var(--color-bar-text);\n font-size: var(--text-small);\n opacity: 0.85;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { opacity: 1; text-decoration: var(--link-decoration-hover); }\n\n/* hero: the app's tile, name and pitch at the left; a phone standing on the counter plate at the right */\n.ds-hero {\n display: flex;\n align-items: flex-end;\n gap: var(--space-6);\n padding: var(--space-7) var(--space-6) 0 var(--space-5);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n padding: 0 0 var(--space-7);\n}\n.ds-hero__app {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n}\n.ds-hero__tile {\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) 55%, var(--color-shadow));\n border-radius: calc(var(--radius-page) + var(--space-1));\n background: var(--fill-button);\n box-shadow: var(--shadow-control), var(--shadow-panel);\n color: var(--color-button-text);\n}\n.ds-hero__tile svg {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-hero__kicker {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-hero__name {\n display: block;\n color: var(--color-heading-alt);\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-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--heading-transform);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-body);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__send {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 12%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-hero__send .ds-form__input { flex: 0 1 calc(var(--size-label) + var(--space-5)); }\n.ds-hero__note {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-hero__stage {\n display: flex;\n flex: 0 0 auto;\n align-items: flex-end;\n justify-content: center;\n padding: 0 var(--space-6);\n background: radial-gradient(ellipse 50% 50% at 50% 55%, color-mix(in srgb, var(--color-canvas) 85%, transparent) 0, transparent 100%);\n}\n.ds-hero__phone {\n position: relative;\n width: var(--size-phone);\n padding: var(--space-7) var(--space-3) calc(var(--space-7) + var(--space-3));\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: calc(var(--radius-page) + var(--space-5)) calc(var(--radius-page) + var(--space-5)) 0 0;\n background: linear-gradient(to right, color-mix(in srgb, var(--color-surface-strong) 60%, var(--color-shadow)) 0, var(--color-surface-alt) 3%, var(--color-canvas) 50%, var(--color-surface-alt) 97%, color-mix(in srgb, var(--color-surface-strong) 60%, var(--color-shadow)) 100%);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas), var(--shadow-dialog);\n}\n.ds-hero__phone::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-5) - var(--space-1));\n left: calc(50% - var(--space-5));\n width: var(--space-7);\n height: var(--space-2);\n border-radius: var(--space-1);\n background: color-mix(in srgb, var(--color-shadow) 55%, var(--color-surface-strong));\n box-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-hero__phone::after {\n content: \"\";\n position: absolute;\n bottom: var(--space-3);\n left: calc(50% - var(--space-4));\n width: var(--space-6);\n height: var(--space-6);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-canvas) 100%);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 14%, transparent);\n}\n.ds-hero__screen {\n height: var(--size-screen);\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 80%, var(--color-surface-strong));\n background: var(--color-surface);\n}\n.ds-hero__status {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 var(--space-2);\n background: color-mix(in srgb, var(--color-shadow) 85%, var(--color-inverse));\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-hero__topbar {\n padding: var(--space-2) var(--space-3);\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 box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-hero__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-hero__group {\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-hero__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-hero__row-meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* stats: the counter plate the phone stands on, figures parted by etched grooves */\n.ds-stats {\n position: relative;\n display: flex;\n margin: 0;\n padding: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas), var(--shadow-panel);\n list-style: none;\n}\n.ds-stat {\n display: flex;\n flex: 1 1 0;\n align-items: baseline;\n gap: var(--space-2);\n min-width: 0;\n padding: var(--space-3) var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset var(--size-hair) 0 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-stat.is-first {\n border-left: 0;\n box-shadow: none;\n}\n.ds-stat__value {\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-stat__label {\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n opacity: 0.8;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* grid: feature rows, two to a line on one sheet, each led by a glossy icon tile in a block colour */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n margin: 0;\n padding: 0;\n overflow: hidden;\n border-radius: var(--radius-panel);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n}\n.ds-grid__cell:nth-child(odd) { border-left: 0; }\n.ds-grid__cell:nth-child(-n+2) { border-top: 0; }\n.ds-grid__icon {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-glyph);\n height: var(--size-glyph);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background-color: var(--color-fill-1);\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-canvas) 45%, transparent) 0, color-mix(in srgb, var(--color-canvas) 12%, transparent) 50%, transparent 50%, color-mix(in srgb, var(--color-shadow) 22%, transparent) 100%);\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n}\n.ds-grid__cell--2 .ds-grid__icon {\n border-color: color-mix(in srgb, var(--color-fill-2) 60%, var(--color-shadow));\n background-color: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__icon {\n border-color: color-mix(in srgb, var(--color-fill-3) 60%, var(--color-shadow));\n background-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__icon {\n border-color: color-mix(in srgb, var(--color-fill-4) 60%, var(--color-shadow));\n background-color: var(--color-fill-4);\n}\n.ds-grid__glyph {\n width: calc(var(--size-glyph) - var(--space-5));\n height: calc(var(--size-glyph) - var(--space-5));\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 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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__text { margin: 0 0 var(--space-1); }\n.ds-grid__more {\n color: var(--color-link);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover,\n.ds-grid__more.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* quotes: three columns of kind words on one sheet, parted by hairlines */\n.ds-quotes {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-quote {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n text-align: center;\n}\n.ds-quote.is-first { border-left: 0; }\n.ds-quote__text {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-size: var(--text-base);\n font-style: italic;\n}\n.ds-quote__source {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n font-style: normal;\n}\n\n/* rows: an inner sheet is cut into rows, a label column at the left and the content at the right */\n.ds-row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n padding: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n}\n.ds-row__label {\n flex: 0 0 var(--size-label);\n width: var(--size-label);\n}\n.ds-row__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-row__note {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-row__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-row--tint { background: var(--color-surface-alt); }\n.ds-row__label .ds-badges { margin: var(--space-3) 0 0; }\n.ds-row__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* page header: the head of an inner sheet, a small app tile, title and one line, keys at the right */\n.ds-page-header {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-5);\n background: linear-gradient(to bottom, var(--color-surface-strong) 0, var(--color-canvas) 100%);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-page-header__tile {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-tile-small);\n height: var(--size-tile-small);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 55%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-page-header__tile svg {\n width: calc(var(--size-tile-small) - var(--space-4));\n height: calc(var(--size-tile-small) - var(--space-4));\n}\n.ds-page-header__copy {\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-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\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-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n.ds-prose a:hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) - var(--size-hair));\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-large);\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 transition: var(--transition);\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--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: convex keys with a bright upper edge, text engraved */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\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) 60%, 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-ui);\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 cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: linear-gradient(var(--color-button), 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--secondary {\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-border-strong) 70%, var(--color-shadow));\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: linear-gradient(var(--color-button-secondary), var(--color-button-secondary)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 70%, var(--color-canvas)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 84%, var(--color-shadow)) 100%);\n color: var(--color-accent-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) 60%, var(--color-canvas)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-canvas)) 60%, var(--color-danger) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n border-radius: calc(var(--radius-control) + var(--space-1));\n font-size: var(--text-large);\n}\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n.ds-button__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* form: label column, inset wells */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-field);\n padding-top: var(--space-1);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\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-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-top-color: color-mix(in srgb, var(--color-input-border) 70%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 12%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n color: var(--color-input-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-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select {\n width: auto;\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-form__textarea {\n height: calc(var(--size-control) * 3);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder { color: var(--color-disabled-text); opacity: 1; }\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}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\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-1) 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-1) 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-2);\n padding-top: var(--space-1);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding-left: calc(var(--size-field) + var(--space-3));\n}\n.ds-form__actions-end { margin-left: auto; }\n\n/* table: hairline rows straight on the sheet, a light engraved head */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-control);\n overflow: hidden;\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-align: left;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: top;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__cell--name { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n\n/* list: phone-style rows, a round glyph, title, meta and a chevron */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__icon {\n flex: 0 0 auto;\n width: var(--size-control);\n height: var(--size-control);\n padding: calc(var(--space-2) - var(--size-hair));\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-button-secondary-text);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover { color: var(--color-link-hover); }\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__chevron {\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n color: var(--color-border-strong);\n}\n\n/* badge: a glossy lozenge */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-badge {\n display: inline-block;\n min-width: var(--size-pill);\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-accent-text) 35%, transparent), 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 35%, transparent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-badge--count {\n background: color-mix(in srgb, var(--color-bar-alt) 80%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n}\n.ds-badge--new {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-canvas)) 0, var(--color-accent-alt) 100%);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 72%, var(--color-canvas)) 0, var(--color-success) 70%, color-mix(in srgb, var(--color-success) 88%, var(--color-shadow)) 100%);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 72%, var(--color-canvas)) 0, var(--color-warning) 70%, color-mix(in srgb, var(--color-warning) 88%, var(--color-shadow)) 100%);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 72%, var(--color-canvas)) 0, var(--color-danger) 70%, color-mix(in srgb, var(--color-danger) 88%, var(--color-shadow)) 100%);\n}\n\n/* panel: the price card, a title strip, a body and a foot that holds the key */\n.ds-panel {\n display: flex;\n flex-direction: column;\n margin: 0;\n overflow: hidden;\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\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-body);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--ui-transform);\n}\n.ds-panel__body {\n flex: 1 1 auto;\n padding: var(--space-4);\n}\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__price {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__line {\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n}\n.ds-panel__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\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);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* tabs: a strip across the sheet under the page header, the current tab cut out of it */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2) var(--space-5) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n box-shadow: inset 0 calc(var(--size-hair) * -1) 0 var(--color-border-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n height: var(--size-control);\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\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-ui);\n line-height: var(--size-control);\n text-decoration: none;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-link-hover); }\n.ds-tabs__tab.is-current {\n position: relative;\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-tabs + .ds-row { border-top: 0; }\n\n/* sidebar: a block of links in the label column of a row */\n.ds-sidebar { margin: 0; }\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n letter-spacing: var(--size-hair);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item.is-first { border-top: 0; padding-top: 0; }\n.ds-sidebar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notices { margin: 0; }\n.ds-notice {\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 78%, var(--color-notice-text));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n color: var(--color-notice-text);\n}\n.ds-notices > .ds-notice:last-child { margin-bottom: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice .ds-link {\n color: inherit;\n text-decoration: underline;\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger-surface) 60%, var(--color-danger));\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: one joined strip of small keys */\n.ds-pagination {\n display: inline-flex;\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n list-style: none;\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--size-pill) + var(--space-1));\n height: calc(var(--size-pill) + var(--space-1));\n padding: 0 var(--space-2);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-pill) + var(--space-1));\n text-align: center;\n text-decoration: none;\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-pagination__link.is-first { border-left: 0; }\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { color: var(--color-link-hover); }\n.ds-pagination__link.is-current {\n background: color-mix(in srgb, var(--color-bar) 88%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-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 text-shadow: none;\n}\n\n/* breadcrumb: an engraved trail on the page texture */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-heading); font-weight: var(--weight-bold); }\n\n/* dialog: a phone alert, centred text over two keys of equal width */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5);\n border-radius: var(--radius-control);\n background: var(--color-overlay);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-bar-text) 55%, var(--color-bar));\n border-radius: var(--radius-panel);\n background: var(--fill-bar);\n box-shadow: var(--shadow-dialog);\n color: var(--color-bar-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-dialog__body { padding: 0 var(--space-4) var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n gap: var(--space-2);\n padding: 0 var(--space-3) var(--space-3);\n}\n.ds-dialog__actions .ds-button { flex: 1 1 0; }\n\n/* empty state: a well sunk into the sheet */\n.ds-empty {\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top-color: var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 12%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-well);\n height: var(--size-well);\n margin: 0 0 var(--space-1);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* footer: a dark band across the window, the key once more, quiet links */\n.ds-footer {\n margin: var(--space-7) 0 0;\n padding: var(--space-5) 0 var(--space-6);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n background: var(--fill-inverse);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-footer__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n width: var(--size-page);\n margin: 0 auto;\n}\n.ds-footer__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-1);\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}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0 0 var(--space-1);\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__note {\n margin: 0;\n color: color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n}\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-carousel { margin: 0; }\n.ds-carousel__slides { display: flex; gap: var(--space-3); margin: 0; padding: var(--space-1) var(--space-1) var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }\n.ds-carousel__slide { flex: none; width: calc(var(--size-control) * 7); min-height: calc(var(--size-control) * 4); padding: 0 var(--space-3) var(--space-3); overflow: hidden; scroll-snap-align: start; background: var(--fill-panel); color: var(--color-text); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--line-body); text-align: left; }\n.ds-carousel__slide::before { content: \"\"; display: block; height: var(--space-4); margin: 0 calc(var(--space-3) * -1) var(--space-3); background: var(--fill-bar); border-bottom: var(--border-width) var(--border-style) var(--color-border-strong); box-shadow: var(--shadow-control); }\n.ds-carousel__slide strong { display: block; margin-bottom: var(--space-1); font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-heading); }\n.ds-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }\n.ds-carousel__dot { width: var(--space-3); height: var(--space-3); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-carousel__dot.is-current { background: var(--fill-button); border-color: var(--color-button); box-shadow: var(--shadow-control); }\n.ds-shots { margin: var(--space-4) 0; }\n.ds-shots--inset { margin: 0; padding: var(--space-4) var(--space-5); border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-shots__title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-heading); line-height: var(--line-heading); color: var(--color-heading); }\n\n.ds-avatar { display: block; flex: none; width: calc(var(--size-control) + var(--space-4)); height: calc(var(--size-control) + var(--space-4)); padding: var(--space-1); background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-panel); }\n.ds-avatar__photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--fill-bar); color: var(--color-bar-text); }\n.ds-avatar__photo::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: var(--shadow-control-pressed); }\n.ds-avatar__glyph { display: block; width: 100%; height: 100%; fill: currentColor; }\n.ds-testimonial { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); padding: 0; border: 0; background: none; }\n.ds-testimonial__text { margin: 0; min-width: 0; font-family: var(--font-body); font-size: var(--text-small); font-style: italic; line-height: var(--line-body); color: var(--color-text); }\n.ds-testimonial__who { display: block; margin-top: var(--space-1); font-style: normal; color: var(--color-text-muted); }\n\n/* a label with a question key keeps the key on the label's line */\n.ds-form__label:has(> .ds-tooltip) {\n white-space: nowrap;\n}\n.ds-form__label > .ds-tooltip {\n white-space: normal;\n}\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism phone app page specimen\n\n\n\n\n\n\n
\n \n \n chronoskin\n \n \n \n
\n\n
\n
\n\n
\n
\n
\n \n
\n chronoskin\n A field notebook for birds. Version 2.1 for the phone.\n
\n
\n

Every bird you meet, written down before it flies.

\n

Tap a name, tap a number, and the sighting is in the book with the place, the hour and the weather.

\n
\n Get the app for 1.99\n \n \n Read what the papers said\n
\n
\n \n \n
\n

One letter with the link and nothing after it.

\n
\n
\n
\n
\n
Carrier7:4282%
\n
This morning
\n
    \n
  • Mill pond, light rain
    • \n
  • WrenIn the reeds, singing2
    • \n
  • GoldfinchOn the teasels5
    • \n
  • KingfisherFirst of the yearNew
    • \n
  • Lane to the church
    • \n
  • DunnockUnder the hedge1
    • \n
  • Song thrushOn the wall1
    • \n
\n
\n
\n
\n
\n\n
    \n
  • 612birds in the book
    • \n
  • 4.5stars from 1,280 readers
    • \n
  • 31countries
    • \n
  • 9 MBno signal needed
    • \n
\n\n

What it does in the field

\n
    \n
  • \n \n
    \n

    Two taps to a sighting

    \n

    The birds you see most rise to the top of the list, so a wren is never more than a thumb away.

    \n How the list learns\n
    \n
    • \n
  • \n \n
    \n

    The place fills itself in

    \n

    Pond, lane or headland, with the hour and the weather. It works with no signal at all.

    \n What it keeps, and where\n
    \n
    • \n
  • \n \n
    \n

    A year at a glance

    \n

    First swallow, last fieldfare, and how this spring compares with the one before.

    \n New in version 2.1\n
    \n
    • \n
  • \n \n
    \n

    Your book stays yours

    \n

    Send the whole notebook to yourself as one plain file whenever you like.

    \n Moving to a new phone\n
    \n
    • \n
\n\n

On the screen

\n
\n
  • The shelfEvery item on one page.
  • The searchFind it by a word.
  • The summaryTotals at a glance.
  • The exportHand a copy on.
\n
\n
\n
\n
\n

Lately

\n
\n \n
\n Every version since the first\n 4 of 23 notes\n
\n
\n
\n
\n

The price

\n
\n

chronoskin for the phone

\n
\n

1.99

\n

Once. Every bird list and every update after it is included.

\n
    \n
  • 612 birds of 31 countries
    • \n
  • Works with no signal
    • \n
  • Your book, as one plain file
    • \n
\n
\n
\n Get the app\n 9 MB\n
\n
\n
\n

From a reader

\n
\n

It does the quiet work of keeping things in order, and I stopped looking for a better way.Maya, 212 birds so far

\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. ›
    3. \n
  3. What is new
    4. \n
\n
\n
\n
\n \n
\n

What is new

\n

Version 2.1 came out on 12 May. Updates are free for everyone who has the app.

\n
\n
\n Report a fault\n Get version 2.1\n
\n
\n
\n
\n

Version 2.1

\n

12 May, 9 MB

\n
\n
\n
\n

The year, counted for you

\n

Open the new Year page and the book has already done the sums.

\n

Every sighting you have written down now feeds a list for the year: how many kinds, the first date and the last. Nothing needs setting up. The questions page says what is counted and what is left out.

\n

Also in this version

\n
    \n
  • Forty birds of the north coast, with their winter names
    • \n
  • A larger count key for cold fingers
    • \n
  • The weather line now notes wind as well as rain
    • \n
\n

For the careful

\n

The book you send yourself is one plain file named sightings.csv, a line to a bird, readable by any table program.

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

Every version

\n

Newest first. A version marked Fault has a known problem that the next one mends.

\n
\n 23\n Current\n In review\n Fault\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
VersionOut onWhat changedStateSize, MB
2.2JuneSharing a walk with a friendIn review9.4
2.112 MayYear lists, wind in the weather lineCurrent9.0
2.0.221 AprilForty birds of the north coast8.7
2.0.12 AprilCounts above 99 were cut shortFault8.1
2.018 MarchThe place and the weather fill themselves in8.1
\n
\n \n 1 to 5 of 23 versions\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. ›
    3. \n
  3. Press and questions
    4. \n
\n
\n
\n
\n \n
\n

Press and questions

\n

Kind words, the press kit, and the things people ask before they buy.

\n
\n
\n Write to us\n
\n
\n
    \n

  • A notebook that keeps up with a warbler. We have not opened the paper one since.

    Harbour Gazette
    • \n

  • Two taps, and the wren is in the book. Nothing on the phone is quicker.

    Pocket Tools Monthly
    • \n

  • It worked on the headland with no signal and cold hands. That is the whole review.

    The Field Desk
    • \n
\n
\n
\n
\n

On this page

\n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
In the press kitForSize, MB
The app tile, largePrint and screen1.2
Six pictures of the screenReviews3.8
One page of factsEditors in a hurry0.1
Everything, in one folderEveryone else5.1
\n
\n

\n Fetch the folder\n Version notes\n The app page\n Ask for a review copy\n Your questions\n

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

Asked often

\n

Not here? Write to us and it soon will be.

\n
\n
\n
\n

Does it work with no signal?

\n

Yes. The bird lists live on the phone, and the place is filled in when a signal comes back.

\n

Which birds does it know?

\n

612 of them, across 31 countries. Each version adds a region; the north coast came in 2.0.2.

\n

Can I get my sightings out again?

\n

Whenever you like, as one plain file. The version notes describe it.

\n

Do I pay again for updates?

\n

No. You pay 1.99 once.

\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. ›
    3. \n
  3. Support
    4. \n
  4. ›
    5. \n
  5. Write to us
    6. \n
\n
\n
\n
\n \n
\n

Support

\n

Two people answer the post, usually within a working day.

\n
\n
\n Read the answers first\n
\n
\n \n
\n
\n

Write to us

\n

Say which phone and which version, and what you saw last before it went wrong.

\n
\n
\n
\n

Version 2.0.1 cuts counts above 99 short. Version 2.1 mends it and puts the numbers back.

\n

Not sent. Check the address below and try again.

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

Before you write

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

This address is missing its ending.

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

A line or two is enough to start.

\n
\n
\n
\n \n \n
\n
\n With the letterThe log holds no sightings, only what the app did.\n
\n
  • Attach the app's log
  • Copy the answer to my phone
\n 62%

heron.jpg: 62% sent

\n
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n
\n
\n
\n

Erase my letters

\n

The key above asks once before it does anything.

\n
\n
\n
\n
\n

Erase both letters?

\n
\n

Your two questions and our answers are removed from the help desk for good.

\n
\n
\n Keep them\n Erase\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. ›
    3. \n
  3. Support
    4. \n
  4. ›
    5. \n
  5. Your questions
    6. \n
\n
\n
\n
\n \n
\n

Support

\n

Two people answer the post, usually within a working day.

\n
\n
\n Ask a question\n
\n
\n \n
\n
\n

Waiting

\n

Letters we have not answered yet.

\n
\n
\n
\n \n

Nothing is waiting

\n

Every letter you sent has an answer. A new one is read within a working day.

\n Write to us\n
\n
\n
\n
\n
\n

Answered

\n

Kept for a year, or until you erase them.

\n
\n
\n
\n \n
\n Erase my letters\n 2 letters\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.landing.s05.p03.t03.u03.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-5333-dr\",\n \"short\": \"v1-sk-5333-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #c8cbd0;\n --color-canvas: #f0f0f0;\n --color-surface: #f0f0f0;\n --color-surface-alt: #e8e8e8;\n --color-surface-strong: #d8d8e0;\n --color-bar: #31333a;\n --color-bar-text: #ffffff;\n --color-bar-alt: #c8c8d0;\n --color-bar-alt-text: #333333;\n --color-inverse: #3a6683;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #5e5e5e;\n --color-heading: #303038;\n --color-heading-alt: #554230;\n --color-link: #1178b5;\n --color-link-quiet: #575758;\n --color-link-visited: #607890;\n --color-link-hover: #0a4e9d;\n --color-link-active: #951c83;\n --color-border: #d8d8e0;\n --color-border-strong: #aaaaaa;\n --color-border-muted: #e8e8e8;\n --color-accent: #c73dab;\n --color-accent-text: #ffffff;\n --color-accent-alt: #fca904;\n --color-fill-1: #3a6683;\n --color-fill-2: #88502b;\n --color-fill-3: #5b9a00;\n --color-fill-4: #31333a;\n --color-button: #88502b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #e8e8e8;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #aaaaaa;\n --color-disabled: #d8d8e0;\n --color-disabled-text: #999999;\n --color-danger: #8e2126;\n --color-danger-surface: #f1f1f1;\n --color-success: #5b9a00;\n --color-warning: #fca904;\n --color-notice: #d8d8e0;\n --color-notice-text: #303038;\n --color-focus: #40a8e0;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, \"DejaVu Sans\", Arial, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Geneva, \"DejaVu Sans\", Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 36px;\n --text-h1: 26px;\n --text-h2: 20px;\n --text-h3: 14px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: uppercase;\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: 3px;\n --radius-pill: 3px;\n --radius-page: 6px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 7%, transparent), 0 2px 0 color-mix(in srgb, white 45%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 0 color-mix(in srgb, white 55%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 0 color-mix(in srgb, white 55%, transparent);\n --shadow-control-pressed: inset 0 1px 2px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 20%, transparent), 0 1px 4px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-text: 0 1px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n --fill-page: repeating-linear-gradient(0deg, color-mix(in srgb, white 16%, transparent) 0, color-mix(in srgb, white 16%, transparent) 1px, transparent 1px, transparent 2px, color-mix(in srgb, black 2%, transparent) 2px, color-mix(in srgb, black 2%, transparent) 3px), linear-gradient(to bottom, color-mix(in srgb, white 70%, transparent) 0, transparent 100%) 0 0 / 100% 140px no-repeat, var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), black 28%) 0, color-mix(in srgb, var(--color-bar), black 28%) 2px, color-mix(in srgb, var(--color-bar), black 5%) 2px, color-mix(in srgb, var(--color-bar), white 5%) 100%);\n --fill-bar-alt: repeating-linear-gradient(135deg, color-mix(in srgb, white 22%, transparent) 0, color-mix(in srgb, white 22%, transparent) 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 40%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: repeating-linear-gradient(135deg, color-mix(in srgb, white 5%, transparent) 0, color-mix(in srgb, white 5%, transparent) 10px, transparent 10px, transparent 20px), var(--color-inverse);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 10%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 45%) 0, var(--color-surface) 36px);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 12%) 0, color-mix(in srgb, var(--color-button), black 10%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 22%) 0, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%) 0, var(--color-button-secondary) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }