{ "id": "v1-sk-4333", "long_id": "v1.skeuomorphism.landing.s04.p03.t03.u03", "name": "Skeuomorphism landing (carousel, side rail and shelf)", "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 }, "summary": "A small studio's site from the years when web pages imitated physical materials: a wide carousel slide with a phone standing in it, a menu of raised rows running down the left side, and the products standing as boxes on a shelf. It was a common shape for app makers and design studios between about 2009 and 2013, built as a fixed centred frame on a textured page. Text is small, and the richness is in the surfaces: glossy keys, a lit stage, counters split like flip clocks, alert sheets with a glass highlight, engraved type.", "url": "https://chrono.skin/s/v1-sk-4333", "preview_url": "https://chrono.skin/s/v1-sk-4333/specimen.html", "files": { "STYLE.md": "# Skeuomorphism landing (carousel, side rail and shelf)\n\n## Summary\n\nA small studio's site from the years when web pages imitated physical materials: a wide carousel slide with a phone standing in it, a menu of raised rows running down the left side, and the products standing as boxes on a shelf. It was a common shape for app makers and design studios between about 2009 and 2013, built as a fixed centred frame on a textured page. Text is small, and the richness is in the surfaces: glossy keys, a lit stage, counters split like flip clocks, alert sheets with a glass highlight, engraved type.\n\n## Layout\n\n- Fixed centred frame: `--size-page` is 980px (`.ds-page__wrap`). Only the page texture and the footer band run the full window width.\n- There is no navigation bar. The page opens with `.ds-page__head`, a plain row on the page texture: the `.ds-brand` at the left, three small tool links at the right. Navigation is `.ds-nav`, a stack of four raised rows `--size-row` (36px) high at the top of the left rail. It is written once, after the head row and outside the views, and laid over the head of the rail (`position: absolute` in `.ds-page__wrap`); every `.ds-page__rail` keeps that room free with a top padding of four rows and two borders, so a fifth row means changing that padding too.\n- Order of the home page: head row, the `.ds-hero` carousel slide across the whole 980px (a fixed `--size-hero`, 340px, as a carousel slide is; the menu drops below it by that height plus `--space-5`, so keep the slide's copy to a two-line headline and a two-line lead), then `.ds-page__frame`, two columns `--size-gutter` (30px) apart: `.ds-page__rail` (`--size-rail`, 210px) on the left and `.ds-page__main` (740px) on the right. The rail holds the menu, then boxed `.ds-sidebar` blocks and the taped `.ds-panel`, each `--space-5` below the last. The main column holds `.ds-page__title` headings on the page texture, the `.ds-grid` shelf, and a `.ds-page__sheet` cut into `.ds-section` parts: running text beside the `.ds-list`, then a tinted closing strip (`.ds-section__row`).\n- Inside a sheet, two columns are made with `.ds-section__split` and `.ds-section__half`; `.ds-section__half--narrow` is a fixed `--size-dialog` (290px) column. Sections are parted by a hairline, never by a gap; `.ds-section--tint` gives a part the panel fill.\n- Inner pages keep the head row and the frame, which now starts straight under the head row: the same rail with the menu (the row of the current view lit), then `.ds-sidebar` blocks for the current subject and at most one `.ds-panel`, enough of them that the rail ends near the foot of the sheet. The hero, the shelf and the page titles are left out. The main column is one sheet that opens with `.ds-page__bar`, a light strip holding the breadcrumb at the left and a short status at the right; then `.ds-page-header` (title and one line at the left, keys at the right); then, where a subject has several pages, the `.ds-tabs` bar across the sheet; then sections. A section directly under the page header keeps its top hairline; one under the tab bar is `is-first`. A table has its pagination or its legend in a `.ds-section__foot` (count at the right); a form sets two fields to a row with labels above, notices above the form; an alert sheet is shown on its dimmed backdrop across a tinted section below the form that opens it.\n- Views: the specimen is one site with six views, one showing at a time (`.ds-view`, the first also `.ds-view--home`), reached by plain `#name` links. `workshop` is the home page: carousel, shelf, the workshop sheet with the latest list. `apps` is the catalogue: a table of everything on the shelf with the legend of labels, and the basket, shown empty. `almanac` is one app's page, its Sales tab: counters and the sales table with pagination. `settings` is the Settings tab of the same app: notices, the listing form with its keys, and the alert sheet that the destructive key opens. `journal` is one journal entry as running text, with earlier entries as a list. `write` is the contact page: answered questions as links, then the letter form. The menu lights the row of the view on show; `almanac` and `settings` light \"Our apps\".\n- The footer is a full-width band (`.ds-footer`): the studio name and a note in a rail-wide column, then three columns of links.\n- Spacing scale: `--space-1` 4px (badge gaps, between pagination keys), `--space-2` 8px (row padding, between keys), `--space-3` 12px (cell padding, list gaps), `--space-4` 16px (control side padding, between counters and form rows), `--space-5` 24px (section padding, between rail blocks, below the hero), `--space-6` 32px (hero top padding, above a page title, footer padding), `--space-7` 48px (hero side room for the knobs, above the footer).\n- Control heights: `--size-pill` 22px (small keys; pagination keys are 4px more), `--size-control` 30px (keys, fields), `--size-control-large` 42px (the hero key), `--size-tabs` 38px. `--size-box` 116px is a box on the shelf and `--size-plank` 14px the shelf; `--size-phone` 196px and `--size-screen` 244px the phone; `--size-hair` 1px the offset of every highlight and engraving.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Cool metal grey, charcoal and saddle brown. `--color-page` #c8cbd0 is the grey page; `--color-canvas` and `--color-surface` #f0f0f0 the sheet, which is pale grey and not white; `--color-surface-alt` #e8e8e8 wells and alternate rows; `--color-surface-strong` #d8d8e0 toolbar strips. Only form fields are white (`--color-input` #ffffff).\n- `--color-bar` #31333a (charcoal, white text) is the navigation bar, table head, count badges and pressed \"current\" states; `--color-bar-alt` #c8c8d0 with #333333 text is title strips and the segmented control; `--color-inverse` #3a6683 (navy, white text) only the closing band.\n- Text is `--color-text` #333333, meta `--color-text-muted` #5e5e5e, headings `--color-heading` #303038; sidebar and panel titles and form labels are the dark brown `--color-heading-alt` #554230.\n- Links are `--color-link` #1178b5, hover `--color-link-hover` #0a4e9d, visited the grey blue #607890, active magenta #951c83.\n- `--color-button` #88502b (saddle brown, white text) is the one primary action colour; the secondary key is `--color-button-secondary` #e8e8e8 with #333333 text.\n- `--color-accent` #c73dab (magenta) for badges, `--color-accent-alt` #fca904 (amber) for \"new\" markers; `--color-success` #5b9a00, `--color-warning` #fca904, `--color-danger` #8e2126. Notices are quiet: `--color-notice` #d8d8e0 with #303038 text.\n- `--color-fill-1` to `--color-fill-4` (#3a6683 navy, #88502b brown, #5b9a00 green, #31333a charcoal) colour the grid blocks only; white text on all four.\n- Borders are firmer than on a white style: `--color-border` #d8d8e0, `--color-border-strong` #aaaaaa.\n- `--font-body` and `--font-ui` are Verdana (Geneva, DejaVu Sans); `--font-heading` is Georgia, standing in for the era's commercial slab serif; `--font-mono` Courier New.\n- `--text-base` 12px at `--line-body` 1.5; `--text-small` 10px for meta, badges and footer; `--text-large` 14px for the lead.\n- Controls, navigation, tabs and table heads are small bold capitals: `--text-ui` 11px, `--weight-ui` 700, `--ui-transform: uppercase`.\n- Headings are regular-weight serif: `--weight-heading` and `--weight-display` 400; `--text-h3` 14px (bold), `--text-h2` 20px, `--text-h1` 26px, `--text-display` 36px at `--line-display` 1.15. Emphasis inside the headline is the bold cut.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Brushed metal and matte bars. `--fill-page` is brushed metal: horizontal hairlines at a 3px pitch and a 140px glare at the top over `--color-page`. `--fill-bar` is matte: a 2px dark lip at the top, then an almost flat fill.\n- `--fill-bar-alt` (title strips, tabs) and `--fill-inverse` (closing band) carry diagonal 135deg stripes.\n- Corners are nearly square: `--radius-control`, `--radius-panel` and `--radius-pill` 3px, so navigation items and badges are tags, not lozenges; `--radius-page` 6px for blocks and wells.\n- Keys are bevelled, not glossy: `--fill-button` runs only from 12% lighter to 10% darker, and `--shadow-control` adds a light inner top edge, a dark inner bottom edge and a light line below, as if set into the metal. No drop shadow under keys.\n- Panels and the sheet are edged, not floated: `--shadow-panel` is a 1px ring at 14%, a faint 0 1px 2px at 7% and a light line beneath. `--shadow-dialog` is a ring and 0 1px 4px at 40%.\n- `--shadow-text` is a dark line one pixel below light text (0 1px 0 at 30%). `--fill-input` is flat. `--focus-ring` is 1px solid. `--transition` is none.\n- Pairings this structure uses: `--color-button-secondary-text` on `--fill-button-secondary` (navigation pills, pagination keys) and `--color-button-text` on `--fill-button` (keys, the current navigation pill, the app tile of the page header); `--color-bar-text` on `--fill-bar` (the screen's title bar and current source, table head, dialog title bar) and on the darkened bar colour of pressed \"current\" states (tab, page, count badge); `--color-bar-alt-text` on `--fill-bar-alt` (the window bar); `--color-heading-alt` on `--color-surface-strong` (tab strip, source list); `--color-accent-text` on `--fill-accent` (badges, the ribbon) and on the danger key; `--color-inverse-text` on the four `--color-fill-*` boards and on `--fill-inverse`, which here is the footer band. On the page texture: `--color-heading`, `--color-heading-alt`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the folded ends of the ribbon (a diagonal gradient of `--color-accent` darkened 45% toward `--color-shadow`), the spine of a board (a `--space-3` stripe of `--color-shadow` at 26% with a hairline highlight) and its sheen, the bezel of the device (`--fill-bar-alt` with a hairline and `--shadow-dialog`), the white engraving shadow `0 var(--size-hair) 0 var(--color-canvas)` under dark text on the page and on light glossy fills, the inset well shadow of fields and the empty-state well, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, and `dashed` for the rule of the price card.\n\n## Components\n\n- `.ds-page`: on ``; paints the page texture. `.ds-page__wrap` is the 980px frame. `.ds-page__head` is the top row with the `.ds-brand` and `.ds-page__tools` (a list of small links). `.ds-view` is one screen of the site (`.ds-view--home` the one shown when the address names none); it is always a plain block and the frame inside it does the layout. `.ds-page__frame` holds `.ds-page__rail` and `.ds-page__main`, once in every view. `.ds-page__title` is a heading on the page texture with an etched rule running to the right edge (`is-first` drops its top margin). `.ds-page__sheet` is the framed sheet; `.ds-page__bar` the light strip at the head of an inner sheet; `.ds-page__count` a small muted count.\n- `.ds-brand`: the site's mark and name at the left of the head row, on the page texture. `.ds-brand__mark` is a 30px tile dressed as the primary key (`--fill-button`, a border darkened toward `--color-shadow`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG in `--color-button-text`; `.ds-brand__name` is the name in the heading font at `--text-h2` in `--color-heading`. The name is always set in `--weight-bold`, whatever the set's heading weight, so that it holds its own beside the tile; it keeps the heading tracking and transform. The name and mark are placeholders for the installing project's own name and logo.\n- `.ds-section`: one part of a sheet (`is-first` on the first, `.ds-section--tint` for the panel fill), with `.ds-section__title` (a small heading), `.ds-section__split` and `.ds-section__half` (`--narrow` for the fixed column), `.ds-section__group` for stacked groups inside a half (`is-last` on the last), `.ds-section__foot` for a row under the main block, and `.ds-section__row` for a part that is one line of `.ds-section__text` with a key at the right.\n- `.ds-nav`: the menu in the rail. `.ds-nav__items` is the framed stack; each `.ds-nav__item` (`is-first` on the first) holds a `.ds-nav__icon`, the word and a `.ds-nav__chev` at the right. The row whose `href` names the view on show is lit with the bar fill by one rule per view in `components.css` (`is-current` does the same by hand); `is-hover` presses it. Four rows; add a rule for every new view, and widen the rail's top padding for every new row.\n- `.ds-hero`: one carousel slide, used once under the head row. `.ds-hero__copy` holds `.ds-hero__kicker` (small tracked capitals), `.ds-hero__title` (with `.ds-hero__strong`), `.ds-hero__lead` and `.ds-hero__actions` (one `.ds-button--large` and a `.ds-hero__note`). `.ds-hero__phone` stands on the lower edge at the right: `.ds-hero__speaker`, `.ds-hero__screen` with `.ds-hero__screen-bar`, `.ds-hero__screen-rows`, `.ds-hero__screen-row` (`is-alt`, `is-done`) and `.ds-hero__screen-dot`. `.ds-hero__arrow` (`--prev`, `--next`, `is-hover`) are round knobs with a `.ds-hero__chev`; `.ds-hero__dots` holds `.ds-hero__dot` (`is-current`).\n- `.ds-page-header`: the head of an inner sheet, under the breadcrumb strip. `.ds-page-header__copy` holds `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__actions` one primary key and at most one secondary key at the normal height.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links. `.ds-prose__lead` is the opening line. The first child loses its top margin and the last its bottom margin.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for tool and meta links. `.ds-links` is a wrapping row.\n- `.ds-button`: glossy key, 30px high. `.ds-button--secondary` the steel key; `.ds-button--danger` the same key in `--color-danger` for a destructive action, kept apart from the others; `.ds-button--large` the 42px hero key; `.ds-button--small` a 22px key; `.ds-button--block` shares a row equally (alert sheet). 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__grid` sets two `.ds-form__row` to a line (`--wide` spans both). Each row is a `.ds-form__label` above a `.ds-form__input`, `.ds-form__select` (a secondary key) or `.ds-form__textarea`; `is-error` on an input with `.ds-form__error` under it; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` sits under a rule; `.ds-form__actions-end` pushes the destructive key to the right.\n- `.ds-table`: framed data table. `.ds-table__head` cells take the light bar fill; `.ds-table__row` with `is-first` and `is-alt`; `.ds-table__cell`, `.ds-table__cell--name` for the bold leading column (`.ds-table__link` inside it when the row has a page of its own), `is-numeric` for right-aligned numbers.\n- `.ds-list`: a grouped table with `--radius-page` corners. Each `.ds-list__item` (`is-first`, `is-alt`) holds a `.ds-list__thumb` key with a `.ds-list__icon`, a `.ds-list__body` with `.ds-list__title` and `.ds-list__meta`, usually a badge, and a `.ds-list__chev` disclosure arrow.\n- `.ds-panel`: a card held to the rail by a strip of tape: `.ds-panel__title` centred over a dashed perforation, `.ds-panel__body` with `.ds-panel__price` and `.ds-panel__text`. For a price, a download or one figure worth a card; at most one per rail.\n- `.ds-stat`: one counter: `.ds-stat__value` is a bar-fill plate split across the middle like a flip clock, `.ds-stat__label` the small line under it. Three to five sit in a `.ds-stats` row at the top of an inner page.\n- `.ds-grid`: the shelf. Four `.ds-grid__cell`, each a `.ds-grid__box` standing on the plank (base `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4` the other fills) with a `.ds-grid__glyph`, and under the plank a centred `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__more` on the page texture. Always exactly four to a shelf; a second shelf is a second `.ds-grid`.\n- `.ds-tabs`: a bar across the sheet in the bar fill. `.ds-tabs__tab` words; `is-current` is shaded and has a notch beneath it pointing at the content, so the part that follows must be on `--color-canvas`.\n- `.ds-badge`: glossy lozenge for a count or a short word. `.ds-badge--count` is pressed into the surface, `.ds-badge--new` the second accent. Status: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`. `.ds-badges` is a row; `.ds-badges__label` is a muted word in front of it when the row is a legend.\n- `.ds-sidebar`: a boxed block in the rail: `.ds-sidebar__title` (small tracked capitals on a tinted strip), `.ds-sidebar__list` of `.ds-sidebar__item` (`is-first` on the first), each a link and a `.ds-sidebar__meta` line.\n- `.ds-notice`: a bordered message; `.ds-notice__title` for the bold lead-in; `.ds-notice--error` for errors. `.ds-notices` wraps several.\n- `.ds-pagination`: a row of round keys, `.ds-pagination__link` (`--word` for Previous and Next); `is-current` is pressed and dark, `is-disabled` flat.\n- `.ds-breadcrumb`: a path in the `.ds-page__bar` strip: `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (a small arrow) and `.ds-breadcrumb__current`.\n- `.ds-dialog`: an alert sheet in the inverse fill with a glass highlight: `.ds-dialog__title`, `.ds-dialog__text`, and `.ds-dialog__actions` with two `.ds-button--block` keys, the confirming one last. `.ds-dialog__backdrop` is the dimmed area behind it, as wide as the section it sits in.\n- `.ds-empty`: a dashed well with `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: the full-width band, stitched along its top. `.ds-footer__inner` centres `.ds-footer__brand` (`.ds-footer__name`, `.ds-footer__note`) and three `.ds-footer__col`, each a `.ds-footer__title` and `.ds-footer__links` of `.ds-footer__link`.\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 \"On the shelf\" row of the listing form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the Next release panel.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: beside the pre-order switch.\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: the Kind words box of the rail.\n- `.ds-accordion`: `
` help list with glossy bar headings (`.ds-accordion__item`, `__head`, `__body`). Here: the \"Answered already\" section of the write view.\n\n## Never\n\n- `content-width <= 1000px`: everything stays inside the 980px frame.\n- `block-gap <= 48px`: the largest gap between blocks is the 48px above the footer.\n- `font-size <= 36px`: the hero headline is the largest text.\n- `font-size >= 10px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: Verdana, a serif for headings and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `uppercase-text <= 15%`: capitals are for controls, navigation and table heads only.\n- `letter-spacing <= 1px`: nothing is tracked beyond the small capital titles.\n- `border-radius <= 6px`: keys, panels and tags are 3px, blocks 6px; nothing is a lozenge.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 4px`: only a window casts a 4px shadow; everything else is an edge.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Navigation stays in the rail: a new destination is another `.ds-nav__item`, never a top bar. A new screen is another `.ds-view` holding its own frame, rail and sheet, opened like the other inner pages. New content on the home page is another `.ds-page__title` followed by a shelf or a sheet in the main column; new content on an inner page is another `.ds-section` in the sheet, and small supporting blocks go in the rail as a `.ds-sidebar`. A raised thing (a key, a menu row, a strip) takes a `--fill-*` gradient, a hairline border darkened toward `--color-shadow`, a one-pixel top highlight and `--shadow-control`; a sunk thing (a field, a well, a current item) takes a flat or darker fill and `--shadow-control-pressed` or the inset well shadow. Keep each text token on the fills listed under the pairings above, and never assume the sheet is lighter than the text. Do not add flat coloured rectangles, wide soft shadows, borders thicker than 1px, new font families or new colours.\n", "components.css": ":root {\n --size-page: 980px;\n --size-rail: 210px;\n --size-gutter: 30px;\n --size-row: 36px;\n --size-pill: 22px;\n --size-control: 30px;\n --size-control-large: 42px;\n --size-icon: 16px;\n --size-glyph: 40px;\n --size-thumb: 36px;\n --size-knob: 34px;\n --size-dot: 8px;\n --size-phone: 196px;\n --size-screen: 244px;\n --size-hero: 340px;\n --size-box: 116px;\n --size-plank: 14px;\n --size-tabs: 38px;\n --size-dialog: 290px;\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, a fixed centred frame of two columns, the rail on the left */\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 position: relative;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 0;\n}\n.ds-page__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 var(--space-4);\n}\n.ds-page__frame {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n margin: 0;\n}\n.ds-page__rail {\n flex: 0 0 var(--size-rail);\n width: var(--size-rail);\n padding: calc(var(--size-row) * 4 + var(--border-width) * 2) 0 0;\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__title {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-6) 0 var(--space-4);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n text-transform: var(--heading-transform);\n}\n.ds-page__title.is-first { margin-top: 0; }\n.ds-page__title::after {\n content: \"\";\n flex: 1 1 0;\n height: calc(var(--size-hair) + var(--size-hair));\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-canvas) 55%, transparent);\n}\n.ds-page__sheet {\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 80%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: 0 var(--space-5);\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 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-page__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-page__bar .ds-page__count { color: var(--color-bar-alt-text); }\n\n/* views: one screen shows at a time, the home view when the address names none */\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/* section: one part of a sheet, parted from the one above by an etched groove */\n.ds-section {\n padding: var(--space-5) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-canvas);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-surface) 60%, transparent);\n}\n.ds-section.is-first {\n border-top: 0;\n box-shadow: none;\n}\n.ds-section--tint { background: var(--fill-panel); }\n.ds-section__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-section__split {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n}\n.ds-section__half {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-section__half--narrow { flex: 0 0 var(--size-dialog); }\n.ds-section__group { margin: 0 0 var(--space-4); }\n.ds-section__group.is-last { margin-bottom: 0; }\n.ds-section__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-section__text {\n margin: 0;\n color: var(--color-heading-alt);\n}\n.ds-section__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: var(--space-4) 0 0;\n}\n\n/* brand: the mark on a key-like tile, the name beside it, on the page texture */\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\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-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n text-transform: var(--heading-transform);\n}\n\n/* nav: a stack of raised rows at the head of the rail; the row of the view on show is lit.\n It is written once, outside the views, and laid over the top of each view's rail, which\n leaves room for its four rows; on the home view it drops below the hero. */\n.ds-nav {\n position: absolute;\n width: var(--size-rail);\n margin: 0;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav,\n.ds-page:has(.ds-view--home:target) .ds-nav { margin-top: calc(var(--size-hero) + var(--space-5)); }\n.ds-nav__items {\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 75%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-panel);\n list-style: none;\n}\n.ds-nav__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n height: var(--size-row);\n padding: 0 var(--space-3);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 18%, transparent);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 45%, transparent);\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 text-decoration: var(--link-decoration-quiet);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__item.is-first { border-top: 0; }\n.ds-nav__item:hover,\n.ds-nav__item.is-hover {\n background: var(--color-bar-alt);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#workshop\"],\n.ds-page:has(#workshop:target) .ds-nav__item[href=\"#workshop\"],\n.ds-page:has(#apps:target) .ds-nav__item[href=\"#apps\"],\n.ds-page:has(#almanac:target) .ds-nav__item[href=\"#apps\"],\n.ds-page:has(#settings:target) .ds-nav__item[href=\"#apps\"],\n.ds-page:has(#journal:target) .ds-nav__item[href=\"#journal\"],\n.ds-page:has(#write:target) .ds-nav__item[href=\"#write\"],\n.ds-nav__item.is-current {\n border-top-color: 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) 25%, transparent);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n.ds-nav__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-nav__chev {\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n margin-left: auto;\n opacity: 0.6;\n}\n.ds-page__tools {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n font-size: var(--text-small);\n list-style: none;\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n\n/* hero: one slide of a carousel, a lit stage with a phone standing at its right edge, knobs and dots */\n.ds-hero {\n position: relative;\n display: flex;\n gap: var(--space-5);\n height: var(--size-hero);\n margin: 0 0 var(--space-5);\n padding: var(--space-6) calc(var(--space-7) + var(--space-3)) 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: radial-gradient(ellipse 60% 90% at 78% 0, color-mix(in srgb, var(--color-inverse-text) 22%, transparent) 0, transparent 100%), var(--fill-inverse);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 22%, transparent), var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) 0 var(--space-7);\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-2);\n color: color-mix(in srgb, var(--color-inverse-text) 65%, transparent);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n letter-spacing: var(--size-hair);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__strong { font-weight: var(--weight-bold); }\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n color: color-mix(in srgb, var(--color-inverse-text) 85%, transparent);\n font-size: var(--text-large);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__note {\n color: color-mix(in srgb, var(--color-inverse-text) 65%, transparent);\n font-size: var(--text-small);\n}\n.ds-hero__phone {\n flex: 0 0 var(--size-phone);\n align-self: flex-end;\n margin: 0 var(--space-7) 0 0;\n width: var(--size-phone);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 45%, var(--color-shadow));\n border-bottom: 0;\n border-radius: calc(var(--radius-page) + var(--space-4)) calc(var(--radius-page) + var(--space-4)) 0 0;\n background: linear-gradient(to right, color-mix(in srgb, var(--color-shadow) 70%, var(--color-inverse-text)) 0, color-mix(in srgb, var(--color-shadow) 88%, var(--color-inverse-text)) 12%, color-mix(in srgb, var(--color-shadow) 88%, var(--color-inverse-text)) 88%, color-mix(in srgb, var(--color-shadow) 70%, var(--color-inverse-text)) 100%);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent), var(--shadow-dialog);\n}\n.ds-hero__speaker {\n width: var(--space-7);\n height: var(--space-1);\n margin: var(--space-4) auto;\n border-radius: var(--space-1);\n background: color-mix(in srgb, var(--color-shadow) 70%, transparent);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 22%, transparent);\n}\n.ds-hero__screen {\n height: var(--size-screen);\n overflow: hidden;\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-hero__screen-bar {\n height: calc(var(--size-pill) + var(--space-1));\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) 25%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-pill) + var(--space-1));\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-hero__screen-rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-hero__screen-row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-hero__screen-row.is-alt { background: var(--color-surface-alt); }\n.ds-hero__screen-row.is-done { color: var(--color-disabled-text); }\n.ds-hero__screen-dot {\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--fill-button-secondary);\n}\n.ds-hero__arrow {\n position: absolute;\n top: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-knob);\n height: var(--size-knob);\n margin-top: calc(var(--size-knob) / -2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-shadow) 32%, transparent);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n.ds-hero__arrow--prev { left: var(--space-3); }\n.ds-hero__arrow--next { right: var(--space-3); }\n.ds-hero__arrow:hover,\n.ds-hero__arrow.is-hover { background: color-mix(in srgb, var(--color-shadow) 55%, transparent); }\n.ds-hero__chev {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-hero__dots {\n position: absolute;\n bottom: var(--space-4);\n left: calc(var(--space-7) + var(--space-3));\n display: flex;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-hero__dot {\n display: block;\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-shadow) 45%, transparent);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 22%, transparent);\n}\n.ds-hero__dot.is-current { background: var(--color-inverse-text); }\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 > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose h1 { font-size: var(--text-h1); font-weight: var(--weight-display); }\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 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) / 2);\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-4);\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: raised keys, 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: color-mix(in srgb, var(--color-border-strong) 80%, var(--color-shadow));\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) 60%, transparent);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-border-strong) 60%, 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) 78%, var(--color-accent-text)) 0, var(--color-danger) 55%, 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) 66%, var(--color-accent-text)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-accent-text)) 55%, 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 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--block { flex: 1 1 0; }\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 width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* form: labels above the fields, two fields to a row, inset wells */\n.ds-form { margin: 0; }\n.ds-form__grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-4) var(--space-5);\n}\n.ds-form__row { min-width: 0; }\n.ds-form__row--wide { grid-column: 1 / -1; }\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-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) 16%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-surface) 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 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}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\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) var(--color-border);\n}\n.ds-form__actions-end { margin-left: auto; }\n\n/* table: framed, a light raised head, hairline rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\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-panel);\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 color-mix(in srgb, var(--color-canvas) 50%, transparent);\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 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n text-transform: var(--ui-transform);\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: middle;\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__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-table__link:hover,\n.ds-table__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n\n/* list: a grouped table of rows, each a thumb, a title with meta, and a disclosure arrow */\n.ds-list {\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-page);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-surface) 70%, transparent);\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-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__item.is-alt { background: var(--color-surface-alt); }\n.ds-list__thumb {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 80%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-list__icon {\n width: var(--size-icon);\n height: var(--size-icon);\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__chev {\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* badge: glossy lozenge, or a count pressed into the surface */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-badges__label {\n margin: 0 var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-badge {\n display: inline-block;\n flex: 0 0 auto;\n min-width: calc(var(--size-icon) + var(--space-2));\n height: calc(var(--size-icon) + var(--space-1) / 2);\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) 30%, 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: calc(var(--size-icon) + var(--space-1) / 2);\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) 85%, 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) 78%, var(--color-canvas)) 0, var(--color-accent-alt) 100%);\n color: var(--color-heading);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 50%, transparent);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 78%, var(--color-accent-text)) 0, var(--color-success) 60%, 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) 78%, var(--color-accent-text)) 0, var(--color-warning) 60%, color-mix(in srgb, var(--color-warning) 88%, var(--color-shadow)) 100%);\n color: var(--color-heading);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 50%, transparent);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-accent-text)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 88%, var(--color-shadow)) 100%);\n}\n\n/* panel: a card taped to the rail, a perforated line under its title */\n.ds-panel {\n position: relative;\n margin: var(--space-5) 0 0;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 80%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-2) * -1);\n left: 50%;\n width: calc(var(--space-7) + var(--space-4));\n height: var(--space-4);\n margin-left: calc(var(--space-6) * -1);\n background: color-mix(in srgb, var(--color-accent-alt) 55%, transparent);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 22%, transparent);\n transform: rotate(-3deg);\n}\n.ds-panel__title {\n margin: 0 var(--space-4);\n padding: var(--space-4) 0 var(--space-2);\n border-bottom: var(--border-width) dashed var(--color-border-strong);\n color: var(--color-heading-alt);\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-align: center;\n text-transform: var(--ui-transform);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n text-align: center;\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-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n}\n\n/* stats: mechanical counters, a dark plate split across the middle, the label under it */\n.ds-stats {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n text-align: center;\n}\n.ds-stat__value {\n position: relative;\n display: block;\n padding: var(--space-2) 0;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-bar);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 25%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-surface) 70%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-stat__value::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n height: var(--size-hair);\n background: color-mix(in srgb, var(--color-shadow) 40%, transparent);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 14%, transparent);\n}\n.ds-stat__label {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: four boxes standing on a shelf, their captions under the plank */\n.ds-grid {\n position: relative;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid::before {\n content: \"\";\n position: absolute;\n top: var(--size-box);\n right: 0;\n left: 0;\n height: var(--size-plank);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 60%, var(--color-shadow));\n border-radius: calc(var(--radius-control) / 2);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 50%, transparent), 0 var(--space-1) var(--space-1) color-mix(in srgb, var(--color-shadow) 22%, transparent);\n}\n.ds-grid__cell {\n min-width: 0;\n padding: 0 var(--space-3);\n}\n.ds-grid__box {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-box);\n margin: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 35%, transparent);\n border-bottom: 0;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background-color: var(--color-fill-1);\n background-image: linear-gradient(to right, color-mix(in srgb, var(--color-shadow) 22%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 14%, transparent) var(--space-2), transparent var(--space-3)), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse-text) 22%, transparent) 0, transparent 55%, color-mix(in srgb, var(--color-shadow) 20%, transparent) 100%);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n color: var(--color-inverse-text);\n}\n.ds-grid__cell--2 .ds-grid__box { background-color: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__box { background-color: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__box { background-color: var(--color-fill-4); }\n.ds-grid__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-grid__title {\n margin: calc(var(--size-plank) + var(--space-4)) 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 text-align: center;\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-grid__text {\n margin: 0 0 var(--space-1);\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-grid__more {\n display: block;\n color: var(--color-link);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\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/* tabs: words on a bar across the sheet, a notch under the current one points at its content */\n.ds-tabs {\n display: flex;\n height: var(--size-tabs);\n margin: 0;\n padding: 0 var(--space-3);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\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) 25%, transparent);\n list-style: none;\n}\n.ds-tabs__tab {\n position: relative;\n display: block;\n height: 100%;\n padding: 0 var(--space-4);\n color: color-mix(in srgb, var(--color-bar-text) 72%, transparent);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-tabs) - var(--size-hair) - var(--size-hair));\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-bar-text); }\n.ds-tabs__tab.is-current {\n background: color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset var(--size-hair) 0 0 color-mix(in srgb, var(--color-shadow) 22%, transparent), inset calc(var(--size-hair) * -1) 0 0 color-mix(in srgb, var(--color-shadow) 22%, transparent);\n color: var(--color-bar-text);\n}\n.ds-tabs__tab.is-current::after {\n content: \"\";\n position: absolute;\n bottom: calc(var(--space-2) * -1);\n left: 50%;\n width: var(--space-3);\n height: var(--space-3);\n margin-left: calc(var(--space-3) / -2);\n background: var(--color-canvas);\n transform: rotate(45deg);\n}\n\n/* sidebar: a boxed block in the rail, a tinted title strip and ruled rows */\n.ds-sidebar {\n margin: var(--space-5) 0 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 80%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-surface-strong);\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-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item.is-first { border-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 0 var(--space-4); }\n.ds-notice {\n margin: 0 0 var(--space-2);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 75%, var(--color-notice-text));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\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: round keys, the current one pressed in */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\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: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 80%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\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) - var(--size-hair) - var(--size-hair));\n text-align: center;\n text-decoration: none;\n}\n.ds-pagination__link--word { padding: 0 var(--space-3); }\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: color-mix(in srgb, var(--color-border-strong) 50%, var(--color-shadow)); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: color-mix(in srgb, var(--color-bar) 85%, 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 box-shadow: none;\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a path in the strip at the head of an inner sheet */\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-bar-alt-text);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-breadcrumb__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover { text-decoration: underline; }\n.ds-breadcrumb__sep {\n width: var(--space-2);\n height: var(--space-2);\n opacity: 0.55;\n}\n.ds-breadcrumb__current { font-weight: var(--weight-bold); }\n\n/* page header: the head of an inner sheet */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-5);\n background: var(--fill-panel);\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-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-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/* dialog: an alert sheet in the inverse fill, glossed across the top, two keys side by side */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n border-radius: var(--radius-panel);\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 padding: var(--space-4) var(--space-3) var(--space-3);\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 60%, var(--color-inverse));\n border-radius: var(--radius-page);\n background: radial-gradient(ellipse 130% 70% at 50% -30%, color-mix(in srgb, var(--color-inverse-text) 34%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 12%, transparent) 99%, transparent 100%), var(--fill-inverse);\n box-shadow: var(--shadow-dialog);\n color: var(--color-inverse-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-1);\n color: var(--color-inverse-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}\n.ds-dialog__text {\n margin: 0;\n padding: 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-dialog__actions {\n display: flex;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n}\n\n/* empty state: a dashed well sunk into the sheet */\n.ds-empty {\n padding: var(--space-4) var(--space-4);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-page);\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);\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-text-muted);\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-bold);\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 font-size: var(--text-small);\n}\n\n/* footer: a full-width band in the inverse fill, stitched along its top, columns of links */\n.ds-footer {\n position: relative;\n margin: var(--space-7) 0 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 55%, 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) 20%, transparent);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-footer::before {\n content: \"\";\n position: absolute;\n top: var(--space-2);\n right: 0;\n left: 0;\n border-top: var(--border-width) dashed color-mix(in srgb, var(--color-inverse-text) 38%, transparent);\n}\n.ds-footer__inner {\n display: flex;\n gap: var(--size-gutter);\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-6) 0 var(--space-6);\n}\n.ds-footer__brand {\n flex: 0 0 var(--size-rail);\n width: var(--size-rail);\n}\n.ds-footer__name {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-footer__note {\n margin: 0;\n color: color-mix(in srgb, var(--color-inverse-text) 65%, transparent);\n}\n.ds-footer__col {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n color: color-mix(in srgb, var(--color-inverse-text) 65%, transparent);\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-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n display: block;\n padding: calc(var(--space-1) / 2) 0;\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: underline; }\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-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.ds-accordion { margin: var(--space-3) 0 0; border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-control); overflow: hidden; }\n.ds-accordion__item + .ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__head { display: block; padding: var(--space-2) var(--space-3); background: var(--fill-bar-alt); color: var(--color-bar-alt-text); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); cursor: pointer; list-style: none; text-shadow: var(--shadow-text); }\n.ds-accordion__head::-webkit-details-marker { display: none; }\n.ds-accordion__head::before { content: \"\"; display: inline-block; width: 0; height: 0; margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.4)); border: calc(var(--text-ui) * 0.3) solid transparent; border-left: calc(var(--text-ui) * 0.4) solid currentColor; border-right-width: 0; vertical-align: calc(var(--text-ui) * 0.05); }\n.ds-accordion__item[open] > .ds-accordion__head::before { transform: rotate(90deg); }\n.ds-accordion__item[open] > .ds-accordion__head { border-bottom: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__body { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-control-pressed); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-body); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism landing specimen, rail and shelf\n\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n \n
\n\n \n\n
\n\n
\n \n
\n

New for the pocket

\n

Almanac keeps the whole week in your coat.

\n

Tides, trains, market days and the jobs you promised to do, on one well-thumbed page.

\n
\n Get Almanac\n \n \n 2.99 once. Version 1.4, for phone and tablet.\n
\n
\n
\n
\n
\n
Thursday
\n
    \n
  • High water, 07.42
    • \n
  • Bread from the market
    • \n
  • Slow train, 09.15
    • \n
  • Oil the gate hinge
    • \n
  • Low water, 13.58
    • \n
  • Ring the joiner
    • \n
  • Last ferry, 18.30
    • \n
\n
\n
\n
    \n
    • \n
    • \n
    • \n
    • \n
\n \n
\n\n
\n\n
\n
\n

From the journal

\n \n
\n\n
\n

The whole shelf

\n
\n

7.99

\n

All four apps for the pocket, and every update for good.

\n Buy the set\n
\n
\n\n
\n

Kind words

\n

It does the quiet work of keeping things in order, and I stopped looking for a better way.Maya, on the ferry daily

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

On the shelf

\n
    \n
  • \n
    \n

    Almanac

    \n

    The week on one page, tides and trains included.

    \n See the page\n
    • \n
  • \n
    \n

    Plumbline

    \n

    A level and a plumb bob that never leave your pocket.

    \n How it measures\n
    • \n
  • \n
    \n

    Commonplace

    \n

    A notebook for lines worth keeping, sorted by who said them.

    \n Read a sample\n
    • \n
  • \n
    \n

    Kettle

    \n

    One dial, one bell. A timer for tea and nothing else.

    \n Free, take one\n
    • \n
\n\n

Around the workshop

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

Small tools, built to last.

\n

Four people, one bench, no hurry.

\n

Each app starts as something one of us needed on a wet morning. Nothing ships until it has lived in a pocket for a season. The journal says the rest.

\n

What you get

\n
    \n
  • Every update, for as long as we make them
    • \n
  • An answer from the person who wrote it
    • \n
  • Your data as one plain file
    • \n
\n

Stuck, or missing a harbour? Write to us and a person answers.

\n
\n
\n
\n

Lately on the bench

\n \n
\n Everything we have shipped\n 6 of 38\n
\n
\n
\n
\n
\n
\n

Four apps, 212 harbours, one bench above the chandlery.

\n See all our apps\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n\n
\n
\n

The whole shelf

\n
\n

7.99

\n

All four apps for the pocket, and every update for good.

\n Buy the set\n
\n
\n\n
\n

At the help desk

\n \n
\n\n
\n

Kind words

\n \n
\n
\n\n
\n
\n\n
\n
    \n
  1. Workshop
    2. \n
    3. \n
  3. Our apps
    4. \n
\n Five on the shelf, one free\n
\n\n
\n
\n

Our apps

\n

Small tools for the pocket. Pay once, keep every update.

\n
\n
\n Buy the set, 7.99\n
\n
\n\n
\n

Everything on the shelf

\n \n \n \n \n \n \n \n \n \n \n \n \n
AppWhat it doesVersionLabelPrice
AlmanacThe week on one page1.4New2.99
PlumblineA level and a plumb bob2.1Shipped1.99
CommonplaceA notebook for lines worth keeping2.0In review2.99
KettleA timer for tea and nothing else1.2ShippedFree
SundialRetired last spring, still answered0.9PulledNone
The whole shelfAll four, and every update for goodSetHot7.99
\n
\n
\n Labels\n Hot\n New\n 31\n Shipped\n In review\n Pulled\n
\n A number counts testers\n
\n
\n\n
\n

Your basket

\n
\n \n

Your basket is empty

\n

Take an app down from the shelf to begin.

\n Browse the shelf\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n

About Almanac

\n \n
\n\n
\n

Next release

\n
\n

1.5

\n

Nine harbours and the summer ferry times, due in June.

\n 62%

Five of nine harbours drawn

\n Read the plan\n
\n
\n
\n\n
\n
\n\n
\n
    \n
  1. Workshop
    2. \n
    3. \n
  3. Our apps
    4. \n
    5. \n
  5. Almanac
    6. \n
\n Version 1.4, 12 May\n
\n\n
\n
\n

Almanac

\n

Sales and harbours for the pocket almanac.

\n
\n
\n Export\n Edit listing\n
\n
\n\n \n\n
\n
    \n
  • 4,812Copies this season
    • \n
  • 212Harbours covered
    • \n
  • 4.6Stars, of five
    • \n
  • 3Letters unanswered
    • \n
\n
\n\n
\n

Sales by harbour

\n \n \n \n \n \n \n \n \n \n \n \n
HarbourLast saleTide tableCopiesTakings
Saltmarsh Quay12 MayCurrent1,2043,599.96
Greyfriars Steps11 MayDue soon9862,948.14
Old Ropewalk9 MayCurrent7312,185.69
Lantern Rock2 MayOut of date4021,201.98
Millpond Sluice28 AprilCurrent188562.12
\n
\n \n 1 to 5 of 212\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n

About Almanac

\n \n
\n\n
\n

On the shelf at

\n
\n

2.99

\n

Paid once. Changes reach buyers within a day.

\n See the sales\n
\n
\n\n
\n

Listing history

\n \n
\n
\n\n
\n
\n\n
\n
    \n
  1. Our apps
    2. \n
    3. \n
  3. Almanac
    4. \n
    5. \n
  5. Settings
    6. \n
\n Last saved 12 May\n
\n\n
\n
\n

Listing settings

\n

How Almanac appears on the shelf, and who hears about it.

\n
\n
\n Back to sales\n
\n
\n\n \n\n
\n
\n

Tide tables refresh on Mondays. Harbours marked out of date are hidden from new buyers until then.

\n

Not saved. Check the reply address below and try again.

\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

Changes reach the shelf within a day.

\n
\n
\n \n \n
\n
\n \n
\n
\n On the shelf\n
  • Show on the shelf
  • Take orders before releaseBuyers pay now and get the app on the day.
\n
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n\n
\n

Asked before an app is pulled

\n
\n
\n

Pull Almanac from the shelf?

\n

Its 4,812 buyers keep their copy. Nobody new can buy it until you put it back.

\n
\n Keep it\n Pull it\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n

From the journal

\n \n
\n\n
\n

Next release

\n
\n

1.5

\n

Nine harbours and the summer ferry times, due in June.

\n See Almanac\n
\n
\n\n
\n

Kind words

\n \n
\n
\n\n
\n
\n\n
\n
    \n
  1. Workshop
    2. \n
    3. \n
  3. Journal
    4. \n
    5. \n
  5. Almanac learns the ferry times
    6. \n
\n 12 May, by Odile\n
\n\n
\n
\n

Journal

\n

Notes from the bench, one or two a month.

\n
\n
\n Answer by letter\n
\n
\n\n
\n
\n

Almanac learns the ferry times

\n

Version 1.4 is out, and it took a winter of timetables to get here.

\n

Every harbour prints its ferries differently. We typed in 212 of them by hand, checked each against the board on the quay, and then built the tide and ferry tables so that nobody has to do it twice.

\n

What changed

\n
    \n
  • Ferry times on the week page, beside the tides
    • \n
  • Nine new harbours on the north shore
    • \n
  • A quieter bell for market days
    • \n
\n

If you keep your own list

\n

Nothing is lost. Run almanac export week.txt before you update, and keep the file somewhere dry.

\n

What comes next

\n

Summer timetables arrive in June with version 1.5. If we have missed your harbour, write to us and it goes on the list.

\n
\n
\n\n
\n

Earlier entries

\n \n
\n \n Letters received on each\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n

At the help desk

\n \n
\n\n
\n

Letters this week

\n \n
\n
\n\n
\n
\n\n
\n
    \n
  1. Workshop
    2. \n
    3. \n
  3. Write to us
    4. \n
\n Answered within two days\n
\n\n
\n
\n

Write to us

\n

A letter goes to the person who made the app.

\n
\n
\n See the apps\n
\n
\n\n
\n

Answered already

\n

\n Moving to a new phone\n A harbour is missing\n Lost licence\n Refunds\n All 31 answers\n

\n
Does it work offline?

Yes. Everything is kept on your own machine.

Can I move to another computer?

Copy the library folder across and open it there.

How do I get help?

Write to us from the support page; we answer in a day.

\n
\n\n
\n

Your letter

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

Used for the answer and nothing else.

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