{ "id": "v1-sk-2bbb", "long_id": "v1.skeuomorphism.landing.s02.p11.t11.u11", "name": "Skeuomorphism landing (banner stack, folder tabs)", "era": { "slug": "skeuomorphism", "code": "sk", "name": "Skeuomorphism", "years": [ 2009, 2013 ], "description": "App-era product sites, 2009 to 2013: pages that imitate materials, with linen and paper textures, bevelled glossy keys, inset wells, stitched edges and engraved text." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1280, "fluid": false }, "summary": "A studio's home page from the years when web pages imitated physical materials: a tall textured bar with a row of joined tabs standing on its lower edge, and under it a stack of wide glossy banners, one per product, each with a bevelled icon tile, a headline and a key. It was a common shape for the sites of small desktop and phone software makers between about 2009 and 2013, built as a fixed centred column on a softly textured page. Text is small and quiet, and the richness is in the surfaces: linen and paper textures, convex keys, engraved type and one-pixel highlights along every upper edge.", "url": "https://chrono.skin/s/v1-sk-2bbb", "preview_url": "https://chrono.skin/s/v1-sk-2bbb/specimen.html", "files": { "STYLE.md": "# Skeuomorphism landing (banner stack, folder tabs)\n\n## Summary\n\nA studio's home page from the years when web pages imitated physical materials: a tall textured bar with a row of joined tabs standing on its lower edge, and under it a stack of wide glossy banners, one per product, each with a bevelled icon tile, a headline and a key. It was a common shape for the sites of small desktop and phone software makers between about 2009 and 2013, built as a fixed centred column on a softly textured page. Text is small and quiet, and the richness is in the surfaces: linen and paper textures, convex keys, engraved type and one-pixel highlights along every upper edge.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 940px (`.ds-page__wrap`). Only the navigation bar, the sub bar of an inner page, the footer band and the page texture run the full window width.\n- Navigation is a bar `--size-nav` (66px) high. The `.ds-brand` is at the left; at the right two rows share the bar: small tool links at the top and, standing on the bar's bottom edge, a row of joined tabs `--size-tab` (30px) high, one per main section; the tab of the section being shown takes the key fill. The bar, with the brand and both rows, is written once and stays at the top of every view. There is no navigation anywhere else on the home page.\n- The home page is one stack, every block the full 940px and `--size-gutter` (20px) from the next: the hero banner (`--size-hero`, 250px at least), the product banners of `.ds-grid` (two full-width banners of at least `--size-banner` 170px, then two half-width ones side by side), the slim accent `.ds-strip`, and a closing row of three (`.ds-page__row`: a wide news slab, a panel and a boxed sidebar in the proportion 2 : 1 : 1, all the same height). There is no side column on the home page and no single long sheet; each slab is its own piece of paper.\n- Inside a slab, two columns are made with `.ds-slab__split`: halves separated by a hairline, the second half tinted `--color-surface-alt`. Nothing inside a slab is boxed again except wells and windows.\n- Inner pages keep the navigation bar and the column. Directly under the navigation, touching it, a light full-width `.ds-subbar` (`--fill-bar-alt`, 30px) carries the breadcrumb at the left and a short status at the right. The hero, the banners and the strip are left out. `.ds-page-header` sits on the page texture: title and one line at the left, keys at the right, bottom-aligned. Below it an inner page takes one of two forms.\n- A working page (a list, an account screen, a form) has two columns (`.ds-page__columns`): a 200px rail on the left (`.ds-page__rail`, `--size-rail`) holding the boxed `.ds-sidebar` as a source list with the current section lit, and further `.ds-sidebar` blocks under it, and `.ds-page__main` on the right; the two columns are one height, the last block of the rail and the sheet both growing to the same foot. The main column opens with the `.ds-tabs` folder tabs, which stand on the top-left corner of `.ds-page__sheet`; the current tab is the same paper as the sheet. In the sheet, padded parts are `.ds-page__section`; the list rows, the table, the `.ds-page__foot` strip under either (pagination left, count right) and the notices run edge to edge with no side padding. Notices come first in a sheet, counter plates before a table, a form last.\n- A reading or shop page has no rail: the blocks are slabs and rows the width of the column, as on the home page. An article is a `.ds-page__row--flush` row of a wide slab (the text in `.ds-slab__body`, a tinted `.ds-slab__foot` strip of further links at its foot) beside a column of a panel and sidebars; `.ds-page__cell--stack` makes both columns end on the same line. A shop page is a row of four equal panels over one split slab.\n- Views. The specimen is a small site of six screens, one showing at a time. `home` is the landing page: hero, product banners, strip and the row of three. `shop` lists the four prices as panels and shows the basket, empty. `notebook` is the list of notes, with a rail to filter it, folder tabs and pagination. `post` is one note, the reading page, with the product panel and related notes beside it. `account` is the licences and orders screen: counter plates, the orders table, a key to the status labels, the keys for one desk and the dialog they open. `details` is the account form with its notices. The navigation tabs lead to `home`, `shop`, `notebook` and `account`; `post` and `details` are reached from the tool links, from list rows, tabs and rails, and keep the tab of their section lit.\n- Spacing scale: `--space-1` 3px (badge padding, gaps between tabs, the blur of an inset well), `--space-2` 5px (title strips, small gaps), `--space-3` 10px (between keys, list row padding, strip padding), `--space-4` 15px (control side padding, panel padding, between form rows), `--space-5` 20px (slab and section padding top and bottom, gap inside a half banner), `--space-6` 30px (slab and section side padding, banner side padding), `--space-7` 40px (wide banner side padding and gap, before the footer).\n- Control heights: `--size-pill` 22px (small keys, pagination segments), `--size-control` 28px (keys, fields), `--size-control-large` 38px (the hero key). Icon tiles are `--size-tile` 76px and `--size-tile-large` 112px; `--size-leaf` 40px is the calendar leaf of a list row; `--size-hair` 1px is the offset of every highlight and engraving.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One plain sans for everything: `--font-body`, `--font-heading` and `--font-ui` are Helvetica, then Arial, Lucida Grande and Verdana; `--font-mono` Monaco.\n- Text is small and dense, pale on the dark ground: `--text-base` 11px at `--line-body` 1.42; `--text-small` 10px; `--text-ui` 11px at `--weight-ui` 700; `--text-large` 14px for the lead and the large key.\n- Headings are bold: `--weight-heading` and `--weight-display` 700. `--text-h3` 14px, `--text-h2` 18px, `--text-h1` 22px, `--text-display` 30px at `--line-display` 1.1.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`). No uppercase and no tracking from this part.\n\n- Green baize, mahogany and brass; the set is dark. `--color-page` #1f5c3d is the felt table; `--color-canvas` #184a31 a sheet of darker felt; `--color-surface` #1b5137 rows and cells; `--color-surface-alt` #17472f alternate rows and wells; `--color-surface-strong` #123a26 title strips.\n- `--color-bar` #5b2f18 (mahogany, ivory text #f8e9c6) is the navigation bar, table head, count badges and pressed \"current\" states; `--color-bar-alt` #8b6a3b (oak, ivory text #fff4d8) is title strips and the segmented control; `--color-inverse` #24160f (ebony, ivory text) the closing band or hero block.\n- Text is `--color-text` #d8e5d6, meta `--color-text-muted` #9cbba5, headings ivory `--color-heading` #fdf6e0, sidebar and panel titles `--color-heading-alt` #f3e4b8.\n- Links are gilt: `--color-link` #f2cf6b, paler on hover (#ffe7a0), tan when visited (#d8bb8c), white when active.\n- `--color-button` #a87722 (brass, ivory text) is the one primary action colour; the secondary key is a lighter felt, `--color-button-secondary` #2c7850 with #f6f8ee text. Fields are wells darker than the felt (`--color-input` #0f3524, pale text).\n- `--color-accent` #c0302b (the red chip) for badges, `--color-accent-alt` #2d5aa3 (the blue chip, ivory text) for \"new\" markers; `--color-success` #3f9d2f, `--color-warning` #b3741a (ivory text), `--color-danger` #f0695b on `--color-danger-surface` #4a2420. Notices are ivory cards lying on the felt: `--color-notice` #f3e6c0 with dark text #3a2a12.\n- `--color-fill-1` to `--color-fill-4` (#b02a26 red, #2c58a0 blue, #5c3a7e violet, #7b4a22 walnut) are chip and wood colours for the grid blocks only; ivory text on all four.\n\n- Felt and wood. `--fill-page` is felt: a 6px fleck of dark and light fibres and a pool of light from the top centre. `--fill-inverse` is the same fleck and light over ebony. `--fill-bar` and `--fill-bar-alt` are planks: uneven horizontal grain lines over a top-lit gradient of the bar colour.\n- Keys are polished brass: `--fill-button` runs from 45% lighter at the top through the plain colour to 22% darker, with a bright inner top edge and a soft 0 3px 7px shadow (`--shadow-control`), so they sit padded above the felt. Pressed keys take a 5px inset shade.\n- Sheets are padded cushions lying on the table: `--shadow-panel` is a dark 1px ring and a soft 0 6px 14px at 50%; `--shadow-dialog` a ring and 0 10px 20px. `--fill-panel` is flat felt.\n- Corners are large and soft: `--radius-control` 10px, `--radius-panel` 16px, `--radius-page` 20px, `--radius-pill` 16px. `--fill-accent` is a chip with a highlight across its top.\n- `--shadow-text` is a soft dark shadow one pixel below light text (0 1px 1px at 60%). `--fill-input` shades the top 6px of a well. `--transition` is none.\n\n## Components\n\n- `.ds-page`: on ``. Paints the textured page. `.ds-page__wrap` is the 940px column; `.ds-page__row` a row of equal-height `.ds-page__cell` blocks (`.ds-page__cell--wide` takes two shares; `.ds-page__row--flush` drops the gap above the row when it follows a page header; `.ds-page__cell--stack` stacks the blocks of a cell and lets the last one, a sidebar or a slab body, grow to the height of the row); `.ds-page__columns` the two columns of an inner page, `.ds-page__rail` the left rail and `.ds-page__main` the right column; `.ds-page__sheet` the white sheet under the tabs, with padded `.ds-page__section` parts (`.ds-page__section--ruled` has a hairline above it, `.ds-page__section--dialog` follows the keys that opened its dialog with no gap) and the full-bleed `.ds-page__foot` strip (`.ds-page__count` is the small muted count at its right, also the wording beside a badge in a key). `.ds-view` is one screen of the specimen and `.ds-view--home` the one shown first; they only switch screens and carry no styling.\n- `.ds-slab`: a sheet in `--color-canvas` the width of the column, 20px below the block before it (`.ds-slab--flush` inside a row). `.ds-slab__title` is its ruled heading, `.ds-slab__body` its padded body, `.ds-slab__split` with `.ds-slab__half` two columns (`.ds-slab__half--ruled` is the tinted second half), `.ds-slab__label` a small bold label over a group (`is-first` on the first), `.ds-slab__note` a small muted line under a group, `.ds-slab__foot` a tinted, ruled strip at the foot of a slab.\n- `.ds-nav`: the full-width bar. `.ds-nav__inner` centres it; the `.ds-brand` stands at its left; `.ds-nav__side` stacks `.ds-nav__tools` (small `.ds-nav__tool` links) over `.ds-nav__items`, the joined row of `.ds-nav__item` tabs (`is-first` on the first). The tab of the view being shown takes the key fill, by one `:has()` rule per view in `components.css` (in a project, put `is-current` on it instead); `is-hover` lightens.\n- `.ds-brand`: the site's mark and name at the left of the navigation bar. `.ds-brand__mark` is a 38px 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-h1` in `--color-bar-text`, engraved with `--shadow-text`. 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-hero`: the first banner, on `--fill-inverse`: `.ds-hero__art` at the left with two tilted `.ds-hero__card` tiles (`.ds-hero__card--front` holds `.ds-hero__glyph`), and `.ds-hero__copy` with `.ds-hero__title` (`.ds-hero__strong` for the bold part), `.ds-hero__lead` and `.ds-hero__actions` (one `.ds-button--large` and a `.ds-hero__note`). Once per page, directly under the navigation.\n- `.ds-page-header`: the head of an inner page, on the page texture above the columns. `.ds-page-header__copy` holds `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__actions` holds one primary and at most one secondary key at the normal height.\n- `.ds-subbar`: the light full-width strip that touches the navigation on an inner page; `.ds-subbar__inner` centres the breadcrumb and a short status.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links. `.ds-prose__lead` is the opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for secondary links. `.ds-links` is a wrapping row.\n- `.ds-button`: bevelled key. `.ds-button--secondary` the secondary key (also the key on a coloured banner or the strip); `.ds-button--danger` the destructive key in `--color-danger`, kept apart from the others; `.ds-button--large` the 38px hero key, with the same corners as other keys; `.ds-button--small` a 22px key. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph; `.ds-buttons` a row, in which `.ds-buttons__end` pushes the destructive key to the far right.\n- `.ds-form`: `.ds-form__grid` lays fields two to a row; each `.ds-form__row` has a `.ds-form__label` over its control and `.ds-form__row--wide` spans both columns. `.ds-form__input` and `.ds-form__textarea` are inset wells, `.ds-form__select` looks like a secondary key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule, where `.ds-form__actions-end` pushes the destructive key to the right.\n- `.ds-table`: runs edge to edge across the sheet with no frame. `.ds-table__head` cells take the bar fill; `.ds-table__row` with `is-first` and `is-alt` stripes; `.ds-table__cell`, `.ds-table__cell--name` for the bold leading column; `is-edge` and `is-end` give the first and last column the sheet's side padding; `is-numeric` right-aligns.\n- `.ds-list`: unframed ruled rows inside a slab or an inner sheet. `.ds-list__item` (`is-first` on the first) holds a `.ds-list__leaf` calendar leaf (`.ds-list__month` over `.ds-list__day`), `.ds-list__body` with `.ds-list__title` and `.ds-list__meta`, and a badge at the right.\n- `.ds-panel`: a card with a glossy `.ds-panel__title` strip, a `.ds-panel__body` (`.ds-panel__price`, `.ds-panel__text`) and a tinted `.ds-panel__foot` strip that holds its key. For a price or a bundle: beside the news slab, beside an article, or four in a row in the shop.\n- `.ds-stat`: one raised counter plate on `--fill-bar-alt`: `.ds-stat__value` over `.ds-stat__label`. Three or four sit apart in a `.ds-stats` row at the top of an inner sheet.\n- `.ds-grid`: the product banners, two columns. `.ds-grid__cell` is a glossy banner on `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4` use the other fills. `.ds-grid__cell--wide` spans the column and `.ds-grid__cell--flip` puts the art on the right; sides alternate down the stack. Inside: `.ds-grid__icon` (a bevelled tile) with `.ds-grid__glyph`, and `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and either a secondary key (wide banners) or a `.ds-grid__more` link.\n- `.ds-strip`: the slim accent banner that closes the stack: `.ds-strip__title`, `.ds-strip__text`, one secondary key. At most one per page.\n- `.ds-tabs`: folder tabs on the top edge of the sheet. `.ds-tabs__tab`; the `is-current` tab is taller, white and joined to the sheet.\n- `.ds-badge`: small lozenge for a count or a word. `.ds-badge--count` is pressed into the surface, `.ds-badge--new` the \"new\" marker; `.ds-badge--success`, `.ds-badge--warning` (dark text) and `.ds-badge--danger` are the status labels for table cells and list rows. `.ds-badges` is a row; `.ds-badges__item` keeps a badge and its wording together, as in the key under a table.\n- `.ds-sidebar`: a boxed block: `.ds-sidebar__title` strip, `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows (`is-first` on the first), each a link and a `.ds-sidebar__meta` line. In the rail of an inner page it is the section list, and the `is-current` row takes the bar fill and holds plain text, not a link.\n- `.ds-notice`: a bar across the sheet from edge to edge, `.ds-notice__title` for the bold lead-in; `.ds-notice--error` for errors. `.ds-notices` stacks them.\n- `.ds-pagination`: one segmented key. `.ds-pagination__link` segments (`is-first` on the first); `is-current` is pressed and dark, `is-disabled` flat.\n- `.ds-breadcrumb`: engraved trail on the sub bar, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a sheet that drops from the top edge of the dimmed `.ds-dialog__backdrop`: no title bar; `.ds-dialog__body` holds a `.ds-dialog__icon` and `.ds-dialog__copy` with `.ds-dialog__title` and `.ds-dialog__text`; `.ds-dialog__actions` at the right with the confirming key last.\n- `.ds-empty`: a dashed drop zone in one row: `.ds-empty__icon`, `.ds-empty__body` with `.ds-empty__title` and `.ds-empty__text`, and one secondary key at the right. The icon is `--color-text-muted`.\n- `.ds-footer`: a band in `--color-canvas` across the window: `.ds-footer__inner` holds `.ds-footer__about` (`.ds-footer__brand`, `.ds-footer__note`) at the left and `.ds-footer__col` link columns (`.ds-footer__title`, `.ds-footer__links`) at the right.\n- `.ds-switch`: glossy sliding ON/OFF switch over a checkbox (`.ds-switch__track`, inset, with a raised knob), set as rows of a `.ds-switches` list (`.ds-switches__row`, `.ds-switches__name`). Here: the Letters row of the details form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: a download box in the details side column.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: on the Letters label.\n- `.ds-avatar`: framed photo with an inner shadow (`.ds-avatar__photo`, `.ds-avatar__glyph`), used in a `.ds-testimonial` (`.ds-testimonial__text`, `.ds-testimonial__who`). Here: the home side column.\n- `.ds-accordion`: `
` help list with glossy bar headings (`.ds-accordion__item`, `__head`, `__body`). Here: the shop view, under what a licence covers.\n\n## Never\n\n- `content-width <= 960px`: the column is 940px, fixed and centred.\n- `block-gap <= 40px`: blocks in the stack sit 20px apart; only the footer takes 40px.\n- `row-gap <= 20px`: list and table rows touch; the banners of the stack are 20px apart.\n- `font-size <= 30px`: the hero headline is the largest text.\n- `font-size >= 10px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 2`: Helvetica and a monospace.\n- `line-height <= 1.45`: body text is set at 1.42.\n- `underlined-links <= 10%`: links are gilt, not underlined, until hovered.\n- `letter-spacing <= 1px`: nothing is tracked wider than small capital titles.\n- `border-radius <= 20px`: the largest containers are 20px; nothing is rounder than the first structure's large key.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 20px`: the dialog's 20px shadow is the widest.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new product or promotion is another `.ds-grid__cell` banner with one of the `--color-fill-*` colours, its art on the side opposite the banner above. New content on the home page is another `.ds-slab` in the stack, never a side column; new content on an inner page is another `.ds-page__section` or full-bleed strip in the sheet, or on a page without a rail another slab. A raised thing (a key, a tile, a title 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 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. 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: 940px;\n --size-rail: 200px;\n --size-gutter: 20px;\n --size-nav: 66px;\n --size-tab: 30px;\n --size-banner: 170px;\n --size-hero: 250px;\n --size-art: 300px;\n --size-tile: 76px;\n --size-tile-large: 112px;\n --size-pill: 22px;\n --size-control: 28px;\n --size-control-large: 38px;\n --size-icon: 16px;\n --size-glyph: 40px;\n --size-leaf: 40px;\n --size-dialog: 380px;\n --size-hair: 1px;\n --space-1: 3px;\n --space-2: 5px;\n --space-3: 10px;\n --space-4: 15px;\n --space-5: 20px;\n --space-6: 30px;\n --space-7: 40px;\n}\n\n/* shell: textured page, a fixed column of slabs stacked one under another */\n.ds-page {\n min-width: var(--size-page);\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-page__row {\n display: flex;\n align-items: stretch;\n gap: var(--size-gutter);\n margin: var(--size-gutter) 0 0;\n}\n.ds-page__cell {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__cell--wide { flex-grow: 2; }\n.ds-page__row--flush { margin-top: 0; }\n.ds-page__cell--stack {\n display: flex;\n flex-direction: column;\n}\n.ds-page__cell--stack > .ds-slab__body,\n.ds-page__cell--stack > .ds-sidebar:last-child {\n flex: 1 1 auto;\n margin-bottom: 0;\n}\n.ds-page__cell--stack > .ds-panel {\n flex: 0 0 auto;\n margin-bottom: var(--size-gutter);\n}\n.ds-page__columns {\n display: flex;\n align-items: stretch;\n gap: var(--size-gutter);\n}\n.ds-page__rail {\n display: flex;\n flex: 0 0 var(--size-rail);\n flex-direction: column;\n width: var(--size-rail);\n padding-top: calc(var(--size-tab) + var(--space-1));\n}\n.ds-page__rail > .ds-sidebar:last-child {\n flex: 1 1 auto;\n margin-bottom: 0;\n}\n.ds-page__main {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n}\n.ds-page__sheet {\n flex: 1 1 auto;\n overflow: hidden;\n border-radius: 0 var(--radius-page) var(--radius-page) var(--radius-page);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__section { padding: var(--space-5) var(--space-6); }\n.ds-page__section--ruled { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-page__section--dialog { padding-top: 0; }\n.ds-page__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-3) var(--space-6);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-page__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* slab: a white banner-wide sheet on the page */\n.ds-slab {\n margin: var(--size-gutter) 0 0;\n overflow: hidden;\n border-radius: var(--radius-page);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-slab--flush { margin: 0; }\n.ds-slab__title {\n margin: 0;\n padding: var(--space-4) var(--space-6) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-slab__body { padding: var(--space-5) var(--space-6); }\n.ds-slab__split {\n display: flex;\n align-items: stretch;\n}\n.ds-slab__half {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-5) var(--space-6);\n}\n.ds-slab__half--ruled {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n}\n.ds-slab__label {\n margin: var(--space-5) 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-slab__label.is-first { margin-top: 0; }\n.ds-slab__note {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-slab__foot {\n padding: var(--space-4) var(--space-6);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* nav: a tall bar, brand left, small tools above a row of joined tabs that stand on the bar's bottom edge */\n.ds-nav {\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n width: var(--size-page);\n height: var(--size-nav);\n margin: 0 auto;\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\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-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-nav__side {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: space-between;\n}\n.ds-nav__tools {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-1) 0;\n list-style: none;\n}\n.ds-nav__tool {\n color: color-mix(in srgb, var(--color-bar-text) 70%, transparent);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { color: var(--color-bar-text); }\n.ds-nav__items {\n display: flex;\n margin: 0;\n padding: 0;\n overflow: hidden;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n box-shadow: 0 0 0 var(--size-hair) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n list-style: none;\n}\n.ds-nav__item {\n display: block;\n height: var(--size-tab);\n padding: 0 var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n background: color-mix(in srgb, var(--color-shadow) 22%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--size-tab);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__item.is-first { border-left: 0; }\n.ds-nav__item:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-bar-text) 16%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__item[href=\"#home\"],\n.ds-page:has(#shop:target) .ds-nav__item[href=\"#shop\"],\n.ds-page:has(#notebook:target) .ds-nav__item[href=\"#notebook\"],\n.ds-page:has(#post:target) .ds-nav__item[href=\"#notebook\"],\n.ds-page:has(#account:target) .ds-nav__item[href=\"#account\"],\n.ds-page:has(#details:target) .ds-nav__item[href=\"#account\"] {\n background: var(--fill-button);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-button-text) 35%, transparent);\n color: var(--color-button-text);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n\n/* hero: the first and tallest banner, product art left, headline and key right */\n.ds-hero {\n display: flex;\n align-items: center;\n min-height: var(--size-hero);\n margin: var(--space-6) 0 0;\n overflow: hidden;\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent), var(--shadow-panel);\n color: var(--color-inverse-text);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__art {\n position: relative;\n flex: 0 0 var(--size-art);\n align-self: stretch;\n}\n.ds-hero__card {\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--size-tile-large);\n height: var(--size-tile-large);\n margin: calc(var(--size-tile-large) / -2) 0 0 calc(var(--size-tile-large) / -2);\n border-radius: var(--radius-page);\n background: var(--fill-accent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-accent-text) 40%, transparent), var(--shadow-dialog);\n transform: translate(22%, -8%) rotate(9deg);\n}\n.ds-hero__card--front {\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-button-secondary);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas), var(--shadow-dialog);\n color: var(--color-button);\n transform: translate(-16%, 6%) rotate(-7deg);\n}\n.ds-hero__glyph {\n width: 60%;\n height: 60%;\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-6) var(--space-7) var(--space-6) 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__strong { font-weight: var(--weight-bold); }\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\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) 70%, transparent);\n font-size: var(--text-small);\n}\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n\n/* grid: wide glossy product banners, two full width and two halves */\n.ds-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--size-gutter);\n margin: var(--size-gutter) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6);\n border-radius: var(--radius-page);\n background-color: var(--color-fill-1);\n background-image:\n radial-gradient(ellipse 60% 140% at 85% 0, color-mix(in srgb, var(--color-canvas) 28%, transparent) 0, transparent 70%),\n linear-gradient(to bottom, color-mix(in srgb, var(--color-canvas) 16%, transparent) 0, transparent 50%, color-mix(in srgb, var(--color-shadow) 18%, transparent) 100%);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 35%, transparent), var(--shadow-panel);\n color: var(--color-inverse-text);\n text-shadow: var(--shadow-text);\n}\n.ds-grid__cell--2 { background-color: var(--color-fill-2); }\n.ds-grid__cell--3 { background-color: var(--color-fill-3); }\n.ds-grid__cell--4 { background-color: var(--color-fill-4); }\n.ds-grid__cell--wide {\n grid-column: 1 / 3;\n gap: var(--space-7);\n min-height: var(--size-banner);\n padding: var(--space-5) var(--space-7);\n}\n.ds-grid__cell--flip { flex-direction: row-reverse; }\n.ds-grid__icon {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-tile);\n height: var(--size-tile);\n border-radius: var(--radius-page);\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-canvas) 30%, transparent) 0, color-mix(in srgb, var(--color-canvas) 8%, transparent) 50%, color-mix(in srgb, var(--color-shadow) 12%, transparent) 50%, color-mix(in srgb, var(--color-shadow) 24%, transparent) 100%);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 45%, transparent), 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 45%, transparent);\n}\n.ds-grid__cell--wide .ds-grid__icon {\n width: var(--size-tile-large);\n height: var(--size-tile-large);\n}\n.ds-grid__glyph {\n width: 50%;\n height: 50%;\n}\n.ds-grid__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__cell--wide .ds-grid__title {\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n}\n.ds-grid__text { margin: 0 0 var(--space-3); }\n.ds-grid__cell--wide .ds-grid__text { font-size: var(--text-h3); }\n.ds-grid__more {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-grid__more:hover,\n.ds-grid__more.is-hover { text-decoration: var(--link-decoration-hover); }\n\n/* strip: the slim accent banner that closes the stack */\n.ds-strip {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin: var(--size-gutter) 0 0;\n padding: var(--space-3) var(--space-6);\n border-radius: var(--radius-page);\n background: var(--fill-accent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-accent-text) 35%, transparent), var(--shadow-panel);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-strip__title {\n margin: 0;\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}\n.ds-strip__text {\n flex: 1 1 0;\n margin: 0;\n}\n\n/* page header: title and line on the page texture, keys right, above the folder tabs */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-6) 0 var(--space-5);\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-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* sub bar: the light strip under the navigation of an inner page, holding the trail */\n.ds-subbar {\n margin: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-alt-text);\n}\n.ds-subbar__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: var(--size-page);\n height: var(--size-tab);\n margin: 0 auto;\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* breadcrumb: engraved trail on the sub bar */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-breadcrumb__sep { opacity: 0.6; }\n.ds-breadcrumb__current {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n\n/* tabs: folder tabs standing on the sheet, the current one part of it */\n.ds-tabs {\n position: relative;\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n height: calc(var(--size-tab) + var(--space-1));\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n height: calc(var(--size-tab) - var(--space-1));\n padding: 0 var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-tab) - var(--space-1) - var(--size-hair));\n text-decoration: none;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-heading); }\n.ds-tabs__tab.is-current {\n height: calc(var(--size-tab) + var(--space-1));\n border-color: color-mix(in srgb, var(--color-shadow) 14%, transparent);\n background: var(--color-canvas);\n box-shadow: none;\n color: var(--color-heading);\n line-height: var(--size-tab);\n}\n\n/* sidebar: a boxed source list, title strip, ruled rows, the current row lit */\n.ds-sidebar {\n margin: 0 0 var(--size-gutter);\n overflow: hidden;\n border-radius: var(--radius-page);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\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}\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-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-first { border-top: 0; }\n.ds-sidebar__item.is-current {\n border-top-color: color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-sidebar__item.is-current .ds-sidebar__meta {\n color: var(--color-bar-text);\n font-weight: var(--weight-body);\n}\n\n/* list: unframed ruled rows, a calendar leaf, title, meta, badge */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-6);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__leaf {\n flex: 0 0 var(--size-leaf);\n width: var(--size-leaf);\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-align: center;\n}\n.ds-list__month {\n display: block;\n background: var(--fill-bar);\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: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-list__day {\n display: block;\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-body);\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\n/* panel: framed card, glossy title strip, body, a foot strip for its key */\n.ds-panel {\n display: flex;\n flex-direction: column;\n margin: 0;\n overflow: hidden;\n border-radius: var(--radius-page);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-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-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-panel__body {\n flex: 1 1 auto;\n padding: var(--space-4);\n background: var(--fill-panel);\n}\n.ds-panel__text { margin: 0; }\n.ds-panel__price {\n margin: 0 0 var(--space-2);\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.ds-panel__foot {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* stats: a row of separate raised counter plates */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-alt-text);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-stat__value {\n display: block;\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.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n}\n\n/* table: full bleed across the sheet, glossy head, roomy striped rows */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__head.is-edge,\n.ds-table__cell.is-edge { padding-left: var(--space-6); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__head.is-end,\n.ds-table__cell.is-end { padding-right: var(--space-6); }\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 {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* notice: a bar across the sheet, edge to edge */\n.ds-notices { margin: 0; }\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-6);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 80%, var(--color-notice-text));\n background: var(--color-notice);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n color: var(--color-notice-text);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-bottom-color: color-mix(in srgb, var(--color-danger-surface) 65%, var(--color-danger));\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* form layout: labels over the fields, two fields to a row */\n.ds-form__grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4) var(--space-6);\n}\n.ds-form__row { min-width: 0; }\n.ds-form__row--wide { grid-column: 1 / 3; }\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-3);\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/* pagination: one segmented key */\n.ds-pagination {\n display: inline-flex;\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n list-style: none;\n}\n.ds-pagination__link {\n display: block;\n min-width: var(--size-control);\n height: var(--size-pill);\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\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: var(--size-pill);\n text-align: center;\n text-decoration: none;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-pagination__link.is-first { border-left: 0; }\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { color: var(--color-link-hover); }\n.ds-pagination__link.is-current {\n background: color-mix(in srgb, var(--color-bar) 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 color: var(--color-disabled-text);\n}\n\n/* dialog: a sheet that drops from the top edge of the dimmed window */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: 0 var(--space-5) var(--space-6);\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 overflow: hidden;\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-shadow) 45%, transparent);\n border-top: 0;\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__body {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-dialog__icon {\n flex: 0 0 auto;\n width: var(--size-glyph);\n height: var(--size-glyph);\n color: var(--color-button);\n}\n.ds-dialog__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\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 { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: 0 var(--space-5) var(--space-4);\n}\n\n/* empty state: a dashed drop zone, icon left, key right */\n.ds-empty {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-page);\n background: var(--color-surface);\n}\n.ds-empty__icon {\n flex: 0 0 auto;\n width: var(--size-glyph);\n height: var(--size-glyph);\n color: var(--color-text-muted);\n}\n.ds-empty__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-empty__title {\n margin: 0;\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;\n color: var(--color-text-muted);\n}\n\n/* footer: a canvas band across the window, name and note left, link columns right */\n.ds-footer {\n margin: var(--space-7) 0 0;\n padding: var(--space-6) 0 var(--space-7);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-canvas);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n display: flex;\n align-items: flex-start;\n gap: var(--space-7);\n width: var(--size-page);\n margin: 0 auto;\n}\n.ds-footer__about {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-footer__brand {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\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}\n.ds-footer__note { margin: 0; }\n.ds-footer__col { flex: 0 0 auto; }\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); 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) - var(--size-hair) - var(--size-hair));\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-h3);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: bevelled keys, text engraved */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\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) 65%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: linear-gradient(var(--color-button), var(--color-button));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--secondary {\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-border-strong) 75%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-heading);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: linear-gradient(var(--color-bar-alt), var(--color-bar-alt)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 65%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-canvas)) 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-canvas)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-canvas)) 55%, var(--color-danger) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n cursor: default;\n}\n.ds-button__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-buttons .ds-buttons__end { margin-left: auto; }\n\n/* form controls: inset wells */\n.ds-form { margin: 0; }\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) 75%, 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) 14%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\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\n/* badge: lozenge or tag, by the pill radius */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-5);\n}\n.ds-badges__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-badge {\n display: inline-block;\n min-width: calc(var(--size-icon) + var(--space-2));\n height: var(--size-icon);\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-accent-text) 35%, transparent), 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 40%, transparent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--size-icon);\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), 0 var(--size-hair) 0 var(--color-canvas);\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) 75%, 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-canvas)) 0, var(--color-success) 60%, color-mix(in srgb, var(--color-success) 90%, var(--color-shadow)) 100%);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 75%, var(--color-canvas)) 0, var(--color-warning) 60%, color-mix(in srgb, var(--color-warning) 90%, 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-canvas)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 90%, var(--color-shadow)) 100%);\n}\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-avatar { display: block; flex: none; width: calc(var(--size-control) + var(--space-4)); height: calc(var(--size-control) + var(--space-4)); padding: var(--space-1); background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-panel); }\n.ds-avatar__photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--fill-bar); color: var(--color-bar-text); }\n.ds-avatar__photo::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: var(--shadow-control-pressed); }\n.ds-avatar__glyph { display: block; width: 100%; height: 100%; fill: currentColor; }\n.ds-testimonial { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); padding: 0; border: 0; background: none; }\n.ds-testimonial__text { margin: 0; min-width: 0; font-family: var(--font-body); font-size: var(--text-small); font-style: italic; line-height: var(--line-body); color: var(--color-text); }\n.ds-testimonial__who { display: block; margin-top: var(--space-1); font-style: normal; color: var(--color-text-muted); }\n\n.ds-accordion { margin: var(--space-3) 0 0; border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-control); overflow: hidden; }\n.ds-accordion__item + .ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__head { display: block; padding: var(--space-2) var(--space-3); background: var(--fill-bar-alt); color: var(--color-bar-alt-text); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); cursor: pointer; list-style: none; text-shadow: var(--shadow-text); }\n.ds-accordion__head::-webkit-details-marker { display: none; }\n.ds-accordion__head::before { content: \"\"; display: inline-block; width: 0; height: 0; margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.4)); border: calc(var(--text-ui) * 0.3) solid transparent; border-left: calc(var(--text-ui) * 0.4) solid currentColor; border-right-width: 0; vertical-align: calc(var(--text-ui) * 0.05); }\n.ds-accordion__item[open] > .ds-accordion__head::before { transform: rotate(90deg); }\n.ds-accordion__item[open] > .ds-accordion__head { border-bottom: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__body { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-control-pressed); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-body); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism landing specimen, banner stack\n\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
\n \n \n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n \n
\n
\n
\n

Garden book 3

\n

The garden journal that remembers what you sowed, where, and how it turned out.

\n
\n Try it for a season\n \n \n Free for 90 days on any desktop.\n
\n
\n
\n\n\n
    \n
  • \n
    \n
    \n

    Tide tables

    \n

    High water, low water and first light for every harbour on your stretch of coast.

    \n See it in the shop\n
    \n
    • \n
  • \n
    \n
    \n

    Larder

    \n

    A recipe box that knows what is on the shelf and writes the shopping list for the rest.

    \n See it in the shop\n
    \n
    • \n
  • \n
    \n
    \n

    Inkwell

    \n

    Letters with a proper margin, sent as post or as mail.

    \n Inkwell in the shop\n
    \n
    • \n
  • \n
    \n
    \n

    Egg timer

    \n

    One dial, one bell. A free gift from the workshop.

    \n Get Egg timer\n
    \n
    • \n
\n\n\n
\n

We are six people and a kettle.

\n

Every app is made in one room above the chandlery.

\n Read the notebook\n
\n\n
\n
\n

From the notebook

\n \n
\n\n
\n

The whole shelf

\n
\n

45.00

\n

All four apps, one licence, two years of updates.

\n
\n
Add to basket
\n
\n\n \n
\n\n
\n
\n\n
\n
\n
\n
    \n
  1. Workshop
    2. \n
  2. ›
    3. \n
  3. Shop
    4. \n
\n Signed in as odile@example.org\n
\n
\n\n
\n\n
\n
\n

The shop

\n

One price for each app, paid once. Every licence covers all the desks you own.

\n
\n
\n Your licences\n Compare the apps\n
\n
\n\n
\n
\n

Garden book 3

\n
\n

18.00

\n

The garden journal. Owners of version 2 upgrade for 12.00.

\n
\n
Add to basket
\n
\n
\n

Tide tables

\n
\n

14.00

\n

One stretch of coast included. Further charts are 8.00 each.

\n
\n
Add to basket
\n
\n
\n

Larder

\n
\n

12.00

\n

The recipe box. A family licence for five kitchens is 36.00.

\n
\n
Add to basket
\n
\n
\n

The whole shelf

\n
\n

45.00

\n

All four apps, one licence, two years of updates.

\n
\n
Add to basket
\n
\n
\n\n
\n
\n
\n

Your basket

\n
\n \n
\n

Your basket is empty

\n

Pick an app from the shelf to begin.

\n
\n Browse apps\n
\n

Prices on this page are examples. Paying takes one page and no account; the licence arrives by mail within the minute.

\n
\n
\n

What a licence covers

\n
\n
    \n
  • Every desk and laptop you own
    • \n
  • Two years of updates, large and small
    • \n
  • A reply from the person who wrote the code
    • \n
\n

Not right after all? Ask within 60 days and the money comes back, as the notebook explains. Orders you have placed are kept under your account.

\n
\n

Questions before you buy

\n
Does it work offline?

Yes. Everything is kept on your own machine.

Can I move to another computer?

Copy the library folder across and open it there.

How do I get help?

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

\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
    \n
  1. Workshop
    2. \n
  2. ›
    3. \n
  3. Notebook
    4. \n
\n Signed in as odile@example.org\n
\n
\n\n
\n\n
\n
\n

The notebook

\n

Notes from the room above the chandlery, about twice a month.

\n
\n
\n Get notes by letter\n Read the latest\n
\n
\n\n
\n \n\n
\n \n
\n \n
\n \n Notes 1 to 7 of 38\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
    \n
  1. Workshop
    2. \n
  2. ›
    3. \n
  3. Notebook
    4. \n
  4. ›
    5. \n
  5. Garden book 3 learns about frost
    6. \n
\n Signed in as odile@example.org\n
\n
\n\n
\n\n
\n
\n

The notebook

\n

Filed under Garden book · 14 June · by Odile · 6 minutes · 18 replies

\n
\n
\n All notes\n Get Garden book 3\n
\n
\n\n
\n
\n
\n
\n

Garden book 3 learns about frost

\n

The new version knows the last frost for your plot, and plans the sowing around it.

\n

Every spring the help desk gets the same letter: the beans went out a week too soon. So this winter we taught Garden book to read forty years of weather records. It now works out the last likely frost for your own plot and moves each sowing date to suit. The earlier notes tell how the records were gathered.

\n

What changes in your journal

\n
    \n
  • Sowing dates shift with the frost date of your plot
    • \n
  • A warning leaf appears on tender plants in a cold week
    • \n
  • Last year's losses are kept beside this year's plan
    • \n
\n

Nothing you have written is touched. The frost dates sit in the margin, and one click puts them away again.

\n

Keeping your own records

\n

If you keep a thermometer in the garden, its readings count for more than ours. Run chronoskin frost ~/Garden/readings.txt once and the journal uses them from then on.

\n
\n
\n
\n

Read next

\n

\n Drawing forty harbours by hand\n Why Larder has no settings window\n A letterhead pack for Inkwell\n The kettle, and other tools\n All 38 notes\n

\n
\n
\n\n \n
\n\n
\n
\n\n
\n
\n
\n
    \n
  1. Workshop
    2. \n
  2. ›
    3. \n
  3. Your account
    4. \n
  4. ›
    5. \n
  5. Licences
    6. \n
\n Signed in as odile@example.org\n
\n
\n\n
\n\n
\n
\n

Licences and orders

\n

Everything bought from the workshop, and the desks it is switched on for.

\n
\n
\n Change details\n Add a licence\n
\n
\n\n
\n \n\n
\n \n
\n\n
\n
    \n
  • 4Apps owned
    • \n
  • 3Desks switched on
    • \n
  • 146.00Spent since the first order
    • \n
  • 212Days of updates left
    • \n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n
OrderPlacedStatusDesksTotal
Garden book 3 upgrade14 JuneShipped312.00
Tide tables, north coast charts2 JuneIn review18.00
Larder family licence19 MarchShipped536.00
Inkwell letterhead pack7 JanuaryRefunded16.00
The whole shelf30 NovemberShipped345.00
\n
\n \n Orders 1 to 5 of 11\n
\n\n
\n
\n Shipped paid and switched on\n In review payment being checked\n Refunded money returned\n 3 desks in use\n
\n
\n\n
\n

Old laptop, switched on with The whole shelf

\n

\n Move to a new desk\n Rename\n \n Release\n

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

Release this licence from the old laptop?

\n

Garden book stops opening there at once. The garden folder stays where it is.

\n
\n
\n
\n Keep it\n Release\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
    \n
  1. Workshop
    2. \n
  2. ›
    3. \n
  3. Your account
    4. \n
  4. ›
    5. \n
  5. Details
    6. \n
\n Signed in as odile@example.org\n
\n
\n\n
\n\n
\n
\n

Your details

\n

The name and address printed on receipts, and what we may write to you about.

\n
\n
\n Back to licences\n
\n
\n\n
\n \n\n
\n \n
\n\n
\n

Receipts go to one address. Change it below and the next one follows.

\n

Not saved. The postcode does not match the town.

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

This postcode is too short.

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

One address for every order.

\n
\n
\n \n \n
\n
\n LettersThree or four letters a year, never more.\n \n
  • News of new apps
  • Receipts by post as well
\n
\n
\n \n \n

Optional. Printed under the total.

\n
\n
\n
\n Save details\n Cancel\n \n
\n
\n
\n\n
\n
\n
\n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.landing.s02.p11.t11.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-2bbb\",\n \"short\": \"v1-sk-2bbb\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #1f5c3d;\n --color-canvas: #184a31;\n --color-surface: #1b5137;\n --color-surface-alt: #17472f;\n --color-surface-strong: #123a26;\n --color-bar: #5b2f18;\n --color-bar-text: #f8e9c6;\n --color-bar-alt: #8b6a3b;\n --color-bar-alt-text: #fff4d8;\n --color-inverse: #24160f;\n --color-inverse-text: #fbefd2;\n --color-text: #d8e5d6;\n --color-text-muted: #9cbba5;\n --color-heading: #fdf6e0;\n --color-heading-alt: #f3e4b8;\n --color-link: #f2cf6b;\n --color-link-quiet: #a9c6b2;\n --color-link-visited: #d8bb8c;\n --color-link-hover: #ffe7a0;\n --color-link-active: #ffffff;\n --color-border: #2c6b4a;\n --color-border-strong: #0c2a1b;\n --color-border-muted: #225a3d;\n --color-accent: #c0302b;\n --color-accent-text: #ffffff;\n --color-accent-alt: #2d5aa3;\n --color-fill-1: #b02a26;\n --color-fill-2: #2c58a0;\n --color-fill-3: #5c3a7e;\n --color-fill-4: #7b4a22;\n --color-button: #a87722;\n --color-button-text: #fffaf0;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #2c7850;\n --color-button-secondary-text: #f6f8ee;\n --color-input: #0f3524;\n --color-input-text: #f6f8ee;\n --color-input-border: #0a2618;\n --color-disabled: #235c40;\n --color-disabled-text: #6f9a82;\n --color-danger: #f0695b;\n --color-danger-surface: #4a2420;\n --color-success: #3f9d2f;\n --color-warning: #b3741a;\n --color-notice: #f3e6c0;\n --color-notice-text: #3a2a12;\n --color-focus: #f2cf6b;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-heading: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-ui: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-mono: Monaco, \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 30px;\n --text-h1: 22px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.42;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 10px;\n --radius-panel: 16px;\n --radius-pill: 16px;\n --radius-page: 20px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 22%, transparent), 0 6px 14px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), 0 3px 7px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), 0 4px 9px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 45%, transparent), 0 10px 20px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.14'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 65% 100% at 50% 0, color-mix(in srgb, white 20%, transparent) 0, transparent 100%) 0 0 / 100% 640px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, black 10%, transparent) 0, transparent 2px, color-mix(in srgb, white 5%, transparent) 3px, transparent 5px, color-mix(in srgb, black 7%, transparent) 7px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 45%, color-mix(in srgb, var(--color-bar), black 26%) 100%);\n --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, black 8%, transparent) 0, transparent 2px, color-mix(in srgb, white 7%, transparent) 4px, transparent 6px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 20%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 18%) 100%);\n --fill-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.16'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 60% 130% at 50% 0, color-mix(in srgb, white 18%, transparent) 0, transparent 100%), var(--color-inverse);\n --fill-accent: radial-gradient(ellipse 80% 60% at 50% 0, color-mix(in srgb, white 35%, transparent) 0, transparent 100%), var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 10%) 35%, var(--color-button) 70%, 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 58%) 0, color-mix(in srgb, var(--color-button), white 22%) 35%, color-mix(in srgb, var(--color-button), white 8%) 70%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 22%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 20%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 30%) 0, var(--color-input) 6px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }