{ "id": "v1-sk-5555", "long_id": "v1.skeuomorphism.landing.s05.p05.t05.u05", "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": "pure", "viewport": { "width": 1280, "fluid": false }, "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-5555", "preview_url": "https://chrono.skin/s/v1-sk-5555/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\n- One humanist sans-serif for everything (`--font-body`, `--font-heading`, `--font-ui`: Myriad Pro, falling back to Gill Sans, Calibri and Trebuchet MS) and `--font-mono` for code. The references used commercial humanist and rounded faces; this stack is the nearest that needs no licence.\n- Sizes: `--text-base` 15px at `--line-body` 1.45; `--text-small` 13px for meta, badges, table heads and the footer; `--text-ui` 14px semibold for keys, navigation and tabs; `--text-large` 19px for the hero lead and large keys; `--text-h3` 17px, `--text-h2` 22px, `--text-h1` 30px; `--text-display` 42px semibold with tight tracking for the hero headline and the price.\n- `--color-page` is the pinstriped page; `--color-canvas` and `--color-surface` the sheets; `--color-surface-alt` the tint of every second row and of sheet feet; `--color-surface-strong` the top of a page header and the tab strip.\n- `--color-bar` with `--fill-bar` and `--color-bar-text`: the navigation bar, the bar on the phone's screen, the alert, the current page number. `--color-bar-alt` with `--fill-bar-alt` and `--color-bar-alt-text`: the counter plate, table heads, panel title strips, tabs that are not current, group rows on the phone. `--color-inverse` with `--fill-inverse` and `--color-inverse-text`: the footer band only.\n- Text on the page texture and on sheets is `--color-text`; headings `--color-heading`; the app name in the hero and sidebar titles `--color-heading-alt`. Links are `--color-link`, underlined only on hover.\n- `--color-button` is the one primary colour: the keys, the app tiles and the brand tile. `--color-accent` is for badges, `--color-accent-alt` for \"new\" markers. `--color-fill-1` to `--color-fill-4` colour the icon tiles of the feature rows and nothing else; the glyph on them is `--color-inverse-text`. `--color-success`, `--color-warning` and `--color-danger` are for status badges and the destructive key.\n- Surface: smooth convex gradients, bright at the upper edge and darker at the foot (`--fill-button`, `--fill-bar`, `--fill-bar-alt`), with a one-pixel inner highlight and a short drop shadow (`--shadow-control`). Corners: `--radius-control` 5px for keys, fields and tabs, `--radius-panel` 10px for sheets, the bar and the plate, `--radius-page` 12px for icon tiles, `--radius-pill` 13px for badges. Sheets lie on the page with `--shadow-panel`, a hairline ring and a 4px shadow; the phone and the alert cast `--shadow-dialog`.\n- Engraving: light text on a dark or coloured fill takes `--shadow-text`. Dark text on the page texture or on a light gloss takes a light line one pixel below, written in `components.css` as `0 var(--size-hair) 0 var(--color-canvas)`.\n- One-off values built in `components.css` from tokens: the phone (body from `--color-canvas` and `--color-surface-alt` with `--color-border-strong` edges, shoulders of `--radius-page` plus `--space-5`, a status strip mixed from `--color-shadow` and `--color-inverse`); the hard gloss line of the feature icon tiles (`--color-canvas` over the fill colour in the upper half, `--color-shadow` at the foot); the gloss of the danger key and the status badges; the light pool behind the phone (a radial gradient of `--color-canvas`); border colours darkened toward `--color-shadow`; `uppercase` with 1px tracking for sidebar titles; italics for quotes.\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\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 <= 42px`: the hero headline and the price are the largest text.\n- `font-size >= 13px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights; headlines are semibold.\n- `font-families <= 2`: one humanist sans-serif and a monospace.\n- `line-height <= 1.5`: body text is set at 1.45.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `uppercase-text <= 5%`: capitals are for the small sidebar titles only.\n- `letter-spacing <= 1px`: only the small capital titles are tracked.\n- `border-radius <= 36px`: the phone's shoulders are the largest radius; sheets are 10px and keys 5px.\n- `border-width <= 1px`: every edge is a hairline; weight comes from gradients and shadows.\n- `box-shadow-blur <= 8px`: only the phone and the alert cast an 8px shadow; sheets cast 4px.\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: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\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: 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: 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: 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", "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
\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
\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 \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.p05.t05.u05\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-5555\",\n \"short\": \"v1-sk-5555\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f6f4f7;\n --color-surface-strong: #e9e3ee;\n --color-bar: #9a55b8;\n --color-bar-text: #ffffff;\n --color-bar-alt: #d6d2dc;\n --color-bar-alt-text: #40364a;\n --color-inverse: #303038;\n --color-inverse-text: #ffffff;\n --color-text: #4a4a4f;\n --color-text-muted: #8a8791;\n --color-heading: #2b2530;\n --color-heading-alt: #5a2d82;\n --color-link: #7a3aa8;\n --color-link-quiet: #8a8791;\n --color-link-visited: #96709f;\n --color-link-hover: #e03f7f;\n --color-link-active: #b3246a;\n --color-border: #e2dfe6;\n --color-border-strong: #bdb7c6;\n --color-border-muted: #f0eef2;\n --color-accent: #e03f7f;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f0a020;\n --color-fill-1: #8a3aa0;\n --color-fill-2: #2898d8;\n --color-fill-3: #68b030;\n --color-fill-4: #f08a1c;\n --color-button: #e03f7f;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ececf0;\n --color-button-secondary-text: #40364a;\n --color-input: #ffffff;\n --color-input-text: #2b2530;\n --color-input-border: #bdb7c6;\n --color-disabled: #e6e4ea;\n --color-disabled-text: #a9a5b0;\n --color-danger: #c03828;\n --color-danger-surface: #fdf0ee;\n --color-success: #68b030;\n --color-warning: #f0a020;\n --color-notice: #f1eaf6;\n --color-notice-text: #40364a;\n --color-focus: #b78ad8;\n --color-shadow: #1c1024;\n --color-overlay: rgba(28, 16, 36, 0.45);\n}\n\n/* @part type */\n:root {\n --font-body: \"Myriad Pro\", Myriad, \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n --font-heading: \"Myriad Pro\", Myriad, \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n --font-ui: \"Myriad Pro\", Myriad, \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n --font-mono: \"Andale Mono\", Monaco, Consolas, monospace;\n --text-base: 15px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 42px;\n --text-h1: 30px;\n --text-h2: 22px;\n --text-h3: 17px;\n --line-body: 1.45;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\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: 5px;\n --radius-panel: 10px;\n --radius-pill: 13px;\n --radius-page: 12px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 1px 4px color-mix(in srgb, var(--color-shadow) 28%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 38%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 1px 3px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control-pressed: inset 0 2px 4px color-mix(in srgb, var(--color-shadow) 50%, transparent), 0 1px 0 color-mix(in srgb, white 35%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 35%, transparent), 0 3px 8px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, white 34%, transparent) 0, color-mix(in srgb, white 34%, transparent) 2px, transparent 2px, transparent 5px, color-mix(in srgb, black 3%, transparent) 5px, color-mix(in srgb, black 3%, transparent) 6px, transparent 6px, transparent 8px), linear-gradient(to bottom, color-mix(in srgb, white 55%, transparent) 0, transparent 100%) 0 0 / 100% 320px no-repeat, var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 42%) 0, color-mix(in srgb, var(--color-bar), white 14%) 12%, var(--color-bar) 60%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 80%) 0, color-mix(in srgb, var(--color-bar-alt), white 35%) 45%, var(--color-bar-alt) 100%);\n --fill-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h1v1H0zM4 4h1v1H4z' fill='white' fill-opacity='.07'/%3E%3Cpath d='M2 2h1v1H2zM6 6h1v1H6zM4 0h1v1H4zM0 4h1v1H0z' fill='black' fill-opacity='.2'/%3E%3C/svg%3E\"), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 14%) 0, var(--color-inverse) 70%, color-mix(in srgb, var(--color-inverse), black 18%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 34%) 0, var(--color-accent) 70%, color-mix(in srgb, var(--color-accent), black 12%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 50%, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 38%) 0, color-mix(in srgb, var(--color-button), white 8%) 40%, var(--color-button) 75%, color-mix(in srgb, var(--color-button), black 18%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 50%) 0, color-mix(in srgb, var(--color-button), white 20%) 40%, color-mix(in srgb, var(--color-button), white 8%) 75%, color-mix(in srgb, var(--color-button), black 8%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, var(--color-button-secondary) 60%, color-mix(in srgb, var(--color-button-secondary), black 9%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 10%) 0, var(--color-input) 6px);\n --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }