{
  "id": "v1-sk-4444",
  "long_id": "v1.skeuomorphism.landing.s04.p04.t04.u04",
  "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": "pure",
  "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-4444",
  "preview_url": "https://chrono.skin/s/v1-sk-4444/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\n- Slate metal and black glass, with one blue; the set is dark. `--color-page` #383a44 is the slate page; `--color-canvas` #454853 the sheet; `--color-surface` #4a4d59 rows and cells, `--color-surface-alt` #424550 alternate rows and wells, `--color-surface-strong` #33353e title strips.\n- `--color-bar` #1a1b1f (black glass, near-white text) is the current menu row, the tab bar, the counters and pressed \"current\" states; `--color-bar-alt` #5a5e6b (brushed steel, pale text) the menu rows, the breadcrumb strip, the table head and the shelf plank; `--color-inverse` #16171b (the black stage, white text) the hero, the alert sheet and the footer band.\n- Text is `--color-text` #cdd0d8, meta `--color-text-muted` #9da2af, headings `--color-heading` #f2f3f5, section, sidebar and panel titles and form labels `--color-heading-alt` #dcdfe3.\n- Links are `--color-link` #74b9f2, lighter on hover (#a8d8ff), lilac when visited (#9aa6d8).\n- `--color-button` #2b84dc (blue, white text) is the one primary action colour; the secondary key is steel `--color-button-secondary` #626675 with near-white text. Fields are wells darker than the sheet (`--color-input` #2c2e36).\n- `--color-accent` #ee8a22 (orange) for badges, `--color-accent-alt` #7a56c2 (violet) for \"new\" markers and the tape of a panel; `--color-success` #18a546, `--color-warning` #b87a10, `--color-danger` #f0553f on `--color-danger-surface` #3d2526. Notices are a dark blue tint, `--color-notice` #33475c with #cfe2f7 text.\n- `--color-fill-1` to `--color-fill-4` (#2b84dc blue, #ee8a22 orange, #18a546 green, #747a88 steel) colour the boxes on the shelf only; white glyphs on all four.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Lato where installed, then Helvetica Neue, Helvetica and Arial; Lato stands in for the era's commercial humanist sans. `--font-mono` Menlo.\n- Larger than the era's other sets: `--text-base` 14px at `--line-body` 1.5; `--text-small` 12px for meta, badges, table heads and the footer; `--text-ui` 13px at `--weight-ui` 700 for keys, menu rows and tabs; `--text-large` 17px for the lead and the large key.\n- Headings are light, white on dark: `--weight-heading` and `--weight-display` 300; `--text-h3` 15px (bold), `--text-h2` 20px, `--text-h1` 28px, `--text-display` 36px at `--line-display` 1.2. A bold phrase inside the light headline is the only emphasis. No uppercase from this part.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Woven metal and glass. `--fill-page` is a fine diagonal weave at a 4px pitch with a faint glare over the top 260px. `--fill-bar` is black glass with a hard split at half height. `--fill-bar-alt` is brushed steel and `--fill-inverse` a top-lit black stage, both under 2px horizontal hairlines.\n- Corners: `--radius-control` 6px, `--radius-panel` 6px, `--radius-page` 8px, `--radius-pill` 11px (badges, pagination keys).\n- Keys are chunky: glossy with the same hard split (`--fill-button`), a light inner top edge, and a hard 3px ledge under them with a tight shadow below it (`--shadow-control`); a pressed key sinks onto a 1px ledge (`--shadow-control-pressed`). Sheets and boxes stand on the metal the same way: `--shadow-panel` is a 3px ledge and 0 4px 6px at 45%; `--shadow-dialog` is a dark ring, a 4px ledge and 0 5px 6px. `--shadow-text` is a dark line one pixel above light text. `--fill-input` shades the top 5px of a well. `--transition` is none.\n- Pairings this structure uses: `--color-bar-alt-text` on `--fill-bar-alt` (menu rows, breadcrumb strip, table head); `--color-bar-text` on `--fill-bar` (current menu row, tab bar, counters, the phone's title bar) and on the darkened bar colour of pressed \"current\" states (page, count badge); `--color-inverse-text` on `--fill-inverse` (hero, alert sheet, footer) and on the four `--color-fill-*` boxes; `--color-button-text` on `--fill-button` and `--color-button-secondary-text` on `--fill-button-secondary` (keys, list thumbs, pagination keys, select); `--color-accent-text` on `--fill-accent`, on the success and danger badges and on the danger key; `--color-heading` on the `--color-accent-alt` and `--color-warning` badges; `--color-heading-alt` on `--color-surface-strong` (sidebar title) and on the sheet. On the page texture: `--color-heading`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the spotlight of the hero and the glass highlight of the alert sheet (radial gradients of `--color-inverse-text` at 12 to 34%), the phone body (`--color-shadow` mixed with 12 to 30% `--color-inverse-text`) and its corner (`--radius-page` plus `--space-4`), the spine and sheen of a shelf box, the split line of a counter, the notch under the current tab (a `--space-3` square of `--color-canvas` turned 45 degrees, half of it hidden in the part below), the 3 degree tilt and 55% opacity of the tape, the engraving shadow `0 var(--size-hair) 0` of `--color-canvas` at 50 to 70% under text on the page and on light fills, the inset well shadow of fields and the empty state, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, the 1px tracking and `uppercase` of sidebar, footer and kicker titles, and `dashed` for the panel's perforation, the empty state and the footer stitching.\n\n## Components\n\n- `.ds-page`: on `<body>`; 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\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 >= 12px`: meta text is the smallest.\n- `font-weight >= 300`: light headlines stop at 300.\n- `font-families <= 2`: one sans-serif and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `letter-spacing <= 1px`: only small capital titles are tracked.\n- `border-radius <= 24px`: the phone's shoulders are the largest radius; keys and sheets are 6px.\n- `border-width <= 1px`: every edge is a hairline; weight comes from shadows and gradients.\n- `box-shadow-blur <= 6px`: depth comes from hard 3px ledges; the soft shadow under them stays tight.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves; the carousel is drawn at rest.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. 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: 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: 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: 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",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin, skeuomorphism landing specimen, rail and shelf</title>\n<meta name=\"viewport\" content=\"width=1280\">\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<div class=\"ds-page__wrap\">\n\n  <header class=\"ds-page__head\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#workshop\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-page__tools\">\n      <li><a class=\"ds-link ds-link--quiet\" href=\"#write\">Help desk</a></li>\n      <li><a class=\"ds-link ds-link--quiet\" href=\"#apps\">Basket, empty</a></li>\n      <li><a class=\"ds-link\" href=\"#almanac\">Sign in</a></li>\n    </ul>\n  </header>\n\n  <nav class=\"ds-nav\" data-component=\"nav\">\n    <ul class=\"ds-nav__items\">\n      <li><a class=\"ds-nav__item is-first\" href=\"#workshop\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M2 8l6-5.5L14 8v6h-4v-4H6v4H2z\" fill=\"currentColor\"/></svg>Workshop<svg class=\"ds-nav__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg></a></li>\n      <li><a class=\"ds-nav__item\" href=\"#apps\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><rect x=\"2\" y=\"2\" width=\"5\" height=\"5\" rx=\"1\" fill=\"currentColor\"/><rect x=\"9\" y=\"2\" width=\"5\" height=\"5\" rx=\"1\" fill=\"currentColor\"/><rect x=\"2\" y=\"9\" width=\"5\" height=\"5\" rx=\"1\" fill=\"currentColor\"/><rect x=\"9\" y=\"9\" width=\"5\" height=\"5\" rx=\"1\" fill=\"currentColor\"/></svg>Our apps<svg class=\"ds-nav__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg></a></li>\n      <li><a class=\"ds-nav__item\" href=\"#journal\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 2h10v12H3z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5.5 6h5M5.5 9h5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>Journal<svg class=\"ds-nav__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg></a></li>\n      <li><a class=\"ds-nav__item\" href=\"#write\"><svg class=\"ds-nav__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M2 3h12v10H2z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M2.5 4l5.5 5 5.5-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>Write to us<svg class=\"ds-nav__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg></a></li>\n    </ul>\n  </nav>\n\n  <section class=\"ds-view ds-view--home\" id=\"workshop\">\n\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <a class=\"ds-hero__arrow ds-hero__arrow--prev\" href=\"#workshop\" aria-label=\"Previous\"><svg class=\"ds-hero__chev\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M10 3L5 8l5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></a>\n      <div class=\"ds-hero__copy\">\n        <p class=\"ds-hero__kicker\">New for the pocket</p>\n        <h1 class=\"ds-hero__title\">Almanac keeps <span class=\"ds-hero__strong\">the whole week</span> in your coat.</h1>\n        <p class=\"ds-hero__lead\">Tides, trains, market days and the jobs you promised to do, on one well-thumbed page.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#apps\">Get Almanac\n            <svg class=\"ds-button__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2v8M4 7l4 4 4-4M3 14h10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>\n          </a>\n          <span class=\"ds-hero__note\">2.99 once. Version 1.4, for phone and tablet.</span>\n        </div>\n      </div>\n      <div class=\"ds-hero__phone\" aria-hidden=\"true\">\n        <div class=\"ds-hero__speaker\"></div>\n        <div class=\"ds-hero__screen\">\n          <div class=\"ds-hero__screen-bar\">Thursday</div>\n          <ul class=\"ds-hero__screen-rows\">\n            <li class=\"ds-hero__screen-row\"><span class=\"ds-hero__screen-dot\"></span>High water, 07.42</li>\n            <li class=\"ds-hero__screen-row is-alt is-done\"><span class=\"ds-hero__screen-dot\"></span>Bread from the market</li>\n            <li class=\"ds-hero__screen-row\"><span class=\"ds-hero__screen-dot\"></span>Slow train, 09.15</li>\n            <li class=\"ds-hero__screen-row is-alt\"><span class=\"ds-hero__screen-dot\"></span>Oil the gate hinge</li>\n            <li class=\"ds-hero__screen-row\"><span class=\"ds-hero__screen-dot\"></span>Low water, 13.58</li>\n            <li class=\"ds-hero__screen-row is-alt\"><span class=\"ds-hero__screen-dot\"></span>Ring the joiner</li>\n            <li class=\"ds-hero__screen-row\"><span class=\"ds-hero__screen-dot\"></span>Last ferry, 18.30</li>\n          </ul>\n        </div>\n      </div>\n      <ul class=\"ds-hero__dots\">\n        <li><a class=\"ds-hero__dot is-current\" href=\"#workshop\" aria-label=\"Slide 1\"></a></li>\n        <li><a class=\"ds-hero__dot\" href=\"#workshop\" aria-label=\"Slide 2\"></a></li>\n        <li><a class=\"ds-hero__dot\" href=\"#workshop\" aria-label=\"Slide 3\"></a></li>\n        <li><a class=\"ds-hero__dot\" href=\"#workshop\" aria-label=\"Slide 4\"></a></li>\n      </ul>\n      <a class=\"ds-hero__arrow ds-hero__arrow--next\" href=\"#workshop\" aria-label=\"Next\"><svg class=\"ds-hero__chev\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M6 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></a>\n    </div>\n\n    <div class=\"ds-page__frame\">\n\n      <div class=\"ds-page__rail\">\n        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">From the journal</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#journal\">Almanac learns the ferry times</a><span class=\"ds-sidebar__meta\">12 May, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#journal\">Drawing forty icons by lamp</a><span class=\"ds-sidebar__meta\">3 May, by Anselm</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#journal\">Why Plumbline has one button</a><span class=\"ds-sidebar__meta\">21 April, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">All 64 entries</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">The whole shelf</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">7.99</p>\n            <p class=\"ds-panel__text\">All four apps for the pocket, and every update for good.</p>\n            <a class=\"ds-button ds-button--small\" href=\"#apps\">Buy the set</a>\n          </div>\n        </div>\n\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Kind words</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#apps\">A week you can hold</a><span class=\"ds-sidebar__meta\">The Harbour Gazette</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apps\">Quietly indispensable</a><span class=\"ds-sidebar__meta\">Pocket Tools Monthly</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apps\">Worth the price of a pie</a><span class=\"ds-sidebar__meta\">A fisherman, by post</span></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-page__main\">\n\n        <h2 class=\"ds-page__title is-first\">On the shelf</h2>\n        <ul class=\"ds-grid\" data-component=\"grid\">\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-grid__box\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect x=\"7\" y=\"8\" width=\"26\" height=\"25\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/><path d=\"M7 16h26M14 4v7M26 4v7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/></svg></div>\n            <h3 class=\"ds-grid__title\">Almanac</h3>\n            <p class=\"ds-grid__text\">The week on one page, tides and trains included.</p>\n            <a class=\"ds-grid__more\" href=\"#almanac\">See the page</a>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--2\">\n            <div class=\"ds-grid__box\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 4v22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/><path d=\"M13 26h14l-7 11z\" fill=\"currentColor\"/><path d=\"M8 4h24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/></svg></div>\n            <h3 class=\"ds-grid__title\">Plumbline</h3>\n            <p class=\"ds-grid__text\">A level and a plumb bob that never leave your pocket.</p>\n            <a class=\"ds-grid__more\" href=\"#apps\">How it measures</a>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--3\">\n            <div class=\"ds-grid__box\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M8 6h24v28l-12-7-12 7z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/><path d=\"M14 13h12M14 19h12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/></svg></div>\n            <h3 class=\"ds-grid__title\">Commonplace</h3>\n            <p class=\"ds-grid__text\">A notebook for lines worth keeping, sorted by who said them.</p>\n            <a class=\"ds-grid__more\" href=\"#apps\">Read a sample</a>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--4\">\n            <div class=\"ds-grid__box\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><circle cx=\"20\" cy=\"22\" r=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/><path d=\"M20 14v8l5 4M16 4h8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/></svg></div>\n            <h3 class=\"ds-grid__title\">Kettle</h3>\n            <p class=\"ds-grid__text\">One dial, one bell. A timer for tea and nothing else.</p>\n            <a class=\"ds-grid__more\" href=\"#apps\">Free, take one</a>\n          </li>\n        </ul>\n\n        <h2 class=\"ds-page__title\">Around the workshop</h2>\n        <div class=\"ds-page__sheet\">\n          <div class=\"ds-section is-first\">\n            <div class=\"ds-section__split\">\n              <div class=\"ds-section__half\">\n                <div class=\"ds-prose\">\n                  <h2>Small tools, built to last.</h2>\n                  <p class=\"ds-prose__lead\">Four people, one bench, no hurry.</p>\n                  <p>Each app starts as something one of us needed on a wet morning. <strong>Nothing ships until it has lived in a pocket for a season.</strong> The <a href=\"#journal\">journal</a> says the rest.</p>\n                  <h3>What you get</h3>\n                  <ul>\n                    <li>Every update, for as long as we make them</li>\n                    <li>An answer from the person who wrote it</li>\n                    <li>Your data as one plain file</li>\n                  </ul>\n                  <p>Stuck, or missing a harbour? <a href=\"#write\">Write to us</a> and a person answers.</p>\n                </div>\n              </div>\n              <div class=\"ds-section__half\">\n                <h3 class=\"ds-section__title\">Lately on the bench</h3>\n                <ul class=\"ds-list\" data-component=\"list\">\n                  <li class=\"ds-list__item is-first\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 2h10v12H3z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5.5 6h5M5.5 9h5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#almanac\">Almanac 1.4</a><span class=\"ds-list__meta\">Ferry times, 12 May</span></div>\n                    <span class=\"ds-badge ds-badge--new\">New</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item is-alt\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 1v9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5 10h6l-3 5z\" fill=\"currentColor\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#apps\">Plumbline for tablets</a><span class=\"ds-list__meta\">In testing, 31 people</span></div>\n                    <span class=\"ds-badge ds-badge--count\">31</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 2h10v12l-5-3-5 3z\" fill=\"currentColor\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#apps\">Commonplace 2</a><span class=\"ds-list__meta\">Shared shelves, 3 May</span></div>\n                    <span class=\"ds-badge\">Hot</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item is-alt\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"9\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M8 6v3l2 1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#apps\">Kettle gets a second bell</a><span class=\"ds-list__meta\">For the pot, 21 April</span></div>\n                    <span class=\"ds-badge ds-badge--count\">7</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 2h10v12H3z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5.5 6h5M5.5 9h5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#journal\">Forty new icons</a><span class=\"ds-list__meta\">Drawn by lamp, 9 April</span></div>\n                    <span class=\"ds-badge ds-badge--success\">Shipped</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item is-alt\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 2h10v12l-5-3-5 3z\" fill=\"currentColor\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#apps\">Commonplace learns to search</a><span class=\"ds-list__meta\">By author or by line, 2 April</span></div>\n                    <span class=\"ds-badge ds-badge--count\">12</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                </ul>\n                <div class=\"ds-section__foot\">\n                  <a class=\"ds-link\" href=\"#apps\">Everything we have shipped</a>\n                  <span class=\"ds-page__count\">6 of 38</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"ds-section ds-section--tint\">\n            <div class=\"ds-section__row\">\n              <p class=\"ds-section__text\">Four apps, 212 harbours, one bench above the chandlery.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#apps\">See all our apps</a>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"apps\">\n    <div class=\"ds-page__frame\">\n\n      <div class=\"ds-page__rail\">\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">The whole shelf</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">7.99</p>\n            <p class=\"ds-panel__text\">All four apps for the pocket, and every update for good.</p>\n            <a class=\"ds-button ds-button--small\" href=\"#apps\">Buy the set</a>\n          </div>\n        </div>\n\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">At the help desk</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#write\">Moving to a new phone</a><span class=\"ds-sidebar__meta\">Read 1,204 times</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#write\">A harbour is missing</a><span class=\"ds-sidebar__meta\">Read 986 times</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#write\">Lost licence</a><span class=\"ds-sidebar__meta\">Read 402 times</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#write\">All 31 answers</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Kind words</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#apps\">A week you can hold</a><span class=\"ds-sidebar__meta\">The Harbour Gazette</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apps\">Quietly indispensable</a><span class=\"ds-sidebar__meta\">Pocket Tools Monthly</span></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-page__main\">\n        <div class=\"ds-page__sheet\">\n\n          <div class=\"ds-page__bar\">\n            <ol class=\"ds-breadcrumb\">\n              <li><a class=\"ds-breadcrumb__link\" href=\"#workshop\">Workshop</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li class=\"ds-breadcrumb__current\">Our apps</li>\n            </ol>\n            <span class=\"ds-page__count\">Five on the shelf, one free</span>\n          </div>\n\n          <header class=\"ds-page-header\">\n            <div class=\"ds-page-header__copy\">\n              <h1 class=\"ds-page-header__title\">Our apps</h1>\n              <p class=\"ds-page-header__text\">Small tools for the pocket. Pay once, keep every update.</p>\n            </div>\n            <div class=\"ds-page-header__actions\">\n              <a class=\"ds-button\" href=\"#apps\">Buy the set, 7.99</a>\n            </div>\n          </header>\n\n          <div class=\"ds-section\">\n            <h2 class=\"ds-section__title\">Everything on the shelf</h2>\n            <table class=\"ds-table\">\n              <thead>\n                <tr><th class=\"ds-table__head\">App</th><th class=\"ds-table__head\">What it does</th><th class=\"ds-table__head\">Version</th><th class=\"ds-table__head\">Label</th><th class=\"ds-table__head is-numeric\">Price</th></tr>\n              </thead>\n              <tbody>\n                <tr class=\"ds-table__row is-first\"><td class=\"ds-table__cell ds-table__cell--name\"><a class=\"ds-table__link\" href=\"#almanac\">Almanac</a></td><td class=\"ds-table__cell\">The week on one page</td><td class=\"ds-table__cell\">1.4</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--new\">New</span></td><td class=\"ds-table__cell is-numeric\">2.99</td></tr>\n                <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--name\">Plumbline</td><td class=\"ds-table__cell\">A level and a plumb bob</td><td class=\"ds-table__cell\">2.1</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Shipped</span></td><td class=\"ds-table__cell is-numeric\">1.99</td></tr>\n                <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--name\">Commonplace</td><td class=\"ds-table__cell\">A notebook for lines worth keeping</td><td class=\"ds-table__cell\">2.0</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">In review</span></td><td class=\"ds-table__cell is-numeric\">2.99</td></tr>\n                <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--name\">Kettle</td><td class=\"ds-table__cell\">A timer for tea and nothing else</td><td class=\"ds-table__cell\">1.2</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Shipped</span></td><td class=\"ds-table__cell is-numeric\">Free</td></tr>\n                <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--name\">Sundial</td><td class=\"ds-table__cell\">Retired last spring, still answered</td><td class=\"ds-table__cell\">0.9</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">Pulled</span></td><td class=\"ds-table__cell is-numeric\">None</td></tr>\n                <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--name\">The whole shelf</td><td class=\"ds-table__cell\">All four, and every update for good</td><td class=\"ds-table__cell\">Set</td><td class=\"ds-table__cell\"><span class=\"ds-badge\">Hot</span></td><td class=\"ds-table__cell is-numeric\">7.99</td></tr>\n              </tbody>\n            </table>\n            <div class=\"ds-section__foot\">\n              <div class=\"ds-badges\" data-component=\"badge\">\n                <span class=\"ds-badges__label\">Labels</span>\n                <span class=\"ds-badge\">Hot</span>\n                <span class=\"ds-badge ds-badge--new\">New</span>\n                <span class=\"ds-badge ds-badge--count\">31</span>\n                <span class=\"ds-badge ds-badge--success\">Shipped</span>\n                <span class=\"ds-badge ds-badge--warning\">In review</span>\n                <span class=\"ds-badge ds-badge--danger\">Pulled</span>\n              </div>\n              <span class=\"ds-page__count\">A number counts testers</span>\n            </div>\n          </div>\n\n          <div class=\"ds-section ds-section--tint\">\n            <h2 class=\"ds-section__title\">Your basket</h2>\n            <div class=\"ds-empty\" data-component=\"empty\">\n              <svg class=\"ds-empty__icon\" viewBox=\"0 0 48 48\" aria-hidden=\"true\"><path d=\"M8 18h32l-3 22H11z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/><path d=\"M16 18c0-7 3-11 8-11s8 4 8 11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"/></svg>\n              <h3 class=\"ds-empty__title\">Your basket is empty</h3>\n              <p class=\"ds-empty__text\">Take an app down from the shelf to begin.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#workshop\">Browse the shelf</a>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"almanac\">\n    <div class=\"ds-page__frame\">\n\n      <div class=\"ds-page__rail\">\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">About Almanac</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#almanac\">Handbook</a><span class=\"ds-sidebar__meta\">Every page explained</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#journal\">Release notes</a><span class=\"ds-sidebar__meta\">What changed in 1.4</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#almanac\">Harbours covered</a><span class=\"ds-sidebar__meta\">212 and counting</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#settings\">Listing settings</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Next release</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">1.5</p>\n            <p class=\"ds-panel__text\">Nine harbours and the summer ferry times, due in June.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#journal\">Read the plan</a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-page__main\">\n        <div class=\"ds-page__sheet\">\n\n          <div class=\"ds-page__bar\">\n            <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n              <li><a class=\"ds-breadcrumb__link\" href=\"#workshop\">Workshop</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li><a class=\"ds-breadcrumb__link\" href=\"#apps\">Our apps</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li class=\"ds-breadcrumb__current\">Almanac</li>\n            </ol>\n            <span class=\"ds-page__count\">Version 1.4, 12 May</span>\n          </div>\n\n          <header class=\"ds-page-header\" data-component=\"page-header\">\n            <div class=\"ds-page-header__copy\">\n              <h1 class=\"ds-page-header__title\">Almanac</h1>\n              <p class=\"ds-page-header__text\">Sales and harbours for the pocket almanac.</p>\n            </div>\n            <div class=\"ds-page-header__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#almanac\">Export</a>\n              <a class=\"ds-button\" href=\"#settings\">Edit listing</a>\n            </div>\n          </header>\n\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#almanac\">Sales</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#almanac\">Harbours</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#almanac\">Reviews</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#settings\">Settings</a></li>\n          </ul>\n\n          <div class=\"ds-section is-first\">\n            <ul class=\"ds-stats\" data-component=\"stats\">\n              <li class=\"ds-stat\"><span class=\"ds-stat__value\">4,812</span><span class=\"ds-stat__label\">Copies this season</span></li>\n              <li class=\"ds-stat\"><span class=\"ds-stat__value\">212</span><span class=\"ds-stat__label\">Harbours covered</span></li>\n              <li class=\"ds-stat\"><span class=\"ds-stat__value\">4.6</span><span class=\"ds-stat__label\">Stars, of five</span></li>\n              <li class=\"ds-stat\"><span class=\"ds-stat__value\">3</span><span class=\"ds-stat__label\">Letters unanswered</span></li>\n            </ul>\n          </div>\n\n          <div class=\"ds-section\">\n            <h2 class=\"ds-section__title\">Sales by harbour</h2>\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th class=\"ds-table__head\">Harbour</th><th class=\"ds-table__head\">Last sale</th><th class=\"ds-table__head\">Tide table</th><th class=\"ds-table__head is-numeric\">Copies</th><th class=\"ds-table__head is-numeric\">Takings</th></tr>\n              </thead>\n              <tbody>\n                <tr class=\"ds-table__row is-first\"><td class=\"ds-table__cell ds-table__cell--name\">Saltmarsh Quay</td><td class=\"ds-table__cell\">12 May</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Current</span></td><td class=\"ds-table__cell is-numeric\">1,204</td><td class=\"ds-table__cell is-numeric\">3,599.96</td></tr>\n                <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--name\">Greyfriars Steps</td><td class=\"ds-table__cell\">11 May</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">Due soon</span></td><td class=\"ds-table__cell is-numeric\">986</td><td class=\"ds-table__cell is-numeric\">2,948.14</td></tr>\n                <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--name\">Old Ropewalk</td><td class=\"ds-table__cell\">9 May</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Current</span></td><td class=\"ds-table__cell is-numeric\">731</td><td class=\"ds-table__cell is-numeric\">2,185.69</td></tr>\n                <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell ds-table__cell--name\">Lantern Rock</td><td class=\"ds-table__cell\">2 May</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">Out of date</span></td><td class=\"ds-table__cell is-numeric\">402</td><td class=\"ds-table__cell is-numeric\">1,201.98</td></tr>\n                <tr class=\"ds-table__row\"><td class=\"ds-table__cell ds-table__cell--name\">Millpond Sluice</td><td class=\"ds-table__cell\">28 April</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Current</span></td><td class=\"ds-table__cell is-numeric\">188</td><td class=\"ds-table__cell is-numeric\">562.12</td></tr>\n              </tbody>\n            </table>\n            <div class=\"ds-section__foot\">\n              <ul class=\"ds-pagination\" data-component=\"pagination\">\n                <li><a class=\"ds-pagination__link ds-pagination__link--word is-disabled\" href=\"#almanac\">Previous</a></li>\n                <li><a class=\"ds-pagination__link is-current\" href=\"#almanac\">1</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#almanac\">2</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#almanac\">3</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#almanac\">4</a></li>\n                <li><a class=\"ds-pagination__link ds-pagination__link--word\" href=\"#almanac\">Next</a></li>\n              </ul>\n              <span class=\"ds-page__count\">1 to 5 of 212</span>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"settings\">\n    <div class=\"ds-page__frame\">\n\n      <div class=\"ds-page__rail\">\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">About Almanac</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#almanac\">Handbook</a><span class=\"ds-sidebar__meta\">Every page explained</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#journal\">Release notes</a><span class=\"ds-sidebar__meta\">What changed in 1.4</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#almanac\">Harbours covered</a><span class=\"ds-sidebar__meta\">212 and counting</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#almanac\">Sales by harbour</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">On the shelf at</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">2.99</p>\n            <p class=\"ds-panel__text\">Paid once. Changes reach buyers within a day.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#almanac\">See the sales</a>\n          </div>\n        </div>\n\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Listing history</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#settings\">Price set to 2.99</a><span class=\"ds-sidebar__meta\">12 May, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#settings\">Moved to Everyday tools</a><span class=\"ds-sidebar__meta\">3 May, by Anselm</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#settings\">Nine harbours added</a><span class=\"ds-sidebar__meta\">21 April, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#settings\">Reply address changed</a><span class=\"ds-sidebar__meta\">2 April, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#settings\">Put on the shelf</a><span class=\"ds-sidebar__meta\">14 March, by Anselm</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#settings\">All 18 changes</a></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-page__main\">\n        <div class=\"ds-page__sheet\">\n\n          <div class=\"ds-page__bar\">\n            <ol class=\"ds-breadcrumb\">\n              <li><a class=\"ds-breadcrumb__link\" href=\"#apps\">Our apps</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li><a class=\"ds-breadcrumb__link\" href=\"#almanac\">Almanac</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li class=\"ds-breadcrumb__current\">Settings</li>\n            </ol>\n            <span class=\"ds-page__count\">Last saved 12 May</span>\n          </div>\n\n          <header class=\"ds-page-header\">\n            <div class=\"ds-page-header__copy\">\n              <h1 class=\"ds-page-header__title\">Listing settings</h1>\n              <p class=\"ds-page-header__text\">How Almanac appears on the shelf, and who hears about it.</p>\n            </div>\n            <div class=\"ds-page-header__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#almanac\">Back to sales</a>\n            </div>\n          </header>\n\n          <ul class=\"ds-tabs\">\n            <li><a class=\"ds-tabs__tab\" href=\"#almanac\">Sales</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#almanac\">Harbours</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#almanac\">Reviews</a></li>\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#settings\">Settings</a></li>\n          </ul>\n\n          <div class=\"ds-section is-first\">\n            <div class=\"ds-notices\" data-component=\"notice\">\n              <p class=\"ds-notice\"><span class=\"ds-notice__title\">Tide tables refresh on Mondays.</span> Harbours marked out of date are hidden from new buyers until then.</p>\n              <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not saved.</span> Check the reply address below and try again.</p>\n            </div>\n            <form class=\"ds-form\" data-component=\"form\" action=\"#settings\">\n              <div class=\"ds-form__grid\">\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"f-name\">Name on the shelf</label>\n                  <input class=\"ds-form__input\" id=\"f-name\" type=\"text\" value=\"Almanac\">\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"f-mail\">Replies go to</label>\n                  <input class=\"ds-form__input is-error\" id=\"f-mail\" type=\"text\" value=\"odile@chronoskin\">\n                  <p class=\"ds-form__error\">This address is missing its ending.</p>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"f-kind\">Shelved under</label>\n                  <select class=\"ds-form__select\" id=\"f-kind\"><option>Everyday tools</option><option>Travel</option><option>Weather and tides</option></select>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"f-price\">Price</label>\n                  <input class=\"ds-form__input\" id=\"f-price\" type=\"text\" value=\"2.99\">\n                  <p class=\"ds-form__hint\">Changes reach the shelf within a day.</p>\n                </div>\n                <div class=\"ds-form__row ds-form__row--wide\">\n                  <label class=\"ds-form__label\" for=\"f-note\">What is new</label>\n                  <textarea class=\"ds-form__textarea\" id=\"f-note\" placeholder=\"Two or three plain lines for the release notes\"></textarea>\n                </div>\n                <div class=\"ds-form__row ds-form__row--wide\">\n                  <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Write to buyers when a new harbour is added</label>\n                </div>\n              </div>\n              <div class=\"ds-form__actions\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"button\">Save changes</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#almanac\">Cancel</a>\n                <button class=\"ds-button is-disabled\" type=\"button\" disabled>Undo last save</button>\n                <button class=\"ds-button ds-button--danger ds-form__actions-end\" type=\"button\">Pull from the shelf</button>\n              </div>\n            </form>\n          </div>\n\n          <div class=\"ds-section ds-section--tint\">\n            <h2 class=\"ds-section__title\">Asked before an app is pulled</h2>\n            <div class=\"ds-dialog__backdrop\">\n              <div class=\"ds-dialog\" data-component=\"dialog\" role=\"alertdialog\" aria-labelledby=\"d-title\">\n                <h3 class=\"ds-dialog__title\" id=\"d-title\">Pull Almanac from the shelf?</h3>\n                <p class=\"ds-dialog__text\">Its 4,812 buyers keep their copy. Nobody new can buy it until you put it back.</p>\n                <div class=\"ds-dialog__actions\">\n                  <a class=\"ds-button ds-button--secondary ds-button--block\" href=\"#settings\">Keep it</a>\n                  <a class=\"ds-button ds-button--block\" href=\"#apps\">Pull it</a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"journal\">\n    <div class=\"ds-page__frame\">\n\n      <div class=\"ds-page__rail\">\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">From the journal</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#journal\">Almanac learns the ferry times</a><span class=\"ds-sidebar__meta\">12 May, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#journal\">Drawing forty icons by lamp</a><span class=\"ds-sidebar__meta\">3 May, by Anselm</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#journal\">Why Plumbline has one button</a><span class=\"ds-sidebar__meta\">21 April, by Odile</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">All 64 entries</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Next release</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">1.5</p>\n            <p class=\"ds-panel__text\">Nine harbours and the summer ferry times, due in June.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#almanac\">See Almanac</a>\n          </div>\n        </div>\n\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Kind words</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#apps\">A week you can hold</a><span class=\"ds-sidebar__meta\">The Harbour Gazette</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apps\">Quietly indispensable</a><span class=\"ds-sidebar__meta\">Pocket Tools Monthly</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apps\">Worth the price of a pie</a><span class=\"ds-sidebar__meta\">A fisherman, by post</span></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-page__main\">\n        <div class=\"ds-page__sheet\">\n\n          <div class=\"ds-page__bar\">\n            <ol class=\"ds-breadcrumb\">\n              <li><a class=\"ds-breadcrumb__link\" href=\"#workshop\">Workshop</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li><a class=\"ds-breadcrumb__link\" href=\"#journal\">Journal</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li class=\"ds-breadcrumb__current\">Almanac learns the ferry times</li>\n            </ol>\n            <span class=\"ds-page__count\">12 May, by Odile</span>\n          </div>\n\n          <header class=\"ds-page-header\">\n            <div class=\"ds-page-header__copy\">\n              <h1 class=\"ds-page-header__title\">Journal</h1>\n              <p class=\"ds-page-header__text\">Notes from the bench, one or two a month.</p>\n            </div>\n            <div class=\"ds-page-header__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#write\">Answer by letter</a>\n            </div>\n          </header>\n\n          <div class=\"ds-section\">\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>Almanac learns the ferry times</h1>\n              <p class=\"ds-prose__lead\">Version 1.4 is out, and it took a winter of timetables to get here.</p>\n              <p>Every harbour prints its ferries differently. <strong>We typed in 212 of them by hand</strong>, checked each against the board on the quay, and then built the <a href=\"#almanac\">tide and ferry tables</a> so that nobody has to do it twice.</p>\n              <h2>What changed</h2>\n              <ul>\n                <li>Ferry times on the week page, beside the tides</li>\n                <li>Nine new harbours on the north shore</li>\n                <li>A quieter bell for market days</li>\n              </ul>\n              <h3>If you keep your own list</h3>\n              <p>Nothing is lost. Run <code>almanac export week.txt</code> before you update, and keep the file somewhere dry.</p>\n              <h2>What comes next</h2>\n              <p>Summer timetables arrive in June with version 1.5. If we have missed your harbour, <a href=\"#write\">write to us</a> and it goes on the list.</p>\n            </div>\n          </div>\n\n          <div class=\"ds-section ds-section--tint\">\n            <h2 class=\"ds-section__title\">Earlier entries</h2>\n            <ul class=\"ds-list\">\n                  <li class=\"ds-list__item is-first\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 2h10v12H3z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5.5 6h5M5.5 9h5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#journal\">Drawing forty icons by lamp</a><span class=\"ds-list__meta\">3 May, by Anselm</span></div>\n                    <span class=\"ds-badge ds-badge--count\">14</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item is-alt\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 1v9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5 10h6l-3 5z\" fill=\"currentColor\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#journal\">Why Plumbline has one button</a><span class=\"ds-list__meta\">21 April, by Odile</span></div>\n                    <span class=\"ds-badge ds-badge--count\">9</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n                  <li class=\"ds-list__item\">\n                    <span class=\"ds-list__thumb\"><svg class=\"ds-list__icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"9\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M8 6v3l2 1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></span>\n                    <div class=\"ds-list__body\"><a class=\"ds-list__title\" href=\"#journal\">A second bell for the pot</a><span class=\"ds-list__meta\">2 April, by Anselm</span></div>\n                    <span class=\"ds-badge ds-badge--count\">22</span>\n                    <svg class=\"ds-list__chev\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M4 2l4 4-4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n                  </li>\n            </ul>\n            <div class=\"ds-section__foot\">\n              <ul class=\"ds-pagination\">\n                <li><a class=\"ds-pagination__link ds-pagination__link--word is-disabled\" href=\"#journal\">Newer</a></li>\n                <li><a class=\"ds-pagination__link is-current\" href=\"#journal\">1</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#journal\">2</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#journal\">3</a></li>\n                <li><a class=\"ds-pagination__link ds-pagination__link--word\" href=\"#journal\">Older</a></li>\n              </ul>\n              <span class=\"ds-page__count\">Letters received on each</span>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"write\">\n    <div class=\"ds-page__frame\">\n\n      <div class=\"ds-page__rail\">\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">At the help desk</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#write\">Moving to a new phone</a><span class=\"ds-sidebar__meta\">Read 1,204 times</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#write\">A harbour is missing</a><span class=\"ds-sidebar__meta\">Read 986 times</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#write\">Lost licence</a><span class=\"ds-sidebar__meta\">Read 402 times</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#write\">All 31 answers</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Letters this week</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link\" href=\"#write\">The tide is an hour out</a><span class=\"ds-sidebar__meta\">Lantern Rock, unanswered</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#write\">Could it show the moon?</a><span class=\"ds-sidebar__meta\">Greyfriars Steps, unanswered</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#write\">Thank you for the ferries</a><span class=\"ds-sidebar__meta\">Saltmarsh Quay, answered</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#write\">All 14 letters</a></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-page__main\">\n        <div class=\"ds-page__sheet\">\n\n          <div class=\"ds-page__bar\">\n            <ol class=\"ds-breadcrumb\">\n              <li><a class=\"ds-breadcrumb__link\" href=\"#workshop\">Workshop</a></li>\n              <li aria-hidden=\"true\"><svg class=\"ds-breadcrumb__sep\" viewBox=\"0 0 8 8\"><path d=\"M2.5 1l3 3-3 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></li>\n              <li class=\"ds-breadcrumb__current\">Write to us</li>\n            </ol>\n            <span class=\"ds-page__count\">Answered within two days</span>\n          </div>\n\n          <header class=\"ds-page-header\">\n            <div class=\"ds-page-header__copy\">\n              <h1 class=\"ds-page-header__title\">Write to us</h1>\n              <p class=\"ds-page-header__text\">A letter goes to the person who made the app.</p>\n            </div>\n            <div class=\"ds-page-header__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#apps\">See the apps</a>\n            </div>\n          </header>\n\n          <div class=\"ds-section\">\n            <h2 class=\"ds-section__title\">Answered already</h2>\n            <p class=\"ds-links\" data-component=\"links\">\n              <a class=\"ds-link\" href=\"#write\">Moving to a new phone</a>\n              <a class=\"ds-link is-visited\" href=\"#write\">A harbour is missing</a>\n              <a class=\"ds-link is-hover\" href=\"#write\">Lost licence</a>\n              <a class=\"ds-link is-active\" href=\"#write\">Refunds</a>\n              <a class=\"ds-link ds-link--quiet\" href=\"#write\">All 31 answers</a>\n            </p>\n          </div>\n\n          <div class=\"ds-section ds-section--tint\">\n            <h2 class=\"ds-section__title\">Your letter</h2>\n            <form class=\"ds-form\" action=\"#write\">\n              <div class=\"ds-form__grid\">\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"w-name\">Your name</label>\n                  <input class=\"ds-form__input\" id=\"w-name\" type=\"text\" value=\"\">\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"w-mail\">Where to answer</label>\n                  <input class=\"ds-form__input\" id=\"w-mail\" type=\"text\" value=\"\">\n                  <p class=\"ds-form__hint\">Used for the answer and nothing else.</p>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"w-app\">About</label>\n                  <select class=\"ds-form__select\" id=\"w-app\"><option>Almanac</option><option>Plumbline</option><option>Commonplace</option><option>Kettle</option></select>\n                </div>\n                <div class=\"ds-form__row\">\n                  <label class=\"ds-form__label\" for=\"w-phone\">Your phone or tablet</label>\n                  <input class=\"ds-form__input\" id=\"w-phone\" type=\"text\" value=\"\">\n                </div>\n                <div class=\"ds-form__row ds-form__row--wide\">\n                  <label class=\"ds-form__label\" for=\"w-text\">Your letter</label>\n                  <textarea class=\"ds-form__textarea\" id=\"w-text\" placeholder=\"What happened, and what you expected instead\"></textarea>\n                </div>\n                <div class=\"ds-form__row ds-form__row--wide\">\n                  <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me a copy of this letter</label>\n                </div>\n              </div>\n              <div class=\"ds-form__actions\">\n                <button class=\"ds-button\" type=\"button\">Send the letter</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#workshop\">Cancel</a>\n              </div>\n            </form>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </section>\n\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <div class=\"ds-footer__brand\">\n      <p class=\"ds-footer__name\">chronoskin</p>\n      <p class=\"ds-footer__note\">Four people and a kettle, above the chandlery. All figures on this page are examples.</p>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Apps</h2>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#almanac\">Almanac</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#apps\">Plumbline</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#apps\">Commonplace</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#apps\">Kettle</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Workshop</h2>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#workshop\">The shelf</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#journal\">Journal</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#apps\">Our apps</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#settings\">Listing settings</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Help</h2>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#write\">Help desk</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#write\">Write to us</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#write\">Lost licence</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#almanac\">Sign in</a></li>\n      </ul>\n    </div>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.skeuomorphism.landing.s04.p04.t04.u04\",\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-4444\",\n  \"short\": \"v1-sk-4444\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #383a44;\n  --color-canvas: #454853;\n  --color-surface: #4a4d59;\n  --color-surface-alt: #424550;\n  --color-surface-strong: #33353e;\n  --color-bar: #1a1b1f;\n  --color-bar-text: #f2f3f5;\n  --color-bar-alt: #5a5e6b;\n  --color-bar-alt-text: #eceef2;\n  --color-inverse: #16171b;\n  --color-inverse-text: #ffffff;\n  --color-text: #cdd0d8;\n  --color-text-muted: #9da2af;\n  --color-heading: #f2f3f5;\n  --color-heading-alt: #dcdfe3;\n  --color-link: #74b9f2;\n  --color-link-quiet: #a4a9b5;\n  --color-link-visited: #9aa6d8;\n  --color-link-hover: #a8d8ff;\n  --color-link-active: #ffffff;\n  --color-border: #575b68;\n  --color-border-strong: #22232a;\n  --color-border-muted: #4d505c;\n  --color-accent: #ee8a22;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #7a56c2;\n  --color-fill-1: #2b84dc;\n  --color-fill-2: #ee8a22;\n  --color-fill-3: #18a546;\n  --color-fill-4: #747a88;\n  --color-button: #2b84dc;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #626675;\n  --color-button-secondary-text: #f2f3f5;\n  --color-input: #2c2e36;\n  --color-input-text: #f2f3f5;\n  --color-input-border: #1a1b1f;\n  --color-disabled: #4d505c;\n  --color-disabled-text: #868b98;\n  --color-danger: #f0553f;\n  --color-danger-surface: #3d2526;\n  --color-success: #18a546;\n  --color-warning: #b87a10;\n  --color-notice: #33475c;\n  --color-notice-text: #cfe2f7;\n  --color-focus: #74b9f2;\n  --color-shadow: #000000;\n  --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-ui: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: Menlo, Monaco, Consolas, monospace;\n  --text-base: 14px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 17px;\n  --text-display: 36px;\n  --text-h1: 28px;\n  --text-h2: 20px;\n  --text-h3: 15px;\n  --line-body: 1.5;\n  --line-heading: 1.2;\n  --line-display: 1.2;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 300;\n  --weight-display: 300;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 6px;\n  --radius-panel: 6px;\n  --radius-pill: 11px;\n  --radius-page: 8px;\n  --shadow-panel: 0 3px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent), 0 4px 6px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 3px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 4px 4px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 48%, transparent), 0 3px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 4px 4px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n  --shadow-control-pressed: inset 0 2px 4px color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n  --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 4px 0 color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 5px 6px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n  --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent);\n  --fill-page: repeating-linear-gradient(45deg, color-mix(in srgb, black 12%, transparent) 0, color-mix(in srgb, black 12%, transparent) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(-45deg, color-mix(in srgb, white 3%, transparent) 0, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px, transparent 4px), linear-gradient(to bottom, color-mix(in srgb, white 10%, transparent) 0, transparent 100%) 0 0 / 100% 260px no-repeat, var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 26%) 0, color-mix(in srgb, var(--color-bar), white 12%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 20%) 100%);\n  --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, white 5%, transparent) 0, color-mix(in srgb, white 5%, transparent) 1px, transparent 1px, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 16%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 16%) 100%);\n  --fill-inverse: repeating-linear-gradient(0deg, color-mix(in srgb, white 3%, transparent) 0, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 18%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 30%) 100%);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 26%) 0, var(--color-accent) 55%, color-mix(in srgb, var(--color-accent), black 14%) 100%);\n  --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 32%) 0, color-mix(in srgb, var(--color-button), white 10%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 44%) 0, color-mix(in srgb, var(--color-button), white 22%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, color-mix(in srgb, var(--color-button), black 10%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 20%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 18%) 100%);\n  --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 30%) 0, var(--color-input) 5px);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}