{ "id": "v1-sk-5444-dc", "long_id": "v1.skeuomorphism.landing.s05.p04.t04.u04.dc", "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": "compact", "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-5444-dc", "preview_url": "https://chrono.skin/s/v1-sk-5444-dc/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- Slate metal and black glass, with one blue; the set is dark. `--color-page` #383a44 is the slate page; `--color-canvas` #454853 the sheet; `--color-surface` #4a4d59 rows and cells, `--color-surface-alt` #424550 alternate rows and wells, `--color-surface-strong` #33353e title strips.\n- `--color-bar` #1a1b1f (black glass, near-white text) is the current menu row, the tab bar, the counters and pressed \"current\" states; `--color-bar-alt` #5a5e6b (brushed steel, pale text) the menu rows, the breadcrumb strip, the table head and the shelf plank; `--color-inverse` #16171b (the black stage, white text) the hero, the alert sheet and the footer band.\n- Text is `--color-text` #cdd0d8, meta `--color-text-muted` #9da2af, headings `--color-heading` #f2f3f5, section, sidebar and panel titles and form labels `--color-heading-alt` #dcdfe3.\n- Links are `--color-link` #74b9f2, lighter on hover (#a8d8ff), lilac when visited (#9aa6d8).\n- `--color-button` #2b84dc (blue, white text) is the one primary action colour; the secondary key is steel `--color-button-secondary` #626675 with near-white text. Fields are wells darker than the sheet (`--color-input` #2c2e36).\n- `--color-accent` #ee8a22 (orange) for badges, `--color-accent-alt` #7a56c2 (violet) for \"new\" markers and the tape of a panel; `--color-success` #18a546, `--color-warning` #b87a10, `--color-danger` #f0553f on `--color-danger-surface` #3d2526. Notices are a dark blue tint, `--color-notice` #33475c with #cfe2f7 text.\n- `--color-fill-1` to `--color-fill-4` (#2b84dc blue, #ee8a22 orange, #18a546 green, #747a88 steel) colour the boxes on the shelf only; white glyphs on all four.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Lato where installed, then Helvetica Neue, Helvetica and Arial; Lato stands in for the era's commercial humanist sans. `--font-mono` Menlo.\n- Larger than the era's other sets: `--text-base` 14px at `--line-body` 1.5; `--text-small` 12px for meta, badges, table heads and the footer; `--text-ui` 13px at `--weight-ui` 700 for keys, menu rows and tabs; `--text-large` 17px for the lead and the large key.\n- Headings are light, white on dark: `--weight-heading` and `--weight-display` 300; `--text-h3` 15px (bold), `--text-h2` 20px, `--text-h1` 28px, `--text-display` 36px at `--line-display` 1.2. A bold phrase inside the light headline is the only emphasis. No uppercase from this part.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Woven metal and glass. `--fill-page` is a fine diagonal weave at a 4px pitch with a faint glare over the top 260px. `--fill-bar` is black glass with a hard split at half height. `--fill-bar-alt` is brushed steel and `--fill-inverse` a top-lit black stage, both under 2px horizontal hairlines.\n- Corners: `--radius-control` 6px, `--radius-panel` 6px, `--radius-page` 8px, `--radius-pill` 11px (badges, pagination keys).\n- Keys are chunky: glossy with the same hard split (`--fill-button`), a light inner top edge, and a hard 3px ledge under them with a tight shadow below it (`--shadow-control`); a pressed key sinks onto a 1px ledge (`--shadow-control-pressed`). Sheets and boxes stand on the metal the same way: `--shadow-panel` is a 3px ledge and 0 4px 6px at 45%; `--shadow-dialog` is a dark ring, a 4px ledge and 0 5px 6px. `--shadow-text` is a dark line one pixel above light text. `--fill-input` shades the top 5px of a well. `--transition` is none.\n- Pairings this structure uses: `--color-bar-alt-text` on `--fill-bar-alt` (menu rows, breadcrumb strip, table head); `--color-bar-text` on `--fill-bar` (current menu row, tab bar, counters, the phone's title bar) and on the darkened bar colour of pressed \"current\" states (page, count badge); `--color-inverse-text` on `--fill-inverse` (hero, alert sheet, footer) and on the four `--color-fill-*` boxes; `--color-button-text` on `--fill-button` and `--color-button-secondary-text` on `--fill-button-secondary` (keys, list thumbs, pagination keys, select); `--color-accent-text` on `--fill-accent`, on the success and danger badges and on the danger key; `--color-heading` on the `--color-accent-alt` and `--color-warning` badges; `--color-heading-alt` on `--color-surface-strong` (sidebar title) and on the sheet. On the page texture: `--color-heading`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the spotlight of the hero and the glass highlight of the alert sheet (radial gradients of `--color-inverse-text` at 12 to 34%), the phone body (`--color-shadow` mixed with 12 to 30% `--color-inverse-text`) and its corner (`--radius-page` plus `--space-4`), the spine and sheen of a shelf box, the split line of a counter, the notch under the current tab (a `--space-3` square of `--color-canvas` turned 45 degrees, half of it hidden in the part below), the 3 degree tilt and 55% opacity of the tape, the engraving shadow `0 var(--size-hair) 0` of `--color-canvas` at 50 to 70% under text on the page and on light fills, the inset well shadow of fields and the empty state, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, the 1px tracking and `uppercase` of sidebar, footer and kicker titles, and `dashed` for the panel's perforation, the empty state and the footer stitching.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. 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 <= 48px`: the largest gap between blocks is the 48px above the footer band.\n- `row-gap <= 12px`: list and table rows touch.\n- `font-size <= 36px`: the hero headline is the largest text.\n- `font-size >= 12px`: meta text is the smallest.\n- `font-weight >= 300`: light headlines stop at 300.\n- `font-families <= 2`: one sans-serif 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- `letter-spacing <= 1px`: only small capital titles are tracked.\n- `border-radius <= 24px`: the phone's shoulders are the largest radius; keys and sheets are 6px.\n- `border-width <= 1px`: every edge is a hairline; weight comes from shadows and gradients.\n- `box-shadow-blur <= 6px`: depth comes from hard 3px ledges; the soft shadow under them stays tight.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves; the carousel is drawn at rest.\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: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 13px;\n --space-5: 19px;\n --space-6: 26px;\n --space-7: 38px;\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.p04.t04.u04.dc\",\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-5444-dc\",\n \"short\": \"v1-sk-5444-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #383a44;\n --color-canvas: #454853;\n --color-surface: #4a4d59;\n --color-surface-alt: #424550;\n --color-surface-strong: #33353e;\n --color-bar: #1a1b1f;\n --color-bar-text: #f2f3f5;\n --color-bar-alt: #5a5e6b;\n --color-bar-alt-text: #eceef2;\n --color-inverse: #16171b;\n --color-inverse-text: #ffffff;\n --color-text: #cdd0d8;\n --color-text-muted: #9da2af;\n --color-heading: #f2f3f5;\n --color-heading-alt: #dcdfe3;\n --color-link: #74b9f2;\n --color-link-quiet: #a4a9b5;\n --color-link-visited: #9aa6d8;\n --color-link-hover: #a8d8ff;\n --color-link-active: #ffffff;\n --color-border: #575b68;\n --color-border-strong: #22232a;\n --color-border-muted: #4d505c;\n --color-accent: #ee8a22;\n --color-accent-text: #ffffff;\n --color-accent-alt: #7a56c2;\n --color-fill-1: #2b84dc;\n --color-fill-2: #ee8a22;\n --color-fill-3: #18a546;\n --color-fill-4: #747a88;\n --color-button: #2b84dc;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #626675;\n --color-button-secondary-text: #f2f3f5;\n --color-input: #2c2e36;\n --color-input-text: #f2f3f5;\n --color-input-border: #1a1b1f;\n --color-disabled: #4d505c;\n --color-disabled-text: #868b98;\n --color-danger: #f0553f;\n --color-danger-surface: #3d2526;\n --color-success: #18a546;\n --color-warning: #b87a10;\n --color-notice: #33475c;\n --color-notice-text: #cfe2f7;\n --color-focus: #74b9f2;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 36px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.2;\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: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 6px;\n --radius-panel: 6px;\n --radius-pill: 11px;\n --radius-page: 8px;\n --shadow-panel: 0 3px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent), 0 4px 6px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 3px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 4px 4px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 48%, transparent), 0 3px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 4px 4px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-control-pressed: inset 0 2px 4px color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 4px 0 color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 5px 6px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --fill-page: repeating-linear-gradient(45deg, color-mix(in srgb, black 12%, transparent) 0, color-mix(in srgb, black 12%, transparent) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(-45deg, color-mix(in srgb, white 3%, transparent) 0, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px, transparent 4px), linear-gradient(to bottom, color-mix(in srgb, white 10%, transparent) 0, transparent 100%) 0 0 / 100% 260px no-repeat, var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 26%) 0, color-mix(in srgb, var(--color-bar), white 12%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 20%) 100%);\n --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, white 5%, transparent) 0, color-mix(in srgb, white 5%, transparent) 1px, transparent 1px, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 16%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 16%) 100%);\n --fill-inverse: repeating-linear-gradient(0deg, color-mix(in srgb, white 3%, transparent) 0, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 18%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 30%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 26%) 0, var(--color-accent) 55%, color-mix(in srgb, var(--color-accent), black 14%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 32%) 0, color-mix(in srgb, var(--color-button), white 10%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 44%) 0, color-mix(in srgb, var(--color-button), white 22%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, color-mix(in srgb, var(--color-button), black 10%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 20%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 18%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 30%) 0, var(--color-input) 5px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }